Arduino project: Controlling the built-in LED using your browser

In this tutorial, we will build upon the Arduino Web Server example to enable controlling the built-in LED on the Arduino board through commands sent from a web browser.

To achieve this, we will turn on the LED by accessing the /on URL and turn it off by accessing the /off URL. Any other URL will have no effect on the LED.

Let’s start with the code from the previous tutorial:

#include <SPI.h>
#include <WiFiNINA.h>

WiFiServer server(80);

void setup() {
 char ssid[] = SECRET_SSID;
 char pass[] = SECRET_PASS;

 Serial.begin(9600);
 while (!Serial);

 int status = WL_IDLE_STATUS;
 while (status != WL_CONNECTED) {
   Serial.print("Connecting to ");
   Serial.println(ssid);
   status = WiFi.begin(ssid, pass);
   delay(5000);
 }

 Serial.print("IP address: ");
 Serial.println(WiFi.localIP());

 server.begin();
}

void loop() {
 WiFiClient client = server.available();
 if (client) {
   String line = "";
   while (client.connected()) {
     if (client.available()) {
       char c = client.read();
       Serial.write(c);

       if (c != '\n' && c != '\r') {
         line += c;
       }

       if (c == '\n') {
         if (line.length() == 0) {
           client.println("HTTP/1.1 200 OK");
           client.println("Content-Type: text/html");
           client.println("Connection: close");
           client.println();
           client.println("<!DOCTYPE HTML>");
           client.println("<html>");
           client.println("test");
           client.println("</html>");
           break;
         } else {
           line = "";
         }
       }
     }
   }

   client.stop();
 }
}

In the else block at the end of the code, we have a complete line that we can check for its content before clearing it. Here, we can check if it starts with GET /on or GET /off to determine the command we are requested to perform:

String command = "";

/* ... */

if (line.startsWith("GET /on ")) {
 command = "on";
}
if (line.startsWith("GET /off ")) {
 command = "off";
}

When we are ready to send the response back, we can check the command and turn the LED on or off accordingly:

if (command == "on") {
 digitalWrite(LED_BUILTIN, HIGH);
} else if (command == "off") {
 digitalWrite(LED_BUILTIN, LOW);
}

We can also send a confirmation response back to the client with:

client.println("Turned the LED " + command);

That’s it! Now upload the code to the Arduino and access the /on or /off URLs in your browser.

If you want to assign a static IP to the Arduino on your local network, you can do so through your router’s settings. In my case, I have added an entry for arduino.local in my /etc/hosts file, so I can access the Arduino using http://arduino.local/on to turn the LED on, and http://arduino.local/off to turn it off.

Here’s the complete program:

#include <SPI.h>
#include <WiFiNINA.h>

WiFiServer server(80);

void setup() {
 char ssid[] = SECRET_SSID;
 char pass[] = SECRET_PASS;

 Serial.begin(9600);
 while (!Serial);

 int status = WL_IDLE_STATUS;
 while (status != WL_CONNECTED) {
   Serial.print("Connecting to ");
   Serial.println(ssid);
   status = WiFi.begin(ssid, pass);
   delay(5000);
 }

 Serial.print("IP address: ");
 Serial.println(WiFi.localIP());

 server.begin();
}

void loop() {
 WiFiClient client = server.available();
 if (client) {
   String line = "";
   String command = "";
   while (client.connected()) {
     if (client.available()) {
       char c = client.read();
       Serial.write(c);

       if (c != '\n' && c != '\r') {
         line += c;
       }

       if (c == '\n') {
         if (line.length() == 0) {
           if (command == "on") {
             digitalWrite(LED_BUILTIN, HIGH);
           } else if (command == "off") {
             digitalWrite(LED_BUILTIN, LOW);
           }

           client.println("HTTP/1.1 200 OK");
           client.println("Content-Type: text/html");
           client.println("Connection: close");
           client.println();
           client.println("<!DOCTYPE HTML>");
           client.println("<html>");
           client.println("Turned the LED " + command);
           client.println("</html>");
           break;
         } else {
           if (line.startsWith("GET /on ")) {
             command = "on";
           }
           if (line.startsWith("GET /off ")) {
             command = "off";
           }

           line = "";
         }
       }
     }
   }

   client.stop();
 }
}

Tags: Arduino, Web Server, LED control