可视化构建 ESP32 触摸屏 UI

1. 设计您的界面

在浏览器中打开 PicoPixel 并创建新项目。将 LVGL 控件——按钮、标签、滑块、图表、弧形、开关等——拖放到画布上。设置显示分辨率以匹配您的 ESP32 屏幕：常见 SPI TFT 为 320×240，圆形 GC9A01 显示屏为 240×240，或较大面板为 800×480。可视化地调整颜色、字体和间距——此阶段无需编写 C 代码。

2. 在实时 LVGL 模拟器中预览

PicoPixel 将 LVGL 编译为 WebAssembly 并直接在浏览器中运行。预览使用的是真实的 LVGL 渲染引擎——不是模型。在接触硬件之前测试触摸交互、滚动和动画。您还可以与团队成员或客户分享模拟器链接以获取反馈。

3. 导出您的 UI 文件

导出一个包含 LVGL C 代码（.c 和 .h 文件）的 zip 文件。输出包括控件创建、样式、布局和事件绑定——全部使用标准 LVGL 8.x API 调用。没有专有依赖，也没有 PicoPixel 运行时库。计划支持 LVGL v9.x。

4. 集成并烧录

将导出的文件解压到您的 ESP-IDF、Arduino 或 PlatformIO 项目中。包含 UI 头文件，并在 LVGL 显示和输入驱动程序配置完成后调用 ui_init()。编译、烧录，ESP32 上的 UI 与模拟器逐像素匹配。如需更快的方式，可以将 zip 文件交给 AI 代码助手（Claude Code、Codex 等）让它自动处理集成。

ESP32 变体

PicoPixel 生成标准 LVGL 代码，适用于任何支持 LVGL 8.x 的 ESP32 变体：

• •ESP32（原版）— SRAM 有限；最适合较简单的 UI
• •ESP32-S2 — 支持 USB OTG，中等显示能力
• •ESP32-S3 — 推荐用于大多数显示项目；双核带 PSRAM，足以处理复杂 UI
• •ESP32-C3 — RISC-V 单核；适合轻量级 UI
• •ESP32-C6 — Wi-Fi 6 + Bluetooth 5.3；与 C3 相同的显示能力
• •ESP32-P4 — 最新变体，配备专用 GPU 和硬件像素处理；非常适合复杂的高分辨率 GUI。已在 Waveshare 和 Guition 开发板上测试。

常用开发板

兼容任何支持 LVGL 的 ESP32 开发板，包括：

• •LILYGO T-Display / T-Display-S3
• •M5Stack Core2 / CoreS3
• •Waveshare ESP32-S3 / ESP32-P4 显示开发板
• •Guition ESP32-P4 显示开发板
• •Elecrow 显示开发板
• •Adafruit Feather ESP32-S3 TFT
• •Espressif ESP32-S3-BOX / BOX-3
• •Sunton 开发板（热门的经济型 ESP32 显示开发板）

兼容的显示驱动

PicoPixel 生成与平台无关的 LVGL 代码——显示驱动由您的 LVGL 移植配置处理。在 ESP32 上与 LVGL 配合使用的常见显示控制器：

• •ST7789（小型 TFT 最常用）
• •ILI9341（240×320 显示屏）
• •ILI9488（320×480 显示屏）
• •GC9A01（圆形显示屏）
• •ST7796（较大显示屏）
• •SSD1306（小型 OLED）
• •MIPI DSI 显示屏（ESP32-P4）

如果您的显示屏支持 LVGL，PicoPixel 的输出就能正常工作。

ESP-IDF 集成

PicoPixel 的导出纯粹是 UI 代码——不包含 lv_init()、显示驱动注册或时钟处理。您的项目必须已有一个可工作的 LVGL 8.x 环境。要添加 PicoPixel 的 UI：

1. 1.从 PicoPixel 导出您的 UI（下载一个 .zip 文件）
2. 2.在项目的 components/ 文件夹内创建 ui/ 目录
3. 3.将导出的文件解压到 components/ui/
4. 4.在 components/ui/ 中创建 CMakeLists.txt，注册源文件并添加对 lvgl 的依赖
5. 5.在 main/CMakeLists.txt 的 REQUIRES 列表中添加 ui
6. 6.在 main.c 中包含 #include "ui/ui.h" 并在显示设置完成后调用 ui_init()
7. 7.构建并烧录：idf.py build && idf.py flash

Arduino IDE 集成

您的草图必须已安装 LVGL 8.x 并配置了可工作的显示驱动。

1. 1.从 PicoPixel 导出您的 UI（下载一个 .zip 文件）
2. 2.在草图的 src/ 目录内创建 ui/ 文件夹
3. 3.将导出的文件解压到 src/ui/
4. 4.在 .ino 文件中包含 #include "src/ui/ui.h"
5. 5.在 setup() 中于 lv_init() 和显示驱动配置完成后调用 ui_init()
6. 6.Arduino IDE 会自动递归编译 src/ 中的所有 .c 文件——无需更改构建配置
7. 7.上传到您的 ESP32

PlatformIO 集成

您的项目必须已在 lib_deps 中包含 LVGL 8.x 并配置了可工作的显示驱动。

1. 1.从 PicoPixel 导出您的 UI（下载一个 .zip 文件）
2. 2.将导出的文件解压到 src/ui/
3. 3.在 main.cpp 中包含 #include "ui/ui.h"
4. 4.在 LVGL 设置完成后调用 ui_init()
5. 5.无需更改 platformio.ini — PlatformIO 会自动编译 src/ 中的所有源文件
6. 6.构建并烧录：pio run --target upload

AI 辅助集成

如需更快的方式，可从 PicoPixel 导出 zip 文件并交给 AI 代码助手。告诉 Claude Code、GitHub Copilot 或 Codex："将这些 PicoPixel UI 文件添加到我的 ESP32 LVGL 项目中"——大多数助手可以自动处理文件放置、头文件包含和构建配置。