Home / Hardware / MKR WiFi 1010 / Host a Web Server on the MKR WiFi 1010

Host a Web Server on the MKR WiFi 1010

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

Author Karl Söderby

Last revision 12/28/2023

Introduction

In this tutorial, we will use the MKR WiFi 1010 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.

Hardware & Software Needed

Arduino IDE (online or offline).
WiFiNINA library.
Arduino MKR WiFi 1010 (link to store).
Generic LED
220 ohm resistor
Breadboard
Jumper wires

Circuit

Follow the wiring diagram below to connect the LED to the MKR WiFi 1010 board.

Schematic

This is the schematic of our 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.

In order to create a web server on our MKR WiFi 1010, we will go through the following steps:

First, we need to initialize the WiFiNINA library.
Then, we will connect to our local Wi-Fi by entering our
```
SSID
```
(name of network) and
```
PASS
```
(password of network).
Once connected, it will start hosting a server, and start waiting for a client.
If we now enter the IP address of our board in our regular browser (e.g. Chrome, Firefox) we connect as a client.
As long as we are connected, the program detects it and enters a
```
while()
```
loop.
In the
```
while()
```
loop, two links are simply printed in HTML format, which are visible in the browser.
These links control the LED we connected to the board, by turning it "ON" or "OFF".
If we press the "ON" link, the program is configured to add an "H" to the end of the URL, or if we press the "OFF" link, we add an "L" to the end of the URL.
If the URL ends with "H", it will turn on the LED, and if it ends with "L" it turns it off. The "H" stands for "HIGH" and the "L" for "LOW".

And that is the summary of the configuration we will be using in this tutorial. There are a few other functionalities, such as: checking if we have the latest firmware and if we are using the right board, where any of the aforementioned potential errors will be printed in the Serial Monitor.

Creating the Program

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 SAMD boards (32-bits Arm® Cortex®-M0+) 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.

Code Explanation

Note: This section is optional, you can find the complete code further down on this tutorial.

The initialization begins by including the WiFiNINA library, afterwards we need to enter our credentials to our network.

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;

We can then configure the

setup().

Here we set the Serial Communication to 9600, configure the

pinMode

for our LED, and use the line

while(!Serial);

to only initialize the rest of the program as long as we open the Serial Monitor. We do this since important information is printed in the Serial Monitor, and if we upload it, we may risk missing it. Then, we execute two functions:

enable_WiFi()

and

connect_WiFi

, which we will use to connect to our WiFi. We then use

server.begin()

to start hosting the server, once we are connected. The final function,

printWiFiStatus()

simply prints the information about the connection status in the Serial Monitor. Here, we will see the IP address we need to connect to.

1void setup() {
2  Serial.begin(9600);
3  pinMode(ledPin, OUTPUT);
4  while (!Serial);
5
6  enable_WiFi();
7  connect_WiFi();
8
9  server.begin();
10  printWifiStatus();
11
12}

The loop of this program is very short. First, we use

client

to check if the

server

is available. If it is, we execute the

printWEB()

function.

1void loop() {
2  client = server.available();
3
4  if (client) {
5    printWEB();
6  }
7}

Next up is the functions that we used in

setup()

. These are

printWiFiStatus()

enableWiFi()

, and

connect_WiFi()

If we look at

printWiFiStatus()

, you can see that it basically prints different things in the Serial Monitor. Most importantly, it prints the board's IP address, which we will need to enter in the browser to control the Arduino.

1void printWifiStatus() {
2  // print the SSID of the network you're attached to:
3  Serial.print("SSID: ");
4  Serial.println(WiFi.SSID());
5
6  // print your board's IP address:
7  IPAddress ip = WiFi.localIP();
8  Serial.print("IP Address: ");
9  Serial.println(ip);
10
11  // print the received signal strength:
12  long rssi = WiFi.RSSI();
13  Serial.print("signal strength (RSSI):");
14  Serial.print(rssi);
15  Serial.println(" dBm");
16
17  Serial.print("To see this page in action, open a browser to http://");
18  Serial.println(ip);
19}
20
21void enable_WiFi() {
22  // check for the WiFi module:
23  if (WiFi.status() == WL_NO_MODULE) {
24    Serial.println("Communication with WiFi module failed!");
25    // don't continue
26    while (true);
27  }
28
29  String fv = WiFi.firmwareVersion();
30  if (fv < "1.0.0") {
31    Serial.println("Please upgrade the firmware");
32  }
33}
34
35void connect_WiFi() {
36  // attempt to connect to Wifi network:
37  while (status != WL_CONNECTED) {
38    Serial.print("Attempting to connect to SSID: ");
39    Serial.println(ssid);
40    // Connect to WPA/WPA2 network. Change this line if using open or WEP network:
41    status = WiFi.begin(ssid, pass);
42
43    // wait 10 seconds for connection:
44    delay(10000);
45  }
46}

Now, we will look at the core of this program: the

printWEB()

function, which we call from the

loop()

Here, we first begin by checking if

client

is available, and if it is, we enter a

while()

loop. Inside the while loop, we will use

client.print

to start printing HTML code that can be viewed from the browser. To not overload the Arduino's board memory, we use a very basic setup: two links that turn an LED either ON or OFF.

This line of code is used to turn ON the LED, by adding /H to the end of the URL.

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

This line of code is used to turn OFF the LED, by adding /L to the end of the URL.

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

We will also make a reading on an analog pin (A1). Even though we do not have anything connected, we can simply see how we can read something connected to the board, and then print it to the client.

client.print("Random reading from analog pin: ");

client.print(randomReading);

When the printing is done, we use

break;

to exit the while loop. Now, we configure the program to check whether there's a H or L added to the URL, where we use

digitalWrite(ledPin, STATE)

to turn the LED ON or OFF.

1void printWEB() {
2
3  if (client) {                             // if you get a client,
4    Serial.println("new client");           // print a message out the serial port
5    String currentLine = "";                // make a String to hold incoming data from the client
6    while (client.connected()) {            // loop while the client's connected
7      if (client.available()) {             // if there's bytes to read from the client,
8        char c = client.read();             // read a byte, then
9        Serial.write(c);                    // print it out the serial monitor
10        if (c == '\n') {                    // if the byte is a newline character
11
12          // if the current line is blank, you got two newline characters in a row.
13          // that's the end of the client HTTP request, so send a response:
14          if (currentLine.length() == 0) {
15
16            // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
17            // and a content-type so the client knows what's coming, then a blank line:
18            client.println("HTTP/1.1 200 OK");
19            client.println("Content-type:text/html");
20            client.println();
21
22            //create the links
23            client.print("Click <a href=\"/H\">here</a> turn the LED on<br>");
24            client.print("Click <a href=\"/L\">here</a> turn the LED off<br>");
25
26            int randomReading = analogRead(A1);
27            client.print("Random reading from analog pin: ");
28            client.print(randomReading);
29
30            // The HTTP response ends with another blank line:
31            client.println();
32            // break out of the while loop:
33            break;
34          }
35          else {      // if you got a newline, then clear currentLine:
36            currentLine = "";
37          }
38        }
39        else if (c != '\r') {    // if you got anything else but a carriage return character,
40          currentLine += c;      // add it to the end of the currentLine
41        }
42
43        if (currentLine.endsWith("GET /H")) {
44        digitalWrite(ledPin, HIGH);
45        }
46        if (currentLine.endsWith("GET /L")) {
47        digitalWrite(ledPin, LOW);
48        }
49
50      }
51    }
52    // close the connection:
53    client.stop();
54    Serial.println("client disconnected");
55  }
56}

Complete Code

If you choose to skip the code building section, the complete code can be found below:

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}

Upload Sketch and Testing the Program

Once we are finished with the coding, we can upload the sketch to the board. Once it is successful, open the Serial Monitor and it should look like the following image:

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".

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 MKR WiFi 1010 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.

Note: The memory of the Arduino MKR WiFi 1010 is not infinite. It is encouraged to use external CSS files if you are planning a bigger project, as it reduces the memory.

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.

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.

MKR WiFi 1010

Tutorials