Arduino網路遠端遙控家電開關(一)

本文旨在補充《超圖解Arduino互動設計入門》第十六章「網路家電控制」單元,增加另一個網頁控制範例。

下圖是本單元的預期成果,使用者透過點選頁面上的文字,即可控制遠端家電的開關:

在說明Arduino端的網路和控制程式碼之前,先在電腦上撰寫此網頁所需要的HTML碼:

以上的HTML將在瀏覽器呈現如下的結果:

每個項目清單元素都包含一個超連結,用來連結到Arduino的sw程式,並傳遞控制腳位的參數,例如:

設定手機瀏覽器的viewport(視界)參數

iOS和Android裝置的瀏覽器預設會以980和800像素的虛擬顯示寬(viewport,視界)來呈現網頁,假設Android手機螢幕實際是480像素寬,瀏覽器用800像素寬來呈現,網頁將整個被縮小顯示:

為了讓iOS與Android裝置的瀏覽器,以實際的螢幕解析度來呈現網頁,請在網頁的檔頭區加入底下的<meta>標籤設定:

建立網頁的CSS樣式表

HTML的用途是制定網頁的結構和內文,頁面的外觀樣式則是由CSS決定。

為了方便在小螢幕上觀看並點選超連結,我們將使用CSS樣式調整項目清單文字的大小,並加大字行的高度(擴大字行之間的間距),以及其他美化樣式。

在檔頭區插入底下的CSS樣式:

最後呈現的外觀如下:

讀者可按此連結下載本單元的網頁原始碼(ZIP格式壓縮)。

延伸閱讀

17 thoughts on “Arduino網路遠端遙控家電開關(一)

  1. 老師你好

    請問這樣如何運用在Arduino上呢?
    有買你的書 書上是使用選擇開或關 再點送出
    而我想用Button方式應該要如何做呢

    1. 剛剛看了一下你的程式,我不知道你有沒有讀懂原作者的程式碼以及了解JavaScript。你不需要重複建立多個不同名稱,但是功能類似的函式來處理AJAX。只要加入參數即可,例如,假設網頁上的按鈕id分別是btn1, btn2和btn3,用底下的敘述呼叫send2arduino()函式:

      send2arduino(“btn2″);

      底下的函式將送出”?onbtn2″或者”?offbtn2″給Arduino:

      然後,你的Arduino程式再修改成判斷接收值”?onbtn2″, “?onbtn3”,… 做出相應的控制。

      have fun!
      jeffrey

  2. 感謝老師的回覆 ^_^

    對於這JavaScript完全不是很懂= =”,我也覺得我寫很冗長,有試著去簡化這個程式 努力中…

    雖然看老師寫的程式,研究了…..一下 還是不會運用><' 真的太糟糕了

  3. 老師你好:
    請問老師我設的網頁語法如下:
    “”
    點下按鈕 網址顯示:
    192.168.xx.xx/sw?0=&start.x=42&start.y=21&start=i

    為什麼會多了”start.x=42&start.y=21&” 亂數
    而不是顯示 192.168.xx.xx/sw?0=&start=i

    用button可以解決上面的問題,不過圖片是顯示在button上,感覺多了一個框框給他包住,不能單獨只有圖片嗎?

    1. 你可以透過JavaScript來發送表單內容,如此就不一定要用按鈕。請搜尋JavaScript submit form之類的關鍵字。

      thanks,
      jeffrey

  4. 老師你好:
    我是初學者近期想研究網頁控制Arduino,
    想請問一下Arduino網路遠端遙控家電需要哪些硬體設備呢?

    1. hi EIEN:

      最基本的實驗只需要Arduino UNO控制板,加上一片採用W5100晶片的乙太網路擴充介面卡,這樣就能讓Arduino連上家裡的有線網路。

      實驗成功之後,你再視需求組裝或添購相關模組。例如,用繼電器模組控制家電開、關(要留意繼電器的耐電流量,不要嘗試控制超過規範值以上的電器),或者用溫濕度感測器模組監控遠端的溫濕度變化。

      have fun!
      jeffrey

  5. 老師您好,我希望可以把這些程式運用在我學校的專題上,想要事先徵求您的同意,請問我如果要加上電壓(瓦數消耗)監控Arduino可不可以實現?需要用到甚麼樣的元件?或是延伸其他功能,希望老師能指點。
    謝謝

    1. hi tony:

      可以。監測消耗的電流量,可將「鉗型交流電感測器(CT Sensor)」裝在連接設備的電源線上,搜尋關鍵字”arduino monitor power consumption”,可找到許多相關範例。

      thanks,
      jeffrey

  6. 老師你好 可以跟你請問一下~要如何用 WEB端 幫 ESP8266 去設定帳號密碼呢!?(比方說 今天到不同環境 我不用再開程式碼手動修改 這樣~)

  7. 老師您好:
    以下是我的程式碼我想請教一下回首頁這行超連結該加在哪?(我想在家庭自動化那個網頁裏顯示)
    #define WEBDUINO_FAIL_MESSAGE “”
    #include
    #include
    #include
    static byte mac[] = {0xBC,0xAE,0xC5,0xAF,0x44,0x8E};
    IPAddress ip(10,0,1,7);
    IPAddress subnet(255,255,255,0);
    IPAddress gateway(10,0,1,1);
    WebServer webserver(“”,80);
    P(homePage) =””
    “”
    “Arduino家庭自動化”
    “”
    “okok”
    “”;
    P(faqPage) = “”
    “”
    “FAQ微網站”
    “”
    “FAQ網頁”
    “”;

    void defaultCmd(WebServer &server, WebServer::ConnectionType type,
    char *, bool)
    {
    server.httpSuccess();
    if(type != WebServer::HEAD)
    {
    server.printP(homePage);
    }
    }
    void faqCmd(WebServer &server, WebServer::ConnectionType type,
    char *, bool)
    {
    server.httpSuccess();
    if(type != WebServer::HEAD)
    {
    server.printP(faqPage);
    }
    }
    void setup() {
    Ethernet.begin(mac,ip,gateway,subnet);

    webserver.setDefaultCommand(&defaultCmd);
    webserver.addCommand(“faq.html”, &faqCmd);
    webserver.begin();
    }

    void loop() {
    webserver.processConnection();

    }

    1. hi jacky:

      以動手做16-4的遠端燈光開關控制程式為例,該Arduino網站提供兩個頁面,當使用者在表單頁面輸入資料,按下「送出」鈕,網頁將切換到回應表單處理結果頁,如果要加上「回首頁」的連結,就要加在第二頁。

      它的程式位於16-30頁,你可以把「回首頁」的敘述,加在顯示「燈光已經打開或關閉」的訊息後面,也就是藍色底的條件敘述後面:

      thanks,
      jeffrey

  8. 你好 我想用ARDUINO透過繼電器控制12V門鎖 請問該如何設計
    像是接一個按鈕然後按一下門就開 再按一下門就鎖上 該如何去設計

    1. 你要了解如何接按鈕(開關)、消除按鈕的彈跳的訊號、如何用變數儲存開關的狀態、如何透過電晶體驅動繼電器(或使用現成的模組)、如何輸出訊號控制繼電器,這些內容書本都有提到。

      thanks,
      jeffrey

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *