![\"ESP8266](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP8266-DHT11-DHT22-Web-Server.jpg?resize=1200%2C675&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nThroughout this tutorial we’ll show how to build two different web servers:<\/p>\n\n\n\n
- \n
- Web Server #1: Asynchronous web server that updates the temperature and humidity automatically without the need to refresh the web page and with custom CSS to style the web page.<\/li>\n\n\n\n
- Web Server #2: Simple HTTP web server that displays the latest sensor readings when the page is updated in a raw HTML page.<\/li>\n<\/ul>\n\n\n\n
Recommended resources:<\/strong><\/p>\n\n\n\n
- \n
- How to Install the ESP8266 Board in Arduino IDE<\/a><\/li>\n\n\n\n
- ESP8266 Web Server<\/a><\/li>\n\n\n\n
- ESP8266 Boards Comparison<\/a><\/li>\n\n\n\n
- DHT11\/DHT22 Humidity and Temperature Sensor with Arduino<\/a><\/li>\n\n\n\n
- ESP8266 Pinout: Ultimate GPIOs Guide<\/a><\/li>\n<\/ul>\n\n\n\n
Learn more about the ESP8266 with our course: Home Automation using ESP8266<\/a>.<\/p>\n\n\n\n
Parts Required <\/h2>\n\n\n\n
![\"\"](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP8266-DHT11-DHT22-Web-Server-Circuit-Schematic.jpg?resize=750%2C421&quality=100&strip=all&ssl=1\")
<\/figure>\n\n\n\nTo build this project, you need the following parts:<\/p>\n\n\n\n
- \n
- ESP8266 development board<\/a> (read ESP8266 development boards comparison<\/a>)<\/li>\n\n\n\n
- DHT22<\/a> or DHT11<\/a> Temperature and Humidity Sensor<\/li>\n\n\n\n
- 4.7k Ohm Resistor<\/a><\/li>\n\n\n\n
- Breadboard<\/a><\/li>\n\n\n\n
- Jumper wires<\/a><\/li>\n<\/ul>\n\n\n
You can use the preceding links or go directly to MakerAdvisor.com\/tools<\/a> to find all the parts for your projects at the best price!<\/p>
![](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/10\/header-200.png?w=1200&quality=100&strip=all&ssl=1\")
<\/a><\/p>\n\n\n\nESP8266 and DHT11\/DHT22 Schematic Diagram<\/h2>\n\n\n\n
Before proceeding with the tutorial, wire the DHT11 or DHT22 temperature and humidity sensor to the ESP8266 as shown in the following schematic diagram.<\/p>\n\n\n
\n![\"ESP8266](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/06\/esp8266-dht.png?resize=642%2C826&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nIn this example, we’re wiring the DHT data pin to GPIO5<\/span> (D1), but you can use any other suitable GPIO. Read our ESP8266 GPIO Reference Guide<\/a> to learn more about the ESP8266 GPIOs. <\/p>\n\n\n\n
If you’re using an ESP-01, GPIO 2<\/span> is the most suitable pin to connect to the DHT data pin, as shown in the next diagram.<\/p>\n\n\n
\n![\"ESP-01](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/dht22-esp-01.png?resize=964%2C918&quality=100&strip=all&ssl=1\")
<\/a><\/figure><\/div>\n\n\nInstalling the DHT Library for ESP8266<\/h2>\n\n\n\n
To read from the DHT sensor, we\u2019ll use the DHT library from Adafruit<\/a>. To use this library you also need to install the Adafruit Unified Sensor library<\/a>. Follow the next steps to install those libraries.<\/p>\n\n\n\n
1. Open your Arduino IDE and go to Sketch <\/strong>> Include Library<\/strong> > Manage Libraries<\/strong>. The Library Manager should open.<\/p>\n\n\n\n
2. Search for \u201cDHT<\/strong>\u201d on the Search box and install the DHT library from Adafruit.<\/p>\n\n\n\n
![\"Installing](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/04\/adafruit_dht_library.png?resize=750%2C422&quality=100&strip=all&ssl=1\")
<\/figure>\n\n\n\n3. After installing the DHT library from Adafruit, type \u201cAdafruit Unified Sensor<\/strong>\u201d in the search box. Scroll all the way down to find the library and install it.<\/p>\n\n\n\n
![\"Installing](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/04\/adafruit_unified_sensor_library.png?resize=750%2C422&quality=100&strip=all&ssl=1\")
<\/figure>\n\n\n\nAfter installing the libraries, restart your Arduino IDE.<\/p>\n\n\n\n
\n\n\n\n1. ESP8266 Asynchronous Web Server<\/h2>\n\n\n\n
To build the web server we\u2019ll use the ESPAsyncWebServer<\/a> library that provides an easy way to build an asynchronous web server. Building an asynchronous web server has several advantages. We recommend taking a quick look at the library documentation on its GitHub page<\/a>.<\/p>\n\n\n\n
Installing the Web Server Libraries<\/h3>\n\n\n\n
We’ll build the web server using the following libraries:<\/p>\n\n\n\n
- \n
- ESPAsyncWebServer by ESP32Async<\/a><\/li>\n\n\n\n
- ESPAsyncTCP by ESP32Async<\/a><\/li>\n<\/ul>\n\n\n\n
You can install these libraries using the Arduino Library Manager. Go to Sketch <\/strong>> Include Library<\/strong> > Manage Libraries<\/strong> and search for the libraries’ names.<\/p>\n\n\n\n
Code<\/h3>\n\n\n\n
We\u2019ll program the ESP8266 using Arduino IDE, so you must have the ESP8266 add-on installed in your Arduino IDE. If you haven’t, follow the next tutorial first:<\/p>\n\n\n\n
- \n
- Install the ESP8266 Board in Arduino IDE<\/a><\/li>\n<\/ul>\n\n\n\n
Open your Arduino IDE and copy the following code.<\/p>\n\n\n
\/*********\n Rui Santos\n Complete project details at https:\/\/randomnerdtutorials.com\/esp8266-dht11dht22-temperature-and-humidity-web-server-with-arduino-ide\/\n*********\/\n\n\/\/ Import required libraries\n#include <Arduino.h>\n#include <ESP8266WiFi.h>\n#include <Hash.h>\n#include <ESPAsyncTCP.h>\n#include <ESPAsyncWebServer.h>\n#include <Adafruit_Sensor.h>\n#include <DHT.h>\n\n\/\/ Replace with your network credentials\nconst char* ssid = "REPLACE_WITH_YOUR_SSID";\nconst char* password = "REPLACE_WITH_YOUR_PASSWORD";\n\n#define DHTPIN 5 \/\/ Digital pin connected to the DHT sensor\n\n\/\/ Uncomment the type of sensor in use:\n\/\/#define DHTTYPE DHT11 \/\/ DHT 11\n#define DHTTYPE DHT22 \/\/ DHT 22 (AM2302)\n\/\/#define DHTTYPE DHT21 \/\/ DHT 21 (AM2301)\n\nDHT dht(DHTPIN, DHTTYPE);\n\n\/\/ current temperature & humidity, updated in loop()\nfloat t = 0.0;\nfloat h = 0.0;\n\n\/\/ Create AsyncWebServer object on port 80\nAsyncWebServer server(80);\n\n\/\/ Generally, you should use "unsigned long" for variables that hold time\n\/\/ The value will quickly become too large for an int to store\nunsigned long previousMillis = 0; \/\/ will store last time DHT was updated\n\n\/\/ Updates DHT readings every 10 seconds\nconst long interval = 10000; \n\nconst char index_html[] PROGMEM = R"rawliteral(\n<!DOCTYPE HTML><html>\n<head>\n <meta name="viewport" content="width=device-width, initial-scale=1">\n <link rel="stylesheet" href="https:\/\/use.fontawesome.com\/releases\/v5.7.2\/css\/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">\n <style>\n html {\n font-family: Arial;\n display: inline-block;\n margin: 0px auto;\n text-align: center;\n }\n h2 { font-size: 3.0rem; }\n p { font-size: 3.0rem; }\n .units { font-size: 1.2rem; }\n .dht-labels{\n font-size: 1.5rem;\n vertical-align:middle;\n padding-bottom: 15px;\n }\n <\/style>\n<\/head>\n<body>\n <h2>ESP8266 DHT Server<\/h2>\n <p>\n <i class="fas fa-thermometer-half" style="color:#059e8a;"><\/i> \n <span class="dht-labels">Temperature<\/span> \n <span id="temperature">%TEMPERATURE%<\/span>\n <sup class="units">°C<\/sup>\n <\/p>\n <p>\n <i class="fas fa-tint" style="color:#00add6;"><\/i> \n <span class="dht-labels">Humidity<\/span>\n <span id="humidity">%HUMIDITY%<\/span>\n <sup class="units">%<\/sup>\n <\/p>\n<\/body>\n<script>\nsetInterval(function ( ) {\n var xhttp = new XMLHttpRequest();\n xhttp.onreadystatechange = function() {\n if (this.readyState == 4 && this.status == 200) {\n document.getElementById("temperature").innerHTML = this.responseText;\n }\n };\n xhttp.open("GET", "\/temperature", true);\n xhttp.send();\n}, 10000 ) ;\n\nsetInterval(function ( ) {\n var xhttp = new XMLHttpRequest();\n xhttp.onreadystatechange = function() {\n if (this.readyState == 4 && this.status == 200) {\n document.getElementById("humidity").innerHTML = this.responseText;\n }\n };\n xhttp.open("GET", "\/humidity", true);\n xhttp.send();\n}, 10000 ) ;\n<\/script>\n<\/html>)rawliteral";\n\n\/\/ Replaces placeholder with DHT values\nString processor(const String& var){\n \/\/Serial.println(var);\n if(var == "TEMPERATURE"){\n return String(t);\n }\n else if(var == "HUMIDITY"){\n return String(h);\n }\n return String();\n}\n\nvoid setup(){\n \/\/ Serial port for debugging purposes\n Serial.begin(115200);\n dht.begin();\n \n \/\/ Connect to Wi-Fi\n WiFi.begin(ssid, password);\n Serial.println("Connecting to WiFi");\n while (WiFi.status() != WL_CONNECTED) {\n delay(1000);\n Serial.println(".");\n }\n\n \/\/ Print ESP8266 Local IP Address\n Serial.println(WiFi.localIP());\n\n \/\/ Route for root \/ web page\n server.on("\/", HTTP_GET, [](AsyncWebServerRequest *request){\n request->send(200, "text\/html", index_html, processor);\n });\n server.on("\/temperature", HTTP_GET, [](AsyncWebServerRequest *request){\n request->send(200, "text\/plain", String(t).c_str());\n });\n server.on("\/humidity", HTTP_GET, [](AsyncWebServerRequest *request){\n request->send(200, "text\/plain", String(h).c_str());\n });\n\n \/\/ Start server\n server.begin();\n}\n \nvoid loop(){ \n unsigned long currentMillis = millis();\n if (currentMillis - previousMillis >= interval) {\n \/\/ save the last time you updated the DHT values\n previousMillis = currentMillis;\n \/\/ Read temperature as Celsius (the default)\n float newT = dht.readTemperature();\n \/\/ Read temperature as Fahrenheit (isFahrenheit = true)\n \/\/float newT = dht.readTemperature(true);\n \/\/ if temperature read failed, don't change t value\n if (isnan(newT)) {\n Serial.println("Failed to read from DHT sensor!");\n }\n else {\n t = newT;\n Serial.println(t);\n }\n \/\/ Read Humidity\n float newH = dht.readHumidity();\n \/\/ if humidity read failed, don't change h value \n if (isnan(newH)) {\n Serial.println("Failed to read from DHT sensor!");\n }\n else {\n h = newH;\n Serial.println(h);\n }\n }\n}\n<\/code><\/pre>\n\tView raw code<\/a><\/p>\n\n\n\n
Insert your network credentials in the following variables and the code will work straight away.<\/p>\n\n\n\n
const char* ssid = \"REPLACE_WITH_YOUR_SSID\";\nconst char* password = \"REPLACE_WITH_YOUR_PASSWORD\";<\/code><\/pre>\n\n\n\nHow the Code Works<\/h3>\n\n\n\n
In the following paragraphs we’ll explain how the code works. Keep reading if you want to learn more or jump to the Demonstration section to see the final result. <\/p>\n\n\n\n
Importing libraries<\/h4>\n\n\n\n
First, import the required libraries.<\/p>\n\n\n\n
#include <Arduino.h>\n#include <ESP8266WiFi.h>\n#include <Hash.h>\n#include <ESPAsyncTCP.h>\n#include <ESPAsyncWebServer.h>\n#include <Adafruit_Sensor.h>\n#include <DHT.h><\/code><\/pre>\n\n\n\nSetting your network credentials<\/h4>\n\n\n\n
Insert your network credentials in the following variables, so that the ESP8266 can connect to your local network.<\/p>\n\n\n\n
const char* ssid = \"REPLACE_WITH_YOUR_SSID\";\nconst char* password = \"REPLACE_WITH_YOUR_PASSWORD\";<\/code><\/pre>\n\n\n\nVariables definition<\/h4>\n\n\n\n
Define the GPIO that the DHT data pin is connected to. In this case, it\u2019s connected to GPIO5<\/span> (D1).<\/p>\n\n\n\n
#define DHTPIN 5 \/\/ Digital pin connected to the DHT sensor<\/code><\/pre>\n\n\n\nThen, select the DHT sensor type you\u2019re using. In our example, we\u2019re using the DHT22. If you\u2019re using another type, you just need to uncomment your sensor and comment all the others.<\/p>\n\n\n\n
#define DHTTYPE DHT22 \/\/ DHT 22 (AM2302)<\/code><\/pre>\n\n\n\nInstantiate a DHT<\/span>object with the type and pin defined earlier.<\/p>\n\n\n\n
DHT dht(DHTPIN, DHTTYPE);<\/code><\/pre>\n\n\n\nCreate an AsyncWebServer<\/span>object on port 80.<\/p>\n\n\n\n
AsyncWebServer server(80);<\/code><\/pre>\n\n\n\nCreate float variables to hold the current temperature and humidity values. The temperature and humidity are updated in the loop()<\/span>.<\/p>\n\n\n\n
float t = 0.0;\nfloat h = 0.0;<\/code><\/pre>\n\n\n\nCreate timer variables needed to update the temperature readings every 10 seconds.<\/p>\n\n\n\n
unsigned long previousMillis = 0; \/\/ will store last time DHT was updated\n\n\/\/ Updates DHT readings every 10 seconds\nconst long interval = 10000; <\/code><\/pre>\n\n\n\nBuilding the Web Page<\/h4>\n\n\n\n
Proceeding to the web server page.<\/p>\n\n\n
\n![\"\"](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/web-server-labeled.png?resize=633%2C561&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nAs you can see in the above figure, the web page shows one heading and two paragraphs. There is a paragraph to display the temperature and another to display the humidity. There are also two icons to style the page. <\/p>\n\n\n\n
Let\u2019s see how this web page is created. <\/p>\n\n\n\n
All the HTML text with styles included is stored in the index_html<\/span> variable. Now we\u2019ll go through the HTML text and see what each part does.<\/p>\n\n\n\n
The following <meta><\/span> tag makes your web page responsive in any browser.<\/p>\n\n\n\n
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"><\/code><\/pre>\n\n\n\nThe <link><\/span> tag is needed to load the icons from the fontawesome website.<\/p>\n\n\n\n
<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\"><\/code><\/pre>\n\n\n\nStyles<\/h4>\n\n\n\n
Between the <style><\/style><\/span> tags, we add some CSS to style the web page.<\/p>\n\n\n\n
<style>\n html {\n font-family: Arial;\n display: inline-block;\n margin: 0px auto;\n text-align: center;\n }\n h2 { font-size: 3.0rem; }\n p { font-size: 3.0rem; }\n .units { font-size: 1.2rem; }\n .dht-labels{\n font-size: 1.5rem;\n vertical-align:middle;\n padding-bottom: 15px;\n }\n<\/style><\/code><\/pre>\n\n\n\nBasically, we’re setting the HTML page to display the text with Arial font in block without margin, and aligned at the center.<\/p>\n\n\n\n
html {\n font-family: Arial;\n display: inline-block;\n margin: 0px auto;\n text-align: center;\n}<\/code><\/pre>\n\n\n\nWe set the font size for the heading (h2<\/span>), paragraph (p<\/span>) and the units(.units<\/span>) of the readings.<\/p>\n\n\n\n
h2 { font-size: 3.0rem; }\np { font-size: 3.0rem; }\n.units { font-size: 1.2rem; }<\/code><\/pre>\n\n\n\nThe labels for the readings are styled as shown below:<\/p>\n\n\n\n
dht-labels{\n font-size: 1.5rem;\n vertical-align:middle;\n padding-bottom: 15px;\n}<\/code><\/pre>\n\n\n\nAll of the previous tags should go between the <head><\/span> and <\/head><\/span> tags. These tags are used to include content that is not directly visible to the user, like the <meta><\/span> , the <link><\/span> tags, and the styles.<\/p>\n\n\n\n
HTML Body<\/h4>\n\n\n\n
Inside the <body><\/body><\/span> tags is where we add the web page content.
<\/p>\n\n\n\nThe <h2><\/h2><\/span> tags add a heading to the web page. In this case, the \u201cESP8266 DHT server\u201d text, but you can add any other text.
<\/p>\n\n\n\n<h2>ESP8266 DHT Server<\/h2><\/code><\/pre>\n\n\n\nThen, there are two paragraphs. One to display the temperature and the other to display the humidity. The paragraphs are delimited by the <p><\/span> and <\/p><\/span> tags. The paragraph for the temperature is the following:<\/p>\n\n\n\n
<p>\n <i class=\"fas fa-thermometer-half\" style=\"color:#059e8a;\"<\/i> \n <span class=\"dht-labels\">Temperature<\/span> \n <span id=\"temperature\">%TEMPERATURE%<\/span>\n <sup class=\"units\">\u00b0C<\/sup>\n<\/p><\/code><\/pre>\n\n\n\nAnd the paragraph for the humidity is on the following snipet:<\/p>\n\n\n\n
<p>\n <i class=\"fas fa-tint\" style=\"color:#00add6;\"><\/i> \n <span class=\"dht-labels\">Humidity<\/span>\n <span id=\"humidity\">%HUMIDITY%<\/span>\n <sup class=\"units\">%<\/sup>\n<\/p><\/code><\/pre>\n\n\n\nThe <i><\/span> tags display the fontawesome icons. <\/p>\n\n\n\n
How to display icons<\/h4>\n\n\n\n
To chose the icons, go to the Font Awesome Icons website<\/a>.<\/p>\n\n\n\n
![\"\"](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/fontawesomepage.png?resize=750%2C476&quality=100&strip=all&ssl=1\")
<\/figure>\n\n\n\nSearch the icon you’re looking for. For example, “thermometer”.<\/p>\n\n\n\n
![\"\"](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/fontawesome-thermometer.png?resize=750%2C476&quality=100&strip=all&ssl=1\")
<\/figure>\n\n\n\nClick the desired icon. Then, you just need to copy the HTML text provided.<\/p>\n\n\n\n
<i class=\"fas fa-thermometer-half\"><\/code><\/pre>\n\n\n\n![\"\"](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/fontawesome-thermometer-html.png?resize=750%2C476&quality=100&strip=all&ssl=1\")
<\/figure>\n\n\n\nTo chose the color, you just need to pass the style parameter with the color in hexadecimal, as follows:<\/p>\n\n\n\n
<i class=\"fas fa-tint\" style=\"color:#00add6;\"><\/i> <\/code><\/pre>\n\n\n\nProceeding with the HTML text…<\/p>\n\n\n\n
The next line writes the word “Temperature” into the web page. <\/p>\n\n\n\n
<span class=\"dht-labels\">Temperature<\/span><\/code><\/pre>\n\n\n\nThe TEMPERATURE text between % signs is a placeholder for the temperature value.
<\/p>\n\n\n\n<span id=\"temperature\">%TEMPERATURE%<\/span><\/code><\/pre>\n\n\n\nThis means that this %TEMPERATURE%<\/strong> text is like a variable that will be replaced by the actual temperature value from the DHT sensor. The placeholders on the HTML text should go between % signs. <\/p>\n\n\n\n
Finally, we add the degree symbol.
<\/p>\n\n\n\n<sup class=\"units\">\u00b0C<\/sup><\/code><\/pre>\n\n\n\nThe <sup><<\/span>\/sup><\/span> tags make the text superscript. <\/p>\n\n\n\n
We use the same approach for the humidity paragraph, but it uses a different icon and the %HUMIDITY%<\/strong> placeholder.
<\/p>\n\n\n\n<p>\n <i class=\"fas fa-tint\" style=\"color:#00add6;\"><\/i> \n <span class=\"dht-labels\">Humidity<\/span>\n <span id=\"humidity\">%HUMIDITY%<\/span>\n <sup class=\"units\">%<\/sup>\n<\/p><\/code><\/pre>\n\n\n\nAutomatic Updates<\/h4>\n\n\n\n
Finally, there\u2019s some JavaScript code in our web page that updates the temperature and humidity automatically, every 10 seconds. <\/p>\n\n\n\n
Scripts in HTML text should go between the <script><\/script><\/span> tags.<\/p>\n\n\n\n
<script>\nsetInterval(function ( ) {\n var xhttp = new XMLHttpRequest();\n xhttp.onreadystatechange = function() {\n if (this.readyState == 4 && this.status == 200) {\n document.getElementById(\"temperature\").innerHTML = this.responseText;\n }\n };\n xhttp.open(\"GET\", \"\/temperature\", true);\n xhttp.send();\n}, 10000 ) ;\n\nsetInterval(function ( ) {\n var xhttp = new XMLHttpRequest();\n xhttp.onreadystatechange = function() {\n if (this.readyState == 4 && this.status == 200) {\n document.getElementById(\"humidity\").innerHTML = this.responseText;\n }\n };\n xhttp.open(\"GET\", \"\/humidity\", true);\n xhttp.send();\n}, 10000 ) ;\n<\/script><\/code><\/pre>\n\n\n\nTo update the temperature on the background, we have a setInterval()<\/span> function that runs every 10 seconds. <\/p>\n\n\n\n
Basically, it makes a request in the \/temperature<\/em> URL to get the latest temperature reading. <\/p>\n\n\n\n
xhttp.open(\"GET\", \"\/temperature\", true);\n xhttp.send();\n}, 10000 ) ;<\/code><\/pre>\n\n\n\nWhen it receives that value, it updates the HTML element whose id is temperature<\/span>. <\/p>\n\n\n\n
if (this.readyState == 4 && this.status == 200) {\n document.getElementById(\"temperature\").innerHTML = this.responseText;\n}<\/code><\/pre>\n\n\n\nIn summary, this previous section is responsible for updating the temperature asynchronously. The same process is repeated for the humidity readings.
<\/p>\n\n\n\nImportant: <\/strong> since the DHT sensor is quite slow getting the readings, if you plan to have multiple clients connected to an ESP8266 at the same time, we recommend increasing the request interval or remove the automatic updates.
<\/p>\n\n\n\nProcessor<\/h4>\n\n\n\n
Now, we need to create the processor()<\/span> function, that will replace the placeholders in our HTML text with the actual temperature and humidity values.
<\/p>\n\n\n\nString processor(const String& var){\n \/\/Serial.println(var);\n if(var == \"TEMPERATURE\"){\n return String(t);\n }\n else if(var == \"HUMIDITY\"){\n return String(h);\n }\n return String();\n}<\/code><\/pre>\n\n\n\nWhen the web page is requested, we check if the HTML has any placeholders. If it finds the %TEMPERATURE%<\/strong> placeholder, we return the temperature that is stored on the t<\/span> variable.
<\/p>\n\n\n\nif(var == \"TEMPERATURE\"){\n return String(t);\n}<\/code><\/pre>\n\n\n\nIf the placeholder is %HUMIDITY%<\/strong>, we return the humidity value.
<\/p>\n\n\n\nelse if(var == \"HUMIDITY\"){\n return String(h);\n}<\/code><\/pre>\n\n\n\nsetup()<\/h4>\n\n\n\n
In the setup()<\/span>, initialize the Serial Monitor for debugging purposes.
<\/p>\n\n\n\nSerial.begin(115200);<\/code><\/pre>\n\n\n\nInitialize the DHT sensor.
<\/p>\n\n\n\ndht.begin();<\/code><\/pre>\n\n\n\nConnect to your local network and print the ESP8266 IP address.
<\/p>\n\n\n\nWiFi.begin(ssid, password);\nwhile (WiFi.status() != WL_CONNECTED) {\n delay(1000);\n Serial.println(\"Connecting to WiFi..\");\n}<\/code><\/pre>\n\n\n\nFinally, add the next lines of code to handle the web server.
<\/p>\n\n\n\nserver.on(\"\/\", HTTP_GET, [](AsyncWebServerRequest *request){\n request->send(200, \"text\/html\", index_html, processor);\n});\nserver.on(\"\/temperature\", HTTP_GET, [](AsyncWebServerRequest *request){\n request->send(200, \"text\/plain\", String(t).c_str());\n});\nserver.on(\"\/humidity\", HTTP_GET, [](AsyncWebServerRequest *request){\n request->send(200, \"text\/plain\", String(h).c_str());\n});<\/code><\/pre>\n\n\n\nWhen we make a request on the root URL, we send the HTML text that is stored on the index_html<\/span> variable. We also need to pass the processor<\/span>function, that will replace all the placeholders with the right values.
<\/p>\n\n\n\nserver.on(\"\/\", HTTP_GET, [](AsyncWebServerRequest *request){\n request->send(200, \"text\/html\", index_html, processor);\n});<\/code><\/pre>\n\n\n\nWe need to add two additional handlers to update the temperature and humidity readings. When we receive a request on the \/temperature<\/em> URL, we simply need to send the updated temperature value. It is plain text, and it should be sent as a char, so, we use the c_str()<\/span> method.
<\/p>\n\n\n\nserver.on(\"\/temperature\", HTTP_GET, [](AsyncWebServerRequest *request){\n request->send(200, \"text\/plain\", String(t).c_str());\n});<\/code><\/pre>\n\n\n\nThe same process is repeated for the humidity.<\/p>\n\n\n\n
server.on(\"\/humidity\", HTTP_GET, [](AsyncWebServerRequest *request){\n request->send(200, \"text\/plain\", String(h).c_str());\n});<\/code><\/pre>\n\n\n\nLastly, we can start the server.<\/p>\n\n\n\n
server.begin();<\/code><\/pre>\n\n\n\nIn the loop()<\/span> is where we get new temperature readings from the sensor every 10 seconds.<\/p>\n\n\n\n
Basically, we check if it is time to get new sensor readings:<\/p>\n\n\n\n
if (currentMillis - previousMillis >= interval) {<\/code><\/pre>\n\n\n\nIf it is, we store a new temperature reading on the newT<\/span> variable<\/p>\n\n\n\n
float newT = dht.readTemperature();<\/code><\/pre>\n\n\n\nIf the newT<\/span> variable is a valid temperature readings, we update the t<\/span> variable.<\/p>\n\n\n\n
else {\n t = newT;\n Serial.println(t);\n}<\/code><\/pre>\n\n\n\nThe same process is repeated for the humidity.<\/p>\n\n\n\n
\/\/ Read Humidity\nfloat newH = dht.readHumidity();\n\/\/ if humidity read failed, don't change h value \nif (isnan(newH)) {\n Serial.println(\"Failed to read from DHT sensor!\");\n}\nelse {\n h = newH;\n Serial.println(h);\n}<\/code><\/pre>\n\n\n\nThat\u2019s pretty much how the code works.<\/p>\n\n\n\n
Uploading the code<\/h3>\n\n\n\n
After modifying the sketch with the necessary changes, if needed, upload the code to your ESP8266 (if you can\u2019t upload code to your ESP8266, read this troubleshooting guide<\/a>). <\/p>\n\n\n\n
Make sure you have the right board and COM port select. Go to Tools> Board <\/strong>and select the ESP8266 model you’re using. In our case, we’re using the ESP8266 12-E NodeMCU Kit.<\/p>\n\n\n
\n![\"\"](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/select-esp8266-board-arduino-ide.png?resize=672%2C596&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nGo to Tools <\/strong>> Port <\/strong>and select the COM port the ESP8266 is connected to.<\/p>\n\n\n
\n![\"\"](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/select-esp8266-port-arduino-ide.png?resize=548%2C595&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nPress the Arduino IDE upload button. <\/p>\n\n\n\n
Note: <\/strong> if you’re using an ESP-01, you need a
- ESPAsyncTCP by ESP32Async<\/a><\/li>\n<\/ul>\n\n\n\n
- DHT22<\/a> or DHT11<\/a> Temperature and Humidity Sensor<\/li>\n\n\n\n
- ESP8266 Web Server<\/a><\/li>\n\n\n\n
- How to Install the ESP8266 Board in Arduino IDE<\/a><\/li>\n\n\n\n