Arduino WIFI(ESP8266) 入門應用<網頁控制LED>  

ESP8266  

稍早已經介紹過ESP簡單的應用了:

 *教學*Arduino WIFI(ESP8266) 初次上手應用

簡單幾個步驟就能把感測器上傳到Thinkspeak資料庫,方便使用者監視。

因為初作有良好回響,促使我又來寫第二篇應用囉!

這次實驗是教大家如何用 "網 頁 控 制 arduino" !!

 

這次我們要準備的材料有:

--------------------WIFI模組應用材料--------------------

軟體:

Arduino IDE

Realterm(WIN10用終端機) 

硬體:

WIFI數據機 or 手機熱點分享 

Arduino 板子 (Uno、Nano、Mega、Mini、Yun...都可) *1塊

FT232  *1塊

ESP8266  (鮑率9600)*1塊

--------------------------------------------------------------

如果你是從初次上手一路學過來的,實驗方法1跟2都是前置作業,完全一樣,可以直接跳到3開始。

 

實驗方法

1.先用Realterm(終端機)測試ESP8266是否正常。(老話一句 如果正常本次實驗就成功80%了~!)

2.再用Arduino取代Realterm(終端機)與ESP8266溝通,開內建序列監控室窗進行測試。

3.輸入查找IP指令取得IP位址。

4.下載本實驗需要用到的檔案,並燒錄本實驗的code

5.建構網頁,並修改html內碼。

6.總測試

7.完成

 

實驗開始

一.先用Realterm(終端機)測試ESP8266是否正常。

跟初次上手應用那篇完全一樣喔,目的是測試ESP是否工作在9600的鮑率下,如果鮑率不是9600請點以下連結,留言的19樓有解決方法。

*教學*Arduino WIFI(ESP8266) 初次上手應用

 

二.再用Arduino取代Realterm(終端機)與ESP8266溝通,開內建序列監控室窗進行測試。
跟初次上手應用那篇完全一樣喔,目的是測試你Arduino是否能燒錄(?),ESP是否能溝通上,也是個簡單的測試指令方法。

*教學*Arduino WIFI(ESP8266) 初次上手應用

 

三.輸入查找IP指令取得IP位址。

1.網頁控制前提之下要先找到ESP的IP位址,所以要使用到"AT+CIFSR"指令查找,本篇建議就直接用Arduino下指令就好。

 查找IP.jpg

2.如上圖,會有兩個IP位址,請把第二個(如圖172.20.10.8)複製下來,稍後在實驗5會用到。

3.實驗三完成。

 

四.下載本實驗需要用到的檔案,並燒錄本實驗的code

1.下載本實驗的檔案,請整個資料夾一起抓下來。

2.打開"ESP8266_Wifi_Connection_Template.ino",修改第5、6行的SSID、PASS,用你自己的數據機或手機熱點之使用者名稱、密碼。

3.燒錄進Arduino,打開內建序列監控視窗,查看是否連上wifi,並接通port 8888,正確結果如下圖,實驗四完成

測試1.jpg

 

 

五.建構網頁,並修改html內碼。

1.網頁的東西,基本上要學的很多,所以就不一一介紹,直接給已經編寫好的範例,再去修改是最快上手的方式。回到資料夾路徑下,有個網頁HTML檔"Esp8266 智慧控制.html",如果點開會發現3個按鈕,稍後才會用到先關閉。

2.接著要編輯裡面的內容,最直覺的方式是打開記事本,然後把HTML檔直接拉進去,如圖。

修改HTML.jpg

 

3.如圖,我們可以看到這個HTML已經可以任意編輯,而我們在實驗三有用"AT+CIFSR"指令找到IP,就是要用在這邊,請把這行程式碼:

$.get("http://192.168.0.6:8888/", {pin:p}); // execute get request

 其中的 "192.168.0.6" 換成剛剛你AT+CIFSR取得的IP,我剛剛是"172.20.10.8",所以我就必須改成:

$.get("http://172.20.10.8:8888/", {pin:p}); // execute get request

 然後儲存關閉即可,實驗五完成。

修改HTML2.jpg

 

 

 

六.總測試

1.控制端跟接收端都備齊了,接下來做最後的總測試。打開剛剛修改好的HTML檔,三個按鈕分別是:Pin11,12,13,如圖。

網頁.jpg

 

 

2.接著就可以隨便點看看,順便注意Arduino有沒有收到,同時ESP的藍燈也會閃爍,也記得至少在你的Pin11拉一顆LED燈看看效果如何。

 

原理很簡單,就是當你點下按鈕時,HTML會發送你的IP網址最後再加上/PinXX到AP端,然後你的ESP8266就會收到一大串指令(有興趣可以用終端機去研究),經過Arduino解碼,取得編碼最後的PinXX,然後對應你Arduino的Pin腳做控制,不過這個實驗只侷限在區域網路下喔,目前還在研究怎麼用網際網路來控制。

 

 

總測試.jpg 

3.實驗就到這邊結束,實驗六完成,如果可以的話,網路上學些網頁語法,現學現賣把HTML美化一下,就是個不錯的專案囉,你也來分享你的作品吧!

 

PS.有任何建議或技術交流都可以留言給我哦!

 

 

 

延伸閱讀

*教學*Arduino WIFI(ESP8266) 初次上手應用

*教學*Arduino WIFI(ESP8266) Time同步設計

*情人節DIY*製作情侶專屬音樂盒

 

 

 

 

      

 

創作者介紹

**兩隻小豬**

兩隻小豬 發表在 痞客邦 PIXNET 留言(22) 人氣()


留言列表 (22)

發表留言
  • pinky
  • 想請問一下為什麼ESP8266_Wifi_Connection_Template.ino一直編譯錯誤
  • 有編輯錯誤資訊嗎?
    是不是你Arduino Library沒有 include Time函式?
    本篇底下 "Arduino WIFI(ESP8266) Time同步設計"裡面有載點,下載好放在安裝路徑的Library下,再來重新編譯看看,編譯軟體記得重開。

    兩隻小豬 於 2015/12/27 11:35 回覆

  • 訪客
  • 不過這個實驗只侷限在區域網路下喔,目前還在研究怎麼用網際網路來控制。

    >>將使用的IP 改成跟中華電信申請的固定IP
    就能使用網際網路來控制了 對嗎
  • 你這個方法沒錯
    但是問題在於怎麼改ESP8266的IP
    是值得跟有網頁背景的人討論研究看看的
    另外,比較可惜的是國內相關資料真的少之又少....

    兩隻小豬 於 2015/12/28 22:10 回覆

  • 甘孟遠
  • 版主:
    如果將ARDUINO測試的溫度,直接顯示在網頁上面然後約1秒更新一次,而不丟在雲端
    而接收資料的字串,該怎們打??
  • 最近要期末考,沒有時間測試ESP,不過先給你資料,你先試試看:

    "Arduino Tutorials – Chapter 16 – Ethernet"
    http://tronixstuff.com/2013/12/06/arduino-tutorials-chapter-16-ethernet/

    之後會再來研究

    兩隻小豬 於 2016/01/05 12:47 回覆

  • ROY
  • 如果要在網址打指令控制led 要在網址輸入ip後要接什麼才能控制呢?
  • 甘孟遠
  • 版主給的網站,有W5100 IC這棵是以太網路的部分了
    而我們已經有8266,不是已經可以溝通了??
    怎們還需要那顆,目前得知所完成的部分都還屬於區域網路的狀態,應該還非以太網路八!
  • 悄悄話
  • lijiyoun
  • 版主:關於區網可以網際網路不行,我猜可能是通訊埠轉送設定(Port Forwarding)的問題,請問有試過嗎
  • 請問您說的通訊埠轉送設定是指?

    兩隻小豬 於 2016/02/18 22:12 回覆

  • lijiyoun
  • 版主:不知道版主的分享器可不可以設定靜態IP,分配一個固定的區網IP給ESP8266,如192.168.1.119,然後分享器設定通訊轉送設定(Port Forwarding),只要是PORT8888就轉到192.168.1.119,就是把網際網路送到分享器經由8888PORT的資料,都會送到192.168.1.119,沒有經過這個設定,網際網路送到分享器的資料,分享器不知道丟到哪一個IP
  • kevin.pan@brigantine.com.tw
  • 前一陣子也有在研究這塊模組, 因為相較於其它wifi模組, ESP8266真的非常便宜~
    版主的文章也是當初我看過的教學文之一, 也給了我不少的幫忙.
    關於要使用網際網路來控制ESP8266是可行的, 可以朝二個方向著手:
    1. 在您的無線基地台裡, 設定NAT的功能(也就是上面的網友說的Port forwarding). NAT的原理很簡單, 假設您的ISP只有給您一組Public IP(61.219.131.93), 通常一般的做法是將這一組IP設定在您無線基地台. 當別人透過網際網路丟資料到http://61.219.131.93:8888, 這個封包就會先丟到您的無線基地台裡, 這時候無線基地台就會參考它的mapping table, 知道port:8888的封包要丟給內部的ESP8266
    2. 可以使用ESP8266內建的AT指令將外部IP設給ESP8266. 關於這個方面, 我有先幫您查了一下, 您可以搜尋"AT+CIPSTA"這個指令, 就會找到相關教學了. 這個指令主要的功能, 就是變更ESP8266的IP Address.
    因為ESP8266的教學, 在國外的網站很多, 當時也是看了很多國外的教學才搞懂這個模組的~~~所以大家可以互相幫忙, 對ESP8266能有再進一步的應用~~~

  • 真是幫了大忙! 謝謝你的回覆,只是目前都在忙於研究所,如果有空會再回來繼續做研究,因為你讓我有動力,再次感謝!

    兩隻小豬 於 2016/03/17 22:47 回覆

  • vpn
  • 家裏的網路經由ddns對外(有些無線ap有支援),在外經過vpn連回家裡。
  • Shih Tse-Shuen
  • 想請問一下,現在想把ESP8266的IP設置成外部網路也能用,但不管是AT+CIPSTA或AT+CIPSTA_DEF的指令,都出現error。所以想請問該怎麼設置,感謝。
  • Shih Tse-Shuen
  • 目前應用板主的方式都ok,但卻一直無法用外網連線。想說如果可以,就直接用手機的網頁或APP來遠端控制,即沒有距離限制,但感覺好像真的很難的說。我是機械系的,所以感覺不容易,但看網路視訊或聊天室等等,也都沒距離阿。還請多多指導,感謝。
  • 小杜
  • 請問我輸入AT+CIFSR只有一個IP是怎麼回事呢?
  • 訪客
  • 請問在實驗三得到的IP是16進位的是正常的嗎?
  • 訪客
  • 板主您好: 請問 ESP8266_Wifi_Connection_Template.ino 中的 case 2:
    第8行 Wifi_State++; 執行這行就不會執行 case 3: 請問我這樣的解讀對? 請您指導.

    1. case 2://--------------------------------------------------Wifi connect
    2. cmd="AT+CWJAP=\"";
    3. cmd+=SSID;
    4. cmd+="\",\"";
    5. cmd+=PASS;
    6. cmd+="\"";
    7. sendDebug(cmd);
    8. Wifi_State++; //執行這行就不會執行 case 3: 請問我這樣的解讀對?
    9. if (Loding("Wifi connect")){
    Wifi_State++; //next setting wifi mode
    }
    else{Wifi_State--;}
    break;
  • alex
  • 板主您好: 請問 程式執行後
    出現
    Wifi Loading. OK !
    SEND: AT+CWMODE=3
    Wifi Loading. OK !
    SEND: AT+CWJAP="74170287","24063173"
    Wifi Loading.............. OK ! This commend waste 7 sec.
    SEND: AT+CIPMUX=1
    Wifi Loading.............................Set CIPMUX fail...
    Exit2
    SEND: AT+CIFSR
    Wifi Loading.............................Get ip address fail...
    Exit2

    AT+CIPMUX=1 出現錯誤 請問此現象 的原因及如何處理
    麻煩解答一下 謝謝您
  • 訪客
  • 您好 我想請問我用我用壓力感測器(有12片)的數值我想透過wifi(Esp8266)傳到Thingspeak然後下載到Excel黨可以嗎,同一塊的arduino板可以寫兩個程式WIFI跟壓力感測片的嗎,這樣監控室窗輸出的值不就會很亂,讀不到壓力感測片的值了
  • 陳亭安
  • 請問一下我的ESP8266 IP為只會什麼會長這樣5e:cf:7f:c2:bf:9b
  • keynes
  • @陳亭安
    那個應該是8266的MAC Address吧!
  • 訪客
  • 請問有人跟我遇到一樣的狀況嗎?
    SEND:AT
    WIFI loading .............sent AT fail
    要怎麼解決呢??
  • 訪客
  • ESP8266鮑率修改成了9600
    燒入程式碼進Arduino也很正常
    AT指令也OK
    網路連接也OK
    也改了網頁的IP位置 //順便問一下,IP位址為何會出現兩個?
    但為什麼點選網頁的button時,Arduino的IDE監控視窗卻甚麼都沒有反應。

    LED燈不可能會接錯啊...
    在之前測試ThingSpeak的上傳時,沒有連接LD1117穩壓也沒有出現資料問題...