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

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

news 2025/11/5 2:39:58

本地代码集成离线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

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

编程新知 2025/10/31 15:31:54

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

编程新知 2025/10/25 12:40:33

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

编程新知 2025/10/28 0:58:21

#Uniapp篇：chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

编程新知 2025/9/14 3:58:53

视觉slam十四讲实践部分记录——ch2、ch3

ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件，或者在构建过程中仍然引用了旧的路…...

编程新知 2025/10/25 12:42:32

基于Java+MySQL实现（GUI）客户管理系统

客户资料管理系统的设计与实现 第一章 需求分析 1.1 需求总体介绍 本项目为了方便维护客户信息为了方便维护客户信息&#xff0c;对客户进行统一管理&#xff0c;可以把所有客户信息录入系统&#xff0c;进行维护和统计功能。可通过文件的方式保存相关录入数据&#xff0c;对…...

编程新知 2025/11/3 19:01:27

uniapp手机号一键登录保姆级教程（包含前端和后端）

目录 前置条件创建uniapp项目并关联uniClound云空间开启一键登录模块并开通一键登录服务编写云函数并上传部署获取手机号流程(第一种) 前端直接调用云函数获取手机号&#xff08;第三种&#xff09;后台调用云函数获取手机号 错误码常见问题 前置条件 手机安装有sim卡手机开启…...

编程新知 2025/10/30 5:13:28

linux设备重启后时间与网络时间不同步怎么解决？

linux设备重启后时间与网络时间不同步怎么解决&#xff1f; 设备只要一重启&#xff0c;时间又错了/偏了&#xff0c;明明刚刚对时还是对的&#xff01; 这在物联网、嵌入式开发环境特别常见&#xff0c;尤其是开发板、树莓派、rk3588 这类设备。 解决方法&#xff1a; 加硬件…...

编程新知 2025/10/5 13:11:58

Yolo11改进策略：Block改进|FCM，特征互补映射模块|AAAI 2025|即插即用

1 论文信息 FBRT-YOLO&#xff08;Faster and Better for Real-Time Aerial Image Detection&#xff09;是由北京理工大学团队提出的专用于航拍图像实时目标检测的创新框架&#xff0c;发表于AAAI 2025。论文针对航拍场景中小目标检测的核心难题展开研究&#xff0c;重点解决…...

编程新知 2025/10/25 8:26:31

机器学习复习3--模型评估

误差与过拟合 我们将学习器对样本的实际预测结果与样本的真实值之间的差异称为&#xff1a;误差&#xff08;error&#xff09;。 误差定义&#xff1a; ①在训练集上的误差称为训练误差&#xff08;training error&#xff09;或经验误差&#xff08;empirical error&#x…...

编程新知 2025/10/22 23:16:20