写个html网页里面有个滑条能控制esp8266灯亮度的程序,并且写出对应esp8266服务端的代码
时间: 2024-03-10 16:50:46 浏览: 98
以下是一个控制 ESP8266 灯亮度的 HTML 网页示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>ESP8266 LED</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
margin-top: 50px;
text-align: center;
}
#slider-container {
margin-top: 50px;
width: 50%;
margin-left: auto;
margin-right: auto;
}
#slider-value {
font-size: 24px;
text-align: center;
}
</style>
</head>
<body>
<h1>ESP8266 LED</h1>
<div id="slider-container">
<input type="range" min="0" max="255" value="0" class="slider" id="brightness-slider">
<p id="slider-value">0</p>
</div>
<script>
$(document).ready(function() {
// 当滑条值改变时,发送AJAX请求
$("#brightness-slider").change(function() {
var brightness = $(this).val();
$.get("/set-brightness?brightness=" + brightness, function(data, status) {
// 更新亮度值
$("#slider-value").text(brightness);
});
});
});
</script>
</body>
</html>
```
这个网页包含一个滑条,可以控制 LED 的亮度。当滑条值改变时,会通过 AJAX 请求将亮度值发送给 ESP8266 服务端。
以下是对应的 ESP8266 服务端代码示例:
```c++
#include <ESP8266WiFi.h>
const char* ssid = "your_wifi_ssid";
const char* password = "your_wifi_password";
WiFiServer server(80);
void setup() {
Serial.begin(9600);
delay(10);
// 连接 WiFi
Serial.println();
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected");
// 启动服务
server.begin();
Serial.println("Server started");
}
void loop() {
// 等待客户端连接
WiFiClient client = server.available();
if (client) {
Serial.println("New client");
String request = "";
// 读取 HTTP 请求
while (client.connected()) {
if (client.available()) {
char c = client.read();
request += c;
if (c == '\n') {
break;
}
}
}
// 提取亮度值
int brightness = 0;
int pos = request.indexOf("brightness=");
if (pos != -1) {
String valueStr = request.substring(pos + 11);
brightness = valueStr.toInt();
}
// 发送 HTTP 响应
String response = "HTTP/1.1 200 OK\r\nContent-Type: text/html\r\n\r\n";
response += "<!DOCTYPE HTML>\r\n<html>\r\n";
response += "Brightness set to " + String(brightness) + "\r\n";
response += "</html>\n";
client.print(response);
// 控制 LED 亮度
analogWrite(D1, brightness);
}
}
```
这里同样使用了 ESP8266 的 `WiFiServer` 类来创建一个 HTTP 服务器,监听端口号为 80。当客户端向服务器发送 HTTP 请求时,可以从请求中提取亮度值,并将其传递给 `analogWrite()` 函数来控制 LED 的亮度。
需要注意的是,这里使用了 ESP8266 的 D1 引脚来控制 LED,您需要根据实际情况修改引脚号。另外,为了使代码更加健壮,建议添加一些错误处理逻辑,例如在客户端断开连接时关闭连接等。
阅读全文