Events-Beispiel

Enthalten

• 480 x 480 LVGL-Interaktionsscreen, 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 Bildziel 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 eventgesteuerte Bewegung oder Transition zu demonstrieren.
• Event-Editor-Verdrahtungsvorschau, mit sichtbaren Verbindungslinien und Clicked-Trigger-Nodes.
• Aktions-Einstellungen im Inspector, die Quelle, Trigger, Aktion, Deckkraftwert und Zielfelder zeigen.
• Bildziele, mit einer einfachen cyanfarbenen PicoPixel-Grafik, damit Zustandsänderungen leicht erkennbar sind.
• Doto-32-Font-Asset, verwendet für den gepunkteten Displaytext auf dem Canvas.

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 Bildziele.
• Farben: 0, wobei Farben direkt im Design angewendet sind.
• Schriften: 1, Doto 32, verwendet für den gepunkteten Labeltext.
• Widgets: 0, damit das Beispiel auf screenweite Event-Verdrahtung statt gespeicherte Widget-Assets fokussiert bleibt.

Das Ebenen-Panel zeigt das Projekt als einfaches Interaktionslabor auf einem Screen:

• Screen 1, der 480 x 480 Canvas.
• 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.

Das macht es nützlich zum Lernen, weil jede Quelle und jedes Ziel auf demselben Screen sichtbar ist.

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 Bildziel.
• Change Text verwendet einen Clicked-Trigger und zeigt auf das gepunktete Textlabel.
• Set Properties - Size verwendet einen Clicked-Trigger und zeigt zum Vergrößern oder Verkleinern auf ein Bildziel.
• Play Animation verwendet einen Clicked-Trigger und zeigt auf ein Bildziel für die Animationswiedergabe.
• Das rechte Events-Panel zeigt ein ausgewähltes Event mit Source, Trigger, Action, Werteinstellungen wie Opacity und Destination.

Genau darin liegt der zentrale Lernwert dieser Vorlage: Sie zeigt, wie PicoPixels visueller Event-Graph Nutzereingaben auf LVGL-Objektänderungen abbildet, ohne die Beziehung zwischen Trigger und Ziel zu verstecken.

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, Screens 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 Trigger ist explizit, mit Clicked-Nodes 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 editierbar bleibt.
• Deckkraft- und Eigenschaftsänderungen sind leichtgewichtig, wodurch die Beispiele für kleine eingebettete Displays geeignet sind.
• Animationsverdrahtung lehrt die Übergabe, von einem Nutzer-Event zu einer visuellen Änderung, die unabhängig laufen kann.
• Das Projekt exportiert als standardmäßiger LVGL-8.x-UI-Code, integrierbar in ESP-IDF, Arduino, PlatformIO, STM32, Zephyr oder einen anderen LVGL-Build.

Laufzeitmuster

PicoPixel kann die Event-Verdrahtung für Sie generieren, aber das Konzept entspricht direkt normalen LVGL-Callbacks. Wenn Sie die exportierte UI mit eigener Firmware-Logik erweitern müssen, 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");
}

Nutzen Sie den visuellen Editor für die übliche Verdrahtung, und reservieren Sie eigene C-Callbacks für Verhalten, das von Firmware-Zustand, Sensordaten, Geräteeinstellungen oder Netzwerkantworten abhängt.

Anpassungsideen

Verwenden Sie dies als kostenlose LVGL-Interaktionsvorlage und tauschen Sie anschließend die Demo-Controls gegen Ihre eigene Produkt-UI aus.

• Ersetzen Sie die fünf Demo-Buttons durch Einstellungs-Toggles, Menüpunkte, Dashboard-Steuerungen oder Hardware-Befehle.
• Wandeln Sie die Deckkraft-Aktionen in deaktivierte/aktivierte, Warn- oder ausgewählte/nicht ausgewählte Zustände um.
• Verwenden Sie die Textaktion für Statusmeldungen wie Connected, Saving, Armed, Charging oder Complete.
• Machen Sie aus dem Größenbeispiel einen Fortschrittsindikator, eine expandierende Karte, einen Pressed-State-Effekt oder einen Benachrichtigungspuls.
• Nutzen Sie das Animationsbeispiel für Seitenübergänge, Bestätigungsfeedback, Ladezustände oder Aufmerksamkeitshinweise.
• Fügen Sie Navigationsaktionen zwischen mehreren LVGL-Screens hinzu, sobald die Single-Screen-Beispiele klar sind.
• Kombinieren Sie die Buttons mit echten Firmware-Events, etwa Helligkeit ändern, ein Relais umschalten, einen Modus wählen oder eine Kalibrierung starten.

Export in Ihr Projekt

Öffnen Sie die Vorlage in PicoPixel, prüfen Sie den Event-Graphen, benennen Sie die wichtigen Quellen und Ziele um und exportieren Sie 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. Konfigurieren Sie Ihre Display- und Eingabetreiber.
2. Öffnen Sie diese Events-Vorlage und passen Sie Buttons, Labels, Bilder und Aktionen an.
3. Exportieren Sie die PicoPixel-UI als LVGL C.
4. Fügen Sie die exportierten Dateien Ihrem ESP-IDF-, Arduino- oder PlatformIO-Projekt hinzu.
5. Rufen Sie ui_init() auf, nachdem LVGL und Ihr Display-Treiber bereit sind.
6. Ergänzen Sie eigene Firmware-Callbacks nur dort, wo der visuelle Event-Editor nicht ausreicht.

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

Beste Einsatzfälle

Diese Vorlage passt gut, wenn Sie einen klaren Ausgangspunkt brauchen für:

• LVGL-Event-Beispiele
• Button-Klick-Interaktionsdemos
• 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 visuelle PicoPixel-Events zu LVGL-Verhalten werden