Electronics Software Development

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

Arduino Web
Written by John Woolsey

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 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. All resources used in this tutorial are available on GitHub for your reference.

What Is Needed

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 running the Mojave operating system 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.

Arduino Uno LEDs Schematic

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.

Arduino Uno WiFi Rev2 With LEDs

Arduino Uno WiFi Rev2 With LEDs

Arduino Uno And Attached WiFi Shield With LEDs

Arduino Uno And Attached WiFi Shield With LEDs

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

Writing The Software

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. Note, the latest version of the library is 1.3.0, but the latest production version of the Arduino IDE (1.8.7) does not yet support updating the firmware of the on-board WiFi module to a version that supports this version of the library. Install the 1.1.1 version of the WiFiNINA library in order to ensure compatibility.

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

SimpleWebServerWiFi LEDs Webpage 1

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.

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 like 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) to 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 for incorporating 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.

SimpleWebServerWiFi LEDs Webpage 2

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 in this journey and I hope you enjoyed the experience. Please feel free to share your thoughts in the comments section below.

About the author

John Woolsey

John is an electrical engineer who loves science, math, and technology and teaching it to others even more.
 
He knew he wanted to work with technology from an early age, building his first robot when he was in 8th grade. His first computer was a Timex/Sinclair 2068 followed by the Tandy 1000 TL (aka really old stuff).
 
He put himself through college (University of Texas at Austin) by working at Motorola where he worked for many years after that in Research and Development.
 
John started developing mobile app software in 2010 for himself and for other companies. He has also taught programming to kids for summer school and enjoyed years of judging kids science projects at the Austin Energy Regional Science Festival.
 
Electronics, software, and teaching all culminate in his new venture to learn, make, and teach others via the Woolsey Workshop website.

4 Comments

  • John, this is fantastic! Thanks for putting this together for the Arduino community. I’m still fairly new to Arduino and just received my new Uno WiFi Rev 2 yesterday and have been struggling to find good tutorials on using Arduino WiFi communications. I really like the way you expanded the original WiFi sketch to include three LEDs and draw the table in HTML. Very helpful and easy to follow.

    • Thank you so much for the kind words. I am glad to hear that you found the article useful. Let me know if there are particular topics you would like to see in the future.

  • Hi John!
    Thank you so much for the time you’ve put into this. I am completely new to arduino and doing REU research (undergrad summer project) at Oregon State. My goal is to wirelessly connect to an arduino uno wifi rev2 to have push-button control of a servo motor and to receive IMU and imaging data. (aka lots of work ahead for a newbie!)

    The problem I am currently having is connecting to the wifi network. It is a secure network managed by Oregon state (eduroam) to which each OSU affiliate has a username and password. I’ve been running example codes from the WifiNINA library with my specific user and pass for the secret SSID and pass. The serial monitor prints “Attempting to connect to …..” until I abort the code.

    Do you think it will still be possible to connect this board to network with this level of security?

    Or should I jump ship and go for a ESP8266, a wireless USB (https://www.pololu.com/product/1336), or a bluetooth chip (https://www.digikey.com/product-detail/en/adafruit-industries-llc/2479/1528-1350-ND/5356835&amp;?gclid=EAIaIQobChMItYOduKKZ4wIVdx-tBh2LtwdDEAQYASABEgLpfvD_BwE)

    Thank you so much!!

    • Hi Anna,
      I did some quick research on connecting to the eduroam network and found that other people are having similar issues. I personally don’t have enough experience in this area to provide guidance, but I did come across the How connect ESP32 to WPA/WPA2 Enterprise network? article that may help you. It specifically mentions the eduroam network. Otherwise, I would submit a request to the Arduino Forum and hopefully someone with more experience can provide assistance.

Leave a Comment