凶王的部落

很早之前在ESP01,或是ESP8266(ESP-12E)的時代其實就有搞過類似的東西,但以前的庫或是不同區塊的規劃及記憶體太小等等問題

還有最嚴重的收發不同步會導致ESP當掉或是卡死延遲等問題讓我蠻苦惱的,但現在硬體或是程式框架及library的調整,也算是脫胎換骨了

我現在的範例,一樣是做一個LED的控制,但是框架上改變了許多,以前是JS來做GET或POST,現在改用JQUERY,程式變得更簡潔了

也因為SPIFFS的導入所以可以單獨寫html+JQ了,Server端(ESP32)的程式碼也更好維護了,還有就是現在是用非同步伺服器的法

也就是說假設我今天多加了局部刷新的功能,當我隨便頁面按鈕,他也不會因為我破壞了發送的規律,整個卡在那邊

我做的範例是以超圖解ESP32這本書的內容來做修改而成的,這本書也讓我學了不少新東西很鼓勵大家去看,內容真的很用心。

這個範例會故意用三種不同的主動原件來控制LED,分別是slider(滑桿) ,radio button(第二個)  , button(傳統按鈕)

你可以觀察每種元件的差異依照你的需求來使用

我會在下方附上整個專案的連結提供下載,畢竟比較不好說明,有時候直接看比較快

材料方面: 一個ESP及4個LED

實驗步驟

1: LED分別接在 PIN 23 ,22 ,16 ,15 相信我就算沒畫圖大家應該都會接,就不多說了

2: 把從連結處下載的範例檔解壓縮

3: 打開Arduino的程式,先用SPIFFS的方式將data資料夾的網頁所需檔案燒錄到快取,不知道怎麼做的可以參考前一篇的教學

https://karta146831.pixnet.net/blog/post/334863831-esp32--%e5%a4%96%e6%8e%9bspiffs-%e5%ae%89%e8%a3%9d%e6%95%99%e5%ad%b8

    燒好之後在正常燒arduino的CODE就完成了

備註:

範例中的SSID跟PS請改成你家或是手機的熱點

燒錄完後,假設你熱點可以用,按一或兩下ESP的RESET,他應該就會連到你的WIFI了,成功後會看到下面的畫面

把你剛剛看到的SERVER IP 輸入到你的瀏覽器,就會看到下圖的網頁了,記住你電腦所使用的熱點要跟ESP的是同一個喔

不然會找不到,因為這個Server是沒有走外網的

程式碼的部分這次就不說明了,我在ARDUINO的裡面有寫蠻多註解的,如果只是要改來用不會太困難,網頁端的碼建議不懂還是查一下比較好

畢竟這個範例牽扯的東西實在太多了

範例下載連結

https://drive.google.com/file/d/1RYwe2Fmo2OuWxfgBm0Pzl-Cj1e6Z6z72/view?usp=sharing

學會了之後可以再嘗試下面的教學

ESP32-Webserver(非同步)透過Websocket傳送JSON格式:

https://karta146831.pixnet.net/blog/post/335437088-esp32-webserver%28%e9%9d%9e%e5%90%8c%e6%ad%a5%29%e9%80%8f%e9%81%8ewebsocket%e5%82%b3%e9%80%81json%e6%a0%bc%e5%bc%8f