如何在瀏覽器透過 ESP8266 wifi 連線控制 Arduino上的LED 開關

文章取自 http://arbu00.blogspot.com/2016/09/esp8266-wifi5-set-led-onoff-from-web.html

<圖1>概念圖,非完整接線圖


<圖2>實際工作狀態



首先請先參閱之前的ESP8266介紹完成基本接線及測試,

ESP8266 Wifi (1)---Connected with PC.

http://arbu00.blogspot.tw/2015/12/esp8266-wifi-1-connected-with-pc.html
ESP8266 WIFI(2) -update firmware and modify baud rate.

http://arbu00.blogspot.tw/2015/12/esp8266-wifi2-update-firmware-and.html

ESP8266 WIFI(3) -Connected with Arduino

http://arbu00.blogspot.tw/2015/12/esp8266-wifi3-connected-with-arduino.html

ESP8266 WIFI(4) -Soil_Humidity sensor

http://arbu00.blogspot.tw/2015/12/esp8266-wifi4-soilhumidity-sensor.html


影音筆記完整示範說明:

<圖3>打開瀏覽器在位址列輸入ESP8266 連上的IP:192.168.xxx.xxx及Port :9000

           帶入/?pin=底下參數即可控制LED 開關.

           *1./?pin=參數  為自定義,只要能讓Arduino程式可以從字串解析出涵義即可

           *2.IP:192.168.xxx.xxx 為ESP8266連上家中無線AP時得到的IP,數值會不固定

                請依自己的實際狀況設定

            *3 port =9000 為自定義,需與ESP8266 的port設定一致

<圖4>將圖3在位址列的指令格式透過JAVAScript & JQuery 實現GET request method 

          做成一個HTML檔,請參閱 <圖五>HTML source code.

          底下按下按鈕Arduino 端的LED 即會做出相對應動作.

 <圖五>HTML source code.實作出6個按鈕.透過JAVAScript & JQuery 實現GET request method. 


<圖6-1>在Arduino IDE serial監控視窗查看ESP8266連線狀態

<圖6-2>在Arduino IDE serial監控視窗查看ESP8266連線狀態

<Arduino 完整範例 source code>
https://github.com/Ashing00/esp8266/blob/master/esp8266_led.ino