A web server on an Arduino MKR WIFI 1010

That’s my first time with an Arduino board. It has been surprising to see what I managed to do.

What started as an attempt to create and run a simple script evolved into something far more ambitious. A web server displaying a simple webpage.

I find it amazing!

The IDE

The first challenge I encountered was to understand how the Arduino IDE works. Fortunately in the end it is just a vs code fork, that has helped a lot. There are two main buttons that you have to consider. The first compiles and runs your script. The second puts your code on the board.

Here comes the first gotcha I had. To see the output that comes from your board you don’t have to open the debug panel. The correct panel to use is “Serial Monitor”. Here is where all the Serial.println commands will print their content.

Create a web server

Later in this article, you’ll see some code. Most of it comes from the Arduino website. It’s well-commented and clarifying.

To create the web server, we can use a library called WiFiNINA that enables network connection. In setup() it connects to the local network. The credentials and settings are at the beginning.

Some caveats:

• This Arduino model doesn’t connect to 5 GHz networks. Just use 2.4 GHz.
• keyIndex must be the same as your local network
• Be patient, connect_WiFi has a delay(10000); so it won’t start immediately

In loop() the script prints—line by line—the actual webpage. It starts with the HTTP headers, separated from the actual HTML content by a new line (client.println();). In my case, I put all html content in a single println. I still don’t know what are the good practices, but the goal was to see something running.

The code

Finally, the code!

#include <WiFiNINA.h>

char ssid[] = "..."; //  your network SSID (name) between the " "
char pass[] = "..."; // your network password between the " "
int keyIndex = 0; // your network key Index number (needed only for WEP)
int status = WL_IDLE_STATUS; //connection status
WiFiServer server(80); //server socket

WiFiClient client = server.available();

int ledPin = 2;

void setup() {
  Serial.begin(9600);
  pinMode(ledPin, OUTPUT);
  while (!Serial)
    ;
  enable_WiFi();
  connect_WiFi();

  server.begin();
  printWifiStatus();
}

void loop() {
  client = server.available();

  if (client) {
    printWEB();
  }
}

void printWifiStatus() {
  // print the SSID of the network you're attached to:
  Serial.print("SSID: ");
  Serial.println(WiFi.SSID());

  // print your board's IP address:
  IPAddress ip = WiFi.localIP();
  Serial.print("IP Address: ");
  Serial.println(ip);

  // print the received signal strength:
  long rssi = WiFi.RSSI();
  Serial.print("signal strength (RSSI):");
  Serial.print(rssi);
  Serial.println(" dBm");

  Serial.print("To see this page in action, open a browser to http://");
  Serial.println(ip);
}

void enable_WiFi() {
  // check for the WiFi module:
  if (WiFi.status() == WL_NO_MODULE) {
    Serial.println("Communication with WiFi module failed!");
    // don't continue
    while (true)
      ;
  }

  String fv = WiFi.firmwareVersion();
  if (fv < "1.0.0") {
    Serial.println("Please upgrade the firmware");
  }
}

void connect_WiFi() {
  // attempt to connect to Wifi network:
  while (status != WL_CONNECTED) {
    Serial.print("Attempting to connect to SSID: ");
    Serial.println(ssid);
    // Connect to WPA/WPA2 network. Change this line if using open or WEP network:
    status = WiFi.begin(ssid, pass);

    // wait 10 seconds for connection:
    delay(10000);
  }
}

void printWEB() {
  if (client) {                    // if you get a client,
    Serial.println("new client");  // print a message out the serial port
    String currentLine = "";       // make a String to hold incoming data from the client
    while (client.connected()) {   // loop while the client's connected
      if (client.available()) {    // if there's bytes to read from the client,
        char c = client.read();    // read a byte, then
        Serial.write(c);           // print it out the serial monitor
        if (c == '\n') {           // if the byte is a newline character

          // if the current line is blank, you got two newline characters in a row.
          // that's the end of the client HTTP request, so send a response:
          if (currentLine.length() == 0) {
            // 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();

            client.print("<!doctype html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\" /> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" /> <title>Arduino MKR 1010 Web Server</title> <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css\" /> </head> <body> <main class=\"container\"> <h1>Hi, I'm on an Arduino!</h1> </main> </body> </html>");
            // The HTTP response ends with another blank line:
            client.println();
            // break out of the while loop:
            break;
          } else { // if you got a newline, then clear currentLine:
            currentLine = "";
          }
        } else if (c != '\r') { // if you got anything else but a carriage return character,
          currentLine += c; // add it to the end of the currentLine
        }
      }
    }
    // close the connection:
    client.stop();
    Serial.println("client disconnected");
  }
}

Next steps

I for sure have to learn more about C and electronics.

I need just enough proficiency to build a working device. I want it to be connected to a web service, and—importantly—to be helpful.

I have an idea, and I’m waiting for the components to arrive home.

I hope to give you updates about this new journey as soon as possible. Those new experiments are something that are giving me a lot of satisfaction.