溫濕度偵測

溫濕度傳感器是接收外界環境變數最基本的傳感器,透過溫濕度傳感器,可以準確的偵測溫度與溼度的即時變化,若再搭配一些樣式表 ( CSS )、圖表工具 ( D3.js、Google Chart ) 或後端資料庫,就可以整合成為非常有用的數據收集應用。

範例影片展示

影片對應範例:https://blockly.webduino.io/?page=tutorials/dht-1

接線與實作

溫濕度傳感器有四隻針腳,第一隻針腳為 v ( 接 3.3V ),第二隻為 data ( 接 11 ),第三隻沒有作用,為 N/C,第四隻為 GND,可以直接將溫濕度傳感器接在馬克 1 號上,或利用麵包板接線出來。

由於 Webduino 支援開發板種類只會越來越多,接線圖先使用馬克一號與 Fly 示範,對於其他開發板來說,只要把溫濕度的訊號腳接數位腳,仍會一樣的效果

溫濕度傳感器

馬克一號接線示意圖:

馬克一號接線溫濕度傳感器

Fly 接線示意圖:

Fly 接線溫濕度傳感器

基本操作

打開 Webduino Blockly 編輯工具 ( https://blockly.webduino.io ),因為這個範例會用網頁「顯示文字」來顯示溫濕度,所以要先打開 Webduino Blockly 的網頁互動測試區,下拉選單選擇「顯示文字」,此時在右下角會出現對應的積木功能可以選擇。

頁互動測試區

把開發板放到編輯畫面裡,填入對應的 Webduino 開發板名稱,開發板內放入溫濕度積木,名稱設定為 dht,腳位設定為 11。

溫濕度相關的積木在「環境偵測 > 溫濕度」目錄下。

溫濕度傳感器積木

放入 dht 偵測溫濕度的積木,設定每 1000 毫秒 ( 1 秒 ) 偵測一次,偵測後將溫度顯示在網頁裡。

溫濕度傳感器偵測數值

因為顯示文字只有一個,要「同時」顯示溫濕度的話,就得要使用「建立字串」的積木。

建立字串積木在「基本功能 > 文字」目錄下。

顯示文字積木

點擊藍色小齒輪,可以增加字串的銜接缺口,透過拖拉的方式,增加為五個缺口。

顯示文字加入字串

依序在後方接上顯示的文字以及溫度、濕度,並使用<br/>作為換行表示。

文字的積木在「基本功能 > 文字」目錄下。

顯示溫濕度偵測資料

如果顯示出來的文字太大,或者行高太窄,我們也可以利用顯示文字樣式的積木來調整,這裏將文字和行高都設為 20。

文字大小與行高的積木在「顯示文字」目錄下。

溫濕度數值顯示設定

填入裝置 Device ID,確認開發板上線,點選右上方紅色按鈕執行,用手按壓溫濕度傳感器,或用嘴巴對著傳感器吹氣,就可以看到數值發生變化。

範例解答 ( 雲端平台 ):https://blocklypro.webduino.io/?demo=demo-area-01#R6o0m9dQxa

範例解答 ( 體驗版 ):https://goo.gl/KlHoKn

相關參考