**兩隻小豬**

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

稍早已經介紹過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下指令就好。

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，正確結果如下圖，實驗四完成。

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

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

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

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

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

六.總測試

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

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

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

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

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

延伸閱讀

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

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

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