Arduino - Temperature via Web

In this tutorial, we will learn how to program Arduino to become a web server that provides you with the temperature via the web. You can access the web page provided by Arduino to check the temperature from a DS18B20 temperature sensor. The below is how it works:

Arduino Uno R4 DS18B20 temperature sensor web server

We will go through two example codes:

Hardware Required

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

Or you can buy the following sensor kit:

1×DIYables Sensor Kit 30 types, 69 units
Please note: These are Amazon affiliate links. If you buy the components through these links, We will get a commission at no extra cost to you. We appreciate it.

Buy Note: Many DS18B20 sensors on the market are low-quality. We highly recommend buying the sensor from the DIYables brand using the link above. We tested it, and it worked well.

About Arduino Uno R4 and DS18B20 Temperature Sensor

If you do not know about Arduino Uno R4 and DS18B20 temperature sensor (pinout, how it works, how to program ...), learn about them in the following tutorials:

Wiring Diagram

Arduino Uno R4 WiFi DS18B20 Temperature Sensor Wiring Diagram

This image is created using Fritzing. Click to enlarge image

Arduino Code - Simple Web Page

/* * Created by ArduinoGetStarted.com * * This example code is in the public domain * * Tutorial page: https://arduinogetstarted.com/tutorials/arduino-temperature-via-web */ #include <WiFiS3.h> #include <OneWire.h> #include <DallasTemperature.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) const int SENSOR_PIN = 6; // Arduino pin connected to DS18B20 sensor's DQ pin OneWire oneWire(SENSOR_PIN); // setup a oneWire instance DallasTemperature tempSensor(&oneWire); // pass oneWire to DallasTemperature library int status = WL_IDLE_STATUS; WiFiServer server(80); float getTemperature() { tempSensor.requestTemperatures(); // send the command to get temperatures float tempCelsius = tempSensor.getTempCByIndex(0); // read temperature in Celsius return tempCelsius; } void setup() { //Initialize serial and wait for port to open: Serial.begin(9600); tempSensor.begin(); // initialize the temperature sensor 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"); }

Quick Steps

  • If this is the first time you use Arduino Uno R4, see how to setup environment for Arduino Uno R4 on Arduino IDE.
  • Copy the above code and open with Arduino IDE
  • Change the wifi information (SSID and password) in the code to yours
  • Click Upload button on Arduino IDE to upload code to Arduino
  • Open the Serial Monitor
  • Check out the result on 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  
  • You will find an IP address. Type this IP address into the address bar of a web browser on your smartphone or PC.
  • You will see the following output 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  
  • You will see a very simple web page of Arduino board on the web browser as below:
Arduino Uno R4 temperature web browser

Arduino Code - Graphic Web Page

As a graphic web page contains a large amount of HTML content, embedding it into the Arduino code as before becomes inconvenient. To address this, we need to separate the Arduino code and the HTML code into different files:

  • The Arduino code will be placed in a .ino file.
  • The HTML code (including HTML, CSS, and Javascript) will be placed in a .h file.

Quick Steps

  • Open Arduino IDE and create new sketch, Give it a name, for example, ArduinoGetStarted.com.ino
  • Copy the below code and open with Arduino IDE
/* * Created by ArduinoGetStarted.com * * This example code is in the public domain * * Tutorial page: https://arduinogetstarted.com/tutorials/arduino-temperature-via-web */ #include <WiFiS3.h> #include "index.h" #include <OneWire.h> #include <DallasTemperature.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) const int SENSOR_PIN = 6; // Arduino pin connected to DS18B20 sensor's DQ pin OneWire oneWire(SENSOR_PIN); // setup a oneWire instance DallasTemperature tempSensor(&oneWire); // pass oneWire to DallasTemperature library int status = WL_IDLE_STATUS; WiFiServer server(80); float getTemperature() { tempSensor.requestTemperatures(); // send the command to get temperatures float tempCelsius = tempSensor.getTempCByIndex(0); // read temperature in Celsius return tempCelsius; } void setup() { //Initialize serial and wait for port to open: Serial.begin(9600); tempSensor.begin(); // initialize the temperature sensor 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"); }
  • Change the WiFi information (SSID and password) in the code to yours
  • Create the index.h file On Arduino IDE by:
    • Either click on the button just below the serial monitor icon and choose New Tab, or use Ctrl+Shift+N keys.
    Arduino IDE 2 adds file
    • Give the file's name index.h and click OK button
    Arduino IDE 2 adds file index.h
    • Copy the below code and paste it to the index.h.
    /* * Created by ArduinoGetStarted.com * * This example code is in the public domain * * Tutorial page: https://arduinogetstarted.com/tutorials/arduino-temperature-via-web */ const char *HTML_CONTENT = R""""( <!DOCTYPE html> <html> <head> <title>Arduino - 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> )"""";
    • Now you have the code in two files: ArduinoGetStarted.com.ino and index.h
    • Click Upload button on Arduino IDE to upload code to Arduino
    • Access the web page of Arduino board via web browser as before. You will see it as below:
    Arduino temperature web browser

    ※ NOTE THAT:

    • If you make changes to the HTML content within the index.h file but don't modify anything in the ArduinoGetStarted.com.ino file, the Arduino IDE won't refresh or update the HTML content when you compile and upload the code to the ESP32.
    • To force the Arduino IDE to update the HTML content in this situation, you need to make a modification in the ArduinoGetStarted.com.ino file. For example, you can add an empty line or insert a comment. This action triggers the IDE to recognize that there have been changes in the project, ensuring that your updated HTML content gets included in the upload.

The Best Arduino Starter Kit

※ OUR MESSAGES