中文控制网页源码
包含 index.html、style.css、script.js 和 WLED 来源说明,可在本地浏览器打开后填写自己的 WLED 地址。
核心思路不是把整个网页搬进单片机,而是把网页生成的 16x16 像素帧导出成数组,再让目标主控按自己的方式驱动灯板。
常用文件放在这里:客户可以下载清理后的网页源码和资料页。已写入个人 Wi-Fi 或临时测试配置的固件不放公开下载。
包含 index.html、style.css、script.js 和 WLED 来源说明,可在本地浏览器打开后填写自己的 WLED 地址。
本项目的网站资料页离线包,包含总览、硬件、网页关系、功能、移植和开源说明。
说明 WLED 是底层控灯系统,自制中文网页是上层控制工具,并写明基础使用方法。
WLED 固件和源码以官方开源项目为准;本页主要公开上层中文矩阵网页和控制逻辑。
#include <Adafruit_NeoPixel.h>
// 16x16 / 256 灯矩阵:GPIO27 -> 330R 电阻 -> DIN
#define LED_PIN 27
#define MATRIX_WIDTH 16
#define MATRIX_HEIGHT 16
#define NUM_LEDS (MATRIX_WIDTH * MATRIX_HEIGHT)
Adafruit_NeoPixel strip(NUM_LEDS, LED_PIN, NEO_GRB + NEO_KHZ800);
uint16_t xy(uint8_t x, uint8_t y) {
// 本项目灯板按 Z 字形 / 横向走线整理;如果显示反了,再改这里。
return y * MATRIX_WIDTH + x;
}
void setup() {
strip.begin();
strip.setBrightness(20); // 256 灯先低亮度测试,不要一上来满亮
strip.clear();
strip.show();
}
void loop() {
strip.clear();
strip.setPixelColor(xy(4, 4), strip.Color(0, 180, 255));
strip.setPixelColor(xy(11, 4), strip.Color(0, 180, 255));
for (uint8_t x = 5; x <= 10; x++) {
strip.setPixelColor(xy(x, 10), strip.Color(255, 120, 0));
}
strip.show();
delay(1000);
}
运行在电脑或手机浏览器里,负责输入汉字、画图、排序列、预览效果。它依赖浏览器,不适合直接塞进 UNO 或普通 STM32。
这是最终要给灯板显示的数据。比如 16x16 的 RGB 数组、0/1 位图数组、或者一串播放帧。这个才适合移植到其它主控。
适合没有 Wi-Fi、内容固定的作品。网页导出数组后,直接放进 Arduino / STM32 工程里。
优点:简单稳定,不需要通信。缺点:改字要重新编译烧录。
适合电脑还在旁边控制,但主控没有 Wi-Fi。网页或上位机把点阵帧通过 USB 串口发给 UNO / STM32。
优点:不用 Wi-Fi,内容可以动态改。缺点:需要设计串口协议。
UNO 能做简单版本,但资源很小。256 颗 RGB 灯一帧大约需要 768 字节,UNO 总 RAM 只有 2KB 左右,不能放太多帧。
STM32 资源通常比 UNO 大,可以做更顺滑的播放,也可以用 DMA / SPI / 定时器方式驱动灯珠。
最省事。自带 Wi-Fi,能直接用 WLED,适合网页控制和无线发送。
适合学习灯珠驱动和固定图案显示,不适合复杂网页控制。
适合做性能更强的离线播放器,或者通过串口/SD 卡播放网页导出的帧。
index.html:网页结构和控制面板style.css:网页样式script.js:汉字渲染、图案、序列、WLED JSON 发送逻辑UPSTREAM_WLED.md:WLED 来源、文档和 JSON API 入口README.md:硬件、网页关系、接线和排查口径esp32-wled-256-matrix-web-source.zip
用于学习网页如何生成点阵和发送 WLED 指令。
esp32-wled-256-matrix-docs-html.zip
用于离线查看整套网站说明。
esp32-wled-256-matrix-public-readme.md
用于给客户说明 WLED 和中文网页的关系。