Exemple de polices - Modèles

Vue d'ensemble

Ce modèle LVGL gratuit montre comment afficher plusieurs langues sur un écran de 480 x 480. Il associe des polices converties adaptées à chaque écriture, dans différentes tailles et couleurs.

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 tableau de bord ESP32, d'un écran de réglages, d'une interface de kiosque, d'un menu de appareil porté sur soi ou d'une interface d'appareil intelligent qui doit afficher des libellés traduits au lieu d'un texte uniquement anglais.

Une police LVGL convertie ne contient que les tailles et les caractères choisis lors de sa création. Pour le chinois, le japonais et le coréen, incluez exactement les caractères de votre interface afin de limiter la mémoire utilisée. Tout caractère absent risque d’apparaître sous forme de carré vide. Consultez le guide des polices LVGL pour suivre les étapes.

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 système d’écriture, 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 image externe, 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 système d’écriture 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.

Ressources du projet

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 systèmes d’écriture, 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 capture ne montre pas toutes les lignes de la liste déroulante : le projet contient une police supplémentaire. L’essentiel est de choisir, pour chaque système d’écriture, une police qui possède les glyphes nécessaires.

Structure des calques

Le panneau des calques est organisé comme une liste de contrôle de langues. Sous Screen 1, chaque libellé est nommé d'après le système d’écriture 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 Utiliser les polices LVGL, en particulier la section sur le chinois, le japonais et le coréen.

Choisir les polices pour chaque système d’écriture

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 système d’écriture 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 écritures autres que le chinois, le japonais et le coréen 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 système d’écriture 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.

Fonctionnement dans le firmware

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'prise en main 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 intégrer le projet à un ESP32 :

Choisissez les langues que votre interface doit prendre en charge.
Créez des polices LVGL compatibles pour chaque système d’écriture 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 créer vos polices pas à pas, lisez Utiliser les polices LVGL. Pour importer et ouvrir des modèles, consultez Utiliser les modèles PicoPixel.

Idées d’utilisation

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 systèmes d’écriture de droite à gauche et non latins
Écrans de réglages internationaux
Interfaces de kiosque, appareil porté sur soi, tableau de bord et appareil intelligent

Exempledepolices