Arduino amb pantalla tàctil: 16 passos

2024 Autora: John Day | [email protected]. Última modificació: 2024-01-30 08:15

Voleu crear menús més personalitzats i millors interfícies humans / màquines? Per a aquests projectes, podeu utilitzar un Arduino i una pantalla tàctil. Sona atractiva aquesta idea? Si és així, mireu el vídeo avui, on us mostraré un muntatge amb un Mega Arduino i una pantalla tàctil. Veureu com fer els dissenys que vulgueu a la pantalla i també com determinar la regió de la pantalla per tocar i activar una ordre específica. Destaco que vaig triar utilitzar l'Arduino Mega per la seva quantitat de pins.

Avui, doncs, us presentaré la pantalla tàctil, les seves funcions gràfiques i la manera d’agafar el punt tàctil a la pantalla. Creem també un exemple que contingui tots els elements, com ara posicionament, escriptura, disseny de formes, colors i tacte.

Pas 1: Arduino Mega 2560

Pas 2: pantalla LCD TFT de 2,4"

Aquesta pantalla que fem servir en el nostre projecte té una característica interessant: té una targeta SD. Tanmateix, l’escriptura i la lectura que hi participen es mostraran en un altre vídeo, que aviat produiré. L’objectiu de la lliçó d’avui és abordar específicament les característiques gràfiques i de pantalla tàctil d’aquesta pantalla.

Característiques:

Dimensió de la pantalla: 2,4 polzades

Ranura per a targetes MicroSD

LCD en color: 65K

Controlador: ILI9325

Resolució: 240 x 320

Pantalla tàctil: pantalla tàctil resistiva de 4 fils

Interfície: dades de 8 bits, més 4 línies de control

Voltatge de funcionament: 3,3-5V

Dimensions: 71 x 52 x 7 mm

Pas 3: biblioteques

Afegiu les biblioteques:

"Adafruit_GFX"

"SWTFT"

"Pantalla tàctil"

Feu clic als enllaços i descarregueu les biblioteques.

Descomprimiu el fitxer i enganxeu-lo a la carpeta de biblioteques de l'IDE Arduino.

C: / Program Files (x86) / Arduino / libraries

Nota

Abans de començar el nostre programa, hem d’abordar quelcom important: el calibratge TOUCH.

Mitjançant un programa senzill per obtenir els punts tàctils a la pantalla, emmagatzemeu el valor dels punts (x, y) a cada extrem (ressaltats en groc a la figura següent). Aquests valors són importants per assignar el tacte als punts gràfics de la pantalla.

#include // Portas de leitura das coordenadas do touchvoid #define YP A1 // Y + is on Analog1 #define XM A2 // X- is on Analog2 #define YM 7 // Y- is on Digital7 #define XP 6 // X + is on Digital6 // objecte per a manipulació de dos esdeveniments de toque na tela TouchScreen ts = TouchScreen (XP, YP, XM, YM); configuració nul·la () {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 ("Y:"); Serial.println (touchPoint.y); retard (1000); }

Pas 4: Funcions

Vegem ara algunes funcions gràfiques que ens poden oferir les biblioteques.

1. dibuixar Pixel

La funció drawPixel s’encarrega de pintar un sol punt a la pantalla en el punt indicat.

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

2. drawLine

La funció drawLine s’encarrega de dibuixar una línia des de dos punts.

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

3. drawFastVLine

La funció drawFastVLine s’encarrega de dibuixar una línia vertical des d’un punt i una alçada.

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

4. drawFastHLine

La funció drawFastHLine s’encarrega de dibuixar una línia horitzontal des d’un punt i una amplada.

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

5. drawRect

La funció drawRect s’encarrega de dibuixar un rectangle a la pantalla, passant un punt d’origen, la seva alçada i amplada.

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

6. fillRect

La funció fillRect és la mateixa que drawRect, però el rectangle s’omplirà amb el color donat.

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

7. drawRoundRect

La funció drawRoundRect és la mateixa que drawRect, però el rectangle tindrà vores arrodonides.

void drawRoundRect (int16_t x0, int16_t y0, int16_t w, int16_t h, int16_t radi, uint16_t color);

8. fillRoundRect

La funció fillRoundRect és la mateixa que drawRoundRect, però el rectangle s’omplirà amb el color donat.

void fillRoundRect (int16_t x0, int16_t y0, int16_t w, int16_t h, int16_t radi, uint16_t color);

9. dibuixarTriangle

La funció drawTriangle s’encarrega de dibuixar un triangle a la pantalla, passant el punt dels 3 vèrtexs.

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

10. fillTriangle

La funció fillTriangle és la mateixa que drawTriangle, però el triangle s’omplirà amb el color donat.

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

11. dibuixarCercle

La funció drawCircle s’encarrega de dibuixar un cercle des d’un punt font i un radi.

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

12. omplirCercle

La funció fillCircle és la mateixa que drawCircle, però el cercle s’omplirà amb el color donat.

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

13. fillScreen

La funció fillScreen s’encarrega d’omplir la pantalla amb un sol color.

void fillScreen (uint16_t color);

14. setCursor

La funció setCursor és la responsable de situar el cursor per escriure en un punt determinat.

void setCursor (int16_t x, int16_t y);

15. setTextColor

La funció setTextColor s’encarrega d’assignar un color al text que s’ha d’escriure. Tenim dues maneres d’utilitzar-lo:

void setTextColor (uint16_t c); // defineix el color de l’escriptura només s’evita setTextColor (uint16_t c, uint16_t bg); // estableix el color d'escriptura i el color de fons

16. setTextSize

La funció setTextSize s’encarrega d’assignar una mida al text que s’escriurà.

void setTextSize (uint8_t s);

17. setTextWrap

La funció setTextWrap s’encarrega de trencar la línia si arriba al límit de la pantalla.

void setTextWrap (w booleà);

18. setRotació

La funció setRotation s’encarrega de girar la pantalla (horitzontal, vertical).

void setRotation (uint8_t r); // 0 (estàndard), 1, 2, 3

Pas 5: Exemple

Crearem un programa en què utilitzarem la majoria dels recursos que ens proporciona la pantalla.

Escrivim algunes cadenes de diferents mides, creem tres figures geomètriques i recollim l’esdeveniment tàctil, cada vegada que toquem una de les figures, tindrem la retroalimentació del nom de la figura just a sota d’elles.

Pas 6: Biblioteques

Primer definim les biblioteques que farem servir.

#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" // potencia calcular

Pas 7: defineix

Definirem algunes macros per als pins i també els valors importants que farem servir.

// Portas de leitura das coordenadas do touch # define YP A1 // Y + #define XM A2 // X- #define YM 7 // Y- #define XP 6 // X + // valores found através da calibração do touch // faça um codi simple per imprimir els valors (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_TOUCH_X 120 #define per definir FEEDB_ 10 #define MAXPRESSURE 1000

Continuem amb la definició d'algunes macros.

// Associa o nome das cores als valores correspondents # 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 int circle_radius = 30; const int circle_x = 240; const int circle_y = 125; // objecte per manipulao dos esdeveniments de tocar en tela TouchScreen ts = TouchScreen (XP, YP, XM, YM); // objeto para manipulacao da parte grafica SWTFT tft;

Pas 8: Configuració

A la configuració, inicialitzarem el nostre objecte de control gràfic i farem les primeres configuracions.

configuració nul·la () {Serial.begin (9600); // reseta o objecte da lib grafica tft.reset (); // inicialització objecte controlador da lib grafica tft.begin (); retard (500); // rotaciona a tela para landscape tft.setRotation (1); // pinta a tela tota de preto tft.fillScreen (BLACK); // chama a função per iniciar nossas configurações initialSettings (); }

Pas 9: bucle

Al bucle, recollirem el punt en què toquem la pantalla i veurem si el tacte es produeix en alguna de les figures.

bucle buit () {TSPoint touchPoint = ts.getPoint (); // pega o touch (x, y, z = pressao) pinMode (XM, OUTPUT); pinMode (YP, OUTPUT); // mapeia o ponto de touch para o (x, y) grafico // o fato de terminos rotacionado a tela para landscape implica no X receber o mapeamento de Y TSPoint p; p.x = mapa (touchPoint.y, TS_MINY, TS_MAXY, 0, 320); p.y = mapa (touchPoint.x, TS_MINX, TS_MAXX, 240, 0); // verificació de la premsa sense haver estat suficient si (touchPoint.z> MINPRESSURE && touchPoint.z <MAXPRESSURE) {// verificació si no es retangula if (pointInRect (p)) {writeShape ("Rect"); } // verificació si no hi ha cap triangle més if (pointInsideTriangle (TSPoint (110, 150, 0), TSPoint (150, 100, 0), TSPoint (190, 150, 0), p)) {writeShape ("Triangle"); } // verificació si no hi ha circulació else if (pointInCircle (p)) {writeShape ("Circle"); }}}

Pas 10: comproveu si toquem el cercle

En aquest pas ens ocupem de la inicialització de la pantalla i definim els colors dels textos que es mostraran.

/ * Desenha na tela os elements * / void initialSettings () {tft.setTextColor (WHITE); tft.setTextSize (TEXT_SIZE_S); tft.println ("ACESSE"); tft.setTextColor (GROC); tft.setTextSize (TEXT_SIZE_M); tft.println ("MEU BLOG"); tft.setTextColor (VERD); tft.setTextSize (TEXT_SIZE_L); tft.println ("FERNANDOK. COM"); createRect (); createTriangle (); createCircle (); tft.setCursor (FEEDBACK_LABEL_X, FEEDBACK_LABEL_Y); tft.setTextColor (CIAN); tft.setTextSize (TEXT_SIZE_L); tft.println ("FORMA:"); }

Pas 11: Funcions de creació de formes geomètriques

Creem un rectangle, un triangle i un cercle amb els orígens que determinem.

// 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, GROC); 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); }

Pas 12: comproveu si toquem el rectangle

Aquesta funció comprova si el punt es troba dins del rectangle.

// Funció que es verifica si el punt està dins de retângulobool pointInRect (TSPoint p) {// max / min X do retangulo if (px> = 10 && px <= 90) {// max / min Y do retangulo if (py = 100) {return true; }} retornar fals; }

Pas 13: comproveu si toquem el cercle

Això és el mateix que amb el 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 (distància <= circle_radius) {return true; } tornar fals; }

Pas 14: comproveu si toquem el triangle

La mateixa comprovació de la del punt també es produeix dins del triangle.

// Funció que es verifica si es troba dins del triangle ABC // Es troba dins retorna TRUE senão retorna FALSE bool pointInsideTriangle (TSPoint a, TSPoint b, TSPoint c, TSPoint p) {float ABC = triangleArea (a, b, c); flotant ACP = triangleArea (a, c, p); flotant ABP = triangleArea (a, b, p); float CPB = triangleArea (c, p, b); if (ABC == ACP + ABP + CPB) {return true; } tornar fals; } // Funció que calcula una àrea de triangle com a base de ponts x, i float triangleArea (TSPoint a, TSPoint b, TSPoint c) {return fabs (((bx - ax) * (cy - ay) - (cx - ax) * (by - ay)) / 2); }

Pas 15: funció per imprimir el nom de l'objecte tocat

Aquí escrivim a la pantalla el nom de la figura geomètrica que s’utilitza.

// escreve 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 (forma); }

Pas 16: fitxers

Descarregueu els fitxers:

INO

PDF