2016年12月9日 星期五

Wifi 三色小夜燈 ( A Web-Controlled RGB LED )

本文為 mBlock 單元十八:藍牙小夜燈 與 Arduino Nano 藍牙小夜燈 的延伸,將板子換成NodeMCU,手機程式部分則是採用 JavaScript + HTML + CSS 搭配 PhoneGap設計, 並透過
Adobe PhoneGap Build 產生可以透過Wifi來控制三色LED的手機App

硬體材料:
1. NodeMCU 板子 x 1
2. 麵包板 x 1
3. RGB LED x 1
4. 220歐姆電阻 x 3
5. 公對母杜邦線 x 4

硬體電路:

綠色LED --> NodeMCU D6
藍色LED --> NodeMCU D7
紅色LED --> NodeMCU D8

完成圖:


Arduino程式:
程式部分須注意D6D7D8 的 GPIO編號為12(綠色LED)13(藍色LED)15(紅色LED),程式碼是用GPIO的編號來對應,請參考下圖做對照。
ESP8266 可以當SoftAP或Host兩種模式,本文為使用Host的方式。
SoftAP程式碼下載處:https://goo.gl/kwt81a
Host程式碼下載處:https://goo.gl/QUjAX7

WebApp程式:
此部分筆者是使用PC端 PhoneGap Desktop app與手機端 PhoneGap Developer app兩者結合使用而完成的。

PC端部分是建立新專案,

選擇空白專案(Blank)

建議讀者可以直接使用筆者所提供的壓縮檔:https://goo.gl/F7S6xy,用匯入的方式(Open existing PhoneGap Project)來使用。

示範影片:
iPhone手機控制

Android手機控制


參考資料
[1] http://www.instructables.com/id/Esp8266Websockets-RGB-LED-controller/
[2] https://developer.mozilla.org/zh-TW/docs/WebSockets/Writing_WebSocket_client_applications
[3] http://phonegap.com/
[4] http://danielstern.ca/range.css/?ref=css-tricks#/
[5] http://docs.phonegap.com/getting-started/1-install-phonegap/desktop/
[6] http://docs.phonegap.com/getting-started/2-install-mobile-app/