Webserver on Arduino: Refresh issues

Question

I am using W5100 Ethernet Shield Network Module with arduino Uno as a webserver to trigger four relays connected to it.

The relays may be toggled through the four buttons attached to it physically, or through the four buttons on the hosted webpage. There is a counter how many times the relays are toggled which can be reset through a button on the webpage.

My issue is, whenever I toggle the relay through physical button, it does not update the counter on the webpage. And if I refresh the page, the last command from the page, such as togglerelay1 keeps echoing.

What solution do you propose to this problem:

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

int Relay1 = 2;
int Relay2 = 3;
int Relay3 = 4;
int Relay4 = 5;
int Button1 = 8;
int Button2 = 9;
int Button3 = 10;
int Button4 = 11;

String on = "On";
String off = "Off";

String Relay1Status = on;
String Relay2Status = on;
String Relay3Status = on;
String Relay4Status = on;

int count1 = 0;
int count2 = 0;
int count3 = 0;
int count4 = 0;

byte toggle1 = LOW;
byte toggle2 = LOW;
byte toggle3 = LOW;
byte toggle4 = LOW;

void toggleRelay1();
void toggleRelay2();
void toggleRelay3();
void toggleRelay4();

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };   //physical mac address
byte ip[] = { 172, 168, 1, 178 };                      // ip in lan (that's what you need to use in your browser. ("192.168.1.178")
byte gateway[] = { 172, 168, 1, 1 };                   // internet access via router
byte subnet[] = { 255, 255, 255, 0 };                  //subnet mask
EthernetServer server(80);                             //server port
String readString;

void setup() {
  // Open serial communications and wait for port to open:
  Serial.begin(9600);
  while (!Serial) {
    ; // wait for serial port to connect. Needed for Leonardo only
  }
  pinMode(Relay1, OUTPUT);
  pinMode(Relay2, OUTPUT);
  pinMode(Relay3, OUTPUT);
  pinMode(Relay4, OUTPUT);
  pinMode(Button1, INPUT_PULLUP);
  pinMode(Button2, INPUT_PULLUP);
  pinMode(Button3, INPUT_PULLUP);
  pinMode(Button4, INPUT_PULLUP);
  // start the Ethernet connection and the server:
  Ethernet.begin(mac, ip, gateway, subnet);
  server.begin();
  Serial.print("server is at ");
  Serial.println(Ethernet.localIP());
}


void loop() {

  if (digitalRead(Button1) == LOW) {
    toggleRelay1();
    while (digitalRead(Button1) == LOW);
  }
  if (digitalRead(Button2) == LOW) {
    toggleRelay2();
    while (digitalRead(Button2) == LOW);
  }
  if (digitalRead(Button3) == LOW) {
    toggleRelay3();
    while (digitalRead(Button3) == LOW);
  }
  if (digitalRead(Button4) == LOW) {
    toggleRelay4();
    while (digitalRead(Button4) == LOW);
  }

  // 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') {
          Serial.println(readString); //print to serial monitor for debuging
          homepage();
          //controls the Arduino if you press the buttons
          if (readString.indexOf("?resetcount1") > 0) {
            count1 = 0;
          }
          if (readString.indexOf("?resetcount2") > 0) {
            count2 = 0;
          }
          if (readString.indexOf("?resetcount3") > 0) {
            count3 = 0;
          }
          if (readString.indexOf("?resetcount4") > 0) {
            count4 = 0;
          }
          if (readString.indexOf("?togglerelay1") > 0) {
            toggleRelay1();
          }
          if (readString.indexOf("?togglerelay2") > 0) {
            toggleRelay2();
          }
          if (readString.indexOf("?togglerelay3") > 0) {
            toggleRelay3();
          }
          if (readString.indexOf("?togglerelay4") > 0) {
            toggleRelay4();
          }
        }
      }
    }
  }
  //clearing string for next read
  readString = "";

}

void toggleRelay1() {
  toggle1 = !toggle1;
  digitalWrite(Relay1, toggle1);
  if (toggle1 == HIGH) {
    count1++;
    Relay1Status = on;
  }
  else
    Relay1Status = off;
}

void toggleRelay2() {
  toggle2 = !toggle2;
  digitalWrite(Relay2, toggle2);
  if (toggle2 == HIGH) {
    count2++;
    Relay2Status = on;
  }
  else
    Relay2Status = off;
}

void toggleRelay3() {
  toggle3 = !toggle3;
  digitalWrite(Relay3, toggle3);
  if (toggle3 == HIGH) {
    count3++;
    Relay3Status = on;
  }
  else
    Relay3Status = off;
}

void toggleRelay4() {
  toggle4 = !toggle4;
  digitalWrite(Relay4, toggle4);
  if (toggle4 == HIGH) {
    count4++;
    Relay4Status = on;
  }
  else
    Relay4Status = off;
}

void homepage() {
  client.println("HTTP/1.1 200 OK"); //send new page
  client.println("Content-Type: text/html");
  client.println("Connection: Close");
  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='black-translucent' />");
  client.println("<link rel='stylesheet' type='text/css' href='http://randomnerdtutorials.com/ethernetcss.css' />");
  client.println("<TITLE>Relay Control System</TITLE>");

  client.println("</HEAD>");
  client.println("<BODY>");
  client.println("<H1>Relay Control System</H1>");
  client.println("<hr />");
  client.println("<br />");

  client.println("<H2>Relays Status</H2>");
  client.println("<br />");

  client.println("Relay 1 Status: ");
  client.println(Relay1Status);
  client.println("<br />");

  client.println("Relay 2 Status: ");
  client.println(Relay2Status);
  client.println("<br />");

  client.println("Relay 3 Status: ");
  client.println(Relay3Status);
  client.println("<br /><br />");

  client.println("Relay 4 Status: ");
  client.println(Relay4Status);
  client.println("<br /><br />");

  client.println("Number of times Relay1 has been activated: ");
  client.println(count1);
  client.println("<a href=\"/?resetcount1\"\">Reset Counter</a>");
  client.println("<br /><br /><br />");

  client.println("Number of times Relay2 has been activated: ");
  client.println(count2);
  client.println("<a href=\"/?resetcount2\"\">Reset Counter</a>");
  client.println("<br /><br /><br />");

  client.println("Number of times Relay3 has been activated: ");
  client.println(count3);
  client.println("<a href=\"/?resetcount3\"\">Reset Counter</a>");
  client.println("<br /><br /><br />");

  client.println("Number of times Relay4 has been activated: ");
  client.println(count4);
  client.println("<a href=\"/?resetcount4\"\">Reset Counter</a>");
  client.println("<br /><br /><br />");

  client.println("<a href=\"/?togglerelay1\"\">Toggle Relay1</a>");

  client.println("<a href=\"/?togglerelay2\"\">Toggle Relay2</a>");

  client.println("<a href=\"/?togglerelay3\"\">Toggle Relay3</a>");

  client.println("<a href=\"/?togglerelay4\"\">Toggle Relay4</a>");

  client.println("</BODY>");
  client.println("</HTML>");

  delay(1);
  //stopping client
  client.stop();
}

Answer 1

Instead of always responding with the homepage() for every request you should respond specially to the command requests with a 307 temporary redirect code to make the browser request the index page afresh

client.println("HTTP/1.1 307 Temporary Redirect");
client.println("Location: /");
client.println("Connection: Close");
client.println();
client.stop();

So the client gets /?togglerelay3, which happens, and then gets sent a reply telling it to make a new request to get / which it then does to get the new status. The URL in the browser will not have the ?togglerelay3 in it, so refreshing won't cause the command to be run again.

If you want live updating of the page with new count values as they happen you will have to be more cunning. Either use AJAX and JavaScript in the page to fetch new values to display, or periodically refresh the page (with a META Refresh).