本示例是一个基于Arduino UNO Q和Web界面的LED矩阵绘画应用,支持通过浏览器实时绘制图案并在Arduino硬件上显示。将Arduino UNO Q的内置13×8 LED矩阵变成一个可编程的画板,为用户提供位图编码工具方便开发。

实现过程
1,打开终端

2,准备阶段,用docker命令清理Q板运行环境
#因为docker在Q板是隐藏起来的,查看一下有多少容器存在
docker ps -a
#系统性释放空间,删除容器和网络
docker system prune -f

3,拉取笔者在gitee仓库中的项目
#显示环境
ls
#到文件夹
cd ArduinoApps
#到笔者gitee仓库拉取项目
git clone https://gitee.com/pdtopdog/led-matrix-painter.git

4,设置为defauit app

5,点击RUN运行led-matrix-painter项目
6,浏览器自动跳转,IP地址:7000。界面的说明见注释,不再赘述。

7,绘制一个大象喷水

系统架构
┌─────────────────┐ WiFi/USB ┌─────────────────┐
│ Web Browser │ ←────────────→ │ Arduino UNO │
│ (前端界面) │ │ Q │
│ │ │ │
│ - JavaScript │ │ - C++ Sketch │
│ - HTML/CSS │ │ - LED Matrix │
│ - 实时交互 │ │ - RouterBridge │
└─────────────────┘ └─────────────────┘
↓ ↓
┌─────────────────┐ ┌─────────────────┐
│ Python Server │ ←────────────→ │ LED Matrix │
│ (后端服务) │ Serial Port │ (13×8 点阵) │
│ │ │ │
│ - Flask │ │ - 104个LED │
│ - Serial通信 │ │ - 位图数据 │
│ - 数据转换 │ │ - 实时刷新 │
└─────────────────┘ └─────────────────┘
技术栈
一,硬件层
Arduino UNO Q: 内置13×8 LED矩阵,
USB连接: 用于程序上传和串口通信,
WiFi连接: 可选的网络通信方式。
二,软件层
Arduino C++: 硬件控制和LED驱动,
Python Flask: Web服务器和串口通信,
JavaScript: 前端交互和实时更新,
HTML/CSS: 用户界面和样式。
LED矩阵原理
一,硬件规格
尺寸: 13列 × 8行 = 104个LED
控制器: 内置LED矩阵控制器
数据格式: 4个uint32_t整数存储所有LED状态
二,位图编码
104个LED → 4个32位整数(const uint32_t)
每个位对应一个LED: 1=亮, 0=灭
frame_data[0]: LED 0-31
frame_data[1]: LED 32-63
frame_data[2]: LED 64-95
frame_data[3]: LED 96-103 (使用8位,剩余24位保留)