Kapitel 21 – Grafische Grundformen in LVGL

LVGL 9 mit MicroPython
Kapitel	21
Titel	Grafische Grundformen in LVGL
Voraussetzungen	Grundkenntnisse in MicroPython
Getestet mit	LVGL 9.x
Schwierigkeitsgrad	★★☆☆☆
Benötigte Zeit	40 Minuten
Status	in Arbeit

Kapitel 21 – Grafische Grundformen in LVGL

Lernziel

Nach diesem Kapitel kannst du

• einfache geometrische Formen in LVGL darstellen,
• den Unterschied zwischen UI-Objekten und Canvas verstehen,
• entscheiden, wann Widgets oder Zeichnen sinnvoll ist.

Zwei Wege in LVGL

LVGL bietet zwei grundsätzliche Möglichkeiten für grafische Darstellung:

1. Widgets (UI-basiert)

• lv.obj()
• Labels, Buttons, Container
• Formen über Styles

2. Canvas (Grafik-basiert)

• freie Zeichnung
• Linien, Kreise, Rechtecke
• pixelgenaue Kontrolle

1. Rechteck als Widget

Ein einfaches Rechteck ist ein normales Objekt.

import lvgl as lv

scr = lv.screen_active()

rect = lv.obj(scr)
rect.set_size(120, 60)
rect.align(lv.ALIGN.CENTER, 0, 0)

Rechteck einfärben

style = lv.style_t()
style.init()
style.set_bg_color(lv.color_hex(0xFF0000))
style.set_bg_opa(lv.OPA.COVER)

rect.add_style(style, 0)

Erklärung

Ein lv.obj() ist standardmäßig ein Rechteck ohne Farbe.

Die Farbe kommt über Styles.

2. Kreis über Radius

LVGL hat kein eigenes Kreis-Widget.

Ein Kreis entsteht durch Radius.

circle = lv.obj(scr)
circle.set_size(80, 80)
circle.align(lv.ALIGN.CENTER, 0, 0)
circle.set_style_radius(40, 0)

Erklärung

Wenn der Radius = halbe Breite ist, entsteht ein Kreis.

3. Unterschied Widget vs Canvas

Widget Ansatz

• schnell
• einfach
• ideal für UI

Canvas Ansatz

• flexibel
• pixelgenau
• mehr Aufwand

4. Canvas (freie Zeichnung)

Canvas erlaubt echte Grafikoperationen.

Canvas erstellen

buf = bytearray(100 * 100 * 2)

canvas = lv.canvas(scr)
canvas.set_buffer(buf, 100, 100, lv.COLOR_FORMAT.RGB565)
canvas.center()

Rechteck zeichnen

dsc = lv.draw_rect_dsc_t()
dsc.init()
dsc.bg_color = lv.color_hex(0x00FF00)
dsc.bg_opa = lv.OPA.COVER

canvas.draw_rect(10, 10, 50, 30, dsc)

Kreis zeichnen

cdsc = lv.draw_arc_dsc_t()
cdsc.init()
cdsc.color = lv.color_hex(0x0000FF)
cdsc.width = 3

canvas.draw_arc(50, 50, 20, 0, 360, cdsc)

Typische Anwendung Canvas

• eigene Visualisierungen
• Sensor-Grafiken
• Radar-Darstellungen
• Spezialanzeigen

Wichtiger Hinweis

Hinweis

Canvas benötigt RAM.

Auf ESP32 sollte die Größe bewusst gewählt werden.

Typischer Fehler

Achtung

Viele nutzen Canvas für einfache UI-Elemente.

Das ist unnötig kompliziert – Widgets reichen meist aus.

Merke

Merke

Widgets für UI – Canvas für Grafik.

Zusammenfassung

• Rechtecke entstehen über lv.obj()
• Kreise über Radius
• Canvas ist für freie Grafik
• Widgets sind für 90% aller Fälle ausreichend