arduino esp32网页控制LED
时间: 2024-09-26 20:04:58 浏览: 55
Arduino ESP32是一款基于ESP32芯片的开源硬件平台,它结合了Arduino的易用性和物联网功能。通过ESP32的WiFi模块,可以将其连接到网络,并利用Web服务器的功能,实现远程通过网页控制LED灯。
步骤如下:
1. **硬件准备**:
- Arduino ESP32开发板
- 一个或多个LED灯
- 连接LED到ESP32的数字引脚
2. **软件设置**:
- 使用Arduino IDE编写代码,首先需要安装适用于ESP32的库,如`ESP8266WiFi`和`ESPAsyncWebServer`。
```cpp
#include <ESP8266WiFi.h>
#include <ESPAsyncWebServer.h>
// 网络配置
const char* ssid = "your_SSID";
const char* password = "your_PASSWORD";
// LED的状态
bool ledState = false;
// 创建Web服务器实例
AsyncWebServer server(80); // 默认HTTP端口
void handleRoot() {
digitalWrite(LED_PIN, ledState);
server.send(200, "text/html", "<h1>LED Status: " + String(ledState ? "ON" : "OFF") + "</h1>");
}
void setup() {
Serial.begin(115200);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi...");
}
Serial.println("Connected to WiFi");
server.on("/", handleRoot);
server.begin();
}
```
3. **网页控制**:
- 创建一个HTML文件,比如`index.html`,放置在服务器的根目录下,内容可能是:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Control LED</title>
</head>
<body>
<button onclick="toggleLed()">Toggle LED</button>
<script>
function toggleLed() {
var xhr = new XMLHttpRequest();
xhr.open('GET', '/toggle', true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
document.body.innerHTML = xhr.responseText;
}
};
xhr.send();
}
</script>
</body>
</html>
```
4. **JavaScript 控制**:
当用户点击网页上的按钮时,会发送一个GET请求到`/toggle`路径,服务器收到请求后会在`handleRoot()`函数中切换LED状态并返回更新后的页面内容。
阅读全文