本帖最后由 alanlan86 于 2023-9-18 08:32 编辑
#准备工作
硬件
- ESP32-S3 TFT Feather开发板一块

##HTTP Web Server
#代码分析
##库
- 通过Web Server控制WS2812B需要导入adafruit_httpserver的lib文件
from time import monotonic
import board
import microcontroller
import neopixel
import socketpool
import wifi
from adafruit_httpserver import Server, Request, Response, Websocket, GET
##Server
- 创建套接字,Http Server以及neopixel
pool = socketpool.SocketPool(wifi.radio)
server = Server(pool, debug=True)
pixel = neopixel.NeoPixel(board.NEOPIXEL, 1)
websocket: Websocket = None
next_message_time = monotonic()
HTML
- 在http GET请求,返回html页面,其中重点部分是颜色拾取器,进行颜色的选择,然后用于设定LED的颜色。
HTML_TEMPLATE = """
<html lang="en">
<head>
<title>Websocket Client</title>
</head>
<body>
<p>CPU temperature: <strong>-</strong>°C</p>
<p>NeoPixel Color: <input type="color"></p>
<script>
const cpuTemp = document.querySelector('strong');
const colorPicker = document.querySelector('input[type="color"]');
let ws = new WebSocket('ws://' + location.host + '/connect-websocket');
ws.onopen = () => console.log('WebSocket connection opened');
ws.onclose = () => console.log('WebSocket connection closed');
ws.onmessage = event => cpuTemp.textContent = event.data;
ws.onerror = error => cpuTemp.textContent = error;
colorPicker.oninput = debounce(() => ws.send(colorPicker.value), 200);
function debounce(callback, delay = 1000) {
let timeout
return (...args) => {
clearTimeout(timeout)
timeout = setTimeout(() => {
callback(...args)
}, delay)
}
}
</script>
</body>
</html>
"""
##响应
@server.route("/client", GET)
def client(request: Request):
return Response(request, HTML_TEMPLATE, content_type="text/html")
@server.route("/connect-websocket", GET)
def connect_client(request: Request):
global websocket
if websocket is not None:
websocket.close()
websocket = Websocket(request)
return websocket
server.start(str(wifi.radio.ipv4_address))
while True:
server.poll()
if websocket is not None:
if (data := websocket.receive(True)) is not None:
r, g, b = int(data[1:3], 16), int(data[3:5], 16), int(data[5:7], 16)
pixel.fill((r, g, b))
if websocket is not None and next_message_time < monotonic():
cpu_temp = round(microcontroller.cpu.temperature, 2)
websocket.send_message(str(cpu_temp))
next_message_time = monotonic() + 1
##综合源码
#调试
#演示
- 根据调试log窗口可知,ESP32连接WiFi路由器获得192.168.0.100的IP,然后将连入相同路由的手机浏览器输入“192.168.0.100/client”,此时,浏览器将出现html页面,分别包含CPU的温度以及LED的颜色可配置,点击颜色设置,即可调色板载Neopixel的RGB LED灯。
播放器加载失败: 未检测到Flash Player,请到
安装
webserver_ledrgb