Google map API pythongoogle map api多點標記google map api python教學google map api地址轉經緯度html聊天室

網頁操控智慧插座 - Webduino 基礎教學

文章推薦指數： 80 %
投票人數：10人

JS 的原始碼可以參考：. https://github.com/webduinoio/webduino-js · https://github.com/webduinoio/webduino-blockly. 網頁操控智慧插座 組裝完成插座主體之後，就要透過網頁操控插座了，操控之前，先參考開發板初始化設定步驟的相關文章，針對開發板進行初始化，並確保有順利連上Wi-Fi才能順利操控，開發板如果上線，可以在上線檢查網頁裡看到顯示OK。

上線檢查網頁：https://webduino.io/device.html 或是打開Webduino提供的線上編輯工具(https://blockly.webduino.io)測試，工具的右上角有個閃電的按鈕，點選後會有輸入欄位，輸入開發板的ID，如果開發板成功連上Wi-Fi，就會變成綠色的閃電。

準備就緒之後，點選WebduinoBlockly的右上角選單打開範例清單，選擇第一個範例「LED」，就可以帶入第一組範例程式。

此時會打開一個內嵌的網頁，預設會跑出「點擊燈泡」的網頁。

點選右上角的執行，用滑鼠點擊網頁中的燈泡，就可以控制實際的電燈了。

(到這一步其實就已經在用網頁控制真正的電燈泡了) Webduino程式用法 剛剛的做法是針對程式比較不熟悉的人所設計的，也就是透過「積木組裝」的方式來撰寫程式邏輯，接著來看一下對應的網頁程式要怎麼運作，首先我們點選右上方的程式編輯器，就會打開一個以jsbin為基底的編輯頁面，從這邊可以看到預設引入了幾支JavaScript，撇除JQuery、Firebase和runtime這三個第三方JavaScript，最主要就是要引入「webduino-min.js」還有「webduino-blockly.js」這兩個JavaScript，這樣我們才有操控開發板以及燈泡的API可以使用。

JS的原始碼可以參考： https://github.com/webduinoio/webduino-js https://github.com/webduinoio/webduino-blockly

Webduino 首先看到開發板的部分，透過boardReady判斷裝置是否上線，當上線之後就會執行內容的function。

boardReady('裝置的device名稱',function(board){ board.systemReset();//加入這行，裝置在第一次連線的時候，所有腳位輸出預設低電位(0、off) board.samplingInterval=250;//類比腳位取樣時間 }); 因為裝置預設一次只能夠有一個人操控(後面上線的會把前面上線的踢掉)，為了避免這種狀況，必須要修改裝置的屬性，把boardReady的第一個變數改成物件的形式{device:'裝置的device名稱',multi:true}，這段multi:true就是可以讓多人同時操控的關鍵屬性。

boardReady({device:'裝置的device名稱',multi:true},function(board){ board.systemReset(); board.samplingInterval=250; }); 再來看到控制「繼電器」的部分，因為訊號對於繼電器來說不是1(高電位、on)就是0(低電位、off)，所以可以直接使用LED的控制方法，LED的控制方法有以下幾種： getLed(board,pin)設定LED為哪塊板子的幾號腳位。

.on(callback) 設定輸出腳位為高電位(1、on)，如果有callback的話，在執行.on()之後就會執行callback的函式。

.off(callback)設定輸出腳位為低電位(0、off)，如果有callback的話，在執行.off()之後就會執行callback的函式。

.blink(time,callback) 設定LED閃爍(高電位低電位切換，time是毫秒)，如果有callback的話，在每次閃爍之後就會執行callback的函式。

.intensity 設定「低電位」輸出強度。

(0~1之間的浮點數，例如：.intensity=0.5) .toggle() 設定狀態切換，如果上一次是高電位，下一次就會是低電位。

網頁控制 簡單來說，在網頁裡面放一個按鈕，點選按鈕，燈泡就會發亮，再點選一次燈泡就會熄滅，程式碼可以這樣寫： 完整程式碼：http://bin.webduino.io/tagum/1/edit?html,js,output $(function(){ varled, a=1, btn=$('#btn'); boardReady({device:'你的裝置名稱',multi:true},function(board){ board.systemReset(); board.samplingInterval=250; led=getLed(board,10); btn.on('click',function(){ a=a*-1; if(a>0){ led.on(); }else{ led.off(); } }); }); }); 小結 以上就是透過基本的網頁來操控插座上的電器，其實原理非常的簡單，只要把實際的電器「網頁變數化」，就可以像一般網頁操作變數一樣的來操作了。

聯絡我們 如果對於Webduino產品有興趣，歡迎透過下列方式購買： 個人線上購買：https://store.webduino.io/(支援信用卡、超商取貨付款) 企業＆學校採購：來信[email protected]或來電07-3388511。

如果對於這篇教學有任何問題或建議，歡迎透過下列方式聯繫我們： Email：[email protected](如對於產品有使用上的問題，建議透過Email附上照片或影片聯繫) Facebook粉絲團：https://www.facebook.com/webduino/ Facebook技術討論社團：https://www.facebook.com/groups/webduino/ Webduino基礎教學 Webduino開發板 馬克一號(介紹) 馬克一號(初始化設定) WebduinoFly(介紹) WebduinoFly(初始化設定) WebduinoSmart(介紹) WebduinoSmart(初始化設定) 開發板擴充設定 Arduino韌體下載與燒錄 使用WebSocket操控 WebduinoBlockly 認識WebduinoBlockly WebduinoBlockly基本操作 WebduinoBlockly特殊功能 連動多塊開發板 腳位偵測設定 發光元件 LED 三色LED LED點矩陣 輸入輸出 繼電器 蜂鳴器 按鈕開關 震動開關 搖桿 紅外線發射接收 環境偵測 超音波偵測 溫濕度偵測 人體紅外線偵測 聲音偵測 光敏電阻 可變電阻 土壤濕度偵測 三軸加速度計 無線感應 RFID 玩具及馬達 伺服馬達 Webduino綜合應用 元件應用 LED(兩顆交互閃爍) LED(霹靂燈) LED(語音聲控) LED(人臉追蹤) LED(Google表單操控) 三色LED(調色盤) 蜂鳴器(多人協奏) 蜂鳴器(會說話的鬧鐘) 傳感器應用 超音波(改變圖片大小) 超音波(控制LED) 超音波(控制三色LED) 溫濕度(Firebase紀錄) RFID(控制Youtube) 可變電阻(改變Youtube音量) 聲音偵測(吹點矩陣蠟燭) 玩具改造 Smart自走車(組裝步驟) Smart自走車(網頁遙控器操控) Smart自走車(超音波避障) Smart自走車(溫濕度感測車) Smart智慧路燈(組裝步驟) Smart智慧路燈(接線教學) Smart飛天車(組裝步驟) Smart飛天車(接線教學) 馬克一號自走車(鍵盤操控) 馬克一號自走車(行動裝置操控) 馬克一號自走車(循跡功能) WABot機器人(初始化設定) WABot機器人(基礎操控) 百元玩具車大改造 智慧生活 智慧植栽(水泵) 智慧插座(組裝與操控) 智慧追蹤(伺服馬達+攝影機) Webduino雲端平台 基本介紹 註冊與登入 Blockly程式積木 Device裝置管理(裝置認證) Device裝置管理(雲端更新) 兌換券(領取與添加新功能) 發光元件 LCD螢幕 七段顯示器 輸入輸出 MP3播放器 環境偵測 PM2.5細懸浮微粒偵測 顏色感測器 電子羅盤 光度計 溫濕度計 資料庫 Google試算表(設定) Google試算表(儲存) Google試算表(讀取) 綜合應用 記錄PM2.5(Google試算表) 玩具改造 Smart智慧小屋（組裝步驟） Blockly教學 基本功能 變數 流程 文字 數學式 列表 邏輯 迴圈 進階功能 控制台 等待 數值轉換 鍵盤行為 語音聲控 語音朗讀 行動裝置 網頁互動區 文字、點擊、圖片 顏色、按鈕、拉霸 遙控器 Youtube 影像追蹤 創意應用 抽籤並朗讀姓名 大樂透自動選號 隨機組合朗讀語句 語音朗讀逐字稿 小時鐘 語音報時 九九乘法你問我答 BlocklyGames 迷宮 鳥 烏龜 影片 池塘導師 Dr.Smart教學 開發板元件 三色LED 三色LED(色彩輪播) 光敏電阻 光敏電阻(色彩變化) 按鈕開關 按鈕開關(控制顏色) 按鈕開關(控制Youtube) 元件及傳感器 LED 蜂鳴器 震動開關 LED點矩陣 超音波偵測 溫濕度偵測 綜合應用 蜂鳴器(多人協奏) 超音波(倒車雷達) 超音波(控制Youtube) LED點矩陣(顯示距離) LED點矩陣(顯示溫度) 按鈕開關(控制蜂鳴器) 實戰智慧插座 基本操控 組裝智慧插座 網頁操控智慧插座 傳感器應用 超音波偵測距離 光線偵測 人體紅外線偵測 聲音偵測 電視機遙控器 按鈕開關 電流急急棒 土壤濕度偵測 RFID感應 進階應用 語音辨識 人臉、顏色追蹤 手機陀螺儀 聊天室(原理) 聊天室(前後端實作) Google試算表(原理) Google試算表(前後端實作) Google地圖(原理) Google地圖(前後端實作) Youtube互動 Opendata實作 Node-Red(基礎操作) Node-Red(Twitter) Node-Red(E-mail) 日幣匯率(Node-Red爬蟲) 日幣匯率(Node-js爬蟲) 常見問題 Webduino相關 關於Webduino 購買Webduino產品 技術支援與合作 Webduino開發板 關於Webduino開發板 連線相關＆初始化設定問題 Web:Bit相關問題 WebduinoSmart相關問題 其它問題

請為這篇文章評分？

延伸文章資訊