LVGL 07 Farben und Schriftarten
| LVGL 9 mit MicroPython | |
|---|---|
| Kapitel | 8 |
| Titel | Farben und Schriftarten |
| Voraussetzungen | Grundkenntnisse in MicroPython |
| Getestet mit | LVGL 9.x |
| Schwierigkeitsgrad | ★★☆☆☆ |
| Benötigte Zeit | 25 Minuten |
| Status | in Arbeit |
Kapitel 7 – Farben und Schriftarten[Bearbeiten | Quelltext bearbeiten]
Lernziel[Bearbeiten | Quelltext bearbeiten]
Nach diesem Kapitel kannst du
- Farben in LVGL sicher verwenden,
- zwischen Farbformaten unterscheiden,
- Schriftarten gezielt einsetzen,
- typische Fehler vermeiden.
Farben in LVGL[Bearbeiten | Quelltext bearbeiten]
LVGL arbeitet intern mit 24-Bit-Farben (RGB).
Eine Farbe besteht aus
- Rot
- Grün
- Blau
Jede Komponente hat einen Wert von 0 bis 255.
Farbe mit Hex-Wert[Bearbeiten | Quelltext bearbeiten]
Die häufigste Schreibweise ist:
lv.color_hex(0xFF0000)Beispiele:
- Rot: 0xFF0000
- Grün: 0x00FF00
- Blau: 0x0000FF
- Weiß: 0xFFFFFF
- Schwarz: 0x000000
Beispiel[Bearbeiten | Quelltext bearbeiten]
label.set_style_text_color(lv.color_hex(0xFF0000), 0)Farbe mit RGB[Bearbeiten | Quelltext bearbeiten]
Alternativ kann eine Farbe direkt aus RGB-Werten erzeugt werden:
lv.color_make(255, 0, 0)Unterschied[Bearbeiten | Quelltext bearbeiten]
- color_hex → kompakte Schreibweise
- color_make → explizite RGB-Werte
In der Praxis wird meist color_hex verwendet.
Farbpaletten[Bearbeiten | Quelltext bearbeiten]
LVGL bietet vordefinierte Farben:
lv.palette_main(lv.PALETTE.RED)Beispiele:
- RED
- BLUE
- GREEN
- YELLOW
- ORANGE
- GREY
Wann welche Farbe?[Bearbeiten | Quelltext bearbeiten]
- color_hex → exakte Kontrolle
- palette → schnelle Standardfarben
Hintergrundfarbe[Bearbeiten | Quelltext bearbeiten]
Hintergrundfarben benötigen immer eine Deckkraft:
style.set_bg_color(lv.color_hex(0x0000FF))
style.set_bg_opa(lv.OPA.COVER)Ohne OPA bleibt der Hintergrund unsichtbar.
Schriftarten[Bearbeiten | Quelltext bearbeiten]
LVGL verwendet vordefinierte Schriftarten.
Beispiele:
lv.font_montserrat_12
lv.font_montserrat_16
lv.font_montserrat_20
lv.font_montserrat_24Beispiel[Bearbeiten | Quelltext bearbeiten]
style.set_text_font(lv.font_montserrat_20)Schriftarten im Style[Bearbeiten | Quelltext bearbeiten]
Schriftarten werden immer über Styles gesetzt:
style = lv.style_t()
style.init()
style.set_text_font(lv.font_montserrat_20)
label.add_style(style, lv.PART.MAIN)Wichtiger Hinweis[Bearbeiten | Quelltext bearbeiten]
Hinweis
Nicht alle Schriftgrößen sind standardmäßig im Firmware-Build enthalten.
Nur eingebundene Fonts können verwendet werden.
Typischer Fehler[Bearbeiten | Quelltext bearbeiten]
Achtung
Viele erwarten, dass jede beliebige Schriftgröße verfügbar ist.
In LVGL müssen Fonts beim Kompilieren oder Build-Prozess eingebunden werden.
Best Practice[Bearbeiten | Quelltext bearbeiten]
- Für kleine Displays: 12–16 px
- Für Standard-UI: 16–20 px
- Für große Buttons: 24 px oder größer
Zusammenfassung[Bearbeiten | Quelltext bearbeiten]
- Farben werden meist mit color_hex gesetzt
- RGB ist eine Alternative
- Hintergrundfarben brauchen OPA
- Schriftarten sind im System begrenzt
- Fonts müssen im Build enthalten sein