Kapitel 16 – Mini-Projekt: Dashboard

Aus Micropython
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 = 0

Event 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