alex9ufo 聰明人求知心切: Read temperature and humidity from nodemcu ESP12E with DHT11 and show it on HTML webpage(Local)-part2

2018年6月8日星期五

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

20 mins

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

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:

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

Or you can continue with the following steps.

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.

1

2

3

4

5

6

7

8

9

10

11

<!DOCTYPE html>

<html lang="en">

    <head>

   <meta charset="UTF-8">

      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

      <meta name="Vikkey" content="Vivek Gupta & IoTMonk">

   <meta http-equiv="Access-Control-Allow-Origin" content="*">

       <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

      <title>ESP12E NodeMCU Temperature &amp; Humidity Sensor(Local)</title>

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".

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

<style>

 .footer{

  background:#64B5F6;

  width:100%;

  height:100px;

  position:absolute;

  bottom:0;

  left:0;

 }

    .center { 

  height: 400px;

  width: 400px;

  background: #c0c5ce;

  position: fixed;

        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

  top: 50%;

  left: 50%;

  margin-top: -180px;

  margin-left: -200px;

 }

 .form{

  padding-top: 10px;

  padding-right: 30px;

  padding-bottom: 50px;

  padding-left: 30px;

 }

    .ip{

  background-color: #ffffff; /* Green */

  border: none;

  color: black;

  padding: 16px 32px;

  text-align: center;

  text-decoration: none;

  display: inline-block;

  font-size: 16px;

  margin: 4px 2px;

  -webkit-transition-duration: 0.4s; /* Safari */

    }

        </style>

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.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

  </head>

    <body bgcolor="#ffffff">

    <center>

        <h1 style="font-family: Helvetica;color: black;">ESP12E NodeMCU Temperature &amp; Humidity Sensor(Local)</h1>

    </center>

 <div class="center">

    <div align="center" class="form">

           <br><br>

            <input type="text" id="ip" class="ip" placeholder="Paste Your IP"></input><br>

            <p style = 'line-height: 60px;font-family: Helvetica;color: #fff;font-size: 50px;' id="temperature">

                <img src = 'temperature.png' height="60px" width="60px" style='vertical-align: middle' /> 00.00

            </p>

            <p style = 'line-height: 60px;font-family: Helvetica;color: #fff;font-size: 50px;' id="humidity">

                <img src = 'humidity.png' height="60px" width="60px" style='vertical-align: middle' /> 00.00

            </p>

        </div>

 </div>

 <footer class="footer">

  <center>

   <h4 style="font-family: Helvetica;color: white;">&copy; 2017 | <a href="http://vsgupta.in/">Vivek Gupta</a> | <a href="http://www.iotmonk.com/">IoTMonk.com</a> </h4>

  </center>

 </footer>

    </body>

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.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<script>

  window.onload = function() {

            loaddata();

        };

  function loaddata(){

                var ip = document.getElementById('ip').value;

    var url = "http://"+ ip + "/data"

    $.getJSON(url, function(data) {

                    var val= data;

                    var humid=data['Humidity'];

                    var temper=data['temperature'];

                    document.getElementById("temperature").innerHTML = "<img src = 'temperature.png' height=\"60px\" width=\"60px\" style='vertical-align: middle' />  " +temper;

                    document.getElementById("humidity").innerHTML = "<img src = 'humidity.png' height=\"60px\" width=\"60px\" style='vertical-align: middle' />  "+humid;

     //console.log(data['Humidity']);

    });

        }

        window.setInterval(function(){

        loaddata();

            }, 5000);

 </script>

</html>

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.

alex9ufo 聰明人求知心切

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

沒有留言:

張貼留言

2024_09 作業3 以Node-Red 為主

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

沒有留言:

張貼留言

2024_09 作業3 以Node-Red 為主

2018年6月8日星期五