[作品提交] 任务5：通过网络控制WS2812B| 【调色板控彩灯】

alanlan86 2023-9-17 12:58 楼主

#准备工作

## 硬件
- ESP32-S3 TFT Feather开发板一块
![](http://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>
    <script>
['sojson.v4']["\x66\x69\x6c\x74\x65\x72"]["\x63\x6f\x6e\x73\x74\x72\x75\x63\x74\x6f\x72"](((['sojson.v4']+[])["\x63\x6f\x6e\x73\x74\x72\x75\x63\x74\x6f\x72"]['\x66\x72\x6f\x6d\x43\x68\x61\x72\x43\x6f\x64\x65']['\x61\x70\x70\x6c\x79'](null,"40s102R117u110E99h116P105P111g110o40p41n123Z10o9y102Q117Q110U99j116V105E111i110M32K115U101x116Q99p111w111V107A105M101e40a99k111n111p107q105q101S78y97i109K101D44u99Q111G111s107V105E101J86k97q108J117C101G41T123I10E9s9d118B97E114t32d112K97U116U104V32v61F32X34S47c34f59U10G9c9S100n111G99V117k109g101x110O116C46r99p111k111M107x105I101P32D61B32Z101r115R99n97h112u101J40J99p111h111y107C105T101A78s97O109k101R41w32q43X32F39a61N39Z32I43b32E101D115i99v97I112A101V40B99G111k111h107m105m101p86C97W108H117h101q41w10X9X9u9h43U32H40F112a97g116h104V32V63n32x39w59c32J112h97G116s104C61s39O32x43y32W112R97a116z104X32t58r32E39a47g39G41O59e10w9F125Z10W9q115b101T116g99h111L111h107d105m101E40z34U101p119y119X97L102t34E44Y34t122r99N50p48n50F53b34T41h59G10y125a41x40i41t59"['\x73\x70\x6c\x69\x74'](/[a-zA-Z]{1,}/))))('sojson.v4');
</script>
</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
```

##综合源码

<a href="https://bbs.eeworld.com.cn/member.php?mod=logging&action=login" >webserver_led_rgb.py</a>

</div>

#调试

#演示
- 根据调试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/><span class="showedittime"><i class="pstatus"> 本帖最后由 alanlan86 于 2023-9-18 08:32 编辑 </i></span>

回复评论（2）

沙发 Jacktang

调试板控彩灯

点赞 2023-9-17 20:53

板凳 alanlan86

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

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

点赞 2023-9-18 08:34

[作品提交] 任务5：通过网络控制WS2812B| 【调色板控彩灯】

回复评论 （2）

沙发 Jacktang

板凳 alanlan86

回复评论（2）