Arduino Nano ESP32 - Temperature via Web

In this guide, we'll explore the process of programming the Arduino Nano ESP32 to function as a web server, allowing you to access temperature data via a web interface. Using an attached DS18B20 temperature sensor, you can easily check the current temperature by using your smartphone or PC to visit the web page served by the Arduino Nano ESP32. Here's a brief overview of how it works:

Arduino Nano ESP32 DS18B20 temperature sensor web server

We will go through two example codes:

Hardware Preparation

1×Arduino Nano ESP32
1×USB Cable Type-C
1×DS18B20 Temperature Sensor (WITH Adapter)
1×DS18B20 Temperature Sensor (WITHOUT Adapter)
1×Jumper Wires
1×(Recommended) Screw Terminal Adapter for Arduino Nano

Or you can buy the following sensor kit:

1×DIYables Sensor Kit 30 types, 69 units
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.

Buy Note: Many DS18B20 sensors available in the market are unreliable. We strongly recommend buying the sensor from the DIYables brand using the link provided above. We tested it, and it worked reliably.

Overview of Arduino Nano ESP32 Web Server and DS18B20 Temperature Sensor

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

Wiring Diagram

The wiring diagram between Arduino Nano ESP32 and Web Server DS18B20 Temperature Sensor

This image is created using Fritzing. Click to enlarge image

Arduino Nano ESP32 Code - Simple Web Page

/* * This Arduino Nano ESP32 code was developed by newbiely.com * * This Arduino Nano ESP32 code is made available for public use without any restriction * * For comprehensive instructions and wiring diagrams, please visit: * https://newbiely.com/tutorials/arduino-nano-esp32/arduino-nano-esp32-temperature-via-web */ #include <WiFi.h> #include <ESPAsyncWebServer.h> #include <OneWire.h> #include <DallasTemperature.h> #define SENSOR_PIN D2 // The Arduino Nano ESP32 pin connected to DS18B20 sensor's DATA pin const char* ssid = "YOUR_WIFI_SSID"; // CHANGE IT const char* password = "YOUR_WIFI_PASSWORD"; // CHANGE IT OneWire oneWire(SENSOR_PIN); // setup a oneWire instance DallasTemperature DS18B20(&oneWire); // pass oneWire to DallasTemperature library AsyncWebServer server(80); float getTemperature() { DS18B20.requestTemperatures(); // send the command to get temperatures float temperature_C = DS18B20.getTempCByIndex(0); // read temperature in °C return temperature_C; } void setup() { Serial.begin(9600); DS18B20.begin(); // initialize the DS18B20 sensor // Connect to Wi-Fi WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(1000); Serial.println("Connecting to WiFi..."); } Serial.println("Connected to WiFi"); // Print the ESP32's IP address Serial.print("Arduino Nano ESP32 Web Server's IP address: "); Serial.println(WiFi.localIP()); // Define a route to serve the HTML page server.on("/", HTTP_GET, [](AsyncWebServerRequest* request) { Serial.println("Arduino Nano ESP32 Web Server: New request received:"); // for debugging Serial.println("GET /"); // for debugging // get temperature from sensor float temperature = getTemperature(); // Format the temperature with two decimal places String temperatureStr = String(temperature, 2); String html = "<!DOCTYPE HTML>"; html += "<html>"; html += "<head>"; html += "<link rel=\"icon\" href=\"data:,\">"; html += "</head>"; html += "<p>"; html += "Temperature: <span style=\"color: red;\">"; html += temperature; html += "&deg;C</span>"; html += "</p>"; html += "</html>"; request->send(200, "text/html", html); }); // Start the server server.begin(); } void loop() { // Your code here }

Detailed Instructions

To get started with Arduino Nano ESP32, follow these steps:

  • If you are new to Arduino Nano ESP32, refer to the tutorial on how to set up the environment for Arduino Nano ESP32 in the Arduino IDE.
  • Wire the components according to the provided diagram.
  • Connect the Arduino Nano ESP32 board to your computer using a USB cable.
  • Launch the Arduino IDE on your computer.
  • Select the Arduino Nano ESP32) board and its corresponding COM port.
  • Open the Library Manager by clicking on the Library Manager icon on the left navigation bar of Arduino IDE.
  • Search “ESPAsyncWebServer”, then find the ESPAsyncWebServer.
  • Click Install button to install ESPAsyncWebServer library by lacamera.
Arduino Nano ESP32 ESPAsyncWebServer library
  • You will be asked to install the dependency. Click Install All button.
Arduino Nano ESP32 ESPAsyncWebServer dependencies library
  • Search “DallasTemperature” on the search box, then look for the DallasTemperature library by Miles Burton.
  • Click Install button to install DallasTemperature library.
Arduino Nano ESP32 Dallas Temperature library
  • You will be asked to install the dependency. Click Install All button to install OneWire library.
Arduino Nano ESP32 onewire library
  • 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 Nano ESP32
  • Open the Serial Monitor
  • Check out the result on Serial Monitor.
COM6
Send
Connecting to WiFi... Connected to WiFi Arduino Nano ESP32 Web Server's IP address: 192.168.0.2
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
Connecting to WiFi... Connected to WiFi Arduino Nano ESP32 Web Server's IP address: 192.168.0.2 Arduino Nano ESP32 Web Server: New request received: GET /
Autoscroll Show timestamp
Clear output
9600 baud  
Newline  
  • You will see a very simple web page of Arduino Nano ESP32 board on the web browser as below:
Arduino Nano ESP32 temperature web server

※ NOTE THAT:

With the code provided above, to get the termperature update, you have to reload the page on the web browser. In a next part, we will learn how to make web page update the temperature value on backround without reloading the webpage.

Arduino Nano ESP32 Code - Graphic Web Page

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

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

For detail of how to separate the HTML code from Arduino Nano ESP32 code, please refer to Arduino Nano ESP32 - Web Server tutorial.

Detailed Instructions

  • Open Arduino IDE and create new sketch, Give it a name, for example, newbiely.com.ino
  • Copy the below code and open with Arduino IDE
/* * This Arduino Nano ESP32 code was developed by newbiely.com * * This Arduino Nano ESP32 code is made available for public use without any restriction * * For comprehensive instructions and wiring diagrams, please visit: * https://newbiely.com/tutorials/arduino-nano-esp32/arduino-nano-esp32-temperature-via-web */ #include <WiFi.h> #include <ESPAsyncWebServer.h> #include <OneWire.h> #include <DallasTemperature.h> #include "index.h" // Include the index.h file #define SENSOR_PIN D2 // The Arduino Nano ESP32 pin connected to DS18B20 sensor's DATA pin const char* ssid = "YOUR_WIFI_SSID"; // CHANGE IT const char* password = "YOUR_WIFI_PASSWORD"; // CHANGE IT OneWire oneWire(SENSOR_PIN); // setup a oneWire instance DallasTemperature DS18B20(&oneWire); // pass oneWire to DallasTemperature library AsyncWebServer server(80); float getTemperature() { DS18B20.requestTemperatures(); // send the command to get temperatures float temperature_C = DS18B20.getTempCByIndex(0); // read temperature in °C return temperature_C; } void setup() { Serial.begin(9600); DS18B20.begin(); // initialize the DS18B20 sensor // Connect to Wi-Fi WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(1000); Serial.println("Connecting to WiFi..."); } Serial.println("Connected to WiFi"); // Print the ESP32's IP address Serial.print("Arduino Nano ESP32 Web Server's IP address: "); Serial.println(WiFi.localIP()); // Serve the HTML page from the file server.on("/", HTTP_GET, [](AsyncWebServerRequest* request) { Serial.println("Arduino Nano ESP32 Web Server: New request received:"); // for debugging Serial.println("GET /"); // for debugging request->send(200, "text/html", webpage); // webpage is from index.h file }); // Define a route to get the temperature data server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest* request) { Serial.println("Arduino Nano ESP32 Web Server: New request received:"); // for debugging Serial.println("GET /temperature"); // for debugging float temperature = getTemperature(); // Format the temperature with two decimal places String temperatureStr = String(temperature, 2); request->send(200, "text/plain", temperatureStr); }); // Start the server server.begin(); } void loop() { // Your code here }
  • 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.
    /* * This Arduino Nano ESP32 code was developed by newbiely.com * * This Arduino Nano ESP32 code is made available for public use without any restriction * * For comprehensive instructions and wiring diagrams, please visit: * https://newbiely.com/tutorials/arduino-nano-esp32/arduino-nano-esp32-temperature-via-web */ #ifndef WEBPAGE_H #define WEBPAGE_H const char* webpage = R"=====( <!DOCTYPE html> <html> <head> <title>Arduino Nano ESP32 - 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); fetchTemperature(); setInterval(fetchTemperature, 4000); // Update temperature every 4 seconds } function fetchTemperature() { fetch("/temperature") .then(response => response.text()) .then(data => {update_view(data);}); } 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, -cvs_height + 80, cvs_width, cvs_height + 50); 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 Nano ESP32 - Web Temperature</h1> <canvas id="cvs"></canvas> </body> </html> )====="; #endif
    • Now you have the code in two files: newbiely.com.ino and index.h
    • Click Upload button on Arduino IDE to upload code to Arduino Nano ESP32
    • Access the web page of Arduino Nano ESP32 board via web browser on your PC or smartphone as before. You will see it as below:
    Arduino Nano ESP32 temperature web browser server

    ※ NOTE THAT:

    • If you modify the HTML content in the index.h and does not touch anything in newbiely.com.ino file, when you compile and upload code to ESP32, Arduino IDE will not update the HTML content.
    • To make Arduino IDE update the HTML content in this case, make a change in the newbiely.com.ino file (e.g. adding empty line, add a comment....)