Ejemplo de eventos - Plantillas

Resumen

Aprende a conectar interacciones de LVGL sin escribir cada callback a mano. Esta plantilla gratuita incluye una pantalla de 480 x 480 con botones que modifican otros elementos mediante el editor de eventos de PicoPixel.

La plantilla sirve como referencia práctica para crear interacciones con LVGL. Demuestra cómo un clic de botón puede actualizar otro objeto, cambiar la opacidad, modificar texto, cambiar el tamaño de un elemento y reproducir una animación. Úsala como punto de partida para paneles táctiles para ESP32, pantallas de quiosco, controles de domótica, menús de dispositivos vestibles, paneles de ajustes o cualquier interfaz LVGL donde el usuario necesita una respuesta visual inmediata después de pulsar un botón.

En la vista normal ves la interfaz. La vista de eventos muestra cómo está conectada: los botones a la izquierda, los elementos de destino a la derecha y las líneas entre ellos. En el inspector puedes configurar el origen, el disparador, la acción, el valor y el destino.

Qué incluye

Pantalla de interacción LVGL de 480 x 480, dimensionada para pantallas embebidas y experimentos rápidos.
Cinco ejemplos de botones, cada uno con un tipo distinto de respuesta de interfaz.
Controles de opacidad, con botones Low Opacity y High Opacity conectados al mismo widget de imagen.
Ejemplo de actualización de texto, usando el botón Change Text para modificar una etiqueta.
Ejemplo de cambio de propiedades, usando Set Properties - Size para cambiar el tamaño de un objeto objetivo.
Disparador de animación, usando Play Animation para demostrar movimiento o transición controlada por evento.
Vista previa de las conexiones en el editor de eventos, con líneas de conexión visibles y nodos de disparador Clicked.
Ajustes de acción en el inspector, mostrando campos de origen, disparador, acción, valor de opacidad y destino.
Imágenes de destino, usando un gráfico cian simple de estilo PicoPixel para que los cambios de estado sean fáciles de ver.
Recurso de fuente Doto 32, usado para el texto punteado de la pantalla.

Resumen de recursos

La plantilla se mantiene lo bastante pequeña como para entenderse de un vistazo. En el panel de recursos, la biblioteca local muestra:

Imágenes: 1, un gráfico cian reutilizable de 500 x 500 usado por los imágenes de destino.
Colores: 0, con colores aplicados directamente en el diseño.
Fuentes: 1, Doto 32, usado para el texto punteado de las etiquetas.
Widgets: 0, manteniendo el ejemplo centrado en conexiones de eventos a nivel de pantalla en vez de widgets guardados.

El panel de capas muestra el proyecto como un laboratorio de interacción simple de una pantalla:

Screen 1, el lienzo de 480 x 480.
Button 1 a Button 5, los botones que activan los ejemplos.
Image 1, Image 2 e Image 3, los elementos que reciben los cambios para cambios de opacidad, tamaño y animación.
Label 1, la etiqueta que modifica el ejemplo de texto.

Esto lo hace útil para aprender porque el origen y el destino de cada evento son visibles en la misma pantalla.

Estructura del editor de eventos

Cuando la vista de eventos está activa, PicoPixel superpone el grafo de interacción sobre la distribución LVGL. La captura muestra el proyecto marcado con Contains Events y luego dibuja líneas de conexión desde los botones de origen hasta sus destinos.

Low Opacity y High Opacity usan un disparador Clicked y apuntan al mismo widget de imagen.
Change Text usa un disparador Clicked y apunta a la etiqueta de texto punteado.
Set Properties - Size usa un disparador Clicked y apunta a un widget de imagen para redimensionarlo.
Play Animation usa un disparador Clicked y apunta a un widget de imagen para reproducir una animación.
El panel de eventos derecho muestra un evento seleccionado con Source, Trigger, Action, ajustes de valor como Opacity y Destination.

La plantilla permite ver cómo una interacción del usuario modifica un objeto LVGL. Las conexiones del editor dejan clara la relación entre el disparador y el elemento de destino.

TIP

Antes de exportar, renombra los objetos importantes en PicoPixel, por ejemplo btn_low_opacity, btn_high_opacity, btn_change_text, btn_set_size, btn_play_animation, target_image y status_label. Los nombres claros hacen que los callbacks LVGL exportados sean mucho más fáciles de revisar.

Por qué funciona bien con LVGL

Las aplicaciones LVGL suelen necesitar muchas interacciones pequeñas: hacer clic en un botón, actualizar una etiqueta, cambiar el estado de un objeto, mover una imagen, cambiar de pantalla o iniciar una animación. Este ejemplo mantiene esos patrones visibles y reutilizables.

Los botones son objetos de entrada nativos de LVGL, así que el mismo patrón funciona con táctil, selección con un codificador rotatorio u otros controladores de entrada.
El disparador es explícito, usando nodos Clicked en el editor para que quede claro qué inicia cada acción.
Los objetivos son objetos LVGL normales, incluidas imágenes y etiquetas, por lo que la interfaz exportada sigue siendo editable desde el firmware.
Los cambios de opacidad y propiedades son ligeros, lo que hace que los ejemplos sean adecuados para pantallas embebidas pequeñas.
La conexión de animación muestra el recorrido, desde la acción del usuario hasta una animación que continúa por sí sola.
El proyecto se exporta como código estándar de interfaz para LVGL 8.x, integrable en ESP-IDF, Arduino, PlatformIO, STM32, Zephyr u otro proyecto LVGL.

Patrón en tiempo de ejecución

PicoPixel puede generar el conexiones de eventos por ti, pero el concepto se traduce directamente a callbacks LVGL normales. Si necesitas extender la interfaz exportada con lógica de firmware personalizada, el patrón suele ser: comprobar el código del evento y luego actualizar el objeto objetivo.

static void low_opacity_clicked_cb(lv_event_t * e)
{
    if (lv_event_get_code(e) != LV_EVENT_CLICKED) return;

    lv_obj_set_style_opa(ui_target_image, LV_OPA_30, 0);
}

static void change_text_clicked_cb(lv_event_t * e)
{
    if (lv_event_get_code(e) != LV_EVENT_CLICKED) return;

    lv_label_set_text(ui_status_label, "Clicked");
}

Usa el editor visual para las conexiones habituales y reserva callbacks C personalizados para comportamiento que dependa del estado del firmware, datos de sensores, ajustes del dispositivo o respuestas de red.

Ideas de personalización

Adapta esta plantilla de interacción a tu producto sustituyendo los controles de ejemplo por los de tu interfaz.

Sustituye los cinco botones de demo por interruptores de ajustes, elementos de menú, controles del panel o comandos de hardware.
Convierte las acciones de opacidad en estados deshabilitado/habilitado, advertencia o seleccionado/no seleccionado.
Usa la acción de texto para mensajes de estado como Connected, Saving, Armed, Charging o Complete.
Convierte el ejemplo de propiedad de tamaño en un indicador de progreso, tarjeta expandida, efecto de pulsación o pulso de notificación.
Usa el ejemplo de animación para transiciones de página, respuesta visual de confirmación, estados de carga o señales de atención.
Añade acciones de navegación entre varias pantallas LVGL cuando hayas entendido los ejemplos de una sola pantalla.
Combina los botones con eventos reales de firmware, como cambiar brillo, alternar un relé, seleccionar un modo o iniciar un flujo de calibración.

Exportar a tu proyecto

Abre la plantilla en PicoPixel, inspecciona el grafo de eventos, asigna nombres claros a los widgets de origen y destino, y luego exporta el proyecto como código C de LVGL. Los archivos generados se pueden añadir a un proyecto embebido existente como cualquier otra exportación de PicoPixel.

Para proyectos ESP32, el flujo habitual es:

Configura los controladores de pantalla y entrada.
Abre esta plantilla de eventos y adapta botones, etiquetas, imágenes y acciones.
Exporta la interfaz de PicoPixel como código C de LVGL.
Añade los archivos exportados a tu proyecto ESP-IDF, Arduino o PlatformIO.
Llama a ui_init() después de que LVGL y tu controlador de pantalla estén listos.
Añade callbacks de firmware personalizados solo donde el editor visual de eventos no sea suficiente.

Para más contexto, consulta la guía del editor de eventos de PicoPixel, el tutorial ESP32 LVGL UI y la guía sobre cómo usar plantillas PicoPixel.

Mejores usos

Esta plantilla encaja bien cuando quieres un punto de partida claro para:

Ejemplos de eventos LVGL
Demos de interacción por clic de botón
Prototipos de interfaz táctil para ESP32
Pantallas de ajustes y paneles de control
Paneles de control de domótica
Menús de dispositivos vestibles o de mano
Ejemplos de disparadores de animación
Cambios de estado de texto e imagen
Aprendizaje de cómo los eventos visuales de PicoPixel se convierten en comportamiento LVGL

Ejemplodeeventos