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 omówimy przydatną funkcję czyszczenia na wypadek, gdy dużo eksperymentowałeś.
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łą, wstępnie narysowaną obrazek (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 — wybierając tylko te litery, które chcesz, w rozmiarach, których chcesz.
Ponieważ każda litera jest wstępnie narysowana w stałym rozmiarze, przekonwertowana czcionka LVGL jest zablokowana na wybranym rozmiarze. Czcionki 16px nie można rozciągnąć do 32px i nadal wyglądała ostro. 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 mają realny koszt na urządzeniu: każda litera, w każdym rozmiarze, zajmuje trochę miejsca w pamięci. Większość tego poradnika dotyczy utrzymania tego kosztu na niskim poziomie — 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:
- Dołączone — 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.
- Prześlij — przynieś 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 pokrywają.
Jeśli przesyłasz własną czcionkę, używaj statycznego pliku czcionki (np. Roboto-Regular.ttf) zamiast pliku czcionki „zmiennej" (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 Utwórz czcionkę i zobaczysz krótki formularz. Oto co robi każda część:
- Wybierz czcionkę — wybierz czcionkę Dołączoną (i jej grubość, jak Regular lub Bold) lub przejdź do zakładki Prześlij i wybierz własny plik.
- 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.
- Rozmiar (px) — 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.
- Litery — wybierz zestaw znaków do uwzględnienia: Standard (podstawowy angielski), Łaciński, Grecki, Cyrylica, Hebrajski, Arabski, Tajski i kilka innych. W ten sposób informujesz PicoPixel, których liter języka potrzebujesz.
- 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 Zaawansowane do doprecyzowania ustawień, w tym 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 domyślny) oraz pola do ręcznego określania dokładnych zakresów znaków lub symboli. Większość ludzi nigdy nie musi ich dotykać.
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ę Dołączoną 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 litery wymagają specjalnego traktowania. Dobra wiadomość jest taka, że konfigurujesz to bezpośrednio w panelu Utwórz czcionkę — nic nie trzeba konfigurować ręcznie.
- W menu rozwijanym Litery wybierz Arabski lub Hebrajski. 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ła linia płynie 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 Arabski lub Hebrajski w menu rozwijanym Litery 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 powszechny skrót od chiński, japoński i koreański. 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 — i to jest znikome w porównaniu.
Oto jak to zrobić:
- W menu rozwijanym Azjatyckie wybierz Koreański, Chiński lub Japoński.
- Znajdź pole Symbole (w obszarze Zaawansowane) 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, kończy na kilkuset kilobajtach.
Uwzględniane są tylko znaki, które wymienisz w polu Symbole. 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łnej, ostatecznej kopii 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 sprawia, że jest to bezbolesne. W obszarze Czcionki w zasobach znajduje się przycisk Usuń nieużywane czcionki. 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 Usuń nieużywane czcionki, 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.
„Usuń nieużywane czcionki" 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 przypadkowo usuniesz coś przez pomyłkę, cofnięcie natychmiast przywróci to z powrotem.
