ESP32 Based Webserver for Temperature and Humidity Measurement using DHT11 Sensor

ESP32 series microcontrollers are low-cost, low-power system-on-chip microcontrollers that come with integrated Wi-Fi and dual-mode Bluetooth . The ESP32 series comes with Tensilica Xtensa LX6 microprocessor in both (dual-core and single-core) variations, and it has inbuilt antenna switches, RF balun, power amplifier, low-noise receive amplifier, filters, and power management modules.

Previously we built many IoT based projects including weather station using DHT11 , webservers , which not only includes Raspberry Pi , ESP8266 and Arduino but also have a lot of applications with popular Wi-Fi module ESP32 . Today we will build an ESP32 based webserver to display the temperature and humidity values from the DHT11 sensor. ESP32 board will read the temperature and humidity data from the DHT11 sensor and display it on the Webpage. Here the IFTTT is also used to send the Email notifications when the temperature goes beyond a particular limit.

The circuit diagram for interfacing DHT11 temperature and humidity sensor with ESP32 is given below.

Interfacing the DHT11 sensor with ESP32 is very simple as it has only three pins. Connect the VCC and GND pin of the sensor to the 3.3 V and GND pin of ESP32. Then connect the Data pin of the sensor to the D2 pin of ESP32. After making the connections my hardware looks like this:

IFTTT Setup for Temperature and Humidity Measurement

IFTTT is a free web-based service that allows users to create chains of simple conditional statements, called “recipes”, which are triggered based on changes to other web services such as Gmail, Facebook, Instagram, and Pinterest. IFTTT is an abbreviation of “If This Then That”.

In this project, IFTTT is used to send an Email whenever the temperature or humidity goes beyond a predefined limit. We previously used IFTTT in many IoT based projects to send emails or SMS on particular events like on excessive electricity consumption , on high pulse rate , on intruder entry , etc.

Now search for ‘Webhooks’ and click on the Webhooks in Services section.

Now, in the Webhooks window, click on ‘Documentation’ in the upper right corner to get the private key.

Copy this key. It will be used in the program.

After getting the private key, now we will create an applet using Webhooks and Email services. To create an applet click on your profile and then click on ‘ Create. ’

Now in the next window, click on the ‘This’ icon.

Now search for Webhooks in the search section and click on ‘ Webhooks. ’

Now choose ‘ Receive a Web Request’ trigger and in the next window, enter the event name as temp_event and then click on create a trigger.

After this, click on ‘ Then That’ and then click on Email.

Now in email, click on ‘send me an email’ and enter the email subject and body and then click on create action.

In the last step click on ‘Finish’ to complete the Applet setup.

Here we will use Arduino IDE to program ESP32 board, for this download and install the ESP32 board file in Arduino IDE. Learn more about Programming ESP32 Board with Arduino IDE by following the link.

Complete code for this ESP32 DHT11 project is given at the end of the project. Here we are explaining some important part of the program.

So, as usual, start the code by including all the required libraries. For this project, we need three libraries WiFi, DHT (for DHT sensor), and Wire (for I2C).

Then define the type of DHT and the pin to which sensor is connected.

Then, make instances for Wi-Fi name, Wi-Fi password, IFTTT hostname, and private key.

After that, to access the WiFiServer function, we declare an object of the WifiServer library. As 80 is the default port for HTTP.

Inside the Void setup() function, initialize the baud rate, DHT sensor using begin() function, and then connect the module with the Wi-Fi using the Wi-Fi username and password. Once the ESP32 is connected to the Wi-Fi, it will print the ESP32 IP address.

In the void loop() function, read the temperature and humidity data and store this data in different variables using DHT dht.read() function.

After that, design the web page using HTML and print the script using client.println() function.

Here CSS is used to style the text and background. You can change the CSS code to change the look and feel of the webpage according to you.

In HTML code, tags are used to display both the parameters i.e. Temperature and Humidity.

After that, if a condition is used to trigger the event. So whenever the temperature goes past 20 it will send a trigger to IFTTT.

Testing the ESP32 Interfacing with DHT11

Now Connect the ESP32 with the laptop and choose the board and port correctly and then click on the Upload button.

Make sure your laptop and ESP32 are connected to the same Wi-Fi network. After uploading the code, open the serial monitor change the baud rate to 115200. After this your serial monitor should look like this:

Now to access the webpage, copy the ESP32 IP address and paste it in the browser. The web page will look like this:

Now, whenever the temperature values go past 20 it will trigger the IFTTT event to send an email to notify that the temperature has crossed the critical values.

This is how a DHT11 sensor can be interfaced with ESP32 to build an IoT based Temperature and Humidity measurement system.

Complete code with a demonstration Video is given below.

Complete Project Code

I have an error in arduino ide \"invalid conversion from 'const char*' to 'char*'\" shows in this line WiFi.begin(ssid, password);

Can you help me with this? Thanks