七、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的颜色。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/395381.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Oracle|DM 常用|不常用 SQL大口袋

Oracle|DM 常用|不常用 SQL大口袋

目录 一、前言 二、SQL写法 1、sql获取某一条数据中的前一条和后一条 2、实现like多个值的查询&#xff08;Oracle和dm支持&#xff0c;MySQL未试过&#xff09; 3、start with connect by prior 使用方法 4、用hextoraw解决select、update、delete语句执行慢 5、ORA-00…
阅读更多...
Vue+Element Plus后台管理主界面搭建实现

Vue+Element Plus后台管理主界面搭建实现

​ 续接Django REST Framework&#xff0c;使用Vite构建Vue3的前端项目 1. 后台管理系统主界面框架搭建 后台系统主界面搭建 新建后台管理文件目录 完成后台整体布局 // 1.主界面 index.vue<script setup lang"ts"></script><template><el-…
阅读更多...
初识自然语言处理NLP

初识自然语言处理NLP

文章目录 1、简介2、自然语言处理的发展简史3、语言学理论句法学&#xff08;Syntax&#xff09;语义学&#xff08;Semantics&#xff09;语用学&#xff08;Pragmatics&#xff09;形态学&#xff08;Morphology&#xff09; 4、统计与机器学习方法n-gram 模型隐马尔可夫模型…
阅读更多...
C++20中的模块

C++20中的模块

大多数C项目使用多个翻译单元(translation units)&#xff0c;因此它们需要在这些单元之间共享声明和定义(share declarations and definitions)。headers的使用在这方面非常突出。模块(module)是一种language feature&#xff0c;用于在翻译单元之间共享声明和定义。它们是某些…
阅读更多...
怎么用云手机进行TikTok矩阵运营

怎么用云手机进行TikTok矩阵运营

TikTok作为炙手可热的社交媒体巨头&#xff0c;已经吸引了亿万用户的目光。随着科技的飞速发展&#xff0c;云手机的出现为TikTok矩阵运营注入了新的活力。本文将深入探讨云手机在TikTok矩阵运营中的实际应用&#xff0c;并分享一系列高效策略与技巧。 &#xff08;1&#xff0…
阅读更多...
DGA上的动态规划

DGA上的动态规划

前言&#xff1a;之前都没有写过建模成有向图来动态规划的&#xff0c;但是这个题可以抽象成有向图来做 我们可以用方块的编号和高来确定底下的长和宽 其实这题说白了就是一个记忆化搜索&#xff0c;但是不知道能不能建模出来而已 #define _CRT_SECURE_NO_WARNINGS #include&l…
阅读更多...
39.【C语言】指针（重难点）（D）

39.【C语言】指针（重难点）（D）

目录 10.野指针 *定义 *案例 11.野指针规避方法 *初始化 *防止越界 *指针变量不再使用时&#xff0c;及时置NULL&#xff0c;指针使用之前检查有效性 *避免返回局部变量的地址 *assert断言 12.assert断言 *解释 *作用 *优点 *启用assert的开关 往期推荐 承接上篇 38.【C语言】指…
阅读更多...
Qt实现类似淘宝商品展示看板功能简版

Qt实现类似淘宝商品展示看板功能简版

前一篇文章的简化版本只有浏览功能&#xff0c;前一篇文章链接如下&#xff1a; Qt实现类似淘宝商品看板的界面&#xff0c;带有循环翻页以及点击某页跳转的功能 效果如下&#xff1a; 代码留给有需要的人。 #ifndef ModelDashboardGroup_h__ #define ModelDashboardGroup_…
阅读更多...
选择叮咚门铃的材质注意事项

选择叮咚门铃的材质注意事项

在挑选叮咚门铃时&#xff0c;材质是一个不容忽视的重要因素。合适的材质不仅能确保门铃的耐用性和美观度&#xff0c;还能影响其性能和使用体验。 塑料材质的叮咚门铃是较为常见且经济实惠的选择。它轻巧且易于成型&#xff0c;可以被设计成各种独特的形状和颜色&#xff0c;为…
阅读更多...
Java开发笔记--通用基础数据校验的设计

Java开发笔记--通用基础数据校验的设计

最近在开发一个功能&#xff0c;对排水管网的基础数据(包括管井、管道、泵站&#xff0c;雨水口&#xff0c;雨水口线&#xff0c;泵站&#xff0c;污水处理厂&#xff0c;排口等)的导入进行校验。 以字段为纬度&#xff0c;考虑二个方面的校验&#xff1a;数据库唯一&#xf…
阅读更多...
【Windows】如何用防火墙禁用某个软件联网

【Windows】如何用防火墙禁用某个软件联网

我们使用一些激活软件时&#xff0c;经常需要防止软件联网造成激活失效&#xff0c;以下说明如何通过防火墙配置屏蔽掉软件联网。 以下说明手动添加防火墙拦截的方法&#xff1a; 使用【WinR】快捷键打开运行窗口然后输入【wf.msc】 点击确定。 点击左侧的出站规则然后点击右…
阅读更多...
el-table自动滚动到最底部

el-table自动滚动到最底部

我的需求是这样的&#xff0c;因为我的表格是动态的&#xff0c;可以手动新增行&#xff0c;固定表头&#xff0c;而且需要一屏显示&#xff0c;为了方便用户就需要再新增的时候表格自动向上滚动。 差了官方文档后发现有一个属性可以支持 这个属性正是自己需要的&#xff0c;所…
阅读更多...
Python面试宝典第30题：找出第K大元素

Python面试宝典第30题：找出第K大元素

题目 给定一个整数数组nums&#xff0c;请找出数组中第K大的数&#xff0c;保证答案存在。其中&#xff0c;1 < K < nums数组长度。 示例 1&#xff1a; 输入&#xff1a;nums [3, 2, 1, 5, 6, 4], K 2 输出&#xff1a;5 示例 2&#xff1a; 输入&#xff1a;nums …
阅读更多...
Rest风格快速开发

Rest风格快速开发

Rest风格开发简介 简单点来说&#xff0c;Rest风格的开发就是让别人不知道你在做什么&#xff0c;以deleteUserById和selectUserById为例&#xff1a; 普通开发&#xff1a;路径 /users/deleteById?Id666 /users/selectById?Id666 别人很容易知道你这是在干什么 Rest风…
阅读更多...
JavaScript骚操作媒体查询攻略

JavaScript骚操作媒体查询攻略

背景 一讲到媒体查询&#xff0c;大家首先想到的可能都是都是CSS中media,这也没错&#xff0c;这确实是最常见的媒体查询方式&#xff0c;但是我们今天要讲的不是它&#xff0c;而是大家很少接触到的window.matchMedia()和window.resize 最近在做项目的时候拿到一个需求&…
阅读更多...
【Qt】多种控件实现“hello world“

【Qt】多种控件实现“hello world“

使用编辑框的方式实现"hello wordl" 使用编辑框实现"hello world"的方式有俩种&#xff1a; 单行编辑框&#xff1a;LineEdit多行编辑框&#xff1a;TextEdit 图形化界面 纯代码方式 代码展示&#xff1a; #include "widget.h" #include &qu…
阅读更多...
Python实战：基础语法

Python实战：基础语法

一、求解列表中的最大元素 import random#定义函数 def get_max(lst):x lst[0] #x存储的是元素的最大值#遍历操作for i in range(1,len(lst)):if lst[i] > x:x lst[i] #对最大值进行重新赋值return x#调用函数 lst [random.randint(1,100) for item in range(10)] print…
阅读更多...
YARN 调度器的配置与使用

YARN 调度器的配置与使用

YARN 调度器的配置与使用 一、启动公平调度器1.1 配置 yarn-site.xml创建 fail-scheduler.xml 文件 二、同步配置文件三、重启启动 YARN 集群四、提交作业五、运行结果 一、启动公平调度器 公平调度器的使用由属性yarn.resourcemanager.scheduler.class的设置所决定。YARN默认…
阅读更多...
mybatis-plus雪花算法

mybatis-plus雪花算法

苞米豆mybatis-plus已实现雪花算法&#xff0c;若项目中使用雪花算法生成自增主键&#xff0c;可直接引用相关jar实现其工具类&#xff0c;若不想再单独引用jar也可将其Sequence类直接复制到自己项目中定义为工具类使用 官方文档&#xff1a;https://baomidou.com/ Git地址&am…
阅读更多...
C++ | Leetcode C++题解之第330题按要求补齐数组

C++ | Leetcode C++题解之第330题按要求补齐数组

题目&#xff1a; 题解&#xff1a; class Solution { public:int minPatches(vector<int>& nums, int n) {int patches 0;long long x 1;int length nums.size(), index 0;while (x < n) {if (index < length && nums[index] < x) {x nums[i…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023