基于CircuitPython与精灵图技术打造可穿戴LED动画眼镜

1. 项目概述：用像素动画点亮你的创意眼镜

如果你对嵌入式开发、像素艺术或者可穿戴设备感兴趣，那么自己动手制作一副能显示自定义动画的LED眼镜，绝对是一个能带来巨大成就感和回头率的项目。这不仅仅是把一堆LED灯焊接到眼镜框上那么简单，它涉及到从图形设计、格式转换到微控制器编程的一整套创意技术流程。想象一下，你走在街上，眼镜上闪烁着你自己设计的眨眼动画或跑动的小幽灵，这种将数字创意实体化并随身佩戴的体验，是任何屏幕都无法替代的。

这个项目的核心，在于巧妙地运用了“精灵图”这项经典技术。简单来说，精灵图就像一张动画胶片，把动画的每一帧画面，像拍电影一样纵向排列在一张长长的图片里。我们的程序则扮演放映机的角色，按照设定的速度和顺序，依次显示这张长图中的不同片段，从而在人眼中形成连贯的动画。这种方法在早期的电子游戏和现在的嵌入式设备中非常流行，因为它能极大地节省宝贵的内存和处理器资源——你只需要加载一张图片，并通过计算偏移量来切换画面，而不是为每一帧动画都准备一个独立的文件。

我们将使用Adafruit的LED眼镜套件作为硬件平台，它包含了一块密集排列着116颗RGB LED的矩阵面板和一个基于nRF52840的强大驱动板。软件层面，CircuitPython是我们的得力助手，它是一种为教育和小型嵌入式设备设计的Python方言，让你能用熟悉的Python语法直接操控硬件，免去了复杂的环境配置和编译过程。整个项目的旅程可以概括为三步：首先，用在线工具Piskel绘制并编排你的像素动画，导出为精灵图；然后，将图片转换为嵌入式系统兼容的8位BMP格式；最后，编写一段简洁的CircuitPython代码，让眼镜能够读取这张图，并根据你的动作（比如抬头）来切换不同的动画。

2. 硬件准备与组装要点

2.1 核心组件解析

要开始这个项目，你需要一套Adafruit LED眼镜套件。它主要包含三个核心部分：

1. LED眼镜前面板：这是一块印刷电路板，上面集成了116颗WS2812B或类似的智能RGB LED。它们被排列成一个18列×5行的主矩阵（用于显示眼睛等图形）和两个分别围绕左右眼的24颗LED圆环。所有LED都通过一根I2C总线控制，极大地简化了布线。
2. LED眼镜驱动板：基于Nordic nRF52840芯片，它不仅是LED的驱动器，更是一个完整的微控制器。它集成了蓝牙、加速度计和用户按钮，为我们实现动画切换和亮度调节提供了硬件基础。通过板载的STEMMA QT连接器，它可以与前面板快速插接，无需焊接。
3. 配件包：通常包含眼镜框、用于固定的扎带或高强度线、电池扩展线以及一个便携的锂电池组。电池组是点睛之笔，让眼镜真正摆脱线缆束缚，成为可穿戴设备。

注意：务必确认你拿到的是“数据同步”USB线，而非仅能充电的线。许多新手卡在第一步无法给驱动板烧录固件，问题往往就出在线上。一个简单的判断方法是，用这根线连接手机和电脑，看是否能传输文件。

2.2 眼镜组装实操与技巧

组装过程追求稳固和舒适，毕竟你要把它戴在头上。

1. 固定前面板：将LED前面板对准眼镜框的鼻托和镜圈位置。使用配件包中的细扎带或者结实的尼龙线进行固定。我的经验是，在镜框上部和下部各固定两个点，共四个固定点，能有效防止面板晃动或旋转。如果用线缝合，记得在打结后点一滴速干胶水，防止线结松脱。
2. 连接驱动板：将驱动板通过附带的STEMMA QT连接线插到前面板的对应接口上。听到轻微的“咔嗒”声表示已插稳。这个接口是有防呆设计的，一般不会插反。
3. 固定驱动板：驱动板通常放置在左侧镜腿末端内侧。我使用强力双面胶（如VHB胶带）先将其初步粘牢，然后再用扎带或缝线进行加固。这里有个细节：确保驱动板上的用户按钮朝外，方便手指按压；同时，加速度计芯片应大致水平，以保证头部动作检测的准确性。
4. 连接电池：将电池组的输出线通过延长线连接到驱动板的电源接口。你可以把电池组放在口袋裡，或者利用其背夹固定在衣领、腰带处。布线时，让电线沿着镜腿后部走，并用一小段电工胶布或魔术贴扎带固定，避免垂下的线缆影响活动。

组装完成后，先不要急着戴，连接USB线到电脑测试一下基本功能。如果驱动板上的LED能亮起，并在电脑上出现一个名为GLASSESBOOT的磁盘，说明硬件连接基本正常。

3. 像素艺术创作：在微小的画布上施展魔法

3.1 理解画布：18x5的像素世界

我们的主显示区域是一个18像素宽、5像素高的矩阵。这包括了“左眼”、“右眼”以及中间的“鼻梁”区域。因此，每个独立的“眼睛”图形，宽度最好控制在5到7个像素，高度不超过5个像素。中间需要留出几个像素作为间隔，让两只眼睛看起来是分开的。

在如此低的分辨率下作画，是一种独特的挑战，也是乐趣所在。每一个像素都举足轻重。你不能绘制复杂的曲线，而是要用方块的组合来暗示形状。例如，一个圆形的眼睛，可能只是一个3x3的像素方块，其中四个角被去掉。这种限制反而激发了创造力，让人联想到早期的电子游戏和计算机艺术。

实操心得：开始创作前，强烈建议进行“灵感采集”。在谷歌图片搜索中，使用“sprite 5 pixels high”、“micro pixel art”、“low res eyes”等关键词，并利用搜索工具的“尺寸->图标”筛选功能，能找到大量现成的5像素高度精灵图。这不是抄袭，而是学习他人如何用极简的像素表达情绪和动态，是快速上手的捷径。

3.2 使用Piskel制作动画精灵图

Piskel是一个免费、基于浏览器的像素艺术与动画编辑工具，非常适合本项目。

1. 创建画布：访问Piskel官网，点击“Create a sprite”。在右侧工具面板中找到“Resize”工具，将画布尺寸设置为宽18像素，高5像素。这个狭长的画布就是我们整个动画的舞台。
2. 绘制第一帧：利用左侧的绘图工具开始创作。铅笔工具用于逐像素绘制，填充桶用于快速上色。这里重点推荐两个神器：
   • 垂直镜像笔：选中后，你在画布一侧绘制，另一侧会自动生成对称的图形。这对于画一双完全一样的眼睛来说，效率提升不止一倍。
   • 提亮/减暗工具：它不是简单地改变颜色，而是调整当前颜色的明度。在5像素的微小空间里，用这个工具在眼球的高光点轻轻点一下，就能立刻产生立体感，这是让图形“活过来”的关键。
3. 规划布局：我个人的成功经验是，将每只眼睛设计为5x5像素，并让它们在18像素宽的画布上居中。具体来说，左右各留2像素空白作为边界，两眼之间留4像素空白作为鼻梁区。这样布局的好处是，在为眼睛添加左右移动的动画时，有足够的缓冲空间，不会让眼睛看起来像是要“撞”到边界或者“挤”过鼻梁。

3.3 让像素动起来：动画帧制作

静态的像素图很有趣，但动画才能让它真正吸引人。

1. 复制帧：将鼠标悬停在图层面板的第一帧上，点击“复制帧”图标。这样就创建了第二帧，内容与第一帧完全相同。
2. 创造变化：在第二帧上，使用选择工具框选住两只眼睛（或你想移动的部分），按住键盘的方向键（或按住Shift键用鼠标拖动），将整个选区向左或向右移动1个像素。这时，你可以在右侧的预览窗口看到眼睛“跳”了一下。
3. 调整速度：通过调整“FPS”（每秒帧数）滑块来控制动画播放速度。对于LED眼镜这种设备，动画速度不宜过快。我通常设置在1到3 FPS之间，这样动画显得从容不迫，也更省电。一个技巧：更低的FPS意味着你可以用更少的帧数来达到满意的动画时长。例如，一个4帧的眨眼动画在2 FPS下会持续2秒，观感已经足够。
4. 丰富动画序列：重复“复制帧”和“修改”的步骤。你可以制作眼睛左右扫视、瞳孔放大缩小、甚至眨眼、 wink（单眼眨）的动画。例如，制作眨眼动画时，可以复制一帧，然后用深色或背景色填充眼睛上半部分的2-3行像素，在下一帧再恢复原状。
5. 关键一步：填充透明背景：在导出前，务必选择黑色填充桶，将画布上所有透明的像素区域填充为纯黑色（RGB值 0，0，0）。这是因为许多图像处理库或转换工具会将透明通道默认解释为白色。如果背景是透明的，最终在眼镜上显示时，你精心设计的眼睛周围可能会出现一圈刺眼的白色光晕，完全破坏效果。填充黑色则能确保未使用的像素保持熄灭状态。

4. 格式转换与CircuitPython环境部署

4.1 从PNG到8位BMP：格式转换的深坑与正确姿势

在Piskel中完成动画后，点击“导出”按钮，选择“PNG”标签页。将“布局”设置为“1列”，行数会自动匹配你的动画总帧数。点击下载，你会得到一个纵向排列所有动画帧的细长PNG图片。

然而，CircuitPython的displayio等图形库对BMP位图的支持最为直接和高效，尤其是**索引色（Indexed Color）**的BMP。我们需要进行转换。

1. 为什么是8位索引色BMP？索引色BMP使用一个最多包含256种颜色的调色板。每个像素不存储完整的RGB值，而是存储一个指向调色板的索引号。这大大减少了文件体积，对于只有寥寥数种颜色的像素动画来说非常合适，也减轻了微控制器读取和解析文件的负担。16位或24位的BMP虽然颜色更丰富，但文件更大，解析更慢，可能造成动画卡顿。
2. 在线转换方法：访问如online-converting.com/image/convert2bmp/这类在线转换网站。上传你的PNG文件后，关键步骤是在高级选项或颜色设置中，将“颜色深度”或“颜色”选项改为“8位（索引）”或“256色”。然后进行转换并下载。务必检查生成的文件大小，一个18像素宽、5*N帧高的8位BMP文件应该非常小（N为帧数）。
3. Photoshop本地转换：如果你使用Photoshop，流程是：打开PNG ->图像->模式->索引颜色。在弹窗中，调板选择“局部（可感知）”，颜色数可以设置为一个较低的值（如16或32），强制仿色选择“无”。然后通过文件->存储为副本，选择BMP格式保存。在BMP选项对话框中，选择“Windows”格式和“8位”深度。

避坑指南：转换后，务必用图片查看器打开检查。如果图片背景呈现为灰白格子（表示透明），或者颜色严重失真，说明转换时透明通道处理有误或调色板丢失。请回到Piskel确认背景已填黑，并尝试另一个转换工具或调整转换参数。

4.2 CircuitPython固件烧录与库文件准备

1. 下载固件：前往CircuitPython官网，根据你的驱动板型号（Adafruit LED Glasses Driver - nRF52840）下载最新的.uf2固件文件。
2. 进入引导加载模式：用数据线连接眼镜驱动板和电脑。快速双击驱动板上的复位按钮（通常旁边标有RESET）。此时，板载RGB LED会变为绿色，电脑上会出现一个名为GLASSESBOOT或NRF52BOOT的U盘。
3. 拖放烧录：将下载好的.uf2文件直接拖入这个U盘。U盘会自动弹出，稍等片刻，电脑上会出现一个新的名为CIRCUITPY的U盘。这表明CircuitPython系统已经成功刷入。
4. 安装必要的库：要让我们的动画代码运行，需要将特定的库文件放入CIRCUITPY盘下的lib文件夹中。本项目必需的库通常包括：
   • adafruit_lis3dh.mpy：用于读取板载加速度计（检测抬头动作）。
   • adafruit_is31fl3741.mpy：这是驱动LED矩阵芯片的核心库。
   • adafruit_ledglasses.mpy：针对眼镜硬件的上层封装库，简化操作。
   • adafruit_bus_device：I2C通信支持库。 这些库可以在Adafruit的CircuitPython库包中找到。最简单的方法是下载整个项目的“项目包”，它通常包含了代码和所有依赖库。

5. 代码深度解析与个性化定制

5.1 项目结构与核心代码逻辑

将下载或编写好的code.py文件放到CIRCUITPY盘的根目录。同时，在根目录下创建一个名为images的文件夹，将你转换好的所有8位BMP精灵图文件放入其中。

让我们深入理解代码是如何工作的。核心逻辑可以分为四个部分：

1. 初始化与配置：代码开头导入所有必需的库，并定义了用户可配置的参数ANIM_DELAY（动画帧延迟，控制速度）和BRIGHT_LEVELS（亮度等级元组）。然后，它会自动扫描/images文件夹，将所有.bmp文件路径存入一个列表。
2. 硬件初始化：建立I2C通信，初始化加速度计和用户按钮，并创建LED_Glasses对象。glasses.global_current = 20这一行设定了初始电流限制，从而控制亮度，值越小越暗。
3. 动画引擎设置：EyeLightsAnim对象被创建，它负责加载精灵图文件并管理动画帧的切换。在初始化时，我们传入了第一个动画文件的路径给矩阵部分，而给圆环部分传入了None，表示我们暂时不驱动圆环LED。
4. 主循环：这是一个永不停止的while True循环，它持续做三件事：
   • 读取加速度计：通过一个简单的低通滤波器（filtered_y = filtered_y * 0.85 + y * 0.15）平滑Y轴数据，防止微小抖动误触发。当检测到头部上仰（Y轴加速度小于-5）时，切换到下一个动画文件。
   • 检测按钮按压：当用户按钮被按下时，循环切换BRIGHT_LEVELS中预设的亮度值，并更新LED的全局电流。
   • 推进动画与显示：调用anim.frame()来将精灵图的显示区域切换到下一帧，然后调用glasses.show()将帧缓冲区的内容发送到实际的LED上显示。

5.2 关键参数调优与功能扩展

理解了框架后，你可以轻松地定制它：

• 调整动画速度：直接修改ANIM_DELAY的值。增加它（例如改为0.1）会使动画变慢，减少它（例如改为0.05）会使动画变快。注意，这个延迟加上代码执行时间，共同决定了实际帧率。
• 自定义亮度等级：BRIGHT_LEVELS = (0, 10, 20, 40)。这里的数值代表驱动电流的级别，并非亮度百分比。0并非完全熄灭（可能有极微弱的电流），10已经很适合夜间室内，40在白天室外也能看清。你可以添加更多级别，如(0, 5, 10, 20, 30, 40)，以获得更精细的控制。
• 修改触发动作：默认是抬头触发切换。如果你想改为低头触发，只需将判断条件从filtered_y < -5和filtered_y > -3.5的逻辑反转即可。例如，将looking_up的判断改为filtered_y > 5（低头）。
• 启用圆环动画：代码中anim = EyeLightsAnim(glasses, ANIM_FILES[0], None)的第二个参数None是留给圆环动画文件的。如果你想同时驱动圆环，需要准备另一套针对48像素高（24像素*2圆环）的精灵图，并将None替换为对应的文件路径，例如ANIM_FILES[1]。注意，矩阵和圆环的动画是独立控制的，你可以让它们显示不同的动画序列。

5.3 代码中易忽略的细节与陷阱

1. 图像路径与命名：确保图像文件放在/images文件夹内，而不是根目录。代码中的列表推导式if not f.startswith("._")是为了过滤掉macOS系统可能产生的隐藏文件（如._cat_eyes.bmp），如果你在Windows上遇到找不到文件的问题，可以检查是否有此类文件。
2. 加速度计的滤波：filtered_y = filtered_y * 0.85 + y * 0.15这是一个一阶低通滤波器。0.85和0.15是滤波系数，它们的和为1。这个滤波器的目的是“平滑”原始加速度数据y，减少突然的抖动对状态判断的影响。系数0.85决定了历史数据的权重，值越大，滤波效果越强，响应越迟缓；值越小，对当前变化越敏感，但也越容易受噪声干扰。你可以调整这两个系数来改变动作检测的“灵敏度”和“迟滞感”。
3. 按钮防抖：代码中while not button.value: pass这行是一个简单的“等待释放”循环。它的作用是，当检测到按钮被按下后，程序会停在这里，直到按钮被松开。这防止了一次按压被误判为多次。这是一种软件防抖的简易实现。对于机械按钮，更健壮的做法可能是加入一个短暂的延时（如time.sleep(0.05)）来避开触点抖动的时段。

6. 故障排查与进阶调试

即使完全按照步骤操作，也可能会遇到问题。以下是常见问题及其解决方法：

进阶调试技巧：善用串口输出。在代码的关键位置（如切换动画时、按下按钮时）添加print语句，输出当前状态、读取的传感器值或文件名。通过Mu编辑器、Thonny或终端工具连接板子的串口，你可以实时看到这些信息，这对于定位问题发生在哪个环节至关重要。例如，你可以打印出filtered_y的值，观察在你抬头时这个值是否真的达到了负的阈值。