ESP32 Web 控制LED
介紹
ESP32 是一款強大的微控制器，內建 Wi-Fi 和藍牙功能，可以輕鬆地用來建立 Web 伺服器，遠端控制設備。本指南將帶你從零開始，使用 ESP32 建立一個 Web 伺服器，並透過 Wi-Fi 控制 LED 燈。
所需材料
- ESP32 開發板
- 麵包板
- 兩個 LED 燈（紅色與綠色）
- 220 歐姆電阻（各 2 個）
- 杜邦線
- USB 傳輸線（用於連接 ESP32）
硬體連接
- 將 ESP32 插入麵包板。
- 使用杜邦線將 GPIO 16 連接至紅色 LED 的正極（長腳）。
- 在紅色 LED 的負極（短腳）與 GND 之間串聯 220 歐姆電阻。
- 使用杜邦線將 GPIO 17 連接至綠色 LED 的正極（長腳）。
- 在綠色 LED 的負極（短腳）與 GND 之間串聯 220 歐姆電阻。
- 確保所有接線正確無誤。
軟體安裝與設定
1. 安裝 Arduino IDE 與 ESP32 開發板
- 下載並安裝 Arduino IDE。
開啟 Arduino IDE，前往檔案 > 偏好設定，在附加開發板管理 URL欄位中輸入：https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_index.json- 前往
工具 > 開發板 > 開發板管理員，搜尋esp32，安裝ESP32 by Espressif Systems。 - 選擇
工具 > 開發板，選擇NodeMCU-ESP32S（或根據你的 ESP32 板型選擇相應開發板）。
2. 編寫 Arduino 程式碼
打開 Arduino IDE，建立新草稿，輸入以下程式碼：
#include <WiFi.h>
// 設定 Wi-Fi 網路 SSID 與密碼const char* ssid = "book";const char* password = "12345678";
// 建立 Web 伺服器，監聽 80 端口WiFiServer server(80);
// 記錄 LED 狀態bool redState = false;bool greenState = false;
void setup() { Serial.begin(115200); // 初始化序列埠，設定波特率為 115200 // 設定 ESP32 以 Station 模式連線至 Wi-Fi WiFi.mode(WIFI_STA); WiFi.begin(ssid, password); Serial.print("Connecting to WiFi"); while (WiFi.status() != WL_CONNECTED) { delay(500); Serial.print("."); } Serial.println("\nWiFi connected"); Serial.print("Station IP Address: "); Serial.println(WiFi.localIP()); server.begin(); // 啟動 Web 伺服器
// 設定 GPIO 16 和 GPIO 17 為輸出模式 pinMode(16, OUTPUT); pinMode(17, OUTPUT);}
void loop() { WiFiClient client = server.available(); // 檢查是否有用戶端連線 if (client) { String request = client.readStringUntil('\r'); // 讀取客戶端請求 client.flush(); // 清空接收緩衝區
// 根據請求字串控制 LED if (request.indexOf("/red/on") != -1) { digitalWrite(16, HIGH); // 開啟紅色 LED redState = true; } else if (request.indexOf("/red/off") != -1) { digitalWrite(16, LOW); // 關閉紅色 LED redState = false; } else if (request.indexOf("/green/on") != -1) { digitalWrite(17, HIGH); // 開啟綠色 LED greenState = true; } else if (request.indexOf("/green/off") != -1) { digitalWrite(17, LOW); // 關閉綠色 LED greenState = false; }
// 回應 HTTP 請求，顯示 HTML5 按鈕介面 client.print("HTTP/1.1 200 OK\nContent-Type: text/html\n\n"); client.print("<html><head><style>"); client.print(".btn { width: 300px; height: 300px; border-radius: 50%; font-size: 20px; border: none; cursor: pointer; text-align: center; line-height: 100px; display: inline-block; margin: 10px; }"); client.print(".red-on { background-color: red; color: white; }"); client.print(".red-off { background-color: darkred; color: white; }"); client.print(".green-on { background-color: green; color: white; }"); client.print(".green-off { background-color: darkgreen; color: white; }"); client.print("</style></head><body>"); client.print("<h1>ESP32 Web Server</h1>"); client.print("<button class='" + String(redState ? "red-on" : "red-off") + " btn' onclick=\"location.href='/red/" + String(redState ? "off" : "on") + "'\">Red</button>"); client.print("<button class='" + String(greenState ? "green-on" : "green-off") + " btn' onclick=\"location.href='/green/" + String(greenState ? "off" : "on") + "'\">Green</button>"); client.print("</body></html>"); client.stop(); // 關閉連線 }}
3. 上傳與執行程式
- 連接 ESP32 到電腦，選擇
工具 > 連接埠，選擇 ESP32 的 COM 連接埠。 - 點擊
上傳，將程式燒錄到 ESP32。 - 打開
工具 > 序列監視器，選擇115200波特率。 - 記下 ESP32 在Serial顯示的 IP 位址。
4. 連接與控制 LED
連接手機或電腦至ESP32-NetworkWi-Fi。- 打開瀏覽器，在網址列輸入 ESP32 的 IP 位址。
- 點擊對應的按鈕控制 LED 開關。
總結
這篇指南教你如何用 ESP32 建立 Web 伺服器，透過 Wi-Fi 控制 LED。未來，你可以進一步使用繼電器控制高電壓設備，例如燈泡或風扇，讓你的專案更加實用！
沒有留言:
張貼留言