Schriftarten-Beispiel

Enthalten

• 480 x 480 mehrsprachiger Typografie-Ansicht, als kompakte Testfläche für Schriften gestaltet.
• Neun sichtbare Textbeispiele, für Kyrillisch, Chinesisch, Japanisch, Griechisch, Arabisch, Koreanisch, Hebräisch, Thai und Bengalisch.
• Auf das Schriftsystem abgestimmte Label-Ebenen, im Ebenen-Panel benannt, damit leicht sichtbar ist, welches Textobjekt zu welcher Sprache gehört.
• Zehn konvertierte Schrift-Assets, die zeigen, dass ein echtes LVGL-Projekt mehrere Schriftfamilien und Größen benötigen kann.
• Keine Bilddateien nötig, sodass das Projekt auf Text-Rendering statt auf Bitmap-Screenshots fokussiert bleibt.
• Gemischte Schriftgrößen, einschließlich kleiner Fließtexte und größerer Anzeigetexte.
• Gemischte Farben, damit jedes Schriftsystem auf dem dunklen Hintergrund leicht geprüft werden kann.
• Hinweise zu Schriften direkt auf der Arbeitsfläche, die die zwei großen Regeln nennen: eine Schrift wählen, die deine Zielsprache unterstützt, und die Zeichen einschließen, die deine UI tatsächlich nutzt.
• Beispiel für das Create-Font-Panel, mit mitgelieferten Schriften, Uploads, Voreinstellungen für Schriftgrößen, Letters, Asian und erweiterten Optionen.

Asset-Überblick

Das Assets-Panel zeigt dies als auf Schriften ausgerichtete PicoPixel-Vorlage:

• Bilder: 0, die Vorschau besteht aus bearbeitbaren Textobjekten.
• Farben: 0, Farben sind direkt auf die Labels im Design angewendet.
• Schriften: 10, genug um mehrere Schriftsysteme, Größen und Schriftfamilien zu demonstrieren.
• Widgets: 0, damit das Beispiel auf Text- und Schrift-Assets fokussiert bleibt.

Sichtbare Schrift-Assets sind:

• Gothic A1 48
• M PLUS 1p 60
• Noto Sans Arabic 32
• Noto Sans Bengali 32
• Noto Sans Cyrillic 48
• Noto Sans SC 32
• Noto Sans Thai Bold 32
• Open Sans Greek 48
• Open Sans Hebrew 48

Die Liste im Screenshot ist scrollbar, daher enthält das Projekt noch ein weiteres Schrift-Asset über die sichtbaren Zeilen hinaus. Das wichtige Muster ist, dass jedes Schriftsystem eine Schrift verwendet, die die benötigten Glyphen wirklich enthält.

Ebenenstruktur

Das Ebenen-Panel ist wie eine Sprach-Checkliste aufgebaut. Unter Screen 1 ist jedes Label nach dem Schriftsystem oder der Sprache benannt, die es demonstriert:

• Cyrillic - RU
• Chinese
• Japanese
• Greek
• Arabic
• Korean
• Hebrew
• Thai-na
• Bengali

Diese Struktur macht die Datei als Referenz nützlich. Wenn eine Sprache korrekt gerendert wird, kannst du Label, Schrift-Asset, Größe, Farbe und Textwert prüfen und denselben Ansatz in dein eigenes PicoPixel-Projekt übernehmen.

CJK-Schriften und fehlende Glyphen

Chinesische, japanische und koreanische Schriften brauchen in LVGL besondere Sorgfalt, weil die vollständigen Zeichensätze enorm groß sind. Alle möglichen Glyphen einzuschließen, kann einem eingebetteten Projekt mehrere Megabyte hinzufügen, was für kleine Geräte meist zu viel ist.

Für CJK-Text verwende die Option Asian im Create-Font-Panel von PicoPixel und füge anschließend die exakten Zeichen, die deine Oberfläche anzeigen wird, in das Feld Symbols ein. Schließe jedes Label, jeden Button, jeden Menüpunkt, jede Warnmeldung, Einheit und Statuszeichenfolge ein, die in der Ansicht erscheinen kann.

Die detaillierte Anleitung steht in Mit Schriften arbeiten, besonders im Abschnitt zu Chinesisch, Japanisch und Koreanisch.

Schriften für jedes Schriftsystem auswählen

Nicht jede Schrift unterstützt jede Sprache. Eine lateinische Schrift kann für Englisch perfekt aussehen, aber keine arabischen, hebräischen, thailändischen, koreanischen, japanischen oder chinesischen Glyphen enthalten. Die Vorlage zeigt den sichereren Ansatz: Verwende Schriftfamilien, die für das jeweilige Schriftsystem entwickelt wurden.

• Verwende Noto Sans SC oder eine andere CJK-fähige Schrift für vereinfachtes Chinesisch.
• Verwende eine Schrift mit japanischen Zeichen für japanischen Text.
• Verwende eine Schrift mit koreanischen Zeichen wie Gothic A1 oder eine andere Hangul-Schrift für koreanischen Text.
• Verwende Noto Sans Arabic für arabische Schrift.
• Verwende Open Sans Hebrew oder eine andere Schrift mit hebräischen Zeichen für Hebräisch.
• Verwende eine Schrift mit griechischen Zeichen für Griechisch.
• Verwende eine Schrift mit kyrillischen Zeichen für Russisch und andere kyrillische Texte.
• Verwende Schriften für Thailändisch und Bengalisch für Thai- und Bengalisch-Labels.

Im Create-Font-Panel steuert das Dropdown Letters die Abdeckung für Schriftsysteme außerhalb von CJK wie Griechisch, Kyrillisch, Hebräisch, Arabisch, Thai und mehr. Das Dropdown Asian ist getrennt, weil CJK-Glyphensätze viel größer sind.

Warum das gut für LVGL funktioniert

Diese Vorlage ist nützlich, weil sie dazu passt, wie LVGL Schriften auf eingebetteter Hardware wirklich behandelt.

• LVGL-Schriften sind konvertierte Bitmap-Assets, daher wird jede ausgewählte Größe separat generiert.
• Nur ausgewählte Glyphen werden aufgenommen, wodurch die Firmware-Größe kontrollierbar bleibt.
• Auf das Schriftsystem abgestimmte Schriften reduzieren fehlende Glyphen, besonders bei nicht-lateinischen Sprachen.
• Mehrere Größen können nebeneinander existieren, sodass Überschriften, Fließtexte und kleine Beschriftungen jeweils ein passendes Schrift-Asset verwenden können.
• Die Labels bleiben bearbeitbar, sodass du Beispieltext vor dem Export durch deine eigenen Übersetzungen ersetzen kannst.
• Das Projekt lässt sich exportieren als Standard-LVGL-8.x-Code, einschließlich der Schrift-Assets, die von den Labels benötigt werden.

Ansteuerung zur Laufzeit

Nach dem Export können deine Labels weiterhin aus der Firmware aktualisiert werden. Die exakten generierten Symbolnamen hängen von deinen PicoPixel-Objektnamen und Schriftnamen ab, aber das LVGL-Muster ist vertraut:

lv_label_set_text(ui_status_label, "Settings");
lv_obj_set_style_text_font(ui_status_label, &ui_font_noto_sans_32, 0);

Achte bei übersetztem Text darauf, dass die exportierte Schrift jedes Zeichen enthält, das du an lv_label_set_text übergeben könntest. Das ist besonders wichtig für CJK-Zeichenfolgen und für dynamische Statusmeldungen, die auf der ursprünglichen Arbeitsfläche nicht sichtbar sind.

Anpassungsideen

Verwende dies als kostenlose LVGL-Typografievorlage und passe sie anschließend an dein eigenes Produkt an.

• Ersetze die Beispielbegrüßungen durch deine echten übersetzten UI-Labels.
• Erstelle eine Schrift pro Schriftsystem und Größe, die deine Oberfläche tatsächlich benötigt.
• Entferne ungenutzte Schriftgrößen vor dem Export, damit die Firmware kleiner bleibt.
• Nutze dasselbe Textlayout, um mehrere Schriftfamilien zu vergleichen, bevor du dich entscheidest.
• Füge Rechts-nach-links-Labels für Arabisch, Persisch, Hebräisch oder andere RTL-Oberflächen hinzu.
• Erstelle separate übersetzte Ansichten für Sprachauswahl, Einstellungen, Onboarding oder Warnungen.
• Verwende Delete Unused Fonts nach Experimenten, sodass nur referenzierte Schrift-Assets übrig bleiben.

Export in dein Projekt

Öffne die Vorlage in PicoPixel, prüfe die Schrift-Assets, ersetze die Beispiel-Labels durch deinen eigenen Text und erstelle vor dem Export alle fehlenden Schriften. Wenn du mit Chinesisch, Japanisch oder Koreanisch arbeitest, füge die exakten UI-Zeichenfolgen beim Erstellen der Schrift in das Symbols-Feld ein.

Für ESP32-Projekte ist der übliche Ablauf:

1. Wähle die Sprachen, die deine UI unterstützen muss.
2. Erstelle kompatible LVGL-Schriften für jedes Schriftsystem und jede Größe.
3. Schließe für Chinesisch, Japanisch und Koreanisch die exakten Zeichen ein, die deine UI anzeigen wird.
4. Ersetze die Beispiel-Labels in dieser Vorlage durch deinen echten UI-Text.
5. Exportiere die PicoPixel-UI als LVGL-C-Code.
6. Füge die exportierte UI und die Schriftdateien deinem ESP-IDF-, Arduino- oder PlatformIO-Projekt hinzu.
7. Rufe ui_init() auf, nachdem LVGL und dein Display-Treiber bereit sind.

Eine Schritt-für-Schritt-Anleitung für Schriften findest du in Mit Schriften arbeiten. Für Import und Öffnen von Vorlagen siehe PicoPixel-Vorlagen verwenden.

Geeignete Einsatzbereiche

Diese Vorlage eignet sich als Ausgangspunkt für:

• Mehrsprachige LVGL-Textbeispiele
• CJK-Schriftensetup für Chinesisch, Japanisch oder Koreanisch
• ESP32-Prototypen mit übersetzter UI
• Tests für Schriftkonvertierung
• Debugging fehlender Glyphen
• Prüfungen für Rechts-nach-links- und nicht-lateinische Schriften
• Internationale Einstellungsseiten
• Kiosk-, Wearable-, Dashboard- und Oberflächen für smarte Geräte