Arduino Web Server Course

0 %

Course content

Uncategorized
- #0 Introduction
- #1 Requirements
- #2 Hello World 10 xp
  - Quiz
- #3 Set and clear output 10 xp
  - Quiz
- #4 Show input value 10 xp
  - Quiz
- #5 Send RS485 data 10 xp
  - Quiz

#3 Set and clear output

10 XP

Prev Next

Fullscreen Share

This chapter adds a couple of links to set and clear an output.

Add set and clear actions

The easiest way to add simple actions into the web page is to insert anchor HTML elements with associated action paths. The HTTP response from the server should contain these anchors:

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>" 
"</body>" "</html>" ); 
client.flush();

Parse the request

Now the sketch should parse the request to set or clear the output, depending on the path. To do this, it gets the route from the first line of the request using a String object called path and some of its functions.

Some variables are needed:

String header; bool firstLine = true;

And the character received from the client is appended to the header:

if (firstLine) { header += c; }

When the request is complete, the sketch parses the header line to get the path:

int pos = header.indexOf(' '); String path = header.substring(pos + 1, header.indexOf(' ', pos + 1));

Remember to update the first Line variable when the client sends a ‘new line’ (\n) character:

if (c == '\n') { emptyLine = true; firstLine = false; } else if (c != '\r') { emptyLine = false; }

Set or clear an output depending on the path

The server should set output to HIGH when the path is equal to “/setOutput” and LOW when the path is equal to “/clearOutput”.

if (path.compareTo("/setOutput") == 0)
    { // Set output
    digitalWrite(Q0_0, HIGH);
    } else if (path.compareTo("/clearOutput") == 0) {
    // Clear output
    digitalWrite(Q0_0, LOW);
}

Final code review

Here is the whole code, with some improvements:

send a 404 error for unknown requests,
send a redirection response to the main page on set/clear command request,
add the sendMainPage()

Code 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 { // Unrecognized path

sendNotFound(client);

} client.flush(); // Close connection

client.stop(); break;

} // The request is finished when a blank line is received

if (c == '\n') {

emptyLine = true;

firstLine = false;

}

else if (c != '\r') {

emptyLine = false;

}

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>" "</body>" "</html>" );

}