七、ESP32-S3上使用MicroPython点亮WS2812智能LED灯珠并通过web控制和JS颜色选择器改变灯珠颜色
本地代码集成离线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库来添加一个颜色选择器控件，在无网络环境可以通过JavaScript将选中的颜色发送到服务器以改变LED颜色。以下是将iro.js集成到网页后的颜色图片。 Iro.js 地址API操作手册 color:change # 每当所选颜色发生变化时触发 - 无论是当用户与颜色选…...
Z 字形遍历二叉树
假设一个二叉树上各结点的权值互不相同。 我们就可以通过其后序遍历和中序遍历来确定唯一二叉树。 请你输出该二叉树的 ZZ 字形遍历序列----也就是说，从根结点开始，逐层遍历，第一层从右到左遍历，第二层从左到右遍历，…...
[Vue]Vue3从入门到精通-综合案例分析
一.Vue是什么： 概念：Vue是一个用于构建用户界面的渐进式的框架 以下的内容是自里向外的 声明式渲染(Vuejs核心包)组件系统(Vuejs核心包)客户端路由VueRouter大规模状态管理Vuex构建工具Webpack/Vite Vue的两种使用方式： Vue核心包开发-&…...
深度学习——神经网络（neural network）详解（二）. 带手算步骤，步骤清晰0基础可看
深度学习——神经网络（neural network）详解（二）. 手算步骤，步骤清晰0基础可看 前文如下：深度学习——神经网络（neural network）详解（一）. 带手算步骤&#x…...
【扒网络架构】backbone、ccff
backbone CCFF 还不知道网络连接方式，只是知道了每一层 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,…...
linux进程
exit（）函数正常结束进程 man ps aux 是在使用 ps 命令时常用的一个选项组合，用于显示系统中所有进程的详细信息。aux 不是 ps 命令的一个正式选项，而是三个选项的组合：a, u, 和 x。这三个选项分别代表不同的含义&#…...
PRVF-4037 : CRS is not installed on any of the nodes
描述：公司要求替换centos，重新安装ORACLE LINUX RAC的数据库做备库，到时候切换成主库，安装Linux7GRID 19C 11G Oracle，顺利安装grid 19c，安装11G数据库软件的时候检测报如题错误：**PRVF-4037 …...
整理 酷炫 Flutter 开源UI框架 FAB
flutter_villains 灵活且易于使用的页面转换。 项目地址：https://github.com/Norbert515/flutter_villains 项目Demo：https://download.csdn.net/download/qq_36040764/89631324...
Unity 编写自己的aar库，接收Android广播（broadcastReceiver）并传递到Unity
编写本文是因为找了很多文章，都比较片段，不容易理解，对于Android新手来说理解起来不友好。我这里写了一个针对比较小白的文章，希望有所帮助。 Android端 首先还是先来写Android端，我们新建一个Android空项目…...
Mysql cast函数、cast用法、字符串转数字、字符串转日期、数据类型转换
文章目录 一、语法二、示例2.1、复杂示例 三、cast与convert的区别 CAST 函数是 SQL 中的一种类型转换函数，它用于将一个数据类型转换为另一个数据类型，这篇文章主要介绍了Mysql中Cast()函数的用法,需要的朋友可以参考下。 Mysql提供了两种将值转换成指…...
微信小程序开发之组件复用机制
新建复用文件，另外需要注册 behavior 例如： 在behavior.js文件中写入方法，并向外暴露出去 写法一： module.exportsBehavior({data: {num: 1},lifetimes: {created() {console.log(1);}} })写法二： const behavior …...
数据结构--线性表
数据结构分类 集合 线性结构(一对一) 树形结构(一对多) 图结构(多对多) 数据结构三要素 1、逻辑结构 2、数据的运算 3、存储结构（物理结构） 线性表分类 1、顺序表 2、链表 3、栈 4、队列 5、串 线性表--顺序表 顺序表的特点 顺序表的删除和插入…...
深入探针：PHP与DTrace的动态追踪艺术
标题：深入探针：PHP与DTrace的动态追踪艺术 在高性能的PHP应用开发中，深入理解代码的执行流程和性能瓶颈是至关重要的。DTrace，作为一种强大的动态追踪工具，为开发者提供了对PHP脚本运行时行为的深入洞察。本文将详细介…...
黑龙江日报报道第5届中国计算机应用技术大赛，赛氪提供赛事支持
2024年7月17日，黑龙江日报、极光新闻对在哈尔滨市举办的第5届中国计算机应用技术大赛全国总决赛进行了深入报道。此次大赛由中国计算机学会主办，中国计算机学会计算机应用专业委员会与赛氪网共同承办，吸引了来自全国各地的顶尖技术团队和选手…...
【计算机网络】LVS四层负载均衡器
https://mobian.blog.csdn.net/article/details/141093263 https://blog.csdn.net/weixin_42175752/article/details/139966198 《高并发的哲学原理》 （基本来自本书） 《亿级流量系统架构设计与实战》 LVS 章文嵩博士创造 LVS(IPVS） 章⽂嵩发…...
)
Java 守护线程练习 (2024.8.12)
DaemonExercise package DaemonExercise20240812;public class DaemonExercise {public static void main(String[] args) {// 守护线程// 当普通线程执行完毕之后，守护线程没有继续执行的必要，所以说会逐步关闭（并非瞬间关闭）//…...
C#小桌面程序调试出错，如何解决？？
🏆本文收录于《CSDN问答解惑-专业版》专栏，主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案，希望能够助你一臂之力，帮你早日登顶实现财富自由🚀；同时，欢迎大家关注&&收…...
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秒检查一次，可以适当加大这个值checkpoint.interval 10000#execu…...
Java Web —— 第五天（请求响应1）
postman Postman是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件 作用:常用于进行接口测试 简单参数 原始方式 在原始的web程序中，获取请求参数，需要通过HttpServletRequest 对象手动获 http://localhost:8080/simpleParam?nameTom&a…...
【LLMOps】手摸手教你把 Dify 接入微信生态
作者：韩方圆 "Dify on WeChat"开源项目作者 概述 微信作为最热门即时通信软件，拥有巨大的流量。 微信友好的聊天窗口是天然的AI应用LUI(Language User Interface)/CUI(Conversation User Interface)。 微信不仅有个人微信，同时提供…...
vue3 字体颜色设置的多种方式
在Vue 3中设置字体颜色可以通过多种方式实现，这取决于你是想在组件内部直接设置，还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法： 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...
IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)
文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...
Hive 存储格式深度解析：从 TextFile 到 ORC，如何选对数据存储方案？
在大数据处理领域，Hive 作为 Hadoop 生态中重要的数据仓库工具，其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式，很多开发者常常陷入选择困境。本文将从底…...
MySQL 8.0 事务全面讲解
以下是一个结合两次回答的 MySQL 8.0 事务全面讲解，涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容，并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解 一、事务的核心概念（ACID） 事务是…...
GO协程(Goroutine)问题总结
在使用Go语言来编写代码时，遇到的一些问题总结一下 [参考文档]：https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现： 今天在看到这个教程的时候，在自己的电…...
pikachu靶场通关笔记19 SQL注入02-字符型注入(GET)
目录 一、SQL注入 二、字符型SQL注入 三、字符型注入与数字型注入 四、源码分析 五、渗透实战 1、渗透准备 2、SQL注入探测 （1）输入单引号 （2）万能注入语句 3、获取回显列orderby 4、获取数据库名database 5、获取表名…...
rknn toolkit2搭建和推理
安装Miniconda Miniconda - Anaconda Miniconda 选择一个 新的 版本 ，不用和RKNN的python版本保持一致 使用 ./xxx.sh进行安装 下面配置一下载源 # 清华大学源（最常用） conda config --add channels https://mirrors.tuna.tsinghua.edu.cn…...
篇章一 论坛系统——前置知识
目录 1.软件开发 1.1 软件的生命周期 1.2 面向对象 1.3 CS、BS架构 1.CS架构编辑 2.BS架构 1.4 软件需求 1.需求分类 2.需求获取 1.5 需求分析 1. 工作内容 1.6 面向对象分析 1.OOA的任务 2.统一建模语言UML 3. 用例模型 3.1 用例图的元素 3.2 建立用例模型 …...
Yolo11改进策略：Block改进|FCM，特征互补映射模块|AAAI 2025|即插即用
1 论文信息 FBRT-YOLO（Faster and Better for Real-Time Aerial Image Detection）是由北京理工大学团队提出的专用于航拍图像实时目标检测的创新框架，发表于AAAI 2025。论文针对航拍场景中小目标检测的核心难题展开研究，重点解决…...
SFTrack：面向警务无人机的自适应多目标跟踪算法——突破小尺度高速运动目标的追踪瓶颈
【导读】 本文针对无人机（UAV）视频中目标尺寸小、运动快导致的多目标跟踪难题，提出一种更简单高效的方法。核心创新在于从低置信度检测启动跟踪（贴合无人机场景特性），并改进传统外观匹配算法以关联此类检测…...