溫濕度

下一篇 : 超音波測距

材料



  • 型號:DHT11
  • 濕度 : 20% ~ 95%
  • 溫度 : 0 ~ 50 度C
  • 誤差 : 濕度 5% 溫度 2%
  • VCC : 3~5V
  • 配線



    程式


    要透過 DHT11 讀取目前的溫濕度時需要使用 GPIO.dht11 功能, 並指定 DHT11 的 Data 腳接在 WF8266R 的哪個腳位. 這個範例我們將 Data 接在 Pin 14. 所以我希望 5 秒取一次目前的環境 溫度 和 濕度 時就需要用到 setInterval 幫手.

    document.addEventListener('wf8266r-ready', function (e) {
    
        setInterval(function(){
            GPIO.dht11(14,function(dht){
                $("#Humidity").text(dht.Humidity + " %");
                $("#C").text(dht.C);
                $("#F").text(dht.F);
            });
            },5000); //試著改改時間 1 秒 = 1000
        }, false);
            

    所以, 每 5 秒會得到溫濕度的資料放在 dht 這個物件之中. 在這個物件包含了3個屬性, 分別為 :

  • Humidity : 濕度
  • C : 溫度單位 C
  • F : 溫度單位 F
  • 了解之後, 我們就可以將這 3 個資料放在畫面上的位置.


    DHT22 使用者請將 GPIO.dht11 改換為 GPIO.dht 物件


    使用 GPIO.dht 方式自訂感測器型別 11(DHT11), 22(DHT22), 21(DHT21,AM2301)

    GPIO.dht(12,11,function(dht){
                        $("#Humidity").text(dht.Humidity + " %");
                        $("#C").text(dht.C);
                        $("#F").text(dht.F);
                    });

    完整範例

    <!doctype html>
    <html>
    <head>
    
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
        <title>WF8266R LED 燈</title>
    
        <!-- Imports WF8266R -->
        <script src="http://wf8266.com/wf8266r/webcomponent/jquery-2.1.4.min.js"></script>
        <script src="http://wf8266.com/wf8266r/webcomponent/wf8266r/wf8266r.js"></script>
        <link href="http://wf8266.com/wf8266r/webcomponent/wf8266r/wf8266r.css" rel="stylesheet" />
    
        <script>
            document.addEventListener('wf8266r-ready', function (e) {
    
                setInterval(function(){
                    GPIO.dht11(14,function(dht){
                        $("#Humidity").text(dht.Humidity + " %");
                        $("#C").text(dht.C);
                        $("#F").text(dht.F);
                    });
                    },5000); //試著改改時間 1 秒 = 1000
                }, false);
            $(function () {
                //載入 WF8266R 元件
                GPIO.init();
            });
        </script>
    
    </head>
    <body>
        <unu-wf8266r ip="192.168.0.16" uuid="xxxx" device="xxxx"></unu-wf8266r>
        濕度 : <span id="Humidity"></span><br /><br />
        溫度 C : <span id="C"></span><br /><br />
        溫度 F : <span id="F"></span>
    </body>
    </html>
                
    請點下圖開啟範例實做