Arduino Nano ESP32 - Web Apps Web Temperature
Overview
This tutorial covers the DIYablesWebTemperaturePage class from the DIYables ESP32 WebApps Library. The browser page renders a mercury-style thermometer that displays a real-time temperature value received from the Arduino Nano ESP32 over WebSocket. The temperature range, units, and scale are configured in the constructor and transmitted to the browser on connection.
Watch a demonstration of the Web Temperature app with a DS18B20 sensor:
What This Tutorial Covers
- Configuring the thermometer range and units in the constructor
- Supplying temperature readings via a callback
- Sending updated values from real sensors (DS18B20, DHT22)
- Accessing the thermometer page from a browser
Hardware Preparation
Or you can buy the following kits:
| 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 .
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.
Steps
Follow these instructions step by step:
- If this is your first time using the Arduino Nano ESP32, refer to the tutorial on setting up the Arduino Nano ESP32 development environment.
- Connect the Arduino Nano ESP32 board to your computer using a USB cable.
- Launch the Arduino IDE on your computer.
- Select the appropriate board (e.g. Arduino Nano ESP32) and COM port.
- Navigate to the Libraries icon on the left bar of the Arduino IDE.
- Search "DIYables ESP32 WebApps", then find the DIYables ESP32 WebApps Library by DIYables
- Click Install button to install the library.
- Search for DIYables ESP32 WebApps created by DIYables and click the Install button.
1
void setup() {
- You will be asked for installing some other library dependencies
- Click Install All button to install all library dependencies.
- On Arduino IDE, Go to File Examples DIYables ESP32 WebApps WebTemperature example, or copy the above code and paste it to the editor of Arduino IDE
/*
* This example demonstrates how to create a web-base Serial.println("Starting Web Temperature Server...");
// Add web apps to server
server.addApp(&homePage);
server.addApp(&temperaturePage);
// Set 404 Not Found page (optional - for better user experience)
server.setNotFoundPage(DIYablesNotFoundPage());re display
* using the DIYables ESP32 WebApps Library with ESP32.
*
* The library automatically detects the ESP32 platform and
* includes the appropriate abstraction layer for seamless operation.
*
* The web page displays a thermometer visualization that shows temperature
* readings in real-time through WebSocket communication.
*
* Features:
* - Real-time temperature display with thermometer visualization
* - Configurable temperature range and units
* - Auto-connecting WebSocket for seamless communication
* - Mobile-responsive design with professional UI
* - Automatic platform detection and abstraction
* - Compatible with both WiFi and Ethernet connections
* Hardware: ESP32 Boards
*/
#include <DIYables_ESP32_Platform.h>
#include <DIYablesWebApps.h>
// WiFi credentials - UPDATE THESE WITH YOUR NETWORK
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create web app instances
ESP32ServerFactory serverFactory;
DIYablesWebAppServer server(serverFactory, 80, 81); // HTTP port 80, WebSocket port 81
DIYablesHomePage homePage;
DIYablesWebTemperaturePage temperaturePage(-10.0, 50.0, "°C"); // Min: -10°C, Max: 50°C
// Temperature simulation variables
float currentTemp = 25.0; // Starting temperature
unsigned long lastUpdate = 0;
void setup() {
Serial.begin(9600);
Serial.println("Starting Web Temperature Server...");
// Add web apps to server
server.addApp(&homePage);
server.addApp(&temperaturePage);
// Set 404 Not Found page (optional - for better user experience)
server.setNotFoundPage(DIYablesNotFoundPage());
// Set up temperature callback for value requests
temperaturePage.onTemperatureValueRequested(onTemperatureValueRequested);
// Start the server
server.begin(WIFI_SSID, WIFI_PASSWORD);
}
void loop() {
// Handle web server and WebSocket communications
server.loop();
// Simulate temperature readings
simulateTemperature();
// Send temperature update every 2 seconds
if (millis() - lastUpdate >= 2000) {
temperaturePage.sendTemperature(currentTemp);
// Print temperature to Serial Monitor
Serial.println("Temperature: " + String(currentTemp, 1) + "°C");
lastUpdate = millis();
}
delay(10); // Small delay for stability
}
void simulateTemperature() {
// Simple temperature simulation - slowly increases and decreases
static bool increasing = true;
if (increasing) {
currentTemp += 0.1; // Increase temperature slowly
if (currentTemp >= 35.0) {
increasing = false; // Start decreasing when it reaches 35°C
}
} else {
currentTemp -= 0.1; // Decrease temperature slowly
if (currentTemp <= 15.0) {
increasing = true; // Start increasing when it reaches 15°C
}
}
}
/**
* Callback function called when web interface requests temperature value
* Send current temperature value to web interface
*/
void onTemperatureValueRequested() {
Serial.println("Temperature value requested from web interface");
// Send current temperature value (config is automatically sent by the library)
temperaturePage.sendTemperature(currentTemp);
}
/*
* Alternative setup for real temperature sensor (DS18B20 example):
*
* #include <OneWire.h>
* #include <DallasTemperature.h>
*
* #define ONE_WIRE_BUS 2
* OneWire oneWire(ONE_WIRE_BUS);
* DallasTemperature sensors(&oneWire);
*
* void setup() {
* // ... existing setup code ...
* sensors.begin();
* }
*
* float readTemperature() {
* sensors.requestTemperatures();
* return sensors.getTempCByIndex(0);
* }
*
* // In loop(), replace simulateTemperature() with:
* // currentTemp = readTemperature();
*/
- Update the WiFi credentials in the sketch:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Click Upload button on Arduino IDE to upload code to Arduino Nano ESP32
- Open the Serial Monitor
- The Serial Monitor output should resemble the following:
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Nano ESP32' on 'COM15')
New Line
9600 baud
Starting Web Temperature Server...
INFO: Added app /
INFO: Added app /web-temperature
DIYables WebApp Library
Platform: Arduino Nano ESP32
Network connected!
IP address: 192.168.0.2
HTTP server started on port 80
Configuring WebSocket server callbacks...
WebSocket server started on port 81
WebSocket URL: ws://192.168.0.2:81
WebSocket server started on port 81
==========================================
DIYables WebApp Ready!
==========================================
Web Interface: http://192.168.0.2
WebSocket: ws://192.168.0.2:81
Available Applications:
Home Page: http://192.168.0.2/
Web Temperature: http://192.168.0.2/web-temperature
==========================================
- If nothing appears, press the reset button on the board.
- Enter the IP address from the Serial Monitor into a browser on the same network.
- Example: http://192.168.0.2
- The home page shows a card for the temperature application:
- Select the Web Temperature card to open the thermometer page:
- The page is also directly accessible at http://192.168.0.2/web-temperature.
Thermometer Configuration
Constructor
Set the minimum temperature, maximum temperature, and unit string in the constructor. These values are sent to the browser on connection and determine the scale of the thermometer.
// Range: -10 to 50 degrees Celsius
DIYablesWebTemperaturePage temperaturePage(-10.0, 50.0, "°C");
Common configurations:
| Min | Max | Unit |
|---|---|---|
| -10.0 | 50.0 | °C |
| 32.0 | 122.0 | °F |
| 263.15 | 323.15 | K |
Callback
Register onTemperatureValueRequested to supply a reading each time the browser requests an update:
temperaturePage.onTemperatureValueRequested(onTemperatureValueRequested);
Sending a Value
Inside the callback function, read the sensor and call sendTemperatureValue():
void onTemperatureValueRequested() {
float temp = readSensor(); // returns float in configured units
temperaturePage.sendTemperatureValue(temp);
}
Reading from Real Sensors
DS18B20 (1-Wire)
#include <OneWire.h>
#include <DallasTemperature.h>
OneWire oneWire(4);
DallasTemperature sensors(&oneWire);
float readSensor() {
sensors.requestTemperatures();
return sensors.getTempCByIndex(0);
}
DHT22 (Single-Wire)
#include <DHT.h>
DHT dht(5, DHT22);
float readSensor() {
return dht.readTemperature(); // returns °C; use readTemperature(true) for °F
}
Troubleshooting
Thermometer shows no value
- Verify onTemperatureValueRequested is registered before webAppsServer.begin()
- Confirm sendTemperatureValue() is called inside the callback
Sensor returns NaN
- For DS18B20: verify OneWire data pin and pull-up resistor (4.7 kΩ between data and 3.3 V)
- For DHT22: add a 10 kΩ pull-up on the data line; minimum read interval is 2 s
Mercury level does not match expected value
- Check that the reported value is within the configured min/max range
- Values outside the range are clamped at the thermometer boundaries
Page not reachable
- Check the IP address from the Serial Monitor
- Confirm the board and browser device are on the same WiFi network