Overzicht
Lettertypen op een embedded apparaat werken anders dan lettertypen op je computer. Deze gids legt uit waarom, en begeleidt je door het aanmaken van lettertypen in PicoPixel — van het kiezen van een meegeleverd lettertype of het uploaden van je eigen, tot het omgaan met rechts-naar-links-talen zoals Arabisch en Hebreeuws, tot het beheersen van de zeer grote lettertypen voor Chinees, Japans en Koreaans. Tot slot bespreken we een handige opruimfunctie voor wanneer je veel hebt geëxperimenteerd.
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 doet deze conversie voor je. Wanneer je een lettertype aanmaakt, nemen we het oorspronkelijke lettertypebestand en zetten het om naar het bitmapformaat dat LVGL nodig heeft — waarbij alleen de letters die je wilt worden gekozen, in de groottes die je wilt.
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).
Dit is ook de reden waarom lettertypen echte kosten hebben op een apparaat: elke letter, in elke grootte, neemt een beetje geheugenruimte in. Het grootste deel van deze gids gaat over het beperken van die kosten — 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:
- 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 een veilige keuze en een goede standaard.
- Uploaden — breng je eigen
.ttf- of.otf-bestand mee. Gebruik dit wanneer je een specifiek merklettertype hebt of een lettertype dat een taal dekt die de meegeleverde niet hebben.
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 Lettertype aanmaken-paneel en je ziet een kort formulier. Hier is wat elk onderdeel doet:
- Kies je lettertype — selecteer een Meegeleverd lettertype (en het gewicht, zoals Regular of Bold), of schakel naar het tabblad Uploaden en selecteer je eigen bestand.
- Lettertypenaam — de naam die je ziet in de lettertypelijst van je project. Geef het iets gedenkwaardigs, vooral als je er meerdere hebt.
- Grootte (px) — de pixelgrootte van het lettertype. Je kunt meer dan één grootte tegelijk selecteren (handige presets zoals 16, 22 en 32 zijn één tik verwijderd). 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.
- Aziatisch — een aparte optie voor Chinees, Japans en Koreaans. Deze hebben speciale behandeling nodig, behandeld in een eigen sectie hieronder.
Er is ook een Geavanceerd-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 script 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 script, of upload er een die het wel ondersteunt. PicoPixel waarschuwt je wanneer je een script 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 Lettertype aanmaken — er is niets om handmatig te configureren.
- Kies in de Letters-vervolgkeuzelijst Arabisch of Hebreeuws. Dit is de belangrijke stap: het vertelt PicoPixel om de juiste tekenset voor dat script 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 script, bijvoorbeeld Noto Sans Arabic. Gebruik de suggestie (of een ander scriptbewust lettertype) 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 script 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.
Het belangrijkste om te onthouden: het kiezen van Arabisch of Hebreeuws in de Letters-vervolgkeuzelijst bij het aanmaken van het lettertype is wat die tekens opneemt. 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 Aziatisch-vervolgkeuzelijst Koreaans, Chinees of Japans.
- Zoek het Symbolen-veld (in het Geavanceerd-gebied) 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.
Op die manier eindigt een lettertype dat meerdere megabytes had kunnen zijn bij een paar honderd kilobytes.
Alleen de tekens die je in Symbolen 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 Symbolen-veld, 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 dode ballast.
PicoPixel maakt dit pijnloos. In het Lettertypen-gedeelte van je assets staat een knop Ongebruikte lettertypen verwijderen. Het scant elk widget in je project, vindt de lettertypen die niets daadwerkelijk gebruikt, en verwijdert ze met één klik — zodat je de restjes kunt opruimen en ruimte kunt vrijmaken voor de lettertypen die je wel nodig hebt.
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 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 enkel 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.
