Kapitel 16 – Mini-Projekt: Dashboard
Zur Navigation springen
Zur Suche springen
| LVGL 9 mit MicroPython | |
|---|---|
| Kapitel | 16 |
| Titel | Mini-Projekt: Dashboard |
| Voraussetzungen | Grundkenntnisse in MicroPython |
| Getestet mit | LVGL 9.x |
| Schwierigkeitsgrad | ★★★★☆ |
| Benötigte Zeit | 60 Minuten |
| Status | in Arbeit |
Kapitel 16 – Mini-Projekt: Dashboard[Bearbeiten | Quelltext bearbeiten]
Lernziel[Bearbeiten | Quelltext bearbeiten]
Nach diesem Kapitel kannst du
- mehrere LVGL-Konzepte kombinieren,
- ein einfaches Dashboard erstellen,
- Timer, Labels, Buttons und Layouts gemeinsam nutzen,
- eine kleine, echte Anwendung bauen.
Ziel des Projekts[Bearbeiten | Quelltext bearbeiten]
Wir bauen ein einfaches Dashboard mit:
- einer Anzeige (Label)
- einem Button
- einem Zähler
- einem Timer
- einfacher Strukturierung
Aufbau[Bearbeiten | Quelltext bearbeiten]
Das Dashboard zeigt einen Zähler an.
Ein Button erhöht den Zähler.
Ein Timer aktualisiert die Anzeige.
Grundgerüst[Bearbeiten | Quelltext bearbeiten]
import lvgl as lv
scr = lv.screen_active()Anzeige (Label)[Bearbeiten | Quelltext bearbeiten]
label = lv.label(scr)
label.center()
label.set_text("0")Button[Bearbeiten | Quelltext bearbeiten]
btn = lv.button(scr)
btn.align(lv.ALIGN.BOTTOM_MID, 0, -20)
btn_label = lv.label(btn)
btn_label.set_text("Plus")
btn_label.center()Zähler[Bearbeiten | Quelltext bearbeiten]
counter = 0Event für Button[Bearbeiten | Quelltext bearbeiten]
def on_click(e):
global counter
counter += 1
print("Zähler:", counter)
btn.add_event_cb(on_click, lv.EVENT.CLICKED, None)Timer für Anzeige[Bearbeiten | Quelltext bearbeiten]
def update(t):
label.set_text(str(counter))
lv.timer_create(update, 200, None)Erklärung[Bearbeiten | Quelltext bearbeiten]
- Button erhöht den Zähler
- Timer aktualisiert die Anzeige regelmäßig
- Label zeigt den aktuellen Wert
Warum Timer + Event?[Bearbeiten | Quelltext bearbeiten]
- Event → reagiert auf Benutzer
- Timer → aktualisiert Anzeige automatisch
Erweiterung: Reset Button[Bearbeiten | Quelltext bearbeiten]
btn_reset = lv.button(scr)
btn_reset.align(lv.ALIGN.TOP_MID, 0, 20)
reset_label = lv.label(btn_reset)
reset_label.set_text("Reset")
reset_label.center()
def reset(e):
global counter
counter = 0
btn_reset.add_event_cb(reset, lv.EVENT.CLICKED, None)Layout Hinweis[Bearbeiten | Quelltext bearbeiten]
Hinweis
In einfachen Projekten kann man absolute Positionierung verwenden.
In größeren Projekten sollte Flex oder Grid genutzt werden.
Typische Erweiterungen[Bearbeiten | Quelltext bearbeiten]
Dieses Dashboard kann erweitert werden um:
- Sensorwerte (z. B. Temperatur)
- WLAN Status (ESP32)
- Uhrzeit
- Icons
- Animationen
Merke[Bearbeiten | Quelltext bearbeiten]
Merke
Ein vollständiges UI besteht immer aus Anzeige + Logik + Aktualisierung.
Zusammenfassung[Bearbeiten | Quelltext bearbeiten]
- Events steuern Benutzeraktionen
- Timer aktualisieren Werte automatisch
- Labels zeigen Daten an
- Buttons verändern Zustände
- Alles zusammen ergibt eine echte Anwendung