Controlling An Arduino Uno WiFi Rev2 Or Arduino Uno With WiFi Shield From A Web Browser

Last Updated: December 1, 2020
Originally Published: December 7, 2018

Skill Level: Intermediate

Table Of Contents

• Introduction
• What Is Needed
• Background Information
• Building The Circuit
• Creating The Sketch
• Extending And Improving The Sketch
• Summary

Introduction

In this tutorial, you will learn how to access and control an Arduino Uno development board from a web browser. I will show you how to control 3 LEDs, but this implementation can be easily extended to access and control much more.

A basic understanding of electronics and programming is expected along with some familiarity with the Arduino platform. If you are new to the Arduino platform or would just like to refresh your knowledge, check out our Blink: Making An LED Blink On An Arduino Uno tutorial first before proceeding with this one. In addition, this tutorial will use a solderless breadboard to build a circuit from a schematic diagram. The All About Circuit’s Understanding Schematics, SparkFun’s How to Read a Schematic, Core Electronics’ How to Use Breadboards, and Science Buddies’ How to Use a Breadboard guides are good resources for learning how to translate a schematic to a breadboard.

All resources created for this tutorial are available on GitHub for your reference.

What Is Needed

• Linux, macOS, Or Windows Based Computer With A USB Port
• Arduino IDE
• Either An Arduino Uno WiFi Rev2 (available on Arduino and SparkFun) OR An Arduino Uno (available on Arduino and SparkFun) With An Attached Arduino WiFi Shield
• Arduino Uno Compatible USB Cable
• Solderless Breadboard (available on Adafruit and SparkFun)
• 4 x Male-Male Jumper Wires (available on Adafruit and Arrow)
• 3 x Standard 5mm LEDs (1 green, 1 yellow, 1 red; available on SparkFun and Mouser)
• 3 x 330 Ω Resistors (available on SparkFun and Amazon)

Background Information

This tutorial was written to work for two distinct Arduino configurations, either the new Arduino Uno WiFi Rev2 development board on its own or the Arduino Uno R3 with an attached Arduino WiFi Shield. My development system consists of connecting each configuration to a macOS based computer with the desktop Arduino IDE. If you are using a different Arduino or computer setup, the vast majority of this tutorial should still apply, however, some minor changes may be necessary. If you need help with your specific setup, post a question in the comments section below and someone can try to help you.

The Arduino WiFi Shield used in this project was retired a few years ago in favor of using either WiFi integrated directly onto the Arduino board itself (e.g. Arduino MKR1000 WiFi) or with a separate low cost WiFi module (e.g. ESP8266). However, the shield and its associated WiFi library (recently retired) continue to be actively used by the Arduino community.

The Arduino Uno WiFi Rev2 was released very recently and incorporates an integrated ESP32 WiFi module. The WiFiNINA library used with this board is extremely similar to the WiFi library used with the Arduino WiFi Shield. For that reason, we will cover both configurations in this tutorial.

Building The Circuit

If you are using the Arduino WiFi Shield, carefully align and attach it to the Arduino Uno development board.

The connection headers for both the Arduino Uno WiFi Rev2 and the Arduino WiFi Shield (attached on top of the original Arduino Uno) follow the same pinout specifications. This allows us to refer to a particular pin and it will have the same location regardless of the board configuration we are using.

Now let’s build the circuit to connect the LEDs to the header. See the schematic below for the circuit diagram.

Attach the red LED to the breadboard by connecting the anode of the LED to one of the breadboard’s terminal strips and the cathode to the ground bus strip. The anode (positive terminal) of an LED is longer than the cathode (negative terminal). Connect one end of a 330 Ω resistor to the terminal strip containing the red LED’s anode and the other end of the resistor to an adjacent terminal strip.

Follow the same process as above for wiring the yellow and green LEDs as well.

Attach one end of a jumper wire to the open end of the resistor connected to the red LED. Attach the other end to pin D2 on the Arduino header. In a similar fashion, connect jumper wires for the yellow and green LEDs to pins D3 and D5 respectively. Also, attach a jumper wire from the ground bus strip on the breadboard to one of the ground (GND) pins on the Arduino header. For the curious, I skipped pins D0, D1, and D4 since D0 and D1 are used for USB communication between the computer and the original Arduino Uno and D4 is used for SPI communication with the Arduino WiFi Shield.

Once the circuit is completed, it should look like the photo below.

You can now connect the Arduino to your computer via the USB cable.

Creating The Sketch

Let’s begin by opening the Arduino IDE and installing the necessary boards and libraries required.

If you are using the new Arduino Uno WiFi Rev2 board, first select Tools > Board: … > Boards Manager… from the main menu to open the Boards Manager, then install the Arduino megaAVR Boards by Arduino boards library that includes Arduino Uno WiFi Rev2 board support. Then select Tools > Board: … > Arduino Uno WiFi Rev2 within the Arduino megaAVR section from the main menu to select the board. To install the WiFiNINA library, select Tools > Manage Libraries… to open the Library Manager, then search for and install the WiFiNINA library.

If you are using the original Arduino Uno board with an attached Arduino WiFi Shield, select Tools > Manage Libraries… to open the Library Manager, then search for and install the WiFi built-in library. The base Arduino Uno board library should already be installed.

Select Tools > Port: … and select the appropriate port for the Arduino board if it is not already configured for you. Please note that when setting up the new Arduino Uno WiFi Rev2 board, I had to reboot my computer before the port was available for selection.

Now let’s create our sketch.

If you are using the Arduino Uno with the Arduino WiFi Shield, select File > Examples > RETIRED > WiFi > SimpleWebServerWiFi from the main menu to open the example sketch we will use in this project.

If you are using the Arduino Uno WiFi Rev2, select File > Examples > WiFiNINA > SimpleWebServerWiFi from the main menu to open the example sketch we will use in this project.

Save the example sketch as SimpleWebServerWifi_LEDs so that we can begin making our modifications.

We need to update the network credentials in the current sketch so that we can connect the Arduino to our network.

If you are using the Arduino Uno with the Arduino WiFi Shield, replace yourNetwork and secretPassword (on lines 26 and 27 within the sketch) with your network’s SSID name and password respectively.

If you are using the Arduino Uno WiFi Rev2, the network credentials are now located in a separate file (tab) named arduino_secrets.h. Add your network’s SSID name and password within the empty quotes and they will be included in the main sketch.

We have had a fair amount of “if this board, then…”, but all operations from here on should now apply to both board configurations.

The example sketch currently expects an LED to be attached to pin 9. Let’s change that to use pin 2 instead that currently has the red LED attached. Change pin 9 to pin 2 for setting the pin mode (around line 35) within the setup() function. It should now look like the following.

pinMode(2, OUTPUT);

Now let’s change pin 9 to pin 2 for displaying the web page within the loop() function to show the correct pin. These are located around line 85 and should look like

client.print("Click <a href=\"/H\">here</a> turn the LED on pin 2 on<br>");
client.print("Click <a href=\"/L\">here</a> turn the LED on pin 2 off<br>");

Likewise, let’s change the pins for the digitalWrite() functions (around line 101 towards the bottom of the loop() function) that turn on and off the LED. Those lines should now look like the following.

digitalWrite(2, HIGH);

digitalWrite(2, LOW);

Verify the code compiles correctly, fix any syntax errors that are displayed, and save the sketch.

Now it is time to run and test our updated sketch. First, open the Serial Monitor window by selecting Tools > Serial Monitor from the main menu of the Arduino IDE. This will enable us to see informational output from the Arduino while the sketch is running.

Next, upload the sketch to the Arduino board and you should see Attempting to connect to Network … in the Serial Monitor window once it is running. When the Arduino has connected to the network, it will display a URL, similar to http://10.0.0.250, that should be typed into a web browser to view the web page served up by the Arduino. The page should look like

Test that it works by clicking the here links and watch the red LED actually turn on and off on the board. Cool, right? Notice that the web page here links append /H or /L to turn on (high) or off (low) the LED respectively.

Extending And Improving The Sketch

Now that we have a working program, let’s add the other LEDs.

We could specify pin numbers in our code when addressing the Arduino’s pins as we did above, but I find it a lot nicer to map the pins to their expected use. This is especially true once our programs become much larger and we use a lot of pins. This allows us to write digitalWrite(redLED, HIGH) instead of digitalWrite(2, HIGH) which to me is much more informative and self documenting. So let’s map the LEDs to their respective pin numbers. Add the following lines after the #include lines and before the network lines we updated previously. This area is located towards the beginning of the sketch file.

const int redLED = 2;
const int yellowLED = 3;
const int greenLED = 5;

Now we want to set the pin modes for the LEDs (around line 39) within the setup() function by replacing

pinMode(2, OUTPUT);

with

pinMode(redLED, OUTPUT);
pinMode(yellowLED, OUTPUT);
pinMode(greenLED, OUTPUT);

This is much easier to read and understand, don’t you think?

Since we are accessing the Arduino from a web page and may not be in close proximity to the Arduino, we won’t always have the visual cue as to if the LEDs actually turned on and off as expected. Sometimes the commands (endpoints) may not go through properly or we just have an issue with our program. This never happens to anyone, right? 😉 So let’s change the web page to not only show us what the Arduino believes to be the status of each of the LEDs, but also incorporate all LEDs into a nice table format. Since this will require a little bit more code than just changing a few lines, let’s place it in a new function named showWebPage().

Replace the following code (around lines 84-95) within the loop() function

// HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
// and a content-type so the client knows what's coming, then a blank line:
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println();

// the content of the HTTP response follows the header:
client.print("Click <a href=\"/H\">here</a> turn the LED on pin 2 on<br>");
client.print("Click <a href=\"/L\">here</a> turn the LED on pin 2 off<br>");

// The HTTP response ends with another blank line:
client.println();

with simply the following function call.

showWebPage(client);

Now let’s add our new function (shown below) just before the existing printWifiStatus() function at the bottom of the program.

void showWebPage(WiFiClient client) {
  // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
  // and a content-type so the client knows what's coming, then a blank line:
  client.println("HTTP/1.1 200 OK");
  client.println("Content-type:text/html");
  client.println();

  // the content of the HTTP response follows the header:
  client.println("<h1>Arduino Remote Control</h1>");
  client.println("<table border=1 style='text-align:center'>");
  client.println("<tr><th>Component</th><th>Status</th><th>Control</th></tr>");

  // Red LED
  client.print("<tr><td>Red LED</td><td>");
  if (digitalRead(redLED)) {
    client.print("<font style='color:green;'>ON</font>");
  } else {
    client.print("<font style='color:red;'>OFF</font>");
  }
  client.println("</td><td><a href='/redLED/on'>ON</a> / <a href='/redLED/off'>OFF</a></td></tr>");

  // Yellow LED
  client.print("<tr><td>Yellow LED</td><td>");
  if (digitalRead(yellowLED)) {
    client.print("<font style='color:green;'>ON</font>");
  } else {
    client.print("<font style='color:red;'>OFF</font>");
  }
  client.println("</td><td><a href='/yellowLED/on'>ON</a> / <a href='/yellowLED/off'>OFF</a></td></tr>");

  // Green LED
  client.print("<tr><td>Green LED</td><td>");
  if (digitalRead(greenLED)) {
    client.print("<font style='color:green;'>ON</font>");
  } else {
    client.print("<font style='color:red;'>OFF</font>");
  }
  client.println("</td><td><a href='/greenLED/on'>ON</a> / <a href='/greenLED/off'>OFF</a></td></tr>");

  client.println("</table>");

  // The HTTP response ends with another blank line
  client.println();
}

Well, this looks a little different. What is going on here? Instead of just expanding the use of the here links for multiple LEDs, I thought it would be nicer to display the links in a table like fashion and add a title. Font colors are now being used to display the status of each LED as either green (ON) or red (OFF) depending on the state of each LED. Also, instead of just sending /H or /L endpoints as was done for the single LED, I changed them to be /redLED/on and /redLED/off, /yellowLED/on and /yellowLED/off, and /greenLED/on and /greenLED/off, for the red, yellow, and green LEDs respectively. This also makes it much easier for us to understand when we just want to enter the commands (endpoints) directly for turning on and off the various LEDs. This approach can be easily extended to incorporate additional components in the future.

Next, we need to update the actual turning on and off the LEDs on the Arduino. Let’s follow the same approach and create another function named performRequest() to perform this task.

Again, replace the following code (around lines 94-100) within the loop() function from

// Check to see if the client request was "GET /H" or "GET /L":
if (currentLine.endsWith("GET /H")) {
  digitalWrite(redLED, HIGH);  // GET /H turns the LED on
}
if (currentLine.endsWith("GET /L")) {
  digitalWrite(redLED, LOW);  // GET /L turns the LED off
}

to simply the following line.

performRequest(currentLine);

Now add the performRequest() function, shown below, and place it between the showWebPage() function we created earlier and the printWifiStatus() function at the bottom of the program.

void performRequest(String line) {
  if (line.endsWith("GET /redLED/on")) {
    digitalWrite(redLED, HIGH);
  } else if (line.endsWith("GET /redLED/off")) {
    digitalWrite(redLED, LOW);
  } else if (line.endsWith("GET /yellowLED/on")) {
    digitalWrite(yellowLED, HIGH);
  } else if (line.endsWith("GET /yellowLED/off")) {
    digitalWrite(yellowLED, LOW);
  } else if (line.endsWith("GET /greenLED/on")) {
    digitalWrite(greenLED, HIGH);
  } else if (line.endsWith("GET /greenLED/off")) {
    digitalWrite(greenLED, LOW);
  }
}

Verify, save, and upload the updated sketch and see what the web page now looks like. Looking good! We now use the ON and OFF links within the Control column, instead of the here links, to turn on and off each of the LEDs.

Summary

In this tutorial, we learned how to view the status and control three LEDs on an Arduino Uno board from a web browser. Examples for both the new Arduino Uno WiFi Rev2 board and the original Arduino Uno board with an attached Arduino WiFi Shield were provided. Although this may be a simple example, this approach can be extended to control a wide variety of operations and/or components. The endpoints used here can even be used within scripts, smartphone applications, etc. for even more functionality.

The complete sketch with some minor improvements and formatting changes and the schematic are available on GitHub for your reference.

Thank you for joining me along this journey and I hope you enjoyed the experience. Please feel free to share your thoughts in the comments section below.