Descripción general
Una pantalla llena de botones no hace mucho hasta que le dices qué debe ocurrir cuando alguien los pulsa. Ese es el trabajo del editor de eventos: es donde haces que tu interfaz reaccione. Esta guía explica qué es el editor de eventos, cómo funciona la mecánica de arrastrar para conectar, y el menú completo de disparadores y acciones que puedes elegir, todo sin escribir código.
¿Qué es el editor de eventos?
El editor de eventos te permite conectar widgets entre sí para que hacer algo en un widget provoque algo en otro widget o en la propia pantalla. Cada conexión se construye a partir de tres partes simples:
- Una fuente, el widget con el que el usuario interactúa (por ejemplo, un botón).
- Un disparador, lo que el usuario le hace (por ejemplo, un clic).
- Una acción, lo que ocurre como resultado (por ejemplo, ir a otra pantalla), normalmente dirigida a un widget o pantalla de destino.
Léelo como una frase: «Cuando el usuario hace clic en este botón, cambiar a la pantalla de Ajustes.» Eso es un evento. Puedes añadir tantos como quieras para dar vida a toda tu interfaz.
Los eventos se crean visualmente arrastrando conexiones entre widgets, no hay scripting involucrado. Cuando exportas tu proyecto, PicoPixel convierte cada evento en el código LVGL correspondiente por ti.
Abrir el editor de eventos
Selecciona cualquier widget o pantalla, luego cambia a la pestaña Events en la barra lateral derecha (está junto a Design e Inspect). Aquí aparece cada evento como una tarjeta que puedes abrir y configurar.
Cuando aún no has creado ningún evento, PicoPixel te muestra las tres formas de empezar:
- Haz clic en el botón + para añadir un evento.
- Selecciona un widget o pantalla, luego arrastra una conexión desde él hacia otro widget o pantalla.
- Usa el botón de reproducción en el encabezado para ejecutar la vista de eventos y probarlos.
Conectar widgets: arrastra un nodo hacia un destino
La forma más rápida de crear un evento es directamente en el lienzo:
- Selecciona el widget fuente, el elemento con el que quieres que el usuario interactúe.
- Toma el pequeño control de conexión que aparece en su borde y arrastra un hilo hacia el widget o pantalla que quieres afectar.
- Suéltalo en ese destino. PicoPixel dibuja una línea curva entre los dos, con un pequeño nodo en el hilo.
- Haz clic en ese nodo para elegir tu disparador (muestra el actual, como "Clicked"). El destino y el resto de los detalles los configuras en el panel de Events.
Ese hilo visual es el evento. Puedes ver de un vistazo qué widgets están conectados con qué.
¿Prefieres no arrastrar? Haz clic en el botón + del panel de Events y rellena el disparador, la acción y el destino desde los menús desplegables. Mismo resultado, elige lo que te resulte más natural.
Elegir un disparador
El disparador es lo que hace el usuario. Haz clic en el nodo del hilo (o en el menú desplegable de Trigger en el panel de Events) para elegir uno. El más común con diferencia es Clicked, pero hay un conjunto completo:
- Clicked, toque y suelta. Este es tu «pulsación de botón» cotidiana y el que usarás más.
- Pressed, el instante en que un dedo toca la pantalla.
- Released, cuando el dedo se levanta.
- Long Pressed / Long Pressed Repeat, mantenido pulsado, o mantenido y repitiendo.
- Gesture, un deslizamiento.
- Value Changed, cuando el valor de un widget cambia: un control deslizante arrastrado, un interruptor activado, una casilla marcada. Este es el disparador natural para controles deslizantes, interruptores y rodillos.
- Focused / Defocused, cuando un widget gana o pierde el foco.
- Screen Loaded / Screen Unloaded, cuando una pantalla aparece o desaparece. Ideal para configurar cosas en el momento en que se abre una pantalla.
- Scroll Begin / Scroll End, cuando el desplazamiento comienza o se detiene.
- Ready / Cancel, usado por entradas como el teclado en pantalla.
Elige un disparador que se adapte al widget. Clicked tiene sentido en un botón; Value Changed es lo que quieres en un control deslizante o interruptor. Elegir el disparador correcto es la diferencia entre un evento que se activa y uno que nunca lo hace.
Elegir una acción
La acción es lo que ocurre. Esto es lo que puedes elegir, en términos sencillos:
- Change Screen, navegar a otra pantalla. Puedes elegir una transición (Fade, o deslizar izquierda/derecha/arriba/abajo), y establecer su velocidad y retardo. Así es como construyes aplicaciones de múltiples pantallas.
- Delete Screen, ir a otra pantalla y liberar la que estás dejando (útil en dispositivos con poca memoria).
- Show Widget / Hide Widget, mostrar u ocultar algo. Perfecto para ventanas emergentes, paneles y secciones de «más información».
- Set State, añadir, eliminar o alternar un estado como checked, disabled, focused o pressed en un widget.
- Set Opacity, difuminar un widget de totalmente visible (100) a invisible (0).
- Set Properties, cambiar la posición o el tamaño de un widget.
- Set Text, actualizar las palabras mostradas en una etiqueta o botón.
- Set Sprite Mode, cambiar un sprite a una de sus fases (como «Idle» o «Running»), o iniciarlo/detenerlo. Así es exactamente como le das vida a un sprite.
- Animated Image Mode, iniciar, detener o reiniciar una imagen animada.
- Play Animation, ejecutar una animación de línea de tiempo que hayas configurado en un widget.
- Modify Flag, para un control más fino, añadir/eliminar/alternar un flag de LVGL (una opción avanzada).
- Call Function, llamar a tu propia función C personalizada por nombre. Esta es la salida de emergencia para cualquier cosa personalizada; escribes esa función en tu firmware.
Un ejemplo práctico
Supongamos que tienes una pantalla de inicio con un botón «Ajustes» y una pantalla de Ajustes separada. Para conectarlos:
- Selecciona el botón de Ajustes.
- Arrastra una conexión desde él hacia la pantalla de Ajustes (o selecciónala como destino en el panel de Events).
- Establece el disparador en Clicked.
- Establece la acción en Change Screen, con el destino como tu pantalla de Ajustes.
- Opcionalmente elige una transición Slide left para que se sienta como avanzar.
Pulsa el botón de reproducción y toca el botón en la vista previa en vivo, deslizarás directamente a Ajustes. Sin código, sin flashear el dispositivo.
¿Quieres que un personaje reaccione? Añade un botón, establece su disparador en Clicked, elige la acción Set Sprite Mode, apúntalo a tu sprite y elige la fase a la que cambiar (por ejemplo, «Happy»). Ahora pulsar el botón cambia la animación del sprite. Consulta la guía de sprites para aprender a construir el sprite en sí.
Editar y eliminar eventos
Cada evento que creas aparece como una tarjeta en el panel de Events:
- Editar, haz clic en una tarjeta para expandirla y cambiar el disparador, la acción, el destino o cualquiera de las opciones de la acción.
- Eliminar, usa la ✕ de la tarjeta para eliminar ese evento. Su hilo también desaparece del lienzo.
Puedes asociar varios eventos al mismo widget, por ejemplo uno en Pressed y otro en Released, para construir interacciones más ricas.
Qué hacer a continuación
Los eventos son lo que transforma una maqueta estática en una interfaz real. Desde aquí:
- Construye widgets animados de múltiples estados para controlar con Set Sprite Mode en la guía de sprites.
- Mantén tu texto nítido y pequeño con la guía de fuentes.
- ¿Listo para ponerlo en hardware? Sigue el tutorial de ESP32 para exportar y flashear tu interfaz interactiva.
