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 - Single Page: This helps us check sensor readings on the Arduino UNO R4 through a web page.
- Arduino UNO R4 Web Server - Single Page: We will make it possible to manage the Arduino UNO R4 with a web browser.
- Arduino UNO R4 Web Server - Single Page: We will learn how to move HTML elements (like HTML, CSS, and JavaScript) to a different file in the Arduino IDE.
- Arduino UNO R4 Web Server - Multiple pages: We will create various web pages such as index.html, temperature.html, led.html, error_404.html, and error_405.html, among others.
Hardware Preparation
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.
Additionally, some of these links are for products from our own brand, DIYables.
Additionally, some of these links are for products from our own brand, DIYables.
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.
- 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.
- 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.
- 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:
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("°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:
COM6
Attempting to connect to SSID: YOUR_WIFI
IP Address: 192.168.0.2
signal strength (RSSI):-39 dBm
Autoscroll
Clear output
9600 baud
Newline
COM6
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
Clear output
9600 baud
Newline
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
- Make an HTML file on your computer. This file should include your user interface design using HTML, CSS, and JavaScript.
- 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.
- Check and adjust the design of your file until you are happy with it.
- 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.
- 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
- 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.
- 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:
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.