Fonts-voorbeeld

Wat is inbegrepen

• 480 x 480 meertalig typografiescherm, ontworpen als compact canvas voor fonttests.
• Negen zichtbare tekstvoorbeelden, voor Cyrillisch, Chinees, Japans, Grieks, Arabisch, Koreaans, Hebreeuws, Thais en Bengaals.
• Scriptspecifieke labellagen, genoemd in het lagenpaneel zodat makkelijk te zien is welk tekstobject bij welke taal hoort.
• Tien geconverteerde fontassets, die laten zien dat een echt LVGL-project meerdere fontfamilies en groottes nodig kan hebben.
• Geen afbeeldingsafhankelijkheid, zodat het project gericht blijft op tekstrendering in plaats van bitmap-screenshots.
• Gemengde fontgroottes, waaronder kleine body-achtige labels en grotere displaytekst.
• Gemengde kleuren, waardoor elk script makkelijk te inspecteren is op de donkere achtergrond.
• Fontreminders in het canvas, die de twee grote regels benadrukken: kies een font dat je doeltaal ondersteunt en neem de tekens op die je UI echt gebruikt.
• Voorbeeld van het Create Font-paneel, met gebundelde fonts, uploads, fontgroottepresetten, Letters, Asian en geavanceerde opties.

Asset-snapshot

Het assets-paneel toont dit als een fontgerichte PicoPixel-sjabloon:

• Afbeeldingen: 0, de preview is opgebouwd uit bewerkbare tekstobjecten.
• Kleuren: 0, kleuren zijn rechtstreeks op de labels in het ontwerp toegepast.
• Fonts: 10, genoeg om meerdere scripts, groottes en fontfamilies te demonstreren.
• Widgets: 0, zodat het voorbeeld gericht blijft op tekst en fontassets.

Zichtbare fontassets zijn onder andere:

• 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

De lijst in de screenshot is scrollbaar, dus het project bevat nog één fontasset naast de zichtbare rijen. Het belangrijke patroon is dat elk script een font gebruikt dat daadwerkelijk de glyphs bevat die het nodig heeft.

Laagstructuur

Het lagenpaneel is opgezet als een taalchecklist. Onder Screen 1 is elk label genoemd naar het script of de taal die het demonstreert:

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

Die structuur maakt het bestand nuttig als referentie. Als een taal correct rendert, kun je het label, de fontasset, grootte, kleur en tekstwaarde inspecteren en daarna dezelfde aanpak kopiëren naar je eigen PicoPixel-project.

CJK-fonts en ontbrekende glyphs

Chinese, Japanse en Koreaanse fonts vragen extra aandacht in LVGL omdat de volledige tekensets enorm zijn. Alle mogelijke glyphs opnemen kan megabytes toevoegen aan een embedded project, wat meestal te veel is voor kleine apparaten.

Gebruik voor CJK-tekst de optie Asian in PicoPixel's Create Font-paneel en voeg daarna de exacte tekens die je interface zal tonen toe aan het veld Symbols. Neem elk label, elke knop, elk menu-item, waarschuwingsbericht, elke eenheid en statusstring op die op het scherm kan verschijnen.

De gedetailleerde walkthrough staat in Working with fonts, vooral het gedeelte over Chinees, Japans en Koreaans.

Fonts kiezen voor elk script

Niet elk font ondersteunt elke taal. Een Latijns font kan perfect zijn voor Engels maar geen Arabische, Hebreeuwse, Thaise, Koreaanse, Japanse of Chinese glyphs bevatten. De sjabloon toont de veiligere aanpak: gebruik fontfamilies die zijn ontworpen voor het script dat je rendert.

• Gebruik Noto Sans SC of een ander CJK-geschikt font voor Vereenvoudigd Chinees.
• Gebruik een Japans-geschikt font voor Japanse tekst.
• Gebruik een Koreaans-geschikt font zoals Gothic A1 of een ander Hangul-font voor Koreaanse tekst.
• Gebruik Noto Sans Arabic voor tekst in Arabisch schrift.
• Gebruik Open Sans Hebrew of een ander Hebreeuws-geschikt font voor Hebreeuws.
• Gebruik een Grieks-geschikt font voor Grieks.
• Gebruik een Cyrillisch-geschikt font voor Russisch en andere Cyrillische tekst.
• Gebruik Thais- en Bengaals-geschikte fonts voor Thaise en Bengaalse labels.

In het Create Font-paneel bestuurt de dropdown Letters de dekking voor niet-CJK-scripts zoals Grieks, Cyrillisch, Hebreeuws, Arabisch, Thais en meer. De dropdown Asian is apart omdat CJK-glyphsets veel groter zijn.

Waarom dit goed werkt voor LVGL

Deze sjabloon is nuttig omdat hij aansluit op hoe LVGL fonts echt verwerkt op embedded hardware.

• LVGL-fonts zijn geconverteerde bitmapassets, dus elke geselecteerde grootte wordt afzonderlijk gegenereerd.
• Alleen geselecteerde glyphs worden opgenomen, waardoor de firmwaregrootte onder controle blijft.
• Scriptspecifieke fonts verminderen ontbrekende glyphs, vooral voor niet-Latijnse talen.
• Meerdere groottes kunnen naast elkaar bestaan, zodat koppen, bodylabels en kleine bijschriften elk een passende fontasset kunnen gebruiken.
• De labels blijven bewerkbaar, zodat je de voorbeeldtekst door je eigen vertalingen kunt vervangen vóór export.
• Het project exporteert als standaard LVGL 8.x UI-code, inclusief de fontassets die de labels nodig hebben.

Runtime-patroon

Na export kunnen je labels nog steeds vanuit firmware worden bijgewerkt. De exacte gegenereerde symboolnamen hangen af van je PicoPixel-objectnamen en fontnamen, maar het LVGL-patroon is bekend:

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

Zorg er voor vertaalde tekst voor dat het geëxporteerde font elk teken bevat dat je mogelijk aan lv_label_set_text doorgeeft. Dit is het belangrijkst voor CJK-strings en voor dynamische statusberichten die niet zichtbaar zijn op het oorspronkelijke designcanvas.

Ideeën voor aanpassing

Gebruik dit als gratis LVGL-typografiesjabloon en pas het daarna aan je eigen product aan.

• Vervang de voorbeeldbegroetingen door je echte vertaalde UI-labels.
• Maak één font per script en grootte die je interface echt nodig heeft.
• Verminder ongebruikte fontgroottes vóór export om de firmware kleiner te houden.
• Gebruik dezelfde tekstlayout om meerdere fontfamilies te vergelijken voordat je er een kiest.
• Voeg rechts-naar-links-labels toe voor Arabisch, Perzisch, Hebreeuws of andere RTL-interfaces.
• Maak afzonderlijke vertaalde schermen voor taalselectie, instellingen, onboarding of waarschuwingen.
• Gebruik Delete Unused Fonts na het experimenteren zodat alleen gerefereerde fontassets overblijven.

Exporteren naar je project

Open de sjabloon in PicoPixel, inspecteer de fontassets, vervang de voorbeeldlabels door je eigen tekst en maak ontbrekende fonts voordat je exporteert. Als je met Chinees, Japans of Koreaans werkt, plak dan de exacte UI-strings in het Symbols-veld wanneer je het font maakt.

Voor ESP32-projecten is de gebruikelijke flow:

1. Kies de talen die je UI moet ondersteunen.
2. Maak compatibele LVGL-fonts voor elk script en elke grootte.
3. Neem voor Chinees, Japans en Koreaans de exacte tekens op die je UI zal weergeven.
4. Vervang de voorbeeldlabels in deze sjabloon door je echte UI-tekst.
5. Exporteer de PicoPixel-UI als LVGL C.
6. Voeg de geëxporteerde UI- en fontbestanden toe aan je ESP-IDF-, Arduino- of PlatformIO-project.
7. Roep ui_init() aan nadat LVGL en je displaydriver klaar zijn.

Lees voor de stapsgewijze fontworkflow Working with fonts. Zie voor importeren en openen van sjablonen How to use PicoPixel templates.

Beste toepassingen

Deze sjabloon past goed wanneer je een duidelijk startpunt wilt voor:

• LVGL-voorbeelden met meertalige tekst
• CJK-fontsetup voor Chinees, Japans of Koreaans
• ESP32-prototypes met vertaalde UI
• Testen van fontconversie
• Debuggen van ontbrekende glyphs
• Checks voor rechts-naar-links en niet-Latijnse scripts
• Internationale instellingenschermen
• Interfaces voor kiosk, wearable, dashboard en smart device