Überblick
Ein Bildschirm voller Schaltflächen tut wenig, bis du festlegst, was passieren soll, wenn jemand darauf tippt. Das ist die Aufgabe des Event-Editors: Hier legst du fest, wie deine Oberfläche auf Eingaben reagiert. Diese Anleitung erklärt, was das Ereignis-Editor ist, wie die Verknüpfen per Ziehen funktioniert und die vollständige Auswahl an Auslösern und Aktionen – alles ohne Code zu schreiben.
Was ist das Ereignis-Editor?
Der Event-Editor ermöglicht es dir, Widgets miteinander zu verbinden, sodass eine Aktion an einem Widget eine Reaktion auslöst – entweder an einem anderen Widget oder am Bildschirm selbst. Jede Verbindung besteht aus drei einfachen Teilen:
- Eine Quelle – das Widget, mit dem der Benutzer interagiert (zum Beispiel eine Schaltfläche).
- Ein Auslöser – was der Benutzer damit macht (zum Beispiel ein Klick).
- Eine Aktion – was als Ergebnis passiert (zum Beispiel zu einem anderen Bildschirm wechseln), meist gerichtet an ein Ziel-Widget oder einen Bildschirm.
Als Satz ausgedrückt: „Wenn jemand auf diese Schaltfläche klickt, wechsle zum Einstellungsbildschirm.“ Das ist ein Ereignis. Du kannst so viele hinzufügen, wie du möchtest, um deine gesamte Oberfläche zum Leben zu erwecken.
Events werden visuell erstellt, indem Verbindungen zwischen Widgets gezogen werden – es ist kein Scripting erforderlich. Wenn du dein Projekt exportierst, wandelt PicoPixel jedes Ereignis in den passenden LVGL-Code um.
Den Event-Editor öffnen
Wähle ein beliebiges Widget oder einen Bildschirm aus und wechsle dann zur Registerkarte Events in der rechten Seitenleiste (sie befindet sich neben Design und Inspect). Hier erscheint jedes Ereignis als Karte, die du öffnen und konfigurieren kannst.
Wenn du noch keine Events erstellt hast, zeigt PicoPixel dir die drei Möglichkeiten, loszulegen:
- Klicke auf die +-Schaltfläche, um ein Ereignis hinzuzufügen.
- Wähle ein Widget oder einen Bildschirm aus und ziehe eine Verbindung von ihm zu einem anderen Widget oder Bildschirm.
- Verwende die Play-Schaltfläche im Header, um die Events-Ansicht auszuführen und sie auszuprobieren.
Widgets per Drag-and-Drop verbinden
Der schnellste Weg, ein Ereignis zu erstellen, führt direkt über die Arbeitsfläche:
- Wähle das Quell-Widget aus – das Element, mit dem der Benutzer interagieren soll.
- Greife den kleinen Verbindungsgriff, der an seinem Rand erscheint, und ziehe eine Verbindungslinie zum Widget oder Bildschirm, den du beeinflussen möchtest.
- Lasse ihn auf dem Ziel los. PicoPixel zeichnet eine geschwungene Linie zwischen den beiden, mit einem kleinen Knoten auf der Verbindungslinie.
- Klicke auf diesen Knoten, um deinen Auslöser auszuwählen (er zeigt den aktuellen an, z. B. „Clicked"). Das Ziel und die weiteren Details legst du im Events-Panel fest.
Diese Verbindungslinie ist das Ereignis. Du siehst auf einen Blick, welche Widgets miteinander verbunden sind.
Lieber nicht ziehen? Klicke stattdessen auf die +-Schaltfläche im Events-Panel und fülle Auslöser, Aktion und Ziel über Dropdown-Menüs aus. Gleiches Ergebnis – wähle, was sich natürlicher anfühlt.
Einen Auslöser wählen
Der Auslöser ist was der Benutzer tut. Klicke auf den Knoten auf der Verbindungslinie (oder das Auslöser-Dropdown im Events-Panel), um einen auszuwählen. Mit Abstand am häufigsten ist Clicked, aber es gibt eine vollständige Auswahl:
- Clicked – Antippen und Loslassen. Das ist dein alltäglicher „Schaltflächendruck" und der am häufigsten verwendete.
- Pressed – sobald ein Finger das Widget berührt.
- Released – wenn der Finger abgehoben wird.
- Long Pressed / Long Pressed Repeat – einmal beim längeren Gedrückthalten oder wiederholt, solange das Widget gedrückt bleibt.
- Gesture – eine Wischbewegung.
- Value Changed – wenn sich der Wert eines Widgets ändert: ein Schieberegler wird gezogen, ein Schalter umgelegt, eine Checkbox aktiviert. Das passt zu Schiebereglern, Schaltern und Roller-Widgets.
- Focused / Defocused – wenn ein Widget den Fokus erhält oder verliert.
- Screen Loaded / Screen Unloaded – wenn ein Bildschirm erscheint oder verschwindet. Ideal, um Dinge einzurichten, sobald ein Bildschirm geöffnet wird.
- Scroll Begin / Scroll End – wenn das Scrollen beginnt oder aufhört.
- Ready / Cancel – wird von Eingaben wie der Bildschirmtastatur verwendet.
Wähle einen Auslöser, der zum Widget passt. Clicked macht auf einer Schaltfläche Sinn; Value Changed ist das Richtige für einen Schieberegler oder Schalter. Den richtigen Auslöser zu wählen ist der Unterschied zwischen einem Ereignis, das ausgelöst wird, und einem, das nie eintritt.
Eine Aktion wählen
Die Aktion ist was passiert. Diese Aktionen stehen zur Verfügung:
- Change Screen – zu einem anderen Bildschirm navigieren. Du kannst einen Übergang wählen (Überblenden oder Verschieben nach links, rechts, oben oder unten) und Geschwindigkeit sowie Verzögerung festlegen. So baust du mehrseitige Apps.
- Delete Screen – zu einem anderen Bildschirm wechseln und den aktuellen freigeben (praktisch auf speicherknappen Geräten).
- Show Widget / Hide Widget – etwas einblenden oder ausblenden. Perfekt für Pop-ups, Panels und „Mehr Info"-Bereiche.
- Set State – einen Zustand wie checked, disabled, focused oder pressed für ein Widget setzen, entfernen oder umschalten.
- Set Opacity – ein Widget von vollständig sichtbar (100) bis unsichtbar (0) ausblenden.
- Set Properties – Position oder Größe eines Widgets ändern.
- Set Text – den Text auf einem Label oder einer Schaltfläche aktualisieren.
- Set Sprite Mode – einen Sprite auf eine seiner Phasen umschalten (z. B. „Idle" oder „Running") oder starten/stoppen. So reagiert der Sprite auf Eingaben.
- Animated Image Mode – ein animiertes Bild starten, stoppen oder neu starten.
- Play Animation – eine Animation auf der Zeitleiste ausführen, die du für ein Widget eingerichtet hast.
- Modify Flag – für mehr Kontrolle: ein LVGL-Flag hinzufügen/entfernen/umschalten (eine erweiterte Option).
- Call Function – eine eigene C-Funktion über ihren Namen aufrufen. So kannst du beliebiges Verhalten ergänzen; die Funktion implementierst du in deiner Firmware.
Ein praktisches Beispiel
Angenommen, du hast einen Startbildschirm mit einer „Einstellungen"-Schaltfläche und einem separaten Einstellungsbildschirm. So verbindest du sie:
- Wähle die Einstellungsschaltfläche aus.
- Ziehe eine Verbindung von ihr zum Einstellungsbildschirm (oder wähle ihn als Ziel im Events-Panel).
- Setze den Auslöser auf Clicked.
- Setze die Aktion auf Change Screen, und wähle als Ziel den Einstellungsbildschirm.
- Wähle optional einen Slide left-Übergang, um den Wechsel zur nächsten Ansicht zu verdeutlichen.
Drücke die Play-Schaltfläche und tippe in der Live-Vorschau auf die Schaltfläche – du wirst direkt zu den Einstellungen wechseln. Kein Code, kein Flashen des Geräts.
Soll ein Charakter reagieren? Füge eine Schaltfläche hinzu, setze ihren Auslöser auf Clicked, wähle die Set Sprite Mode-Aktion, wähle deinen Sprite als Ziel und wähle die Phase, zu der gewechselt werden soll (z. B. „Happy"). Jetzt ändert das Antippen der Schaltfläche die Animation des Sprites. Sieh dir die Sprites-Anleitung an, um zu erfahren, wie du den Sprite selbst erstellst.
Events bearbeiten und löschen
Jedes erstellte Ereignis erscheint als Karte im Events-Panel:
- Bearbeiten – klicke auf eine Karte, um sie zu erweitern und Auslöser, Aktion, Ziel oder Optionen der Aktion zu ändern.
- Löschen – verwende das ✕ auf der Karte, um dieses Ereignis zu entfernen. Seine Verbindungslinie verschwindet ebenfalls von der Arbeitsfläche.
Du kannst einem Widget mehrere Events zuweisen – zum Beispiel einen bei Pressed und einen anderen bei Released –, um reichhaltigere Interaktionen zu erstellen.
Nächste Schritte
Events sind das, was aus einem statischen Entwurf eine echte Benutzeroberfläche macht. Von hier aus:
- Lerne, animierte Widgets mit mehreren Zuständen zu erstellen und mit Set Sprite Mode zu steuern, in der Sprites-Anleitung.
- Lerne, Text scharf darzustellen und Speicher zu sparen mit der Schriften-Anleitung.
- Bereit für die Hardware? Folge dem ESP32-Tutorial, um deine interaktive Benutzeroberfläche zu exportieren und zu flashen.
