Ejemplodeeventos

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 UI.
• Controles de opacidad, con botones Low Opacity y High Opacity conectados al mismo objetivo 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 del cableado 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 fuente, disparador, acción, valor de opacidad y destino.
• Objetivos de imagen, 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 objetivos de imagen.
• 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 cableado 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 canvas de 480 x 480.
• Button 1 a Button 5, las fuentes clicables de los ejemplos.
• Image 1, Image 2 e Image 3, los objetivos visibles para cambios de opacidad, tamaño y animación.
• Label 1, el objetivo de texto usado por el ejemplo de cambio de texto.

Esto lo hace útil para aprender porque cada fuente y destino es visible en la misma pantalla.

Estructura del editor de eventos

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

• Low Opacity y High Opacity usan un disparador Clicked y apuntan al mismo objetivo 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 objetivo de imagen para redimensionarlo.
• Play Animation usa un disparador Clicked y apunta a un objetivo 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.

Ese layout es el valor didáctico principal de la plantilla: muestra cómo el grafo visual de eventos de PicoPixel asigna la entrada del usuario a cambios de objetos LVGL sin ocultar la relación entre disparador y objetivo.

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, foco por encoder u otros drivers 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 UI 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.
• El cableado de animación enseña el traspaso, desde un evento de usuario hasta un cambio visual que puede ejecutarse de forma independiente.
• El proyecto se exporta como código UI LVGL 8.x estándar, integrable en ESP-IDF, Arduino, PlatformIO, STM32, Zephyr u otro build LVGL.

Patrón en tiempo de ejecución

PicoPixel puede generar el cableado de eventos por ti, pero el concepto se traduce directamente a callbacks LVGL normales. Si necesitas extender la UI 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 el cableado común 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

Usa esto como una plantilla gratuita de interacción LVGL y luego cambia los controles de demo por tu propia UI de producto.

• Sustituye los cinco botones de demo por toggles de ajustes, elementos de menú, controles de dashboard 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, feedback de confirmación, estados de carga o señales de atención.
• Añade acciones de navegación entre varias pantallas LVGL una vez que los ejemplos de una sola pantalla tengan sentido.
• 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, renombra las fuentes y objetivos clave, y luego exporta el proyecto como código C LVGL. Los archivos generados se pueden añadir a un proyecto embebido existente como cualquier otro export de PicoPixel.

Para proyectos ESP32, el flujo habitual es:

1. Configura los drivers de pantalla y entrada.
2. Abre esta plantilla de eventos y adapta botones, etiquetas, imágenes y acciones.
3. Exporta la UI de PicoPixel como LVGL C.
4. Añade los archivos exportados a tu proyecto ESP-IDF, Arduino o PlatformIO.
5. Llama a ui_init() después de que LVGL y tu driver de pantalla estén listos.
6. 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 UI táctil ESP32
• Pantallas de ajustes y paneles de control
• Dashboards smart home
• Menús wearable o handheld
• Ejemplos de disparadores de animación
• Cambios de estado de texto e imagen
• Aprender cómo los eventos visuales de PicoPixel se convierten en comportamiento LVGL