🔗Goal
Build a room temperature monitor that serves a live web dashboard over WiFi. The ESP32 reads the temperature from a DS18B20 sensor and hosts a small web page that any device on your local network — phone, laptop, tablet — can open in a browser. The page auto-refreshes every 5 seconds, so you always see the current reading.
Here is how the system works at a high level:
graph LR
A[DS18B20 Sensor] -->|OneWire GPIO 4| B[ESP32]
B -->|WiFi| C[Local Network]
C --> D[Phone / Laptop Browser]The DS18B20 is a digital temperature sensor that communicates over the OneWire protocol using a single data pin. The ESP32 reads the temperature, then serves a simple HTML page via its built-in WiFi web server. No cloud services or external servers are needed — everything runs on your local network.
🔗Prerequisites
You will need the following components:
| Component | Qty | Notes | Buy |
|---|---|---|---|
| ESP32 dev board | 1 | Any ESP32-WROOM-32 DevKit works | AliExpress | Amazon.de .co.uk .com |
| DS18B20 temperature sensor | 1 | Waterproof or bare TO-92 package | AliExpress | Amazon.de .co.uk .com |
| 4.7k ohm resistor | 1 | Pull-up for the OneWire data line | AliExpress | Amazon.de .co.uk .com |
| Breadboard | 1 | AliExpress | Amazon.de .co.uk .com | |
| Jumper wires | ~6 | AliExpress | Amazon.de .co.uk .com |
Links marked Amazon/AliExpress are affiliate links. We may earn a small commission at no extra cost to you.
You will also need the following Arduino libraries. Install them via Sketch > Include Library > Manage Libraries in the Arduino IDE:
| Library | Author | Purpose |
|---|---|---|
| OneWire | Paul Stoffregen | OneWire protocol communication |
| DallasTemperature | Miles Burton | DS18B20 high-level functions |
See our DS18B20 guide for a deeper dive into the sensor itself, including multi-sensor setups and addressing.
🔗Tutorial
🔗Step 1: Wiring
Connect the DS18B20 to the ESP32 as shown in the table below. The DS18B20 has three pins — if you are holding the flat side of the TO-92 package facing you, the left pin is GND, the center pin is DATA, and the right pin is VCC.
| Component | Pin | ESP32 Pin |
|---|---|---|
| DS18B20 | GND (pin 1) | GND |
| DS18B20 | DATA (pin 2) | GPIO 4 |
| DS18B20 | VCC (pin 3) | 3.3V |
| 4.7k ohm resistor | Between DATA and VCC | GPIO 4 to 3.3V |
The $4.7\,\text{k}\Omega$ pull-up resistor is required for the OneWire protocol to work reliably. It holds the data line HIGH when no device is pulling it LOW.
Pin labels and GPIO numbers vary between ESP32 boards. Always check your board's pinout diagram and datasheet.
🔗Step 2: Configure WiFi credentials
Before uploading the code, replace the placeholder WiFi credentials with your own network name and password. The ESP32 will connect to your WiFi network and print its IP address to the Serial Monitor.
🔗Step 3: Upload the code
#include <WiFi.h>
#include <WebServer.h>
#include <OneWire.h>
#include <DallasTemperature.h>
// ----- Configuration -----
const char* WIFI_SSID = "YOUR_WIFI_SSID";
const char* WIFI_PASSWORD = "YOUR_WIFI_PASSWORD";
#define SENSOR_PIN 4 // DS18B20 data pin
// ----- Objects -----
OneWire oneWire(SENSOR_PIN);
DallasTemperature sensors(&oneWire);
WebServer server(80);
float currentTemp = 0.0;
// ----- HTML page -----
// The page auto-refreshes every 5 seconds using a <meta> tag.
String buildPage() {
String html = "<!DOCTYPE html><html><head>";
html += "<meta charset='UTF-8'>";
html += "<meta name='viewport' content='width=device-width, initial-scale=1.0'>";
html += "<meta http-equiv='refresh' content='5'>";
html += "<title>Room Temperature</title>";
html += "<style>";
html += "body { font-family: Arial, sans-serif; background: #1a1a2e; color: #e0e0e0; ";
html += "display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; }";
html += ".card { background: #16213e; border-radius: 16px; padding: 40px 60px; text-align: center; ";
html += "box-shadow: 0 4px 20px rgba(0,0,0,0.3); }";
html += ".temp { font-size: 72px; font-weight: bold; color: #e94560; }";
html += ".label { font-size: 18px; margin-bottom: 10px; color: #a0a0b0; }";
html += ".update { font-size: 12px; color: #606080; margin-top: 20px; }";
html += "</style></head><body>";
html += "<div class='card'>";
html += "<div class='label'>Room Temperature</div>";
html += "<div class='temp'>" + String(currentTemp, 1) + " °C</div>";
html += "<div class='update'>Auto-refreshes every 5 seconds</div>";
html += "</div></body></html>";
return html;
}
void handleRoot() {
sensors.requestTemperatures();
currentTemp = sensors.getTempCByIndex(0);
server.send(200, "text/html", buildPage());
}
void setup() {
Serial.begin(115200);
// Initialize DS18B20
sensors.begin();
Serial.println("DS18B20 initialized.");
// Connect to WiFi
WiFi.begin(WIFI_SSID, WIFI_PASSWORD);
Serial.print("Connecting to WiFi");
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println();
Serial.print("Connected! IP address: ");
Serial.println(WiFi.localIP());
// Start web server
server.on("/", handleRoot);
server.begin();
Serial.println("Web server started on port 80.");
Serial.print("Open http://");
Serial.print(WiFi.localIP());
Serial.println("/ in your browser.");
}
void loop() {
server.handleClient();
}🔗Step 4: Access the dashboard
- Upload the sketch and open the Serial Monitor at 115200 baud
- Wait for the ESP32 to connect to your WiFi — it will print something like:
Connected! IP address: 192.168.1.42 Web server started on port 80. Open http://192.168.1.42/ in your browser. - Open that IP address in any browser on the same network
- You should see a clean dashboard card showing the current temperature
The page uses a <meta http-equiv='refresh' content='5'> tag to reload itself every 5 seconds. Each reload triggers a fresh sensor reading.
Make sure your phone or laptop is on the same WiFi network as the ESP32. The web server is only accessible on the local network.
🔗Step 5: Verify the readings
Place your finger on the DS18B20 sensor and watch the temperature climb in the dashboard. The DS18B20 is accurate to $\pm 0.5\,°\text{C}$ in the range of $-10$ to $+85\,°\text{C}$, so your body heat should show a clear increase.
🔗Common Issues and Solutions
| Problem | Cause | Fix |
|---|---|---|
| Serial Monitor shows -127.00 C | DS18B20 not detected on the OneWire bus | Check wiring. Ensure the 4.7k ohm pull-up resistor is between DATA and VCC |
| WiFi won't connect | Wrong credentials or signal too weak | Double-check SSID and password. Move ESP32 closer to the router |
| Browser says "site can't be reached" | Wrong IP or not on the same network | Verify the IP from Serial Monitor. Ensure your device is on the same WiFi |
| Temperature reads 85.00 C | DS18B20 power-on default (no valid reading yet) | The sensor was read before it finished converting. Add a short delay or check for 85.0 as an error value |
| Page stops updating | ESP32 disconnected from WiFi | Add WiFi reconnection logic, or simply press the RST button on the ESP32 |
| Temperature seems off by a few degrees | Normal sensor tolerance or self-heating | The DS18B20 is accurate to $\pm 0.5\,°\text{C}$. Ensure the sensor is not near heat sources |