Crea interfaces táctiles para ESP32 — Visualmente

1. Diseña tu interfaz

Abre PicoPixel en tu navegador e inicia un nuevo proyecto. Arrastra y suelta widgets LVGL — botones, etiquetas, sliders, gráficos, arcos, interruptores y más — al lienzo. Configura la resolución de pantalla para que coincida con la pantalla de tu ESP32: 320×240 para TFTs SPI comunes, 240×240 para pantallas circulares GC9A01, u 800×480 para paneles más grandes. Aplica estilos de colores, fuentes y espaciado visualmente — en esta etapa no se requiere código C.

2. Previsualiza en el simulador LVGL en vivo

PicoPixel compila LVGL a WebAssembly y lo ejecuta directamente en tu navegador. La previsualización es el motor de renderizado LVGL real — no una maqueta. Prueba interacciones táctiles, desplazamiento y animaciones antes de tocar tu hardware. También puedes compartir un enlace del simulador con compañeros de equipo o clientes para recibir feedback.

3. Exporta tus archivos UI

Exporta un archivo zip que contiene tu UI como código C LVGL (archivos .c y .h). La salida incluye creación de widgets, estilos, diseño y vinculación de eventos — todo usando llamadas API estándar de LVGL 8.x. No hay dependencias propietarias ni biblioteca runtime de PicoPixel. El soporte para LVGL v9.x está planificado.

4. Integra y flashea

Descomprime los archivos exportados en tu proyecto ESP-IDF, Arduino o PlatformIO. Incluye el encabezado UI y llama a ui_init() después de configurar tus drivers de pantalla e input de LVGL. Compila, flashea, y la UI en tu ESP32 coincidirá píxel por píxel con el simulador. Para un camino más rápido, pasa el zip a un asistente de código IA (Claude Code, Codex, etc.) y deja que gestione la integración automáticamente.

Variantes de ESP32

PicoPixel genera código LVGL estándar que funciona en cualquier variante de ESP32 con soporte LVGL 8.x:

• •ESP32 (original) — SRAM limitada; ideal para UIs más simples
• •ESP32-S2 — soporte USB OTG, capacidad de pantalla moderada
• •ESP32-S3 — recomendado para la mayoría de proyectos con pantalla; doble núcleo con PSRAM y potencia suficiente para UIs complejas
• •ESP32-C3 — RISC-V de un solo núcleo; adecuado para UIs ligeras
• •ESP32-C6 — Wi-Fi 6 + Bluetooth 5.3; misma capacidad de pantalla que el C3
• •ESP32-P4 — variante más reciente con GPU dedicada y procesamiento de píxeles por hardware; excelente para GUIs complejas de alta resolución. Probado con placas Waveshare y Guition.

Placas de desarrollo populares

Compatible con cualquier placa de desarrollo ESP32 con capacidad LVGL, incluyendo:

• •LILYGO T-Display / T-Display-S3
• •M5Stack Core2 / CoreS3
• •Waveshare ESP32-S3 / ESP32-P4 placas con pantalla
• •Guition ESP32-P4 placas con pantalla
• •Elecrow placas con pantalla
• •Adafruit Feather ESP32-S3 TFT
• •Espressif ESP32-S3-BOX / BOX-3
• •Placas Sunton (populares placas ESP32 con pantalla económicas)

Drivers de pantalla compatibles

PicoPixel genera código LVGL agnóstico de plataforma — el driver de pantalla se gestiona en la configuración de tu port LVGL. Controladores de pantalla comunes que funcionan con LVGL en ESP32:

• •ST7789 (el más común para TFTs pequeños)
• •ILI9341 (pantallas de 240×320)
• •ILI9488 (pantallas de 320×480)
• •GC9A01 (pantallas circulares)
• •ST7796 (pantallas más grandes)
• •SSD1306 (OLEDs pequeños)
• •MIPI DSI pantallas (ESP32-P4)

Si tu pantalla funciona con LVGL, la salida de PicoPixel funcionará con ella.

Integración con ESP-IDF

La exportación de PicoPixel es puramente código UI — no incluye lv_init(), registro de drivers de pantalla ni gestión de ticks. Tu proyecto ya debe tener una configuración funcional de LVGL 8.x. Para añadir la UI de PicoPixel:

1. 1.Exporta tu UI desde PicoPixel (descarga un archivo .zip)
2. 2.Crea un directorio ui/ dentro de la carpeta components/ de tu proyecto
3. 3.Descomprime los archivos exportados en components/ui/
4. 4.Crea un CMakeLists.txt en components/ui/ que registre las fuentes con una dependencia de lvgl
5. 5.Añade ui a la lista REQUIRES en tu main/CMakeLists.txt
6. 6.Incluye #include "ui/ui.h" en tu main.c y llama a ui_init() después de la configuración de pantalla
7. 7.Compila y flashea: idf.py build && idf.py flash

Integración con Arduino IDE

Tu sketch ya debe tener LVGL 8.x instalado y un driver de pantalla funcional configurado.

1. 1.Exporta tu UI desde PicoPixel (descarga un archivo .zip)
2. 2.Crea una carpeta ui/ dentro del directorio src/ de tu sketch
3. 3.Descomprime los archivos exportados en src/ui/
4. 4.Incluye #include "src/ui/ui.h" en tu archivo .ino
5. 5.Llama a ui_init() en setup() después de lv_init() y de configurar tu driver de pantalla
6. 6.Arduino IDE compila automáticamente todos los archivos .c en src/ recursivamente — no se necesitan cambios en la configuración de compilación
7. 7.Sube a tu ESP32

Integración con PlatformIO

Tu proyecto ya debe tener LVGL 8.x en lib_deps y un driver de pantalla funcional configurado.

1. 1.Exporta tu UI desde PicoPixel (descarga un archivo .zip)
2. 2.Descomprime los archivos exportados en src/ui/
3. 3.Incluye #include "ui/ui.h" en main.cpp
4. 4.Llama a ui_init() después de tu configuración LVGL
5. 5.No se necesitan cambios en platformio.ini — PlatformIO compila automáticamente todas las fuentes en src/
6. 6.Compila y flashea: pio run --target upload

Integración asistida por IA

Para un camino más rápido, exporta el zip desde PicoPixel y pásalo a un asistente de código IA. Dile a Claude Code, GitHub Copilot o Codex: "Añade estos archivos UI de PicoPixel a mi proyecto ESP32 LVGL" — la mayoría de asistentes pueden gestionar la colocación de archivos, includes y configuración de compilación automáticamente.