Overzicht
Lettertypen voor een embedded apparaat moeten weinig geheugen gebruiken en snel te tekenen zijn. In deze handleiding maak je een LVGL-lettertype van een meegeleverd of eigen bestand. Je leest ook hoe je Arabisch, Hebreeuws, Chinees, Japans en Koreaans instelt en ongebruikte lettertypen opruimt.
Waarom moeten lettertypen worden geconverteerd?
Op je laptop beschrijft een lettertypebestand (zoals een .ttf of .otf) elke letter als een reeks wiskundige curven. Je computer heeft genoeg vermogen en geheugen om die curven soepel te tekenen op elke gewenste grootte.
Een klein apparaat (een ESP32, een smartwatch-chip, een kleine displaycontroller) kan dat doorgaans niet. Het heeft niet het geheugen of de verwerkingskracht om curven ter plekke opnieuw te tekenen. LVGL neemt daarom een andere aanpak: in plaats van curven slaat het elke letter op als een kleine vooraf getekende afbeelding (een bitmap) op een vaste grootte. Dat is veel lichter voor het apparaat om te verwerken.
PicoPixel zet het oorspronkelijke bestand voor je om naar LVGL-bitmaps. Jij kiest welke tekens en groottes worden opgenomen.
Omdat elke letter vooraf getekend is op een vaste grootte, is een geconverteerd LVGL-lettertype vergrendeld op de gekozen grootte. Een 16px-lettertype kan niet worden opgerekt naar 32px en nog steeds scherp zijn. Als je tekst in twee verschillende groottes nodig hebt, maak je het lettertype in beide groottes aan (zie Een lettertype aanmaken hieronder, waar je meerdere groottes tegelijk kunt kiezen).
Daarom gebruiken lettertypen geheugen op je apparaat: elke letter, in elke grootte, neemt een beetje geheugenruimte in. Deze handleiding helpt je dat geheugenverbruik te beperken — door alleen de tekens en groottes op te nemen die je daadwerkelijk gebruikt.
Meegeleverde lettertypen en je eigen lettertypen
Wanneer je een lettertype aanmaakt, heb je twee beginpunten:
- Bundled (meegeleverd) — een samengestelde set populaire, goed geteste lettertypen die direct klaar zijn voor gebruik: Noto Sans, Roboto, Open Sans, Montserrat, Poppins, Inter, Lato, Nunito, Source Sans 3, en meer. Dit zijn goede uitgangspunten voor de meeste projecten.
- Upload (eigen bestand) — breng je eigen
.ttf- of.otf-bestand mee. Gebruik dit wanneer je een specifiek merklettertype hebt of een lettertype dat tekens bevat die in de meegeleverde lettertypen ontbreken.
Als je je eigen lettertype uploadt, gebruik dan een statisch lettertypebestand (bijvoorbeeld Roboto-Regular.ttf) in plaats van een "variabel" lettertypebestand (zoals Roboto-VariableFont.ttf). Statische bestanden worden veel betrouwbaarder geconverteerd. Gewone .ttf-bestanden werken over het algemeen het beste.
Wat je ook kiest, er is een live voorbeeld zodat je je eigen tekst kunt typen en precies kunt zien hoe het eruit zal zien voordat je het aanmaakt.
Een lettertype aanmaken
Open het Create Font (lettertype aanmaken)-paneel en je ziet een kort formulier. Hier is wat elk onderdeel doet:
- Kies je lettertype — selecteer een lettertype onder Bundled (en het gewicht, zoals Regular of Bold), of schakel naar het tabblad Upload en selecteer je eigen bestand.
- Font name (naam) — de naam die je ziet in de lettertypelijst van je project. Kies een herkenbare naam, vooral als je er meerdere hebt.
- Size (px) (grootte) — de pixelgrootte van het lettertype. Je kunt meer dan één grootte tegelijk selecteren (je kunt bijvoorbeeld meteen 16, 22 en 32 kiezen). Onthoud dat elke grootte afzonderlijk wordt gegenereerd, dus selecteer alleen de groottes die je echt zult gebruiken.
- Letters — kies welke set tekens je wilt opnemen: Standaard (basis-Engels), Latijn, Grieks, Cyrillisch, Hebreeuws, Arabisch, Thai, en nog meer. Zo vertel je PicoPixel welke letters van de taal je nodig hebt.
- Asian — een aparte optie voor Chinees, Japans en Koreaans. Deze hebben speciale behandeling nodig, behandeld in een eigen sectie hieronder.
Er is ook een Advanced-gebied voor fijnafstelling, inclusief Bits per pixel (hoeveel grijstinten elke letter gebruikt; hoger ziet er vloeiender uit maar neemt meer ruimte in; 4 is een goede standaard) en velden om exacte tekenbereiken of symbolen handmatig te specificeren. De meeste mensen hoeven dit nooit aan te raken.
Niet elk lettertype bevat elke taal. Als je een niet-Latijns schrift kiest en je voorbeeld lege vakjes toont in plaats van letters, ondersteunt dat lettertype het niet — schakel over naar een Meegeleverd lettertype dat is ontworpen voor dat schrift, of upload er een die het wel ondersteunt. PicoPixel waarschuwt je wanneer je een schrift kiest dat niet alle lettertypen ondersteunen.
Rechts-naar-links-scripts: Arabisch en Hebreeuws
Talen zoals Arabisch en Hebreeuws worden van rechts naar links gelezen, en hun letters hebben speciale behandeling nodig. Het goede nieuws is dat je dit instelt in het paneel Create Font — er is niets om handmatig te configureren.
- Kies in de Letters-keuzelijst Arabic of Hebrew. Dit is de belangrijke stap: het vertelt PicoPixel om de juiste tekenset voor dat schrift op te nemen (de basis Engelse letters worden ook meegenomen, zodat cijfers en Latijnse tekst nog steeds werken).
- PicoPixel suggereert een lettertype dat is gebouwd voor dat schrift, bijvoorbeeld Noto Sans Arabic. Gebruik de suggestie (of een ander lettertype dat dit schrift ondersteunt) in plaats van een eenvoudig Latijns lettertype, dat de letters niet zal bevatten.
- Controleer het live voorbeeld. Als de letters daar correct worden weergegeven, ben je klaar. Als je vakjes ziet, ondersteunt het gekozen lettertype het schrift niet — kies een ander.
Arabische letters veranderen van vorm afhankelijk van waar ze in een woord staan, en de hele regel loopt van rechts naar links. Wanneer je je project exporteert, detecteert PicoPixel automatisch dat je Arabische, Perzische of Hebreeuwse tekst hebt gebruikt en schakelt de bijpassende LVGL-instelling in voor verbonden lettervormen — zodat je niet door configuratiebestanden hoeft te zoeken om het er goed uit te laten zien op het apparaat.
Kies Arabic of Hebrew bij Letters voordat je het lettertype aanmaakt. Alleen dan worden de benodigde tekens opgenomen. Als je eerst een gewoon lettertype aanmaakt en pas later rechts-naar-links-tekst toevoegt, zijn de letters er niet — maak het lettertype aan met het juiste script geselecteerd vanaf het begin.
Chinees, Japans en Koreaans
CJK is de veelgebruikte afkorting voor Chinees, Japans en Koreaans. Deze talen zijn speciaal omdat ze veel tekens hebben — Koreaans heeft er ongeveer 11.000 en Chinees ruim meer dan 20.000. Onthoud dat elk teken vooraf wordt getekend en op het apparaat wordt opgeslagen. Het opnemen van een volledig CJK-lettertype kan megabytes toevoegen, wat simpelweg niet past op de meeste embedded apparaten.
De oplossing is om alleen de tekens op te nemen die je daadwerkelijk gebruikt. Een typische interface toont misschien maar een honderdtal verschillende tekens — en dat is klein in vergelijking.
Zo doe je het:
- Kies in de Asian-keuzelijst Korean, Chinese of Japanese.
- Zoek het Symbols-veld (in het gedeelte Advanced) en plak de werkelijke tekst die je interface zal weergeven — elk label, elke knop en elk bericht. PicoPixel neemt alleen een glyph op voor elk teken dat het daar vindt.
- Om je op weg te helpen vult PicoPixel dit veld vooraf in met veelgebruikte interfacewoorden (zoals "Instellingen", "Bevestigen", "Annuleren", enzovoort) in de taal die je hebt gekozen. Voeg je eigen tekst toe.
Zo kan een lettertype van meerdere megabytes worden teruggebracht tot een paar honderd kilobytes.
Alleen de tekens die je in Symbols opsomt worden opgenomen. Als je interface later een teken toont dat je niet hebt toegevoegd, verschijnt het als een leeg vakje. Wanneer je tekst verandert, kom terug en update het veld Symbols, en maak daarna het lettertype opnieuw aan.
Voor CJK geeft het uploaden van het specifieke lettertype dat je wilt (in plaats van te vertrouwen op een algemeen lettertype) je de meeste controle — en het plakken van een volledige, definitieve kopie van je interfacetekst zorgt ervoor dat er niets wordt gemist.
Opruimen: ongebruikte lettertypen verwijderen
Lettertypen nemen ruimte in, en het is makkelijk om er te verzamelen die je niet meer nodig hebt — vooral tijdens het experimenteren. Je weet bijvoorbeeld misschien niet zeker of 16px of 22px er beter uitziet, dus maak je beide aan en probeer je ze uit. Zodra je beslist hebt, is het andere alleen maar onnodig geheugengebruik.
Daarvoor heeft PicoPixel een opruimfunctie. In het Lettertypen-gedeelte van je assets staat een knop Remove unused lettertypen (ongebruikte lettertypen verwijderen). De functie controleert alle widgets en verwijdert alleen lettertypen die nergens worden gebruikt. Zo maak je met één klik ruimte vrij.
Dit is de makkelijke manier om met groottes te experimenteren. Maak een paar groottes aan, kijk welke er goed uitziet in je ontwerp, en klik dan op Remove unused lettertypen (ongebruikte lettertypen verwijderen) om de rest op te ruimen. Elk lettertype in de lijst toont zijn grootte- en kwaliteitsinstellingen, zodat het gemakkelijk is om in één oogopslag te zien wat je hebt.
"Ongebruikte lettertypen verwijderen" verwijdert alleen lettertypen waarnaar geen enkele widget verwijst, dus je ontwerp verandert niet. Je kunt ook zelf een enkel lettertype verwijderen door er met de rechtermuisknop op te klikken in de lijst. Als je per ongeluk iets verwijdert, brengt ongedaan maken het direct terug.
