Host a Web Server on the Arduino UNO WiFi Rev2

Learn how to access your board through a browser on the same network.

Introduction

In this tutorial, we will use the Arduino UNO WiFi Rev2 board to set up a simple web server, using the WiFiNINA library. The web server will be used as an interface for our board, where we will create two buttons to remotely turn ON or OFF an LED.

This tutorial is a great starting point for any maker interested in making applications connected to the Internet.

Hardware & Software Needed

Circuit

Follow the wiring diagram below to connect the LED to the Arduino UNO WiFi Rev2 board.

The circuit.
The circuit.

Let's Start

This tutorial barely uses any external hardware, except an LED that we will control remotely. However, the most interesting aspect lies in the library we are going to use: WiFiNINA. This library can be used for many different connectivity projects, where it allows us to connect to WiFi, make GET requests and - as we will explore in this tutorial - to create a web server.

  1. First, let's make sure we have the drivers installed. If we are using the Web Editor, we do not need to install anything. If we are using an offline editor, we need to install it manually. This can be done by navigating to Tools > Board > Board Manager.... Here we need to look for the Arduino megaAVR Boards and install it.

  2. Now, we need to install the library needed. If we are using the Web Editor, there is no need to install anything. If we are using an offline editor, simply go to Tools > Manage libraries.., and search for WiFiNINA and install it.

  3. We can now take a look at some of the core functions of this sketch:

  • char ssid[] = ""
    - stores network name.
  • char pass[] = ""
    - stores network password.
  • WiFi.begin(ssid, pass)
    connects to Wi-Fi with credentials.
  • WiFiServer server(80)
    - creates a server that listens for incoming connections on the specified port.
  • WiFiClient client
    - creates a client that can connect to to a specified internet IP address.
  • server.begin()
    - tells the server to begin listening for incoming connections.
  • client.connected
    - checks for connected clients.
  • client.available
    - checks for available data.
  • client.read
    - reads the available data.
  • client.print()
    - print something to the client (e.g. html code).
  • client.stop()
    - closes the connection.

The sketch can be found in the snippet below. It is very similar to the sketch found in File > Examples > WiFiNINA > SimpleWebServer, with only minor modifications.

Upload the code to the board, and make sure the right board and port are selected.

1#include <WiFiNINA.h>
2
3char ssid[] = ""; // your network SSID (name) between the " "
4char pass[] = ""; // your network password between the " "
5int keyIndex = 0; // your network key Index number (needed only for WEP)
6int status = WL_IDLE_STATUS; //connection status
7WiFiServer server(80); //server socket
8
9WiFiClient client = server.available();
10
11int ledPin = 2;
12
13void setup() {
14 Serial.begin(9600);
15 pinMode(ledPin, OUTPUT);
16 while (!Serial);
17
18 enable_WiFi();
19 connect_WiFi();
20
21 server.begin();
22 printWifiStatus();
23
24}
25
26void loop() {
27 client = server.available();
28
29 if (client) {
30 printWEB();
31 }
32}
33
34void printWifiStatus() {
35 // print the SSID of the network you're attached to:
36 Serial.print("SSID: ");
37 Serial.println(WiFi.SSID());
38
39 // print your board's IP address:
40 IPAddress ip = WiFi.localIP();
41 Serial.print("IP Address: ");
42 Serial.println(ip);
43
44 // print the received signal strength:
45 long rssi = WiFi.RSSI();
46 Serial.print("signal strength (RSSI):");
47 Serial.print(rssi);
48 Serial.println(" dBm");
49
50 Serial.print("To see this page in action, open a browser to http://");
51 Serial.println(ip);
52}
53
54void enable_WiFi() {
55 // check for the WiFi module:
56 if (WiFi.status() == WL_NO_MODULE) {
57 Serial.println("Communication with WiFi module failed!");
58 // don't continue
59 while (true);
60 }
61
62 String fv = WiFi.firmwareVersion();
63 if (fv < "1.0.0") {
64 Serial.println("Please upgrade the firmware");
65 }
66}
67
68void connect_WiFi() {
69 // attempt to connect to Wifi network:
70 while (status != WL_CONNECTED) {
71 Serial.print("Attempting to connect to SSID: ");
72 Serial.println(ssid);
73 // Connect to WPA/WPA2 network. Change this line if using open or WEP network:
74 status = WiFi.begin(ssid, pass);
75
76 // wait 10 seconds for connection:
77 delay(10000);
78 }
79}
80
81void printWEB() {
82
83 if (client) { // if you get a client,
84 Serial.println("new client"); // print a message out the serial port
85 String currentLine = ""; // make a String to hold incoming data from the client
86 while (client.connected()) { // loop while the client's connected
87 if (client.available()) { // if there's bytes to read from the client,
88 char c = client.read(); // read a byte, then
89 Serial.write(c); // print it out the serial monitor
90 if (c == '\n') { // if the byte is a newline character
91
92 // if the current line is blank, you got two newline characters in a row.
93 // that's the end of the client HTTP request, so send a response:
94 if (currentLine.length() == 0) {
95
96 // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
97 // and a content-type so the client knows what's coming, then a blank line:
98 client.println("HTTP/1.1 200 OK");
99 client.println("Content-type:text/html");
100 client.println();
101
102 //create the buttons
103 client.print("Click <a href=\"/H\">here</a> turn the LED on<br>");
104 client.print("Click <a href=\"/L\">here</a> turn the LED off<br><br>");
105
106 int randomReading = analogRead(A1);
107 client.print("Random reading from analog pin: ");
108 client.print(randomReading);
109
110
111
112
113 // The HTTP response ends with another blank line:
114 client.println();
115 // break out of the while loop:
116 break;
117 }
118 else { // if you got a newline, then clear currentLine:
119 currentLine = "";
120 }
121 }
122 else if (c != '\r') { // if you got anything else but a carriage return character,
123 currentLine += c; // add it to the end of the currentLine
124 }
125
126 if (currentLine.endsWith("GET /H")) {
127 digitalWrite(ledPin, HIGH);
128 }
129 if (currentLine.endsWith("GET /L")) {
130 digitalWrite(ledPin, LOW);
131 }
132
133 }
134 }
135 // close the connection:
136 client.stop();
137 Serial.println("client disconnected");
138 }
139}

Testing It Out

Once we have successfully uploaded the code to the board, open the Serial Monitor and it should look like the following image:

serial monitor
serial monitor

Copy the IP address and enter it in a browser. Now, we should see a very empty page with two links at the top left that says "Click here to turn the LED on" and "Click here to turn the LED off".

Interacting through browser.
Interacting through browser.

When interacting with the links, you should see the LED, connected to pin 2, turn on and off depending on what you click. Now we have successfully created a way of interacting with our Arduino UNO WiFi Rev2 board remotely.

Troubleshoot

If the code is not working, there are some common issues we might need to troubleshoot:

  • We have not updated the latest firmware for the board.
  • We have not installed the Board Package required for the board.
  • We have not installed the WiFiNINA library.
  • We have entered the SSID and PASS incorrectly: remember, it is case sensitive.
  • We have not selected the right port to upload: depending on what computer we use, sometimes the board is duplicated. By simply restarting the editor, this issue can be solved.

Conclusion

In this tutorial, we learned how to create a basic web interface from scratch. We learned how to control an LED remotely, and how to display the value of an analog pin in the browser as well. Using this example, we can build much more complex projects, and if you are familiar with both HTML and CSS, you can create some really cool looking interfaces! If you are new to HTML and CSS, there are plenty of online guides that can guide you, you can visit w3schools or codecademy for many tips and tricks.

Tip: Check out fontawesome to get access to thousands of free icons that you can customize your local web server with!

Suggest changes

The content on docs.arduino.cc is facilitated through a public GitHub repository. If you see anything wrong, you can edit this page here.

License

The Arduino documentation is licensed under the Creative Commons Attribution-Share Alike 4.0 license.