2018年6月8日 星期五

Read temperature and humidity from nodemcu ESP12E with DHT11 and show it on HTML webpage(Local)-part2

Read temperature and humidity from nodemcu ESP12E with DHT11 and show it on HTML webpage(Local)-part2

Introduction

Read temperature and humidity from nodemcu ESP12E with DHT11 and show it on HTML webpage that will be made from scratch, and I will show you step by step procedure to create the webpage.
If you are seeing this tutorial directly, then please start from beginning here:
Or you can continue with the following steps.
  1. Create a folder named "IoT_Read_Data" and download and place the below two images inside that folder. Rename the first image as "humidity" and second image as "temperature" respectively.
     
    It doesn't matter where you are placing the folder. The only thing is that the above two images should be placed inside the folder carefully. And rename them as specified above.
2. Now create a new file in notepad++ and copy and paste the following code. Starting with the title and head section.
3. Now we will copy the css code just below it in the <style> tag. This is just to make sure that our html page looks more "presentable".
4. Now copy the body section where we will be showing the icons of temperature and humidity along with paragraph where we will display the value coming from esp12e nodemcu in json format. And a textbox where we will be pasting the local IP address of esp12e nodemcu to get the data.
5. Now finally the script section which is reloading the page every 5 seconds. This will automatically refresh and send the get request to our esp12e nodemcu module.


Please watch the below video for full instructions on using the html page.
And you can download the full source code here : Download Source Code.
I hope that you enjoyed my tutorial. Please subscribe to my youtube channel to stay updated with more cool and awesome tutorials.

沒有留言:

張貼留言