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*製作情侶專屬音樂盒

 

 

 

 

      

 

文章標籤

全站熱搜

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