BluBerriSix - un didacticiel TFT TouchScreen / Arduino : 12 étapes (avec photos)

2024 Auteur: John Day | [email protected]. Dernière modifié: 2024-01-30 09:07

2019 est le 20e anniversaire du RIM Blackberry 850 ! Cette petite invention canadienne a changé la façon dont le monde communique. C'est révolu depuis longtemps, mais son héritage continue !

Dans cette instructable, vous apprendrez à utiliser le bouclier d'affichage TFT 2,4 MCUfriend.com pour le Uno/Mega. Vous apprendrez comment afficher des objets graphiques et du texte et comment recevoir des touches et agir sur les événements tactiles. L'écran est très similaire à Adafruit et à d'autres écrans/écrans TFT. Donc, si vous êtes ici, restez dans les parages pour le spectacle.

Nous allons créer une version simplifiée de l'application 2 de mon sketch bluBerriSIX.

Commençons!

Étape 1: BluBerriSIX - Présentation

L'application bluBerriSIX est un projet TFT à six fonctions.

Il comprend:

Une lampe de poche

Une application Saucy '7' (comme une boule magique '8')

Une calculatrice

Une application de mesure de distance utilisant le capteur de distance à ultrasons SR-04

Une application de température et d'humidité qui enregistre également des données en temps réel jusqu'à 1,5 km avec l'émetteur-récepteur HC-12

Une application de textos utilisant HC-12.

Ce projet a pris 1100 lignes de code. Nous allons construire une version considérablement plus simple qui démontre toujours les concepts d'affichage TFT et de détection tactile.

Étape 2: Que faut-il ?

- Un Arduino Uno ou Mega 2560

- Un shield MCUfriend 2.4 TFT

Les bibliothèques suivantes:

- Bibliothèque Adafruit_GFX

- Bibliothèque d'écrans tactiles Adafruit

- Bibliothèque MCUFRIEND_kbv

Ces bibliothèques peuvent être installées avec le gestionnaire de bibliothèque dans l'IDE Arduino.

Pour charger une bibliothèque, accédez à l'option de menu Esquisse -> Inclure la bibliothèque -> Gérer les bibliothèques….

Dans le champ 'filtrez votre recherche…', saisissez les premiers caractères du nom de la bibliothèque, puis sélectionnez et installez la bibliothèque appropriée. Une fois terminé, revenez en arrière de cet écran.

Lors du montage du blindage TFT sur l'Uno/Mega, SOYEZ TRÈS PRUDENT pour vous assurer que vous alignez correctement les broches. J'ai désaligné mon premier bouclier et je l'ai frit. J'ai passé deux semaines de frustration croissante à essayer de trouver les bonnes bibliothèques avant de réaliser que l'écran était mort. FAIS ATTENTION

Étape 3: Notre projet

Nous allons construire une version plus simple du sketch bluBerriSIX.

Il aura, - un écran de démarrage

- un écran de menu principal avec deux boutons

- une application Saucy 7

- une application de saisie de texte simplifiée

Vous pourrez également revenir au menu principal en appuyant sur l'icône « Accueil » en bas à gauche de cet écran particulier. Si vous n'avez pas une telle icône, vous n'aurez qu'à définir une région « d'accueil » de votre écran. Vous apprendrez à déterminer les régions tactiles de l'écran dans ce didacticiel.

Bien qu'il s'agisse d'un projet simplifié, il est quand même assez long. Je fournirai des versions des croquis Arduino à chaque étape majeure afin que vous puissiez les télécharger si vous le souhaitez.

Étape 4: code d'en-tête, variables globales, configuration de l'écran

L'ensemble du projet est très documenté. Mais les détails suivent.

Démarrez un nouveau projet Arduino et appelez-le « démo tft » ou tout autre nom que vous souhaitez.

Le premier panneau de code ci-dessus nous montre la définition de variables globales. Nous ajoutons également dans les bibliothèques que nous devrons utiliser à la fois pour la fonction d'affichage de l'écran et la détection tactile de l'écran.

Nous définissons également les broches analogiques en référence à leurs objectifs spécifiques à l'écran.

Nous définissons l'objet tft (affichage) et l'objet ts (toucher) comme références pour leurs fonctions respectives.

Nous définissons des constantes de couleur 16 bits pour faciliter le rendu des couleurs de l'écran et du texte et des objets graphiques. Vous remarquerez qu'il existe une URL vers un site Web doté d'un sélecteur de couleurs et d'un convertisseur pour convertir les couleurs visibles en leurs valeurs hexadécimales 16 bits. C'est un outil très utile.

Dans le deuxième panneau de code, nous définissons les variables globales pour nos besoins spécifiques à l'application.

Les chaînes et tableaux cString, letter et letterX et letterY sont utilisés pour a) afficher les lettres sur les boutons de l'application de saisie de texte et b) faire correspondre les coordonnées x et y d'un toucher avec les coordonnées x et y de chaque lettre respective sur le clavier. Plus d'informations à ce sujet lorsque nous arriverons à cette section du croquis.

funcX, funcY et func sont des tableaux qui fonctionnent pour déterminer quel bouton d'application a été enfoncé sur l'écran du menu principal, puis utilisent ces informations pour lancer l'application respective.

lastTouch et tThresh sont utilisés dans les méthodes tactiles pour s'assurer que nous n'obtenons pas plusieurs touches en appuyant trop longtemps sur l'écran. Plus à ce sujet plus tard.

La variable mode contrôlera quel écran est affiché et la variable tMode contrôlera quelles méthodes tactiles sont utilisées à un moment donné.

Dans le bloc setup(), nous ouvrons un canal Serial si nous voulons utiliser les commandes Serial.println() pour le débogage. Vous n'avez pas besoin de cette ligne si vous ne souhaitez pas effectuer de débogage Serial Monitor.

Les quatre lignes suivantes ne sont que le code de configuration de l'objet tft.

Ensuite, nous définissons l'orientation de l'écran en mode Portrait.

La commande randomSeed() démarre simplement le générateur de nombres aléatoires pour une utilisation ultérieure par l'application Saucy 7.

Enfin, nous appelons la méthode de l'écran de démarrage.

Étape 5: Création de l'écran de démarrage et compréhension de l'affichage par rapport à la cartographie tactile

Nous allons maintenant commencer à construire l'écran de démarrage.

Mais d'abord, veuillez regarder l'image pour l'écran et la cartographie tactile. Notez que les origines sont dans des endroits différents. Pour l'affichage, l'origine (0, 0) est en haut à gauche de l'écran (lorsque le bouton RESET est en haut) et grandit de gauche à droite et de haut en bas.

Pour la détection tactile, l'origine se trouve dans le coin inférieur gauche de l'écran et s'étend de gauche à droite et de bas en haut.

Ainsi, les CARTES D'AFFICHAGE ET TACTILE SONT DÉFINIES SÉPARÉMENT et ont des résolutions différentes. L'écran a une résolution de 240 par 320 et le toucher a une résolution beaucoup plus élevée comme vous le verrez bientôt.

Allez dans une zone de votre croquis sous la méthode loop(){} et nous entrerons le code de la méthode splash().

Nous commençons par exécuter une commande fillScreen() pour remplir l'écran avec la couleur BLANCHE que nous avons définie dans le code d'en-tête.

Ensuite, nous définissons la taille du texte sur « 5 ». Il s'agit d'une taille de texte de base relativement importante. Nous définissons la position x et y pour le curseur de texte et nous définissons la couleur du texte. Enfin, la commande print("TFT") dessine en fait le texte bleu de taille '5' à la position spécifiée.

Au fur et à mesure que vous augmentez la taille du texte, vous verrez que les caractères deviennent de plus en plus gros. Donc, aller au-dessus de 5 n'est probablement pas utile. À la fin de ce didacticiel, je vais vous montrer comment utiliser des polices bitmap pour obtenir un texte plus agréable dans vos applications. Le compromis est que l'utilisation de jeux de polices bitmap prend beaucoup de mémoire dans votre Arduino, ce qui limitera la taille de vos croquis

Nous répétons des commandes similaires pour les deux autres éléments de texte sur l'écran de démarrage.

Enfin, nous attendons 2,5 secondes pour donner à l'utilisateur la possibilité de lire le contenu de l'écran avant que l'application ne passe à l'écran du menu principal.

Allez-y et téléchargez ce croquis sur votre Arduino. Il devrait afficher l'écran de démarrage.

Étape 6: Création d'un outil de diagnostic de mappage tactile

La méthode showTouch() est très utile pour vous aider à obtenir les coordonnées tactiles des différentes parties de l'écran. Vous devrez le faire pour définir les zones tactiles de vos boutons.

Allez-y et entrez cette méthode sous votre méthode splash() effectuée précédemment.

Voilà comment cela fonctionne.

L'instruction if détermine si un temps suffisant s'est écoulé depuis le dernier contact. Il prend l'heure système actuelle en millis() et soustrait l'heure lastTouch. S'il est supérieur à la valeur tThresh (200 millisecondes), il accepte le toucher. Sinon, il ignorera les événements multi-touch accidentels.

Ensuite, la commande getpoint() obtient les coordonnées x, y et z du toucher. La coordonnée z est une mesure de la pression tactile.

Si la pression est comprise entre les constantes max et min que nous avons définies dans l'en-tête de l'esquisse, la méthode va d'abord remettre les broches YP et XM sur OUTPUT, mettant l'écran en mode DISPLAY.

Ensuite, il dessinera un rectangle blanc pour effacer toutes les coordonnées qui auraient pu être affichées précédemment.

Le croquis définit ensuite la police à la taille 2, couleur noire et affiche les coordonnées x (p.x) et y (p.y) à l'écran. Vous pouvez ensuite noter ces emplacements pour vous aider à programmer vos zones tactiles pour vos propres croquis.

L'instruction if au bas de la méthode vérifie si le bouton « Accueil » à l'écran a été enfoncé. les opérateurs '<=' permettent la largeur et la hauteur du bouton Accueil. Les coordonnées spécifiées sont les coordonnées x-centre et y-centre du bouton Accueil. S'il est enfoncé, le mode est réglé sur 0, ce qui signifiera éventuellement « Aller à l'écran du menu principal ». Plus à ce sujet plus tard.

Enfin, nous mettons à jour lastTouch à l'heure système actuelle millis () pour être prêt pour un événement tactile ultérieur.

Veuillez maintenant aller dans le bloc loop() et ajouter la ligne showTouch();

À ce stade, téléchargez votre croquis et essayez-le. Il dessinera l'écran de démarrage et si vous commencez à toucher l'écran, les coordonnées TOUCH x et y seront affichées à l'écran.

Avant de poursuivre, revoyons deux lignes de code importantes:

pinMode(YP, SORTIE); //restauration des broches de contrôle TFT

pinMode (XM, OUTPUT); // pour l'affichage après détection d'un toucher

Chaque fois que vous souhaitez afficher quelque chose à l'écran, vous DEVEZ exécuter ces deux commandes pour faire passer l'écran du mode TACTILE au mode AFFICHAGE. Sinon, vos commandes d'affichage ne fonctionneront pas.

Bien joué jusqu'ici ! Prendre une pause!

Étape 7: Créer l'écran du menu principal

Nous allons maintenant créer notre écran de menu principal avec deux boutons sur lesquels vous pouvez appuyer pour activer chaque application. La méthode s'appelle menuScreen().

On commence par mettre l'écran en mode AFFICHAGE.

Ensuite, nous définissons la taille, la couleur et la position de la police et imprimons le texte du "Menu principal".

Nous dessinons maintenant deux rectangles qui sont les boutons.

Toutes les commandes graphiques ont une structure similaire:

graphicShape(coordonnée x, coordonnée y, largeur, hauteur, COULEUR)

- coordonnée x - en haut à gauche pour les objets rectangulaires, centre pour les cercles

- coordonnée y - en haut à gauche pour les objets rectangulaires, centre pour les cercles

- largeur - largeur de l'objet en pixels

- COULEUR - une constante de couleur que nous avons définie dans l'en-tête

Enfin, nous appelons deux méthodes pour dessiner l'icône Saucy 7 et l'icône de saisie de texte QWERTY. Ce sont des méthodes distinctes.

La méthode draw7icon(0) prend un paramètre entier qui est le décalage y pour dessiner la balle. Nous faisons cela pour pouvoir utiliser la même méthode pour dessiner la balle sur l'écran du menu ET sur l'écran de l'application Saucy 7. Le décalage nous permet simplement d'ajuster par programmation la coordonnée y de la balle vers le haut ou vers le bas.

La méthode draw7Ball(0) est appelée depuis draw7Icon(0). Il prend également un paramètre qui nous permet d'ajuster la position verticale de la balle selon que nous la dessinons sur l'écran du menu ou sur l'écran de l'application.

La commande fillCircle() prend 4 arguments.

- x coordonnée du centre du cercle

- coordonnée y du centre du cercle

- rayon du cercle (en pixels)

- COULEUR - une constante de couleur que nous avons définie dans l'en-tête

Enfin, la méthode drawTextIcon() est appelée pour dessiner l'icône de l'application de saisie de texte.

Vous pouvez essayer d'exécuter la méthode en commentant la méthode splash() dans setup() et en ajoutant menuScreen().

Téléchargez le croquis sur votre Arduino et essayez-le !

Étape 8: L'application Saucy 7 et les méthodes du menu principal

La méthode sevenScreen() dessinera l'écran de l'application, y compris dessiner la balle puis afficher les instructions.

La méthode sevenInstr() affiche les instructions et efface l'écran des réponses précédentes. Il dessine également le bouton « Réponse ».

La méthode show7Response() gère l'effacement de la méthode de réponse précédente de l'écran, l'affichage d'un message animé « penser… », puis l'affichage du message de réponse choisi au hasard.

read7Touch() est la méthode qui attend qu'un événement tactile produise le message généré de manière aléatoire. Le code tactile est très similaire à la méthode de diagnostic showTouch() décrite précédemment. Pour plus de simplicité, la méthode acceptera une touche n'importe où sur l'écran en tant que touche « Répondre ».

En haut de la méthode, nous définissons un tableau response de chaînes qui sont les messages pouvant être générés à partir d'un événement tactile.

Si vous appuyez sur le bouton Accueil, l'application sera fermée et l'écran du menu principal sera renvoyé. Sinon, la méthode générera un nombre aléatoire entre 0 et 7 (exclusif) et passera le message texte correspondant du tableau response à la méthode show7Response().

Enfin, la méthode backToMenu() surveille une pression sur le bouton Accueil et rend le contrôle à l'écran du menu principal.

La méthode readMenuTouch() surveille un événement tactile lorsque vous êtes sur l'écran du menu principal. Lorsqu'un toucher est détecté, il transmet les coordonnées x et y à la méthode getFunc(x, y) qui recherche dans les tableaux funcX et funcY pour correspondre aux coordonnées x et y du toucher. Il renvoie ensuite le nombre du tableau func pour l'application qui a été sélectionnée. '1' est Saucy 7 et '2' est l'application de saisie de texte. Il définit ensuite le mode sur la valeur de cette application afin que l'application soit exécutée.

Étape 9: Le bloc Loop()

Nous allons maintenant commencer à construire le code du bloc loop() pour gérer l'affichage de l'écran approprié, puis l'appel des méthodes tactiles appropriées en fonction de l'option actuellement sélectionnée.

La méthode loop() se compose de deux structures switch().

La structure du commutateur supérieur gère l'affichage de l'écran approprié en fonction de l'option sélectionnée. Il définit également la valeur tMode pour la méthode tactile appropriée à exécuter pour l'option actuellement sélectionnée. Enfin, il définit la valeur du mode sur 9 afin que l'écran d'affichage ne se redessine pas sans cesse.

La structure du commutateur inférieur contrôle les méthodes tactiles exécutées en fonction de l'option d'application sélectionnée par l'utilisateur, représentée par la valeur de tMode.

Chargez le croquis dans votre Arduino et vous devriez pouvoir sélectionner et utiliser l'application Saucy 7.

Vous avez beaucoup travaillé ! Prendre une pause:-)

Étape 10: L'application de saisie de texte - Nous sommes dans la dernière ligne droite

Nous allons maintenant incorporer les méthodes de l'application de saisie de texte.

makeKbd() dessine le clavier à l'écran.

Il dessine six rectangles arrondis remplis, puis superpose la lettre appropriée sur chaque "clé" en obtenant la lettre de la chaîne cString qu'il imprime à l'écran sur la clé. Notez que l'avant-dernier paramètre d'une commande fillRoundedRect() est le rayon de chaque coin en pixels. Plus cette valeur est élevée, plus les coins sont arrondis.

La méthode readKbdTouch() fonctionne de manière similaire aux autres méthodes de détection tactile.

Si un toucher est détecté qui n'est PAS sur le bouton Accueil, il transmet les coordonnées x et y à la méthode curChar(x, y) qui renvoie le caractère qui correspond à cet emplacement x et y sur l'écran. Le message qui a été « tapé » est ensuite affiché à l'écran en utilisant la méthode « displayMsg(theChar).

La méthode curChar(x, y) recherche dans les tableaux letterX et letterY pour essayer de trouver une correspondance proche des coordonnées x et y transmises par readKbdTouch(). S'il trouve une correspondance, il renvoie la lettre correspondante à la méthode readKbdTouch. Notez que nous initialisons la variable theChar à 32 qui est le code ASCII pour un caractère espace, ' '. Nous faisons cela pour que si l'utilisateur touche une zone éloignée du clavier, il n'affiche pas les caractères non disponibles.

La méthode displayMsg(theChar) prend le caractère renvoyé par curChar(x, y) et l'ajoute à la chaîne msg. Il affiche alors le message à l'écran.

Enfin, nous mettrons à jour le bloc loop() pour accepter la sélection de l'application de saisie de texte.

Téléchargez le sketch tftDemo sur votre Arduino et vous devriez pouvoir utiliser l'application terminée.

Toutes nos félicitations! vous avez créé une application à écran tactile TFT ! Prenez le reste de la journée !

Étape 11: Gettin' Slick ! - Utilisation des polices Bitmap Adafruit dans votre croquis

Le jeu de polices tft standard est correct. Mais c'est mieux si nous pouvons utiliser des polices bitmap appropriées dans nos croquis TFT.

L'inconvénient est que le chargement des jeux de polices dans la mémoire Arduino prend beaucoup de place. En fait, il est très facile de remplir votre croquis avec tellement de polices qu'il ne se chargera pas dans l'Arduino.

Les polices sont disponibles dans le dossier de la bibliothèque Adafruit_GFX que vous avez déjà installé pour ce projet. Un excellent tutoriel sur l'utilisation des polices se trouve sur ce site.

Dans la zone En-tête de votre croquis, ajoutez la référence de police pour la police que vous souhaitez utiliser. Nous utiliserons la police FreeSerifBoldItalic18p7b pour cet exemple.

#comprendre

Dans votre méthode splash(), commentez le tft.setTextSize(); commander.

Ajoutez la commande suivante,

tft.setFont(&FreeSerifBoldItalic18pt7b);

Désormais, toutes les commandes print() utiliseront la police actuellement spécifiée. Pour passer à une police différente, vous utiliseriez une autre commande tft.setFont() avec la prochaine police que vous voudriez utiliser.

Pour rétablir la police tft standard, utilisez simplement un tft.setFont(); commande sans paramètre.

Téléchargez le croquis sur votre Arduino et vous devriez voir que l'écran de démarrage utilise maintenant la police bitmap pour rendre le texte à l'écran. Vous remarquerez que la taille du croquis est considérablement plus grande maintenant que vous avez inclus une police.

Étape 12: Réflexions finales

De nombreuses autres commandes d'objets graphiques sont à votre disposition. Ils comprennent:

tft.drawRect(x, y, largeur, hauteur, COULEUR);

tft.drawLine(x1, y1, x2, y2, COULEUR);

Les exemples suivants utilisent la méthode tft.color565 pour vous permettre de spécifier la couleur en fonction des valeurs rouge, verte et bleue. C'est une autre façon d'utiliser les valeurs de couleur HEX définies constantes que nous avons utilisées dans notre croquis.

tft.drawRoundRect(x, y, largeur, hauteur, rayon, tft.color565(255, 0, 0)); // ce serait rouge

tft.drawCircle(x, y, rayon, tft.color565(0, 255, 0)); // ce serait vert

tft.drawTriangle(vertex1x, vertex1y, vertex2x, vertex2y, vertex3x, vertex3y, tft.color565(0, 0, 255)); // bleu

tft.fillTriangle(vertex1x, vertex1y, vertex2x, vertex2y, vertex3x, vertex3y, tft.color565(255, 0, 0);

Jouez avec ces commandes et explorez comment elles peuvent s'ajouter à vos projets TFT.

Apprendre à utiliser un écran TFT est un défi et vous devriez être fier de vous d'avoir pris le temps d'apprendre ces premiers pas.

Les écrans TFT peuvent ajouter un aspect d'interface utilisateur graphique attrayant et utile à vos projets Arduino.

Merci d'avoir travaillé sur ce tutoriel.

MAINTENANT SORTEZ ET FAITES QUELQUE CHOSE DE MERVEILLEUX !