Skip to Content
Home └Arduino Web Server Course └#4 Show input value

Arduino Web Server Course

0 %

Completed

Course content

#4 Show input value

10 XP
Prev Next
Fullscreen Share

This chapter explains how to show an input value updated dynamically in the web page. Obviously, it is also possible to show other dynamic values of variables or any other stuff.

Show the input value

An HTML text element is added into the web page, to put the input value. To update it dynamically, it is necessary to add a little of JavaScript into the web page. The JavaScript updateInputValue() function sends a request to the server to obtain the input value and, when the response is received, it inserts the received text into the input-value HTML element using the getElementById() function and the inner HTML property.

client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println();
client.println( "<!doctype html>"
                "<html>"
                "<head>"
                "<title>Hello PLC!</title>"
                "</head>"
                "<body>"
                "<h1>Hello PLC!</h1>"
                "<a href='/setOutput'>Set output</a><br>"
                "<a href='/clearOutput'>Clear output</a><br>"
                "<p>Input value: <span id='input-value'></span></p>"
                "<script>"
                "function updateInputValue() {"
                " var xhttp = new XMLHttpRequest();"
                " xhttp.onreadystatechange = function() {"
                " if (this.readyState == 4 && this.status == 200) {"
                " document.getElementById('input-value').innerHTML = this.responseText;"
                " }"
                " };"
                " xhttp.open('GET', 'inputValue', true);"
                " xhttp.send();"
                "}"
                "setInterval(updateInputValue, 1000);"
                "</script>"
                "</body>"
                "</html>" );


Process the input value request

The sketch should recognize the /inputValue request, and get the input value using the digitalRead() function and send the response to the client.

// ... } else if (path.compareTo("/inputValue") == 0) { // Get the input value int inputValue = digitalRead(I0_1); // Send input value sendText(client, inputValue == HIGH ? "HIGH" : "LOW"); } else { //...

It would be pretty good to send a JSON text or any of these sophisticated structured text protocols, and it would be useful for more complex applications, but in this case it is sufficient to send a plain text response.

void sendText(EthernetClient &client, const char *text) {
  client.println("HTTP/1.1 200 OK");
  client.println("Content-Type: text/plain");
  client.println(); client.println(text);
}


Final Example

#include <Ethernet2.h> // Server creation

EthernetServer server(80);

void setup() {
  Serial.begin(9600UL);
  Serial.println("WebServer started"); // Ethernet initialization
  byte mac[] = {0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED};
  byte ip[] = {10, 10, 10, 25};
  Ethernet.begin(mac, ip); // Server initialization
  server.begin();
}

void loop() { // Wait for clients
  EthernetClient client = server.available();
  if (client) { // Parse request
    bool emptyLine = true;
    String header;
    bool firstLine = true;
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        if (firstLine) {
          header += c;
        } // The request is finished when an empty line is received
        if (emptyLine && (c == '\n')) { // Get path from the header line
          int pos = header.indexOf(' ');
          String path = header.substring(pos + 1, header.indexOf(' ', pos + 1)); // Act depending on path
          if (path.compareTo("/") == 0) {
            sendMainPage(client);
          }
          else if (path.compareTo("/setOutput") == 0) { // Set output
            digitalWrite(Q0_0, HIGH); // Redirect response
            redirectToMainPage(client);
          }
          else if (path.compareTo("/clearOutput") == 0) { // Clear output
            digitalWrite(Q0_0, LOW); // Redirect response
            redirectToMainPage(client);
          }
          else if (path.compareTo("/inputValue") == 0) { // Get the input value
            int inputValue = digitalRead(I0_1); // Send input value
            sendText(client, inputValue == HIGH ? "HIGH" : "LOW");
          }
          else { // Unrecognized path
            sendNotFound(client);
          }
          client.flush(); // Close connection
          client.stop();
          break;
        }
        if (c == '\n') {
          emptyLine = true;
          firstLine = false;
        }
        else if (c != '\r') {
          emptyLine = false;
        }
      } // The request is finished when a blank line is received
    }
  }
}

void sendNotFound(EthernetClient & client) { // Path not found
  client.println("HTTP/1.1 404 Not Found");
  client.println("Content-Type: text/plain");
  client.println();
  client.println("404 Not Found");
}

void redirectToMainPage(EthernetClient & client) { // Redirect to main page
  client.println("HTTP/1.1 303 See Other");
  client.println("Location: /");
  client.println();
}

void sendMainPage(EthernetClient & client) { // Send the response
  client.println("HTTP/1.1 200 OK");
  client.println("Content-Type: text/html");
  client.println();
  client.println(
    "<!doctype html>"
    "<html>"
    "<head>"
    "<title>Hello PLC!</title>"
    "</head>"
    "<body>"
    "<h1>Hello PLC!</h1>"
    "<a href='/setOutput'>Set output</a><br>"
    "<a href='/clearOutput'>Clear output</a><br>"
    "<p>Input value: <span id='input-value'></span></p>"
    "<script>"
    "function updateInputValue() {"
    " var xhttp = new XMLHttpRequest();"
    " xhttp.onreadystatechange = function() {"
    " if (this.readyState == 4 && this.status == 200) {"
    " document.getElementById('input-value').innerHTML = this.responseText;"
    " }"
    " };"
    " xhttp.open('GET', 'inputValue', true);"
    " xhttp.send();"
    "}"
    "setInterval(updateInputValue, 1000);"
    "</script>"
    "</body>"
    "</html>"
  );
}

void sendText(EthernetClient & client, const char *text) {
  client.println("HTTP/1.1 200 OK");
  client.println("Content-Type: text/plain");
  client.println();
  client.println(text);
}




Commenting is not enabled on this course.

1. The JavaScript code into a web page...
updates it dynamically. does not affect it. updates it in a static way.
2. The getElementById() is...
a standard Arduino function. a HTML function. a JavaScript function.
3. The updateInputValue() function sends a request...
input. client. server.