当前位置： 首页 > news >正文

七、ESP32-S3上使用MicroPython点亮WS2812智能LED灯珠并通过web控制和JS颜色选择器改变灯珠颜色

news 2026/2/10 10:53:36

本地代码集成离线iro.js库来添加一个颜色选择器控件，在无网络环境可以通过JavaScript将选中的颜色发送到服务器以改变LED颜色。以下是将iro.js集成到网页后的颜色图片。

  • Iro.js 地址
  • API操作手册
color:change
# 每当所选颜色发生变化时触发 - 无论是当用户与颜色选择器交互时，还是当颜色由您自己的代码更新时。此事件的回调函数将接收两个值：- color：当前选定的颜色- changes：显示自上次触发事件以来哪些 HSV 通道发生了变化的对象colorPicker.on('color:change', function(color) {// don't let the color saturation fall below 50!if (color.saturation < 50) {color.saturation = 50;}
});input:change
与 类似color:change，不同之处在于仅当颜色随着用户的鼠标或触摸输入而改变时才会触发此事件。此事件的回调接收与相同的值，并且在此事件的回调中color:change修改对象也是安全的。colorinput:start
每当用户开始与颜色选择器控件交互时触发。当前选定的颜色将传递到此事件的回调函数。input:move
当用户在开始交互后移动指针/鼠标时触发。当前选定的颜色将传递到此事件的回调函数。input:end （建议使用）
每当用户停止与颜色选择器控件交互时触发。当前选定的颜色将传递到此事件的回调函数。color:init
添加颜色时触发。此事件的回调将接收新添加的颜色对象。color:remove
当颜色从颜色选择器中移除时触发。此事件的回调将接收已移除的颜色对象。color:setActive
每当切换“活动”颜色时触发。此事件的回调将接收活动颜色对象。mount
当 colorPicker 的 UI 已安装到 DOM 并准备好进行用户交互时触发。colorPicker 对象将传递给此事件的回调函数。

在这里插入图片描述

代码路径示意图

在这里插入图片描述

完整代码

完整代码包括所有优化和集成iro.js颜色选择器的部分：

import network
import neopixel
from machine import Pin
import uasyncio as asyncio
import socket
import time# 设置Wi-Fi连接参数
ssid = 'XTY-2'
password = 'xty202102'
wifi_connect_timeout = 10  # Wi-Fi连接超时时间（秒）# 初始化并连接到Wi-Fi网络
station = network.WLAN(network.STA_IF)
station.active(True)
station.connect(ssid, password)# 等待Wi-Fi连接，添加超时处理
start_time = time.time()
while not station.isconnected():if time.time() - start_time > wifi_connect_timeout:raise RuntimeError('Wi-Fi连接超时，请检查网络设置')passprint('连接成功')
print(station.ifconfig())  # 打印Wi-Fi连接配置# 设置GPIO 2为输出引脚，并初始化一个有7个LED的NeoPixel对象
led_pin = Pin(2, Pin.OUT)
num_leds = 7  # 固定LED数量
np = neopixel.NeoPixel(led_pin, num_leds)# 初始化颜色，初始为红色
current_color = (255, 0, 0)
color_lock = asyncio.Lock()  # 用于颜色修改的锁，防止并发修改def generate_web_page():global current_color  # 确保current_color可以被访问html = """<!DOCTYPE html><html><head><meta charset="UTF-8"><title>LED控制</title><script src="/iro.js"></script> <!-- 引入iro.js库 --></head><body><h1>LED 控制面板效果1</h1><div id="color-picker-container1"></div><h1>LED 控制面板效果2</h1><div id="color-picker-container2"></div><h1>LED 控制面板效果3</h1><div id="color-picker-container3"></div><h1>LED 控制面板效果4</h1><div id="color-picker-container4"></div><h1>LED 控制面板效果5</h1><div id="color-picker-container5"></div><script>// 初始化iro.js颜色选择器var colorPicker1 = new iro.ColorPicker("#color-picker-container1", {width: 300});var colorPicker2 = new iro.ColorPicker("#color-picker-container2", {width: 300,layout: [{ component: iro.ui.Wheel,options: {}},]});var colorPicker3 = new iro.ColorPicker("#color-picker-container3", {width: 300,layout: [{ component: iro.ui.Box,options: {}},]});var colorPicker4 = new iro.ColorPicker("#color-picker-container4", {width: 300,layout: [{ component: iro.ui.Slider,options: {}},]});var colorPicker5 = new iro.ColorPicker("#color-picker-container5", {width: 300,layout: [{ component: iro.ui.Slider,options: {sliderType: 'hue'}},]});// 当颜色改变时，发送请求到服务器colorPicker1.on('input:end', function(color) {var hexColor = color.hexString;var xhr = new XMLHttpRequest();xhr.open("GET", "/?color=" + encodeURIComponent(hexColor.substring(1)), true);  // 发送颜色值（去掉#号）xhr.send();});</script></body></html>"""return html# 处理客户端请求的异步函数
async def handle_client(client):try:request = client.recv(1024)  # 接收客户端请求request = str(request)# 提供iro.js文件if "GET /iro.js" in request:with open('iro.js', 'r') as file:js_content = file.read()client.send('HTTP/1.1 200 OK\n')client.send('Content-Type: application/javascript\n')client.send('Connection: close\n\n')client.sendall(js_content)return# 解析请求并获取颜色参数if "GET /?" in request:try:params = request.split("GET /?")[1].split(" HTTP/")[0]param_dict = {}for param in params.split('&'):key, value = param.split('=')param_dict[key] = value.replace("%23", "#")  # 处理颜色代码中的“#”符号print(param_dict)global current_color# 解析颜色参数if 'color' in param_dict:color_str = param_dict['color'].lstrip('#')  # 去掉颜色码前的“#”if len(color_str) == 6 and all(c in '0123456789abcdefABCDEF' for c in color_str):try:# 将颜色从十六进制字符串转换为RGB元组r = int(color_str[0:2], 16)g = int(color_str[2:4], 16)b = int(color_str[4:6], 16)# 使用锁来防止并发修改current_colorasync with color_lock:current_color = (r, g, b)except ValueError as e:print("颜色解析错误:", e)  # 捕捉解析错误current_color = (255, 0, 0)  # 设置默认颜色else:print("无效的颜色值长度或格式:", color_str)# 更新LED灯珠颜色async with color_lock:for i in range(num_leds):np[i] = current_colornp.write()  # 写入新的颜色到LEDprint(f"LED颜色更新为: {current_color}")except Exception as e:print("参数处理错误:", e)# 生成网页并发送响应response = generate_web_page()client.send('HTTP/1.1 200 OK\n')client.send('Content-Type: text/html\n')client.send('Connection: close\n\n')client.sendall(response)finally:client.close()  # 关闭客户端连接# 查找可用端口的函数
def find_available_port(start_port=80, max_port=65535):port = start_portwhile port <= max_port:try:server_socket = socket.socket(socket.AF_INET, socket.SOCK_STREAM)server_socket.bind(('', port))server_socket.close()  # 立即关闭以释放端口return portexcept OSError:port += 1raise RuntimeError('没有可用端口')# 启动Web服务器的异步函数
async def web_server():port = find_available_port()print(f"Web服务器使用端口 {port}")server_socket = socket.socket(socket.AF_INET, socket.SOCK_STREAM)server_socket.bind(('', port))server_socket.listen(5)print("Web服务器启动，等待连接...")while True:client, addr = server_socket.accept()  # 接受客户端连接print('客户端连接自', addr)await handle_client(client)  # 处理客户端请求# 创建并运行任务
loop = asyncio.get_event_loop()
loop.create_task(web_server())
loop.run_forever()

这样，网页中将包含一个颜色选择器控件，用户可以通过选择颜色来动态改变LED的颜色。

相关文章：

七、ESP32-S3上使用MicroPython点亮WS2812智能LED灯珠并通过web控制和JS颜色选择器改变灯珠颜色

本地代码集成离线iro.js库来添加一个颜色选择器控件&#xff0c;在无网络环境可以通过JavaScript将选中的颜色发送到服务器以改变LED颜色。以下是将iro.js集成到网页后的颜色图片。 Iro.js 地址API操作手册 color:change # 每当所选颜色发生变化时触发 - 无论是当用户与颜色选…...

编程日记 2024/8/13 13:41:09

Z 字形遍历二叉树

假设一个二叉树上各结点的权值互不相同。 我们就可以通过其后序遍历和中序遍历来确定唯一二叉树。 请你输出该二叉树的 ZZ 字形遍历序列----也就是说&#xff0c;从根结点开始&#xff0c;逐层遍历&#xff0c;第一层从右到左遍历&#xff0c;第二层从左到右遍历&#xff0c;…...

编程日记 2024/8/13 13:40:08

[Vue]Vue3从入门到精通-综合案例分析

一.Vue是什么&#xff1a; 概念&#xff1a;Vue是一个用于构建用户界面的渐进式的框架 以下的内容是自里向外的 声明式渲染(Vuejs核心包)组件系统(Vuejs核心包)客户端路由VueRouter大规模状态管理Vuex构建工具Webpack/Vite Vue的两种使用方式&#xff1a; Vue核心包开发-&…...

编程日记 2024/8/13 13:38:06

深度学习——神经网络（neural network）详解（二）. 带手算步骤，步骤清晰0基础可看

深度学习——神经网络&#xff08;neural network&#xff09;详解&#xff08;二&#xff09;. 手算步骤&#xff0c;步骤清晰0基础可看 前文如下&#xff1a;深度学习——神经网络&#xff08;neural network&#xff09;详解&#xff08;一&#xff09;. 带手算步骤&#x…...

编程日记 2024/8/13 13:37:05

【扒网络架构】backbone、ccff

backbone CCFF 还不知道网络连接方式&#xff0c;只是知道了每一层 backbone backbone.backbone.conv1.weight torch.Size([64, 3, 7, 7])backbone.backbone.layer1.0.conv1.weight torch.Size([64, 64, 1, 1])backbone.backbone.layer1.0.conv2.weight torch.Size([64, 64,…...

编程日记 2024/8/13 13:36:02

linux进程

exit&#xff08;&#xff09;函数正常结束进程 man ps aux 是在使用 ps 命令时常用的一个选项组合&#xff0c;用于显示系统中所有进程的详细信息。aux 不是 ps 命令的一个正式选项&#xff0c;而是三个选项的组合&#xff1a;a, u, 和 x。这三个选项分别代表不同的含义&#…...

编程日记 2024/8/13 13:35:01

PRVF-4037 : CRS is not installed on any of the nodes

描述&#xff1a;公司要求替换centos&#xff0c;重新安装ORACLE LINUX RAC的数据库做备库&#xff0c;到时候切换成主库&#xff0c;安装Linux7GRID 19C 11G Oracle&#xff0c;顺利安装grid 19c&#xff0c;安装11G数据库软件的时候检测报如题错误&#xff1a;**PRVF-4037 …...

编程日记 2024/8/13 13:34:00

整理 酷炫 Flutter 开源UI框架 FAB

flutter_villains 灵活且易于使用的页面转换。 项目地址&#xff1a;https://github.com/Norbert515/flutter_villains 项目Demo&#xff1a;https://download.csdn.net/download/qq_36040764/89631324...

编程日记 2024/8/13 13:32:59

Unity 编写自己的aar库，接收Android广播（broadcastReceiver）并传递到Unity

编写本文是因为找了很多文章&#xff0c;都比较片段&#xff0c;不容易理解&#xff0c;对于Android新手来说理解起来不友好。我这里写了一个针对比较小白的文章&#xff0c;希望有所帮助。 Android端 首先还是先来写Android端&#xff0c;我们新建一个Android空项目&#xf…...

编程日记 2024/8/13 13:29:56

Mysql cast函数、cast用法、字符串转数字、字符串转日期、数据类型转换

文章目录 一、语法二、示例2.1、复杂示例 三、cast与convert的区别 CAST 函数是 SQL 中的一种类型转换函数&#xff0c;它用于将一个数据类型转换为另一个数据类型&#xff0c;这篇文章主要介绍了Mysql中Cast()函数的用法,需要的朋友可以参考下。 Mysql提供了两种将值转换成指…...

编程日记 2024/8/13 13:28:55

微信小程序开发之组件复用机制

新建复用文件&#xff0c;另外需要注册 behavior 例如&#xff1a; 在behavior.js文件中写入方法&#xff0c;并向外暴露出去 写法一&#xff1a; module.exportsBehavior({data: {num: 1},lifetimes: {created() {console.log(1);}} })写法二&#xff1a; const behavior …...

编程日记 2024/8/13 13:27:54

数据结构--线性表

数据结构分类 集合 线性结构(一对一) 树形结构(一对多) 图结构(多对多) 数据结构三要素 1、逻辑结构 2、数据的运算 3、存储结构&#xff08;物理结构&#xff09; 线性表分类 1、顺序表 2、链表 3、栈 4、队列 5、串 线性表--顺序表 顺序表的特点 顺序表的删除和插入…...

编程日记 2024/8/13 13:25:52

深入探针：PHP与DTrace的动态追踪艺术

标题&#xff1a;深入探针&#xff1a;PHP与DTrace的动态追踪艺术 在高性能的PHP应用开发中&#xff0c;深入理解代码的执行流程和性能瓶颈是至关重要的。DTrace&#xff0c;作为一种强大的动态追踪工具&#xff0c;为开发者提供了对PHP脚本运行时行为的深入洞察。本文将详细介…...

编程日记 2024/8/13 13:24:51

黑龙江日报报道第5届中国计算机应用技术大赛，赛氪提供赛事支持

2024年7月17日&#xff0c;黑龙江日报、极光新闻对在哈尔滨市举办的第5届中国计算机应用技术大赛全国总决赛进行了深入报道。此次大赛由中国计算机学会主办&#xff0c;中国计算机学会计算机应用专业委员会与赛氪网共同承办&#xff0c;吸引了来自全国各地的顶尖技术团队和选手…...

编程日记 2024/8/13 13:23:50

【计算机网络】LVS四层负载均衡器

https://mobian.blog.csdn.net/article/details/141093263 https://blog.csdn.net/weixin_42175752/article/details/139966198 《高并发的哲学原理》 &#xff08;基本来自本书&#xff09; 《亿级流量系统架构设计与实战》 LVS 章文嵩博士创造 LVS(IPVS&#xff09; 章⽂嵩发…...

编程日记 2024/8/13 13:22:49

Java 守护线程练习 (2024.8.12)

DaemonExercise package DaemonExercise20240812;public class DaemonExercise {public static void main(String[] args) {// 守护线程// 当普通线程执行完毕之后&#xff0c;守护线程没有继续执行的必要&#xff0c;所以说会逐步关闭&#xff08;并非瞬间关闭&#xff09;//…...

编程日记 2024/8/13 13:20:46

C#小桌面程序调试出错，如何解决？？

&#x1f3c6;本文收录于《CSDN问答解惑-专业版》专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收…...

编程日记 2024/8/13 13:18:44

Seatunnel Mysql数据同步到Mysql

环境 mysql-connector-java-8.0.28.jar、connector-cdc-mysql 配置 env {# You can set SeaTunnel environment configuration hereexecution.parallelism 2job.mode "STREAMING"# 10秒检查一次&#xff0c;可以适当加大这个值checkpoint.interval 10000#execu…...

编程日记 2024/8/13 13:17:43

Java Web —— 第五天（请求响应1）

postman Postman是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件 作用:常用于进行接口测试 简单参数 原始方式 在原始的web程序中&#xff0c;获取请求参数&#xff0c;需要通过HttpServletRequest 对象手动获 http://localhost:8080/simpleParam?nameTom&a…...

编程日记 2024/8/13 13:15:42

【LLMOps】手摸手教你把 Dify 接入微信生态

作者&#xff1a;韩方圆 "Dify on WeChat"开源项目作者 概述 微信作为最热门即时通信软件&#xff0c;拥有巨大的流量。 微信友好的聊天窗口是天然的AI应用LUI(Language User Interface)/CUI(Conversation User Interface)。 微信不仅有个人微信&#xff0c;同时提供…...

编程日记 2024/8/13 13:14:40

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令&#xff1a; return <value>;在收到客户端连接后&#xff0c;立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量&#xff08;如 $time_iso8601、$remote_addr 等&#xff09;&a…...

编程新知 2025/9/21 0:49:02

Spark 之 入门讲解详细版（1）

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

编程新知 2026/2/5 4:17:31

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

编程新知 2026/2/6 23:18:59

Cloudflare 从 Nginx 到 Pingora：性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

编程新知 2026/1/29 21:20:51

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

编程新知 2025/9/9 5:38:23

NFT模式：数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

编程新知 2026/1/31 23:23:23

浅谈不同二分算法的查找情况

二分算法原理比较简单&#xff0c;但是实际的算法模板却有很多&#xff0c;这一切都源于二分查找问题中的复杂情况和二分算法的边界处理&#xff0c;以下是博主对一些二分算法查找的情况分析。 需要说明的是&#xff0c;以下二分算法都是基于有序序列为升序有序的情况&#xf…...

编程新知 2025/9/14 7:37:32

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式&#xff1a;dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一&#xff0c;腐蚀跟膨胀属于反向操作&#xff0c;膨胀是把图像图像变大&#xff0c;而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...

编程新知 2026/2/8 22:00:17

LeetCode - 199. 二叉树的右视图

题目 199. 二叉树的右视图 - 力扣&#xff08;LeetCode&#xff09; 思路 右视图是指从树的右侧看&#xff0c;对于每一层&#xff0c;只能看到该层最右边的节点。实现思路是&#xff1a; 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...

编程新知 2025/9/13 20:07:18

【生成模型】视频生成论文调研

工作清单 上游应用方向&#xff1a;控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

编程新知 2025/9/9 8:40:47