Calculatrice à écran tactile Arduino : 7 étapes

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

Salut! Il s'agit d'un projet de création d'une calculatrice à écran tactile utilisant un Arduino Uno et un shield LCD TFT. J'ai proposé le concept de mon cours de programmation pour l'école à la maison et l'expérience dans la construction de ce projet a été très intéressante. Cette calculatrice peut effectuer les quatre opérations mathématiques simples (addition, soustraction, multiplication et division). Il affiche également jusqu'à deux décimales pour les réponses de division qui en contiennent. Plongeons dedans ! Les fournitures pour ce projet sont énumérées ci-dessous.

Fournitures

-Arduino Uno

- 2.4 TFT LCD Shield (voici où je l'ai acheté:

- Câble USB A vers B (cordon pour connecter l'Arduino à l'ordinateur)

- Ordinateur avec Arduino IDE installé

- Vous devrez également télécharger deux bibliothèques: MCUFRIEND_kbv et Touchscreen. Le premier que vous pouvez trouver sur github (lien: https://github.com/prenticedavid/MCUFRIEND_kbv) ou vous pouvez utiliser le fichier zip de la bibliothèque que j'ai inclus ci-dessous. La seconde se trouve dans le gestionnaire de bibliothèque Arduino pour l'installation.

Étape 1: Connexions matérielles

La connexion du shield écran tactile à l'Arduino Uno est simple et rapide. Tout ce que vous avez à faire est d'aligner les broches les plus basses du blindage avec les broches les plus basses de l'Arduino et de pousser le blindage dans les broches. La broche 5 V supérieure et la broche non étiquetée du côté alimentation ne doivent pas contenir de broches du blindage, les mêmes paramètres s'appliquant aux broches étiquetées SCL et SDA de l'autre côté de la carte. Maintenant, nous sommes prêts à coder !

Étape 2: Le code: définitions et configuration globales

#comprendre

MCUFRIEND_kbv tft; // câblé pour les boucliers UNO de toute façon

#comprendre

#définir YP A3

#définir XM A2

#définir YM 9

#définir XP 8

Écran tactile = Écran tactile (XP, YP, XM, YM, 300);

#définir MINPRESSION 10

C'est le début du code, où nous incluons des bibliothèques (MCUFRIEND_kbv et écran tactile), définissons les broches X et Y, configurons les paramètres de l'écran tactile et définissons la pression minimale nécessaire à l'Arduino pour enregistrer une pression utilisateur.

ID entier;

int user_selection;

float numéro_sauvegardé = 0;

terme flottant1;

int op_num;

résultat flottant;

int curseurLocX = 5;

int curseurLocY = 20;

Juste avant la configuration, nous devons configurer certaines variables globales. ID aide à faire fonctionner l'écran tactile. user_selection contient un numéro qui correspond à la touche que l'utilisateur sélectionne lorsqu'il appuie sur l'écran tactile. save_number est la variable que nous imprimons à l'écran après une entrée utilisateur (plus d'informations à ce sujet dans la boucle). C'est un flottant, il peut donc contenir des nombres décimaux ainsi que des entiers. term1 est la variable dans laquelle le premier nombre de l'équation est enregistré après la sélection d'un opérande. op_num enregistre l'opérande sous forme de nombre (1 pour l'addition, 2 pour la soustraction, 3 pour la multiplication et 4 pour la division). résultat est la variable qui est imprimée à l'écran après que l'utilisateur a appuyé sur le signe égal. C'est aussi un flotteur. curseurLocX et curseurLocY sont les points de mappage sur l'écran tactile où le curseur est défini à plusieurs reprises (il est situé dans la barre grise en haut, également connue sous le nom de champ de résultats).

void setup(){

tft.reset();

ID = tft.readID();

tft.begin(ID);

tft.setRotation(0);

tft.fillScreen(TFT_DARKGREY);

carrés();

Nombres();

tft.setTextSize(3);

tft.setTextColor(TFT_BLUE, TFT_DARKGREY);

}

Notre fonction de configuration contient d'abord l'initialisation du bouclier tactile (lignes 1-3). L'orientation du bouclier est définie à l'aide de la commande tft.setRotation(), 0 étant droit. L'écran entier est coloré en gris foncé avec la commande tft.fillScreen(), que nous écrirons par-dessus (à l'exception du champ de résultats). Les fonctions squares() et numbers() dessinent les carrés de la calculatrice, colorent les carrés en noir et blanc en damier et écrivent des nombres/opérandes sur les carrés en bleu. Nous y reviendrons à l'étape suivante. La commande tft.setTextSize() définit la taille du texte du champ de résultats sur 3, qui est une police moyenne. La commande tft.setTextColor() définit la couleur du texte du champ de résultats sur le bleu, qui est écrit sur le champ gris foncé.

Étape 3: Le code: boucle

boucle vide() { nombreSelect();

retard (100);

if (user_selection == 16){

;

}autre{

if (user_selection < 10){

numéro_enregistré = numéro_enregistré * 10 + sélection_utilisateur;

tft.setCursor(cursorLocX, curseurLocY);

tft.print(numéro_enregistré);

}sinon si (sélection_utilisateur > 10){

commutateur (sélection_utilisateur){

cas 11:

op_num = 1;

tft.setCursor(cursorLocX, curseurLocY);

tft.print("+ ");

terme1 = numéro_enregistré;

numéro_enregistré = 0;

Pause;

cas 12:

op_num = 2;

tft.setCursor(cursorLocX, curseurLocY);

tft.print("- ");

terme1 = numéro_enregistré;

numéro_enregistré = 0;

Pause;

cas 13:

op_num = 3;

tft.setCursor(cursorLocX, curseurLocY);

tft.print("X ");

terme1 = numéro_enregistré;

numéro_enregistré = 0;

Pause;

cas 14:

op_num = 4;

tft.setCursor(cursorLocX, curseurLocY);

tft.print("/ ");

terme1 = numéro_enregistré;

numéro_enregistré = 0;

Pause;

cas 15:

numéro_enregistré = 0;

terme1 = 0;

op_num = 0;

tft.setCursor(cursorLocX, curseurLocY);

tft.print(" ");

Pause;

}

tft.setCursor(cursorLocX, curseurLocY);

C'est beaucoup à mâcher, alors je vais vous expliquer ce qui est ci-dessus. Nous commençons par appeler la fonction numberSelect(), qui attribue un numéro à chaque carré de l'écran tactile. Lorsqu'un utilisateur appuie sur l'un de ces carrés, la fonction définit la variable user_selection sur le numéro du carré. La première instruction if consiste à ne parcourir la boucle que si une sélection utilisateur valide a été effectuée. Si c'est le cas, la prochaine instruction if demande si user_selection a un nombre inférieur à 10 enregistré (les nombres 0-9). Si c'est le cas, le nombre_enregistré est multiplié par 10 et le nombre dans la sélection_utilisateur est ajouté au nombre_enregistré, qui est imprimé dans le champ des résultats sur l'écran tactile. Si ce n'est pas le cas, l'instruction if suivante demande si user_selection a un nombre supérieur à 10 enregistré (les nombres d'opérandes: 11 pour +, 12 pour -, 13 pour X, 14 pour / et 15 pour le carré clair de l'écran). Une fonction de commutation prend en charge chaque cas (déterminé par user_selection). La variable op_num reçoit un numéro qui correspond à l'opérande qui a été sélectionné (1 pour +, 2 pour -, 3 pour X et 4 pour /). La valeur de save_number est enregistrée dans la variable term1 afin que la variable save_number puisse être utilisée pour la seconde moitié de l'équation. Le symbole de l'opérande est imprimé à l'écran avec l'effacement des nombres dans le champ des résultats. La seule exception est le carré clair de l'écran, qui réinitialise toutes les variables de calcul et efface le champ des résultats de tout ce qui s'y trouve.

}autre{

switch(num_op){

cas 1:

résultat = terme1 + numéro_enregistré;

tft.setCursor(cursorLocX, curseurLocY);

tft.print(double(résultat));

Pause;

cas 2:

résultat = terme1 - numéro_enregistré;

tft.setCursor(cursorLocX, curseurLocY);

tft.print(double(résultat));

Pause;

cas 3:

résultat = terme1 * numéro_enregistré;

tft.setCursor(cursorLocX, curseurLocY);

tft.print(double(résultat));

Pause;

cas 4:

result = float(term1) / float(saved_number);

tft.setCursor(cursorLocX, curseurLocY);

tft.print(résultat);

Pause;

}

tft.setCursor(cursorLocX, curseurLocY);

numéro_enregistré = résultat;

terme1 = 0;

op_num = 0;

retard(1000);

}

}

}

La dernière partie de la boucle traite de l'événement de l'utilisateur sélectionnant le signe égal (user_selection == 10). Une autre fonction de commutation fonctionne à travers les quatre fonctions mathématiques (déterminées par op_num). Le cas d'addition (cas 1) additionne term1 et save_number et enregistre le nombre dans la variable de résultat. Le résultat est imprimé dans le champ des résultats sous la forme d'un double. Le cas de soustraction (cas 2) soustrait le nombre_enregistré de terme1 et enregistre le nombre dans la variable de résultat. Le résultat est imprimé dans le champ des résultats sous la forme d'un double. Le cas de multiplication (cas 3) multiplie term1 par save_number et enregistre le nombre dans la variable de résultat. Le résultat est imprimé dans le champ des résultats sous la forme d'un double. Le cas de division (cas 4) divise le terme1 par le nombre_enregistré et enregistre le nombre dans la variable de résultat. Le résultat est imprimé dans le champ des résultats sous forme de flottant (car les réponses de division peuvent être des nombres décimaux). Après l'événement d'un nombre, d'un opérande ou d'un résultat imprimé à l'écran, le curseur est réinitialisé, le numéro enregistré est défini sur le résultat précédent et term1 et num_op sont réinitialisés.

Quelques remarques: l'utilisateur ne peut pas saisir de nombres décimaux dans la calculatrice en raison de l'absence d'un carré de virgule décimale. De plus, l'utilisateur ne peut faire qu'une équation à la fois. Vous ne pouvez pas calculer un résultat puis ajouter/soustraire/multiplier/diviser ce résultat. Dans la fonction numberSelect(), il existe une fonction qui efface l'écran après l'impression d'un résultat si un utilisateur a appuyé sur une autre case.

Étape 4: Le Code: Fonction Carrés

carrés vides (){

// des carrés noirs et blancs alternent sur chaque rangée et les première et troisième rangées ont un motif opposé à celui des deuxième et quatrième rangées

tft.fillRect(0, 60, 60, 65, TFT_BLACK); // la première rangée de carrés commence, du noir au blanc tft.fillRect(60, 60, 60, 65, TFT_WHITE);

tft.fillRect(120, 60, 60, 65, TFT_BLACK);

tft.fillRect(180, 60, 60, 65, TFT_WHITE); // la première rangée de carrés se termine

tft.fillRect(0, 125, 60, 65, TFT_WHITE); // début de la deuxième rangée de carrés, du blanc au noir tft.fillRect(60, 125, 60, 65, TFT_BLACK);

tft.fillRect(120, 125, 60, 65, TFT_WHITE);

tft.fillRect(180, 125, 60, 65, TFT_BLACK); // la deuxième rangée de carrés se termine

tft.fillRect(0, 190, 60, 65, TFT_BLACK); // la troisième rangée de carrés commence, du noir au blanc tft.fillRect(60, 190, 60, 65, TFT_WHITE);

tft.fillRect(120, 190, 60, 65, TFT_BLACK);

tft.fillRect(180, 190, 60, 65, TFT_WHITE); // la troisième rangée de carrés se termine

tft.fillRect(0, 255, 60, 65, TFT_WHITE); // la quatrième rangée de carrés commence, du blanc au noir tft.fillRect(60, 255, 60, 65, TFT_BLACK);

tft.fillRect(120, 255, 60, 65, TFT_WHITE);

tft.fillRect(180, 255, 60, 65, TFT_BLACK); // la quatrième rangée de carrés se termine

}

La fonction squares() est assez simple. La commande tft.fillRect(X1, Y1, X2, Y2, TFT_COLOR) dessine un rectangle en fonction des paramètres qui lui sont transmis, qui sont les premières positions de x et y, les deuxièmes positions de x et y, et la couleur avec laquelle le rectangle est rempli. Cette fonction dessine les quatre rangées de carrés (techniquement des rectangles) et remplit chaque carré avec la couleur qui lui est transmise.

Étape 5: Le code: fonction des nombres

numéros vides (){

tft.setTextColor(TFT_BLUE); // définit la couleur du nombre/caractère sur le bleu

tft.setTextSize(5); // définit la taille des nombres/caractères sur 5

tft.setCursor(18, 75); // définit le curseur pour la première ligne de nombres/caractères

tft.print("7 8 9 /"); // imprime la première ligne de nombres/caractères

tft.setCursor(18, 140); // définit le curseur pour la deuxième ligne de nombres/caractères

tft.print("4 5 6 X"); // imprime la deuxième ligne de nombres/caractères

tft.setCursor(18, 205); // définit le curseur pour la troisième ligne de nombres/caractères

tft.print("1 2 3 -"); // imprime la troisième ligne de nombres/caractères

tft.setCursor(18, 270); // définit le curseur pour la quatrième ligne de nombres/caractères

tft.print("C 0 = +"); // imprime la quatrième ligne de nombres/caractères

}

La fonction number() est également simple. Les deux premières lignes définissent la taille du texte plus grande et la couleur en bleu. La commande tft.setCursor() positionne le curseur à la position de chaque ligne à partir de laquelle l'écriture des nombres commence. Ensuite, la commande tft.print() imprime les nombres/caractères sur les carrés.

Étape 6: Le code: fonction NumberSelect

void numberSelect(){

TSPoint p = ts.getPoint();

pinMode(XM, SORTIE);

pinMode(YP, SORTIE);

si (p.z > MINPRESSURE){

p.x = carte(p.x, 250, 845, 0, 239);

p.y = carte(p.y, 245, 860, 0, 319);

si (résultat != 0){

résultat = 0;

numéro_enregistré = 0;

tft.print("EFFACER LES VALEURS ");

retard (500);

tft.setCursor(cursorLocX, curseurLocY);

tft.print(" ");

tft.setCursor(cursorLocX, curseurLocY);

}

Pour démarrer la fonction numberSelect(), nous demandons l'entrée de l'utilisateur à partir de l'écran tactile avec la commande ts.getPoint(). Une fois ces données collectées, nous vérifions si la pression minimale a été dépassée (ou, en d'autres termes, si l'utilisateur a appuyé quelque part sur l'écran tactile). Si c'est le cas, les coordonnées x et y sont mappées des coordonnées cartésiennes aux coordonnées spécifiques à l'écran tactile. (0, 0) est le coin supérieur gauche de l'écran tactile, avec l'axe x traversant et l'axe y descendant. La partie suivante vérifie s'il y a un numéro enregistré dans le résultat. Si tel est le cas, le résultat et le numéro_enregistré sont remis à 0. Le message « EFFACER LES VALEURS » est imprimé sur le champ des résultats et l'écran est effacé avec le curseur à sa position de départ.

if (p.y 60){ // première rangée de carrés

si (p.x < 60)

sélection_utilisateur = 7;

sinon si (p.x < 120)

sélection_utilisateur = 8;

sinon si (p.x < 180)

sélection_utilisateur = 9;

sinon user_selection = 14;

} else if (p.y 125){ // deuxième rangée de carrés

si (p.x < 60)

sélection_utilisateur = 4;

sinon si (p.x < 120)

sélection_utilisateur = 5;

sinon si (p.x < 180)

sélection_utilisateur = 6;

sinon user_selection = 13;

}else if (p.y 190){ // troisième rangée de carrés

si (p.x < 60)

sélection_utilisateur = 1;

sinon si (p.x < 120)

sélection_utilisateur = 2;

sinon si (p.x < 180)

sélection_utilisateur = 3;

sinon sélection_utilisateur = 12;

} else if (p.y > 255){ // quatrième rangée de carrés

si (p.x < 60)

sélection_utilisateur = 15;

sinon si (p.x < 120)

sélection_utilisateur = 0;

sinon si (p.x < 180)

sélection_utilisateur = 10;

sinon sélection_utilisateur = 11;

}

}autre{

sélection_utilisateur = 16; // user_selection est défini sur 16 (rien de variable)

}

}

C'est la partie qui détermine quel bouton a été sélectionné. En commençant par la rangée supérieure de carrés et se terminant par la rangée inférieure, l'Arduino recherche l'endroit où l'écran a été enfoncé. Il attribue ensuite un numéro au carré et enregistre ce numéro dans user_selection. Les nombres 0-9 correspondent aux carrés des nombres, les nombres 11-15 correspondent aux carrés des opérandes et au carré clair, et le nombre 10 correspond au carré du signe égal. Si aucun carré n'a été sélectionné, alors user_selection est mis à 16, ce qui fera recommencer la boucle (voir fonction de boucle).

Étape 7: Profitez de votre projet terminé

Voilà! Vous avez maintenant une calculatrice à écran tactile qui peut faire des additions, des soustractions, des multiplications et des divisions. Ce projet a complètement changé la façon dont je pensais qu'une calculatrice fonctionnait. Alors que je travaillais sur ce projet, je me souviens avoir dit à mon instructeur en classe: « Je ne regarderai plus jamais une calculatrice de la même manière ! Les fonctions que vous, en tant qu'utilisateur, jugent faciles sont quelque peu difficiles lorsque vous êtes derrière l'ordinateur à essayer d'imiter votre idée. J'espère que vous avez apprécié le projet, et j'espère que votre état d'esprit sur le fonctionnement d'une calculatrice a également changé !

Voici le code complet pour votre commodité. Il est rempli de commentaires, donc si vous avez des problèmes, ils devraient vous montrer ce que fait chaque ligne.