DHT11 ESP8266 Web Server

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

Hardware

The parts required in this project are:
• ESP8266 Development Board
• Jump Wires
DHT11 or DHT22
• 4.7K Ohm Resistors
• Breadboard

Circuit Diagram

pcbway

Following is the schematic circuit diagram. We connect wire with GPIO5(D1), you can use any other
GPIO pins. (pic fritzing circuit diagram)
Hardware
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.
DHT-sensor-library
Adafruit-sensor

Step1:

Go to sketch>>Include Library>>Mange Libraries. (PIC 1)

Step2:

Type DHT on the search area and install DHT sensor. (pic 2)

The next step is to installed “Adafruit Unified Sensor”. Type this also and install it by scrolling down.
(pic 3)
Installation of Libraries

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.

Code

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.
#code
Carefully change the code of two variables in quotation mark with your Wi-Fi credentials so that it
connects with your router. (pic 4)


How the code is working?
Now we are showing you how this code works in the background. Stay with us for more depths
otherwise you can jump to see the conclusion.

libraries

First of all, import all essential libraries (pic 1code)

Network Credentials

Type you network credentials so that it connects it with your router. (pic 2)

Define Variables

Defining the GPIO pin that is connected with GPIO 5(D1) (pic 3 code)
libraries
Network Credentials
Define Variables

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)
Web page
(pic 5web page)

Web page

DHT11 ESP8266 Web Server

DHT sensor
• Two paragraphs (display temperature and humidity)
• Placeholder
• Heading
• Sub heading
• IP address
• Icons(styling)
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)

Styling

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)
Styling
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”.
JavaScript
By using JavaScript, we can update the value of Temperature and 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.

Processor

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)

Setup function

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)
Processor
Setup function
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
character.(Pic 25code)
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

Uploading

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
7ESPboard)
(PIC 8 IPaddress)

IP Address

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!

 

nodemcu esp8266 library for proteus

ESP8266 Adafruit MQTT Broker

ESP-NOW ESP8266

 

DHT11 Temperature and Humidity ESP8266 Web Server using Arduino IDE