The Nano RP2040 Connect features a Wi-Fi module and an RGB LED among many other things. In this tutorial we will take a look at how we turn our board into a web server, and control the built-in RGB through a browser.
Note: if you need help setting up your environment to use your Arduino Nano RP2040 board, please refer to this installation guide.
The goals of this project are:
There are multiple ways we can access our board over Wi-Fi. In this tutorial, we will turn our board into a web server, that will listen for incoming GET requests.
Simply explained, we will set up our board to connect to a Wi-Fi network, and start hosting a web server on a specific IP address. If we enter this address in the browser of a computer/browser on the same network, we make a request to this server. The server responds with a set of HTML instructions, which can then be viewed in the browser. It works pretty much as the Internet does, but in our example, it will only happen over the local Wi-Fi network.
Inside the HTML instructions that we print, or send to the browser, we can create buttons. These buttons can be modified to add something to the URL. Here is an example of how a button is created:
1<button class='red' type='submit' onmousedown='location.href=\"/RH\"'>ON</button>
The most important is what we put inside
href
, which in this case is /RH
. Whenever this button is clicked, it will update the URL of the page to http://<board-ip>/RH
. After this happens, the program will go through a set of conditionals, that checks whether this button has been pressed:1if (currentLine.endsWith("GET /RH")) {2 doSomething();3}
By using this method, we can set up many more buttons that can control different aspects of our Arduino, and is a great building block for building a control interface for your board that can be controlled through a browser, over WiFi.
We will now get to the programming part of this tutorial.
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 Mbed OS Nano Boards and install it.
Now, we need to install the libraries 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.
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. Upload the sketch to the board.
1#include <SPI.h>2#include <WiFiNINA.h>3
4///////please enter your sensitive data in the Secret tab/arduino_secrets.h5char ssid[] = ""; // your network SSID (name)6char pass[] = ""; // your network password (use for WPA, or use as key for WEP)7int keyIndex = 0; // your network key index number (needed only for WEP)8
9int status = WL_IDLE_STATUS;10WiFiServer server(80);11
12void setup() {13 pinMode(LEDR, OUTPUT);14 pinMode(LEDG, OUTPUT);15 pinMode(LEDB, OUTPUT);16 Serial.begin(9600); // initialize serial communication17
18 // check for the WiFi module:19 if (WiFi.status() == WL_NO_MODULE) {20 Serial.println("Communication with WiFi module failed!");21 // don't continue22 while (true);23 }24
25 String fv = WiFi.firmwareVersion();26 if (fv < WIFI_FIRMWARE_LATEST_VERSION) {27 Serial.println("Please upgrade the firmware");28 }29
30 // attempt to connect to WiFi network:31 while (status != WL_CONNECTED) {32 Serial.print("Attempting to connect to Network named: ");33 Serial.println(ssid); // print the network name (SSID);34
35 // Connect to WPA/WPA2 network. Change this line if using open or WEP network:36 status = WiFi.begin(ssid, pass);37 // wait 10 seconds for connection:38 delay(10000);39 }40 server.begin(); // start the web server on port 8041 printWifiStatus(); // you're connected now, so print out the status42}43
44
45void loop() {46 WiFiClient client = server.available(); // listen for incoming clients47
48 if (client) { // if you get a client,49 Serial.println("new client"); // print a message out the serial port50 String currentLine = ""; // make a String to hold incoming data from the client51 while (client.connected()) { // loop while the client's connected52 if (client.available()) { // if there's bytes to read from the client,53 char c = client.read(); // read a byte, then54 Serial.write(c); // print it out the serial monitor55 if (c == '\n') { // if the byte is a newline character56
57 // if the current line is blank, you got two newline characters in a row.58 // that's the end of the client HTTP request, so send a response:59 if (currentLine.length() == 0) {60 // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)61 // and a content-type so the client knows what's coming, then a blank line:62 client.println("HTTP/1.1 200 OK");63 client.println("Content-type:text/html");64 client.println();65
66 // the content of the HTTP response follows the header:67 client.print("<style>");68 client.print(".container {margin: 0 auto; text-align: center; margin-top: 100px;}");69 client.print("button {color: white; width: 100px; height: 100px;");70 client.print("border-radius: 50%; margin: 20px; border: none; font-size: 20px; outline: none; transition: all 0.2s;}");71 client.print(".red{background-color: rgb(196, 39, 39);}");72 client.print(".green{background-color: rgb(39, 121, 39);}");73 client.print(".blue {background-color: rgb(5, 87, 180);}");74 client.print(".off{background-color: grey;}");75 client.print("button:hover{cursor: pointer; opacity: 0.7;}");76 client.print("</style>");77 client.print("<div class='container'>");78 client.print("<button class='red' type='submit' onmousedown='location.href=\"/RH\"'>ON</button>");79 client.print("<button class='off' type='submit' onmousedown='location.href=\"/RL\"'>OFF</button><br>");80 client.print("<button class='green' type='submit' onmousedown='location.href=\"/GH\"'>ON</button>");81 client.print("<button class='off' type='submit' onmousedown='location.href=\"/GL\"'>OFF</button><br>");82 client.print("<button class='blue' type='submit' onmousedown='location.href=\"/BH\"'>ON</button>");83 client.print("<button class='off' type='submit' onmousedown='location.href=\"/BL\"'>OFF</button>");84 client.print("</div>");85
86 // The HTTP response ends with another blank line:87 client.println();88 // break out of the while loop:89 break;90 } else { // if you got a newline, then clear currentLine:91 currentLine = "";92 }93 } else if (c != '\r') { // if you got anything else but a carriage return character,94 currentLine += c; // add it to the end of the currentLine95 }96
97 // Check to see if the client request was /X98 if (currentLine.endsWith("GET /RH")) {99 digitalWrite(LEDR, HIGH);100 }101 if (currentLine.endsWith("GET /RL")) {102 digitalWrite(LEDR, LOW); 103 }104 if (currentLine.endsWith("GET /GH")) {105 digitalWrite(LEDG, HIGH); 106 }107 if (currentLine.endsWith("GET /GL")) {108 digitalWrite(LEDG, LOW); 109 }110 if (currentLine.endsWith("GET /BH")) {111 digitalWrite(LEDB, HIGH); 112 }113 if (currentLine.endsWith("GET /BL")) {114 digitalWrite(LEDB, LOW); 115 }116 }117 }118 // close the connection:119 client.stop();120 Serial.println("client disconnected");121 }122}123
124void printWifiStatus() {125 // print the SSID of the network you're attached to:126 Serial.print("SSID: ");127 Serial.println(WiFi.SSID());128
129 // print your board's IP address:130 IPAddress ip = WiFi.localIP();131 Serial.print("IP Address: ");132 Serial.println(ip);133
134 // print the received signal strength:135 long rssi = WiFi.RSSI();136 Serial.print("signal strength (RSSI):");137 Serial.print(rssi);138 Serial.println(" dBm");139 // print where to go in a browser:140 Serial.print("To see this page in action, open a browser to http://");141 Serial.println(ip);142}
After the code has been successfully uploaded to the board, we need to open the Serial Monitor to initialize the program. As soon as we open it, it will attempt to connect to the Wi-Fi network we entered in the code, and if it is successful, it will print out the boards IP address in the Serial Monitor.
We now need to copy this IP address and paste it in the browser on a computer/phone on the same network as our board is connect to. We should now see the following page:
We can now interact with the different buttons. The buttons available are used to control the built-in RGB LED on the Nano RP2040 Connect. There's six buttons in total, three to turn ON the different colors, and three to turn them off.
If the code is not working, there are some common issues we can troubleshoot:
In this tutorial, we have turned our Nano RP2040 Connect into a web server, which different clients can connect to. We have then used the /GET method in order to change the RGB LED on the board, through a set of buttons accessible from the browser.
This method can be quite useful for turning something ON or OFF remotely, and can be an ideal solution for building smart home applications. You can easily replace the control of the RGB LED with something else, such as controlling a motor, relays or other actuators.