Embed Size (px)
Citation preview
物聯網開發板WF8266Rhttp://www.wf8266.com
Union U Inc.
AGENDA➤ WF8266R.js 介紹
➤ 環境及連線
➤ 基礎課程
➤ 單元⼀ : 連上網路
➤ 單元⼆ : 點亮 LED
➤ 單元三 : 亮度調整
➤ 單元四 : PWM 調⾊
➤ 單元五 : 閃亮 LED
➤ 單元六 : 串列 Serial
➤ 單元七 : 事件 Event
AGENDA➤ 元件
➤ DHT
➤ 超⾳波
➤ DS18B20
➤ IoT
➤ ThingSpeak
➤ IFTTT
物聯網研習材料
WF8266Rhttp://www.wf8266.com
Union U Inc.
材料準備
WF8266R DHT11 DS18B20 HSR04 LED
RGB LED SW520D麵包板
Relay 公杜邦線
基礎課程➤ 單元一 : 連上網路
➤ 單元二 : 點亮 LED
➤ 單元三 : 亮度調整
➤ 單元四 : PWM 調色
➤ 單元五 : 閃亮 LED
➤ 單元六 : 串列 Serial
➤ 單元七 : 事件 Event
物聯網基礎課程
單元⼀ ： 連接網路
WF8266Rhttp://www.wf8266.com
Union U Inc.
物聯雲 APP ： 手機連接WF8266R AP➤ 手機 Wi-Fi -> UNU-WF8266R-XXXX (XXXX為SN後4碼)
➤ 透過 APP 將 WF8266R 連上可連通 Internet 的AP基地台
UNU-WF8266R-XXXXWi-Fi
Access Point
物聯雲 APP ： 加入裝置
物聯雲 APP ： 查看設備IP➤ 確認手機可連上 Internet ，打開物聯雲 APP 首頁的設備清單確定 IP 位址
物聯雲 APP ： 網路連接概念
AP 192.168.4.1Local x.x.x.x
IP x.x.x.x
Internet
WF8266Rhttp://www.wf8266.com
Union U Inc.
MQTT
Internet AP
物聯網基礎課程
單元⼆ ： 點亮 LED
WF8266Rhttp://www.wf8266.com
Union U Inc.
點亮 LED ：材料➤ 透過 LED 的亮滅來學習 GPIO 腳位輸出 高電位 和 低電位. 就像水往低處流, 當我們控
制 PIN5 腳輸出高電位時, 電流由 LED 正腳位(長;Pin5)流向負腳位(短;Gnd) LED 便會
亮起; 反之, 當 PIN5 輸出為低電位時, LED 二腳間是相等的低電位, 不會有流動產生, 所
以 LED 自然就不會亮.
點亮 LED ： 配線➤ LED 長的接 PIN5 短的接 GND
➤ 在 WF8266R 開發板中的下面有6的小圓孔, 由左到右分別是 GND 5 4 12 13 5V
點亮 LED ： 程式解說➤ API 類型 ： WebComponent
➤ 目的 ： 初學程式的人也可以輕鬆上手, 我們將 Web API 包裝成 <wf8266r-button> 標
籤, 只需要透過 標籤(TAG) 的定義就能使用. 而且可在任何裝置上瀏覽自行設計的控制
頁.
<wf8266r-button type="腳位類型" pin="編號" value="值">說明</wf8266r-button>
type
gpio : 數位輸出
pwm : 數位類比輸出
read : 讀取腳位
adc : 類比輸入
點亮 LED ： 打開和關閉 LED 燈➤ 打開 LED，將 5 號腳位設為 1
➤ 關閉LED，將5號腳位設為 0
➤ 教學網站 ： http://wf8266.com/wf8266r/tutorials/02_Light
<wf8266r-button type="gpio" pin="5" value="1">打開 LED</wf8266r-button>
<wf8266r-button type="gpio" pin="5" value="0">關閉</wf8266r-button>
物聯網基礎課程
單元三 ： 亮度調整 PWM
WF8266Rhttp://www.wf8266.com
Union U Inc.
亮度調整 PWM：材料➤ 上個單元我們學會了如何控制電的流動, 這個單元要介紹如何控制電的流量, 就和開水
龍頭相同, 想要水大些你會把開關開大. 同樣的原理, 透過 PWM 可以控制這個流量, 當
PWM = 0 時最小, PWM = 1023 時最大.
亮度調整 PWM ： 配線➤ LED 長的接 PIN5 短的接 GND
➤ 在 WF8266R 開發板中的下面有6的小圓孔, 由左到右分別是 GND 5 4 12 13 5V
亮度調整 PWM ： 程式解說➤ API 類型 ： WebComponent
➤ 目的 ： 初學程式的人也可以輕鬆上手, 我們將 Web API 包裝成 <wf8266r-button> 標
籤, 只需要透過 標籤(TAG) 的定義就能使用. 而且可在任何裝置上瀏覽自行設計的控制
頁.
<wf8266r-button type="腳位類型" pin="編號" value="值">說明</wf8266r-button>
type
gpio : 數位輸出
pwm : 數位類比輸出
read : 讀取腳位
adc : 類比輸入
亮度調整 PWM ： 調整 LED 光的亮度➤ 調整 LED，將 5 號腳位設為 0 ∼ 1023
➤ 教學網站 ： http://wf8266.com/wf8266r/tutorials/03_LightPWM
<wf8266r-button type="pwm" pin="5" value="0">LED 亮度調整</wf8266r-button>
物聯網基礎課程
單元四 : PWM 調⾊
WF8266Rhttp://www.wf8266.com
Union U Inc.
調色：材料➤ 上個單元我們學會了控制流量, 這個單元我們把流量轉換為 RGB 調色控制, 就像 紅+綠
= 黃
➤ RGB LED 燈的腳位由圖片上左到右分別是 Blue(藍) Green(綠) Common(共陰極)
Red(紅)
調色 ： 配線➤ LED 最長的接 GND 短的由左到右接 12(B) 4(G) 5(R)
➤ 這顆 RGB LED 是共陰極的規格, 所以最長的腳位是接 GND, 因此 GPIO 5 4 12 需要輸
出高電位才可將LED點亮.
調色 ： 程式解說➤ API 類型 ： WebComponent
➤ 目的 ： 初學程式的人也可以輕鬆上手, 我們將 Web API 包裝成 <wf8266r-button> 標
籤, 只需要透過 標籤(TAG) 的定義就能使用. 而且可在任何裝置上瀏覽自行設計的控制
頁.
<wf8266r-button type="腳位類型" pin="編號" value="值">說明</wf8266r-button>
type
gpio : 數位輸出
pwm : 數位類比輸出
read : 讀取腳位
adc : 類比輸入
調色 ： 調整 LED 光的色度➤ 設定3個腳位分別控制 R G B 3 色的輸出量
➤ 教學網站 ： http://wf8266.com/wf8266r/tutorials/04_LightColor
<wf8266r-button id="ledR" type="pwm" pin="5" value="0">LED 紅⾊</wf8266r-button>
<wf8266r-button id="ledG" type="pwm" pin="4" value="0">LED 綠⾊</wf8266r-button>
<wf8266r-button id="ledB" type="pwm" pin="12" value="0">LED 藍⾊</wf8266r-button>
物聯網基礎課程
單元五 : 閃亮 LED
WF8266Rhttp://www.wf8266.com
Union U Inc.
閃亮 LED：材料➤ LED x 1
➤ WF8266R x 1
➤ 之前的單元都學會了嗎, 接下來要讓 LED 燈閃動起來, 這個需要一點點程式幫忙. 這個
單元你將學會如何透過程式來隨心控制 GPIO 而不必限制在前面的物件功能.
閃亮 LED ： 配線
閃亮 LED ： 程式解說➤ API 類型 ： WebComponent
➤ 目的 ： 學習 GPIO 物件的使用和操作
document.addEventListener('wf8266r-ready', function (e) {
...
}, false);
setInterval(function(){
要做的事情寫在這裡
},毫秒);
GPIO.pin(5,pin5Value,function(){}); //將⽬前存在 pin5Value 裡的⾼或低電位送到 PIN5 腳
},1000);
閃亮 LED ： 開始閃動➤ 1秒要換一個狀態, 需要一個變數, 名字叫 pin5Value 存放 GPIO5 腳的電位值
➤ 然後要判斷 如果是高電位 就把 pin5Value 設成低, 反之設為高. 如此就會有 高低高低 ...
一直這樣變化下去, 而這個時間就是 1000 毫秒 也就是 1 秒鐘.
➤ 教學網站 ： http://wf8266.com/wf8266r/tutorials/05_LightShiny
物聯網基礎課程
單元六 : UART
WF8266Rhttp://www.wf8266.com
Union U Inc.
UART : 概念➤ 序列(串口) 傳輸
➤ WF8266R 可以透過 Tx(該裝置的輸出訊號腳位) 和 Rx(該裝置的接收訊號腳位) 二腳和
外部序列裝置進行資料互傳
Device 1 Device 2
Tx
Rx
Rx
Tx
BAUD
UART ： 材料➤ USB 轉 TTL 晶片 FTDI：用來和電腦溝通
➤ WF8266R
UART ： 調整速度 BAUD➤ WF8266R 預設的傳輸率是 115200
➤ 輸入 wf8266r.local 可查看 WF8266R 的內部資料
➤ 更改速率
http://wf8266r.local/serial?baud=9600
範例
http://wf8266.com/wf8266r/Code?templateName=06_SerialBaud.html
UART ： READ➤ WF8266R 目前配置了 255 個字元讀取緩衝區, 所以一次發送的最大長度為 255. 這裡示
範由電腦端發送 Hello WF8266R 字串, 並透過 GPIO 物件的 serialRead 讀取.
➤ 讀取
》文字 ： http://wf8266r.local/serial/read?text=
》HEX ： http://wf8266r.local/serial/read?hex=
範例
http://wf8266.com/wf8266r/Code?templateName=06_SerialRead.html
UART ： WRITE➤ WF8266R 可透過 GPIO.serialWrite 或是加上 換行 GPIO.serialWriteln 這二個方法將
資料送到其他設備.
➤ 寫入
》文字 ： http://wf8266r.local/write?text=
》HEX ： http://wf8266r.local/write?hex=
範例
http://wf8266.com/wf8266r/Code?templateName=06_SerialWrite.html
物聯網基礎課程
單元七 : EVENT 事件系統
WF8266Rhttp://www.wf8266.com
Union U Inc.
事件系統 : 概念➤ 讓 WF8266R 自主處理一些簡易的控制，不需要長期開啟 APP 或 網頁監控。
監聽 觸發
腳位
時間
元件
腳位
GPIO
溫濕度
DHT11
溫濕度
DHT22
超音波
HSR
流明
BH1750
溫度
DS
PM2.5
G1 G3 G5
腳位
呼叫網址
傳送事件
Self Call
推送 Device Call
事件系統 ： 服務➤ 讀取事件清單
http://wf8266r.local/when
➤ 清空事件清單
http://wf8266r.local/when?=
➤ 將事件清單寫入 ROM
http://wf8266r.local/save
➤ 加入事件
http://wf8266r.local/listen
事件系統 : APP 小幫手➤ 事件系統參數較多，如果一時無法掌握也沒關係。
➤ 使用物聯雲 APP 快速建立事件行為。
案例 1 : 按下 WF8266R(GPIO0) 白色按鍵後關閉 GPIO5 上的 LED 燈
➤ 這裡有個關念要說明, 在按鍵電路上 WF8266R 的 GPIO 0 4 5 12 13 都是輸出高電位, 所
以判別條件都是以低電位做為依據. 將上述目的轉換為 Event 參數如下:
eventType=1 //預設值可不填
eventValue=0,0 //GPIO0 = 0 時成⽴
trigerType=1 //使⽤腳位觸發動作
trigerValue=5,0 //觸發腳為 GPIO5 輸出低電位
http://wf8266r.local/when/listen?eventValue=0,0&trigerType=1&trigerValue=5,0
案例 2 : 按下 WF8266R(GPIO0) 白色按鍵後關閉 GPIO5 上的 LED 燈, 5秒後再亮起
➤ 現在 LED 燈是熄滅的狀態, 但希望 5 秒後再亮起, 我們可以使用 timer 來控制
eventType=1 //預設值可不填
eventValue=0,0 //GPIO0 = 0 時成⽴
trigerType=1 //使⽤腳位觸發動作
trigerValue=5,1 //觸發腳為 GPIO5 輸出低電位
timer=5000 //成⽴後5秒觸發
http://wf8266r.local/when/listen?eventValue=0,0&trigerType=1&trigerValue=5,1&timer=5000
案例 3 : 按下 WF8266R(GPIO0) 白色按鍵後關閉另一塊 WF8266R GPIO5 上的 LED 燈
➤ 另一塊 WF8266R 的 IP為 192.168.0.21 使用 WebAPIs 方式控制 GPIO, 我們可以這樣使
用 :
➤ 在了解之後, 轉換為事件參數如下 :
http://192.168.0.21/gpio?5=0
eventType=1 //預設值可不填
eventValue=0,0 //GPIO0 = 0 時成⽴
trigerType=2 //使⽤ Request 觸發動作, 位址⼀定要最後做
trigerValue=192.168.0.21:80,gpio?5=0 //觸發另⼀塊 WF8266R 腳為 GPIO5 輸出低電位
http://wf8266r.local/when/listen?eventValue=0,0&trigerType=2&trigerValue=192.168.0.21:80,gpio?5=0
案例 5 : 按下 WF8266R(GPIO0) 白色按鍵後通知網頁端訂閱者 PIN0_CLICK
➤ 事件訂閱會需要使用到 WF8266R.js 的 GPIO 物件. 透過 e.Action 獲得目前通知的事件
名
➤ 在了解之後, 轉換為事件參數如下 :
GPIO.events(function(e){
$("#message").text(e.Action).fadeIn().delay(100).fadeOut();
});
eventType=1 //預設值可不填
eventValue=0,0 //GPIO0 = 0 時成⽴
trigerType=3 //使⽤ WebSocket 通知訂閱者
trigerValue=PIN0_Click //⾃訂事件名稱 傳送到 GPIO.events 裡的 e.Action
http://wf8266r.local/when/listen?eventValue=0,0&trigerType=3&trigerValue=PIN0_Click
案例 6 : 每個小時的 0 分 關閉 LED, 5 分 打開 LED➤ 時間的監控是使用 eventType=2
➤ 在了解之後, 轉換為事件參數如下 :
eventType=2 //時間監控
eventValue=:0 //時間的分鐘數 = 0 時成⽴
trigerType=1 //使⽤腳位輸出
trigerValue=5,0 //將 GPIO5 輸出低電位
// 0 分時關閉
http://wf8266r.local/when/listen?eventType=2&eventValue=:0&trigerType=1&trigerValue=5,0
// 5 分時打開
http://wf8266r.local/when/listen?eventType=2&eventValue=:5&trigerType=1&trigerValue=5,1
// 晚上 8 點 使⽤ WebSocket 訂閱通知
http://wf8266r.local/when/listen?eventType=2&eventValue=20:0&trigerType=3&trigerValue=PM8
元件➤ DHT
➤ 超音波
➤ DS18B20
物聯網元件
DHT11/DHT22
WF8266Rhttp://www.wf8266.com
Union U Inc.
DHT ：材料➤ 型號：DHT11
➤ 濕度 : 20% ~ 95%
➤ 溫度 : 0 ~ 50 度C
➤ 誤差 : 濕度 5% 溫度
2%
➤ VCC : 3~5V
DHT ： 配線
DHT ： 程式解說➤ 要透過 DHT11 讀取目前的溫濕度時需要使用 GPIO.dht11 功能, 並指定 DHT11 的
Data 腳接在 WF8266R 的哪個腳位. 這個範例我們將 Data 接在 Pin 14. 所以我希望 5 秒
取一次目前的環境 溫度 和 濕度 時就需要用到 setInterval 幫手.
➤ 除了 DHT11 以為, 同樣可以使用 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);
});
DHT : 實做➤ 教學網站 ： http://wf8266.com/wf8266r/Code?templateName=31_DHT.html
物聯網元件
超⾳波測距 HSR04
WF8266Rhttp://www.wf8266.com
Union U Inc.
超音波測距 ：材料➤ 型號：HC-SR04
➤ 探測的距離 : 2cm-400cm
➤ 精度 : 0.3 cm
➤ 感應角度 : 15 度
➤ VCC : 5V
DHT ： 配線
DHT ： 程式解說➤ 利用 setInterval 這個幫手來每秒鐘取一次目前的距離. 其中會透過 GPIO.distance 這個
功能向 WF8266R 發出請求, 當資料回傳時便會儲存在 data 物件中, 只需透過
data.distance 就可以拿到距離值了. 在使用 distance 時會傳入2個參數, 分別是 Echo 和
Trig, 這個範例我們是將 Echo 接在 Pin 13 所以第一個參數代 13, Trig 則是 12.
setInterval(function(){
GPIO.distance(13,12,function(data){ // Echo, Trig
$("#distanceValue").text(data.distance);
});
},1000); //試著改改時間 1 秒 = 1000
}, false);
DHT : 實做➤ 教學網站 ： http://wf8266.com/wf8266r/Code?templateName=32_Distance.html
物聯網元件
溫度 DS18B20
WF8266Rhttp://www.wf8266.com
Union U Inc.
DS18B20 溫度感測 ：材料➤ DS 系列是一款數位式高精度的
溫度感測器, 數位化的好處是受
距離影響較低, 使用 One-Wire
方式通訊, 這種方式只需要一個
IO 就可以串接多個感測器。 在
市面上比較常看到2種型式, 一種
是本章介絕的, 另一種是帶金屬
探頭做液態量測的, 都是同一個
晶片。
➤ 規格 : -55度 ~ 125度
DS18B20 ： 配線
DS18B20 ： 實作
DS18B20 ： 配合事件控制繼電器開關➤ 希望繼電器第1路(GPIO5)在 第1顆溫度 > 32 度時關閉(GPIO5=1), 第1顆溫度 < 30 度時
打開(GPIO5=0), 可以下達以下2組事件定義 :
➤
➤ APP 教學資料
http://wf8266.com/wf8266r/tutorials/35_DS
關閉 http://wf8266r.local/when/listen?eventType=3&eventValue=4:1:32^2,14:1&trigerType=1&trigerValue=5,1&timer=1000
打開 http://wf8266r.local/when/listen?eventType=3&eventValue=4:1:30^1,14:1&trigerType=1&trigerValue=5,0&timer=1000
IOT 平台➤ IFTTT
➤ THINGSPEAK
物聯網IOT 平台
IFTTT
WF8266Rhttp://www.wf8266.com
Union U Inc.
IFTTT ：註冊➤ 註冊 IFTTT 的好處是他目前完全免費, 並且可以讓 WF8266R 跨界使用更多熱門服務.
IFTTT 簡單來說就是 當 什麼 發生時 就做 什麼 事, 這 2 個 什麼 就是服務, 並且可以交
互訂閱.
IFTTT : EMAIL 通知➤ 繼電器或腳位觸發時發送 EMail 通知
➤ 教學
http://wf8266.com/wf8266r/tutorials/52_GPIO_MAIL
THINGSPEAK ：註冊➤ https://thingspeak.com/
THINGSPEAK : 資料上傳➤ 將資料存放在雲端平台
➤ 教學
http://wf8266.com/wf8266r/tutorials/0A_WT
WF8266Rhttp://www.wf8266.com
Union U Inc.
