Przegląd
Czcionki na urządzeniu wbudowanym działają nieco inaczej niż czcionki na Twoim komputerze. Ten poradnik wyjaśnia dlaczego, a następnie przeprowadza przez tworzenie czcionek w PicoPixel — od wyboru dołączonej czcionki lub przesłania własnej, przez obsługę języków pisanych od prawej do lewej, takich jak arabski i hebrajski, aż po radzenie sobie z bardzo dużymi czcionkami używanymi dla języka chińskiego, japońskiego i koreańskiego. Na koniec pokażemy, jak usunąć czcionki, które pozostały po eksperymentach z projektem.
Dlaczego czcionki wymagają konwersji?
Na laptopie plik czcionki (np. .ttf lub .otf) opisuje każdą literę jako zestaw krzywych matematycznych. Twój komputer ma wystarczająco dużo mocy i pamięci, aby rysować te krzywe płynnie w dowolnym rozmiarze.
Małe urządzenie (ESP32, chip smartwatcha, mały kontroler wyświetlacza) zazwyczaj nie jest w stanie tego zrobić. Brakuje mu pamięci i mocy obliczeniowej do przerysowywania krzywych w locie. Dlatego LVGL przyjmuje inne podejście: zamiast krzywych przechowuje każdą literę jako mały, wcześniej przygotowany obraz (bitmapę) o stałym rozmiarze. To znacznie lżejsze rozwiązanie dla urządzenia.
PicoPixel wykonuje tę konwersję za Ciebie. Kiedy tworzysz czcionkę, bierzemy oryginalny plik czcionki i zamieniamy go na format bitmapowy wymagany przez LVGL — uwzględniając tylko potrzebne znaki i rozmiary.
Ponieważ każda litera jest wstępnie narysowana w stałym rozmiarze, przekonwertowana czcionka LVGL ma stały rozmiar wybrany podczas tworzenia. Powiększenie czcionki z 16px do 32px spowoduje utratę ostrości. Jeśli potrzebujesz tekstu w dwóch różnych rozmiarach, tworzysz czcionkę w obu rozmiarach (patrz Tworzenie czcionki poniżej, gdzie możesz wybrać kilka rozmiarów naraz).
To również dlatego czcionki zajmują pamięć urządzenia: każda litera, w każdym rozmiarze, zajmuje trochę miejsca w pamięci. Większość tego poradnika dotyczy ograniczania zużycia pamięci — poprzez uwzględnianie tylko tych znaków i rozmiarów, których faktycznie używasz.
Dołączone czcionki i własne czcionki
Kiedy tworzysz czcionkę, masz dwa punkty wyjścia:
- Bundled (dołączone czcionki) — wyselekcjonowany zestaw popularnych, dobrze przetestowanych czcionek gotowych do użycia: Noto Sans, Roboto, Open Sans, Montserrat, Poppins, Inter, Lato, Nunito, Source Sans 3 i więcej. To bezpieczny wybór i dobry punkt wyjścia.
- Upload (przesyłanie pliku) — wybierz własny plik
.ttflub.otf. Użyj tego, gdy masz określoną czcionkę marki lub czcionkę obejmującą język, którego dołączone czcionki nie obsługują.
Jeśli przesyłasz własną czcionkę, używaj statycznego pliku czcionki (np. Roboto-Regular.ttf) zamiast pliku czcionki zmiennej (variable font) (jak Roboto-VariableFont.ttf). Pliki statyczne konwertują się znacznie bardziej niezawodnie. Zwykłe pliki .ttf działają najlepiej ze wszystkich.
Niezależnie od wyboru dostępny jest podgląd na żywo, dzięki któremu możesz wpisać własny tekst i zobaczyć dokładnie jak będzie wyglądał, zanim go utworzysz.
Tworzenie czcionki
Otwórz panel Create Font i zobaczysz krótki formularz. Oto co robi każda część:
- Select font (wybór czcionki) — wybierz czcionkę z karty Bundled (i jej grubość, jak Regular lub Bold) lub przejdź do karty Upload i wybierz własny plik.
- Font name (nazwa czcionki) — nazwa, którą zobaczysz na liście czcionek projektu. Nadaj coś łatwego do zapamiętania, zwłaszcza jeśli będziesz mieć ich kilka.
- Size (px) (rozmiar w pikselach) — rozmiar czcionki w pikselach. Możesz wybrać więcej niż jeden rozmiar naraz (poręczne ustawienia wstępne, takie jak 16, 22 i 32 są dostępne jednym dotknięciem). Pamiętaj, że każdy rozmiar jest generowany osobno, więc wybieraj tylko te, których naprawdę użyjesz.
- Letters (zestaw znaków) — wybierz zestaw znaków do uwzględnienia: Standard (podstawowe znaki angielskie), Latin, Greek, Cyrillic, Hebrew, Arabic, Thai i inne. W ten sposób informujesz PicoPixel, których liter języka potrzebujesz.
- Asian (języki azjatyckie) — osobna opcja dla języka chińskiego, japońskiego i koreańskiego. Wymagają specjalnej obsługi, omówionej w osobnej sekcji poniżej.
Jest też obszar Advanced (ustawienia zaawansowane) do doprecyzowania ustawień, w tym Bits per Pixel (bity na piksel) (ile odcieni szarości używa każda litera; wyższa wartość wygląda gładziej, ale zajmuje więcej miejsca; 4 to dobry punkt wyjścia) oraz pola do ręcznego określania dokładnych zakresów znaków lub symboli. Zwykle nie trzeba zmieniać tych ustawień.
Nie każda czcionka zawiera każdy język. Jeśli wybierzesz niełacińskie pismo i Twój podgląd pokazuje puste kwadraty zamiast liter, ta czcionka go nie obsługuje — przełącz się na czcionkę z karty Bundled zaprojektowaną dla tego pisma lub prześlij taką, która to robi. PicoPixel ostrzeże Cię, gdy wybierzesz pismo, którego nie obsługują wszystkie czcionki.
Pisma od prawej do lewej: arabski i hebrajski
Języki takie jak arabski i hebrajski czyta się od prawej do lewej, a ich prawidłowe wyświetlanie wymaga odpowiedniej obsługi. Dobra wiadomość jest taka, że konfigurujesz to bezpośrednio w panelu Create Font — nic nie trzeba konfigurować ręcznie.
- W menu rozwijanym Letters (zestaw znaków) wybierz Arabic lub Hebrew. To ważny krok: informuje PicoPixel, aby uwzględnił właściwy zestaw znaków dla tego pisma (podstawowe litery angielskie też są dołączone, więc cyfry i tekst łaciński nadal działają).
- PicoPixel zasugeruje czcionkę zbudowaną dla tego pisma, na przykład Noto Sans Arabic. Skorzystaj z sugestii (lub innej czcionki wspierającej dane pismo) zamiast zwykłej czcionki łacińskiej, która nie będzie zawierać tych liter.
- Sprawdź podgląd na żywo. Jeśli litery renderują się tam poprawnie, jesteś gotowy. Jeśli widzisz kwadraty, wybrana czcionka nie obsługuje pisma — wybierz inną.
Litery arabskie zmieniają kształt w zależności od miejsca w słowie, a cały wiersz biegnie od prawej do lewej. Kiedy eksportujesz projekt, PicoPixel automatycznie wykrywa, że użyłeś tekstu arabskiego, perskiego lub hebrajskiego i włącza odpowiednie ustawienie LVGL dla połączonych kształtów liter — dzięki czemu nie musisz przeszukiwać plików konfiguracyjnych, aby wyglądało to dobrze na urządzeniu.
Kluczowa sprawa do zapamiętania: wybór Arabic lub Hebrew w menu rozwijanym Letters (zestaw znaków) podczas tworzenia czcionki to właśnie to, co dołącza te znaki. Jeśli najpierw stworzysz zwykłą czcionkę, a dopiero później dodasz tekst pisany od prawej do lewej, liter tam nie będzie — twórz czcionkę z właściwym pismem wybranym od samego początku.
Chiński, japoński i koreański
CJK to skrót od angielskich nazw języków chińskiego, japońskiego i koreańskiego. Te języki są wyjątkowe, ponieważ mają bardzo dużo znaków — koreański ma ich około 11 000, a chiński znacznie ponad 20 000. Pamiętaj, że każdy znak jest wstępnie narysowany i przechowywany na urządzeniu. Dołączenie całej czcionki CJK mogłoby dodać megabajty, które po prostu nie zmieszczą się na większości urządzeń wbudowanych.
Rozwiązaniem jest uwzględnienie tylko tych znaków, których faktycznie używasz. Typowy interfejs może wyświetlać zaledwie sto lub kilkadziesiąt różnych znaków — czyli niewielki ułamek całego zestawu.
Oto jak to zrobić:
- W menu rozwijanym Asian (języki azjatyckie) wybierz Korean, Chinese lub Japanese.
- Znajdź pole Symbols (w sekcji Advanced) i wklej rzeczywisty tekst, który będzie wyświetlał Twój interfejs — każdą etykietę, przycisk i komunikat. PicoPixel uwzględnia glif tylko dla każdego znaku, który tam znajdzie.
- Aby ułatwić Ci start, PicoPixel wstępnie wypełnia to pole popularnymi słowami interfejsu (jak „Ustawienia”, „Potwierdź”, „Anuluj” i tym podobne) w wybranym przez Ciebie języku. Dodaj własny tekst.
W ten sposób czcionka, która mogłaby mieć kilka megabajtów, zajmuje zaledwie kilkaset kilobajtów.
Uwzględniane są tylko znaki, które wymienisz w polu Symbols. Jeśli Twój interfejs później wyświetli znak, którego nie dodałeś, pojawi się jako pusty kwadrat. Kiedy Twój tekst się zmieni, wróć i zaktualizuj pole Symbole, a następnie utwórz czcionkę ponownie.
W przypadku CJK przesłanie konkretnej czcionki, którą chcesz (zamiast polegania na czcionce ogólnej), daje Ci największą kontrolę — a wklejenie pełnego, ostatecznego tekstu interfejsu oznacza, że nic nie zostanie pominięte.
Porządkowanie: usuwanie nieużywanych czcionek
Czcionki zajmują miejsce i łatwo zgromadzić takie, których już nie potrzebujesz — zwłaszcza podczas eksperymentowania. Na przykład możesz nie być pewien, czy lepiej wygląda 16px czy 22px, więc tworzysz obie i sprawdzasz. Kiedy już zdecydujesz, ta druga to tylko zbędny balast.
PicoPixel ułatwia porządki. W obszarze Czcionki w zasobach znajduje się przycisk Remove unused fonts. Skanuje każdy widżet w projekcie, znajduje czcionki, których nic faktycznie nie używa, i usuwa je jednym kliknięciem — dzięki czemu możesz wyczyścić pozostałości i zwolnić miejsce dla czcionek, których naprawdę potrzebujesz.
To łatwy sposób na eksperymentowanie z rozmiarami. Utwórz kilka rozmiarów, sprawdź który dobrze wygląda w Twoim projekcie, a następnie kliknij Remove unused fonts, aby posprzątać resztę. Każda czcionka na liście pokazuje swoje ustawienia rozmiaru i jakości, więc łatwo zobaczyć jednym rzutem oka, co masz.
„Remove unused fonts” usuwa tylko czcionki, do których żaden widżet się nie odwołuje, więc Twój projekt się nie zmieni. Możesz też samodzielnie usunąć pojedynczą czcionkę, klikając ją prawym przyciskiem myszy na liście. Jeśli usuniesz coś przez pomyłkę, możesz od razu cofnąć tę operację.
