任务5：通过网络控制WS2812B| 【调色板控彩灯】

alanlan86

任务5：通过网络控制WS2812B| 【调色板控彩灯】 [复制链接]

<i class="pstatus"> 本帖最后由 alanlan86 于 2023-9-18 08:32 编辑 </i>

#准备工作

## 硬件
- ESP32-S3 TFT Feather开发板一块
![](https://www.eeworld.com.cn/huodong/digikey_follow_me/image/5483zst.jpg)

##HTTP Web Server
- 参考网络资料：https://www.zhihu.com/tardis/bd/art/548566341?source_id=1001
- 可以对HTTP理论，WebServer做一个理论知识点的了解，并且对html做一个简单的了解。

#代码分析
##库
- 通过Web Server控制WS2812B需要导入adafruit_httpserver的lib文件

```python
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

```python
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
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>
"""
```

##响应
- 针对HTTP页面响应，处理浏览器下发的操作。

```python
@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  # pylint: disable=global-statement

if websocket is not None:
        websocket.close()  # Close any existing connection

websocket = Websocket(request)

return websocket

server.start(str(wifi.radio.ipv4_address))
while True:
    server.poll()

# Check for incoming messages from client
    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))

# Send a message every second
    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
```

##综合源码

<ignore_js_op>

<a href="javascript:;" class="loginf">webserver_led_rgb.py</a>

<em class="xg1">(2.68 KB, 下载次数: 1)</em>
</span>
<div class="tip tip_4" id="attach_733172_menu" style="position: absolute; display: none" disautofocus="true">
<div class="tip_c xs0">
<div class="y">2023-9-17 12:56 上传</div>
点击文件名下载附件

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

#调试

<ignore_js_op>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_733170" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=733170&handlekey=savephoto_733170">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

#演示
- 根据调试log窗口可知，ESP32连接WiFi路由器获得192.168.0.100的IP，然后将连入相同路由的手机浏览器输入“192.168.0.100/client”，此时，浏览器将出现html页面，分别包含CPU的温度以及LED的颜色可配置，点击颜色设置，即可调色板载Neopixel的RGB　LED灯。
<div id="player_ef1774a0442a3484f0f514255ffc09b60" class="localvideo-box"></div><div class="localvideo-title">webserver_ledrgb</div><br/>

Jacktang

调试板控彩灯

alanlan86

Jacktang 发表于 2023-9-17 20:53 调试板控彩灯

“广普” 4这样的啦！。。。哈哈

任务5：通过网络控制WS2812B| 【调色板控彩灯】 [复制链接]

最新回复

点评

浏览过的版块