Les Carnets de Byfeel domotique , Objets connectés , DIY , Programmation, Nouvelles Technologies ….

tuto : MD_MAX72xx Font Editor ( personnaliser vos Notifications )

un article rapide , pour vous expliquer comment fonctionne le logiciel Font Editor fournis avec la bibliothèque MD_MAX72xx , afin de modifier ou personnaliser les caractères à afficher sur le Notifheure ou tout autre système d’affichage qui utilise les bibliothèques ( MD_MAX72xx ou MD_PAROLA ) .

Cet outil est très facile à prendre en main , et va vous permettre de personnaliser vos affichage en adaptant les polices ou en les modifiant complètement.

Le logiciel Font_Editor

Vous pouvez récupérer ce logiciel , directement sur le Github à cet endroit . Décompresser le fichier et double clic sur le fichier MDParolaFontEditor.html .

Interface font editor

Voila ce que vous obtenez.
L’entête de page , contient les boutons principaux de commande

Menu Boutons
Code Ascii en cours

Cette partie représente le code ASCII en cours d’édition. Dans cet exemple , il s’agit du code Ascii 32 correspondant à l’espace.
Les Boutons PREV et NEXT , permettent de faire défiler les codes ASCII dans un sens ou dans l’autre .

Affichage vu matrice

Cette Zone permet de définir la taille du caractére qui sera affiché. Par défaut , elle est réglé sur une largeur de 8 Pixel ( 8 Colonne ) , correspondant à la largeur d’une matrice.

Il est possible d’augmenter ou de réduire le nombre de colonne , en indiquant directement la largeur ou par le biais des boutons Plus ou Moins .

Le bouton FIT , permet d’ajuster automatiquement les colonnes au caractère définis . Par exemple , j’utilise que les Quatre premières colonnes , en cliquant sur FIT , les quatre dernières seront automatiquement enlevé de l’affichage.

Boutons Save , Clear et Delete

Les trois derniers boutons :
Save : Permet de sauvegarder l’édition du caractére en en cours .

Clear : Efface l’édition en cours , mais n’efface pas le caractère dans la table. Si clic , sur le caractère dans la table , il revient dans la fenêtre d’édition.

Delete ( deux options possible ) : Sur le bouton , je supprime le caractère en cours dans la table , sur la flèche je supprime tous les caractères du tableau ( je me retrouve avec un tableau vide ) .

La Zone d’edition :

Zone d’edition

Dans cette Zone , je vais pouvoir dessiner ou modifier le caractère . Ici j’ai fait une diagonale , afin de constater comment est codé le caractére. La zone Label , permet de donner un nom ( qui soit lisible dans les commentaires ) .
La zone juste en dessous donne la code à intégrer dans la bibliothèque , dans cet exemple :

8, 1, 2, 4, 8, 16, 32, 64, 128, // 32Diagonal

que faut il comprendre :

  • Le premier chiffre ( ici 8 ) , représente le nombre de colonne utilisé – la largeur du caractère et par conséquence le nombre de chiffre qui suit.
  • Les chiffres qui suivent représentent les 8 « poids binaire » pour allumer les leds sur cette colonne . Ces poids sont dans l’ordre ( 1 , 2, 4, 8, 16, 32, 64 et 128) qui correspond en binaire aux valeurs ( 0000 0001 , 0000 0010 , 0000 0100 , 0000 1000 , 0001 000 , 0010 0000 , 0100 0000 et 1000 0000 ).
  • //32 Diagonnal , est un commentaire pour nous indiquer qu’il s’agit du code ASCII 32 et que son nom est diagonnal . Donc à chaque espace envoyé , le caractére diagonal s’affichera à la place.

Exemple : Pour dessiner sur une colonne .avec une led allumé en alternance .

Il faudra allumer la led 1 , 3 , 5 et 7 ce qui donne :

1 + 4 + 16 + 64 ( 0101 0101 ) = 85 en décimal

La dernière partie , représente le tableau des 255 codes ASCII .

Code ASCII définis

La zone Import / Export , permet d’importer ou d’exporter un tableau de code.
Le champ Name , indique le nom du tableau des codes

La case Double HEIGT , permet d’afficher le tableau en réunissant les codes ASCII 0 à 127 avec les codes 128 à 255 . Qui sert pour les affichages format XL ( codé sur 16 pixels au lieu de 8 ) .

Par exemple pour le A ( le code 65 est relié au code 193 )

La zone de text en dessous sert a coller / Copier la bibliothèque.

Modifier une police existante

Pour illustrer cet article , je vais expliquer comment modifier la police incluse dans le script du Notifheure.

Pour cela je vais récupérer le fichier Parola_fonts_data.h ( ci dessous le contenu de ce fichier ) qui contient la définition des caractères étendus ASCII( qui prend en compte les accents ).

// Data file for UTF-8 example user defined fonts
#ifndef FONTS_DATA_H
#define FONTS_DATA_H

MD_MAX72XX::fontType_t ExtASCII[] PROGMEM =
{
  0,		// 0 - 'Unused'
  0,		// 1 - 'Unused'
  0,		// 2 - 'Unused'
  0,		// 3 - 'Unused'
  0,		// 4 - 'Unused'
  0,		// 5 - 'Unused'
  0,		// 6 - 'Unused'
  0,		// 7 - 'Unused'
  0,		// 8 - 'Unused'
  0,		// 9 - 'Unused'
  0,		// 10 - 'Unused'
  0,		// 11 - 'Unused'
  0,		// 12 - 'Unused'
  0,		// 13 - 'Unused'
  0,		// 14 - 'Unused'
  0,		// 15 - 'Unused'
  0,		// 16 - 'Unused'
  0,		// 17 - 'Unused'
  0,		// 18 - 'Unused'
  0,		// 19 - 'Unused'
  0,		// 20 - 'Unused'
  0,		// 21 - 'Unused'
  0,		// 22 - 'Unused'
  0,		// 23 - 'Unused'
  0,		// 24 - 'Unused'
  0,		// 25 - 'Unused'
  0,		// 26 - 'Unused'
  0,		// 27 - 'Unused'
  0,		// 28 - 'Unused'
  0,		// 29 - 'Unused'
  0,		// 30 - 'Unused'
  0,		// 31 - 'Unused'
  2, 0, 0,		// 32 - 'Space'
  1, 95,		// 33 - '!'
  3, 7, 0, 7,		// 34 - '"'
  5, 20, 127, 20, 127, 20,		// 35 - '#'
  5, 36, 42, 127, 42, 18,		// 36 - '$'
  5, 35, 19, 8, 100, 98,		// 37 - '%'
  5, 54, 73, 86, 32, 80,		// 38 - '&'
  2, 4, 3,		// 39
  3, 28, 34, 65,		// 40 - '('
  3, 65, 34, 28,		// 41 - ')'
  5, 42, 28, 127, 28, 42,		// 42 - '*'
  5, 8, 8, 62, 8, 8,		// 43 - '+'
  2, 128, 96,		// 44 - ','
  5, 8, 8, 8, 8, 8,		// 45 - '-'
  2, 96, 96,		// 46 - '.'
  5, 32, 16, 8, 4, 2,		// 47 - '/'
  5, 62, 81, 73, 69, 62,		// 48 - '0'
  3, 66, 127, 64,		// 49 - '1'
  5, 114, 73, 73, 73, 70,		// 50 - '2'
  5, 33, 65, 73, 77, 51,		// 51 - '3'
  5, 24, 20, 18, 127, 16,		// 52 - '4'
  5, 39, 69, 69, 69, 57,		// 53 - '5'
  5, 60, 74, 73, 73, 49,		// 54 - '6'
  5, 65, 33, 17, 9, 7,		// 55 - '7'
  5, 54, 73, 73, 73, 54,		// 56 - '8'
  5, 70, 73, 73, 41, 30,		// 57 - '9'
  1, 20,		// 58 - ':'
  2, 128, 104,		// 59 - ';'
  4, 8, 20, 34, 65,		// 60 - '<'
  5, 20, 20, 20, 20, 20,		// 61 - '='
  4, 65, 34, 20, 8,		// 62 - '>'
  5, 2, 1, 89, 9, 6,		// 63 - '?'
  5, 62, 65, 93, 89, 78,		// 64 - '@'
  5, 124, 18, 17, 18, 124,		// 65 - 'A'
  5, 127, 73, 73, 73, 54,		// 66 - 'B'
  5, 62, 65, 65, 65, 34,		// 67 - 'C'
  5, 127, 65, 65, 65, 62,		// 68 - 'D'
  5, 127, 73, 73, 73, 65,		// 69 - 'E'
  5, 127, 9, 9, 9, 1,		// 70 - 'F'
  5, 62, 65, 65, 81, 115,		// 71 - 'G'
  5, 127, 8, 8, 8, 127,		// 72 - 'H'
  3, 65, 127, 65,		// 73 - 'I'
  5, 32, 64, 65, 63, 1,		// 74 - 'J'
  5, 127, 8, 20, 34, 65,		// 75 - 'K'
  5, 127, 64, 64, 64, 64,		// 76 - 'L'
  5, 127, 2, 28, 2, 127,		// 77 - 'M'
  5, 127, 4, 8, 16, 127,		// 78 - 'N'
  5, 62, 65, 65, 65, 62,		// 79 - 'O'
  5, 127, 9, 9, 9, 6,		// 80 - 'P'
  5, 62, 65, 81, 33, 94,		// 81 - 'Q'
  5, 127, 9, 25, 41, 70,		// 82 - 'R'
  5, 38, 73, 73, 73, 50,		// 83 - 'S'
  5, 3, 1, 127, 1, 3,		// 84 - 'T'
  5, 63, 64, 64, 64, 63,		// 85 - 'U'
  5, 31, 32, 64, 32, 31,		// 86 - 'V'
  5, 63, 64, 56, 64, 63,		// 87 - 'W'
  5, 99, 20, 8, 20, 99,		// 88 - 'X'
  5, 3, 4, 120, 4, 3,		// 89 - 'Y'
  5, 97, 89, 73, 77, 67,		// 90 - 'Z'
  3, 127, 65, 65,		// 91 - '['
  5, 2, 4, 8, 16, 32,		// 92 - '\'
  3, 65, 65, 127,		// 93 - ']'
  5, 4, 2, 1, 2, 4,		// 94 - '^'
  5, 64, 64, 64, 64, 64,		// 95 - '_'
  2, 3, 4,		// 96 - '`''
  5, 32, 84, 84, 120, 64,		// 97 - 'a'
  5, 127, 40, 68, 68, 56,		// 98 - 'b'
  5, 56, 68, 68, 68, 40,		// 99 - 'c'
  5, 56, 68, 68, 40, 127,		// 100 - 'd'
  5, 56, 84, 84, 84, 24,		// 101 - 'e'
  4, 8, 126, 9, 2,		// 102 - 'f'
  5, 24, 164, 164, 156, 120,		// 103 - 'g'
  5, 127, 8, 4, 4, 120,		// 104 - 'h'
  3, 68, 125, 64,		// 105 - 'i'
  4, 64, 128, 128, 122,		// 106 - 'j'
  4, 127, 16, 40, 68,		// 107 - 'k'
  3, 65, 127, 64,		// 108 - 'l'
  5, 124, 4, 120, 4, 120,		// 109 - 'm'
  5, 124, 8, 4, 4, 120,		// 110 - 'n'
  5, 56, 68, 68, 68, 56,		// 111 - 'o'
  5, 252, 24, 36, 36, 24,		// 112 - 'p'
  5, 24, 36, 36, 24, 252,		// 113 - 'q'
  5, 124, 8, 4, 4, 8,		// 114 - 'r'
  5, 72, 84, 84, 84, 36,		// 115 - 's'
  4, 4, 63, 68, 36,		// 116 - 't'
  5, 60, 64, 64, 32, 124,		// 117 - 'u'
  5, 28, 32, 64, 32, 28,		// 118 - 'v'
  5, 60, 64, 48, 64, 60,		// 119 - 'w'
  5, 68, 40, 16, 40, 68,		// 120 - 'x'
  5, 76, 144, 144, 144, 124,		// 121 - 'y'
  5, 68, 100, 84, 76, 68,		// 122 - 'z'
  3, 8, 54, 65,		// 123 - '{'
  1, 119,		// 124 - '|'
  3, 65, 54, 8,		// 125 - '}'
  5, 2, 1, 2, 4, 2,		// 126 - '~'
  0,		// 127 - 'Unused'
  6, 20, 62, 85, 85, 65, 34,		// 128 - 'Euro sign'
  0,		// 129 - 'Not used'
  2, 128, 96,		// 130 - 'Single low 9 quotation mark'
  5, 192, 136, 126, 9, 3,		// 131 - 'f with hook'
  4, 128, 96, 128, 96,		// 132 - 'Single low 9 quotation mark'
  8, 96, 96, 0, 96, 96, 0, 96, 96,		// 133 - 'Horizontal ellipsis'
  3, 4, 126, 4,		// 134 - 'Dagger'
  3, 20, 126, 20,		// 135 - 'Double dagger'
  4, 2, 1, 1, 2,		// 136 - 'Modifier circumflex'
  7, 35, 19, 104, 100, 2, 97, 96,		// 137 - 'Per mille sign'
  5, 72, 85, 86, 85, 36,		// 138 - 'S with caron'
  3, 8, 20, 34,		// 139 - '< quotation'
  6, 62, 65, 65, 127, 73, 73,		// 140 - 'OE'
  0,		// 141 - 'Not used'
  5, 68, 101, 86, 77, 68,		// 142 - 'z with caron'
  0,		// 143 - 'Not used'
  0,		// 144 - 'Not used'
  2, 3, 4,		// 145 - 'Left single quote mark'
  2, 4, 3,		// 146 - 'Right single quote mark'
  4, 3, 4, 3, 4,		// 147 - 'Left double quote marks'
  4, 4, 3, 4, 3,		// 148 - 'Right double quote marks'
  4, 0, 24, 60, 24,		// 149 - 'Bullet Point'
  3, 8, 8, 8,		// 150 - 'En dash'
  5, 8, 8, 8, 8, 8,		// 151 - 'Em dash'
  4, 2, 1, 2, 1,		// 152 - 'Small ~'
  7, 1, 15, 1, 0, 15, 2, 15,		// 153 - 'TM'
  5, 72, 85, 86, 85, 36,		// 154 - 's with caron'
  3, 34, 20, 8,		// 155 - '> quotation'
  7, 56, 68, 68, 124, 84, 84, 8,		// 156 - 'oe'
  0,		// 157 - 'Not used'
  5, 68, 101, 86, 77, 68,		// 158 - 'z with caron'
  5, 12, 17, 96, 17, 12,		// 159 - 'Y diaresis'
  2, 0, 0,		// 160 - 'Non-breaking space'
  1, 125,		// 161 - 'Inverted !'
  5, 60, 36, 126, 36, 36,		// 162 - 'Cent sign'
  5, 72, 126, 73, 65, 102,		// 163 - 'Pound sign'
  5, 34, 28, 20, 28, 34,		// 164 - 'Currency sign'
  5, 43, 47, 252, 47, 43,		// 165 - 'Yen'
  1, 119,		// 166 - '|'
  4, 102, 137, 149, 106,		// 167 - 'Section sign'
  3, 1, 0, 1,		// 168 - 'Spacing diaresis'
  7, 62, 65, 93, 85, 85, 65, 62,		// 169 - 'Copyright'
  3, 13, 13, 15,		// 170 - 'Feminine Ordinal Ind.'
  5, 8, 20, 42, 20, 34,		// 171 - '<<'
  5, 8, 8, 8, 8, 56,		// 172 - 'Not sign'
  0,		// 173 - 'Soft Hyphen'
  7, 62, 65, 127, 75, 117, 65, 62,		// 174 - 'Registered Trademark'
  5, 1, 1, 1, 1, 1,		// 175 - 'Spacing Macron Overline'
  3, 2, 5, 2,		// 176 - 'Degree'
  5, 68, 68, 95, 68, 68,		// 177 - '+/-'
  3, 25, 21, 19,		// 178 - 'Superscript 2'
  3, 17, 21, 31,		// 179 - 'Superscript 3'
  2, 2, 1,		// 180 - 'Acute accent'
  4, 252, 64, 64, 60,		// 181 - 'micro (mu)'
  5, 6, 9, 127, 1, 127,		// 182 - 'Paragraph Mark'
  2, 24, 24,		// 183 - 'Middle Dot'
  3, 128, 128, 96,		// 184 - 'Spacing sedilla'
  2, 2, 31,		// 185 - 'Superscript 1'
  4, 6, 9, 9, 6,		// 186 - 'Masculine Ordinal Ind.'
  5, 34, 20, 42, 20, 8,		// 187 - '>>'
  6, 64, 47, 16, 40, 52, 250,		// 188 - '1/4'
  6, 64, 47, 16, 200, 172, 186,		// 189 - '1/2'
  6, 85, 53, 31, 40, 52, 250,		// 190 - '3/4'
  5, 48, 72, 77, 64, 32,		// 191 - 'Inverted ?'
  5, 120, 20, 21, 22, 120,		// 192 - 'A grave'
  5, 120, 22, 21, 20, 120,		// 193 - 'A acute'
  5, 122, 21, 21, 21, 122,		// 194 - 'A circumflex'
  5, 120, 22, 21, 22, 121,		// 195 - 'A tilde'
  5, 120, 21, 20, 21, 120,		// 196 - 'A diaresis'
  5, 120, 20, 21, 20, 120,		// 197 - 'A ring above'
  6, 124, 10, 9, 127, 73, 73,		// 198 - 'AE'
  5, 30, 161, 161, 97, 18,		// 199 - 'C sedilla'
  4, 124, 85, 86, 68,		// 200 - 'E grave'
  4, 124, 86, 85, 68,		// 201 - 'E acute'
  4, 126, 85, 85, 70,		// 202 - 'E circumflex'
  4, 124, 85, 84, 69,		// 203 - 'E diaresis'
  3, 68, 125, 70,		// 204 - 'I grave'
  3, 68, 126, 69,		// 205 - 'I acute'
  3, 70, 125, 70,		// 206 - 'I circumplex'
  3, 69, 124, 69,		// 207 - 'I diaresis'
  6, 4, 127, 69, 65, 65, 62,		// 208 - 'Capital Eth'
  5, 124, 10, 17, 34, 125,		// 209 - 'N tilde'
  5, 56, 68, 69, 70, 56,		// 210 - 'O grave'
  5, 56, 70, 69, 68, 56,		// 211 - 'O acute'
  5, 58, 69, 69, 69, 58,		// 212 - 'O circumflex'
  5, 56, 70, 69, 70, 57,		// 213 - 'O tilde'
  5, 56, 69, 68, 69, 56,		// 214 - 'O diaresis'
  5, 34, 20, 8, 20, 34,		// 215 - 'Multiplication sign'
  7, 64, 62, 81, 73, 69, 62, 1,		// 216 - 'O slashed'
  5, 60, 65, 66, 64, 60,		// 217 - 'U grave'
  5, 60, 64, 66, 65, 60,		// 218 - 'U acute'
  5, 58, 65, 65, 65, 58,		// 219 - 'U circumflex'
  5, 60, 65, 64, 65, 60,		// 220 - 'U diaresis'
  5, 12, 16, 98, 17, 12,		// 221 - 'Y acute'
  4, 127, 18, 18, 12,		// 222 - 'Capital thorn'
  4, 254, 37, 37, 26,		// 223 - 'Small letter sharp S'
  5, 32, 84, 85, 122, 64,		// 224 - 'a grave'
  5, 32, 84, 86, 121, 64,		// 225 - 'a acute'
  5, 34, 85, 85, 121, 66,		// 226 - 'a circumflex'
  5, 32, 86, 85, 122, 65,		// 227 - 'a tilde'
  5, 32, 85, 84, 121, 64,		// 228 - 'a diaresis'
  5, 32, 84, 85, 120, 64,		// 229 - 'a ring above'
  7, 32, 84, 84, 124, 84, 84, 8,		// 230 - 'ae'
  5, 24, 36, 164, 228, 40,		// 231 - 'c sedilla'
  5, 56, 84, 85, 86, 88,		// 232 - 'e grave'
  5, 56, 84, 86, 85, 88,		// 233 - 'e acute'
  5, 58, 85, 85, 85, 90,		// 234 - 'e circumflex'
  5, 56, 85, 84, 85, 88,		// 235 - 'e diaresis'
  3, 68, 125, 66,		// 236 - 'i grave'
  3, 68, 126, 65,		// 237 - 'i acute'
  3, 70, 125, 66,		// 238 - 'i circumflex'
  3, 69, 124, 65,		// 239 - 'i diaresis'
  4, 48, 75, 74, 61,		// 240 - 'Small eth'
  4, 122, 9, 10, 113,		// 241 - 'n tilde'
  5, 56, 68, 69, 70, 56,		// 242 - 'o grave'
  5, 56, 70, 69, 68, 56,		// 243 - 'o acute'
  5, 58, 69, 69, 69, 58,		// 244 - 'o circumflex'
  5, 56, 70, 69, 70, 57,		// 245 - 'o tilde'
  5, 56, 69, 68, 69, 56,		// 246 - 'o diaresis'
  5, 8, 8, 42, 8, 8,		// 247 - 'Division sign'
  6, 64, 56, 84, 76, 68, 58,		// 248 - 'o slashed'
  5, 60, 65, 66, 32, 124,		// 249 - 'u grave'
  5, 60, 64, 66, 33, 124,		// 250 - 'u acute'
  5, 58, 65, 65, 33, 122,		// 251 - 'u circumflex'
  5, 60, 65, 64, 33, 124,		// 252 - 'u diaresis'
  4, 156, 162, 161, 124,		// 253 - 'y acute'
  4, 252, 72, 72, 48,		// 254 - 'small thorn'
  4, 157, 160, 160, 125,		// 255 - 'y diaresis'
};

#endif

Il suffit de copier tous le tableau , qui commence à

MD_MAX72XX::fontType_t ExtASCII[] PROGMEM =
{

et se termine à la dernière accolade } . Puis je clic sur Import . Mon tableau des codes ASCII apparait.

Dans cet exemple , je voudrai modifier le caractére & ( code ascii 38 ) , il suffit de cliquer dessus , pour l’afficher dans la Zone d’édition.

Dans la Zone d’edition , le code Ascii 38 est bien renseigner et indique qu’il correspond bien au &.

Ce caractère est codé sur 5 colonnes.

Pour appliquer des modifications , il suffit de cliquer sur les leds à modifier pour les allumer ou les eteindres.

Par exemple voici une modification que j’ai apporté , puis clic sur SAVE , afin de l’intégrer dans mon tableau . l’aperçu des codes à été modifié .

perso

Il ne me reste plus qu’a cliquer sur Export , pour générer un nouveau tableau :

Export du tableau

On voit bien dans la zone texte que le code 38 à été modifié , ainsi que l’aperçu dans le tableau.
Il ne reste plus qu’a copier le nouveau tableau et à le coller dans le fichier Parola_fonts_data.h du notifheure.

Lors de l’affichage de vos notification , le caractère modifié sera remplacé par votre composition.

A vous de jouer , pour modifier et personnaliser vos notifications sur votre notifheure ou tout autre projet utilisant ces bibliothèques .