Exemple de polices - Modeles

Vue d'ensemble

Vous cherchez un modèle de polices LVGL gratuit ou un exemple de texte multilingue pour une interface embarquée ? Ce projet PicoPixel montre comment les polices LVGL converties, les choix de polices propres à chaque script, les tailles et les couleurs se combinent sur un écran 480 x 480.

Le modèle démontre plusieurs systèmes d'écriture non latins au même endroit, notamment le cyrillique, le chinois, le japonais, le grec, l'arabe, le coréen, l'hébreu, le thaï et le bengali. Utilisez-le comme point de départ lorsque vous avez besoin d'un dashboard ESP32, d'un écran de réglages, d'une interface de kiosque, d'un menu de wearable ou d'une interface d'appareil intelligent qui doit afficher des libellés traduits au lieu d'un texte uniquement anglais.

La leçon principale est simple : les polices LVGL ne sont pas comme les polices web de bureau. Une police LVGL convertie contient les glyphes et les tailles que vous choisissez. Pour le chinois, le japonais et le coréen, vous devriez normalement inclure uniquement les caractères exacts que votre interface affichera, sinon les caractères manquants peuvent s'afficher sous forme de carrés vides. Pour le flux complet, consultez le guide PicoPixel sur le travail avec les polices LVGL.

Ce qui est inclus

Écran de typographie multilingue 480 x 480, conçu comme un canevas compact de test de polices.
Neuf exemples de texte visibles, couvrant le cyrillique, le chinois, le japonais, le grec, l'arabe, le coréen, l'hébreu, le thaï et le bengali.
Calques de libellés propres à chaque script, nommés dans le panneau des calques afin qu'il soit facile de voir quel objet texte correspond à quelle langue.
Dix ressources de polices converties, montrant qu'un vrai projet LVGL peut nécessiter plusieurs familles et tailles de polices.
Aucune dépendance image, afin que le projet reste centré sur le rendu de texte plutôt que sur des captures bitmap.
Tailles de police mixtes, incluant de petits libellés de type corps de texte et du texte d'affichage plus grand.
Couleurs mixtes, rendant chaque script facile à inspecter sur le fond sombre.
Rappels de police dans le canevas, signalant les deux grandes règles : choisir une police qui prend en charge votre langue cible et inclure les caractères que votre interface utilise réellement.
Exemple du panneau Create Font, montrant les polices intégrées, les imports, les préréglages de taille de police, Letters, Asian et les options avancées.

Instantané des ressources

Le panneau des ressources présente ce projet comme un modèle PicoPixel centré sur les polices :

Images : 0, l'aperçu est construit à partir d'objets texte modifiables.
Couleurs : 0, les couleurs sont appliquées directement aux libellés dans le design.
Polices : 10, assez pour démontrer plusieurs scripts, tailles et familles de polices.
Widgets : 0, afin de garder l'exemple centré sur le texte et les ressources de police.

Les ressources de police visibles comprennent :

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

La liste de la capture est défilable, donc le projet contient une ressource de police supplémentaire au-delà des lignes visibles. Le schéma important est que chaque script utilise une police qui contient réellement les glyphes dont il a besoin.

Structure des calques

Le panneau des calques est organisé comme une checklist de langues. Sous Screen 1, chaque libellé est nommé d'après le script ou la langue qu'il démontre :

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

Cette structure rend le fichier utile comme référence. Si une langue s'affiche correctement, vous pouvez inspecter le libellé, la ressource de police, la taille, la couleur et la valeur du texte, puis copier la même approche dans votre propre projet PicoPixel.

Polices CJK et glyphes manquants

Les polices chinoises, japonaises et coréennes demandent une attention particulière dans LVGL, car les jeux de caractères complets sont énormes. Inclure tous les glyphes possibles peut ajouter des mégaoctets à un projet embarqué, ce qui est généralement trop pour les petits appareils.

Pour le texte CJK, utilisez l'option Asian dans le panneau Create Font de PicoPixel, puis ajoutez les caractères exacts que votre interface affichera dans le champ Symbols. Incluez chaque libellé, bouton, élément de menu, message d'avertissement, unité et chaîne d'état qui peut apparaître à l'écran.

WARNING

Si votre interface affiche plus tard un caractère chinois, japonais ou coréen qui n'était pas inclus lors de la création de la police, LVGL peut afficher un carré vide à la place du caractère. Lorsque votre texte traduit change, mettez à jour le champ Symbols et recréez la police.

La procédure détaillée se trouve dans Working with fonts, en particulier la section sur le chinois, le japonais et le coréen.

Choisir les polices pour chaque script

Toutes les polices ne prennent pas en charge toutes les langues. Une police latine peut être parfaite pour l'anglais mais ne contenir aucun glyphe arabe, hébreu, thaï, coréen, japonais ou chinois. Le modèle montre l'approche la plus sûre : utiliser des familles de polices conçues pour le script que vous affichez.

Utilisez Noto Sans SC ou une autre police compatible CJK pour le chinois simplifié.
Utilisez une police compatible japonais pour le texte japonais.
Utilisez une police compatible coréen comme Gothic A1 ou une autre police hangul pour le texte coréen.
Utilisez Noto Sans Arabic pour le texte en écriture arabe.
Utilisez Open Sans Hebrew ou une autre police compatible hébreu.
Utilisez une police compatible grec pour le grec.
Utilisez une police compatible cyrillique pour le russe et les autres textes cyrilliques.
Utilisez des polices compatibles thaï et bengali pour les libellés thaï et bengali.

Dans le panneau Create Font, le menu déroulant Letters contrôle la couverture des scripts non CJK comme le grec, le cyrillique, l'hébreu, l'arabe, le thaï, etc. Le menu Asian est séparé, car les jeux de glyphes CJK sont beaucoup plus grands.

TIP

Utilisez le champ d'aperçu de police avant de créer la police. Collez le texte réel que vous prévoyez d'afficher dans l'interface. Si l'aperçu montre des carrés, changez de police pour une police qui prend en charge cette langue avant l'export.

Pourquoi cela fonctionne bien pour LVGL

Ce modèle est utile parce qu'il correspond à la façon dont LVGL gère réellement les polices sur du matériel embarqué.

Les polices LVGL sont des ressources bitmap converties, donc chaque taille sélectionnée est générée séparément.
Seuls les glyphes sélectionnés sont inclus, ce qui garde la taille du firmware sous contrôle.
Les polices propres à chaque script réduisent les glyphes manquants, surtout pour les langues non latines.
Plusieurs tailles peuvent coexister, afin que titres, libellés de corps et petites légendes puissent chacun utiliser une ressource de police appropriée.
Les libellés restent modifiables, vous pouvez donc remplacer le texte d'exemple par vos propres traductions avant l'export.
Le projet s'exporte en code d'interface LVGL 8.x standard, avec les ressources de police nécessaires aux libellés.

Modèle d'exécution

Après l'export, vos libellés peuvent toujours être mis à jour depuis le firmware. Les noms de symboles générés exacts dépendent de vos noms d'objets PicoPixel et de vos noms de polices, mais le schéma LVGL est familier :

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

Pour du texte traduit, assurez-vous que la police exportée contient chaque caractère que vous pourriez passer à lv_label_set_text. C'est particulièrement important pour les chaînes CJK et les messages d'état dynamiques qui ne sont pas visibles sur le canevas initial.

Idées de personnalisation

Utilisez-le comme modèle gratuit de typographie LVGL, puis adaptez-le à votre propre produit.

Remplacez les salutations d'exemple par vos vrais libellés d'interface traduits.
Créez une police par script et par taille dont votre interface a réellement besoin.
Réduisez les tailles de police inutilisées avant l'export afin de garder le firmware plus petit.
Utilisez la même mise en page de texte pour comparer plusieurs familles de polices avant d'en choisir une.
Ajoutez des libellés de droite à gauche pour l'arabe, le persan, l'hébreu ou d'autres interfaces RTL.
Créez des écrans traduits séparés pour le choix de langue, les réglages, l'onboarding ou les alertes.
Utilisez Delete Unused Fonts après les essais afin que seules les ressources de police référencées restent.

Exporter vers votre projet

Ouvrez le modèle dans PicoPixel, inspectez les ressources de police, remplacez les libellés d'exemple par votre propre texte, et créez les polices manquantes avant l'export. Si vous travaillez avec le chinois, le japonais ou le coréen, collez les chaînes d'interface exactes dans le champ Symbols lors de la création de la police.

Pour les projets ESP32, le flux habituel est :

Choisissez les langues que votre interface doit prendre en charge.
Créez des polices LVGL compatibles pour chaque script et chaque taille.
Pour le chinois, le japonais et le coréen, incluez les caractères exacts que votre interface affichera.
Remplacez les libellés d'exemple de ce modèle par votre vrai texte d'interface.
Exportez l'interface PicoPixel en C LVGL.
Ajoutez l'interface et les fichiers de police exportés à votre projet ESP-IDF, Arduino ou PlatformIO.
Appelez ui_init() une fois LVGL et votre pilote d'affichage prêts.

Pour le flux de polices pas à pas, lisez Working with fonts. Pour importer et ouvrir des modèles, consultez How to use PicoPixel templates.

Meilleures utilisations

Ce modèle convient bien lorsque vous voulez un point de départ clair pour :

Exemples de texte multilingue LVGL
Configuration de polices CJK pour le chinois, le japonais ou le coréen
Prototypes d'interface traduite ESP32
Tests de conversion de polices
Débogage de glyphes manquants
Vérifications de scripts de droite à gauche et non latins
Écrans de réglages internationaux
Interfaces de kiosque, wearable, dashboard et appareil intelligent

Exempledepolices