Arduino Web Server Refresh Issue

Projects Programming
1

I'm working on a project to turn off and on Relay on Web Server using Arduino UnoR3 and W5100 Ethernet Shield.

When I connect to http://172.30.x.x and press the button, the link changes to http://172.30.x.x/?7conv; and refresh the web page, there is a problem that the relay switches without pressing the button.

Is there a way to prevent this?

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

int relayPro = 7;

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
byte ip[] = { 172, 30, x, x };
byte gateway[] = { 172, 30, x, x };
byte subnet[] = { 255, 255, x, x };
EthernetServer server(80);

String readString;

void setup() {
  pinMode(relayPro, OUTPUT);
  digitalWrite(relayPro, HIGH);

  Ethernet.begin(mac, ip, gateway, gateway, subnet);
  server.begin();

  Serial.begin(9600);
  Serial.println("REMOTE CONTROL SYSTEM");
}

void loop() {
  EthernetClient client = server.available();
  if (client) {
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();

        if (readString.length() < 100) {
          readString += c;
          Serial.print(c);
        }

        if (c == '\n') {
          Serial.println(readString);

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

          client.println("<HTML>");
          client.println("<HEAD>");
          client.println("<META CHARSET=\"UTF-8\">");
          client.println("<TITLE>REMOTE CH CONTROL</TITLE>");
          client.println("</HEAD>");
          client.println("<BODY>");
          client.println("<H1>REMOTE CH CONTROL</H1>");
          client.println("<input type=submit value='Switch' style=width:100px;height:45px onClick=location.href='/?7conv;'>");
          client.println("</BODY>");
          client.println("</HTML>");

          delay(1);

          client.stop();

          if (readString.indexOf('7') > 0) {
            digitalWrite(relayPro, LOW);
            Serial.println("Relay ON");
            delay(1500);
            digitalWrite(relayPro, HIGH);
            Serial.println("Relay OFF");
          }

          readString = "";
        }
      }
    }
  }
}
2

Yes, your browser thinks you have moved to a different web page, so it retains that new address, just like if you click any link to go to another page.

Refreshing the page and pressing the button are indistinguishable, to the Arduino.

To fix these things, you need the button to behave differently, so that when clicked, it does not direct your browser to a different page, and the Arduino can differentiate between the button press and refreshing the page.

I think this can be achieved by making the button send a POST request instead of a GET request.

3

I would use AJAX.

That would make the page stay the same on the browser side and you can update the status by having the browser submit regularly a request to the Arduino. The script would change the DOM to reflect the relay status and you would see no page refresh (no blinking)

4

With that IP address, I think you should make the test a bit broader than only looking for a "7"

5

I would use a form with POST parameters. So the URL doesn't change - it will remain on your page.

Here I have a short tutorial why and how.
The final sketch is at the end of the page (after reading) in the Links section.