Tutoriel Arduino Écran Tactile TFT LCD – Guide Étape par Étape
Introduction
Dans ce tutoriel Arduino sur écran tactile, nous allons apprendre à utiliser un écran tactile TFT LCD avec Arduino. Vous pouvez regarder la vidéo suivante ou lire le tutoriel écrit ci-dessous.
Vue d'ensemble
Pour ce tutoriel, j'ai préparé trois exemples. Le premier exemple est une mesure de distance à l'aide d'un capteur ultrasonique. La sortie du capteur, c'est-à-dire la distance, est affichée sur l'écran et à l'aide de l'écran tactile, nous pouvons sélectionner les unités, soit centimètres, soit pouces.
Le deuxième exemple consiste à contrôler une LED RVB à l'aide de trois curseurs RVB. Par exemple, si nous commençons à faire glisser le curseur bleu, la LED s'allumera en bleu et augmentera son intensité à mesure que nous approchons de la valeur maximale. Les curseurs peuvent varier de 0 à 255 et avec leur combinaison, nous pouvons définir n'importe quelle couleur pour la LED RVB, mais gardez à l'esprit que la LED ne peut pas représenter les couleurs avec une grande précision.
Le troisième exemple est un jeu. En fait, c'est une réplique du populaire jeu Flappy Bird pour smartphones. Nous pouvons jouer en utilisant le bouton poussoir ou même l'écran tactile lui-même.
Maintenant, nous allons passer en revue chacun de ces exemples et expliquer pas à pas les codes qui les sous-tendent.
Composants nécessaires pour cet écran tactile Arduino
Comme exemple, j'utilise un écran tactile TFT de 3,2" en combinaison avec un shield TFT LCD Arduino Mega. Nous avons besoin d'un shield car l'écran tactile TFT fonctionne en 3,3V et les sorties de l'Arduino Mega sont en 5V. Pour le premier exemple, j'ai le capteur ultrasonique HC-SR04, puis pour le deuxième exemple une LED RVB avec trois résistances et un bouton poussoir pour l'exemple de jeu. J'ai également dû fabriquer un connecteur à broches personnalisé comme celui-ci, en soudant des connecteurs à broches et en en pliant un pour pouvoir les insérer entre la carte Arduino et le shield TFT.
Vous pouvez obtenir ces composants sur les sites ci-dessous :
- Écran tactile TFT 3,2"
- Shield TFT Display Mega
- Carte Arduino
- Module ultrasonique HC-SR04
Voici le schéma de câblage. Nous utiliserons la broche GND, les broches numériques 8 à 13, ainsi que la broche 14. Comme les broches 5V sont déjà utilisées par l'écran TFT, j'utiliserai la broche 13 comme VCC, en la mettant directement à l'état haut dans la section setup du code.
Code Arduino pour écran tactile
Comme le code est un peu long et pour une meilleure compréhension, je posterai le code source du programme par sections avec une description pour chaque section. Et à la fin de cet article, je posterai le code source complet.
J'utiliserai les bibliothèques UTFT et URTouch créées par Henning Karlsen. Je tiens à le remercier pour l'incroyable travail qu'il a accompli. Ces bibliothèques permettent une utilisation vraiment facile des écrans TFT, et elles fonctionnent avec de nombreux modèles, tailles, shields et contrôleurs d'écrans TFT différents. Vous pouvez télécharger ces bibliothèques depuis son site web, RinkyDinkElectronics.com, et y trouver de nombreux exemples de démonstration et une documentation détaillée sur leur utilisation.
Après avoir inclus les bibliothèques, nous devons créer des objets UTFT et URTouch. Les paramètres de ces objets dépendent du modèle de l'écran TFT et du shield, et ces détails peuvent également être trouvés dans la documentation des bibliothèques.
Ensuite, nous devons définir les polices fournies avec les bibliothèques et également définir certaines variables nécessaires au programme. Dans la section setup, nous devons initialiser l'écran et le tactile, définir les modes de broches pour le capteur connecté, la LED et le bouton, et appeler initialement la fonction personnalisée drawHomeScreen(), qui dessinera l'écran d'accueil du programme.
#include <UTFT.h>
#include <URTouch.h>
//==== Création des objets
UTFT myGLCD(SSD1289,38,39,40,41); // Les paramètres doivent être ajustés à votre modèle d'écran/shield
URTouch myTouch( 6, 5, 4, 3, 2);
//==== Définition des variables
extern uint8_t SmallFont[];
extern uint8_t BigFont[];
extern uint8_t SevenSegNumFont[];
extern unsigned int bird01[0x41A];
int x, y;
char currentPage, selectedUnit;
// Capteur ultrasonique
const int VCC = 13;
const int trigPin = 11;
const int echoPin = 12;
long duration;
int distanceInch, distanceCm;
// LED RVB
const int redLed = 10;
const int greenLed = 9;
const int blueLed = 8;
int xR=38;
int xG=38;
int xB=38;
// Flappy Bird
int xP = 319;
int yP = 100;
int yB = 30;
int fallRateInt = 0;
float fallRate =0;
int score=0;
const int button = 14;
int buttonState = 0;
void setup() {
// Configuration initiale
myGLCD.InitLCD();
myGLCD.clrScr();
myTouch.InitTouch();
myTouch.setPrecision(PREC_MEDIUM);
// Définition des modes de broches
pinMode(VCC, OUTPUT); // VCC
pinMode(trigPin, OUTPUT); // trigPin en sortie
pinMode(echoPin, INPUT); // echoPin en entrée
pinMode(redLed, OUTPUT);
pinMode(greenLed, OUTPUT);
pinMode(blueLed, OUTPUT);
pinMode(button, INPUT);
digitalWrite(VCC, HIGH); // +5V - Broche 13 comme VCC
drawHomeScreen(); // Dessine l'écran d'accueil
currentPage = '0'; // Indique que nous sommes à l'écran d'accueil
selectedUnit = '0'; // Indique l'unité sélectionnée pour le premier exemple, cm ou pouces
}Voyons maintenant comment créer l'écran d'accueil du programme. Avec la fonction setBackColor(), nous devons définir la couleur d'arrière-plan du texte, noir dans notre cas. Ensuite, nous devons définir la couleur sur blanc, la police grande et en utilisant la fonction print(), nous afficherons la chaîne "Arduino TFT Tutorial" au centre de l'écran et à 10 pixels vers le bas sur l'axe Y. Ensuite, nous définirons la couleur sur rouge et tracerons une ligne rouge sous le texte. Après cela, nous remettrons la couleur sur blanc et afficherons les deux autres chaînes, "by HowToMechatronics.com" avec la police petite et "Select Example" avec la police grande.
Ensuite vient le bouton du capteur de distance. D'abord, nous devons définir la couleur, puis en utilisant la fonction fillRoundRect(), nous dessinerons un rectangle arrondi rempli. Ensuite, nous remettrons la couleur sur blanc et en utilisant la fonction drawRoundRect(), nous dessinerons un autre rectangle arrondi par-dessus le précédent, mais celui-ci sans remplissage, de sorte que l'apparence globale du bouton ressemble à un cadre. Sur le bouton, nous imprimerons le texte avec la police grande et la même couleur d'arrière-plan que le remplissage du bouton. La même procédure s'applique aux deux autres boutons.
// drawHomeScreen - Fonction personnalisée
void drawHomeScreen() {
// Titre
myGLCD.setBackColor(0,0,0); // Définit la couleur d'arrière-plan de la zone de texte sur noir
myGLCD.setColor(255, 255, 255); // Définit la couleur sur blanc
myGLCD.setFont(BigFont); // Définit la police sur grande
myGLCD.print("Arduino TFT Tutorial", CENTER, 10); // Affiche la chaîne sur l'écran
myGLCD.setColor(255, 0, 0); // Définit la couleur sur rouge
myGLCD.drawLine(0,32,319,32); // Trace la ligne rouge
myGLCD.setColor(255, 255, 255); // Définit la couleur sur blanc
myGLCD.setFont(SmallFont); // Définit la police sur petite
myGLCD.print("by HowToMechatronics.com", CENTER, 41); // Affiche la chaîne
myGLCD.setFont(BigFont);
myGLCD.print("Select Example", CENTER, 64);
// Bouton - Capteur de distance
myGLCD.setColor(16, 167, 103); // Définit la couleur verte
myGLCD.fillRoundRect (35, 90, 285, 130); // Dessine un rectangle arrondi rempli
myGLCD.setColor(255, 255, 255); // Définit la couleur sur blanc
myGLCD.drawRoundRect (35, 90, 285, 130); // Dessine un rectangle arrondi sans remplissage
myGLCD.setFont(BigFont); // Définit la police sur grande
myGLCD.setBackColor(16, 167, 103); // Définit la couleur d'arrière-plan du texte sur vert, comme le bouton
myGLCD.print("DISTANCE SENSOR", CENTER, 102); // Affiche la chaîne
// Bouton - Contrôle LED RVB
myGLCD.setColor(16, 167, 103);
myGLCD.fillRoundRect (35, 140, 285, 180);
myGLCD.setColor(255, 255, 255);
myGLCD.drawRoundRect (35, 140, 285, 180);
myGLCD.setFont(BigFont);
myGLCD.setBackColor(16, 167, 103);
myGLCD.print("RGB LED CONTROL", CENTER, 152);
// Bouton - Birduino
myGLCD.setColor(16, 167, 103);
myGLCD.fillRoundRect (35, 190, 285, 230);
myGLCD.setColor(255, 255, 255);
myGLCD.drawRoundRect (35, 190, 285, 230);
myGLCD.setFont(BigFont);
myGLCD.setBackColor(16, 167, 103);
myGLCD.print("BIRDUINO GAME", CENTER, 202);
}Maintenant, nous devons rendre les boutons fonctionnels pour que lorsqu'on les appuie, ils nous envoient vers l'exemple approprié. Dans la section setup, nous avons défini le caractère '0' pour la variable currentPage, ce qui indique que nous sommes à l'écran d'accueil. Donc si c'est vrai, et si nous appuyons sur l'écran, cette instruction if deviendra vraie et en utilisant ces lignes, nous obtiendrons les coordonnées X et Y où l'écran a été pressé. Si c'est la zone qui couvre le premier bouton, nous appellerons la fonction personnalisée drawDistanceSensor() qui activera l'exemple du capteur de distance. Nous définirons également le caractère '1' pour la variable currentPage qui indiquera que nous sommes au premier exemple. La fonction personnalisée drawFrame() est utilisée pour mettre en surbrillance le bouton lorsqu'il est pressé. La même procédure s'applique aux deux autres boutons.
//========== La section loop ========
void loop() {
// Écran d'accueil
if (currentPage == '0') {
if (myTouch.dataAvailable()) {
myTouch.read();
x=myTouch.getX(); // Coordonnée X où l'écran a été pressé
y=myTouch.getY(); // Coordonnée Y où l'écran a été pressé
// Si on appuie sur le bouton Capteur de distance
if ((x>=35) && (x<=285) && (y>=90) && (y<=130)) {
drawFrame(35, 90, 285, 130); // Fonction personnalisée - Met en surbrillance le bouton quand il est pressé
currentPage = '1'; // Indique que nous sommes au premier exemple
myGLCD.clrScr(); // Efface l'écran
drawDistanceSensor(); // Appelé une seule fois, car à l'itération suivante de la boucle, l'instruction if ci-dessus sera fausse
}
// Si on appuie sur le bouton Contrôle LED RVB
if ((x>=35) && (x<=285) && (y>=140) && (y<=180)) {
drawFrame(35, 140, 285, 180);
currentPage = '2';
myGLCD.clrScr();
drawLedControl();
}
// Si on appuie sur le bouton Jeu Birduino
if ((x>=35) && (x<=285) && (y>=190) && (y<=230)) {
drawFrame(35, 190, 285, 230);
currentPage = '3';
myGLCD.clrScr();
myGLCD.setColor(114, 198, 206);
myGLCD.fillRect(0,0,319,239);
drawGround();
drawPilars(xP,yP);
drawBird(30);
delay(1000);
}
}
}
// Exemple Capteur de distance
if (currentPage == '1') {
getDistance(); // Obtient la distance du capteur et cette fonction est appelée répétitivement tant que nous sommes au premier exemple
if (myTouch.dataAvailable()) {
myTouch.read();
x=myTouch.getX();
y=myTouch.getY();
// Si on appuie sur le bouton Centimètres
if ((x>=10) && (x<=135) &&(y>=90) && (y<=163)) {
selectedUnit = '0';
}
// Si on appuie sur le bouton Pouces
if ((x>=10) && (x<=135) &&(y>=173) && (y<=201)) {
selectedUnit = '1';
}
// Si on appuie sur le bouton Retour
if ((x>=10) && (x<=60) &&(y>=10) && (y<=36)) {
drawFrame(10, 10, 60, 36);
currentPage = '0'; // Indique que nous sommes à l'écran d'accueil
myGLCD.clrScr();
drawHomeScreen(); // Dessine l'écran d'accueil
}
}
}
// Contrôle LED RVB
if (currentPage == '2') {
setLedColor();
if (myTouch.dataAvailable()) {
myTouch.read();
x=myTouch.getX();
y=myTouch.getY();
// Bouton retour
if ((x>=10) && (x<=60) &&(y>=10) && (y<=36)) {
drawFrame(10, 10, 60, 36);
currentPage = '0';
myGLCD.clrScr();
drawHomeScreen();
// Éteint la LED
analogWrite(redLed, 0);
analogWrite(greenLed, 0);
analogWrite(blueLed, 0);
}
}
}
//==== Cette section du code, pour l'exemple de jeu, est expliquée dans mon prochain tutoriel
// Jeu Birduino
if (currentPage == '3') {
//delay(1);
xP=xP-3;
drawPilars(xP, yP);
yB+=fallRateInt;
fallRate=fallRate+0.4;
fallRateInt= int(fallRate);
if (yB>=220) {
yB=220;
}
if(yB>=180 || yB<=0){
restartGame();
}
if((xP<=85) && (xP>=30) && (yB<=yP-2)){
restartGame();
}
if((xP<=85) && (xP>=30) && (yB>=yP+60)){
restartGame();
}
drawBird(yB);
if (xP<=-51){
xP=319;
yP = rand() % 100+20;
score++;
}
if (myTouch.dataAvailable()) {
myTouch.read();
x=myTouch.getX();
y=myTouch.getY();
if ((x>=0) && (x<=319) &&(y>=50) && (y<=239)) {
fallRate=-5;
}
}
buttonState = digitalRead(button);
if (buttonState == HIGH) {
fallRate=-5;
}
}
if (myTouch.dataAvailable()) {
myTouch.read();
x=myTouch.getX();
y=myTouch.getY();
if ((x>=10) && (x<=60) &&(y>=10) && (y<=36)) {
drawFrame(10, 10, 60, 36);
currentPage = '0';
myGLCD.clrScr();
drawHomeScreen();
analogWrite(redLed, 0);
analogWrite(greenLed, 0);
analogWrite(blueLed, 0);
}
}
}La fonction personnalisée drawDistanceSensor() doit être appelée une seule fois lorsque le bouton est pressé afin de dessiner tous les graphiques de cet exemple de la même manière que nous l'avons décrit pour l'écran d'accueil. Cependant, la fonction personnalisée getDistance() doit être appelée répétitivement pour afficher les derniers résultats de la distance mesurée par le capteur.
Voici cette fonction qui utilise le capteur ultrasonique pour calculer la distance et afficher les valeurs avec la police SevenSegNum en vert, soit en centimètres, soit en pouces. Si vous avez besoin de plus de détails sur le fonctionnement du capteur ultrasonique, vous pouvez consulter mon tutoriel particulier à ce sujet. De retour dans la section loop, nous pouvons voir ce qui se passe lorsque nous appuyons sur les boutons de sélection d'unité ainsi que le bouton retour.
//===== getDistance() - Fonction personnalisée
void getDistance() {
// Efface le trigPin
digitalWrite(trigPin, LOW);
delayMicroseconds(2);
// Met le trigPin à l'état HIGH pendant 10 microsecondes
digitalWrite(trigPin, HIGH);
delayMicroseconds(10);
digitalWrite(trigPin, LOW);
// Lit le echoPin, retourne le temps de trajet de l'onde sonore en microsecondes
duration = pulseIn(echoPin, HIGH);
// Calcul de la distance
distanceCm= duration*0.034/2;
distanceInch= distanceCm/2.53;
// Affiche la distance en centimètres
if (selectedUnit == '0' && distanceCm <=400) {
myGLCD.setFont(SevenSegNumFont);
myGLCD.setColor(0, 255, 0);
myGLCD.setBackColor(0, 0, 0);
myGLCD.printNumI(distanceCm,130, 145, 3,'0');
myGLCD.setFont(BigFont);
myGLCD.print("cm ", 235, 178);
}
// Affiche la distance en pouces
if (selectedUnit == '1' && distanceCm <=160) {
myGLCD.setFont(SevenSegNumFont);
myGLCD.setColor(0, 255, 0);
myGLCD.setBackColor(0, 0, 0);
myGLCD.printNumI(distanceInch,130, 145, 3,'0');
myGLCD.setFont(BigFont);
myGLCD.print("inch", 235, 178);
}
delay(10);
}OK, passons maintenant à l'exemple de contrôle de LED RVB. Si nous appuyons sur le deuxième bouton, la fonction personnalisée drawLedControl() sera appelée une seule fois pour dessiner les graphiques de cet exemple et la fonction personnalisée setLedColor() sera appelée répétitivement. Dans cette fonction, nous utilisons l'écran tactile pour définir les valeurs des 3 curseurs de 0 à 255. Avec les instructions if, nous limitons la zone de chaque curseur et obtenons la valeur X du curseur. Les valeurs de la coordonnée X de chaque curseur vont de 38 à 310 pixels et nous devons mapper ces valeurs en valeurs de 0 à 255 qui seront utilisées comme signal PWM pour allumer la LED. Si vous avez besoin de plus de détails sur le fonctionnement de la LED RVB avec Arduino, vous pouvez consulter mon tutoriel Arduino RVB. Le reste du code dans cette fonction personnalisée sert à dessiner les curseurs. De retour dans la section loop, nous n'avons que le bouton retour qui éteint également la LED lorsqu'il est pressé.
//============= setLedColor() - Fonction personnalisée
void setLedColor() {
if (myTouch.dataAvailable()) {
myTouch.read();
x=myTouch.getX();
y=myTouch.getY();
// Zone du curseur de couleur rouge
if( (y>=130) && (y<=156)) {
xR=x; // Stocke la valeur X où l'écran a été pressé dans la variable xR
if (xR<=38) { // Limite la zone du curseur à plus de 38 pixels
xR=38;
}
if (xR>=303){ /// Limite la zone du curseur à moins de 310 pixels
xR=303;
}
}
// Zone du curseur de couleur verte
if( (y>=170) && (y<=196)) {
xG=x;
if (xG<=38) {
xG=38;
}
if (xG>=303){
xG=303;
}
}
// Zone du curseur de couleur bleue
if( (y>=210) && (y<=236)) {
xB=x;
if (xB<=38) {
xB=38;
}
if (xB>=303){
xB=303;
}
}
}
// Mappe les valeurs de l'axe X de 38 à 0 et 310 à 255, car nous avons besoin de valeurs de 0 à 255 pour allumer la LED
int xRC = map(xR,38,310,0,255);
int xGC = map(xG,38,310,0,255);
int xBC = map(xB,38,310,0,255);
// Envoie le signal PWM aux broches de la LED
analogWrite(redLed, xRC);
analogWrite(greenLed, xGC);
analogWrite(blueLed, xBC);
// Dessine un rectangle avec la dernière combinaison de couleurs
myGLCD.setColor(xRC, xGC, xBC);
myGLCD.fillRoundRect(175, 87, 310, 119);
// Dessine les positionneurs
myGLCD.setColor(255, 255, 255);
myGLCD.fillRect(xR,139,(xR+4),147); // Positionneur
myGLCD.setColor(xRC, 0, 0);
myGLCD.fillRect(31, 139, (xR-1), 147);
myGLCD.setColor(0, 0, 0);
myGLCD.fillRect((xR+5), 139, 309, 147);
myGLCD.setColor(255, 255, 255);
myGLCD.fillRect(xG,179,(xG+4),187);
myGLCD.setColor(0, xGC, 0);
myGLCD.fillRect(31, 179, (xG-1), 187);
myGLCD.setColor(0, 0, 0);
myGLCD.fillRect((xG+5), 179, 309, 187);
myGLCD.setColor(255, 255, 255);
myGLCD.fillRect(xB,219,(xB+4),227);
myGLCD.setColor(0, 0, xBC);
myGLCD.fillRect(31, 219, (xB-1), 227);
myGLCD.setColor(0, 0, 0);
myGLCD.fillRect((xB+5), 219, 309, 227);
}Vient ensuite l'exemple de jeu Arduino mais je le laisserai pour mon prochain tutoriel afin que nous puissions mieux le comprendre car il est un peu plus complexe.
Code source complet du programme
Pour que le code fonctionne et se compile, vous devrez inclure un fichier ".c" supplémentaire dans le même répertoire que le sketch Arduino. Ce fichier est pour le troisième exemple de jeu et c'est un bitmap de l'oiseau. Pour plus de détails sur le fonctionnement de cette partie du code, vous pouvez consulter mon tutoriel particulier. Voici où vous pouvez télécharger ce fichier :
Fichiers Tutoriel Arduino TFT
1 fichier(s) 6,07 KB TéléchargerVoici le code source complet du programme :
/* Arduino TFT Tutorial
* Program made by Dejan Nedelkovski,
* www.HowToMechatronics.com
*/
/* Ce programme utilise les bibliothèques UTFT et URTouch
* faites par Henning Karlsen.
* Vous pouvez les trouver et les télécharger sur :
* www.RinkyDinkElectronics.com
*/
#include <UTFT.h>
#include <URTouch.h>
//==== Création des objets
UTFT myGLCD(SSD1289,38,39,40,41); // Les paramètres doivent être ajustés à votre modèle d'écran/shield
URTouch myTouch( 6, 5, 4, 3, 2);
//==== Définition des variables
extern uint8_t SmallFont[];
extern uint8_t BigFont[];
extern uint8_t SevenSegNumFont[];
extern unsigned int bird01[0x41A];
int x, y;
char currentPage, selectedUnit;
// Capteur ultrasonique
const int VCC = 13;
const int trigPin = 11;
const int echoPin = 12;
long duration;
int distanceInch, distanceCm;
// LED RVB
const int redLed = 10;
const int greenLed = 9;
const int blueLed = 8;
int xR=38;
int xG=38;
int xB=38;
// Flappy Bird
int xP = 319;
int yP = 100;
int yB = 30;
int fallRateInt = 0;
float fallRate =0;
int score=0;
const int button = 14;
int buttonState = 0;
void setup() {
// Configuration initiale
myGLCD.InitLCD();
myGLCD.clrScr();
myTouch.InitTouch();
myTouch.setPrecision(PREC_MEDIUM);
// Définition des modes de broches
pinMode(VCC, OUTPUT); // VCC
pinMode(trigPin, OUTPUT); // trigPin en sortie
pinMode(echoPin, INPUT); // echoPin en entrée
pinMode(redLed, OUTPUT);
pinMode(greenLed, OUTPUT);
pinMode(blueLed, OUTPUT);
pinMode(button, INPUT);
digitalWrite(VCC, HIGH); // +5V - Broche 13 comme VCC
drawHomeScreen(); // Dessine l'écran d'accueil
currentPage = '0'; // Indique que nous sommes à l'écran d'accueil
selectedUnit = '0'; // Indique l'unité sélectionnée pour le premier exemple, cm ou pouces
}
void loop() {
// Écran d'accueil
if (currentPage == '0') {
if (myTouch.dataAvailable()) {
myTouch.read();
x=myTouch.getX(); // Coordonnée X où l'écran a été pressé
y=myTouch.getY(); // Coordonnée Y où l'écran a été pressé
// Si on appuie sur le bouton Capteur de distance
if ((x>=35) && (x<=285) && (y>=90) && (y<=130)) {
drawFrame(35, 90, 285, 130); // Fonction personnalisée - Met en surbrillance le bouton quand il est pressé
currentPage = '1'; // Indique que nous sommes au premier exemple
myGLCD.clrScr(); // Efface l'écran
drawDistanceSensor(); // Appelé une seule fois
}
// Si on appuie sur le bouton Contrôle LED RVB
if ((x>=35) && (x<=285) && (y>=140) && (y<=180)) {
drawFrame(35, 140, 285, 180);
currentPage = '2';
myGLCD.clrScr();
drawLedControl();
}
// Si on appuie sur le bouton Jeu Birduino
if ((x>=35) && (x<=285) && (y>=190) && (y<=230)) {
drawFrame(35, 190, 285, 230);
currentPage = '3';
myGLCD.clrScr();
myGLCD.setColor(114, 198, 206);
myGLCD.fillRect(0,0,319,239);
drawGround();
drawPilars(xP,yP);
drawBird(30);
delay(1000);
}
}
}
// Exemple Capteur de distance
if (currentPage == '1') {
getDistance(); // Obtient la distance du capteur
if (myTouch.dataAvailable()) {
myTouch.read();
x=myTouch.getX();
y=myTouch.getY();
// Si on appuie sur le bouton Centimètres
if ((x>=10) && (x<=135) &&(y>=90) && (y<=163)) {
selectedUnit = '0';
}
// Si on appuie sur le bouton Pouces
if ((x>=10) && (x<=135) &&(y>=173) && (y<=201)) {
selectedUnit = '1';
}
// Si on appuie sur le bouton Retour
if ((x>=10) && (x<=60) &&(y>=10) && (y<=36)) {
drawFrame(10, 10, 60, 36);
currentPage = '0'; // Indique que nous sommes à l'écran d'accueil
myGLCD.clrScr();
drawHomeScreen(); // Dessine l'écran d'accueil
}
}
}
// Contrôle LED RVB
if (currentPage == '2') {
setLedColor();
if (myTouch.dataAvailable()) {
myTouch.read();
x=myTouch.getX();
y=myTouch.getY();
// Bouton retour
if ((x>=10) && (x<=60) &&(y>=10) && (y<=36)) {
drawFrame(10, 10, 60, 36);
currentPage = '0';
myGLCD.clrScr();
drawHomeScreen();
// Éteint la LED
analogWrite(redLed, 0);
analogWrite(greenLed, 0);
analogWrite(blueLed, 0);
}
}
}
//==== Cette section du code, pour l'exemple de jeu, est expliquée dans mon prochain tutoriel
// Jeu Birduino
if (currentPage == '3') {
//delay(1);
xP=xP-3;
drawPilars(xP, yP);
yB+=fallRateInt;
fallRate=fallRate+0.4;
fallRateInt= int(fallRate);
if (yB>=220) {
yB=220;
}
if(yB>=180 || yB<=0){
restartGame();
}
if((xP<=85) && (xP>=30) && (yB<=yP-2)){
restartGame();
}
if((xP<=85) && (xP>=30) && (yB>=yP+60)){
restartGame();
}
drawBird(yB);
if (xP<=-51){
xP=319;
yP = rand() % 100+20;
score++;
}
if (myTouch.dataAvailable()) {
myTouch.read();
x=myTouch.getX();
y=myTouch.getY();
if ((x>=0) && (x<=319) &&(y>=50) && (y<=239)) {
fallRate=-5;
}
}
buttonState = digitalRead(button);
if (buttonState == HIGH) {
fallRate=-5;
}
}
if (myTouch.dataAvailable()) {
myTouch.read();
x=myTouch.getX();
y=myTouch.getY();
if ((x>=10) && (x<=60) &&(y>=10) && (y<=36)) {
drawFrame(10, 10, 60, 36);
currentPage = '0';
myGLCD.clrScr();
drawHomeScreen();
analogWrite(redLed, 0);
analogWrite(greenLed, 0);
analogWrite(blueLed, 0);
}
}
}
// ====== Fonctions personnalisées ======
// drawHomeScreen - Fonction personnalisée
void drawHomeScreen() {
// Titre
myGLCD.setBackColor(0,0,0);
myGLCD.setColor(255, 255, 255);
myGLCD.setFont(BigFont);
myGLCD.print("Arduino TFT Tutorial", CENTER, 10);
myGLCD.setColor(255, 0, 0);
myGLCD.drawLine(0,32,319,32);
myGLCD.setColor(255, 255, 255);
myGLCD.setFont(SmallFont);
myGLCD.print("by HowToMechatronics.com", CENTER, 41);
myGLCD.setFont(BigFont);
myGLCD.print("Select Example", CENTER, 64);
// Bouton - Capteur de distance
myGLCD.setColor(16, 167, 103);
myGLCD.fillRoundRect (35, 90, 285, 130);
myGLCD.setColor(255, 255, 255);
myGLCD.drawRoundRect (35, 90, 285, 130);
myGLCD.setFont(BigFont);
myGLCD.setBackColor(16, 167, 103);
myGLCD.print("DISTANCE SENSOR", CENTER, 102);
// Bouton - Contrôle LED RVB
myGLCD.setColor(16, 167, 103);
myGLCD.fillRoundRect (35, 140, 285, 180);
myGLCD.setColor(255, 255, 255);
myGLCD.drawRoundRect (35, 140, 285, 180);
myGLCD.setFont(BigFont);
myGLCD.setBackColor(16, 167, 103);
myGLCD.print("RGB LED CONTROL", CENTER, 152);
// Bouton - Birduino
myGLCD.setColor(16, 167, 103);
myGLCD.fillRoundRect (35, 190, 285, 230);
myGLCD.setColor(255, 255, 255);
myGLCD.drawRoundRect (35, 190, 285, 230);
myGLCD.setFont(BigFont);
myGLCD.setBackColor(16, 167, 103);
myGLCD.print("BIRDUINO GAME", CENTER, 202);
}
// Met en surbrillance le bouton quand il est pressé
void drawFrame(int x1, int y1, int x2, int y2) {
myGLCD.setColor(255, 0, 0);
myGLCD.drawRoundRect (x1, y1, x2, y2);
while (myTouch.dataAvailable()) myTouch.read();
myGLCD.setColor(255, 255, 255);
myGLCD.drawRoundRect (x1, y1, x2, y2);
}
//====================================================
void drawDistanceSensor() {
myGLCD.setColor(100, 155, 203);
myGLCD.fillRoundRect (10, 10, 60, 36);
myGLCD.setColor(255, 255, 255);
myGLCD.drawRoundRect (10, 10, 60, 36);
myGLCD.setFont(BigFont);
myGLCD.setBackColor(100, 155, 203);
myGLCD.print("<-", 18, 15);
myGLCD.setBackColor(0, 0, 0);
myGLCD.setFont(SmallFont);
myGLCD.print("Back to Main Menu", 70, 18);
myGLCD.setFont(BigFont);
myGLCD.print("Ultrasonic Sensor", CENTER, 50);
myGLCD.print("HC-SR04", CENTER, 76);
myGLCD.setColor(255, 0, 0);
myGLCD.drawLine(0,100,319,100);
myGLCD.setBackColor(0, 0, 0);
myGLCD.setColor(255, 255, 255);
myGLCD.setFont(SmallFont);
myGLCD.print("Select Unit", 10, 114);
myGLCD.setFont(BigFont);
myGLCD.print("Distance:", 130, 120);
myGLCD.setColor(223, 77, 55);
myGLCD.fillRoundRect (10, 135, 90, 163);
myGLCD.setColor(225, 255, 255);
myGLCD.drawRoundRect (10, 135, 90, 163);
myGLCD.setBackColor(223, 77, 55);
myGLCD.setColor(255, 255, 255);
myGLCD.print("cm", 33, 140);
myGLCD.setColor(223, 77, 55);
myGLCD.fillRoundRect (10, 173, 90, 201);
myGLCD.setColor(255, 255, 255);
myGLCD.drawRoundRect (10, 173, 90, 201);
myGLCD.setBackColor(223, 77, 55);
myGLCD.setColor(255, 255, 255);
myGLCD.print("inch", 17, 180);
myGLCD.setBackColor(0, 0, 0);
myGLCD.setFont(SmallFont);
myGLCD.print("Source code at: HowToMechatronics.com", CENTER, 220);
}
//====================================================
//===== getDistance - Fonction personnalisée
void getDistance() {
// Efface le trigPin
digitalWrite(trigPin, LOW);
delayMicroseconds(2);
// Met le trigPin à l'état HIGH pendant 10 microsecondes
digitalWrite(trigPin, HIGH);
delayMicroseconds(10);
digitalWrite(trigPin, LOW);
// Lit le echoPin, retourne le temps de trajet de l'onde sonore en microsecondes
duration = pulseIn(echoPin, HIGH);
// Calcul de la distance
distanceCm= duration*0.034/2;
distanceInch= distanceCm/2.53;
// Affiche la distance en centimètres
if (selectedUnit == '0' && distanceCm <=400) {
myGLCD.setFont(SevenSegNumFont);
myGLCD.setColor(0, 255, 0);
myGLCD.setBackColor(0, 0, 0);
myGLCD.printNumI(distanceCm,130, 145, 3,'0');
myGLCD.setFont(BigFont);
myGLCD.print("cm ", 235, 178);
}
// Affiche la distance en pouces
if (selectedUnit == '1' && distanceCm <=160) {
myGLCD.setFont(SevenSegNumFont);
myGLCD.setColor(0, 255, 0);
myGLCD.setBackColor(0, 0, 0);
myGLCD.printNumI(distanceInch,130, 145, 3,'0');
myGLCD.setFont(BigFont);
myGLCD.print("inch", 235, 178);
}
delay(10);
}
//====================================================
void drawLedControl() {
myGLCD.setColor(100, 155, 203);
myGLCD.fillRoundRect (10, 10, 60, 36);
myGLCD.setColor(255, 255, 255);
myGLCD.drawRoundRect (10, 10, 60, 36);
myGLCD.setFont(BigFont);
myGLCD.setBackColor(100, 155, 203);
myGLCD.print("<-", 18, 15);
myGLCD.setBackColor(0, 0, 0);
myGLCD.setFont(SmallFont);
myGLCD.print("Back to Main Menu", 70, 18);
myGLCD.setFont(BigFont);
myGLCD.print("RGB LED Control", CENTER, 50);
myGLCD.print("LED Color:", 10, 95);
myGLCD.print("R", 10, 135);
myGLCD.print("G", 10, 175);
myGLCD.print("B", 10, 215);
myGLCD.setColor(255, 0, 0);
myGLCD.drawLine(0,75,319,75);
myGLCD.setColor(255, 255, 255);
myGLCD.drawRect(30, 138, 310, 148); // R - Curseur
myGLCD.drawRect(30, 178, 310, 188);
myGLCD.drawRect(30, 218, 310, 228);
}
//====================================================
//============= setLedColor() - Fonction personnalisée
void setLedColor() {
if (myTouch.dataAvailable()) {
myTouch.read();
x=myTouch.getX();
y=myTouch.getY();
// Zone du curseur de couleur rouge
if( (y>=130) && (y<=156)) {
xR=x;
if (xR<=38) {
xR=38;
}
if (xR>=303){
xR=303;
}
}
// Zone du curseur de couleur verte
if( (y>=170) && (y<=196)) {
xG=x;
if (xG<=38) {
xG=38;
}
if (xG>=303){
xG=303;
}
}
// Zone du curseur de couleur bleue
if( (y>=210) && (y<=236)) {
xB=x;
if (xB<=38) {
xB=38;
}
if (xB>=303){
xB=303;
}
}
}
// Mappe les valeurs de l'axe X de 38 à 0 et 310 à 255
int xRC = map(xR,38,310,0,255);
int xGC = map(xG,38,310,0,255);
int xBC = map(xB,38,310,0,255);
// Envoie le signal PWM aux broches de la LED
analogWrite(redLed, xRC);
analogWrite(greenLed, xGC);
analogWrite(blueLed, xBC);
// Dessine un rectangle avec la dernière combinaison de couleurs
myGLCD.setColor(xRC, xGC, xBC);
myGLCD.fillRoundRect(175, 87, 310, 119);
// Dessine les positionneurs
myGLCD.setColor(255, 255, 255);
myGLCD.fillRect(xR,139,(xR+4),147);
myGLCD.setColor(xRC, 0, 0);
myGLCD.fillRect(31, 139, (xR-1), 147);
myGLCD.setColor(0, 0, 0);
myGLCD.fillRect((xR+5), 139, 309, 147);
myGLCD.setColor(255, 255, 255);
myGLCD.fillRect(xG,179,(xG+4),187);
myGLCD.setColor(0, xGC, 0);
myGLCD.fillRect(31, 179, (xG-1), 187);
myGLCD.setColor(0, 0, 0);
myGLCD.fillRect((xG+5), 179, 309, 187);
myGLCD.setColor(255, 255, 255);
myGLCD.fillRect(xB,219,(xB+4),227);
myGLCD.setColor(0, 0, xBC);
myGLCD.fillRect(31, 219, (xB-1), 227);
myGLCD.setColor(0, 0, 0);
myGLCD.fillRect((xB+5), 219, 309, 227);
}
//====================================================
void drawGround() {
myGLCD.setColor(221,216,148);
myGLCD.fillRect(0, 215, 319, 239);
myGLCD.setColor(47,175,68);
myGLCD.fillRect(0, 205, 319, 214);
myGLCD.setColor(0, 0, 0);
myGLCD.setBackColor(221, 216, 148);
myGLCD.setFont(BigFont);
myGLCD.print("Score:",5,220);
myGLCD.setFont(SmallFont);
myGLCD.print("HowToMechatronics.com", 140, 220);
}
void drawPilars(int x, int y) {
if (x>=270){
myGLCD.setColor(0, 200, 20);
myGLCD.fillRect(318, 0, x, y-1);
myGLCD.setColor(0, 0, 0);
myGLCD.drawRect(319, 0, x-1, y);
myGLCD.setColor(0, 200, 20);
myGLCD.fillRect(318, y+81, x, 203);
myGLCD.setColor(0, 0, 0);
myGLCD.drawRect(319, y+80, x-1, 204);
} else if( x<=268) {
myGLCD.setColor(114, 198, 206);
myGLCD.fillRect(x+51, 0, x+53, y);
myGLCD.setColor(0, 200, 20);
myGLCD.fillRect(x+49, 1, x+1, y-1);
myGLCD.setColor(0, 0, 0);
myGLCD.drawRect(x+50, 0, x, y);
myGLCD.setColor(114, 198, 206);
myGLCD.fillRect(x-1, 0, x-3, y);
myGLCD.setColor(114, 198, 206);
myGLCD.fillRect(x+51, y+80, x+53, 204);
myGLCD.setColor(0, 200, 20);
myGLCD.fillRect(x+49, y+81, x+1, 203);
myGLCD.setColor(0, 0, 0);
myGLCD.drawRect(x+50, y+80, x, 204);
myGLCD.setColor(114, 198, 206);
myGLCD.fillRect(x-1, y+80, x-3, 204);
}
myGLCD.setColor(0, 0, 0);
myGLCD.setBackColor(221, 216, 148);
myGLCD.setFont(BigFont);
myGLCD.printNumI(score, 100, 220);
}
//====================================================
void drawBird(int y) {
if(y<=219) {
myGLCD.drawBitmap (50, y, 35, 30, bird01);
myGLCD.setColor(114, 198, 206);
myGLCD.fillRoundRect(50,y,85,y-6);
myGLCD.fillRoundRect(50,y+30,85,y+36);
} else if(y>=200) {
myGLCD.drawBitmap (50, 200, 35, 30, bird01);
myGLCD.setColor(114, 198, 206);
myGLCD.fillRoundRect(50,200,85,200-6);
myGLCD.fillRoundRect(50,200+30,85,200+36);
}
}
void gameOver() {
myGLCD.clrScr();
myGLCD.setColor(255, 255, 255);
myGLCD.setBackColor(0, 0, 0);
myGLCD.setFont(BigFont);
myGLCD.print("GAME OVER", CENTER, 40);
myGLCD.print("Score:", 100, 80);
myGLCD.printNumI(score,200, 80);
myGLCD.print("Restarting...", CENTER, 120);
myGLCD.setFont(SevenSegNumFont);
myGLCD.printNumI(2,CENTER, 150);
delay(1000);
myGLCD.printNumI(1,CENTER, 150);
delay(1000);
myGLCD.setColor(114, 198, 206);
myGLCD.fillRect(0,0,319,239);
drawBird(30);
drawGround();
delay(1000);
}
//====================================================
void restartGame() {
delay(1000);
gameOver();
xP=319;
yB=30;
fallRate=0;
score=0;
}Processus de fabrication
- Créer un verrou RFID sécurisé avec Arduino – Guide étape par étape
- Construire un piano tactile capacitif portable avec Arduino – Guide étape par étape
- Créer des animations et jeux sur LCD avec Arduino UNO
- Afficher des images sur un écran TFT 1,17 pouces avec Arduino UNO
- Afficher des images BMP depuis carte SD sur écran TFT LCD 2,4″ Shield Arduino
- Corriger les problèmes tactiles du shield TFT LCD 2,4″ pour Arduino
- Construire une Station Météo Arduino Fiable avec Capteurs DHT
- Projet Arduino LCD DIY : Assemblage avec résistances, bouton poussoir et afficheur 16x2
- Tutoriel Arduino Débutant 01 : Démarrez votre Premier Projet