LVGL 07 Farben und Schriftarten

Aus Micropython
Zur Navigation springen Zur Suche springen
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_24

Beispiel[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