没有 Wi-Fi 的板子怎么用

把“网页画好的点阵数据”搬到 UNO、STM32 或其它平台

核心思路不是把整个网页搬进单片机,而是把网页生成的 16x16 像素帧导出成数组,再让目标主控按自己的方式驱动灯板。

代码和下载

常用文件放在这里:客户可以下载清理后的网页源码和资料页。已写入个人 Wi-Fi 或临时测试配置的固件不放公开下载。

中文控制网页源码

包含 index.html、style.css、script.js 和 WLED 来源说明,可在本地浏览器打开后填写自己的 WLED 地址。

下载源码 ZIP

资料页 HTML

本项目的网站资料页离线包,包含总览、硬件、网页关系、功能、移植和开源说明。

下载资料页 ZIP

公开说明 MD

说明 WLED 是底层控灯系统,自制中文网页是上层控制工具,并写明基础使用方法。

下载说明 MD

WLED 官方入口

WLED 固件和源码以官方开源项目为准;本页主要公开上层中文矩阵网页和控制逻辑。

打开 WLED GitHub
可复制的关键配置
#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);
}
提醒: 上面这段是给移植学习用的最小示例,只放最关键的 LED 引脚、数量和坐标映射;完整中文网页控制逻辑请下载源码 ZIP。

先分清两种代码

网页工具代码

运行在电脑或手机浏览器里,负责输入汉字、画图、排序列、预览效果。它依赖浏览器,不适合直接塞进 UNO 或普通 STM32。

点阵帧数据

这是最终要给灯板显示的数据。比如 16x16 的 RGB 数组、0/1 位图数组、或者一串播放帧。这个才适合移植到其它主控。

通用移植流程

1. 网页画好
先在网页里输入汉字、画图案、排好播放序列。
2. 导出数据
把每一帧导出成 C 数组、JSON 或二进制表。
3. 单片机读取
UNO / STM32 从 Flash、SD 卡或串口读取这些帧。
4. 驱动灯板
用 FastLED、NeoPixel、DMA 或 SPI/PWM 输出到灯珠。

方案 A:离线烧进程序

适合没有 Wi-Fi、内容固定的作品。网页导出数组后,直接放进 Arduino / STM32 工程里。

const uint32_t frame0[256] = { 0x000000, 0xff0000, 0x00ff00, // 每个数代表一颗灯的 RGB 颜色 };

优点:简单稳定,不需要通信。缺点:改字要重新编译烧录。

方案 B:串口发送帧

适合电脑还在旁边控制,但主控没有 Wi-Fi。网页或上位机把点阵帧通过 USB 串口发给 UNO / STM32。

电脑网页 / 上位机 -> USB 串口 -> UNO / STM32 -> 16x16 灯板

优点:不用 Wi-Fi,内容可以动态改。缺点:需要设计串口协议。

UNO 要注意

UNO 能做简单版本,但资源很小。256 颗 RGB 灯一帧大约需要 768 字节,UNO 总 RAM 只有 2KB 左右,不能放太多帧。

  • 适合:固定图案、少量帧、低亮度测试
  • 建议:帧数据放 PROGMEM,不要全塞 RAM
  • 库选择:FastLED 或 Adafruit NeoPixel
  • 限制:复杂汉字渲染、网页服务、多帧动画都不适合 UNO 直接做

STM32 更适合

STM32 资源通常比 UNO 大,可以做更顺滑的播放,也可以用 DMA / SPI / 定时器方式驱动灯珠。

  • 适合:多帧动画、较高刷新率、串口或 SD 卡读取
  • 可选:STM32duino、HAL、PlatformIO
  • 驱动:WS2812 常用 PWM + DMA、SPI 模拟时序或现成库
  • 如果 STM32 带以太网或外接 Wi-Fi,也可以再做网络控制

平台选择建议

ESP32

最省事。自带 Wi-Fi,能直接用 WLED,适合网页控制和无线发送。

UNO

适合学习灯珠驱动和固定图案显示,不适合复杂网页控制。

STM32

适合做性能更强的离线播放器,或者通过串口/SD 卡播放网页导出的帧。

本项目可以公开学习的源码内容

自制中文矩阵网页

  • index.html:网页结构和控制面板
  • style.css:网页样式
  • script.js:汉字渲染、图案、序列、WLED JSON 发送逻辑

WLED 学习资料

  • UPSTREAM_WLED.md:WLED 来源、文档和 JSON API 入口
  • WLED 固件:公开下载建议使用 WLED 官方入口,本地测试固件不直接公开
  • README.md:硬件、网页关系、接线和排查口径
发布边界: 公开前要清理本地 IP、Wi-Fi、临时测试配置和打包方式。WLED 本身按原开源项目归属说明;本项目主要公开学习的是上层中文矩阵网页和控制逻辑。

本页已放的下载文件

网页源码包

esp32-wled-256-matrix-web-source.zip
用于学习网页如何生成点阵和发送 WLED 指令。

资料页离线包

esp32-wled-256-matrix-docs-html.zip
用于离线查看整套网站说明。

公开说明

esp32-wled-256-matrix-public-readme.md
用于给客户说明 WLED 和中文网页的关系。