Przykładfontów

Zawartość

• Wielojęzyczny ekran typografii 480 x 480, zaprojektowany jako kompaktowy canvas testowy fontów.
• Dziewięć widocznych przykładów tekstu, obejmujących cyrylicę, chiński, japoński, grecki, arabski, koreański, hebrajski, tajski i bengalski.
• Warstwy etykiet dla konkretnych skryptów, nazwane w panelu warstw, aby łatwo było zobaczyć, który obiekt tekstowy należy do którego języka.
• Dziesięć skonwertowanych zasobów fontów, pokazujących, że realny projekt LVGL może potrzebować kilku rodzin fontów i rozmiarów.
• Brak zależności od obrazów, więc projekt skupia się na renderowaniu tekstu, a nie bitmapowych screenshotach.
• Mieszane rozmiary fontów, w tym małe etykiety body-style i większy tekst display.
• Mieszane kolory, dzięki czemu każdy skrypt łatwo sprawdzić na ciemnym tle.
• Przypomnienia o fontach na canvasie, wskazujące dwie duże zasady: wybierz font obsługujący target language i dołącz znaki, których UI naprawdę używa.
• Przykład panelu Create Font, pokazujący fonty bundled, uploady, presety rozmiaru, Letters, Asian i advanced options.

Migawka zasobów

Panel zasobów pokazuje to jako font-focused template PicoPixel:

• Images: 0, podgląd zbudowany jest z edytowalnych obiektów tekstowych.
• Colors: 0, kolory są zastosowane bezpośrednio do etykiet w projekcie.
• Fonts: 10, wystarczająco dużo, aby zademonstrować wiele skryptów, rozmiarów i rodzin fontów.
• Widgets: 0, dzięki czemu przykład skupia się na tekście i zasobach fontów.

Widoczne zasoby fontów obejmują:

• 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

Lista na screenshocie jest przewijalna, więc projekt zawiera jeszcze jeden zasób fontu poza widocznymi wierszami. Ważny wzorzec jest taki, że każdy skrypt używa fontu, który faktycznie zawiera potrzebne mu glify.

Struktura warstw

Panel warstw jest ustawiony jak lista kontrolna języków. Pod Screen 1 każda etykieta jest nazwana według skryptu albo języka, który demonstruje:

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

Ta struktura sprawia, że plik jest przydatny jako referencja. Jeśli język renderuje się poprawnie, możesz sprawdzić etykietę, zasób fontu, rozmiar, kolor i wartość tekstu, a potem skopiować to samo podejście do własnego projektu PicoPixel.

Fonty CJK i brakujące glify

Fonty chińskie, japońskie i koreańskie wymagają w LVGL szczególnej uwagi, bo pełne zestawy znaków są ogromne. Dołączenie każdego możliwego glifu może dodać megabajty do projektu embedded, co zwykle jest zbyt dużo dla małych urządzeń.

Dla tekstu CJK użyj opcji Asian w panelu Create Font PicoPixel, a potem dodaj dokładne znaki, które interfejs będzie wyświetlał, w polu Symbols. Dołącz każdą etykietę, przycisk, element menu, komunikat ostrzeżenia, jednostkę i status string, który może pojawić się na ekranie.

Szczegółowy walkthrough znajduje się w Working with fonts, szczególnie w sekcji o chińskim, japońskim i koreańskim.

Wybór fontów dla każdego systemu pisma

Nie każdy font obsługuje każdy język. Font łaciński może wyglądać idealnie dla angielskiego, ale nie zawierać glifów arabskich, hebrajskich, tajskich, koreańskich, japońskich albo chińskich. Szablon pokazuje bezpieczniejsze podejście: używaj rodzin fontów zaprojektowanych dla skryptu, który renderujesz.

• Użyj Noto Sans SC albo innego fontu CJK-capable dla chińskiego uproszczonego.
• Użyj fontu Japanese-capable dla tekstu japońskiego.
• Użyj fontu Korean-capable, takiego jak Gothic A1 albo inny font Hangul, dla tekstu koreańskiego.
• Użyj Noto Sans Arabic dla tekstu w skrypcie arabskim.
• Użyj Open Sans Hebrew albo innego fontu Hebrew-capable dla hebrajskiego.
• Użyj fontu Greek-capable dla greckiego.
• Użyj fontu Cyrillic-capable dla rosyjskiego i innych tekstów cyrylicą.
• Użyj fontów obsługujących tajski i bengalski dla etykiet tajskich i bengalskich.

W panelu Create Font dropdown Letters kontroluje pokrycie skryptów non-CJK, takich jak grecki, cyrylica, hebrajski, arabski, tajski i inne. Dropdown Asian jest osobny, bo zestawy glifów CJK są znacznie większe.

Dlaczego to dobrze działa z LVGL

Ten szablon jest użyteczny, bo odpowiada temu, jak LVGL naprawdę obsługuje fonty na hardware embedded.

• Fonty LVGL są skonwertowanymi zasobami bitmapowymi, więc każdy wybrany rozmiar jest generowany osobno.
• Dołączane są tylko wybrane glify, co pomaga kontrolować rozmiar firmware.
• Fonty specyficzne dla skryptów ograniczają brakujące glify, szczególnie dla języków niełacińskich.
• Wiele rozmiarów może współistnieć, więc nagłówki, etykiety body i małe podpisy mogą używać odpowiedniego zasobu fontu.
• Etykiety pozostają edytowalne, więc możesz zastąpić sample text własnymi tłumaczeniami przed eksportem.
• Projekt eksportuje się jako standardowy kod UI LVGL 8.x, razem z zasobami fontów potrzebnymi etykietom.

Wzorzec runtime

Po eksporcie etykiety nadal można aktualizować z firmware. Dokładne nazwy wygenerowanych symboli zależą od nazw obiektów PicoPixel i nazw fontów, ale wzorzec LVGL jest znajomy:

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

Dla tłumaczonego tekstu upewnij się, że wyeksportowany font zawiera każdy znak, który możesz przekazać do lv_label_set_text. Ma to największe znaczenie dla stringów CJK i dynamicznych komunikatów statusu, które nie są widoczne na początkowym canvasie projektu.

Pomysły na dostosowanie

Użyj tego jako darmowego szablonu typografii LVGL, a potem dopasuj go do własnego produktu.

• Zastąp przykładowe pozdrowienia prawdziwymi tłumaczonymi etykietami UI.
• Utwórz jeden font dla każdego skryptu i rozmiaru, którego interfejs naprawdę potrzebuje.
• Usuń nieużywane rozmiary fontów przed eksportem, aby firmware było mniejsze.
• Użyj tego samego layoutu tekstu, aby porównać kilka rodzin fontów przed wyborem jednej.
• Dodaj etykiety right-to-left dla arabskiego, perskiego, hebrajskiego albo innych interfejsów RTL.
• Utwórz osobne tłumaczone ekrany dla wyboru języka, ustawień, onboardingu albo alertów.
• Po eksperymentach użyj Delete Unused Fonts, aby pozostały tylko używane zasoby fontów.

Eksport do projektu

Otwórz szablon w PicoPixel, sprawdź zasoby fontów, zastąp przykładowe etykiety własnym tekstem i utwórz brakujące fonty przed eksportem. Jeśli pracujesz z chińskim, japońskim albo koreańskim, wklej dokładne stringi UI w pole Symbols podczas tworzenia fontu.

Dla projektów ESP32 typowy flow wygląda tak:

1. Wybierz języki, które UI ma obsługiwać.
2. Utwórz kompatybilne fonty LVGL dla każdego skryptu i rozmiaru.
3. Dla chińskiego, japońskiego i koreańskiego dołącz dokładne znaki, które UI będzie wyświetlać.
4. Zastąp przykładowe etykiety w tym szablonie prawdziwym tekstem UI.
5. Wyeksportuj UI PicoPixel jako LVGL C.
6. Dodaj wyeksportowaną UI i pliki fontów do projektu ESP-IDF, Arduino albo PlatformIO.
7. Wywołaj ui_init() po przygotowaniu LVGL i sterownika display.

Step-by-step workflow fontów opisuje Working with fonts. Importowanie i otwieranie szablonów opisuje How to use PicoPixel templates.

Najlepsze zastosowania

Ten szablon dobrze pasuje, gdy potrzebujesz czytelnego punktu startowego dla:

• przykładów tekstu wielojęzycznego LVGL
• konfiguracji fontów CJK dla chińskiego, japońskiego albo koreańskiego
• prototypów tłumaczonej UI ESP32
• testowania konwersji fontów
• debugowania brakujących glifów
• sprawdzania skryptów right-to-left i niełacińskich
• międzynarodowych ekranów ustawień
• interfejsów kiosk, wearable, dashboard i smart-device