Home / Hardware / Nano RP2040 Connect / Control Built-in RGB LED over Wi-Fi with Nano RP2040 Connect

Control Built-in RGB LED over Wi-Fi with Nano RP2040 Connect

Learn how to set up your board as a web server, allowing other clients to connect via browser, to control and monitor data.

Author Karl Söderby

Last revision 10/31/2023

Introduction

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.

Goals

The goals of this project are:

Connect to a Wi-Fi network.
Set up a web server.
Connect to the server through a browser.
Control the RGB LED.

Hardware & Software Needed

Arduino IDE (online or offline).
WiFiNINA library installed.
Arduino Nano RP2040 Connect.

Circuit

Plug in the Nano RP2040 Connect to your computer.

Controlling over Wi-Fi

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.

Controlling an Arduino Through the Browser

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.

Programming the Board

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.h
5char 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 communication
17
18  // check for the WiFi module:
19  if (WiFi.status() == WL_NO_MODULE) {
20    Serial.println("Communication with WiFi module failed!");
21    // don't continue
22    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 80
41  printWifiStatus();                        // you're connected now, so print out the status
42}
43
44
45void loop() {
46  WiFiClient client = server.available();   // listen for incoming clients
47
48  if (client) {                             // if you get a client,
49    Serial.println("new client");           // print a message out the serial port
50    String currentLine = "";                // make a String to hold incoming data from the client
51    while (client.connected()) {            // loop while the client's connected
52      if (client.available()) {             // if there's bytes to read from the client,
53        char c = client.read();             // read a byte, then
54        Serial.write(c);                    // print it out the serial monitor
55        if (c == '\n') {                    // if the byte is a newline character
56
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 currentLine
95        }
96
97        // Check to see if the client request was /X
98        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}

Testing It Out

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.

Troubleshoot

If the code is not working, there are some common issues we can troubleshoot:

We have entered the wrong credentials to our Wi-Fi network.
We have not installed the WiFiNINA library.

Conclusion

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.

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.

Need support?

Help Center Ask the Arduino Forum Discover Arduino Discord

License

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

Nano RP2040 Connect

Tutorials