in this tutorial we will build Humidity and temperature webserver DHT11 humdity and temperature sensor with esp32.

The DHT11 is a basic, low-cost digital temperature and humidity sensor, remains a popular choice for projects where a simple and affordable temperature and humidity sensor is sufficient for the task at hand.

Component You Need:

Features of  DHT11 sensor:

The DHT11 sensor is a basic and affordable digital temperature and humidity sensor. Here are the key features of the DHT11 sensor:

1.Combined Temperature and Humidity Measurement:

  • The DHT11 sensor provides both temperature and humidity measurements in a single device.

2.Digital Output:

  • The sensor produces a digital output, making it easy to interface with microcontrollers without the need for analog-to-digital conversion.

3.Low Cost:

  • One of the main advantages of the DHT11 is its low cost, making it accessible for a wide range of applications, especially in educational and hobbyist projects.

4.Simple Interfacing:

  • The sensor requires minimal external components and has a straightforward interface, typically involving just three wires (power, ground, and signal).

5.Wide Operating Voltage Range:

  • The DHT11 operates within a wide voltage range, typically from 3.3V to 5V, making it compatible with common microcontroller platforms like Arduino.

6.Moderate Accuracy:

  • While not as accurate as some higher-end sensors, the DHT11 provides reasonably accurate temperature and humidity measurements for many applications. The temperature accuracy is within ±2°C, and humidity accuracy is within ±5%.

7.Resistive Humidity Element:

  • The DHT11 uses a resistive humidity element to measure humidity levels. This element changes its resistance based on the moisture in the air.

8.Thermistor for Temperature Measurement:

  • Temperature measurement in the DHT11 is achieved using a thermistor, which changes its resistance with temperature.

9.Slow Sampling Rate:

  • The DHT11 typically has a slow sampling rate, around 1 Hz, meaning it provides a new set of data approximately once every second.

10.Compact Design:

  • The sensor is housed in a small, black plastic casing with four pins for easy connection.

11.Limited Communication Protocol:

  • The DHT11 uses a simple, proprietary communication protocol to transmit data to microcontrollers.

12.Suitability for Basic Applications:

  • The DHT11 is well-suited for basic applications such as home automation, weather monitoring, and educational projects where moderate accuracy is acceptable.

13.Community Support:

  • Due to its popularity, the DHT11 is well-supported in the maker community, and libraries are available for various microcontroller platforms.

While the DHT11 may not be suitable for applications requiring high precision, its simplicity and affordability make it a popular choice for introductory projects and applications where basic temperature and humidity measurements are sufficient.

Shematics:

Program:

#include <WiFi.h> // Wifi library

#include <ESPAsyncWebServer.h>// Wifi library

#include <Adafruit_Sensor.h>// Adafruit sensor library (DH11 library)

#include <DHT.h>//DH11 library

const char* ssid = "ssid"; //Put your ssid wifi

const char* password = "password";//put your password wifi

const int dhtPin = 4; // Pin connected to the DHT sensor

//  webserver html code

const char* htmlPage = R"(

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>DHT11 Sensor Data</title>

    <style>

        body {

            font-family: Arial, sans-serif;

            text-align: center;

            background-color: #f0f0f0;

            margin: 0;

            padding: 20px;

        }

 

        #sensorData {

            background-color: #ffffff;

            padding: 20px;

            border-radius: 10px;

            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

        }

 

        .wifi-icon, .temperature-icon, .humidity-icon {

            font-size: 40px;

        }

 

        .comfort-level {

            font-size: 24px;

            margin-top: 10px;

        }

 

        .comfort-icon {

            font-size: 40px;

            margin-top: 10px;

        }

 

        .comfort-good {

            color: green;

        }

 

        .comfort-moderate {

            color: orange;

        }

 

        .comfort-poor {

            color: red;

        }

    </style>

</head>

<body>

    <div id="sensorData">

        <h1>DHT11 Sensor Data</h1>

        <p>Temperature: <span id="temperature">Loading...</span> °C <span class="temperature-icon">????️</span></p>

        <p>Humidity: <span id="humidity">Loading...</span> % <span class="humidity-icon">????</span></p>

        <div class="comfort-level" id="comfortLevel">Comfort Level: Loading...</div>

        <div class="comfort-icon" id="comfortIcon"></div>

    </div>

    <script>

        function updateData(data) {

            document.getElementById('temperature').innerText = data.temperature;

            document.getElementById('humidity').innerText = data.humidity;

 

            // Update comfort level text

            const comfortLevelElement = document.getElementById('comfortLevel');

            const comfortIconElement = document.getElementById('comfortIcon');

 

            if (data.temperature >= 20 && data.temperature <= 25 && data.humidity >= 30 && data.humidity <= 60) {

                comfortLevelElement.innerText = 'Comfort Level: Good';

                comfortLevelElement.className = 'comfort-good';

                comfortIconElement.innerText = '????';

            } else if (data.temperature >= 18 && data.temperature <= 28 && data.humidity >= 20 && data.humidity <= 70) {

                comfortLevelElement.innerText = 'Comfort Level: Moderate';

                comfortLevelElement.className = 'comfort-moderate';

                comfortIconElement.innerText = '????';

            } else {

                comfortLevelElement.innerText = 'Comfort Level: Poor';

                comfortLevelElement.className = 'comfort-poor';

                comfortIconElement.innerText = '????';

            }

        }

 

        function fetchData() {

            fetch('/data')

                .then(response => response.json())

                .then(data => updateData(data))

                .catch(error => console.error('Error fetching data:', error));

        }

 

        setInterval(fetchData, 2000);

        fetchData(); // Initial fetch when the page loads

    </script>

</body>

</html>

)";

const int DHT_TYPE = DHT11;

DHT dht(dhtPin, DHT_TYPE);

AsyncWebServer server(80);//the default port for HTTP communication

void setup() {

    Serial.begin(115200);

 

    // Connect to Wi-Fi

    WiFi.begin(ssid, password);

    while (WiFi.status() != WL_CONNECTED) {

        delay(1000);

        Serial.println("Connecting to WiFi...");

    }

    Serial.println("Connected to WiFi");

    Serial.print("IP Address: ");

    Serial.println(WiFi.localIP());

    // Initialize DHT sensor

    dht.begin();

    // Serve HTML page

    server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){

        Serial.println("Serving HTML page");

        request->send(200, "text/html", htmlPage);

    });

    // Serve sensor data as JSON

    server.on("/data", HTTP_GET, [](AsyncWebServerRequest *request){

        Serial.println("Serving sensor data");

        String temperature = String(dht.readTemperature());

        String humidity = String(dht.readHumidity());

        String json = "{\"temperature\":\"" + temperature + "\", \"humidity\":\"" + humidity + "\"}";

        request->send(200, "application/json", json);

    });

    server.begin();

}

void loop() {

    // Nothing to do here

}

Result:

After the connexion with the wifi we will get this  ip  adress

Put it in  the URL  of  webbrowser (googlechrome,mozilafirefox,opera....etc) and you can acess to this page