ESP32 Web Server 網路伺服器

手機上網遙控兩個 LED


簡介

這個專題用 Arduino IDE 程式，把 ESP32 做成一個網路伺服器 (web server)。用手機上的瀏覽器，連上此網路伺服器，控制 ESP32 二個 GPIO 26 及 GOIP 27上的 LED。

這個專題和程式，原始創作，來自： http://randomnerdtutorials.com

成果影片

材料

ESP32S 開發版 x1

330 歐姆電阻 x2

LED x2 (最好不同顏色)

麵包版 x1，

電線及杜邦線 (一公一母)

接線圖

LED 長腳接 ESP32 GPIO D26，短腳接電阻，電阻另一端接 GND 。

另一個 LED 長腳接 ESP32 GPIO D27，短腳接電阻，電阻另一端接 GND 。

ESP32 GND 分享至麵包板藍線 。


上傳程式

步驟一: 請先安裝 ESP 32 板子在 Arduino IDE 裡面。如未安裝，請參閱 ESP32 WiFi 專題。

步驟二: 上傳下方程式前，點選 工具 > 開發板，確認你的 Arduino 開發板是否正確，序列埠 COM Port是否接上。本專題開發版請選擇 "DOIT ESP32 DEVKIT V1"。

步驟三: 至程式第 10 及第 11 行，輸入你要 ESP32 連上的 WiFi 網路名稱 SSID 及密碼 password。

步驟四: 按下 Arduino 上傳程式鈕後，再按住 ESP32 BOOT 鈕。待程式編驛訊息出現 "Connecting..." 後，再鬆開 BOOT 鈕。如此可讓程式順利上傳到 ESP 32。

步驟五: 待程式成功上傳後，打開 Arduino 序列埠螢幕，調整 baud rate 為 115200。再按一下板子上的 ENABLE 按鈕，應該從序列埠螢幕上看到 ESP32 web server 的 IP address，長的像這樣: 192.168.0.113。

步驟六: 打開手機、電腦、或 pad 上的瀏覽器，輸入步驟五所看到的 IP address，就會出現控制二個 LED 的網頁。

創客點子


  1. 嘗試增加可控制 ESP32 上的 GPIO 數目。本專題只使用兩個GPIO (26及27)。如要增加，程式上所有出現 26 或 27 的地方，均如法泡製。

  2. 嘗試修改網頁的樣式 (如下圖)。程式第 100 到 144 行，設計控制網頁的樣式。這部分程式，都是用 HTML 指令所寫的。

3. 把 USB 傳輸線從電腦拔掉，透過轉接變壓器，接到一般的 110 伏特電源；即把已上傳程式的 ESP32 不再連著電腦，只藉著 USB 傳輸線接上電源。試試看用手機打開瀏覽器，鍵入 IP Address，能不能控制兩個 LED。