Vue d'ensemble
Les polices sur un appareil embarqué ne fonctionnent pas tout à fait comme sur votre ordinateur. Ce guide explique pourquoi, puis vous guide dans la création de polices dans PicoPixel — du choix d'une police intégrée ou de l'importation de la vôtre, à la gestion des langues de droite à gauche comme l'arabe et l'hébreu, jusqu'à la maîtrise des très grandes polices utilisées pour le chinois, le japonais et le coréen. Pour finir, nous aborderons une pratique fonctionnalité de nettoyage pour quand vous avez beaucoup expérimenté.
Pourquoi les polices doivent-elles être converties ?
Sur votre ordinateur portable, un fichier de police (comme un .ttf ou .otf) décrit chaque lettre comme un ensemble de courbes mathématiques. Votre ordinateur a suffisamment de puissance et de mémoire pour tracer ces courbes en douceur à n'importe quelle taille demandée.
Un petit appareil (un ESP32, une puce de montre connectée, un minuscule contrôleur d'affichage) ne peut généralement pas faire cela. Il n'a pas la mémoire ni la puissance de traitement nécessaires pour redessiner des courbes à la volée. LVGL adopte donc une approche différente : au lieu de courbes, il stocke chaque lettre sous forme de petite image prédessinée (un bitmap) à une taille fixe. C'est bien plus léger à gérer pour l'appareil.
PicoPixel effectue cette conversion pour vous. Lorsque vous créez une police, nous prenons le fichier de police original et le convertissons au format bitmap dont LVGL a besoin, en ne sélectionnant que les lettres souhaitées, aux tailles souhaitées.
Comme chaque lettre est prédessinée à une taille fixe, une police LVGL convertie est verrouillée à la taille choisie. Une police de 16px ne peut pas être étirée à 32px et rester nette. Si vous avez besoin de texte à deux tailles différentes, créez la police aux deux tailles (voir Créer une police ci-dessous, où vous pouvez choisir plusieurs tailles à la fois).
C'est aussi pourquoi les polices ont un coût réel sur un appareil : chaque lettre, à chaque taille, occupe un peu d'espace en mémoire. La majeure partie de ce guide vise à maintenir ce coût faible, en n'incluant que les caractères et les tailles réellement utilisés.
Polices intégrées et vos propres polices
Lorsque vous créez une police, vous avez deux points de départ :
- Intégrées — un ensemble sélectionné de polices populaires, bien testées, prêtes à l'emploi : Noto Sans, Roboto, Open Sans, Montserrat, Poppins, Inter, Lato, Nunito, Source Sans 3, et d'autres. Ce sont un choix sûr et une bonne valeur par défaut.
- Importer — apportez votre propre fichier
.ttfou.otf. Utilisez cette option lorsque vous avez une police de marque spécifique ou une police couvrant une langue que les polices intégrées ne couvrent pas.
Si vous importez votre propre police, utilisez un fichier de police statique (par exemple Roboto-Regular.ttf) plutôt qu'un fichier de police « variable » (comme Roboto-VariableFont.ttf). Les fichiers statiques se convertissent bien plus fiablement. Les fichiers .ttf simples fonctionnent généralement le mieux.
Quel que soit votre choix, un aperçu en direct vous permet de saisir votre propre texte et de voir exactement comment il se présentera avant de le créer.
Créer une police
Ouvrez le panneau Créer une police et vous verrez un court formulaire. Voici ce que fait chaque partie :
- Choisissez votre police — sélectionnez une police Intégrée (et sa graisse, comme Regular ou Bold), ou passez à l'onglet Importer et sélectionnez votre propre fichier.
- Nom de la police — le nom que vous verrez dans la liste des polices de votre projet. Donnez-lui quelque chose de mémorable, surtout si vous en avez plusieurs.
- Taille (px) — la taille en pixels de la police. Vous pouvez sélectionner plusieurs tailles à la fois (des préréglages pratiques comme 16, 22 et 32 sont accessibles en un tap). Rappelez-vous que chaque taille est générée séparément, alors ne choisissez que celles que vous utiliserez vraiment.
- Lettres — choisissez quel ensemble de caractères inclure : Standard (anglais de base), Latin, Grec, Cyrillique, Hébreu, Arabe, Thaï, et plusieurs autres. C'est ainsi que vous indiquez à PicoPixel les lettres de la langue dont vous avez besoin.
- Asiatique — une option distincte pour le chinois, le japonais et le coréen. Ces langues nécessitent un traitement spécial, couvert dans leur propre section ci-dessous.
Il y a aussi une zone Avancé pour les réglages fins, notamment Bits par pixel (combien de nuances de gris chaque lettre utilise ; plus élevé donne un rendu plus doux mais prend plus de place ; 4 est une bonne valeur par défaut) et des champs pour spécifier des plages de caractères exactes ou des symboles à la main. La plupart des gens n'ont jamais besoin de toucher à cela.
Toutes les polices ne comprennent pas toutes les langues. Si vous choisissez un script non latin et que votre aperçu affiche des cases vides au lieu de lettres, cette police ne le couvre pas — passez à une police Intégrée conçue pour ce script, ou importez-en une qui le fait. PicoPixel vous avertira lorsque vous choisissez un script que toutes les polices ne prennent pas en charge.
Scripts de droite à gauche : arabe et hébreu
Les langues comme l'arabe et l'hébreu se lisent de droite à gauche, et leurs lettres nécessitent un traitement particulier. La bonne nouvelle est que vous configurez cela directement dans le panneau Créer une police — rien à configurer manuellement.
- Dans le menu déroulant Lettres, choisissez Arabe ou Hébreu. C'est l'étape importante : elle indique à PicoPixel d'inclure le bon jeu de caractères pour ce script (les lettres anglaises de base sont incluses aussi, de sorte que les chiffres et le texte latin fonctionnent toujours).
- PicoPixel suggérera une police adaptée à ce script, par exemple Noto Sans Arabic. Utilisez la suggestion (ou une autre police adaptée au script) plutôt qu'une police latine simple qui ne contiendra pas les lettres.
- Vérifiez l'aperçu en direct. Si les lettres s'affichent correctement, c'est bon. Si vous voyez des cases, la police choisie ne prend pas en charge le script — choisissez-en une autre.
Les lettres arabes changent de forme selon leur position dans un mot, et toute la ligne s'écoule de droite à gauche. Lorsque vous exportez votre projet, PicoPixel détecte automatiquement que vous avez utilisé du texte arabe, persan ou hébreu et active le paramètre LVGL correspondant pour les formes de lettres liées, afin que vous n'ayez pas à fouiller dans les fichiers de configuration pour que l'affichage soit correct sur l'appareil.
L'essentiel à retenir : choisir Arabe ou Hébreu dans le menu déroulant Lettres lors de la création de la police est ce qui inclut ces caractères. Si vous créez d'abord une police normale et n'ajoutez du texte de droite à gauche que plus tard, les lettres ne seront pas là — créez la police avec le bon script sélectionné dès le départ.
Chinois, japonais et coréen
CJK est l'abréviation courante pour le chinois, le japonais et le coréen. Ces langues sont particulières car elles possèdent beaucoup de caractères — le coréen en a environ 11 000 et le chinois bien plus de 20 000. Rappelez-vous que chaque caractère est prédessiné et stocké sur l'appareil. Inclure une police CJK complète pourrait ajouter des mégaoctets, ce qui ne tiendra tout simplement pas sur la plupart des appareils embarqués.
La solution consiste à n'inclure que les caractères que vous utilisez réellement. Une interface typique n'affiche peut-être qu'une centaine de caractères différents environ, ce qui est minuscule en comparaison.
Voici comment procéder :
- Dans le menu déroulant Asiatique, choisissez Coréen, Chinois ou Japonais.
- Trouvez le champ Symboles (dans la zone Avancé) et collez le texte réel que votre interface affichera — chaque étiquette, bouton et message. PicoPixel n'inclut un glyphe que pour chaque caractère qu'il trouve là.
- Pour vous aider à démarrer, PicoPixel pré-remplit ce champ avec des mots d'interface courants (comme « Paramètres », « Confirmer », « Annuler », etc.) dans la langue choisie. Ajoutez votre propre texte.
Ainsi, une police qui aurait pu peser plusieurs mégaoctets se retrouve à quelques centaines de kilo-octets.
Seuls les caractères que vous listez dans Symboles sont inclus. Si votre interface affiche ultérieurement un caractère que vous n'avez pas ajouté, il apparaîtra comme une case vide. Lorsque votre texte change, revenez et mettez à jour le champ Symboles, puis recréez la police.
Pour le CJK, importer la police spécifique que vous souhaitez (plutôt que de vous fier à une police générale) vous donne le plus de contrôle, et coller une copie complète et définitive du texte de votre interface garantit que rien n'est oublié.
Nettoyage : supprimer les polices inutilisées
Les polices occupent de l'espace, et il est facile d'en accumuler dont vous n'avez plus besoin, surtout lors d'expérimentations. Par exemple, vous n'êtes peut-être pas sûr de savoir si 16px ou 22px rend mieux, alors vous créez les deux et les essayez. Une fois que vous avez décidé, l'autre n'est plus qu'un poids mort.
PicoPixel rend cela indolore. Dans la zone Polices de vos ressources, il y a un bouton Supprimer les polices inutilisées. Il analyse chaque widget de votre projet, trouve les polices qu'aucun élément n'utilise réellement, et les supprime en un clic — vous pouvez ainsi faire le ménage et libérer de la place pour les polices dont vous avez besoin.
C'est la façon facile d'expérimenter avec les tailles. Créez quelques tailles, voyez laquelle s'intègre le mieux dans votre design, puis cliquez sur Supprimer les polices inutilisées pour nettoyer le reste. Chaque police de la liste affiche sa taille et ses paramètres de qualité, il est donc facile de voir d'un coup d'œil ce que vous avez.
« Supprimer les polices inutilisées » ne supprime que les polices auxquelles aucun widget ne fait référence, votre design ne changera donc pas. Vous pouvez également supprimer une seule police vous-même en faisant un clic droit dessus dans la liste. Si vous supprimez quelque chose par accident, annuler le rétablit immédiatement.
