iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 7
2
Modern Web

Webduino 不只是物聯網,智慧插座也可以很 Modern~系列 第 7

實戰智慧插座 07 - 你是「人」我就開燈 ( 人體紅外線偵測 )

上一篇介紹了透過「距離」來開關燈,不過光是只有距離,是無法判斷是否為「人」所造成的,因此這篇將會介紹「人體紅外線偵測」的方式,實際做出一個有感應到人體紅外線就亮燈的裝置,這種裝置很常見的就是我們住家的騎樓,常常晚上走路經過別人家門口,就會有一盞燈亮起。



人體紅外線偵測器

這邊我使用的傳感器是 D-SUN 的人體紅外線傳感器 ( Pyro-electric Infrared Detector,簡稱 PIR ),外觀就是一個縮小的半球。
Webduino 人體紅外線偵測點燈

把上面半球的白色蓋子打開,可以發現裡面有一個接收器,而半圓蓋子的作用在於折射人體紅外線,讓原本的偵測角度可以擴大 ( 原理可以參考「菲涅爾透鏡」https://goo.gl/8flJAD )。
Webduino 人體紅外線偵測點燈

把感測器翻過來另外一面,首先很明顯可以看到有兩個可以調整的橘色旋鈕,標示 SX ( Sensitibity ) 的旋鈕是偵測的靈敏度,靈敏度以偵測距離 ( high ) 計算,範圍 3~7 公尺,順時針旋轉靈敏度越高,標示 TX ( Time Delay ) 則是偵測到訊號之後,下一次再繼續偵測的延遲時間,時間範圍是 5~300 秒,順時針旋轉延遲時間越長。
Webduino 人體紅外線偵測點燈

而另外一側的三個針腳,分別是 VCC ( 5V )、OUT ( 訊號腳 ) 和 GND。
Webduino 人體紅外線偵測點燈

接線方式就是直接把 VCC 接在開發板的 5V,GND 接 GND,訊號腳接數位腳的位置 ( 我在這裏接 11 )。
Webduino 人體紅外線偵測點燈

接好線之後,先透過 Webduino Blockly ( https://blockly.webduino.io ) 來測試一下,首先打開內嵌的網頁,選擇「顯示文字」,放入開發板的積木,輸入裝置的 device ID,接著放入人體紅外線偵測傳感器的積木,設定「有偵測到」和「沒有偵測到」的對應事件。
Webduino 人體紅外線偵測點燈

點選右上角的執行,如果在傳感器前晃來晃去,就會出現「有人靠近啦」的文字,如果用個東西把傳感器遮起來,就會出現「偵測中...」的字樣。
Webduino 人體紅外線偵測點燈



Webduino 程式用法

不過因為我們是要控制智慧插座,所以這邊把接線圖再稍微換一下,透過麵包板和插座連接 ( 因為我的 GND 只有一個,如果 GND 有兩個以上就不用麵包板 ),再來我們就要寫程式來控制插座的電燈了。
Webduino 人體紅外線偵測點燈

測試完成後,來看看程式碼怎麼運作,如果要在自己的網頁裡面使用,就要引入「 webduino-min.js 」還有「 webduino-blockly.js 」這兩個 JavaScript,這樣我們才有操控開發板以及人體紅外線偵測的 API 可以使用,在 body 的區域我放入一個 h2 來顯示一些文字訊息,然後放入兩張燈泡一明一暗的圖片,讓偵測到訊號的時候,網頁上的燈泡也會發生反應。

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Webduino</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="https://webduino.io/components/webduino-js/dist/webduino-all.min.js"></script>
  <script src="https://blockly.webduino.io/webduino-blockly.js"></script>
</head>

<body>
  <h2 id="show"></h2>
  <img src="http://example.oxxostudio.tw/it2016/it2016-day05-on.jpg" id="on">
  <img src="http://example.oxxostudio.tw/it2016/it2016-day05-off.jpg" class="show" id="off">
</body>
</html>

再來就看看人體紅外線偵測的使用方法,人體紅外線的宣告使用 getPir(board, pin),pin 是數位腳。

var pir = getPir(board, 11);

偵測的方式使用 .on(event, callback),event 有兩種,一種是 detected 也就是偵測到訊號,另外一種是 ended,也就是我們上面人體紅外線傳感器上頭,Time Delay 旋鈕所設定延遲時間到的時候,就會執行,當然,如果結束時又偵測到訊號,就又會觸發 derected 的行為。

pir.on("detected", function(){
  //偵測到人的時候要做什麼事
});
pir.on("ended", function(){
  //經過...秒結束後會做什麼事
});


網頁控制

了解用法之後,可以按照下面的寫法,在偵測到人體紅外線時,改變顯示文字為「偵測到有人呀!」同時把實際的燈泡以及網頁的燈泡點亮,經過幾秒後,沒有偵測到人,就在把訊息換成「偵測中...」,同時把網頁燈泡和實際燈泡關起來。

HTML

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Webduino</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="https://webduino.io/components/webduino-js/dist/webduino-all.min.js"></script>
  <script src="https://blockly.webduino.io/webduino-blockly.js"></script>
</head>

<body> 
  <h2 id="show">準備中</h2>
  <img src="http://example.oxxostudio.tw/it2016/it2016-day05-on.jpg" id="on">
  <img src="http://example.oxxostudio.tw/it2016/it2016-day05-off.jpg" class="show" id="off">
</body>
</html>

CSS ( 主要只寫了控制網頁中的燈泡圖片切換 )

img{
  display:none;
}
.show{
  display:block;
}

JavaScript ( 記得還要把 led = getLed(board, 10) 補上去才可以控制繼電器的燈泡 )

$(function(){
var pir,
    led,
    $show=$('#show'),
    $on = $('#on'), 
    $off = $('#off'); 

boardReady('你的裝置 ID', function (board) {
  board.systemReset();
  board.samplingInterval = 250;
  pir = getPir(board, 11);
  led = getLed(board, 10);
  $show.text('偵測中...');
  pir.on("detected", function(){
    $show.text('有人靠近啦!');
    led.on();
    $on.addClass('show');
    $off.removeClass('show');
  });
  pir.on("ended", function(){
    $show.text('偵測中...');
    led.off();
    $on.removeClass('show');
    $off.addClass('show');
  });
});

});

最終結果就會如下圖,我先用個鐵盒子罩著傳感器,打開鐵盒子的時候偵測到我發出的人體紅外線,就把燈點亮囉 ( http://bin.webduino.io/tafes/1/edit?html,css,js,output )
Webduino 人體紅外線偵測點燈



小結

透過傳感器的偵測,我們更能夠做出類似市面上販售的商品,不過會透過網頁控制的重點更在於可以傳接各式各樣的網頁服務,後續的篇幅會再一一介紹說明。

參考資料


上一篇
實戰智慧插座 06 - 你關燈我就開燈 ( 光感應小夜燈 )
下一篇
實戰智慧插座 08 - 你拍拍手我就開燈 ( 聲音偵測 )
系列文
Webduino 不只是物聯網,智慧插座也可以很 Modern~30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言