Arduino con pantalla táctil: 16 pasos

2024 Autor: John Day | [email protected]. Última modificación: 2024-01-30 08:43

¿Le gustaría crear menús más personalizados y mejores interfaces hombre / máquina? Para tales proyectos, puede utilizar un Arduino y una pantalla táctil. ¿Suena tentadora esta idea? Si es así, mira el video de hoy, donde te mostraré un ensamblaje con un Mega Arduino y una pantalla táctil. Verás cómo hacer los diseños que quieras en la pantalla, y también cómo determinar la región de la pantalla a tocar y activar un comando específico. Destaco que elegí usar el Arduino Mega por su cantidad de pines.

Así que hoy, les presentaré la pantalla táctil, sus funciones gráficas y cómo tomar el punto táctil en la pantalla. Creemos también un ejemplo que contenga todos los elementos, como posicionamiento, escritura, diseño de formas, colores y tacto.

Paso 1: Arduino Mega 2560

Paso 2: TFT LCD Shield 2.4"

Esta pantalla que usamos en nuestro proyecto tiene una característica interesante: tiene una tarjeta SD. Sin embargo, la escritura y la lectura involucradas en esto se mostrarán en otro video, que produciré pronto. El objetivo de la lección de hoy es abordar específicamente las características de la pantalla gráfica y táctil de esta pantalla.

Caracteristicas:

Dimensión de la pantalla: 2,4 pulgadas

Ranura para tarjeta microSD

LCD en color: 65K

Conductor: ILI9325

Resolución: 240 x 320

Pantalla táctil: pantalla táctil resistiva de 4 cables

Interfaz: datos de 8 bits, más 4 líneas de control

Voltaje de funcionamiento: 3,3-5 V

Dimensiones: 71 x 52 x 7 mm

Paso 3: Bibliotecas

Agregue las bibliotecas:

"Adafruit_GFX"

"SWTFT"

"Pantalla táctil"

Haga clic en los enlaces y descargue las bibliotecas.

Descomprima el archivo y péguelo en la carpeta de bibliotecas del IDE de Arduino.

C: / Archivos de programa (x86) / Arduino / bibliotecas

Nota

Antes de comenzar nuestro programa, debemos abordar algo importante: la calibración TOUCH.

Usando un programa simple para obtener los puntos táctiles en la pantalla, almacene el valor de los puntos (x, y) en cada extremo (resaltados en amarillo en la figura siguiente). Estos valores son importantes para asignar el toque a los puntos gráficos en 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 // objeto para manipular dos eventos de toque en la pantalla TouchScreen ts = TouchScreen (XP, YP, XM, YM); configuración vacía () {Serial.begin (9600); } bucle vacío () {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); retraso (1000); }

Paso 4: funciones

Ahora echemos un vistazo a algunas funciones gráficas que las bibliotecas pueden ofrecernos.

1. drawPixel

La función drawPixel se encarga de pintar un solo punto en la pantalla en el punto dado.

vacío drawPixel (int16_t x, int16_t y, uint16_t color);

2. drawLine

La función drawLine es responsable de dibujar una línea desde dos puntos.

línea de dibujo vacía (int16_t x0, int16_t y0, int16_t x1, int16_t y1, uint16_t color);

3. drawFastVLine

La función drawFastVLine es responsable de dibujar una línea vertical desde un punto y una altura.

vacío drawFastVLine (int16_t x, int16_t y, int16_t h, uint16_t color);

4. drawFastHLine

La función drawFastHLine es responsable de dibujar una línea horizontal desde un punto y un ancho.

vacío drawFastHLine (int16_t x, int16_t y, int16_t w, uint16_t color);

5. drawRect

La función drawRect se encarga de dibujar un rectángulo en la pantalla, pasando un punto de origen, su altura y ancho.

vacío drawRect (int16_t x, int16_t y, int16_t w, int16_t h, uint16_t color);

6. fillRect

La función fillRect es la misma que drawRect, pero el rectángulo se rellenará con el color dado.

vacío fillRect (int16_t x, int16_t y, int16_t w, int16_t h, uint16_t color);

7. drawRoundRect

La función drawRoundRect es la misma que drawRect, pero el rectángulo tendrá bordes redondeados.

vacío drawRoundRect (int16_t x0, int16_t y0, int16_t w, int16_t h, int16_t radio, uint16_t color);

8. fillRoundRect

La función fillRoundRect es la misma que drawRoundRect, pero el rectángulo se rellenará con el color dado.

vacío fillRoundRect (int16_t x0, int16_t y0, int16_t w, int16_t h, int16_t radio, uint16_t color);

9. drawTriangle

La función drawTriangle se encarga de dibujar un triángulo en la pantalla, pasando el punto de los 3 vértices.

vacío 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ón fillTriangle es la misma que drawTriangle, pero el triángulo se rellenará con el color dado.

vacío fillTriangle (int16_t x0, int16_t y0, int16_t x1, int16_t y1, int16_t x2, int16_t y2, uint16_t color);

11. drawCircle

La función drawCircle es responsable de dibujar un círculo desde un punto de origen y un radio.

vacío drawCircle (int16_t x0, int16_t y0, int16_t r, uint16_t color);

12. fillCircle

La función fillCircle es la misma que drawCircle, pero el círculo se rellenará con el color dado.

círculo de relleno vacío (int16_t x0, int16_t y0, int16_t r, uint16_t color);

13. fillScreen

La función fillScreen se encarga de llenar la pantalla con un solo color.

void fillScreen (uint16_t color);

14. setCursor

La función setCursor es responsable de colocar el cursor para escribir en un punto dado.

void setCursor (int16_t x, int16_t y);

15. setTextColor

La función setTextColor se encarga de asignar un color al texto a escribir. Tenemos dos formas de usarlo:

void setTextColor (uint16_t c); // establece el color de escritura onlyvoid setTextColor (uint16_t c, uint16_t bg); // establece el color de escritura y el color de fondo

16. setTextSize

La función setTextSize se encarga de asignar un tamaño al texto que se escribirá.

void setTextSize (uint8_t s);

17. setTextWrap

La función setTextWrap se encarga de romper la línea si llega al límite de la pantalla.

void setTextWrap (boolean w);

18. setRotation

La función setRotation se encarga de rotar la pantalla (paisaje, retrato).

void setRotation (uint8_t r); // 0 (estándar), 1, 2, 3

Paso 5: Ejemplo

Crearemos un programa en el que utilizaremos la mayoría de los recursos que nos proporciona el display.

Escribamos algunas cadenas en diferentes tamaños, creemos tres figuras geométricas y captemos el evento táctil en ellas, cada vez que toquemos una de las figuras, tendremos la retroalimentación del nombre de la figura justo debajo de ellas.

Paso 6: Bibliotecas

Primero definamos las bibliotecas que usaremos.

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

Paso 7: define

Definiremos algunas macros para los pines, y también los valores importantes que usaremos.

// 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_LABEL_Y 200 #define FEEDBACK_de_toUCH_ao de valores 10 #definir PRESIÓN MÁXIMA 1000

Continuamos con la definición de algunas macros.

// Associa o nome das cores aos valores corresponsales # define BLACK 0x0000 #define RED 0xF800 #define GREEN 0x07E0 #define CYAN 0x07FF #define AMARILLO 0xFFE0 #define WHITE 0xFFFF // dados de criação do circulo const int circle_radius = 30; const int círculo_x = 240; const int círculo_y = 125; // objeto para manipular dos eventos de toque en la pantalla TouchScreen ts = TouchScreen (XP, YP, XM, YM); // objeto para manipulacao da parte grafica SWTFT tft;

Paso 8: configuración

En la configuración, inicializaremos nuestro objeto de control gráfico y realizaremos las primeras configuraciones.

configuración vacía () {Serial.begin (9600); // reseta el objeto da lib grafica tft.reset (); // inicializa el objeto controlador da lib grafica tft.begin (); retraso (500); // rotaciona una tela para paisaje tft.setRotation (1); // pinta una tela toda la de preto tft.fillScreen (BLACK); // chama a função para iniciar nossas configurações initialSettings (); }

Paso 9: bucle

En el bucle, recogeremos el punto en el que tocamos la pantalla, y veremos si el toque se produjo en alguna de las figuras.

bucle vacío () {TSPoint touchPoint = ts.getPoint (); // pega o touch (x, y, z = pressao) pinMode (XM, OUTPUT); pinMode (YP, SALIDA); // 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 = mapa (touchPoint.y, TS_MINY, TS_MAXY, 0, 320); p.y = mapa (touchPoint.x, TS_MINX, TS_MAXX, 240, 0); // verifica se a presión no toque para suficiente if (touchPoint.z> MINPRESSURE && touchPoint.z <MAXPRESSURE) {// verifica se tocou no retangulo if (pointInRect (p)) {writeShape ("Rect"); } // verifica se tocou no triangulo 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 ("Circle"); }}}

Paso 10: verifica si tocamos el círculo

En este paso nos ocupamos de la inicialización de la pantalla y definimos los colores de los textos a visualizar.

/ * Desenha na tela os elementos * / void initialSettings () {tft.setTextColor (WHITE); tft.setTextSize (TEXT_SIZE_S); tft.println ("ACESSE"); tft.setTextColor (AMARILLO); tft.setTextSize (TEXT_SIZE_M); tft.println ("MEU BLOG"); tft.setTextColor (VERDE); 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 ("FORMA:"); }

Paso 11: Funciones de la creación de formas geométricas

Creamos un rectángulo, un triángulo y un círculo con los orígenes que determinamos.

// cria um retangulo com origem (x, y) = (10, 100) // ancho = 80 e alto = 50 void createRect () {tft.fillRect (10, 100, 80, 50, RED); tft.drawRect (10, 100, 80, 50, BLANCO); } // cria um triangulo com os vértices: // A = (110, 150); B = (150, 100); C = (190, 150) void createTriangle () {tft.fillTriangle (110, 150, 150, 100, 190, 150, AMARILLO); tft.drawTriangle (110, 150, 150, 100, 190, 150, BLANCO); } // cria um circulo com origem no ponto (x, y) = (240, 125) e raio = 30 void createCircle () {tft.fillCircle (240, 125, 30, VERDE); tft.drawCircle (240, 125, 30, BLANCO); }

Paso 12: verifica si tocamos el rectángulo

Esta función comprueba si el punto está dentro del rectángulo.

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

Paso 13: verifica si tocamos el círculo

Esto es lo mismo que con el círculo.

// distancia entre pontos D = raiz ((xb-xa) ^ 2 + (yb-ya) ^ 2) // vefifica se o ponto está dentro del circulo // se a distancia do ponto pra origem do circulo for menor ou igual ao raio, ele está dentro bool pointInCircle (TSPoint p) {distancia flotante = sqrt (pow (px - circle_x, 2) + pow (py - circle_y, 2)); if (distancia <= radio_círculo) {devolver verdadero; } falso retorno; }

Paso 14: verifica si tocamos el triángulo

La misma comprobación de la del punto también ocurre dentro del triángulo.

// Função que verifica se o ponto p esta dentro del 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); flotador ACP = triangleArea (a, c, p); flotar ABP = triangleArea (a, b, p); flotador CPB = triangleArea (c, p, b); si (ABC == ACP + ABP + CPB) {devuelve verdadero; } falso retorno; } // Função que calcula un area de um triangulo com base nos pontos x, y float triangleArea (TSPoint a, TSPoint b, TSPoint c) {return fabs (((bx - ax) * (cy - ay) - (cx - ax) * (por - ay)) / 2); }

Paso 15: Función para imprimir el nombre del objeto tocado

Aquí escribimos en la pantalla el nombre de la figura geométrica que se utiliza.

// escreve na tela o nome da figura geométrica que foi tocadavoid writeShape (forma de cadena) {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 (BLANCO); tft.println (forma); }

Paso 16: Archivos

Descarga los archivos:

INO

PDF