Arduino UNO R4 - Web Server

In this guide, we will show you how to make an Arduino UNO R4 R4 WiFi work as a web server. You can visit web pages on the Arduino UNO R4 Web Server using a web browser on your computer or smartphone. This will let you see and change values on the Arduino UNO R4. We will learn the following steps to program the Arduino UNO R4 WiFi for this purpose:

Arduino UNO R4 web server

Hardware Preparation

1×Arduino UNO R4 WiFi
1×USB Cable Type-C
1×(Optional) 9V Power Adapter for Arduino UNO R4
1×(Recommended) Screw Terminal Block Shield for Arduino Uno
1×(Optional) Transparent Acrylic Enclosure For Arduino Uno

Or you can buy the following sensor kits:

1×DIYables Sensor Kit (30 sensors/displays)
1×DIYables Sensor Kit (18 sensors/displays)
Disclosure: Some of the links provided in this section are Amazon affiliate links. We may receive a commission for any purchases made through these links at no additional cost to you. We appreciate your support.

Reading the sensor value from Arduino UNO R4 via Web

The Arduino UNO R4 code performs these tasks:

  • Building a web server that receives HTTP requests from a web browser.
  • When a web browser sends a request, the Arduino UNO R4 replies with:
    • HTTP header
    • HTTP body: This contains HTML content and sensor data.

    Here is the Arduino UNO R4 code that does the tasks mentioned above:

    /* * This Arduino UNO R4 code was developed by newbiely.com * * This Arduino UNO R4 code is made available for public use without any restriction * * For comprehensive instructions and wiring diagrams, please visit: * https://newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-web-server */ #include <WiFiS3.h> const char ssid[] = "YOUR_WIFI"; // change your network SSID (name) const char pass[] = "YOUR_WIFI_PASSWORD"; // change your network password (use for WPA, or use as key for WEP) int status = WL_IDLE_STATUS; WiFiServer server(80); float getTemperature() { return 26.9456; // YOUR SENSOR IMPLEMENTATION HERE // simulate the temperature value float temp_x100 = random(0, 10000); // a ramdom value from 0 to 10000 return temp_x100 / 100; // return the simulated temperature value from 0 to 100 in float } void setup() { //Initialize serial and wait for port to open: Serial.begin(9600); String fv = WiFi.firmwareVersion(); if (fv < WIFI_FIRMWARE_LATEST_VERSION) Serial.println("Please upgrade the firmware"); // 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); } server.begin(); // you're connected now, so print out the status: printWifiStatus(); } void loop() { // listen for incoming clients WiFiClient client = server.available(); if (client) { // read the HTTP request header line by line while (client.connected()) { if (client.available()) { String HTTP_header = client.readStringUntil('\n'); // read the header line of HTTP request if (HTTP_header.equals("\r")) // the end of HTTP request break; Serial.print("<< "); Serial.println(HTTP_header); // print HTTP request to Serial Monitor } } // send the HTTP response // send the HTTP response header client.println("HTTP/1.1 200 OK"); client.println("Content-Type: text/html"); client.println("Connection: close"); // the connection will be closed after completion of the response client.println(); // the separator between HTTP header and body // send the HTTP response body client.println("<!DOCTYPE HTML>"); client.println("<html>"); client.println("<head>"); client.println("<link rel=\"icon\" href=\"data:,\">"); client.println("</head>"); client.println("<p>"); client.print("Temperature: <span style=\"color: red;\">"); float temperature = getTemperature(); client.print(temperature, 2); client.println("&deg;C</span>"); client.println("</p>"); client.println("</html>"); client.flush(); // give the web browser time to receive the data delay(10); // close the connection: client.stop(); } } void printWifiStatus() { // print your board's IP address: Serial.print("IP Address: "); Serial.println(WiFi.localIP()); // print the received signal strength: Serial.print("signal strength (RSSI):"); Serial.print(WiFi.RSSI()); Serial.println(" dBm"); }

    Detailed Instructions

    Follow these instructions step by step:

    • If this is your first time using the Arduino Uno R4 WiFi/Minima, refer to the tutorial on setting up the environment for Arduino Uno R4 WiFi/Minima in the Arduino IDE.
    • Connect the Arduino Uno R4 board to your computer using a USB cable.
    • Launch the Arduino IDE on your computer.
    • Select the appropriate Arduino Uno R4 board (e.g., Arduino Uno R4 WiFi) and COM port.
    • Copy the code and open it in Arduino IDE.
    • Replace the wifi details (SSID and password) in the code with your own.
    • Click the Upload button in Arduino IDE to upload the code to Arduino UNO R4.
    • Open the Serial Monitor.
    • Look at the results on the Serial Monitor.
    COM6
    Send
    Attempting to connect to SSID: YOUR_WIFI IP Address: 192.168.0.2 signal strength (RSSI):-39 dBm
    Autoscroll Show timestamp
    Clear output
    9600 baud  
    Newline  
    • Look at the IP address shown and type it into the address bar of a web browser on your smartphone or computer.
    • Then, you will see this information on the Serial Monitor.
    COM6
    Send
    Attempting to connect to SSID: YOUR_WIFI IP Address: 192.168.0.2 signal strength (RSSI):-41 dBm New HTTP Request << GET / HTTP/1.1 << Host: 192.168.0.2 << Connection: keep-alive << Cache-Control: max-age=0 << Upgrade-Insecure-Requests: 1 << User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) << Accept: text/html,application/xhtml+xml,application/xml << Accept-Encoding: gzip, deflate << Accept-Language: en-US,en;q=0.9
    Autoscroll Show timestamp
    Clear output
    9600 baud  
    Newline  
    • When you enter the IP address into your web browser, you will see a simple webpage that shows information about the Arduino UNO R4 board. The page will appear as follows:
    Arduino UNO R4 R4 temperature web browser

    To create a great-looking web page using a graphic user interface (UI), see the last part of this tutorial.

Controlling the Arduino UNO R4 via Web

Managing a device connected to Arduino UNO R4 is a bit more complex than simply checking a value. This complexity arises because Arduino UNO R4 must interpret the command it gets from the web browser to determine the appropriate response. Here’s how the Arduino UNO R4 code handles this situation:

  • Building a web server that receives HTTP requests from a web browser.
  • Processing the request from the browser by:
    • Reading the HTTP request header.
    • Examining the HTTP request header to figure out the needed control command.
    • Controlling the connected device or item using the Arduino UNO R4 as per the control command.
    • Sending an HTTP response.
    • Optionally, it can also send an HTTP response body containing HTML content to show details about the control status (if required).

    For a better and detailed example, I suggest looking at the tutorials below:

Separating HTML content into another file on Arduino IDE

To make a basic web page with just a few contents, you can include the HTML in the Arduino UNO R4 code as mentioned before.

If you want to create a more complex and impressive webpage with a lot of content, it's not easy to put all the HTML, CSS, and JavaScript directly into the Arduino UNO R4 code. In this case, you can use a different method to handle the code.

  • The Arduino UNO R4 code should be saved in a file named .ino.
  • The HTML code, which includes HTML, CSS, and Javascript, should be saved in a different file named .h. This helps keep the web page content separate from the Arduino UNO R4 code, making it simpler to handle and change.

We need to take two major steps:

  • Creating HTML Content
  • Coding Arduino UNO R4

Preparing HTML content

  1. Make an HTML file on your computer. This file should include your user interface design using HTML, CSS, and JavaScript.
  2. In the HTML file, put a placeholder where you want the data from the Arduino UNO R4 to appear. For now, use any sample value.
  3. Check and adjust the design of your file until you are happy with it.
  4. Replace the placeholder value in your HTML file with a unique label, such as TEMPERATURE_MARKER. Later on, you will use the command String.replace("TEMPERATURE_MARKER", real_value); in your Arduino UNO R4 script to show actual data from the Arduino.
  5. Next, we will transfer this HTML content into a .h file within the Arduino IDE.

Programming Arduino UNO R4

  • Start the Arduino IDE and make a new file. Name it like this: newbiely.com.ino.
  • Take the code given below and put it into the new file you created.
/* * This Arduino UNO R4 code was developed by newbiely.com * * This Arduino UNO R4 code is made available for public use without any restriction * * For comprehensive instructions and wiring diagrams, please visit: * https://newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-web-server */ #include <WiFiS3.h> #include "index.h" const char ssid[] = "YOUR_WIFI"; // change your network SSID (name) const char pass[] = "YOUR_WIFI_PASSWORD"; // change your network password (use for WPA, or use as key for WEP) int status = WL_IDLE_STATUS; WiFiServer server(80); float getTemperature() { // YOUR SENSOR IMPLEMENTATION HERE // simulate the temperature value float temp_x100 = random(0, 10000); // a ramdom value from 0 to 10000 return temp_x100 / 100; // return the simulated temperature value from 0 to 100 in float } void setup() { //Initialize serial and wait for port to open: Serial.begin(9600); String fv = WiFi.firmwareVersion(); if (fv < WIFI_FIRMWARE_LATEST_VERSION) Serial.println("Please upgrade the firmware"); // 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); } server.begin(); // you're connected now, so print out the status: printWifiStatus(); } void loop() { // listen for incoming clients WiFiClient client = server.available(); if (client) { // read the HTTP request header line by line while (client.connected()) { if (client.available()) { String HTTP_header = client.readStringUntil('\n'); // read the header line of HTTP request if (HTTP_header.equals("\r")) // the end of HTTP request break; Serial.print("<< "); Serial.println(HTTP_header); // print HTTP request to Serial Monitor } } // send the HTTP response // send the HTTP response header client.println("HTTP/1.1 200 OK"); client.println("Content-Type: text/html"); client.println("Connection: close"); // the connection will be closed after completion of the response client.println(); // the separator between HTTP header and body // send the HTTP response body float temp = getTemperature(); String html = String(HTML_CONTENT); html.replace("TEMPERATURE_MARKER", String(temp, 2)); // replace the marker by a real value client.println(html); client.flush(); // give the web browser time to receive the data delay(10); // close the connection: client.stop(); } } void printWifiStatus() { // print your board's IP address: Serial.print("IP Address: "); Serial.println(WiFi.localIP()); // print the received signal strength: Serial.print("signal strength (RSSI):"); Serial.print(WiFi.RSSI()); Serial.println(" dBm"); }
  • Update the code with your WiFi details (SSID and password)
  • In Arduino IDE, create the file named index.h
Arduino IDE 2 adds file
  • Click on the button below the serial monitor icon and select New Tab, or press Ctrl+Shift+N.
  • Name the file index.h and press the OK button.
Arduino IDE 2 adds file index.h
  • Copy the code below and paste it into the file named index.h.
/* * This Arduino UNO R4 code was developed by newbiely.com * * This Arduino UNO R4 code is made available for public use without any restriction * * For comprehensive instructions and wiring diagrams, please visit: * https://newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-web-server */ const char *HTML_CONTENT = R""""( REPLACE_YOUR_HTML_CONTENT_HERE )"""";
  • Insert your prepared HTML content at REPLACE_YOUR_HTML_CONTENT_HERE. It's okay to use new line characters. Here is an example of an index.h file:
/* * This Arduino UNO R4 code was developed by newbiely.com * * This Arduino UNO R4 code is made available for public use without any restriction * * For comprehensive instructions and wiring diagrams, please visit: * https://newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-web-server */ const char *HTML_CONTENT = R""""( <!DOCTYPE html> <html> <head> <title>Arduino Uno R4 - Web Temperature</title> <meta name="viewport" content="width=device-width, initial-scale=0.7, maximum-scale=0.7"> <meta charset="utf-8"> <link rel="icon" href="https://diyables.io/images/page/diyables.svg"> <style> body { font-family: "Georgia"; text-align: center; font-size: width/2pt;} h1 { font-weight: bold; font-size: width/2pt;} h2 { font-weight: bold; font-size: width/2pt;} button { font-weight: bold; font-size: width/2pt;} </style> <script> var cvs_width = 200, cvs_height = 450; function init() { var canvas = document.getElementById("cvs"); canvas.width = cvs_width; canvas.height = cvs_height + 50; var ctx = canvas.getContext("2d"); ctx.translate(cvs_width/2, cvs_height - 80); update_view(TEMPERATURE_MARKER); } function update_view(temp) { var canvas = document.getElementById("cvs"); var ctx = canvas.getContext("2d"); var radius = 70; var offset = 5; var width = 45; var height = 330; ctx.clearRect(-cvs_width/2, -350, cvs_width, cvs_height); ctx.strokeStyle="blue"; ctx.fillStyle="blue"; //5-step Degree var x = -width/2; ctx.lineWidth=2; for (var i = 0; i <= 100; i+=5) { var y = -(height - radius)*i/100 - radius - 5; ctx.beginPath(); ctx.lineTo(x, y); ctx.lineTo(x - 20, y); ctx.stroke(); } //20-step Degree ctx.lineWidth=5; for (var i = 0; i <= 100; i+=20) { var y = -(height - radius)*i/100 - radius - 5; ctx.beginPath(); ctx.lineTo(x, y); ctx.lineTo(x - 25, y); ctx.stroke(); ctx.font="20px Georgia"; ctx.textBaseline="middle"; ctx.textAlign="right"; ctx.fillText(i.toString(), x - 35, y); } // shape ctx.lineWidth=16; ctx.beginPath(); ctx.arc(0, 0, radius, 0, 2 * Math.PI); ctx.stroke(); ctx.beginPath(); ctx.rect(-width/2, -height, width, height); ctx.stroke(); ctx.beginPath(); ctx.arc(0, -height, width/2, 0, 2 * Math.PI); ctx.stroke(); ctx.fillStyle="#e6e6ff"; ctx.beginPath(); ctx.arc(0, 0, radius, 0, 2 * Math.PI); ctx.fill(); ctx.beginPath(); ctx.rect(-width/2, -height, width, height); ctx.fill(); ctx.beginPath(); ctx.arc(0, -height, width/2, 0, 2 * Math.PI); ctx.fill(); ctx.fillStyle="#ff1a1a"; ctx.beginPath(); ctx.arc(0, 0, radius - offset, 0, 2 * Math.PI); ctx.fill(); temp = Math.round(temp * 100) / 100; var y = (height - radius)*temp/100.0 + radius + 5; ctx.beginPath(); ctx.rect(-width/2 + offset, -y, width - 2*offset, y); ctx.fill(); ctx.fillStyle="red"; ctx.font="bold 34px Georgia"; ctx.textBaseline="middle"; ctx.textAlign="center"; ctx.fillText(temp.toString() + "°C", 0, 100); } window.onload = init; </script> </head> <body> <h1>Arduino - Web Temperature</h1> <canvas id="cvs"></canvas> </body> </html> )"""";
  • You now have the code in two files: newbiely.com.ino and index.h
  • Click the Upload button in Arduino IDE to transfer the code to the Arduino UNO R4
  • Open the Arduino UNO R4 board's web page in your web browser, similar to previous times. It will display as follows:
Arduino UNO R4 temperature web browser

For a detailed guide, please check the Arduino UNO R4 - DS18B20 Temperature Sensor via Web tutorial.

※ NOTE THAT:

If you change the HTML in the file named "index.h" but do not make changes to the "newbiely.com.ino" file, the Arduino IDE will not update the HTML when you compile and upload the code to the ESP32.

To make the Arduino IDE update the HTML, you must change something in the "newbiely.com.ino" file. You could add an empty line or a comment. This tells the IDE that the project has changed, so it includes your new HTML when uploading.

Arduino UNO R4 Web Server - Multiple Pages

Visit this tutorial about Arduino UNO R4 - Web Server Multiple Pages.

※ OUR MESSAGES

  • As freelancers, We are AVAILABLE for HIRE. See how to outsource your project to us
  • Please feel free to share the link of this tutorial. However, Please do not use our content on any other websites. We invested a lot of effort and time to create the content, please respect our work!