IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed
-
Upload
bang-min-shiue -
Category
Engineering
-
view
476 -
download
14
Transcript of IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed
![Page 1: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/1.jpg)
Speaker: Jollen (陳俊宏)
Founder, MokoversityFounder, 仕橙3G教室 (Moko365)
<[email protected]>www.mokoversity.com
IoT 與 WoT 物聯網裝置實作
Ben、Polo、Larry
<[email protected]> www.oranwind.com
使⽤用Arch Pro 與 mbed
![Page 2: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/2.jpg)
Agenda
• Google 「 Physical Web」 計畫
• ARM mbed ⼊入⾨門
• Arch Pro 介紹
• Digital Interface 與 Sensor 數據讀取
2
![Page 3: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/3.jpg)
Agenda
• mbed Networking 程式實作
• httpd 與 REST API 程式實作
• Websocket 數據推送實作
• Demo - 簡易家⽤用氣象站
3
![Page 4: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/4.jpg)
Physical Web
![Page 5: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/5.jpg)
Physical WebThe future of the IoT is URLs.
![Page 6: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/6.jpg)
Internet of Things
Web of ThingsAn Application Layer that simplifies the creation of
Internet of Things applications
* of Things
![Page 7: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/7.jpg)
![Page 8: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/8.jpg)
Physical Object
![Page 9: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/9.jpg)
REST Object
GET /1/mbed/lpc1786/sensor/dust/sen12291p
Physical Web
![Page 10: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/10.jpg)
ARM mbed
![Page 11: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/11.jpg)
IoT OSmbed OSWe are creating a modern full-stack operating system that is designed specifically for ARM Cortex®-M-based MCUs; the worlds leading 32-bit microcontrollers that already sell in the billions.
mbed Device ServerAnalogous to a Web Server that accepts connections from mobile phones or web browsers, a Device Server handles the connections from IoT devices.
mbed Toolsonline compiler (Web IDE) etc.
![Page 12: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/12.jpg)
mbed OSmbed Device Servermbed Tools
![Page 13: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/13.jpg)
Analogous to a Web Server that accepts connections from mobile phones or web browsers, a Device Server handles the connections from Internet of Things (IoT) devices.
A Device Server is a key enabler for cloud service providers, operators and enterprises to access the IoT growth market with production deployments, bringing end node devices in to the world of web services.
![Page 14: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/14.jpg)
ARM mbed tool ⼊入⾨門
![Page 17: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/17.jpg)
Import or Create new program
17
![Page 18: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/18.jpg)
New Program...
18
![Page 19: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/19.jpg)
Compile
19
![Page 20: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/20.jpg)
Download a *.bin to MBED
20
![Page 21: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/21.jpg)
Commit
21
![Page 22: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/22.jpg)
Commit
22
![Page 23: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/23.jpg)
Publish
23
![Page 24: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/24.jpg)
Publish
24
![Page 25: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/25.jpg)
Done!
25
![Page 26: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/26.jpg)
Arch Pro mbed
![Page 27: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/27.jpg)
Introduction
27
• Arch Pro 是⼀一款⽤用於快速原型設計的 mbed 平台的開發板,採⽤用 ARM Cortex-M3 內核的 NXP LPC1768 微控制器,帶有以太網、USB Host/Device 等接⼝口。
•Arch Pro 採⽤用 Arduino 的硬件接⼝口,並且帶兩個 Grove 接⼝口,可以很⽅方便的連接各種各樣的 Shield 和 Grove 模塊,再結合豐富的軟件庫,讓開發變得快速、簡單。
![Page 28: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/28.jpg)
Arch Pro pinout
28
![Page 29: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/29.jpg)
Grove Starter kit for mbed
https://github.com/mbed-taiwan/mbed-school
![Page 30: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/30.jpg)
Grove Starter Kit for mbed 套件
![Page 31: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/31.jpg)
Grove - Button
• 按鈕元件包含⼀一顆獨⽴立的「瞬間開/關」按鈕。 「瞬間」是意思是,當按鈕被按壓後,按鈕會⽴立刻主動反彈。按下按鈕時,按鈕元件會使 GPIO pin 得到⼀一個 HIGH 信號,反彈時則輸出 LOW 信號。
![Page 32: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/32.jpg)
Grove - Button pinout 接法
sensor pin mbed pin
1 - SIG DigitalIn
2 - NC 不⽤用接 不⽤用接
3 - Vcc Vout - 3.3V Vout - 3.3V
4 - GND GND GND
![Page 33: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/33.jpg)
使⽤用 Button 控制 LED ,按鈕被按壓後 LED 亮,反彈時則 LED 不亮
#include "mbed.h"
DigitalOut myled(LED1); DigitalIn button(p21);
int main() { while(1) {
if (button) myled = 1; else myled = 0; }
}
Grove - Button 範例:
![Page 34: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/34.jpg)
Grove - Buzzer
• 蜂鳴器(Buzzer)元件主要由⼀一個壓電式蜂鳴器組成。可以將蜂鳴器連接到LPC1786 的數位輸出(Digital Output),當輸出為HIGH 時發出聲響。
• 亦可將蜂鳴器連接到類⽐比輸出,此時可讓蜂鳴器產⽣生各種⾳音效。
![Page 35: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/35.jpg)
Grove - Buzzer pinout 接法
sensor pin mbed pin
1 - SIG DigitalOut
2 - NC 不⽤用接 不⽤用接
3 - Vcc Vout - 3.3V Vout - 3.3V
4 - GND GND GND
![Page 36: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/36.jpg)
使⽤用 Button 控制蜂鳴器,當 Button 的按鈕被按壓後,蜂鳴器會發出聲響,反彈時蜂鳴器則不會發出聲響。
#include "mbed.h"
DigitalOut Buzzer(p20); DigitalIn button(p21);
int main() { while(1) {
if (button) Buzzer = 1 ; else Buzzer = 0;
wait(0.7); // simple debouncing }
}
Grove - Buzzer 元件 範例:
![Page 37: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/37.jpg)
Grove - Rotary Angle Sensor• 旋轉⾓角度感測器元件提供類⽐比
輸出介於 0 -Vcc,可偵測⾓角度為 0 - 300 度。
![Page 38: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/38.jpg)
Grove - Rotary Angle Sensor pinout 接法
sensor pin mbed pin
1 - SIG AnalogIn
2 - NC 不⽤用接 不⽤用接
3 - Vcc Vout - 3.3V Vout - 3.3V
4 - GND GND GND
![Page 39: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/39.jpg)
使⽤用 AnalogIn API 讀取旋轉⾓角度。
#include "mbed.h"
AnalogIn RotaryAngle(p15);
int main() { int value = 0 ; value = RotaryAngle; }
Grove - Rotary Angle Sensor 範例:
![Page 40: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/40.jpg)
Grove - Light Sensor
• 光源感測器元件包含⼀一個光敏電阻。當環境光源的強度上升時,光敏電阻值將會下降。也就是說,光亮時輸出訊號為HIGH,⿊黑暗時為 LOW。
![Page 41: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/41.jpg)
氣體感測元件 pinout 接法
sensor pin mbed pin
1 - SIG DigitalIn
2 - NC 不⽤用接 不⽤用接
3 - Vcc Vout - 3.3V Vout - 3.3V
4 - GND GND GND
![Page 42: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/42.jpg)
使⽤用 Light Sensor 控制LED ,光亮時 LED 不亮,無光亮時則 LED 亮。
#include "mbed.h"
DigitalOut myled(LED1); DigitalIn lighter(p21);
int main() { while(1) {
if(lighter == 1) myled = 0 ; else myled = 1;
wait(0.2); }
}
Grove - Light Sensor 範例:
![Page 43: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/43.jpg)
簡易溫度器製作
![Page 44: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/44.jpg)
簡易溫度器電⼦子零件
44
![Page 45: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/45.jpg)
實作步驟• 將 Base Shield 接在 Arch Pro
上
• 溫度感測器接 Universal 4 pin Cable 線,並接在 Base Shield 的 A0
• 將四位數 LED 顯⽰示器接 Universal 4 pin Cable 線,並接在 Base Shield 的 UART
• 記得將 Base Shield 切換⾄至 5V VCC
45
![Page 46: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/46.jpg)
Grove - Temperature Sensor• 溫度感測器元件使⽤用溫敏電阻
偵測環境的溫度。當環境溫度上升時,溫敏電阻值將會下降。我們可以利⽤用這個特性去計算出環境溫度。感測器可偵測的範圍是 -40ºC - 125ºC,誤差為±1.5ºC。
![Page 47: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/47.jpg)
Grove - Temperature Sensor pinout 接法
sensor pin mbed pin
1 - SCL AnalogIn
2 - SDA 不⽤用接
3 - Vcc Vout - 3.3V Vout - 3.3V
4 - GND GND GND
![Page 48: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/48.jpg)
使⽤用 AnalogIn API 讀取 Temperature Sensor 的資料,依 Temperature Sensor 的 datasheet 轉換出溫度。
#include "mbed.h"
AnalogIn device(p15);
int a; float temperature; int B = 3975; // B value of the thermistor float resistance;
int main() { while(1) {
a = device * 675; // multiply ain by 675 if the Grove shield is set to 5V or 1023 if set to 3.3V resistance = (float)(1023-a)*10000/a; // get the resistance of the sensor; temperature = 1/(log(resistance/10000)/B+1/298.15)-273.15; // convert to temperature via datasheet ;
wait(0.8);
} }
Grove - Temperature Sensor 範例:
![Page 49: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/49.jpg)
Digital Interface 與 Sensor 數據讀取
![Page 50: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/50.jpg)
ARM mbed pin 名稱定義 PinNames.h
PinNames.h,內容如下: typedef enum { // LPC Pin Names P0_0 = LPC_GPIO0_BASE, P0_1, P0_2, P0_3, P0_4, …. // mbed DIP Pin Names p5 = P0_9, p6 = P0_8, p7 = P0_7, p8 = P0_6, . . . . p27 = P0_11, p28 = P0_10, p29 = P0_5, p30 = P0_4,
// Other mbed Pin Names #ifdef MCB1700 LED1 = P1_28, LED2 = P1_29, LED3 = P1_31, LED4 = P2_2, #else LED1 = P1_18, LED2 = P1_20, LED3 = P1_21, 50
![Page 51: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/51.jpg)
ARM mbed 基本 API 說明
• Analog I/O
• Digital I/O
51
![Page 52: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/52.jpg)
GPIO Analog I/O
• AnalogIn
• AnalogIn (Read/Getter/ADC)
• p15~p20
• AnalogIn(PinName pin)
• read(), [0.0, 1.0]
• read_u16(), [0x0, 0xFFFF]
• AnalogOut
• AnalogOut (Write/Setter/DAC)
• p18
• AnalogOut(PinName pin)
• write(float value)
• write_u16(unsigned short value)
52
![Page 53: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/53.jpg)
GPIO Digital I/O
• DigitalIn I/O
• p5~p30
• DigitalIn(PinName pin)
• DigitalIn(PinName pin, PinMode mode)
• read()
• mode(PinMode pull)
• is_connected()
• DigitalOut I/O
• p5~p30
• DigitalOut(PinName pin, int value)
• write(int value)
• read()
• is_connected()
53
![Page 54: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/54.jpg)
GPIO Digital I/O
• BusIn
• BusIn(PinName p0, PinName p1 = NC, PinName p2 = NC, …, PinName p15 = NC)
• read()
• mode(PinMode pull)
• mask()
• BusOut
• BusIn(PinName p0, PinName p1 = NC, PinName p2 = NC, …, PinName p15 = NC)
• write(int value)
• read()
• mask()
54
![Page 55: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/55.jpg)
GPIO Digital I/O
• PortIn
• PortIn(PortName port, int mask=0xFFFFFFFF)
• read()
• mode(PinMode mode)
• PortOut
• PortIn(PortName port, int mask=0xFFFFFFFF)
• write(int value)
• read()
55
![Page 56: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/56.jpg)
GPIO Digital I/O
• PwmOut
• PwmOut(PinName pin)
• p21~p26
• write(float value)
• read()
• period(float seconds)
• period_ms(int ms)
56
![Page 57: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/57.jpg)
GPIO Digital I/O
• InterruptIn
• p5~p30, p19 and p20 除外
• rise (void(*fptr)(void))
• rise (T *tptr, void(T::*mptr)(void))
• fall (void(*fptr)(void))
• fall (T *tptr, void(T::*mptr)(void))
57
![Page 58: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/58.jpg)
Grove - 3-Axis Digital Accelerometer
• 數位三軸加速器元件,通常使⽤用在需要偵測⽅方向、⼿手勢、動作的應⽤用,能準確地反映物體的運動性質。
![Page 59: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/59.jpg)
Grove - 3-Axis Digital Accelerometer
• 感測器本⾝身會回傳 0~63 的結果,我們可以透過此結果依表轉換成 G 值(1g=m/s^2)或者⾓角度(不建議使⽤用)。
• 數據解析對照表如下:
![Page 60: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/60.jpg)
Grove - 3-Axis Digital Accelerometer pinout 接法
sensor pin mbed pin
1 - DIO SCL
2 - CLK SDA
3 - Vcc Vout - 3.3V Vout - 3.3V
4 - GND GND GND
![Page 61: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/61.jpg)
使⽤用MMA7660FC Library,引⼊入MMA7660FC.h 標頭檔,來取得三軸加速器的數值,透過G 值對照表轉換成G 值。
#include "mbed.h" #include "MMA7660FC.h" #define ADDR_MMA7660 0x98 // I2C SLAVE ADDR MMA7660FC
MMA7660FC Acc(p28, p27, ADDR_MMA7660); //sda、cl、Addr,更換接⾓角時請務必更改此處 Serial pc(USBTX, USBRX);
// G 值對照表 float G_VALUE[64] = {0, 0.047, 0.094, 0.141, 0.188, 0.234, 0.281, 0.328, 0.375, 0.422, 0.469, 0.516, 0.563, 0.609, 0.656, 0.703, 0.750, 0.797, 0.844, 0.891, 0.938, 0.984, 1.031, 1.078, 1.125, 1.172, 1.219, 1.266, 1.313, 1.359, 1.406, 1.453, -1.500, -1.453, -1.406, -1.359, -1.313, -1.266, -1.219, -1.172, -1.125, -1.078, -1.031, -0.984, -0.938, -0.891, -0.844, -0.797, -0.750, -0.703, -0.656, -0.609, -0.563, -0.516, -0.469, -0.422, -0.375, -0.328, -0.281, -0.234, -0.188, -0.141, -0.094, -0.047};
int main() { Acc.init(); // Initialization pc.printf("Value reg 0x06: %#x\n", Acc.read_reg(0x06)); // Test the correct value of the register 0x06 pc.printf("Value reg 0x08: %#x\n", Acc.read_reg(0x08)); // Test the correct value of the register 0x08 pc.printf("Value reg 0x07: %#x\n\r", Acc.read_reg(0x07)); // Test the correct value of the register 0x07
while(1) { float x=0, y=0, z=0; float ax=0, ay=0, az=0;
Acc.read_Tilt(&x, &y, &z); // Read the acceleration wait_ms(100);
//換算成 G值 ax = G_VALUE[Acc.read_x()]; ay = G_VALUE[Acc.read_y()]; az = G_VALUE[Acc.read_z()]; wait(0.2); } }
Grove - 3-Axis Digital Accelerometer 範例:
![Page 62: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/62.jpg)
mbed Networking 程式實作
![Page 63: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/63.jpg)
Web of Thing
63
• 對 WoT 來說,最重要的觀念,就是以 URL 來表⽰示 IoT 裝置;為 IoT 加⼊入 URL 的觀念,就是 Google 提出的 Physical Web 計畫。所以說,WoT 與 Physical Web 是⼀一體兩⾯面的觀念,都是 IoT 正進⼊入的新發展階段。
![Page 64: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/64.jpg)
準備⼯工作
• 使⽤用 Seeed Studio 設計與⽣生產的 Arch Pro 開發板
• LPC1768 本⾝身沒有 PHY 功能
• 使⽤用 LPC1768 + mbed shield ⼦子板
• 使⽤用 LPC1768 + wifi shield
64
![Page 65: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/65.jpg)
連接有線網路-⾃自定 IP 與 DHCP
使⽤用 EthernetInterface
Library
先匯⼊入 ARM mbed 提供的 EthernetInterface Library 後, 引⼊入 EthernetInterface.h 標頭檔, 即可設定 Static IP 位址或使⽤用 DHCP 進⾏行網路組態。
65
![Page 66: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/66.jpg)
連接有線網路-⾃自定 IP 與 DHCP
#include "mbed.h" #include "EthernetInterface.h"
int main(void) { eth = new EthernetInterface;
// eth->init(); Use DHCP eth->init("192.168.21.81", "255.255.255.0", "192.168.21.2" );
eth->connect() ;
printf("IP Address is %s\r\n", eth->getIPAddress()); }
66
![Page 67: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/67.jpg)
連接無線網路熱點- ⾃自定 IP 與 DHCP使⽤用
WiflyInterface Library
先匯⼊入 ARM mbed 提供的 WiflyInterface Library 後, 引⼊入 WiflyInterface.h 標頭檔,即可設定 Static IP 位址或使⽤用 DHCP 進⾏行網路組態。
67
![Page 68: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/68.jpg)
連接無線網路熱點-⾃自定 IP 與 DHCP
#include "mbed.h" #include "WiflyInterface.h"
WiflyInterface wifly(p13, p14, p19, p26, "SSID", "password", WPA); int main(void) {
wifly.init(); // Use DHCP wifly.init("192.168.21.45", "255.255.255.0", "192.168.21.2");
while (!wifly.connect());
printf("IP Address is %s\r\n", eth->getIPAddress()); }
68
![Page 69: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/69.jpg)
Httpd 與 REST API 程式實作
![Page 70: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/70.jpg)
mbed 遇上 REST API
70
• 要讓 ARM mbed 裝置具備 REST API 能⼒力,最重要的就是練習撰寫 httpd 功能。ARM mbed 提供 httpd 程式庫,能在裝置上⽣生成⼀一個輕量級的 Web Server。
• 稍後將介紹 httpd 的使⽤用,並將 Dust Sensor 的即時數據封裝為 REST API。⽤用⼾戶可透過瀏覽器,即時取得 Dust Sensor 的數值。Dust Sensor 是空氣微粒的感測器,並不包含在 Grove Starter Kit for mbed 套件裡,需額外取得。
![Page 71: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/71.jpg)
準備⼯工作
71
需準備材料如下: 1. ARM mbed LPC1768
開發版 2. mbed shield 3. 紅⾊色跳線 x 1,⿊黑⾊色跳線
x 1,⿈黃⾊色跳線 x 1 4. Grove - Dust Sensor x 1
![Page 72: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/72.jpg)
Grove - Dust Sensor
• 當空氣中的顆粒物進⼊入 Dust sensor 時,顆粒物本⾝身的⼤大⼩小、單位時間內進⼊入的數量會影響感測器的電壓狀態,造成⼀一⼩小段時間維持在低電壓。所以在我們指定的某⼀一段測量時間裡,藉由每⼀一次低電壓脈衝佔⽤用的時間,可以計算出空氣中顆粒物的濃度,檢測出空氣品質。此感測器可檢測出直徑 > 1μm 的顆粒。
72
![Page 73: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/73.jpg)
空氣品質偵測元件 pinout 接法
sensor pin mbed pin
1 - SIG P8 - InterruptIn
2 - Vcc Vout - 3.3V Vout - 3.3V
3 - GND GND GND
73
![Page 74: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/74.jpg)
Dust Sensor 硬件原型製作• 步驟如下:
• 將 ARM mbed LPC1768 開發版插在 mbed shield(須依照 mbed shield 上的圖⽰示⽅方向)。
• 將⿈黃⾊色跳線之⼀一端接在 Grove - Dust Sensor 的⿈黃⾊色⺟母頭端,⿈黃⾊色跳線另⼀一端接在 mbed shield P5~P30 DigitalIn 任⼀一腳位上,除了 P19、P20 腳位。
• 將紅⾊色跳線之⼀一端接在 Grove - Dust Sensor 的紅⾊色⺟母頭端,紅⾊色跳線另⼀一端接在 mbed shield 5V 腳位上。
• 將⿊黑⾊色跳線之⼀一端接在 Grove - Dust Sensor 的⿊黑⾊色⺟母頭端,⿊黑⾊色跳線另⼀一端接在 mbed shield GND 腳位上。
74
![Page 75: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/75.jpg)
空氣品質偵測器的原型75
![Page 76: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/76.jpg)
#include "mbed.h" Serial pc(USBTX, USBRX); InterruptIn probe(p8); DigitalOut led(LED1);
Timer timer; Ticker ticker;
uint32_t low_time = 0;
void down(); void up();
void down() { probe.rise(&up); // 當電壓發⽣生由 LOW 狀態轉移到 HIGH 狀態時,呼叫 “up” function timer.start(); // 開始計時 }
void up() { timer.stop(); // 結束計時 probe.fall(&down); // 當電壓發⽣生由 HIGH 狀態轉移到 LOW 狀態時,呼叫 “down” function
low_time += timer.read_us(); // 取得已經歷的時間(毫秒) timer.reset(); // 將計時器歸零 }
int main() { ... probe.fall(&down) // 當電壓發⽣生由 HIGH 狀態轉移到 LOW 狀態時,呼叫 “down” function ticker.attach(tick, 30); // 指定中斷事件觸發時要執⾏行的動作(呼叫 “tick” function),以及特定時間區間(本範例為 30 秒) }
空氣品質偵測元件 範例:
76
![Page 77: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/77.jpg)
REST API 設計• 這裏所設計的空氣品質偵測器,將以 REST API ⽅方式提供 sensor
data。基本觀念:
• 需移植⼀一個 httpd ⾄至 LPC1768
• 需要製作⼀一個 frontend
• Frontend 以 data pull ⽅方式調⽤用空氣品質偵測器的 REST API
• 當 REST API 被調⽤用時,再即時讀取空氣指數,並以 JSON 格式返回數據
• 這個設計當有幾個技術議題,後⾯面將會加強:
• Sensor device 應以 data push ⽅方式,即時推送 sensor data
77
![Page 78: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/78.jpg)
取得空氣指數
• REST API 定義:
• GET /1/mbed/lpc1768/sensor/dust/sen12291p
78
![Page 79: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/79.jpg)
重要的資訊交換格式:JSON
• 傳統 Backend 的做法,會提供 Client 端⼀一份 HTML5 的⽚片斷⽂文件,⽽而不是格式化後的資料(Formatted),這是⼀一個缺點。
• 如果 Server 回傳的是格式化後的資料,Client 端就可以更有效率地利⽤用這些資料。試想,如果 Google 傳回的搜尋結果是⼀一堆 HTML5,那我們不就還要再去 Parse 這份⽂文件,才能取出真正的結果,然後才能再次利⽤用這些資料(例如:再儲存為 CVS 格式)。
• 為了解決這個問題,必須要有⼀一個標準,不能⼤大家都⽤用⾃自已的 HTML5 ⽂文件,或是⾃自定的格式。軟體⼯工程師設計了⼀一些標準。⼀一開始提出的做法,是制定標準的 XML 標籤,這樣⼤大家就可以統⼀一⽂文件格式了。但是還有⼀一個問題,就是「資料量太⼤大」。
79
![Page 80: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/80.jpg)
傳統 XML 表⽰示• 試想,Dust Sensor 要回傳⼆二筆資料,這⼆二筆資料都是低電
壓脈衝佔⽤用的時間:
• 0.12345
• 0.2468
• 然後⽤用XML來表⽰示,就變成:
80
<DustSensor> <Item>0.12345</Item> <Item>0.2468</Item> </DustSensor>
![Page 81: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/81.jpg)
JSON 表⽰示• 這種把資料打腫了才回傳的做法,⼤大⼤大浪費網路頻寬。上⾯面只
是⼀一個簡單的例⼦子,現實環境,要回傳的資料可能是⼀一個 10MB 的 XML ⽂文件,結果原始資料可能只有 1MB。
• 要解決這個問題,就要有⼀一個輕量級(Light-weight)的資料交換格式,這項技術就是 JSON。所以,JSON 是 Client/Server 交換資料的⼀一種格式,⼀一種 Light-weight data exchange 技術。
• JSON 回傳資料格式:
81
{ success: true data: {
} }
![Page 82: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/82.jpg)
Lightweight Web Server
• 匯⼊入 EthernetInterface Library,引⼊入 EthernetInterface.h 標頭檔,來設定網路組態
• 匯⼊入 HTTPD Library,引⼊入 HTTPD.h 標頭檔,來實做 Http Web Server
82
![Page 83: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/83.jpg)
#include "mbed.h" #include "EthernetInterface.h" #include "HTTPD.h"
EthernetInterface *eth; HTTPD *httpd;
Serial pc(USBTX, USBRX); InterruptIn probe(p8); LocalFileSystem local("local"); DigitalOut led1(LED1), led2(LED2);
uint32_t low_time = 0;
void callback_api(int id) { int i, n; char low_time_buf[256]; char buf[256]; sprintf( low_time_buf, "%f", low_time / (30.0 * 1000000)); strcpy(buf, "{"); strcat(buf, "success: true,"); strcat(buf, "data: {"); strcat(buf, "lowpulseoccupancytime: "); strcat(buf, low_time_buf); strcat(buf, "}"); strcat(buf, "}");
httpd->send(id, buf, i, "Content-Type: text/plain\r\n"); }
撰寫程式碼
83
int main() { pc.baud(115200); pc.printf("Dust Sensor test\r\n"); probe.fall(&down); ticker.attach(tick, 30); printf("HTTP Server...\r\n");
eth = new EthernetInterface; eth->init("192.168.21.81", "255.255.255.0", "192.168.21.2" );
eth->connect();
printf("IP Address is %s\r\n", eth->getIPAddress()); httpd = new HTTPD; httpd->attach("/1/mbed/lpc1768/sensor/dust/sen12291p", &callback_api); httpd->attach("/", "/local/"); httpd->start(80); printf("httpd ready\r\n"); led2 = 1; }
![Page 84: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/84.jpg)
84
![Page 85: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/85.jpg)
Websocket 數據推送實作
![Page 86: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/86.jpg)
Websocket• WebSocket 是 HTML5 裡的⼀一個標準,它是⼀一種 TCP 的
連線技術。在協定部份,則是基於 HTTP(Over HTTP)協定。因此,WebSocket 標準定義了⼀一些 HTTP Headers 來進⾏行 Client/Server 的通訊。
• Websocket 能讓 client 與 server 能建⽴立永續性的 TCP 連線。簡單來說,有了 Websocket,就能實作出 real-time data streaming 機制。
• 以下將說明 IoT 第 4 階段,也就是 WoT 最重要的⼀一個觀念:使⽤用 Websocket channel server 來封裝 IoT objects,讓 IoT devices 成為抽象化的 Websocket server
86
![Page 87: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/87.jpg)
關於 IoT 與 Websocket• ⼀一般來說,Websocket 的使⽤用案例(use case)是 server
push(data push)機制,也就是說,ARM mbed 物件本⾝身,應該是扮演 Websocket server 的⾓角⾊色。但現實層⾯面,讓 IoT 扮演 Websocket server 的話,會有幾個技術問題:
• ARM mbed 要管理 client 端的 connections
• 需要更多的內存來維護 client connections
• 需要實作 Data push 的演算法,例如:round-robin
• 要考量 error handling 與 exception handling
87
![Page 88: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/88.jpg)
Websocket 情境• 最簡單的 scenario 設計如下:
• 佈署專⽤用的 Websocket channel server
• ARM mbed 將 data 即時推送(push)到 Websocket channel server
• ⽤用⼾戶(user)與 Websocket channel server 建⽴立 Websocket connection
• ⽤用⼾戶接收 Websocket channel server 的即時資料(經由 server push)
• 抽象上來看,ARM mbed 仍然是 server 端,⽽而不是 client 端;真正的 client 端是⽤用⼾戶。
88
![Page 89: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/89.jpg)
認識 Websocket channel service
• Websocket channel server 扮演封裝 IoT 物件的⾓角⾊色,對 Websocket server 來說,只要能定義好「channel」的結構,就能封裝數以萬計、千萬計的 IoT 物件。「抽象上來看,ARM mbed 仍然是 server 端」,就是這樣的觀念。
• ARM mbed 官⽅方就提供了 Websocket channel server 的服務:
• http://sockets.mbed.org
89
![Page 90: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/90.jpg)
ARM mbed 與 Websocket Client
• 了解上述觀念後,技術的實作就能區隔為⼆二個部份:
• Websocket channel server 服務,後續範例將使⽤用 sockets.mbed.org
• ARM mbed 的 Websocket client 實作
90
![Page 91: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/91.jpg)
使⽤用 Websocket Library ,引⼊入 Websocket.h 標頭檔後,建⽴立 Websocket 連線後傳送 "WebSocket Hello World over Ethernet" ⾄至 Websocket channel server 。
#include "mbed.h" #include "EthernetInterface.h" #include "Websocket.h"
int main() { char recv[1024];
EthernetInterface eth; //eth.init(); // Use DHCP eth.init("192.168.21.33", "255.255.255.0", "192.168.21.2"); // Use static ip eth.connect(); printf("IP Address is %s\n\r", eth.getIPAddress());
Websocket ws("ws://sockets.mbed.org/ws/mbedschool/viewer");
ws.connect();
while (1) { wait(1.0); ws.send("WebSocket Hello World over Ethernet"); wait(1.0); } }
Data Push ARM mbed 的 Websocket client 實作
91
![Page 92: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/92.jpg)
Data Push Websocket channel server
92
![Page 93: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/93.jpg)
Dust Sensor 與 WebSocket Client
93
#include "mbed.h" #include "EthernetInterface.h" #include "Websocket.h"
EthernetInterface *eth; InterruptIn probe(p8);
Timer timer; Ticker ticker; DigitalOut led1(LED1); Websocket ws("ws://wot.city/object/dust/send"); uint32_t low_time = 0;
void down(); void up();
void tick() { char low_time_buf[256]; char buf[256]; sprintf( low_time_buf, "%f", low_time / (30.0 * 1000000)); strcpy(buf, "{"); strcat(buf, "\"lowpulseoccupancytime\":"); strcat(buf, low_time_buf); strcat(buf, "}"); ws.send(buf); low_time = 0;
}
void down() { probe.rise(&up); led1 = 0; timer.start(); }
void up() { led1 = 1; timer.stop(); probe.fall(&down);
low_time += timer.read_us(); timer.reset(); } int main() {
probe.fall(&down); ticker.attach(tick, 30);
eth = new EthernetInterface; eth->init(); //DHCP
if (eth->connect()) return -1;
}
![Page 95: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/95.jpg)
AutomationJS
• 前端使⽤用 Backbone.js 實做 Virtual DOM。
• 下圖為 Dust Sensor 及 Temperature Sensor 透過 Websocket 傳送 Sensor 數值到 Websocket channel server ,再由 Frontend 接收 Websocket channel server 的即時資料(經由 server push)後,顯⽰示在網⾴頁上。
95
![Page 96: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/96.jpg)
• Virtual DOM 讓下圖⼆二個 Sensor 資料呈現區塊都是獨⽴立的,當其中⼀一個 Sensor 資料有變動時,只會更新單⼀一區塊,⽽而不是更新整個畫⾯面。
96
![Page 97: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/97.jpg)
Demo 家⽤用氣象站
![Page 98: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/98.jpg)
AutomationJS
98
![Page 99: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/99.jpg)
section .container(style='margin-top: 30px; margin-bottom: 80px;') section.spot-box .row.text-center .col-md-3.text-right .col-md-12#demo-spot
section .container(style='width: 80%;') .or-spacer .mask | span i 智慧家庭 section .container(style='margin-top: 20px; margin-bottom: 80px;') section.spot-box .row.text-center#test-up
script(type='text/template', id='tmpl-dust') .col-md-4 a.text-center.btn-mbed-spot-news img.img-responsive(src!='/images/gallery/timeline-1.jpg') .info h2 空氣污染 h2 <%= lowpulseoccupancytime %> script(type='text/template', id='tmpl-spot-news') .col-md-3 a.text-center.btn-spot-news(href!='#', data-cid!='<%= cid %>') img.img-responsive(src!='<%= img %>') .info h2 <%= city %> / <%= temp %>°C
AutomationJS Jade(畫⾯面)
99
![Page 100: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/100.jpg)
Model:從 API (api.openweathermap.org)取得北京溫度
app.BeijingNews = Backbone.Model.extend({ url: function() { return 'http://api.openweathermap.org/data/2.5/weather?q=Beijing,cn' ; }, defaults: { success: false, errors: [], errfor: {},
city: '', country: '', img: '', temp: 0 }, // AutomationJS plugins parseJSON: function(response) { // parse response var f = Math.round((response.main.temp - 273.15) * 1.8 + 32) , c = Math.round((response.main.temp - 273.15));
this.set('temp', c); } });
AutomationJS Backbone-Model
100
![Page 101: IoT 與 WoT 物聯網裝置實作:使用 Arch Pro 與 mbed](https://reader031.fdocument.pub/reader031/viewer/2022012313/55a7309c1a28ab76028b456f/html5/thumbnails/101.jpg)
物聯新創團隊共同製作 Full Stack Startup
Mokoversity
指導單位 : 新創團隊 : 新創團隊 : Oranwind Renew.City