In this project we will learn how to create an independent web server by using ESP8266 for displaying
Temperature and Humidity. For this we use temperature sensor DHT11 or DHT22. It is a home
automation project so you can easily connect it with your home router.
Recommended articles about ESP8266
Review about ESP8266
The parts required in this project are:
• ESP8266 Development Board
• Jump Wires
• DHT11 or DHT22
• 4.7K Ohm Resistors
Following is the schematic circuit diagram. We connect wire with GPIO5(D1), you can use any other
GPIO pins. (pic fritzing circuit diagram)
Installation of Libraries
we need to install DHT sensor and Adafruit Unified sensor. Use this link to install or you can also follow
the given steps.
Go to sketch>>Include Library>>Mange Libraries. (PIC 1)
Type DHT on the search area and install DHT sensor. (pic 2)
Install Async Web Server
You can’t install Asynchronous web server through Arduino. Because it is not available Building
asynchronous web server has many advantages. Follow the given steps:
1. ESP8266 Asynchronous Web Server Library
• Click on this to install ESP Async Web Server
• It will start downloading, you just need to unzip it by extract all files.
• Rename this downloaded folder.
• Move this folder to Arduino IDE installation libraries folder.
2. ESP32 Asynchronous TCP
• Click on it to install ESP AsyncTCP library
• Unzip this downloaded zip file for file extraction.
• Rename it and move it to you Arduino Installation libraries folder.
• Finally, in the last step re-open Arduino IDE window.
We are using ESP8266 in this project. If you don’t have ESP8266 Add-on installed in your Arduino then
click a this for installation
Install Async Web Server.
Carefully change the code of two variables in quotation mark with your Wi-Fi credentials so that it
connects with your router. (pic 4)
First of all, import all essential libraries (pic 1code)
Type you network credentials so that it connects it with your router. (pic 2)
Defining the GPIO pin that is connected with GPIO 5(D1) (pic 3 code)
DHT11 ESP8266 Web Server
Choose the DHT sensor type you are using. In this project we’re using DHT22. Simply comment the
sensor that you are using. (pic 4 code)
now define the type and PIN of DHT (pic 5 code)
we are using PORT 80 so Asynchronous web server should be created on this port. (pic 6 code)
In this part we create float variable so that it holds the initial values of temperature and humidity. After
that in the loop, temperature and humidity are updated. (pic 7 code)
To update temperature readings after every ten seconds we create time variables. (pic 8code)
(pic 5web page)
• Two paragraphs (display temperature and humidity)
• Sub heading
• IP address
How it is created in HTML
How it is created in HTML
The following command<<//meta/>>/ make your web page browser reactive.
After we are loading icons from fontawesoms. (pic 10code)
In between <<//style//>> we are using CSS for styling.
Here h2 denote heading, p denotes paragraph and. units denote units of readings. (pic11 code)
Basically, we set HTML web page for display text with font: Arial, alignment: center (PIC 12 code)
Next we should create web page content inside this tag <<//body//>>(PIC 13code)
Next is to display two paragraphs one for temperature and humidity on web page. You can make
changes according to your need. (PIC 14 code)
How to insert icons
For Icons click on this website fontawesome (PIC 6fontawesome)
Search for thermometer and click on the desired icon then just copy HTML(PIC 7thermometer)
How to insert icons
For color, just insert the color in hexadecimal like this(PIC 15code)
The <</i/>> tag is to display fontawsome. The next command display text “temperature” on the web
page. And temperature between this sign % is placeholder foe the value of temperature. (PIC 16code)
Now we add “degree” sign.(PIC 17 code)
We are using same series of steps for “humidity”.
This code is in between <<//script//>>(PIC 18)
we use setInterval() so that temperature on the background runs every 10 seconds . (PIC 19code)
After received the value, it asynchronously updates HTML temperature element by ID.(PIC 20code)
Same procedure goes for humidity.
After that we create the Processor function, so that every time it replaces the placeholder with DHT
sensor value of temperature and humidity in HTML text.(PIC 21code)
It returns the temperature and humidity value store on the t variable, if it finds placeholder
%TEMPERATURE % or %HUMIDITY% just after the page is requested. (PIC22code)
For debugging we assign serial monitor baud rate and DHT sensor. (PIC 23code)
Now it connects with your router and place the IP address. (PIC 24code)
Next to control the web server. In this code we should add to handlers so that temperature and
humidity got their readings. As it is a plain text so we use “c_str” function to convert it into
Now start the server. (PIC 26code)
Last part is to get the new readings of temperature and humidity from DHT sensor after every 10
seconds. Basically, it is loop structure. (PIC 27code)
That’s all. DHT11 ESP8266 Web Server
After understanding all the details, you can make the desire changes and then upload this code. And
make sure that you are using the right board and port COM. In this project we are using ESP8266.(PIC
(PIC 8 IPaddress)
Copy this IP address and access the web server by pasting it on search browser.
Now readings automatically update after every 10 seconds no need to refresh again and again.
I hope this article help you in your project. If you have any issue related to this article feel free to let us
know in the comment section. Thank you!
DHT11 Temperature and Humidity ESP8266 Web Server using Arduino IDE