Tutorial ESP32 LVGL: Crea una UI táctil

¿Por qué usar un editor visual para UIs de ESP32?

Construir una interfaz táctil para un ESP32 de forma tradicional es lento. Escribes código LVGL en C para colocar cada widget, ajustas colores y tamaños, lo flasheas a tu placa, miras fijamente la pantalla, mueves unos píxeles y vuelves a flashear. Cada pequeño cambio implica otro ciclo completo con el hardware.

Un editor visual invierte eso. Arrastras widgets LVGL a un lienzo, los estilizas con clics y ves el resultado al instante, y luego exportas el código C cuando estás satisfecho. Dedicas tu tiempo a diseñar en lugar de recompilar.

Lo que necesitarás

No hace falta mucho para seguir esta guía:

• Una placa ESP32 con pantalla: cualquier variante de ESP32 que pueda ejecutar LVGL funciona (más sobre placas específicas más adelante).
• La cadena de herramientas de firmware que prefieras: ESP-IDF, Arduino o PlatformIO, con LVGL 8.x ya añadido y los controladores de pantalla y táctil funcionando.
• Una cuenta gratuita de PicoPixel — todo lo de esta guía ocurre en el navegador.

Paso 1 — Define el tamaño de tu pantalla

Abre el editor y comienza un nuevo proyecto. Lo primero que debes configurar correctamente es la resolución, para que tu diseño coincida píxel a píxel con tu pantalla física.

Elige un ajuste predefinido que coincida con tu display:

• 320×240, los paneles TFT SPI pequeños más comunes (ST7789, ILI9341).
• 240×240, displays redondos como el GC9A01.
• 480×320, 480×480 o 800×480, paneles más grandes y cuadrados.

Configurarlo correctamente desde el principio garantiza que lo que diseñas es exactamente lo que aparece en el dispositivo.

Paso 2 — Diseña con arrastrar y soltar

Ahora viene la parte divertida. Arrastra widgets LVGL desde la paleta al lienzo: botones, etiquetas, deslizadores, arcos, interruptores, gráficos, menús desplegables y más (más de 30 tipos de widgets en total). Colócalos y utiliza los paneles laterales para estilizar colores, fuentes, espaciado y esquinas redondeadas visualmente. Nada de código C en esta etapa.

Algunas cosas útiles a tener en cuenta mientras construyes:

• Múltiples pantallas. Agrega tantas pantallas como necesites y conecta la navegación entre ellas, ideal para menús, páginas de configuración y paneles de control.
• Táctil desde el principio. Los widgets responden a toques y los contenedores hacen scroll, así que puedes diseñar interacciones táctiles reales, no solo diseños estáticos.
• Fuentes e imágenes son de primera clase. El texto y los gráficos en un dispositivo embebido deben convertirse a un formato que LVGL pueda almacenar. PicoPixel lo gestiona por ti; consulta nuestra guía de fuentes para detalles sobre cómo mantener las fuentes pequeñas, y la guía de sprites si quieres widgets animados con múltiples estados.

Paso 3 — Previsualiza en tiempo real

Antes de tocar el hardware, pulsa previsualizar. PicoPixel ejecuta el motor LVGL real compilado a WebAssembly directamente en tu navegador, así que lo que ves es renderizado genuino de LVGL, no una maqueta ni una aproximación.

Toca los botones, arrastra los deslizadores, haz scroll y comprueba la navegación entre pantallas. Corregir problemas de diseño aquí lleva segundos; corregirlos en el dispositivo cuesta un ciclo de flash. Incluso puedes compartir un enlace de previsualización con un compañero de equipo o un cliente para recibir comentarios.

Paso 4 — Exporta código C listo para producción

Cuando el diseño se vea bien, exporta. Obtendrás un único archivo picopixel_lvgl_ui.zip con código LVGL 8.x limpio y estándar:

• ui.c / ui.h, el punto de entrada, con ui_init() y ui_tick().
• screens.c / screens.h, tus pantallas y su diseño.
• styles, fonts, images, actions y vars, todo lo que usa tu diseño, generado para ti.
• README.md, una descripción en lenguaje sencillo del export (tratado en el Paso 5).

No hay dependencias propietarias ni biblioteca de tiempo de ejecución de PicoPixel que agregar; es LVGL puro, por lo que funciona igual tanto en ESP-IDF como en Arduino o PlatformIO.

Paso 5 — Agrega la UI a tu proyecto ESP32

Descomprime el export en tu proyecto (la mayoría lo coloca en una carpeta ui/). Luego solo necesitas hacer dos cosas en tu firmware: llamar a ui_init() una vez después de que LVGL y los controladores de pantalla/táctil estén configurados, y llamar a ui_tick() en tu bucle principal.

Así se ve en un sketch de estilo Arduino:

#include <lvgl.h>
#include "ui/ui.h"          // exported by PicoPixel

void setup() {
  lv_init();
  // ... initialize your display + touch drivers here ...
  ui_init();                // builds the UI you designed
}

void loop() {
  lv_timer_handler();       // let LVGL render and handle input
  ui_tick();                // keep PicoPixel's screens updated
  delay(5);
}

Para cambiar de pantalla en tiempo de ejecución (por ejemplo, cuando se pulsa un botón), llama a loadScreen() con la pantalla que quieras. Esa es toda la integración: compila, flashea y la UI en tu ESP32 coincide con lo que viste en el navegador.

¿Qué placas ESP32 funcionan?

Como PicoPixel exporta código LVGL estándar en C, funciona en prácticamente cualquier ESP32 que pueda ejecutar LVGL 8.x. Una guía rápida sobre las variantes:

• ESP32-S3, el punto óptimo para la mayoría de proyectos con pantalla: doble núcleo con PSRAM y amplio margen para UIs ricas.
• ESP32 (original) / ESP32-S2, válido para interfaces más simples; vigila tu presupuesto de memoria.
• ESP32-C3 / C6, chips RISC-V de un solo núcleo y bajo consumo, adecuados para UIs más pequeñas.
• ESP32-P4, el chip más potente de Espressif, con una GPU dedicada para interfaces fluidas y de alta resolución. El export de PicoPixel ha sido probado en placas ESP32-P4 de Waveshare y Guition.

Placas populares ya montadas — LILYGO T-Display-S3, M5Stack Core2/CoreS3, placas de display de Waveshare y Sunton, el Espressif ESP32-S3-BOX y el económico "Cheap Yellow Display" — funcionan todas, al igual que controladores comunes como ST7789, ILI9341, GC9A01 (redondo) e ILI9488.

Mantener tu UI liviana en memoria

Las pantallas embebidas tienen mucha menos memoria que un teléfono o una laptop, así que un poco de cuidado mantiene tu UI rápida y amigable con el flash:

• Dimensiona bien tus fuentes. Cada fuente se almacena en un tamaño de píxel fijo, y los conjuntos de caracteres grandes (especialmente chino, japonés y coreano) se acumulan rápidamente. La guía de fuentes muestra cómo incluir solo los caracteres que realmente usas.
• Ajusta la profundidad de color a tu pantalla. Un panel de 16 bits no necesita imágenes de 32 bits; elegir la profundidad correcta reduce el tamaño de tus recursos.
• Reutiliza en lugar de duplicar. Crea un widget una vez y reutilízalo en varias pantallas y proyectos.

Preguntas frecuentes

¿PicoPixel funciona con ESP32?

Sí. Genera código LVGL estándar en C que funciona con ESP-IDF, Arduino y PlatformIO en cualquier variante de ESP32 que ejecute LVGL 8.x, y el export ha sido probado en hardware ESP32-P4.

¿Qué versión de LVGL admite?

LVGL 8.x. El código exportado usa las APIs de LVGL 8.x, así que no lo mezcles con llamadas de LVGL 9.x. (La compatibilidad con v9 está planificada.)

¿Tengo que escribir código C?

Solo la pequeña cantidad de código de conexión del Paso 5: llamar a ui_init() y ui_tick(). La UI en sí se diseña visualmente y se genera para ti.

¿Es gratis?

Sí. PicoPixel es gratuito para uso personal y de aficionados sin necesidad de tarjeta de crédito. El uso comercial comienza desde 17 $/mes (204 $/año).

Próximos pasos

Ahora conoces el camino completo desde la idea hasta la UI flasheada: define tu resolución, diseña con arrastrar y soltar, previsualiza en vivo, exporta e integra. Desde aquí:

• Entra al editor y comienza un proyecto en app.picopixel.io.
• Explora la página del constructor de GUI para ESP32 para más información sobre soporte de placas y frameworks.
• Enriquece tus widgets con sprites animados y fuentes personalizadas.
• ¿Evaluando tus opciones? Mira cómo PicoPixel se compara con otros editores LVGL.