Ü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 machst du deine Oberfläche reaktionsfähig. Diese Anleitung erklärt, was der Event-Editor ist, wie die Drag-to-Connect-Mechanik funktioniert und die vollständige Auswahl an Auslösern und Aktionen – alles ohne Code zu schreiben.
Was ist der Event-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.
Lies es als Satz: „Wenn der Benutzer diese Schaltfläche klickt, wechsle zum Einstellungs*bildschirm."* Das ist ein Event. 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 jeden Event 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 jeder Event 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 einen Event 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 verbinden: Einen Knoten auf ein Ziel ziehen
Der schnellste Weg, einen Event zu erstellen, führt direkt über die Canvas:
- 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 einen Draht 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 dem Draht.
- 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.
Dieser visuelle Draht ist der Event. 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 dem Draht (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 – der Moment, in dem ein Finger berührt.
- Released – wenn der Finger abgehoben wird.
- Long Pressed / Long Pressed Repeat – gedrückt gehalten oder gehalten und wiederholend.
- Gesture – eine Wischbewegung.
- Value Changed – wenn sich der Wert eines Widgets ändert: ein Schieberegler wird gezogen, ein Schalter umgelegt, eine Checkbox aktiviert. Das ist der natürliche Auslöser für Schieberegler, Schalter und Rollen.
- 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 Event, der auslöst, und einem, der es nie tut.
Eine Aktion wählen
Die Aktion ist was passiert. Hier ist die Auswahl, in einfachen Worten:
- Change Screen – zu einem anderen Bildschirm navigieren. Du kannst einen Übergang wählen (Verblassen oder nach links/rechts/oben/unten schieben) 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 an einem Widget hinzufügen, 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 gibst du einem Sprite seinen Funken Leben.
- Animated Image Mode – ein animiertes Bild starten, stoppen oder neu starten.
- Play Animation – eine Timeline-Animation 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 nach Name aufrufen. Das ist der Ausweg für alles Individuelle; du schreibst diese Funktion in deiner Firmware.
Ein praktisches Beispiel
Angenommen, du hast einen Home-Bildschirm 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, mit dem Ziel als deinem Einstellungsbildschirm.
- Wähle optional einen Slide left-Übergang, damit es sich wie ein Vorwärtsbewegen anfühlt.
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, zeige auf deinen Sprite 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
Jeder erstellte Event 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 diesen Event zu entfernen. Sein Draht verschwindet ebenfalls von der Canvas.
Du kannst einem Widget mehrere Events zuweisen – zum Beispiel einen bei Pressed und einen anderen bei Released –, um reichhaltigere Interaktionen zu erstellen.
Was als nächstes kommt
Events sind das, was aus einem statischen Entwurf eine echte Benutzeroberfläche macht. Von hier aus:
- Erstelle animierte, mehrere Zustände enthaltende Widgets für den Antrieb mit Set Sprite Mode in der Sprites-Anleitung.
- Halte deinen Text scharf und klein mit der Schriften-Anleitung.
- Bereit für die Hardware? Folge dem ESP32-Tutorial, um deine interaktive Benutzeroberfläche zu exportieren und zu flashen.
