IPDL - 11: Web-Based Display of Humidity and Temperature Data

IDPL - 11: Displaying Humidity and Temperature Data on a Web-Based Application

Objective

To interface a DHT11 temperature and humidity sensor with an ESP32 and display the measured temperature and humidity values on a web page hosted by the ESP32.

Required Components

• ESP32 development board
• DHT11 temperature and humidity sensor
• USB cable

Pin Connections

DHT11 Pin	ESP32 Connection
VCC	3.3 V
DATA	GPIO 4
GND	GND

Working Principle

The DHT11 measures the surrounding temperature and humidity and sends the readings digitally to the ESP32.

The ESP32 connects to a Wi-Fi network and starts a simple web server. When a user opens the ESP32's IP address in a web browser, the ESP32 reads the latest DHT11 values and displays them on a web page.

The basic operation is:

DHT11
  ↓
ESP32
  ↓
Wi-Fi Network
  ↓
Web Browser
  ↓
Temperature & Humidity Display

The web page can be opened from a smartphone or computer connected to the same Wi-Fi network.

Arduino Code

// © 2026, Cognifront. Member of The IoT Kits Family.

// Experiment: Displaying Humidity and Temperature
// Data on a Web-Based Application
#include <WiFi.h>
#include <WebServer.h>
#include <DHT.h>

const char* ssid="ESP32-Demo";
const char* password="12345678";

#define DHT_PIN 4
#define DHT_TYPE DHT11

DHT dht(DHT_PIN,DHT_TYPE);
WebServer server(80);

String webpage(){
return R"rawliteral(
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Cognifront DHT11 Monitor</title>
<style>
*{box-sizing:border-box}
body{margin:0;padding:25px;font-family:Arial,sans-serif;background:#0f172a;color:#fff;text-align:center}
h2{color:#67e8f9;font-weight:600;margin:10px 0 22px}
.card{max-width:340px;margin:auto;background:#fff;color:#1e293b;padding:22px;border-radius:16px;box-shadow:0 8px 25px #0005}
.value{font-size:48px;font-weight:bold;color:#4f46e5;margin:8px}
.label{font-size:16px;color:#64748b}
.row{display:flex;justify-content:space-around;margin-top:20px}
.item{font-size:28px;font-weight:bold}
.item span{display:block;font-size:13px;color:#64748b;margin-top:5px}
.footer{margin-top:20px;font-size:12px;color:#94a3b8}
</style>
</head>
<body>
<h2>Cognifront<br>DHT11 Monitor</h2>
<div class="card">
<div class="value" id="temp">-- °C</div>
<div class="label">Temperature</div>
<div class="row">
<div class="item" id="hum">--%<span>Humidity</span></div>
</div>
</div>
<div class="footer">Live Sensor Dashboard</div>
<script>
function update(){
fetch("/dht").then(r=>r.json()).then(d=>{
document.getElementById("temp").innerHTML=d.t+" °C";
document.getElementById("hum").innerHTML=d.h+"%<span>Humidity</span>";
});
}
setInterval(update,2000);
update();
</script>
</body>
</html>
)rawliteral";
}

void handleRoot(){
server.send(200,"text/html",webpage());
}

void handleDHT(){
float t=dht.readTemperature();
float h=dht.readHumidity();

if(isnan(t)||isnan(h)){
server.send(500,"application/json","{\"error\":\"Sensor Error\"}");
return;
}

String data="{\"t\":"+String(t,1)+",\"h\":"+String(h,1)+"}";
server.send(200,"application/json",data);
}

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

WiFi.softAP(ssid,password);

Serial.println();
Serial.println("ESP32 Access Point Started");
Serial.print("IP Address: ");
Serial.println(WiFi.softAPIP());

server.on("/",handleRoot);
server.on("/dht",handleDHT);
server.begin();

Serial.println("Web Server Started");
}

void loop(){
server.handleClient();
}

Required Arduino Libraries

The code uses the DHT sensor library.

Install it from:

GitHub Repository, visit [1].

The `WiFi.h` and `WebServer.h` libraries are provided with the ESP32 Arduino board package.

How to Run the Experiment

1. Replace `YOUR_WIFI_NAME` with the name of your Wi-Fi network.

1. Replace `YOUR_WIFI_PASSWORD` with the Wi-Fi password.

1. Connect the ESP32 to the computer using a USB cable.

1. Select the appropriate ESP32 board in Arduino IDE.

1. Select the correct COM port.

1. Upload the program.

1. Open the Serial Monitor at 115200 baud.

1. Wait for the ESP32 to connect to Wi-Fi.

1. Note the IP address displayed in the Serial Monitor.

For example:

ESP32 IP Address: 192.168.1.105

1. Connect your smartphone or computer to the same Wi-Fi network.

1. Open a web browser.

1. Enter the IP address shown by the ESP32.

For example:

http://192.168.1.105

The temperature and humidity values will be displayed on the web page.

Observation

• The ESP32 connects to the configured Wi-Fi network.
• The DHT11 provides temperature and humidity readings.
• The ESP32 displays the readings through a web page.
• The web page automatically refreshes every 5 seconds.
• The values can be viewed from a smartphone or computer connected to the same network.

Result

The DHT11 sensor was successfully interfaced with the ESP32, and temperature and humidity data were displayed on a web-based application hosted by the ESP32.

Conclusion

This experiment demonstrates how an ESP32 can acquire environmental data from a DHT11 sensor and make the data available through a web browser. It combines sensor interfacing, Wi-Fi connectivity, and a basic HTTP web server to create a simple web-based IoT monitoring system.