Avec la bibliothèque HCScreen, nous envisageons de plus en plus la possibilité de construire un microcontrôleur à commande pratique avec l'ESP32 et un écran TFT.
Nous obtenons un grand nombre de nouvelles possibilités grâce à l'utilisation d'icônes. Premièrement, les icônes sont plus claires et faciles à associer à une certaine fonction, deuxièmement, nous pouvons maintenant également utiliser les options X-Y du joystick.
Nouvelles fonctions dans la bibliothèque:
initIconGrid (x, y, colonnes, lignes)
Aux positions x et y, une grille avec des colonnes et des lignes est créée dans laquelle des icônes de 31x31 pixels peuvent être affichées. La fonction vérifie si les limites des paramètres de l'affichage sont dépassées et corrige les paramètres en conséquence.
initIconGrid ()
Cette forme simplifiée de la fonction initialise une grille qui utilise tout l'écran (pour 160x128 ce sont des icônes 5 x 4).
showIcon (index, icône *)
L'index est le numéro de la cellule de la grille dans laquelle l'icône doit être affichée. La numérotation commence par 0 et s'effectue ligne par ligne, c'est-à-dire avec 4 x 5 première ligne = 0, 1, 2, 3, 4 deuxième ligne = 5, 6, 7, 8, 9 etc.
* L'icône est le pointeur vers une structure de type HCIcon dans la mémoire du programme.
showIcon (icône x, y, *)
Une autre variante pour définir une icône, ici la colonne (x) et la ligne (y) sont données où l'icône doit être placée. * L'icône est à nouveau le pointeur vers une structure HCIcon.
setGridColor (couleur de surbrillance, couleur d'arrière-plan)
Avec cette fonction, la couleur de l'arrière-plan de la grille et la couleur avec laquelle une icône sélectionnée doit être marquée peuvent être définies. Les valeurs de couleur sont transférées au format 3 octets (rouge, vert, bleu) comme d'habitude sur les pages Web. Donc par exemple 0xFF0000 = rouge, 0x00FF00 = vert ou 0x0000FF = bleu. Les couleurs sont ensuite automatiquement converties au format 16 bits pour l'affichage. Pour marquer une icône sélectionnée, un carré est tracé autour de l'icône dans la couleur de marquage.
Icônes:
Un plus grand nombre d'icônes communes sont déjà définies dans le sous-répertoire Icons, qui peut facilement être inclus dans l'esquisse. Mais il est également très facile de créer votre propre icône. Nous avons besoin du programme d'édition d'images GIMP. En sortie, nous avons besoin d'une image que nous pouvons redimensionner à 31 x 31 pixels. Ensuite, nous exportons l'image et choisissons le format source, nous choisissons le code source c (*. C) ou l'en-tête du code source c (*. H) en ajoutant .c ou .h comme extension au nom du fichier. Après avoir cliqué sur le bouton Exporter, une boîte de dialogue apparaît dans laquelle nous saisissons le nom de l'icône (par exemple icon_senden). Aucune des cases à cocher ne doit avoir de coche! Un fichier avec l'extension .c ou .h est maintenant créé dans le dossier cible spécifié. Nous ouvrons ce fichier avec un éditeur de texte. Cela devrait commencer quelque chose comme ceci:
/ * Dump d'image C-Source GIMP RGB (icon_senden.c) * /
const statique struct {
largeur int non signée;
hauteur int non signée;
unsigned int bytes_per_pixel; / * 2: RGB16, 3: RGB, 4: RGBA * /
caractère non signé pixel_data [1024 * 386 * 3 + 1];
} icon_senden = {
31, 31, 3,
"\274\273\267\272\271......
Nous devons maintenant remplacer la partie indiquée en rouge par le type de structure HCIcon, qui a été défini dans la bibliothèque.
const statique HCIcon icon_senden = {
31, 31, 3,
"\274\273\267\272\271......
Si nous incluons maintenant ce fichier dans l'esquisse, nous pouvons utiliser l'adresse de la structure icon_senden dans la fonction showIcon.
Important! Les fichiers d'icônes doivent toujours être importés dans HCScreen.h.
Exemple de programme:
Une esquisse portant le nom Esp32_Control_Center_Icon doit être disponible dans les exemples de programmes de la bibliothèque. Nous ouvrons ce croquis dans l'IDE Arduino et le chargeons sur l'ESP32, qui était connecté à l'écran TFT et au module joystick selon les informations dans le commentaire.
Les 20 icônes doivent être affichées à l'écran comme indiqué ici sur l'image. Avec le joystick, nous pouvons maintenant sélectionner une icône et appuyer sur le bouton du joystick. Le numéro de l'icône sur laquelle vous avez cliqué s'affiche sur le moniteur série. Dans l'exemple de programme, deux icônes sont affectées à une fonction. Si vous cliquez sur le dossier d'icônes, le contenu d'une carte SD s'affiche dans le lecteur de carte. Si vous cliquez sur l'icône de configuration, un exemple de formulaire avec deux icônes s'affiche en bas à gauche.
La bibliothèque peut être deBibliothèque HCScreenpeut être téléchargé. Dans l'IDE Arduino, importez simplement le fichier ZIP à partir du téléchargement dans le gestionnaire de bibliothèque.
Découvrez les autres articles sur HCScreen dans ce blog. Vous y trouverez également des informations détaillées sur le matériel utilisé.
