Random Nerd Tutorials
Shares

ESP32 with DHT11 DHT22 Temperature Humidity Web Server using Arduino IDE

Shares

In this project you’ll create a standalone web server with an ESP32 and a DHT11 or DHT22 sensor that displays the temperature and humidity using the Arduino IDE programming environment. If you want to learn more about the ESP32 dev board, read my Getting Started Guide with ESP32.

Recommended Resources:

If you like the ESP32 and you want to do more projects related to home automation, I recommend downloading my eBook Home Automation Using ESP8266.

Let’s get started!

Preparing the ESP32 board in Arduino IDE

There’s an add-on for the Arduino IDE that allows you to program the ESP32 using the Arduino IDE and its programming language. Follow this tutorial to prepare your Arduino IDE:

Installing the DHT Sensor Library

The DHT sensor library provides an easy way of using any DHT sensor to read temperature and humidity with your ESP8266 or Arduino boards.

1) Click here to download the DHT sensor library. You should have a .zip folder in your Downloads

zip

2) Unzip the .zip folder and you should get DHT-sensor-library-master folder

folder

3) Rename your folder from DHT-sensor-library-master to DHT

rename

4) Move the DHT folder to your Arduino IDE installation libraries folder

moving

5) Then re-open your Arduino IDE

Uploading the code

In this example, you’re going to connect a DHT22 temperature and humidity sensor to the ESP32 that can be controlled remotely through a browser.

Copy the following code to your Arduino IDE to upload it to your ESP32 Dev Module.

Don’t forget to add your network credentials in the preceding code (SSID and Password).

Plug your ESP32 Dev Module to your computer and follow these next instructions:

1) Select your board in Tools > Board menu (in my case it’s the ESP32 Dev Module)

2) Select the COM port

3) To make your ESP32 go into downloading/uploading mode: hold the BOOT button and press the EN button to reboot your ESP32

4) Press the Upload button in the Arduino IDE and wait a few seconds while the code compiles and uploads to your board. If everything is correct this what you should see:

5) Restart your ESP32 to run the newly uploaded code

Parts required and schematics

Here’s the needed parts for this example:

Note: Other DHT sensor types will also work with a small change in the code (as described in the sketch comments).

Assemble all the parts as in the schematics below.

Important: the DHT sensor requires 5V to operate properly, so make sure you use the Vin pin from your ESP32 that outputs 5V.

Accessing your web server

When your ESP32 restarts, it prints in your Arduino IDE serial monitor the IP address of your ESP32 (set the baud rate to 115200).

You can access your web server, if you type your ESP32 IP address in your browser. In my case it’s http://192.168.1.116.

Demonstration

For the final demonstration open any browser from a device that is connected to the same router that your ESP is. Then type the IP address and press Enter!

Here’s what you should see:

Your web page instantly refreshes every 30 seconds. If the temperature is above 25ºC, the temperature reading is displayed in a red color:

Wrapping up

That’s it for now, I hope you had fun making this project with the ESP32 Dev Module. I know the example shown in this blog post isn’t the best use for the ESP32.

The ESP32 is meant to be used in more complex applications, I’ll be posting more advanced tutorials in a a near future.

Do you have any questions? Leave a comment down below!

Thanks for reading. If you like this post probably you might like my next ones, so please support me by subscribing my blog.

Leave a Comment: