LVGL 04 01 Label

LVGL 9 mit MicroPython
Kapitel	3
Titel	Das Label
Voraussetzungen	Grundkenntnisse in MicroPython
Getestet mit	LVGL 9.x
Schwierigkeitsgrad	★☆☆☆☆
Benötigte Zeit	20 Minuten
Status	Fertig

Kapitel 4.1 – Das Label

Lernziel

Nach diesem Kapitel kannst du

• ein Label erzeugen,
• Text anzeigen,
• den Text ändern,
• ein Label auf dem Bildschirm positionieren.

Was ist ein Label?

Ein Label ist das einfachste Widget in LVGL.

Es dient ausschließlich zur Anzeige von Text.

Ein Label kann beispielsweise verwendet werden für

• Überschriften
• Statusmeldungen
• Messwerte
• Uhrzeiten
• Menüpunkte

Ein Label reagiert nicht auf Benutzereingaben.

Soll der Benutzer auf einen Text klicken können, wird üblicherweise ein Button verwendet.

Das erste Label

from cyd_st7789_28 import *

scr = lv.screen_active()

label = lv.label(scr)
label.set_text("Hallo LVGL")
label.center()

Erklärung

Zuerst müssen wir die Init-Datei für unser CYD laden:

from cyd_st7789_28 import *

Anschließend erzeugen wir einen Screen. Hier nehmen wir den Von LVGL schon bereitgestellten:

scr = lv.screen_active()

Nun können wird das Label erstellen. Zuerst ein LVGL-Objekt vom Typ label erzeugen:

label = lv.label(scr)

Dieses Label wird auf scr dargestellt. Der aktuelle Screen ist der Parent des Labels.

Mit

label.set_text("Hallo LVGL")

wird der anzuzeigende Text festgelegt.

Die Methode

label.center()

positioniert das Label in der Mitte seines Parents.

Übung

Achtung

Setze das CYD-Board zurück indem Du den USB-Stecker abziehst und dann wieder aufsteckst oder kontaktschonender den RST-Knopf drückst. Der ESP32 wird neu gestartet. Das ist bei LVGL immer wichtig, wenn Du neuen Code testen willst!

Wenn Thonny wieder Kontakt zum CYD hat gebe nach einander die obigen Codezeilen ein und drücke jeweils Enter.

Nach den ersten beiden Zeilen passiert nichts.

Nach der dritten Zeile erscheint oben links der Text "Text". Das Label wurde erzeugt und der darin enthaltene Defaulttext wird angezeigt. Das passiert, weil in unserer Init-Datei die wir als erstes importiert haben die Eventloop schon gestartet wurde.

Wenn wir dem Label einen Text zuweisen, wird dieser angezeigt. Das erfolgt augenblicklich (also genau nach maximal 33ms, dem Interval der Eventloop).

Nun verwundert es auch nicht, das nach der letzten Zeile die Anzeige plötzlich in der Mitte erfolgt.

In den folgenden Abschnitten werden einige Methode aufgeführt die mit label verwendet werden können. Wenn sie Dich interessieren spiele ein wenig damit herum. Das fördert das Verständnis für die Anwendung von LVGL.

Methoden von label

Label hat eine Reihe eigener Methoden:

set_text(text)

Setzt den Text des Labels. Ein bereits vorhandener Text wird ersetzt.

get_text()

Liefert den aktuellen Text des Labels als Zeichenkette zurück.

set_text_static(text)

: Setzt den Label-Text ohne interne Kopie. Der Text muss während der gesamten Lebensdauer des Labels gültig bleiben. Diese Methode stammt hauptsächlich aus der C-API und wird in MicroPython nur selten benötigt.

set_long_mode(mode)

Legt fest, wie das Label mit Text umgeht, der nicht in die verfügbare Fläche passt.

lv.LABEL_LONG_MODE.WRAP

Der Text wird automatisch umgebrochen und über mehrere Zeilen dargestellt.

lv.LABEL_LONG_MODE.DOT

Der Text wird abgeschnitten und am Ende durch drei Punkte (...) ersetzt.

lv.LABEL_LONG_MODE.SCROLL

Der Text läuft automatisch horizontal durch, wenn er breiter als das Label ist.

lv.LABEL_LONG_MODE.SCROLL_CIRCULAR

Der Text läuft kontinuierlich im Kreis. Nach dem Ende beginnt die Anzeige wieder am Anfang.

lv.LABEL_LONG_MODE.CLIP

Der Text wird außerhalb der Label-Größe abgeschnitten. Es erfolgt keine weitere Behandlung.

get_long_mode()

Liefert den aktuell eingestellten Umgang mit langem Text zurück.

get_text_selection_start()

Liefert die Position des Anfangs einer Textauswahl.

get_text_selection_end()

Liefert die Position des Endes einer Textauswahl.

set_text_selection_start(pos)

Setzt die Anfangsposition einer Textauswahl.

set_text_selection_end(pos)

Setzt die Endposition einer Textauswahl.

ins_text(pos, text)

Fügt Text an der angegebenen Position in den bestehenden Label-Text ein.

cut_text(pos, count)

Entfernt eine bestimmte Anzahl Zeichen ab der angegebenen Position.

Darüber hinaus gibt es noch geerbte lv.obj Methoden. Die werden in den Kapiteln 5, 6 und 7 erläutert.

Die Anzeige eines Labels unterdrücken

Es gibt drei Möglichkeiten die Anzeige eines Labels zu unterdrücken:

1. Label löschen

label.delete()

2. Label unsichtbar machen

label.add_flag(lv.obj.FLAG.HIDDEN)

2. Label wieder sichbar machen

label.remove_flag(lv.obj.FLAG.HIDDEN)

3. Text löschen

label.set_text("")

Ein Label positionieren

Dieses Theme wird in Kapitel 5 behandelt. Damit die Beschäftigung mit dem Label interessanter wird gibt hier aber schon eine Vorschau.

Ein Label kann beliebig positioniert werden. Dazu dient diese Methode:

label.align(lv.ALIGN.TOP_LEFT, x_offset, y_offset)

lv.ALIGN.TOP_LEFT

gibt den Bezugspunkt an von dem aus x_offset und y_offset gesetzt werden.

Es gibt eine Reihe vordefinierter Positionen:

• lv.ALIGN.TOP_LEFT
• lv.ALIGN.TOP_MID
• lv.ALIGN.TOP_RIGHT
• lv.ALIGN.LEFT_MID
• lv.ALIGN.CENTER
• lv.ALIGN.RIGHT_MID
• lv.ALIGN.BOTTOM_LEFT
• lv.ALIGN.BOTTOM_MID
• lv.ALIGN.BOTTOM_RIGHT

Sie sollten selbst erklärend sein.

Die Farbe eines Labels ändern

Die Farbe von Text und Hintergund kann ebenfalls geändert werden.

Zum Setzen der Farbe gibt es verschiedene Möglichkeit. Hier wird nur die color_hex(0xrrggbb) Methode verwendet. Weiter Informationen in Kapitel 7.

Die Textfarbe kann so auf rot geändert werden:

# Textfarbe
label.set_style_text_color(
    lv.color_hex(0xff0000),
    lv.PART.MAIN
)

Der folgende Code ändert die Hintergundfarbe auf blau:

# Hintergrundfarbe
label.set_style_bg_color(
    lv.color_hex(0x0000ff),
    lv.PART.MAIN
)

Standardmäßig ist der Hintergrund eines Labels transparent. Damit eine Hintergrundfarbe sichtbar wird, muss die Deckkraft des Hintergrundes auf einen geeigneten Wert gesetzt werden:

# Hintergrund sichtbar machen
label.set_style_bg_opa(
    lv.OPA.COVER,
    lv.PART.MAIN
)

Weitere Informationen zu diesem Thema finden sich in den Kapiteln 6 und 7.

Beispiele

Diese Beispieldateien können mit "unter Ziel speichern" herunter geladen werden.
Darauf klicken zeigt sie an.

• Ein Label in die Mitte des Screens setzen.
• Ein Label rechts unten positionieren.
• Ein Label umher wandern lassen.
• Ein Label mit einer anderen Textfarbe versehen.
• Ein Label mit einer anderen Text- und Hintergrundfarbe versehen.
• Ein Label mit wechselnden Text- und Hintergrundfarben versehen.