Assez tôt, pendant le développement du Yocto-Display-ePaper-C, on s'est rendu compte que les quatre fontes 8x8, small, medium et large qui sont inclues dans le firmware des écrans OLED n'allaient peut-être pas suffire à cause de la résolution importante des écrans ePapers compatibles avec ce nouveau module. Plutôt que de rajouter d'autres fontes choisies de manière arbitraire et d'occuper de la place dans le firmware du module, on a préféré réécrire un nouvel éditeur de fonte à zéro pour en faire une version plus pratique et plus simple à utiliser que l'éditeur original, dont tout le monde semble ignorer l'existence....
La possibilité de créer ses propres fontes pour les écrans Yoctopuce existe depuis leur mise sur le marché, il y a 13 ans. Le format des fichiers .yfm est décrit dans la documentation des écrans Yoctopuce et les sources de l'éditeur qui a été utilisé pour créer les fontes fournies en standard se trouvent dans la librairie Delphi. Non seulement cet éditeur n'offre que les fonctionnalités minimales dont on avait besoin pour créer quelques fontes de base, mais pour pouvoir l'utiliser, il faut aussi avoir les moyens de recompiler une application Delphi ou Lazarus. Plutôt que de tenter d'améliorer l'existant, on a décidé de complètement réécrire l'éditeur sous la forme d'une petite application web qu'on a appelée Yocto-FontEditor.
Installation
Vous n'avez pas besoin de procéder à la moindre installation. Toute l'application tient dans un seul fichier .html sans la moindre dépendance.
Vous pouvez soit directement charger cette page html(*), soit télécharger l'archive, le fichier qui vous intéresse est dist/Yocto-FontEditor.html. Vous pouvez l'ouvrir directement avec votre navigateur web préféré.
Vous pouvez aussi "installer" Yocto-fontEditor sur un YoctoHub: copiez simplement le fichier Yocto-FontEditor.html.gz sur le système de fichiers de votre hub, puis utilisez votre navigateur préféré pour charger l'url:
http://addresse_IP_de_votre_hub/Yocto-FontEditor
Installer Yocto-FontEditor sur un YoctoHub peut s'avérer très pratique quand un écran est connecté à ce hub: si un caractère affiché par l'écran ne vous plait pas, vous pouvez le corriger quasiment en temps réel.
(*) L'application va essayer de contacter votre VirtualHub local, ce qui risque de déclencher une demande de confirmation de la part de votre navigateur web.
Utilisation
On a essayé de rendre l'interface utilisateur aussi conviviale que possible, c'est pourquoi l'application propose un petit écran d'accueil plutôt que de vous jeter immédiatement au visage une interface pleine d'options.
Ecran d'accueil
L'écran d'accueil
Cet écran d'accueil vous propose quatre possibilités pour commencer à travailler:
Créer votre fonte à partir de rien
Vous devez simplement définir la taille moyenne en pixels des caractères de la fonte que vous voulez créer, ainsi que le code ASCII du premier et du dernier caractère que vous voulez dessiner. Vous pouvez vous permettre de donner des valeurs un peu approximatives parce que vous aurez la possibilité d'ajouter et de supprimer des caractères, ou encore de changer leur taille, plus tard.
Editer une fonte déjà présente sur un système de fichiers Yoctopuce
Cela vous permet de charger directement un fichier de fonte .yfm qui se trouverait sur un système de fichiers Yoctopuce, typiquement celui d'un écran. Après édition, vous pourrez sauvegarder la fonte modifiée au même endroit, raccourcissant ainsi les cycles design/tests.
Editer une fonte présente sur votre ordinateur
Si vous avez un fichier .yfm qui se trouve sur le disque de votre ordinateur, vous pouvez le charger directement.
Importer une fonte TrueType
L'éditeur peut importer une fonte TTF de votre ordinateur, la transformer en bitmap et en faire une fonte de taille arbitraire que vous pourrez utiliser avec vos écrans. Vous pouvez même choisir de ne tracer que les contours des caractères. Mais soyez attentifs à quelques détails importants:
- A cause de l'absence de niveaux de gris, la conversion d'un caractère vectoriel vers sa représentation bitmap crée des artefacts, en particulier sur les fontes de petite taille. Vous pouvez minimiser le phénomène en jouant sur le paramètre "Anti-anti-aliasing filter" mais il restera toujours quelques petits défauts que vous devrez corriger à la main.
- A cause d'une limitation technique de HTML, l'éditeur a besoin qu'un VirtualHub-V2 (version min 2.1.14003) tourne sur la machine locale, pour connaître la liste des fontes disponibles sur la machine.
- Beaucoup de fontes sont protégées par un copyright et d'autres droits qui varient d'un pays à l'autre. Ce n'est pas parce qu'une fonte est installée sur votre ordinateur que vous avez le droit de faire tout ce que vous voulez avec. Dans le doute, achetez une licence pour la fonte que vous convoitez ou importez des fontes open source, c'est particulièrement important si vous comptez en faire un usage public.
Une fois que vous avez choisi ce que vous voulez faire, cliquez simplement sur le bouton "Start editor" et vous accéderez à l'éditeur proprement dit.
L'interface principale
Ce dernier est divisé en quatre sections:
Character table
La table des caractères est une grille capable de contenir 256 cases numérotées de 0 à 255(0xff), par convention, chaque lettre a sa case attitrée, appelée code ASCII, mais vous êtes bien libre de dessiner ce que vous voudrez dans chacune de ces cases. Une case peut être vide ou contenir un bitmap définissant un caractère. Cliquez sur une case non vide pour éditer son contenu. Vous pouvez sélectionner plusieurs cases à la fois (Ctrl-click / Shift-click). Dans le haut de la table, se trouvent toute une série de boutons qui agissent, directement ou indirectement, sur l'ensemble des caractères de la fonte.
Retourne à l'écran d'accueil pour repartir avec une autre fonte. N'affecte pas l'historique des Undo, ni la mémorisation de la dernière sélection.
Diminue la taille des cases pour une meilleure vision d'ensemble. N'affecte pas la taille réelle des caractères.
Agrandit les cases pour mieux les voir. N'affecte pas la taille réelle des caractères.
Annule la dernière action/modification (undo).
Annule le dernier undo.
Crée un nouveau caractère vide dans la ou les cases sélectionnées, le contenu précédent est effacé.
Efface le contenu de la ou des cases sélectionnées.
Copie le contenu de la ou des cases sélectionnées.
Colle le contenu de la ou des cases précédemment copiées à partir de la première case sélectionnée. L'alignement se fait par rapport à ligne de base. La hauteur des caractères collés est adaptée à la taille de la fonte courante.
Monte d'un pixel la ligne de base de tous les caractères.
Descend d'un pixel la ligne de base de tous les caractères.
Ajoute une ligne de pixels en haut de tous les caractères.
Supprime la première ligne de pixels de tous les caractères.
Ajoute une ligne de pixels en bas de tous les caractères.
Supprime la dernière ligne de pixels de tous les caractères.
Editor
C'est l'éditeur proprement dit, qui vous permet de modifier un caractère sélectionné dans la table des caractères. Ici aussi vous avez à disposition toute une série d'outils sous la forme de boutons.
Rétréci la zone de travail en diminuant la taille des pixels, donne une meilleure vue d'ensemble sur les gros caractères.
Agrandit la zone de travail en augmentant la taille des pixels permettant ainsi de travailler plus facilement sur les petits caractères.
Colorie en noir tous les pixels se trouvant sous le curseur de la souris lorsque le bouton gauche est enfoncé.
Inverse la couleur des pixels se trouvant sous le curseur de la souris lorsque le bouton gauche est enfoncé.
Colorie en blanc tous les pixels se trouvant sous le curseur de la souris lorsque le bouton gauche est enfoncé.
Sélectionne une zone et en copie le contenu qui peut ensuite être déplacé. Clic droit pour annuler la zone.
Effectue une symétrie verticale du contenu de la sélection. Combiné avec le déplacement de la sélection, cette action simplifie la création de caractères symétriques comme le 'E' ou le 'O'.
Effectue une symétrie horizontale du contenu de la sélection. Combiné avec le déplacement de la sélection, cette action simplifie la création de caractères symétriques comme le 'M' ou le 'W'.
Colorie tous les pixels de la sélection en noir.
Colorie tous les pixels de la sélection en blanc.
Inverse la couleur de tous les pixels de la sélection.
Colle le contenu de la dernière sélection. Utile pour créer un caractère à partir d'une portion d'un autre. Par exemple faire un 'F' à partir d'un 'E' ou recopier des accents.
Ajoute une colonne de pixels à gauche.
Supprime la colonne de pixels la plus à gauche.
Ajoute une colonne de pixels à droite.
Supprime la colonne de pixels la plus à droite.
Preview
La partie preview vous donne un aperçu de ce que donnera votre fonte une fois affichée sur votre écran. Vous pouvez définir un exemple de texte à afficher et choisir dans une liste le format de l'écran que vous comptez utiliser. Si vous avez un écran Yoctopuce branché sur votre ordinateur et qu'un VirtualHub tourne sur cette machine, alors vous pourrez choisir cet écran dans la liste de formats disponibles et le texte d'exemple s'affichera aussi sur cet écran en temps réel, au fur et à mesure de vos modifications. Ici aussi, vous disposez de quelques boutons.
Rétrécit la zone d'émulation de l'écran.
Agrandit la zone d'émulation de l'écran.
Met l'émulation, et l'écran éventuellement sélectionné, en mode paysage.
Met l'émulation, et l'écran éventuellement sélectionné, en mode portrait.
Export
La partie Export permet de sauvegarder votre travail, vous pouvez déterminer un nom de fichier et éventuellement choisir un système de fichiers Yoctopuce parmi ceux détectés. Typiquement, vous aurez envie de choisir celui qui correspond à l'écran sur lequel vous comptez utiliser votre fonte.
Vous disposez de deux possibilités:
- Direct download pour sauver votre travail directement sur votre ordinateur, en raison de limitations techniques, la sauvegarde est traitée par le navigateur comme un simple téléchargement.
- Export: Le fichier est sauvé sur le système de fichier Yoctopuce que vous avez préalablement sélectionné.
Astuces
Si vous placez le curseur de votre souris sur la zone de prévisualisation de l'import TTF ou celle du panneau "Preview", vous obtiendrez un effet loupe qui vous permettre de traquer les pixels qui sortent du rang.
Joli effet de loupe bien pratique
Vous disposez d'une centaine d'undo et ils ne sont pas effacés lorsque vous retournez à l'écran d’accueil pour créer une nouvelle fonte. Ce qui signifie que vous vous pouvez travailler sur une fonte, retourner sur l'écran d’accueil pour charger/importer une nouvelle fonte, copier les caractères qui vous intéressent, faire des undo pour revenir à la fonte de départ et coller les caractères. Vous pouvez aussi utiliser cette astuce avec les sélections.
Limitations
Évidement, Bien que nettement supérieur à la version précédente, ce nouvel éditeur n'a pas la prétention d'être parfait. Il y a quelques limitations:
- Yocto-FontEditor ne fonctionnera qu'avec les navigateurs raisonnablement récents, typiquement postérieurs à 2018.
- L'importation des fontes TTF crée des artefacts qu'il vous faudra corriger manuellement.
- En raison des limitations du format .yfm, la création de fontes très italiques où chaque caractère empiète sur le suivant est un problème.
- Vous pouvez définir tous les caractères ASCII, mais en fait les caractères en dessous de 32 ne sont pas affichables.
- Si vous créez une fonte avec des caractères détourés, l'intérieur des caractères sera transparent. Si vous avez un écran couleur et que vous êtes un peu joueur, vous pouvez créer deux fontes: une pleine et une en contour. Puis afficher votre texte en fonte pleine avec la couleur de votre choix puis et enfin superposer le même texte avec la fonte en contour. C'est lent et fastidieux, mais faisable.
- Les fontes Yoctopuce étant des fontes bitmap, si vous voulez la même fonte disponible en plusieurs tailles, vous devrez définir autant de fontes que de tailles dont vous avez besoin.
- Firefox peut décider de remplacer le rendu d'une fonte qu'il juge un peu trop exotique par le rendu d'une fonte standard. L'idée est d'empêcher que l'on puisse vous identifier sur la base des fontes que votre machine peut afficher. En cas de doute, cherchez un message ressemblant à "Request for font Xxxx blocked at visibility level 2 (requires 3)" dans la console du navigateur (Shift-Ctrl-i). Vous pouvez choisir de désactiver cette protection de FireFox.
- Si vous avez un zoom d'affichage défini dans votre navigateur et/ou votre OS, la combinaison des deux zooms a des chances de donner une taille de pixels virtuels non-entière. Ce qui va créer des artefacts d'affichage trompeurs. Lorsque la partie éditeur n'est pas active et que le cas se produit, vous obtiendrez un avertissement. Pour remédier au problème, changez le niveau de zoom de votre navigateur (Ctrl-molette souris) jusqu'à tomber sur un nombre rond. Par exemple, si un zoom de 125% est défini dans votre OS vous pouvez ajuster votre navigateur à 80% ou 160% et les artefacts disparaîtront.
Ces artefacts sont virtuels, ils n'existent pas
Conclusion
On soupçonne que le premier éditeur de fontes n'était pas trop utilisé par les clients parce que personne ne s'est jamais plaint qu'il fallait le recompiler dans un environnement qui évoque Jurassic Park à beaucoup d'entre vous. On espère que celui-ci aura plus de succès et vous permettra de tirer le meilleur parti de vos écrans Yoctopuce.
Vous allez pouvoir vous faire plaisir...
Pour finir, vous l'aurez probablement déjà compris, Yocto-FontEditor est gratuit et vous trouverez même son code source sur GitHub.
