BeispielfürEreignisse

Enthalten

• 480 x 480 LVGL-Ansicht mit Interaktionen, ausgelegt für eingebettete Displays und schnelle Experimente.
• Fünf Button-Beispiele, die jeweils eine andere Art von UI-Reaktion zeigen.
• Deckkraft-Steuerungen, bei denen Low Opacity und High Opacity mit demselben Zielbild verbunden sind.
• Textaktualisierungsbeispiel, das den Button Change Text verwendet, um ein Label zu ändern.
• Eigenschaftsänderungsbeispiel, das Set Properties - Size verwendet, um die Größe eines Zielobjekts zu ändern.
• Animations-Trigger, der Play Animation nutzt, um eine ereignisgesteuerte Bewegung oder einen Übergang zu demonstrieren.
• Event-Editor-Verknüpfungsvorschau, mit sichtbaren Verbindungslinien und Clicked-Auslöserknoten.
• Aktions-Einstellungen im Inspector, die Quelle, Trigger, Aktion, Deckkraftwert und Zielfelder zeigen.
• Zielbilde, mit einer einfachen cyanfarbenen PicoPixel-Grafik, damit Zustandsänderungen leicht erkennbar sind.
• Doto-32-Schrift-Asset, verwendet für den Text in Punktschrift auf der Arbeitsfläche.

Asset-Überblick

Die Vorlage bleibt klein genug, um sie auf einen Blick zu verstehen. Im Assets-Panel zeigt die lokale Bibliothek:

• Bilder: 1, eine wiederverwendbare 500 x 500 cyanfarbene Grafik für die Zielbilde.
• Farben: 0, wobei Farben direkt im Design angewendet sind.
• Schriften: 1, Doto 32, verwendet für den Labeltext in Punktschrift.
• Widgets: 0, damit das Beispiel auf Ereignisverknüpfungen innerhalb der Ansicht statt gespeicherte Widget-Assets fokussiert bleibt.

Im Ebenen-Panel erkennst du den übersichtlichen Aufbau dieser interaktiven Beispielansicht:

• Screen 1, die 480 x 480 große Arbeitsfläche.
• Button 1 bis Button 5, die klickbaren Quellen der Beispiele.
• Image 1, Image 2 und Image 3, die sichtbaren Ziele für Deckkraft-, Größen- und Animationsänderungen.
• Label 1, das Textziel für das Change-Text-Beispiel.

Zum Lernen ist das besonders praktisch: Alle Quell- und Ziel-Widgets sind gleichzeitig sichtbar.

Struktur des Event-Editors

Wenn die Events-Ansicht aktiv ist, legt PicoPixel den Interaktionsgraphen über das LVGL-Layout. Der Screenshot markiert das Projekt mit Contains Events und zeichnet dann Verbindungslinien von den Button-Quellen zu ihren Zielen.

• Low Opacity und High Opacity verwenden beide einen Clicked-Trigger und führen zum selben Zielbild.
• Change Text verwendet einen Clicked-Trigger und zeigt auf das Textlabel in Punktschrift.
• Set Properties - Size verwendet einen Clicked-Trigger und zeigt zum Vergrößern oder Verkleinern auf ein Zielbild.
• Play Animation verwendet einen Clicked-Trigger und zeigt auf ein Zielbild für die Animationswiedergabe.
• Das rechte Events-Panel zeigt ein ausgewähltes Event mit Source, Trigger, Action, Werteinstellungen wie Opacity und Destination.

An dieser Vorlage kannst du nachvollziehen, wie PicoPixel Benutzereingaben mit Änderungen an LVGL-Objekten verknüpft. Auslöser, Aktion und Ziel bleiben dabei sichtbar.

Warum das gut für LVGL funktioniert

LVGL-Anwendungen brauchen meist viele kleine Interaktionen: einen Button klicken, ein Label aktualisieren, den Zustand eines Objekts ändern, ein Bild bewegen, Ansichten wechseln oder eine Animation starten. Dieses Beispiel hält diese Muster sichtbar und wiederverwendbar.

• Buttons sind native LVGL-Eingabeobjekte, daher funktioniert dasselbe Muster mit Touch, Encoder-Fokus oder anderen Eingabetreibern.
• Der Auslöser ist direkt sichtbar, mit Clicked-Knoten im Editor, sodass klar ist, was jede Aktion startet.
• Ziele sind normale LVGL-Objekte, einschließlich Bildern und Labels, sodass die exportierte UI aus der Firmware heraus bearbeitbar bleibt.
• Deckkraft- und Eigenschaftsänderungen sind leichtgewichtig, wodurch die Beispiele für kleine eingebettete Displays geeignet sind.
• Ereignisse starten eigenständige Animationen, etwa wenn ein Schaltflächenklick eine Bewegung auslöst.
• Das Projekt lässt sich exportieren als Standard-LVGL-8.x-Code, integrierbar in ESP-IDF, Arduino, PlatformIO, STM32, Zephyr oder einen anderen LVGL-Build.

Ansteuerung zur Laufzeit

PicoPixel kann die Event-Verknüpfung für dich generieren, aber das Konzept entspricht direkt normalen LVGL-Callbacks. Wenn du die exportierte UI mit eigener Firmware-Logik erweitern musst, lautet das Muster meistens: Event-Code prüfen und dann das Zielobjekt aktualisieren.

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");
}

Nutze den visuellen Editor für die übliche Verknüpfung, und verwende eigene C-Callbacks für Verhalten, das von Firmware-Zustand, Sensordaten, Geräteeinstellungen oder Netzwerkantworten abhängt.

Anpassungsideen

Verwende dies als kostenlose LVGL-Interaktionsvorlage und tausche anschließend die Demo-Bedienelemente gegen deine eigene Produkt-UI aus.

• Ersetze die fünf Demo-Buttons durch Schalter für Einstellungen, Menüpunkte, Dashboard-Steuerungen oder Hardware-Befehle.
• Wandle die Deckkraft-Aktionen in deaktivierte/aktivierte, Warn- oder ausgewählte/nicht ausgewählte Zustände um.
• Verwende die Textaktion für Statusmeldungen wie Connected, Saving, Armed, Charging oder Complete.
• Mache aus dem Größenbeispiel einen Fortschrittsindikator, eine expandierende Karte, einen Effekt beim Drücken oder einen Benachrichtigungspuls.
• Nutze das Animationsbeispiel für Seitenübergänge, Bestätigungsfeedback, Ladezustände oder Aufmerksamkeitshinweise.
• Füge Navigationsaktionen zwischen mehreren LVGL-Ansichten hinzu, sobald die Beispiele mit nur einer Ansicht klar sind.
• Kombiniere die Buttons mit echten Firmware-Events, etwa Helligkeit ändern, ein Relais umschalten, einen Modus wählen oder eine Kalibrierung starten.

Export in dein Projekt

Öffne die Vorlage in PicoPixel, prüfe den Event-Graphen, benenne die wichtigen Quellen und Ziele um und exportiere das Projekt anschließend als LVGL-C-Code. Die generierten Dateien können wie jeder andere PicoPixel-Export zu einem bestehenden Embedded-Projekt hinzugefügt werden.

Für ESP32-Projekte ist der übliche Ablauf:

1. Konfiguriere deine Display- und Eingabetreiber.
2. Öffne diese Events-Vorlage und passe Buttons, Labels, Bilder und Aktionen an.
3. Exportiere die PicoPixel-UI als LVGL-C-Code.
4. Füge die exportierten Dateien deinem ESP-IDF-, Arduino- oder PlatformIO-Projekt hinzu.
5. Rufe ui_init() auf, nachdem LVGL und dein Display-Treiber bereit sind.
6. Ergänze eigene Firmware-Callbacks nur dort, wo der visuelle Event-Editor nicht ausreicht.

Mehr Hintergrund findest du im PicoPixel-Event-Editor-Leitfaden, im ESP32-LVGL-UI-Tutorial und im Leitfaden zur Verwendung von PicoPixel-Vorlagen.

Geeignete Einsatzbereiche

Diese Vorlage eignet sich als Ausgangspunkt für:

• LVGL-Event-Beispiele
• Interaktionen per Schaltflächenklick
• ESP32-Touch-UI-Prototypen
• Einstellungsseiten und Bedienpanels
• Smart-Home-Dashboards
• Wearable- oder Handheld-Menüs
• Beispiele für Animations-Trigger
• Text- und Bildzustandsänderungen
• Lernen, wie im PicoPixel-Editor angelegte Ereignisse in LVGL umgesetzt werden