Wi-Fi temperature and humidity monitor

Check your room's temperature and humidity from your phone. The ESP32 reads the DHT11 sensor and serves a clean web page on your Wi-Fi network that refreshes itself every 10 seconds. A small data address also lets other programs read the values.

What you need

• ESP32-DevKitC V4 board and USB cable (ESP32 IoT Starter Kit)
• DHT11 module, KY-015 (ESP32 IoT Starter Kit)
• Breadboard and jumper wires
• A 2.4 GHz Wi-Fi network

Wiring

Build it step by step

1. Install the DHT sensor library by Adafruit and its dependency Adafruit Unified Sensor.
2. Wire the DHT11 module as in the diagram.
3. Enter your Wi-Fi name and password in the code, then upload it.
4. Open the Serial Monitor at 115200 baud and note the address, for example http://192.168.1.42.
5. Open that address on a phone or computer on the same Wi-Fi.

The code

#include <WiFi.h>
#include <WebServer.h>
#include <DHT.h>

const char* WIFI_NAME = "YOUR_WIFI_NAME";
const char* WIFI_PASSWORD = "YOUR_WIFI_PASSWORD";

DHT dht(27, DHT11);
WebServer server(80);

float temperature = NAN;
float humidity = NAN;
unsigned long lastRead = 0;

void readSensor() {
  float t = dht.readTemperature();
  float h = dht.readHumidity();
  if (!isnan(t) && !isnan(h)) {
    temperature = t;
    humidity = h;
  }
}

String page() {
  String html = "<!DOCTYPE html><html><head><meta charset='utf-8'>";
  html += "<meta name='viewport' content='width=device-width, initial-scale=1'>";
  html += "<meta http-equiv='refresh' content='10'><title>Room monitor</title></head>";
  html += "<body style='font-family:sans-serif;text-align:center;padding:24px'>";
  html += "<h1>Room monitor</h1>";
  if (isnan(temperature)) {
    html += "<p>Waiting for the first reading...</p>";
  } else {
    html += "<p style='font-size:48px;margin:8px'>" + String(temperature, 1) + " &deg;C</p>";
    html += "<p style='font-size:32px;margin:8px'>" + String(humidity, 0) + " % humidity</p>";
  }
  html += "<p style='color:#888'>Updates every 10 seconds</p></body></html>";
  return html;
}

void setup() {
  Serial.begin(115200);
  dht.begin();

  WiFi.begin(WIFI_NAME, WIFI_PASSWORD);
  Serial.print("Connecting to Wi-Fi");
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println();
  Serial.print("Open http://");
  Serial.println(WiFi.localIP());

  server.on("/", []() { server.send(200, "text/html", page()); });
  server.on("/data", []() {
    String json = "{\"temperature\":" + String(temperature, 1) + ",\"humidity\":" + String(humidity, 0) + "}";
    server.send(200, "application/json", json);
  });
  server.begin();
}

void loop() {
  server.handleClient();
  if (millis() - lastRead > 2000) {  // the DHT11 needs about 2 s between readings
    lastRead = millis();
    readSensor();
  }
}

How it works

The ESP32 reads the sensor every 2 seconds in the background and keeps the last good values. When a browser opens the main address, the web server builds a small HTML page with those values. The refresh tag makes the browser reload it every 10 seconds. The /data address returns the same values as JSON, a format other programs can read easily.

Make it your own

• Add a coloured warning when the room is too warm or too humid.
• Show the minimum and maximum temperature since the board started.
• Combine this with the relay lesson to switch a low-voltage fan when it gets too warm.

Troubleshooting

• "Waiting for the first reading" never changes: check the DHT11 wiring and that S is on GPIO 27.
• Stuck on "Connecting to Wi-Fi": check the name and password and use a 2.4 GHz network.
• The page doesn't open: make sure your phone is on the same Wi-Fi network as the ESP32.

Learn the basics first

New to these parts? These lessons explain them step by step: Read temperature and humidity with the DHT11 and Control a relay from your phone over Wi-Fi.