ESP32 Web-based Temperature monitoring system with DHT11 Sen

In this Article, we learn about how to make ESP32 Web-based Temperature monitoring system with DHT11 Sensor.

ExpertFull instructions provided2 hours573

Things used in this project

Hardware components

Espressif ESP32

DHT11 Temperature & Humidity Sensor (4 pins)

Software apps and online services

Arduino IDE

Story

ESP32 Web-based Temperature monitoring system with DHT11 Sensor

In this Article, we learn about how to make ESP32 Web-based Temperature monitoring system with DHT11 Sensor.

In the Last Post, we learned about How to make DIY Ultrasonic Range Finder with ESP32.

I hope you appreciate my work, Let’s Discuss about Today project.

Components Required:

1. ESP32 board

2. Temperature sensor (DHT11)

3. Power supply

Connections:

Connect the DHT11 sensor with ESP32 as follow.

· Connect the VCC pin of DHT11 with the 3.3V pin of ESP32

· Connect the data pin of DHT11 with the GPIO 4 pin of ESP32

· Connect the GND pin of DHT1 with the GND pin of ESP32

How it works:

The ESP32 web-based temperature monitoring system with a DHT11 sensor works by utilizing the ESP32 microcontroller to read temperature and humidity data from the DHT11 sensor. It then sends this data to a web server hosted on the ESP32, allowing you to access and view the readings via a web browser.

Usages:

1. Home Automation

2. Industrial Applications

3. Healthcare

4. Diy Project

5. Education & Learning

ESP32 Web-based Temperature monitoring system with DHT11 Sensor

Code

Untitled file

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

const char *ssid = "Microsolutions";
const char *password = "@1yahoo.com";

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

void handleRoot() {
  char msg[2000];

  snprintf(msg, 2000,
           "<html>\
  <head>\
    <meta http-equiv='refresh' content='10'/>\
    <meta name='viewport' content='width=device-width, initial-scale=1'>\
    <link href='https://fonts.googleapis.com/css2?family=Roboto:wght@100;400&display=swap' rel='stylesheet'>\
    <title>ESP32 DHT Server</title>\
    <style>\
      body { font-family: 'Roboto', sans-serif; background-color: #f4f4f4; color: #444; margin: 0; padding: 0; }\
      .container { max-width: 600px; margin: 50px auto; padding: 20px; text-align: center; background-color: white; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }\
      h2 { font-weight: 400; }\
      .reading { font-size: 2.5rem; margin: 20px 0; }\
      .units { font-size: 1.5rem; color: #888; }\
      .sensor-icon { font-size: 4rem; color: #1a8cff; margin-bottom: 10px; }\
      .footer { margin-top: 30px; font-size: 0.8rem; color: #aaa; }\
    </style>\
  </head>\
  <body>\
    <div class='container'>\
      <h2>ESP32 DHT Sensor Data</h2>\
      <p class='sensor-icon'><i class='fas fa-thermometer-half'></i></p>\
      <p class='reading'>Temperature: <strong>%.2f&deg;C</strong></p>\
      <p class='sensor-icon'><i class='fas fa-tint'></i></p>\
      <p class='reading'>Humidity: <strong>%.2f%%</strong></p>\
      <p class='footer'>Data refreshed every 10 seconds</p>\
    </div>\
  </body>\
</html>",
           readDHTTemperature(), readDHTHumidity()
          );
  server.send(200, "text/html", msg);
}

void setup(void) {
  Serial.begin(115200);
  dht.begin();
  
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  Serial.println("");

  // Wait for connection
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());

  server.on("/", handleRoot);

  server.begin();
  Serial.println("HTTP server started");
}

void loop(void) {
  server.handleClient();
  delay(2000);  // Allow the CPU to switch to other tasks
}

float readDHTTemperature() {
  float t = dht.readTemperature();
  if (isnan(t)) {
    Serial.println("Failed to read from DHT sensor!");
    return -1;
  } else {
    return t;
  }
}

float readDHTHumidity() {
  float h = dht.readHumidity();
  if (isnan(h)) {
    Serial.println("Failed to read from DHT sensor!");
    return -1;
  } else {
    return h;
  }
}

Credits

JACK

21 projects • 2 followers

ESP32 Web-based Temperature monitoring system with DHT11 Sen