很早之前在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資料夾的網頁所需檔案燒錄到快取,不知道怎麼做的可以參考前一篇的教學
燒好之後在正常燒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格式:
留言列表
