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

By

Learn how to control the Arduino built-in LED from your browser, extending a WiFiNINA web server to turn the LED on or off by visiting the /on and /off URLs.

~~~

In this tutorial we control the Arduino built-in LED from the browser: visiting the /on URL turns the LED on, visiting /off turns it off. We do it by expanding the Arduino Web Server example so it can react to commands sent via URLs.

This is the pattern behind a lot of home automation projects. Once you can flip an LED from the browser, you can flip a relay, and a relay can switch anything.

This is the code from the other 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");  // the connection will be closed after completion of the response
            client.println();
            client.println("<!DOCTYPE HTML>");
            client.println("<html>");
            client.println("test");
            client.println("</html>");
            break;
          } else {
            line = "";
          }
        }
      }
    }

    client.stop();
  }
}

A quick recap of how it works. The server reads the incoming HTTP request one character at a time, building up the current line. An empty line means the request headers are over, and that’s when we send the response back.

Detecting the command

The first line of an HTTP request looks like GET /on HTTP/1.1. That’s where the URL is, so that’s what we inspect.

In the last else you see, we have a full line, so we can check its content before clearing it. In this case we can check for GET /on and GET /off , and detect the command we’re asked to perform:

String command = "";

/* ... */

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

Notice the trailing space after /on and /off. It makes sure we match the exact URL and not something that just starts with those characters.

Any other URL leaves command empty and nothing happens. This matters more than it looks: browsers also request /favicon.ico on their own, and we don’t want that request to touch the LED.

Turning the LED on and off

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

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

We can also send a response confirmation back with

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

One thing to be careful with: the pin must be configured as an output before digitalWrite() can drive it reliably. Add this line to setup():

pinMode(LED_BUILTIN, OUTPUT);

If your LED stays off or barely glows when you call /on, a missing pinMode() is the first thing to check.

Trying it out

That’s it! Now load the code on the Arduino and call the /on URL, or the /off URL.

I reserved a static IP to the Arduino using my local network router, and I named it arduino.local in my /etc/hosts file, so reaching out to http://arduino.local/on turns the LED on, and to http://arduino.local/off turns the LED 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;

  pinMode(LED_BUILTIN, OUTPUT);

  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();
  }
}
Tagged: Arduino · All topics
~~~

Related posts about electronics: