基于Beetle ESP32-C3的WiFi RGB氛围灯，支持40种动态效果

我有一台小巧的DFRobot Beetle ESP32-C3，还有一串8颗LED的WS2812环形灯，一直放在抽屉里。我想做一个小巧、常亮的桌面灯，能通过手机随时重新上色和播放动画，无需每次安装应用或打开Arduino IDE。没有应用商店，没有云账户，也不需要额外零件——只需两个组件、三根电线和一个网页即可实现。

最初只是用两根线测试“它能亮起来吗?”的功能，逐渐逐步添加功能，最终发展成一款出人意料地完整的小型产品：

•可在同一Wi-Fi网络下的任意设备上通过网页完全控制(无需应用)。

•40种动态效果，按情绪标签分类(宁静/环境/派对/欢乐)，配有搜索框，以及自动循环模式。

•页面上提供环形实时预览：八个发光点呈圆形排列(与真实硬件一致)，精确反映灯环的实际运行状态，包括火焰效果的闪烁细节。

•设置可保存在断电后仍有效(颜色、效果、亮度、速度)，并设有亮度最低阈值，确保灯光不会在关机时变暗。一个可捕获门户的首次运行设置，让你再也不用硬编码WiFi，还配备一键重置WiFi按钮。

•整洁的3D打印外壳(由Justway打印)，看起来像成品，而不是面包板。

本文将详细介绍整个构建过程、设计决策、我遇到的一个死胡同(以及它让我了解到ESP32-C3无线电模块的特性)，以及完整的固件。

你需要的材料

仅需两个组件——这就是整个构建的核心。无需电阻、电容或扩展板。

硬件

•DFRobot Beetle ESP32-C3 — 一款拇指大小的ESP32-C3开发板，配备USB-C接口和分体式引脚(5V、GND、GPIO0/1等)。

•WS2812 / WS2812B 8颗LED环灯(“8位”NeoPixel环)——需3个引脚：VCC、GND、DIN。任何支持8颗LED可寻址的环灯均可使用。

以上就是全部配置。电源和闪烁控制通过Beetle的USB-C线缆实现，外壳为可选配件——由Justway印刷的双色塑料外壳(白色扩散罩+黑色底座，参见外壳部分说明)。

软件

•使用 ESP32 板载软件包(Espressif，核心 3.x)的 Arduino IDE(或 arduino-cli)。

•Adafruit NeoPixel 库。

•板卡选择：“DFRobot Beetle ESP32-C3”(esp32:esp32:dfrobot_beetle_esp32c3)。

工作原理(30秒版)

ESP32-C3 会连接到你的 WiFi 并运行一个小型 Web 服务器。打开 http://beetle.local(或板卡的 IP 地址)，即可访问控制页面。移动滑块或点击效果时，会发送轻量级请求，例如 /set?bright=120 或 /set?mode=5;固件会更新其状态，而 loop() 函数则将选定的动画渲染到环形灯上。另外还有一个独立的 /pixels 端点用于报告环形灯当前的实时颜色，页面每秒约 8 次轮询该端点以实现屏幕预览动画。设置经过去抖处理，并保存到闪存中，因此在断电后仍可恢复。

1 — 线路连接

两个组件之间仅需三组连接：WS2812 环形灯有 VCC、GND 和 DIN(数据输入引脚——使用 DIN 引脚，而非 DOUT)。

•VCC (+) → Beetle 5V

•GND (−) → Beetle GND

•DIN(数据)→ Beetle GPIO 0(D0)

笔记

•电源应使用5V，而不是3.3V——在3.3V下，LED灯会显得较暗，颜色也会发生变化。

•C3的DIN引脚为3.3V逻辑电平，可直接驱动一个8颗LED的环形灯串——对于如此小的灯串，无需使用电平转换器、电阻或电容。(在更长的灯带中，通常会在DIN上加一个约330Ω的串联电阻，并在VCC/GND之间加一个1000µF电容，但对8颗LED来说，这种配置完全适用。)

•8颗LED在全白模式下可消耗约0.5A电流，远超USB供电能力(舒适范围)。此外，固件还设置了亮度最低阈值，确保系统不会启动时出现完全黑暗的情况。

GPIO0是ESP32-C3上的引导引脚。WS2812的数据输入具有高阻抗特性，因此不会干扰系统启动过程。但请注意：不要在开机时连接任何会拉低D0的电路，否则芯片可能进入下载模式。

2 — 固件设置

•在Arduino IDE中，添加ESP32板卡的URL，通过“工具”→“管理板”安装esp32模块。

•从“库”中安装Adafruit NeoPixel。

•选择板卡DFRobot Beetle ESP32-C3。

•打开示例代码(附带文件：Beetle_8LED_Test.ino)，将WiFi设置为顶部附近的默认备用选项，然后上传程序。

提示：ESP32-C3采用原生USB-Serial/JTAG接口，启动后会重新枚举，因此串口IP输出可能会短暂闪烁。建议通过beetle.local(mDNS)进行访问;若网络环境支持该方式，则操作更为简便。本地无法解析，请从您的路由器查找IP地址。

3 — 网页控制页面

所有内容都集成在一个独立的页面中，直接由主控板提供服务——无需外部库，刷机后无需联网，因此可即时加载。这是实时运行的页面，Beetle 在 http://beetle.local 上实际提供的页面，截图时 Auto-cycle 正在运行。左侧：环形实时预览，下方显示当前效果名称;电源按钮、带八个快速点击色块的色彩条，以及带有实时读数的亮度滑块。右侧：完整的 40 种效果网格——绿色按钮显示当前正在播放的效果;速度滑块，以及可折叠的设备行(其中包含重置 WiFi 的功能)。

您将获得：

- 环形实时预览：8 个点呈圆形排列(与硬件一致)，实时镜像真实环状画面，下方显示当前效果名称。

- 电源开关。

- 色彩选择器 + 8 个快速点击色块。

- 亮度和速度滑块，均显示实时数值。

- 效果网格：40 种效果以紧凑的三列布局呈现，每种效果名称旁显示总数。情绪标签 — 按氛围筛选效果：全部 / 宁静 / 环境 / 派对 / 乐趣 — 另外还设有搜索框，可直接按名称跳转到特定效果。

- 自动循环 — 每个效果8秒，共40个效果轮播播放。

- 设备 — 一个重置WiFi的按钮。

这些按钮通过JavaScript从名称数组生成，实际上使页面比硬编码40个按钮更小。另一个并行数组为每个效果标记了情绪标签，使得标签页可以完全在客户端实现即时过滤：

情绪筛选功能仅包含几行代码 — 它将当前选中的标签页与搜索文本结合，动态显示或隐藏按钮，因此无需复杂的框架，也不需要大量资源：

4 — 40个效果

效果组合包括跟随你选择颜色的动画和自定义着色动画，按你用于筛选的相同情绪标签分组展示：

•宁静 — 固定色、呼吸、发光、渐变、波浪、极光、柔和色

•环境 — 火焰、海洋、等离子、蜡烛、蓝火、熔岩、气泡

•派对 — 彩虹、剧院、彩纸雨、闪烁、警灯、烟花、交替、溶解、雨闪、VUmeter

•乐趣 — 追逐、闪烁、彗星、擦除、扫描、流星、闪光、双眼、心跳、心形、弹跳、雨闪、擦除循环、雨扫、雨彗星、蛇形

最新加入的八个效果完善了整体内容：

•极光 — 慢速的绿色→蓝色→紫色波浪，如同北极光

•熔岩 — 温暖的红色/橙色熔融形态

•雨尾彗星 — 彩虹状头部，带有逐渐消退的长尾

•气泡 — 随机颜色的弹出物，持续存在并逐渐淡去

•雨闪 — 整个环形在每拍都闪烁出一种全新的随机颜色

•蛇形 — 一条3像素长的蛇(你的颜色)在环上滑动

•V计数器 — 一个上下跳动的条形进度条，从绿色变为红色

•柔和色调 — 轻柔、褪色的闪光点，温和而平静

渲染器是效果索引上的单个开关，每次循环都会触发。大多数效果仅需几行代码。例如，使用8个热单元的经典火焰效果：

自动循环功能只需定时器推进当前激活的效果，因此LED灯(以及屏幕预览和效果名称)可自动无缝地遍历整个效果集：

对8个LED来说，现实检查：八个像素是一个小画布。大约24种效果后，新效果开始成为旧效果的变体——这正是为什么情绪标签比单纯数量更重要：40个效果会让人难以浏览，但若筛选到“平静”或“派对”等类别，便很容易查看。独特的视觉呈现加上良好的滑块操作，远胜于庞大的无区别的列表。

5 — 环形实时预览

(最有趣的部分)而不是在 JavaScript 中重新模拟每个效果(容易出错，且会与硬件产生偏差)，该板直接报告其自身的像素缓冲区。一个 /pixels 端点返回八个实时颜色;页面以约每秒 8 次的速度绘制出八个具有相同光晕效果的 CSS 圆形。由于硬件为环状结构，预览点也以圆形排列——加载时只需几行三角函数即可定位它们：

主板端会将像素缓冲区进行序列化处理：

这是一个精确的镜像——预览画面随着火焰闪烁，伴随着彩虹扫过，并准确显示当前Auto-cycle正在播放的效果。

6 — 持久性、首次设置与重置

三个提升使用体验的功能，让设备感觉已完美完成：

持久性设置。颜色、效果、亮度、速度和电源状态都会被保存到闪存(NVS)中，并带有去抖功能，因此拖动滑块时不会对闪存造成冲击。任何断电后，设备都能恢复到你上次设置的状态。此外还设有亮度下限，确保即使保存的值为0，也不会让你看到黑暗的环状画面：

专属门户设置。如果没有保存的Wi-Fi网络(或在重置后)，设备会自动启动自己的开放网络“Beetle-Setup”：连接手机后，系统会自动弹出设置页面;扫描你的网络，输入密码后，设备便会重新启动并接入你的Wi-Fi网络。无需再次刷机即可切换网络。

重置Wi-Fi。控制页面上的红色按钮(位于确认按钮后方)可清除已保存的凭据，直接重启进入该设置门户，因此你可以随时将其移至新的网络。LED设置会被保留，仅清空网络信息。一个值得分享的死胡同：“无需WiFi即可控制”

我尝试让这块电路板同时广播自己的常开热点(AP和STA同时开启)，以便即使远离路由器也能控制它。这工作了大约一分钟……然后我的家庭WiFi就不断断。

教训：ESP32-C3只有一个无线电，每次只能占用一个频道。如果同时运行自己的接入点并保持连接到不同频道的路由器，就会产生冲突，导致STA连接变得不稳定。因此我重新回到了纯站式模式(极其稳定)，而实现该芯片“无WiFi”控制的正确方式是使用物理按钮(内置的BOOT/GPIO9)——无需无线电，也不会造成系统不稳定。这也提醒我们，在单无线电芯片上，“简单启用两者”并非免费。

7 — 外壳设计(由Justway打印)

裸板在实验台上没问题，但我希望这个设备看起来像真正的台灯。我设计了一个简单的两部分、双色外壳，并委托Justway用塑料3D打印出来：

•白色顶部——覆盖在8颗LED环上的扩散罩。白色塑料能散射光线，使灯光呈现出柔和均匀的光晕，而不是八点刺眼的亮光。黑色底座——托住甲壳虫(Beetle)并隐藏所有电子元件和线路，顶部设有用于插入USB-C线缆的开孔。

•黑色底座——托住Beetle，隐藏所有电子元件和线路，并设有用于USB-C线缆的开孔。

•白色与黑色组合设计兼具双重功能：白色顶部作为扩散层，黑色底座则让电路板和电线不被外人看见，从外部看只是一块干净的发光圆盘，上面仅有一根线缆穿过。

为何选择Justway进行打印：

白色顶部采用光滑塑料表面处理，这对LED灯尤为重要——当灯环亮起时，清晰的分层线条会呈现条纹状，而平滑的扩散面能让发光效果看起来更加美观。

两种颜色按特定顺序排列(白色盖子 + 黑色底座)，使成品外观显得有意识、完整，而非单色测试打印的效果。

快速交付周期，且可直接从STL获取报价流程，因此无需自行配置打印机来完成此项目。

如果你自行打印，请注意以下建议：

•将扩散层打印为白色或自然透光材质，每边2–3个边缘，以确保光线均匀分布，避免出现八颗硬点。

•保留USB-C接口槽位，并留出少量通风空间——在高亮度下，LED和调节器会产生热量。

•在甲壳虫到LED环路之间，预留一条小通道，以便三芯线连接。只需用两个M2螺丝或摩擦配合即可将其固定封闭。

最终效果：一个小巧、自成一体的发光灯，没有可见的电子元件——仅需一根USB线缆插入，灯光便从另一端输出。

完整代码

完整的草图已附在Beetle_8LED_Test.ino文件中。亮点如下：

- 使用WiFi.h和WebServer.h实现网页界面

- 使用ESPmDNS为beetle.local提供域名解析

- 使用DNSServer搭建自助门户

- 使用Preferences保存设置

- 使用Adafruit_NeoPixel实现环形灯光

所有HTML/CSS/JS页面均存储于程序内存( PROGMEM)，无需外部资源。

可访问的端点包括：/(主页)、/state、/set、/pixels、/scan、/forget。

使用单个render()函数，通过速度控制的计时器来切换40种不同氛围效果。

设置LED_PIN(默认0)、LED_COUNT(默认8)以及你的WiFi默认配置，然后上传即可。

总结

仅花费一块微型电路板和一个8颗LED环的成本，这个小设备却变得真正实用：无需应用即可通过任何设备控制，40种预设氛围效果，实时预览环形灯光，设置持久保存，轻松完成WiFi配置，再加上Justway打印的外壳，整体外观干净利落。最棒的是它如此易上手：仅需三根电线、两个库和一次上传，你就能用手机重新涂改办公桌的颜色。

本文编译自hackster.io