2015年8月10日 星期一

「anduino」webduino 取得溫溼度





溫濕度傳感器有四隻針腳：

第一隻針腳為 v ( 接 3.3V )，

第二隻為 data ，

第三隻沒有作用，為 N/C，

第四隻為 GND，

但手上這個模組接出來只有3支腳，

由左而右是data  ，3.3 V，GND （－）



實際接線圖如下：

藍線為3.3V，接中間腳位。

綠線為10腳位，接S腳。

紅線為GND，接－腳。


















規格資料：


 供電電壓: 3.3~5.5V DC

 輸 出: 單匯流排數字信號

 測量範圍: 濕度 20-90%RH, 溫度 0~50°C 

 測量精度: 濕度+-5%RH, 溫度+-2°C

 分 辨 率: 濕度1%RH, 溫度1°C 

 長期穩定性: <±1%RH/年


接下來

1.引入相關的JavaScript以及WebCompoment （放在Head裡）

(溫濕度傳感器的 WebComponent 為：wa-dht.html。)


<script src="https://webduino.io/components/webcomponentsjs/webcomponents.js"></script>
<link rel='import' href='https://webduino.io/components/webduino/web-arduino.html' />
<link rel='import' href='https://webduino.io/components/webduino/wa-dht.html' />


2.在body中放入內容，show用來顯示資訊，底下則是webduino的必要程式碼


<div id="show"></div>

<web-arduino id='board' device="你的 device 名稱">
 <wa-dht id='dht' pin='10'></wa-dht>
</web-arduino>








3.加入JavaScript


 <script type="text/javascript">
         window.addEventListener('WebComponentsReady', function () {
         var board = document.getElementById('board');
         
         board.on('ready',function ready() {
           var dht = document.getElementById('dht'),
             show = document.getElementById('show');

           dht.read(function (evt) {
             show.innerHTML = new Date().toLocaleString() + "<br>溫度:" + evt.temperature + " ℃<br> 溼度:" + evt.humidity + " %";
           }, 1000);

           }, false);

       }, false);

        </script>




4.完整程式碼




<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://webduino.io/components/webcomponentsjs/webcomponents.js"></script>
        <link rel='import' href='https://webduino.io/components/webduino/web-arduino.html' />
        <link rel='import' href='https://webduino.io/components/webduino/wa-dht.html' />
    </head>
    <body>
        <div id="show"></div>日

    <web-arduino id='board' device="device id">
        
        <wa-dht id='dht' pin='10'></wa-dht>
        
    </web-arduino>

         <script type="text/javascript">
         window.addEventListener('WebComponentsReady', function () {
         var board = document.getElementById('board');
         
         board.on('ready',function ready() {
           var dht = document.getElementById('dht'),
             show = document.getElementById('show');

           dht.read(function (evt) {
             show.innerHTML = new Date().toLocaleString() + "<br>溫度:" + evt.temperature + " ℃<br> 溼度:" + evt.humidity + " %";
           }, 1000);

           }, false);

       }, false);

        </script>
    
    </body>
</html>








執行結果







































比對一下我家的溫溼度計






資料來源：
https://webduino.io/tutorials/tutorial-10-temperature-humidity-sensor.html















張貼者：



於






















標籤：


















沒有留言:















張貼留言


















        

      









訂閱：
張貼留言 (Atom)