ESP32 Web Server for Temperature Data Display

Introduction to Web Servers with ESP32

The ESP32 is a versatile microcontroller with built-in Wi-Fi and Bluetooth capabilities. It allows you to create web servers that can serve web pages, collect data from sensors, and display it to users in real-time. In this project, we will set up a simple web server using the ESP32 that reads temperature data from a DHT22 sensor and displays it on a webpage accessible through any browser.

Components Required

For this project, we will use an ESP32 development board, a DHT22 sensor for reading temperature data, and a web browser to display the data. The ESP32 will host the web page that fetches the sensor data and updates it every few seconds.

  • Install the necessary libraries (DHT, WiFi, and ESPAsyncWebServer) in the Arduino IDE.
  • Connect the DHT22 sensor to the ESP32 board.
  • Write code to initialize the ESP32 as a web server.
  • Create an HTML page that will display the temperature data on the web page.
  • Use JavaScript to periodically fetch temperature data from the ESP32 and update the webpage in real-time.
  • Upload the code to the ESP32 and test the web server by accessing it through a web browser.

Formula: Temperature = (dht.readTemperature())

Components List

  • 1 × ESP32 Development Board
  • 1 × DHT22 Temperature Sensor
  • 1 × Breadboard and Jumper Wires
  • 1 × Power Supply (e.g., 5V USB power adapter)
  • 1 × Wi-Fi Network
  • 1 × Computer or Smartphone with Web Browser

Pin Configuration

  • GPIO 21 (DHT22 Data Pin): Data pin of the DHT22 sensor connected to GPIO 21 of the ESP32.
  • GPIO 22 (DHT22 GND Pin): GND pin of the DHT22 sensor connected to GPIO 22 of the ESP32.
  • GPIO 23 (DHT22 VCC Pin): VCC pin of the DHT22 sensor connected to 3.3V or 5V of the ESP32.

Make sure to provide proper voltage (3.3V or 5V) for the DHT22 sensor to avoid damage.

Wiring and Connections

  • DHT22 VCC -> 3.3V or 5V
  • DHT22 GND -> GND
  • DHT22 Data -> GPIO 21

Code for ESP32 Web Server

1#include <WiFi.h>
2#include <DHT.h>
3#include <ESPAsyncWebServer.h>
4
5#define DHTPIN 21
6#define DHTTYPE DHT22
7DHT dht(DHTPIN, DHTTYPE);
8
9const char* ssid = "Your_SSID";
10const char* password = "Your_PASSWORD";
11
12AsyncWebServer server(80);
13
14void setup() {
15  Serial.begin(115200);
16  WiFi.begin(ssid, password);
17  while (WiFi.status() != WL_CONNECTED) {
18    delay(1000);
19    Serial.println("Connecting to WiFi...");
20  }
21  Serial.println("Connected to WiFi");
22  dht.begin();
23
24  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
25    String html = "<!DOCTYPE html><html><body><h1>ESP32 Temperature Display</h1>";
26    html += "<p>Temperature: " + String(dht.readTemperature()) + " &deg;C</p>";
27    html += "</body></html>";
28    request->send(200, "text/html", html);
29  });
30
31  server.begin();
32}
33
34void loop() {
35  // No need for continuous code in loop() as the web server handles it
36}

Code Explanation

  • #include <WiFi.h>: Includes the WiFi library for connecting the ESP32 to a network.
  • #include <ESPAsyncWebServer.h>: Includes the ESPAsyncWebServer library for creating the web server.
  • server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {: Handles HTTP GET requests to the root URL ('/') and responds with a simple HTML page displaying the temperature.
  • String html = "<!DOCTYPE html><html><body><h1>ESP32 Temperature Display</h1>";: Generates the HTML code to display the temperature data on the webpage.
  • html += "<p>Temperature: " + String(dht.readTemperature()) + " &deg;C</p>";: Reads the temperature data from the DHT22 sensor and adds it to the HTML response.

Applications

  • Real-time monitoring of temperature in homes or offices.
  • Smart home systems for temperature control.
  • Temperature data logging for environmental monitoring.
  • IoT-based temperature measurement for agricultural applications.

Conclusion

This project demonstrates how to use the ESP32 to build a simple web server that displays temperature data from a DHT22 sensor. The project can be easily expanded to include more sensors or additional features like data logging, control of devices based on temperature, or integrating it into a larger IoT ecosystem.