ESP32 DHT11/DHT22 Asynchronous Web Server (auto updates Temperature and Humidity)

in this project we'll show you how to building a synchronous web server that is placed temperature and humidity using a DHT sensor the web server will build updates the readings automatically without a need to refresh the webpage to build a web server we'll be using the ESP async webserver library that provides an easy way to build and a synchronous webserver building in a synchronous webserver has several advantages such as handle more than one connection at the same time when you send a response you are immediately ready to handle other connections while the server is taking care of sending the response in the background simple template processing engine to end all templates and much more I recommend taking a quick look at a library documentation on its github page before proceeding to the web server you need to wire the dht11 our dht22 sensor to the ESP 32 has shown in this schematic diagram in this case were connecting the data pin to GPIO 27 but you can connect it to any other digital pin you also need to install a couple of libraries for this project the DHT and the other fruity Nephites sensor driver library to read from the DHT sensor and the ESP async webserver and they sync TCP libraries to build a synchronous web server go to the project page for the links and instructions to install these libraries having the ESP 32 board add-on installed in the arduino ide you have everything ready to start writing the code to build a web server open your arduino ide and copy the code provided in the project page let's see how the code works first important required libraries insert your network credentials in these variables so that the ESP 32 can connect your local network here we find the GPIO that the DHT data pin is connected in this case it's connect to GPIO 27 then select the DHT type you're using in our example we're using the dht22 if you are using another type you just need to uncomment your sensor and comment all the others here created each the object with a type and pin we've defined earlier create an asynch web server object on part 80 we've created two functions want to read the temperature and the other to read the humidity as you can see getting sensor readings is as simple as using the read temperature and radio militant methods under the HD object we also have a condition that returns these dashes in case the sensor fails to get the readings the readings are returned as strings by default we're reading the temperature in Celsius degrees to get the temperature in Fahrenheit degrees you can come at this line and uncomment this other line proceeding to the web server page as you can see the web page shows one having and two paragraphs there is a paragraph to display the temperature and another to display the humidity there is also these two icons to style our page let's see how this web page is created these lines contain all the HTML text with styles included to build a web page everything is starred in the index under scard HTML variable now we'll go through the HTML text and see what each part does for a detailed explanation of the HTML go to the project page this meta tag makes your web page responsive in any browser these link tag is needed to load the icons between the style tags we add some CSS to style the web page inside the body tags we add our content this is the adding of our web page it says ESB 32 each tea server but you can add any other text then we have two paragraphs want to display the temperature and the other to display the humidity these eye tags display the icons for more instructions on how to choose the icons please refer to the project page write the word temperature into the web page the temperature text between percentage signs is a placeholder for the temperature value which means that this temperature text is like a variable that will be replaced by the actual temperature value from the DHD sensor the placeholders on the HTML text should go between the percentage signs finally we add the degree symbol we use the same approach for the humidity paragraph but it uses a different icon on the percentage humidity placeholder finally there's some JavaScript code in our web page that updates the temperature and immediately automatically every 10 seconds to update the temperature on the background we have a set interval function that runs every 10 seconds basically it makes a request in the / temperature you are to get the latest temperature reading when it receives that value it applies the HTML element with the IV temperature in summary this section is responsible for updating the temperature as synchronously the same process is repeated for the humidity readings since the DHD sensor is quite slow getting the readings if you plan to have multiple clients connect to an ESP 32 at the same time we recommend increasing the request interval or remove the automatic updates now we need to create a processor function that will replace the placeholders in our HTML text with the actual temperature and humidity values when the webpage is requested we check if the HTML as any placeholders if it finds the temperature placeholder we return the temperature by calling the read HD temperature function created previously if the placeholder is humidity we return the humidity value let's move on to the setup initialize the serial monitor for debugging purposes initialize the DHD sensor connect your local network and print the ESP 32 IP address finally we'll add these lines to handle the webserver when we make a request on the route URL we send the HTML text that is stored on the index underscore HTML variable we also need to pass the processor function that will replace all the placeholders with the right values we need to add two conditional angular's to update the temperature and humidity readings when we receive a request on the slash temperature URL we simply need to send the updated temperature value it is plain text and it should be sent as a char the same process is repeated for the humidity lastly we can start the server because this isn't a synchronous web server we don't need to write anything in the loop that's pretty much all the code works we have a more in-depth step-by-step explanation on our website or below the video now a political to RESP 30 to make sure you have the right pardon compartes elected after uploading open the serial monitor at the bot read of 11 5200 press the ESP 32 reset button the ESP 32 IP address should be printed in the serial monitor open a browser and type the ESP 32 IP address your webserver should display the latest sensor readings note that the temperature and humidity readings are updated automatically without a need to refresh the webpage I hope you found this project useful for all the resources code schematics and step-by-step instructions go to random nerds - real calm this tutorial is a preview of the learning SP 32 with arduino ide course if you like this project make sure you take a look at the course page where it covered these and a lot more topics with AES P 32 thanks for watching and don't forget subscribe

Channel: Rui Santos

Views: 193,853

Keywords: rui santos, randomnerdtutorials, random nerd tutorials, ESP32 DHT11 DHT22 Temperature Humidity Web Server Arduino IDE, ESP32 DHT11 and DHT22 Temperature Humidity Web Server with Arduino IDE, ESP32 DHT22 Web Server Arduino IDE, ESP32 DHT Web Server with Arduino IDE, ESP32 DHT11 DHT22 Web Server Arduino IDE code schematics, ESP32 DHT22 Web Server Arduino IDE tutorial schematics, asynchronous ESP32 web server

Id: tDdL5urWvH4

Length: 8min 49sec (529 seconds)

Published: Tue Apr 02 2019