# LED-Matrix-Painter

**Repository Path**: pdtopdog/led-matrix-painter

## Basic Information

- **Project Name**: LED-Matrix-Painter
- **Description**: # LED Matrix Painter - Arduino UNO Q 矩阵绘画器

一个基于Arduino UNO Q和Web界面的LED矩阵绘画应用，支持通过浏览器实时绘制图案并在Arduino硬件上显示。

## 🎨 项目概述

这个项目将Arduino UNO Q的内置13×8 LED矩阵变成一个可编程的画板，用户可以通过Web界面实时绘制图案并立即在硬件上看到效果。


- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-07
- **Last Updated**: 2025-12-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# LED Matrix Painter - Arduino UNO Q 矩阵绘画器

一个基于Arduino UNO Q和Web界面的LED矩阵绘画应用，支持通过浏览器实时绘制图案并在Arduino硬件上显示。

## 🎨 项目概述

这个项目将Arduino UNO Q的内置13×8 LED矩阵变成一个可编程的画板，用户可以通过Web界面实时绘制图案并立即在硬件上看到效果。

### 核心特性
- 🌐 **Web界面控制**: 通过浏览器访问，无需安装客户端
- ⚡ **实时显示**: 绘制的图案立即传输到Arduino并显示
- 🔄 **双向通信**: 支持从Arduino读取当前显示状态
- 🎯 **精确控制**: 精确到单个LED的开关控制
- 📱 **响应式设计**: 适配不同屏幕尺寸

## 🏗️ 系统架构

```
┌─────────────────┐    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**: 用户界面和样式

## 📡 数据流程

### 1. 用户交互 → Web前端
```javascript
// 用户点击LED格子
pixel.onclick = () => {
    state[i] = state[i] ? 0 : 1;  // 切换LED状态
    updateDisplay();              // 更新显示
    sendToBackend();              // 发送到后端
};
```

### 2. Web前端 → Python后端
```javascript
// 发送HTTP请求到Python服务器
fetch('/api/frame', {
    method: 'POST',
    body: JSON.stringify({frame: state})
});
```

### 3. Python后端 → Arduino
```python
# 通过串口发送字节数据
def write_frame(self, frame_bytes: bytes):
    self.serial_port.write(frame_bytes)
    self.serial_port.flush()
```

### 4. Arduino数据解析 → LED显示
```cpp
// 接收96字节数据并转换为位图
void process_frame_data(uint8_t* data, int length) {
    for (int i = 0; i < 96; i++) {
        if (data[i] == 1) {
            bit_index = i % 32;
            word_index = i / 32;
            frame_data[word_index] |= (1UL << bit_index);
        }
    }
    matrix.loadFrame(frame_data);  // 显示到LED矩阵
}
```

## 🎛️ LED矩阵原理

### 硬件规格
- **尺寸**: 13列 × 8行 = 104个LED
- **控制器**: 内置LED矩阵控制器
- **数据格式**: 4个uint32_t整数存储所有LED状态

### 位图编码
```
104个LED → 4个32位整数
每个位对应一个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位保留)

```

## 🚀 快速开始

### 1. 硬件准备
- Arduino UNO Q开发板
- USB数据线
- 电脑（Windows/Mac/Linux）```

## 🔧 配置说明

### Arduino配置 (sketch.yaml)
```yaml
platform: arduino:avr:uno  # UNO Q平台
libraries:
  - Arduino_LED_Matrix              # LED矩阵库
  - Arduino_RouterBridge            # 桥接库
```

### Python配置
```python
# 矩阵尺寸
COLS = 13  # 13列
ROWS = 8   # 8行

# 串口设置
SERIAL_PORT = "/dev/ttyACM0"  # Linux
BAUD_RATE = 115200
```

## 🎮 使用方法

1. **绘制图案**: 在Web界面点击LED格子进行绘制
2. **清空画板**: 点击"清空"按钮重置所有LED
3. **填充全部**: 点击"填充"按钮点亮所有LED
4. **保存图案**: 使用预设图案功能（开发中）
5. **实时同步**: 绘制内容自动同步到硬件


### 调试技巧
```bash
# 查看串口输出
screen /dev/ttyACM0 115200

# 检查Python日志
tail -f python/app.log

# 监控网络请求
# 浏览器开发者工具 → Network标签
```

## 🎯 性能优化

### 已实现的优化
- **通信冷却**: 防止Bridge拥堵
- **数据压缩**: 使用位图减少传输量
- **异步处理**: 非阻塞用户界面
- **错误恢复**: 自动重连机制

### 未来优化方向
- **WebSocket通信**: 减少HTTP开销
- **本地存储**: 保存用户作品
- **图案库**: 预设图案集合
- **动画支持**: 多帧动画播放