按鈕開關- Webduino 實戰智慧插座教學

知道原理之後，這邊要來玩點比較有Wi-Fi 控制的應用：「兩塊裝置隔空控制」。

接線圖如下，一塊裝置接插座，另外一塊裝置接按鈕開關. 智慧插座與按鈕開關接線圖. 按鈕開關 「開關」是每天的日常生活中都會接觸到的零件，而「按下開關就開燈」也是每天都會發生的事情，所以這篇教學的內容要描述的絕對不會只有這樣，而是更進一步是透過Wi-Fi來開關燈，甚至觸發網頁裡的事件。

認識開關 首先來認識一下開關，開關在一個電路裡扮演著控制「通路」與「斷路」的重要角色。

如果加入「訊號」，開關就可以控制訊號的「高電位」或是「低電位」了，但有趣的是電路裡面必須要安插一個「電阻」，電阻的作用除了保護電路不被燒毀，更具備了「上拉」或是「下拉」的功能，如果接GND的一側用電阻連接，稱作下拉電阻，如果接在正電的一側稱之上拉電阻，當然兩者傳送的訊號就不同，如果我們的開關是使用下拉電阻，在按下開關的時候傳送高電位訊號，反之就是在放開開關的時候，傳送高電位訊號。

參考：維基百科上拉電阻 如果沒有學過任何的電子學，可能不知道電阻是什麼，要談到電阻就必須要先提到「歐姆定律」，歐姆定律就是「電壓=電流x電阻」。

如果今天一個電路裡沒有電阻，在固定電壓下，相對的電流就會趨近於無限大，進而導致電路某個部份燒壞，這也是為什麼使用開關必須要用電阻的原因，因為在按下開關的剎那，如果沒有電阻，就會發生短路的狀況。

下面這支影片，如果直接把口香糖的錫箔紙接在電池的兩端，立馬就燒起來。

接線之前先認識一下按鈕開關，按鈕開關有四支腳，兩支兩支連通，按下開關的當下四支腳互通。

透過麵包板串接按鈕開關，按鈕開關的一側接3.3V或VCC，另外一側接訊號線，和訊號線相通的另一支腳接電阻然後連接GND。

完成後，透過WebduinoBlockly(https://blockly.webduino.io)測試，首先打開內嵌的網頁，選擇「顯示文字」，放入開發板的積木，輸入裝置的deviceID，放入按鈕開關的積木，腳位設定為10號腳，再放入當按鈕開關「按下」、「放開」與「長按」的積木，如果做出對應的動作，就透過「顯示文字」顯示文字。

確認開發板上線，點選「執行」，按壓按鈕開關，就會看到文字產生對應的變化。

相關教學：按鈕開關 範例解答(體驗版)：https://goo.gl/1cDKM4 Webduino程式用法 按鈕開關的宣告使用getButton(board,pin)，pin是數位腳，例如接在10號腳就改為10。

button=getButton(board,10); 偵測的方式使用.on(event,callback)，event有三種，pressed表示按下開關，released表示放開開關，longPress則是長按。

button.on("pressed",function(){ }); button.on("released",function(){ }); button.on("longPress",function(){ }); 網頁控制 知道原理之後，這邊要來玩點比較有Wi-Fi控制的應用：「兩塊裝置隔空控制」。

接線圖如下，一塊裝置接插座，另外一塊裝置接按鈕開關 HTML的部分先在自己的網頁內引入「webduino-min.js」還有「webduino-blockly.js」這兩個JavaScript，這樣才有操控開發板以及按鈕開關的API可以使用，在body的區域放入一個h2來顯示一些文字訊息，然後放入兩張燈泡一明一暗的圖片，讓偵測到訊號的時候，網頁上的燈泡也會發生反應。