Scherm
480 × 480
Square
Schermvorm
Vierkant
LVGL
8.x
Compatibel
Getest op
ESP32-P4
maintainer
Laatst bijgewerkt
5 maanden geleden
Screenshot 1 van Voorbeelden van lettertypenGetoond
Creditspicopixel
lvgl fontsesp32 fontsgratis sjabloon

Overzicht

Dit gratis LVGL-sjabloon laat zien hoe je meerdere talen op een embedded scherm weergeeft. Op een scherm van 480 x 480 combineert het geconverteerde lettertypen, verschillende groottes en kleuren, met een passend lettertype voor elk schrift.

De voorbeelden bevatten Cyrillisch, Chinees, Japans, Grieks, Arabisch, Koreaans, Hebreeuws, Thais en Bengaals. Gebruik het project als basis voor een ESP32-dashboard, instellingenmenu, kiosk, wearable of slim apparaat dat meer dan alleen Engelse tekst moet tonen.

Een LVGL-lettertype werkt anders dan een web- of desktoplettertype: het bevat alleen de tekens en groottes die je bij het converteren kiest. Neem voor Chinees, Japans en Koreaans alleen de tekens op die je interface nodig heeft, maar controleer goed of je niets mist. Een ontbrekend teken verschijnt mogelijk als een leeg vakje. De gids over LVGL-lettertypen legt de volledige werkwijze uit.

Wat is inbegrepen

  • Een meertalig scherm van 480 x 480, om lettertypen op een compact canvas te testen.
  • Negen zichtbare tekstvoorbeelden: Cyrillisch, Chinees, Japans, Grieks, Arabisch, Koreaans, Hebreeuws, Thais en Bengaals.
  • Herkenbare namen in het lagenpaneel, zodat je ziet bij welke taal of welk schrift elk label hoort.
  • Tien geconverteerde lettertypen, voor verschillende families en groottes.
  • Bewerkbare tekst zonder afbeeldingen, zodat je de echte tekstweergave van LVGL test.
  • Verschillende lettergroottes, van kleine labels tot grote titels.
  • Verschillende tekstkleuren, zodat de voorbeelden op de donkere achtergrond goed te onderscheiden zijn.
  • Aanwijzingen op het canvas over de twee belangrijkste punten: kies een lettertype dat de taal ondersteunt en neem alle benodigde tekens op.
  • Een voorbeeld van Create Font, met meegeleverde lettertypen, eigen uploads, vooraf ingestelde groottes, Letters, Asian en geavanceerde opties.

Gebruikte assets

De lokale bibliotheek bevat:

  • Afbeeldingen: 0; de voorvertoning bestaat uit bewerkbare tekstobjecten.
  • Kleuren: 0; de kleuren zijn rechtstreeks op de labels ingesteld.
  • Lettertypen: 10, voor verschillende schriften, groottes en families.
  • Widgets: 0; het voorbeeld richt zich op tekst en lettertypen.

In de lijst zijn deze lettertypen zichtbaar:

  • 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 is langer dan de screenshot: er staat nog één lettertype buiten beeld. Elk schrift gebruikt een lettertype dat de benodigde tekens, ofwel gliefen, bevat.

Laagstructuur

Onder Screen 1 heeft elk label de naam van de taal of het schrift dat het toont:

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

Zo kun je een goed werkend voorbeeld makkelijk terugvinden. Bekijk het label, het lettertype, de grootte, kleur en tekst en gebruik dezelfde instellingen in je eigen project.

CJK-lettertypen en ontbrekende tekens

Chinese, Japanse en Koreaanse lettertypen vragen extra aandacht omdat ze duizenden tekens kunnen bevatten. Een volledige tekenset kan meerdere megabytes innemen, vaak te veel voor een klein embedded apparaat.

Kies voor CJK-tekst Asian in het paneel Create Font. Vul bij Symbols alle tekst in die je interface kan tonen: labels, knoppen, menu-items, waarschuwingen, eenheden en statusberichten.

WARNING

Toont je interface later een Chinees, Japans of Koreaans teken dat je niet hebt opgenomen? Dan kan LVGL een leeg vakje weergeven. Werk bij tekstwijzigingen het veld Symbols bij en maak het lettertype opnieuw.

Lees de stapsgewijze uitleg in Werken met lettertypen, vooral het gedeelte over Chinees, Japans en Koreaans.

Een lettertype kiezen voor elk schrift

Niet elk lettertype ondersteunt elke taal. Een Latijns lettertype kan prima werken voor Engels, maar de benodigde Arabische, Hebreeuwse, Thaise of CJK-tekens missen. Kies daarom een lettertype dat voor het betreffende schrift geschikt is.

  • Gebruik Noto Sans SC of een ander geschikt CJK-lettertype voor vereenvoudigd Chinees.
  • Kies een lettertype dat Japanse tekens bevat voor Japans.
  • Kies voor Koreaans bijvoorbeeld Gothic A1 of een ander lettertype met Hangul.
  • Gebruik Noto Sans Arabic voor Arabisch schrift.
  • Gebruik Open Sans Hebrew of een ander lettertype met Hebreeuwse tekens voor Hebreeuws.
  • Kies een lettertype met Griekse tekens voor Grieks.
  • Kies een lettertype met Cyrillische tekens voor Russisch en andere talen die dit schrift gebruiken.
  • Kies passende lettertypen voor Thaise en Bengaalse labels.

In Create Font kies je bij Letters de schriften buiten CJK, zoals Grieks, Cyrillisch, Hebreeuws, Arabisch en Thais. Asian staat apart omdat de CJK-tekensets veel groter zijn.

TIP

Plak de echte tekst van je interface in het voorbeeldveld voordat je het lettertype aanmaakt. Zie je lege vakjes? Kies dan eerst een lettertype dat die taal ondersteunt.

Waarom dit goed werkt voor LVGL

Dit sjabloon sluit aan op de manier waarop LVGL lettertypen op embedded hardware gebruikt.

  • LVGL-lettertypen worden naar bitmaps geconverteerd. Elke gekozen grootte wordt afzonderlijk gegenereerd.
  • Alleen de geselecteerde tekens worden opgenomen. Zo blijft de firmware kleiner.
  • Een passend lettertype per schrift voorkomt ontbrekende tekens, vooral bij niet-Latijnse talen.
  • Je kunt meerdere groottes naast elkaar gebruiken, bijvoorbeeld voor titels, gewone labels en kleine bijschriften.
  • Labels blijven bewerkbaar. Vervang de voorbeelden door je eigen vertalingen voordat je exporteert.
  • Het project levert standaard UI-code voor LVGL 8.x op, inclusief de lettertypen die de labels nodig hebben.

Gebruik vanuit de firmware

Ook na het exporteren kun je labels vanuit de firmware bijwerken. De gegenereerde namen hangen af van de object- en lettertypenamen in je project. De LVGL-aanroepen werken als volgt:

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

Het geëxporteerde lettertype moet elk teken bevatten dat je aan lv_label_set_text kunt doorgeven. Let daar vooral op bij CJK-tekst en dynamische statusberichten die niet in het oorspronkelijke ontwerp zichtbaar zijn.

Ideeën om het aan te passen

Pas het voorbeeld aan je eigen product aan:

  • Vervang de begroetingen door de vertaalde labels van je interface.
  • Maak alleen de combinaties van schrift en grootte die je daadwerkelijk nodig hebt.
  • Verwijder ongebruikte lettergroottes vóór het exporteren om ruimte te besparen.
  • Vergelijk verschillende lettertypefamilies met dezelfde tekst en indeling.
  • Voeg rechts-naar-linkstekst toe voor Arabisch, Perzisch, Hebreeuws of andere RTL-talen.
  • Maak vertaalde schermen voor taalkeuze, instellingen, een eerste uitleg of waarschuwingen.
  • Gebruik na het uitproberen Delete Unused Fonts om alleen de gebruikte lettertypen te bewaren.

Exporteren naar je project

Open het sjabloon, bekijk de lettertypen, vervang de voorbeeldtekst en maak ontbrekende lettertypen aan. Werk je met Chinees, Japans of Koreaans? Plak dan alle benodigde tekst in Symbols wanneer je de lettertypen maakt.

Voor een ESP32-project zijn dit de gebruikelijke stappen:

  1. Bepaal welke talen je interface moet ondersteunen.
  2. Maak geschikte LVGL-lettertypen voor elk schrift en elke benodigde grootte.
  3. Neem bij Chinees, Japans en Koreaans alle tekens op die op het scherm kunnen verschijnen.
  4. Vervang de voorbeeldlabels door de tekst van je eigen interface.
  5. Exporteer de PicoPixel-interface als LVGL C-code.
  6. Voeg de interface- en lettertypebestanden toe aan je ESP-IDF-, Arduino- of PlatformIO-project.
  7. Roep ui_init() aan nadat LVGL en je displaydriver zijn geïnitialiseerd.

Lees Werken met lettertypen voor de volledige uitleg. De gids PicoPixel-sjablonen gebruiken legt uit hoe je projecten opent en importeert.

Geschikte toepassingen

Gebruik dit sjabloon als startpunt voor:

  • Meertalige tekst in LVGL
  • CJK-lettertypen voor Chinees, Japans en Koreaans
  • ESP32-prototypes met vertaalde interfaces
  • Tests van lettertypeconversie
  • Ontbrekende tekens opsporen
  • Rechts-naar-linkstekst en niet-Latijnse schriften controleren
  • Instellingenmenu's voor meerdere talen
  • Interfaces voor kiosken, wearables, dashboards en slimme apparaten

Snel starten

Voor het eerst aan de slag met PicoPixel? De gids legt uit hoe je dit project opent, aanpast en op je board laat werken.

Installatiegids

PicoPixelio / picopixel-files

Bron bekijken op GitHub

Delen
Link gekopieerd!
MeldenKlopt er iets niet aan dit project?