WF8266R IoT DEV Board 物聯網開發版

物聯網開發板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

物聯網
基礎課程
單元⼀：連接網路
Union U Inc.

物聯雲 APP ：手機連接WF8266R AP
➤ 手機 Wi-Fi -> UNU-WF8266R-XXXX (XXXX為SN後4碼)
➤ 透過 APP 將 WF8266R 連上可連通 Internet 的AP基地台
UNU-WF8266R-XXXX
Wi-Fi
Access Point

物聯雲 APP ：加入裝置

物聯雲 APP ：查看設備IP
➤ 確認手機可連上 Internet ，打開物聯雲 APP 首頁的設備清單確定 IP 位址

物聯雲 APP ：網路連接概念
AP 192.168.4.1
Local x.x.x.x
IP x.x.x.x
Internet
Union U Inc.
MQTT
Internet AP

物聯網
基礎課程
單元⼆：點亮 LED
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
Union U Inc.

亮度調整 PWM：材料
➤ 上個單元我們學會了如何控制電的流動, 這個單元要介紹如何控制電的流量, 就和開水
龍頭相同, 想要水大些你會把開關開大. 同樣的原理, 透過 PWM 可以控制這個流量, 當
PWM = 0 時最小, PWM = 1023 時最大.

亮度調整 PWM ：配線
➤ LED 長的接 PIN5 短的接 GND
➤ 在 WF8266R 開發板中的下面有6的小圓孔, 由左到右分別是 GND 5 4 12 13 5V

亮度調整 PWM ：程式解說
頁.
type
gpio : 數位輸出
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 調⾊
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點亮.

調色：程式解說
頁.
type
gpio : 數位輸出
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
Union U Inc.

閃亮 LED：材料
➤ LED x 1
➤ WF8266R x 1
➤ 之前的單元都學會了嗎, 接下來要讓 LED 燈閃動起來, 這個需要一點點程式幫忙. 這個
單元你將學會如何透過程式來隨心控制 GPIO 而不必限制在前面的物件功能.

閃亮 LED ：程式解說
➤ 目的：學習 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
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 事件系統
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 來控制
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
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();
});
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
Union U Inc.

DHT ：材料
➤ 型號：DHT11
➤ 濕度 : 20% ~ 95%
➤ 溫度 : 0 ~ 50 度C
➤ 誤差 : 濕度 5% 溫度
2%
➤ VCC : 3~5V

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
Union U Inc.

超音波測距：材料
➤ 型號：HC-SR04
➤ 探測的距離 : 2cm-400cm
➤ 精度 : 0.3 cm
➤ 感應角度 : 15 度
➤ VCC : 5V

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
Union U Inc.

DS18B20 溫度感測：材料
➤ DS 系列是一款數位式高精度的
溫度感測器, 數位化的好處是受
距離影響較低, 使用 One-Wire
方式通訊, 這種方式只需要一個
IO 就可以串接多個感測器。在
市面上比較常看到2種型式, 一種
是本章介絕的, 另一種是帶金屬
探頭做液態量測的, 都是同一個
晶片。
➤ 規格 : -55度 ~ 125度

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
Union U Inc.

IFTTT ：註冊
➤ 註冊 IFTTT 的好處是他目前完全免費, 並且可以讓 WF8266R 跨界使用更多熱門服務.
IFTTT 簡單來說就是當什麼發生時就做什麼事, 這 2 個什麼就是服務, 並且可以交
互訂閱.

IFTTT : EMAIL 通知
➤ 繼電器或腳位觸發時發送 EMail 通知
➤ 教學 
http://wf8266.com/wf8266r/tutorials/52_GPIO_MAIL

物聯網
IOT 平台
thingspeak.com
Union U Inc.

THINGSPEAK ：註冊
➤ https://thingspeak.com/

THINGSPEAK : 資料上傳
➤ 將資料存放在雲端平台
➤ 教學 
http://wf8266.com/wf8266r/tutorials/0A_WT

Union U Inc.

WF8266R IoT DEV Board 物聯網開發版

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to WF8266R IoT DEV Board 物聯網開發版

Similar to WF8266R IoT DEV Board 物聯網開發版 (20)

WF8266R IoT DEV Board 物聯網開發版