refresh html

I’m trying to toggle the state of a circuit with arduino html page firing a relay, the circuit has another 2 way switch which can change the state of the circuit. I want my html page to recognise the state of the circuit. I’m simulating this with a toggle to an attribute. The thing is i have to hit F5 to resfresh the html and make the page show the new state of the circuit.

I must admit I’ve borrowed the code below but used it a few times and thought i understood it, maybe not!

I could be asking for a simple ‘refresh’ function? or is the structure of my code wrong?

Many thanks

    #include <SPI.h>
    #include <Ethernet.h>
     
    byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; //physical mac address
    byte ip[] = { 192, 168, 1, 108 }; // ip in lan
    byte gateway[] = { 192, 168, 1, 1 }; // internet access via router
    byte subnet[] = { 255, 255, 255, 0 }; //subnet mask
    EthernetServer server(80); //server port
     
    String readString;
    
    int data = 1;
     
    void setup(){
     
      //start Ethernet
      Ethernet.begin(mac, ip, gateway, subnet);
      server.begin();
      pinMode(7,OUTPUT);
      digitalWrite(7,HIGH);
    }
     
    void loop(){


     // Create a client connection
      EthernetClient client = server.available();
      if (client) {
        while (client.connected()) {
          if (client.available()) {
            char c = client.read();
     
            //read char by char HTTP request
            if (readString.length() < 100) {
     
              //store characters to string
              readString += c;
              //Serial.print(c);
            }
     
            //if HTTP request has ended
            if (c == '\n') {
        
              client.println("HTTP/1.1 200 OK"); //send new page
              client.println("Content-Type: text/html");
              client.println();
              client.println("<HTML>");
              client.println("<HEAD>");
              client.println("<meta name='apple-mobile-web-app-capable' content='yes' />");
              client.println("<meta name='apple-mobile-web-app-status-bar-style' content='blue-translucent' />");
              client.println("<link rel='stylesheet' type='text/css' href='http://homepage.ntlworld.com/nealcarter/a.css' />");
              client.println("<TITLE>Neal's Home Automation Test</TITLE>");
              client.println("</HEAD>");
              client.println("<BODY>");
              client.println("<H1>Home Automation</H1>");
              client.println("<hr />");
              client.println("
");
              if (data == 0) {
              client.println("<a href=\"/?F1on\"\">On 1</a>");
              client.println("<a href=\"/?F1off\"\">--</a>



");                      
              }
              if (data == 1) {
              client.println("<a href=\"/?F1on\"\">--</a>");
              client.println("<a href=\"/?F1off\"\">Off 1</a>



");                      
              }
              client.println(data);
              client.println("</BODY>");
              client.println("</HTML>");
     
              delay(1);
              //stopping client
              client.stop();
          
              if(readString.indexOf("?F1on") >0)
              {
                digitalWrite(7,LOW);
                data = 1;
                 }
              
              if(readString.indexOf("?F1off") >0)
              {
               digitalWrite(7,HIGH);
               data = 0;
                 }
                 
              readString="";

     
            }
          }
        }
      }

    }

If you find it acceptable for the whole page to auto-refresh in its entirety, google for "html meta refresh" to find how to add a refresh tag to your HTML.

If you want to update just the data values inside the web page, without refreshing the whole page, you will need to learn about javascript and Ajax.

-br

Super thanks,
I dont mind refreshing the complete page.
I’ve added in the refresh command but the page is continuously refreshing is that right, doesn’t feel very efficient.

Would this pseudo code work;
if data attribute has changed then “send” the refresh command

    #include <SPI.h>
    #include <Ethernet.h>
     
    byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; //physical mac address
    byte ip[] = { 192, 168, 1, 108 }; // ip in lan
    byte gateway[] = { 192, 168, 1, 1 }; // internet access via router
    byte subnet[] = { 255, 255, 255, 0 }; //subnet mask
    EthernetServer server(80); //server port
     
    String readString;
    
    int data = 1;
     
    void setup(){
     
      //start Ethernet
      Ethernet.begin(mac, ip, gateway, subnet);
      server.begin();
      pinMode(7,OUTPUT);
      digitalWrite(7,HIGH);
    }
     
    void loop(){


     // Create a client connection
      EthernetClient client = server.available();
      if (client) {
        while (client.connected()) {
          if (client.available()) {
            char c = client.read();
     
            //read char by char HTTP request
            if (readString.length() < 100) {
     
              //store characters to string
              readString += c;
              //Serial.print(c);
            }
     
            //if HTTP request has ended
            if (c == '\n') {
        
              client.println("HTTP/1.1 200 OK"); //send new page
              client.println("Content-Type: text/html");
              client.println();
              client.println("<HTML>");
              client.println("<HEAD>");
              client.println("<meta name='apple-mobile-web-app-capable' content='yes' />");
              client.println("<meta name='apple-mobile-web-app-status-bar-style' content='blue-translucent' />");
              client.println("<link rel='stylesheet' type='text/css' href='http://homepage.ntlworld.com/nealcarter/a.css' />");
              client.println("<TITLE>Neal's Home Automation Test</TITLE>");
              client.println("</HEAD>");
              client.println("<BODY>");
              client.println("<H1>Home Automation</H1>");
              client.println("<hr />");
              client.println("
");
              if (data == 0) {
              client.println("<a href=\"/?F1on\"\">On 1</a>");
              client.println("<a href=\"/?F1off\"\">--</a>



");                      
              }
              if (data == 1) {
              client.println("<a href=\"/?F1on\"\">--</a>");
              client.println("<a href=\"/?F1off\"\">Off 1</a>



");                      
              }
              client.println(data);
              client.println("</BODY>");
              client.println("<meta http-equiv=refresh content=1;URL='//192.168.1.108/'>");
              client.println("</HTML>");
     
              delay(1);
              //stopping client
              client.stop();
          
              if(readString.indexOf("?F1on") >0)
              {
                digitalWrite(7,LOW);
                data = 1;
                 }
              
              if(readString.indexOf("?F1off") >0)
              {
               digitalWrite(7,HIGH);
               data = 0;
                 }
                 
              readString="";

     
            }
          }
        }
      }

    }

Some meta refresh code for retrieving arduino data.

// zoomkat's meta refresh data frame test page 4/12/13
// use http://192.168.1.102:84 in your brouser for main page
// http://192.168.1.102:84/data static data page
// http://192.168.1.102:84/datastart meta refresh data page
// for use with W5100 based ethernet shields
// set the refresh rate to 0 for fastest update
// use STOP for single data updates

#include <SPI.h>
#include <Ethernet.h>

const int analogInPin0 = A0;
const int analogInPin1 = A1;
const int analogInPin2 = A2;
const int analogInPin3 = A3;
const int analogInPin4 = A4;
const int analogInPin5 = A5;

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; //physical mac address
byte ip[] = { 192, 168, 1, 102 }; // arduino ip in lan
byte gateway[] = { 192, 168, 1, 1 }; // internet access via router
byte subnet[] = { 255, 255, 255, 0 }; //subnet mask
EthernetServer server(84); //server port
unsigned long int x=0; //set refresh counter to 0
String readString; 

//////////////////////

void setup(){
  Serial.begin(9600);
    // disable SD SPI if memory card in the uSD slot
  pinMode(4,OUTPUT);
  digitalWrite(4,HIGH);

  Ethernet.begin(mac, ip, gateway, gateway, subnet);
  server.begin();
  Serial.println("meta refresh data frame test"); // so I can keep track of what is loaded
}

void loop(){
  EthernetClient client = server.available();
  if (client) {
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
         if (readString.length() < 100) {
          readString += c; 
         } 
        //check if HTTP request has ended
        if (c == '\n') {

          //check get atring received
          Serial.println(readString);

          //output HTML data header
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type: text/html");
          client.println();

          //generate data page
          if(readString.indexOf("data") >0) {  //checks for "data" page
            x=x+1; //page upload counter
            client.print("<HTML><HEAD>");
            //meta-refresh page every 1 seconds if "datastart" page
            if(readString.indexOf("datastart") >0) client.print("<meta http-equiv='refresh' content='1'>"); 
            if(readString.indexOf("datafast") >0) client.print("<meta http-equiv='refresh' content='0'>"); 
            client.print("<title>Zoomkat's meta-refresh test</title></head><BODY>
");
            client.print("page refresh number ");
            client.print(x); //current refresh count
            client.print("

");
              //output the value of each analog input pin
            client.print("analog input0 ");
            client.print(" is ");
            client.print(analogRead(analogInPin0));
            client.println("
");
            
            client.print("analog input1 ");
            client.print(" is ");
            client.print(analogRead(analogInPin1));
            client.println("
");
                        
            client.print("analog input2 ");
            client.print(" is ");
            client.print(analogRead(analogInPin2));
            client.println("
");
            
            client.print("analog input3 ");
            client.print(" is ");
            client.print(analogRead(analogInPin3));
            client.println("
");
                                    
            client.print("analog input4 ");
            client.print(" is ");
            client.print(analogRead(analogInPin4));
            client.println("
");
            
            client.print("analog input5 ");
            client.print(" is ");
            client.print(analogRead(analogInPin5));
            client.println("
");
            client.print("</BODY></HTML>");
           }
          //generate main page with iframe
          else
          {
            client.print("<HTML><HEAD><TITLE>Zoomkat's frame refresh test</TITLE></HEAD>");
            client.print("Zoomkat's Arduino frame meta refresh test 4/12/13");
            client.print("

Arduino analog input data frame:
");
            client.print("&nbsp;&nbsp;<a href='http://192.168.1.102:84/datastart' target='DataBox' title=''yy''>META-REFRESH</a>");
            client.print("&nbsp;&nbsp;&nbsp;&nbsp;<a href='http://192.168.1.102:84/data' target='DataBox' title=''xx''>SINGLE-STOP</a>");
            client.print("&nbsp;&nbsp;&nbsp;&nbsp;<a href='http://192.168.1.102:84/datafast' target='DataBox' title=''zz''>FAST-DATA</a>
");
            client.print("<iframe src='http://192.168.1.102:84/data' width='350' height='250' name='DataBox'>");
            client.print("</iframe>
</HTML>");
          }
          delay(1);
          //stopping client
          client.stop();
          //clearing string for next read
          readString="";
        }
      }
    }
  }
}

Hi!
I’m a starter in arduino ethernet using.
I read the last post, but i don’ understand. It is too complicated for me.
I would refresh the ethernet webpage when an int (value of an integer) is changing.
I know the autorefresh meta. I refresh my webpage in evry 60 sec. I need 60 sec, because iuse some input type, and if i want to fill them, i need 60 sec.
I use buttoms, select, and chechbox inputs, and the buttoms, and other inputs are refresh the page too.
But now, if an integer is change, i immediately need to refresh the page without buttoms, input fields, or links.
How can I realize that?
I think I have to use scripts, something like this:

if(x == 1) {                           //x is the integer
  client.println("<myFunction()>");
  client.println("<script>");
  client.println("function myFunction() {");
  client.println("    location.reload();");     //location.reload(true/false); If false, the page will be  reloaded from      
  client.println("}");                              //cache, else from the server.
  client.println("</script>");
  x== 0;
}

But the
client.println("<myFunction()>");
row is not good, and i don’t find the solution on the net.
Please help me!
Thanks a lot!

But the
client.println("<myFunction()>");
row is not good

You will need to provide a lot more details about what “not good” means.

XD

I don’t know what is not good, because i’m stupid in html programing.
I know only that:
I can use a similar solution with buttoms:

<button onclick="myFunction()">Reload</button>
<script>
function myFunction() {
    location.reload();
}
</script>

And it works perfectly.
But i don’t know how can i start the script in HTML without button, or something other active input.
How can I use this script if an integer is changing?
So.

The this part of the code:

<script>
function myFunction() {
    location.reload();
}
</script>

is good.
But I don’t have to use the <button onclick="myFunction()">Reload</button> line to start the script, because i dont need button.
But the <myFunction()> is do nothing.

How can I use this script if an integer is changing?

HTML pages no nothing about integers. So, how can an integer be changing? A text field may be showing some data that looks like an integer value, but it is not an integer.

Hmm...
I don"t need a variable, or an integer in the HTML.
I only need a HTML row, that launch a script. Without buttons, links, or some active inputs.
If i have that row, when it needs, the arduino code will send this row to the ethernet and the script will run.

I am sure in that there is a solution.

Without buttons, links, or some active inputs.

The script to be executed is triggered by one of those active inputs.

If you want the client to ask the Arduino for a new value every time the Arduino has a new value, you must realize that that is impossible. The client has no way of knowing that the Arduino has a new value.

The Arduino, which knows that it has a new value, has no way of knowing that a client cares, so it can't push data to a client.

You can stick with the Meta tags and get the data on a periodic basis. You do NOT have to get a complete new page, though. You can use frames, and just get data to update a single frame.

I only need a HTML row

I have no idea what you mean by "a HTML row". HTML doesn't have rows. Tables have rows. HTML has tables.

I don't HTML row need, I need HTML line. :slight_smile:

Ok. I understand.

If I can refresh an ethernetcliens only button, or some input type, can I use a hidden text box?

If it is possible, the arduino can change the value of the textbox. And if the HTML can perceive that like a "onchange" activiti, it can launch the script.

Is it possible?

If I can refresh an ethernetcliens only button, or some input type, can I use a hidden text box?

Buttons on a form can generate an even when pressed or released. Text boxes can generate events when the content changes.

You can control what happens when these events occur.

If you do put a hidden text box on the form, how will the contents of the text box change?

String bigyo; //declare bigyo
int x = 0;  // declare x
         

if(x == 1){
 bigyo = "1";
}         
else{
bigyo = "0"; 
}

client.println(F("<form action=\"/\" method=\"get\">"))
client.print(F(" <td><INPUT TYPE=\"text\" name=\"refr\" onchange=\"this.form.submit();\" VALUE =\""+bigyo+"\"</td>"));
client.println(F("</form>"));

“bigyo” will change, so the value of the textbox will change too.

What do you think??
If it works how can I hide this textbox?

"bigyo" will change, so the value of the textbox will change too.

But ONLY in the event that the client makes another request.

It is very sad...

katonafull:
It is very sad...

What is? There is NO possible way that a client can get new data from a server without making a GET request.

What can be altered is how much data the server needs to respond with. If the page uses frames, the server can reply with just one frame's worth of data, instead of the entire page. I've already made that hint once.