Arduino avec écran tactile : 16 étapes

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

Vous souhaitez créer des menus plus personnalisés et de meilleures interfaces homme/machine ? Pour de tels projets, vous pouvez utiliser un Arduino et un écran tactile. Cette idée vous semble-t-elle alléchante ? Si c'est le cas, regardez la vidéo aujourd'hui, où je vais vous montrer un assemblage avec un Mega Arduino et un écran tactile. Vous verrez comment créer les motifs que vous souhaitez sur l'écran, et également comment déterminer la région de l'écran à toucher et activer une commande spécifique. J'insiste sur le fait que j'ai choisi d'utiliser l'Arduino Mega en raison de sa quantité de broches.

Alors aujourd'hui, je vais vous présenter l'écran tactile, ses fonctions graphiques et comment saisir le point de contact sur l'écran. Créons également un exemple contenant tous les éléments, tels que le positionnement, l'écriture, la conception de formes, les couleurs et le toucher.

Étape 1: Arduino Mega 2560

Étape 2: Écran LCD TFT 2.4"

Cet écran que nous utilisons dans notre projet a une particularité intéressante: il possède une carte SD. Cependant, l'écriture et la lecture impliquées dans cela seront montrées dans une autre vidéo, que je produirai bientôt. L'objectif de la leçon d'aujourd'hui est d'aborder spécifiquement les fonctionnalités graphiques et tactiles de cet écran.

Caractéristiques:

Dimension de l'écran: 2,4 pouces

Emplacement pour carte microSD

LCD couleur: 65K

Pilote: ILI9325

Résolution: 240x320

Écran tactile: écran tactile résistif à 4 fils

Interface: données 8 bits, plus 4 lignes de contrôle

Tension de fonctionnement: 3,3-5 V

Dimensions: 71x52x7mm

Étape 3: Bibliothèques

Ajoutez les bibliothèques:

"Adafruit_GFX"

"SWTFT"

"Écran tactile"

Cliquez sur les liens et téléchargez les bibliothèques.

Décompressez le fichier et collez-le dans le dossier des bibliothèques de l'IDE Arduino.

C:/Program Files (x86)/Arduino/bibliothèques

Noter

Avant de commencer notre programme, nous devons aborder quelque chose d'important: l'étalonnage TOUCH.

À l'aide d'un programme simple pour afficher les points de contact à l'écran, mémorisez la valeur des points (x, y) à chaque extrémité (surlignée en jaune dans la figure ci-dessous). Ces valeurs sont importantes pour mapper le toucher aux points graphiques sur l'écran.

#include //Portas de leitura das coordenadas do touchvoid #define YP A1 // Y+ est sur Analog1 #define XM A2 // X- est sur Analog2 #define YM 7 // Y- est sur Digital7 #define XP 6 // X+ est sur Digital6 //objet pour manipuler les événements de cet écran tactile = TouchScreen(XP, YP, XM, YM); void setup() { Serial.begin(9600); } void loop() { TSPoint touchPoint = ts.getPoint();//pega o touch (x, y, z=pressao) Serial.print("X: "); Serial.println(touchPoint.x); Serial.print("O: "); Serial.println(touchPoint.y); retard(1000); }

Étape 4: Fonctions

Voyons maintenant quelques fonctions graphiques que les bibliothèques peuvent nous offrir.

1. dessinerPixel

La fonction drawPixel est chargée de peindre un seul point sur l'écran au point donné.

void drawPixel (int16_t x, int16_t et, uint16_t color);

2. drawLine

La fonction drawLine est chargée de tracer une ligne à partir de deux points.

void drawLine (int16_t x0, int16_t y0, int16_t x1, int16_t y1, uint16_t color);

3. dessinerFastVLine

La fonction drawFastVLine est chargée de tracer une ligne verticale à partir d'un point et d'une hauteur.

void drawFastVLine (int16_t x, int16_t y, int16_th, uint16_t color);

4. dessinerFastHLline

La fonction drawFastHLine est chargée de tracer une ligne horizontale à partir d'un point et d'une largeur.

void drawFastHLine (int16_t x, int16_t y, int16_t w, uint16_t color);

5. dessinerRect

La fonction drawRect est chargée de dessiner un rectangle à l'écran, en passant un point d'origine, sa hauteur et sa largeur.

void drawRect (int16_t x, int16_t y, int16_t w, int16_th, uint16_t color);

6. fillRect

La fonction fillRect est la même que drawRect, mais le rectangle sera rempli avec la couleur donnée.

void fillRect (int16_t x, int16_t y, int16_t w, int16_th, uint16_t color);

7. dessinerRoundRect

La fonction drawRoundRect est la même que drawRect, mais le rectangle aura des bords arrondis.

void drawRoundRect (int16_t x0, int16_t y0, int16_t w, int16_th, rayon int16_t, couleur uint16_t);

8. fillRoundRect

La fonction fillRoundRect est la même que drawRoundRect, mais le rectangle sera rempli avec la couleur donnée.

void fillRoundRect (int16_t x0, int16_t y0, int16_t w, int16_th, rayon int16_t, couleur uint16_t);

9. dessinerTriangle

La fonction drawTriangle est chargée de tracer un triangle sur l'écran, passant le point des 3 sommets.

void drawTriangle (int16_t x0, int16_t y0, int16_t x1, int16_t y1, int16_t x2, int16_t y2, uint16_t color);

10. remplirTriangle

La fonction fillTriangle est la même que drawTriangle, mais le triangle sera rempli avec la couleur donnée.

void fillTriangle (int16_t x0, int16_t y0, int16_t x1, int16_t y1, int16_t x2, int16_t y2, uint16_t color);

11. dessinerCercle

La fonction drawCircle est chargée de tracer un cercle à partir d'un point source et d'un rayon.

void drawCircle (int16_t x0, int16_t y0, int16_t r, uint16_t color);

12. fillCircle

La fonction fillCircle est la même que drawCircle, mais le cercle sera rempli de la couleur donnée.

void fillCircle (int16_t x0, int16_t y0, int16_t r, uint16_t color);

13. remplirScreen

La fonction fillScreen est chargée de remplir l'écran avec une seule couleur.

void fillScreen (couleur uint16_t);

14. setCurseur

La fonction setCursor est chargée de positionner le curseur pour écrire à un point donné.

void setCursor (int16_t x, int16_t y);

15. setTextColor

La fonction setTextColor est chargée d'attribuer une couleur au texte à écrire. Nous avons deux façons de l'utiliser:

void setTextColor (uint16_t c); // définit la couleur d'écriture onlyvoid setTextColor (uint16_t c, uint16_t bg); // définit la couleur d'écriture et la couleur de fond

16. setTextSize

La fonction setTextSize est chargée d'attribuer une taille au texte qui sera écrit.

void setTextSize (uint8_t s);

17. setTextWrap

La fonction setTextWrap est chargée de casser la ligne si elle atteint la limite de l'écran.

void setTextWrap (booléen w);

18. setRotation

La fonction setRotation est responsable de la rotation de l'écran (paysage, portrait).

void setRotation (uint8_t r); // 0 (standard), 1, 2, 3

Étape 5: Exemple

Nous allons créer un programme dans lequel nous utiliserons la plupart des ressources que l'écran nous fournit.

Écrivons des chaînes de différentes tailles, créons trois figures géométriques et reprenons l'événement tactile sur elles, chaque fois que nous touchons l'une des figures, nous aurons le retour du nom de la figure juste en dessous d'elles.

Étape 6: Bibliothèques

Commençons par définir les bibliothèques que nous utiliserons.

#include //responsável pela parte gráfica

#include //responsável por pegar os toques na tela

#include //comunicação com o display

#include //comunicação com o display

#include "math.h" // puissance de calcul

Étape 7: définit

Nous allons définir quelques macros pour les broches, ainsi que les valeurs importantes que nous utiliserons.

//Portas de leitura das coordenadas do touch#define YP A1 // Y+ #define XM A2 // X- #define YM 7 // Y- #define XP 6 // X+ //valores encontrados através da calibração do touch // faça um código simples para imprimir os valores (x, y) a cada toque //então encontre os valores nas extremidades max/min (x, y) #define TS_MINX 130 #define TS_MINY 80 #define TS_MAXX 900 #define TS_MAXY 900 // tamanho dos textos #define TEXT_SIZE_L 3 #define TEXT_SIZE_M 2 #define TEXT_SIZE_S 1 //posicionamento dos textos de feedback #define FEEDBACK_LABEL_X 10 #define FEEDBACK_LABEL_Y 200 #define FEEDBACK press_TOUCH_X 120 #define_PRESSEDEF_F 10 #définir MAXPRESSURE 1000

Nous continuons avec la définition de quelques macros.

//Associa o nome das cores aos valores correspondantes#define BLACK 0x0000 #define RED 0xF800 #define GREEN 0x07E0 #define CYAN 0x07FF #define YELLOW 0xFFE0 #define WHITE 0xFFFF //dados de criação do circulo const = 30; circle_radius const int cercle_x = 240; const int cercle_y = 125; //objet pour manipuler les événements de cet écran tactile = TouchScreen(XP, YP, XM, YM); //objet pour manipuler la partie graphique SWTFT tft;

Étape 8: configuration

Dans l'installation, nous allons initialiser notre objet de contrôle graphique et faire les premières configurations.

void setup() { Serial.begin(9600); //réinitialiser l'objet de la bibliothèque graphique tft.reset(); //initialize objeto controlador da lib grafica tft.begin(); retard (500); //rotation d'un paysage pour le paysage tft.setRotation(1); //pinta toda toda de preto tft.fillScreen(BLACK); //chama a função para iniciar nossas configurações initialSettings(); }

Étape 9: boucle

Dans la boucle, nous allons ramasser le point auquel nous touchons l'écran et voir si le toucher s'est produit dans l'une des figures.

void loop() { TSPoint touchPoint = ts.getPoint();//pega o touch (x, y, z=pressao) pinMode(XM, OUTPUT); pinMode(YP, SORTIE); //mapeia o ponto de touch para o (x, y) grafico // o fato de termos rotacionado a tela para landscape implica no X receber o mapeamento de Y TSPoint p; p.x = map(touchPoint.y, TS_MINY, TS_MAXY, 0, 320); p.y = map(touchPoint.x, TS_MINX, TS_MAXX, 240, 0); //vérifier qu'il n'y a pas de pression suffisante pour que if (touchPoint.z > MINPRESSURE && touchPoint.z < MAXPRESSURE) { //verifica se tocou no retangulo if(pointInRect(p)) { writeShape("Rect"); } //vérifier qu'il n'y a pas de triangle else if(pointInsideTriangle(TSPoint(110, 150, 0), TSPoint(150, 100, 0), TSPoint(190, 150, 0), p)) { writeShape("Triangle"); } //verifica se tocou no circulo else if(pointInCircle(p)) { writeShape("Cercle"); } } }

Étape 10: Vérifiez si nous touchons le cercle

Dans cette étape, nous nous occupons de l'initialisation de l'écran et définissons les couleurs des textes à afficher.

/*Desenha na tela os elementos */ void initialSettings() { tft.setTextColor(WHITE); tft.setTextSize(TEXT_SIZE_S); tft.println("ACESSE"); tft.setTextColor(JAUNE); tft.setTextSize(TEXT_SIZE_M); tft.println("BLOG MEU"); tft.setTextColor(GREEN); tft.setTextSize(TEXT_SIZE_L); tft.println("FERNANDOK. COM"); createRect(); createTriangle(); createCircle(); tft.setCursor(FEEDBACK_LABEL_X, FEEDBACK_LABEL_Y); tft.setTextColor(CYAN); tft.setTextSize(TEXT_SIZE_L); tft.println("FORME: "); }

Étape 11: Fonctions de création de formes géométriques

Nous créons un rectangle, un triangle et un cercle avec les origines que nous déterminons.

//cria um retangulo com origem (x, y) = (10, 100)//width = 80 e height = 50 void createRect() { tft.fillRect(10, 100, 80, 50, RED); tft.drawRect(10, 100, 80, 50, BLANC); } //cria um triangulo com os vertices: //A = (110, 150); B = (150, 100); C = (190, 150) void createTriangle() { tft.fillTriangle(110, 150, 150, 100, 190, 150, JAUNE); tft.drawTriangle(110, 150, 150, 100, 190, 150, BLANC); } // cria um circulo com origem no ponto (x, y) = (240, 125) e raio = 30 void createCircle() { tft.fillCircle(240, 125, 30, GREEN); tft.drawCircle(240, 125, 30, BLANC); }

Étape 12: Vérifiez si nous touchons le rectangle

Cette fonction vérifie si le point est à l'intérieur du rectangle.

//Função que verifica se o ponto está dentro do retângulobool pointInRect(TSPoint p) { //max/min X do retangulo if(px >= 10 && px <= 90) { //max/min Y do retangulo if(py = 100) { renvoie vrai; } } renvoie faux; }

Étape 13: Vérifiez si nous touchons le cercle

C'est la même chose qu'avec le cercle.

//distancia entre pontos D = raiz((xb-xa)^2 + (yb-ya)^2)//vefifica se o ponto está dentro do circulo //se a distancia do ponto pra origem do circulo for menor ou igual ao raio, ele está dentro bool pointInCircle(TSPoint p) { float distance = sqrt(pow(px - circle_x, 2) + pow(py - circle_y, 2)); if(distance <= circle_radius) { return true; } renvoie faux; }

Étape 14: Vérifiez si nous touchons le triangle

La même vérification de celle du point se produit également à l'intérieur du triangle.

// Função que verifica se o ponto p esta dentro do triangulo ABC// Se estiver dentro retorna TRUE senão retorna FALSE bool pointInsideTriangle(TSPoint a, TSPoint b, TSPoint c, TSPoint p){ float ABC = triangleArea(a, b, c); float ACP = triangleArea(a, c, p); float ABP = triangleArea(a, b, p); float CPB = triangleArea(c, p, b); if(ABC == ACP+ABP+CPB){ renvoie vrai; } renvoie faux; } // Função que calcula a area de um triangulo com base no pontos x, y float triangleArea(TSPoint a, TSPoint b, TSPoint c){ return fabs(((bx - ax)*(cy - ay) - (cx - ax) * (par - ay))/2); }

Étape 15: Fonction pour imprimer le nom de l'objet touché

Ici, nous écrivons sur l'écran le nom de la figure géométrique qui est utilisée.

//screve na tela o nome da figura geométrica que foi tocadavoid writeShape(String shape) { tft.fillRect(FEEDBACK_TOUCH_X, FEEDBACK_TOUCH_Y, 170, 30, BLACK); tft.setCursor(FEEDBACK_TOUCH_X, FEEDBACK_TOUCH_Y); tft.setTextSize(TEXT_SIZE_G); tft.setTextColor(BLANC); tft.println(forme); }

Étape 16: Fichiers

Téléchargez les fichiers:

INO

PDF