Arduino com tela de toque: 16 etapas

2024 Autor: John Day | [email protected]. Última modificação: 2024-01-30 11:38

Você gostaria de criar menus mais personalizados e melhores interfaces homem / máquina? Para tais projetos, você pode usar um Arduino e uma tela de toque. Essa ideia parece atraente? Se sim, confira o vídeo de hoje, onde vou mostrar a vocês uma montagem com um Mega Arduino e um Touch Screen Display. Você verá como fazer os designs que deseja na tela e também como determinar a região da tela para tocar e ativar um comando específico. Ressalto que optei por usar o Arduino Mega devido à quantidade de pinos.

Então, hoje, vou apresentar a tela de toque, suas funções gráficas e como pegar o ponto de toque na tela. Vamos também criar um exemplo contendo todos os elementos, como posicionamento, escrita, desenho de formas, cores e toque.

Etapa 1: Arduino Mega 2560

Etapa 2: escudo TFT LCD de 2,4"

Este display que usamos em nosso projeto tem uma característica interessante: ele possui um cartão SD. No entanto, a escrita e a leitura envolvidas nisso serão mostradas em outro vídeo, que irei produzir em breve. O objetivo da lição de hoje é abordar especificamente os recursos gráficos e de tela de toque deste visor.

Características:

Dimensão da tela: 2,4 polegadas

Slot para cartão microSD

LCD colorido: 65K

Motorista: ILI9325

Resolução: 240 x 320

Tela sensível ao toque: tela sensível ao toque resistiva de 4 fios

Interface: dados de 8 bits, mais 4 linhas de controle

Tensão operacional: 3,3-5V

Dimensões: 71 x 52 x 7 mm

Etapa 3: Bibliotecas

Adicione as bibliotecas:

"Adafruit_GFX"

"SWTFT"

"Tela sensível ao toque"

Clique nos links e baixe as bibliotecas.

Descompacte o arquivo e cole-o na pasta de bibliotecas do Arduino IDE.

C: / Arquivos de programas (x86) / Arduino / bibliotecas

Observação

Antes de iniciarmos nosso programa, precisamos abordar algo importante: a calibração TOUCH.

Usando um programa simples para obter os pontos de toque no display, armazene o valor dos pontos (x, y) em cada extremidade (destacados em amarelo na figura abaixo). Esses valores são importantes para mapear o toque para os pontos gráficos na tela.

#include // Portas de leitura das coordenadas do touchvoid #define YP A1 // Y + está ligado Analog1 #define XM A2 // X- está ligado Analog2 #define YM 7 // Y- está ligado Digital7 #define XP 6 // X + está em Digital6 // objeto para manipulação dos eventos de toque na tela TouchScreen ts = 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 ("Y:"); Serial.println (touchPoint.y); atraso (1000); }

Etapa 4: Funções

Agora vamos dar uma olhada em algumas funções gráficas que as bibliotecas podem nos oferecer.

1. drawPixel

A função drawPixel é responsável por pintar um único ponto na tela em um determinado ponto.

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

2. drawLine

A função drawLine é responsável por traçar uma linha a partir de dois pontos.

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

3. drawFastVLine

A função drawFastVLine é responsável por desenhar uma linha vertical de um ponto e uma altura.

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

4. drawFastHLine

A função drawFastHLine é responsável por desenhar uma linha horizontal de um ponto e uma largura.

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

5. drawRect

A função drawRect é responsável por desenhar um retângulo na tela, passando um ponto de origem, sua altura e largura.

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

6. fillRect

A função fillRect é igual a drawRect, mas o retângulo será preenchido com a cor fornecida.

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

7. drawRoundRect

A função drawRoundRect é igual a drawRect, mas o retângulo terá bordas arredondadas.

void drawRoundRect (int16_t x0, int16_t y0, int16_t w, int16_t h, int16_t raio, cor uint16_t);

8. fillRoundRect

A função fillRoundRect é igual a drawRoundRect, mas o retângulo será preenchido com a cor fornecida.

void fillRoundRect (int16_t x0, int16_t y0, int16_t w, int16_t h, int16_t raio, cor uint16_t);

9. drawTriangle

A função drawTriangle é responsável por desenhar um triângulo na tela, passando a ponta dos 3 vértices.

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

10. fillTriangle

A função fillTriangle é igual a drawTriangle, mas o triângulo será preenchido com a cor fornecida.

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

11. drawCircle

A função drawCircle é responsável por desenhar um círculo de um ponto de origem e um raio.

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

12. fillCircle

A função fillCircle é igual a drawCircle, mas o círculo será preenchido com a cor fornecida.

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

13. fillScreen

A função fillScreen é responsável por preencher a tela com uma única cor.

void fillScreen (uint16_t color);

14. setCursor

A função setCursor é responsável por posicionar o cursor para escrever em um determinado ponto.

void setCursor (int16_t x, int16_t y);

15. setTextColor

A função setTextColor é responsável por atribuir uma cor ao texto a ser escrito. Temos duas maneiras de usá-lo:

void setTextColor (uint16_t c); // define a cor da escrita onlyvoid setTextColor (uint16_t c, uint16_t bg); // define a cor de escrita e a cor de fundo

16. setTextSize

A função setTextSize é responsável por atribuir um tamanho ao texto que será escrito.

void setTextSize (uint8_t s);

17. setTextWrap

A função setTextWrap é responsável por quebrar a linha caso ela atinja o limite da tela.

void setTextWrap (boolean w);

18. setRotation

A função setRotation é responsável por girar a tela (paisagem, retrato).

void setRotation (uint8_t r); // 0 (padrão), 1, 2, 3

Etapa 5: Exemplo

Criaremos um programa no qual usaremos a maioria dos recursos que o monitor nos fornece.

Vamos escrever algumas cordas em tamanhos diferentes, criar três figuras geométricas e pegar o evento de toque nelas, cada vez que tocarmos em uma das figuras, teremos o feedback do nome da figura logo abaixo delas.

Etapa 6: Bibliotecas

Primeiro, vamos definir as 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

Etapa 7: define

Vamos definir algumas macros para os pinos e também os 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 toque FEEDBACK_TOUCH_X 120 #define FEEDBACK_TOUCH_X 120 #define FEEDBACK_TOUCH_X DEFINIR para FEEDBACK_TOUCH_X 10 #define FEEDBACK_LABEL_Y 200 #define toque FEEDBACK_TOUCH_X 120 #define FEEDBACK_TOUCH_X 120 #define toque_TOUCH_X 120 10 # define MAXPRESSURE 1000

Continuamos com a definição de algumas macros.

// Associa o nome das cores aos valores correspondentes # 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; // objeto para manipulação dos eventos de toque na tela TouchScreen ts = TouchScreen (XP, YP, XM, YM); // objeto para manipulação da parte grafica SWTFT tft;

Etapa 8: configuração

No setup, inicializaremos nosso objeto de controle gráfico e faremos as primeiras configurações.

void setup () {Serial.begin (9600); // reseta o objeto da lib grafica tft.reset (); // inicializa o driver driver da lib grafica tft.begin (); atraso (500); // rotaciona a tela para landscape tft.setRotation (1); // pinta a tela toda de preto tft.fillScreen (BLACK); // chama a função para iniciar nossas configurações initialSettings (); }

Etapa 9: Loop

No loop, vamos pegar o ponto em que tocamos na tela e ver se o toque ocorreu em uma das figuras.

void loop () {TSPoint touchPoint = ts.getPoint (); // pega o touch (x, y, z = pressao) pinMode (XM, OUTPUT); pinMode (YP, OUTPUT); // mapeia o ponto de toque para o (x, y) grafico // o fato de termos rotacionado a tela para paisagem 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 pressão no toque foi suficiente if (touchPoint.z> MINPRESSURE && touchPoint.z <MAXPRESSURE) {// verifica se a pressão não 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 nenhum círculo else if (pointInCircle (p)) {writeShape ("Circle"); }}}

Etapa 10: verifique se tocamos no círculo

Nesta etapa tratamos da inicialização da tela e definimos as cores dos textos a serem exibidos.

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

Etapa 11: Funções de criação de formas geométricas

Criamos um retângulo, um triângulo e um círculo com as origens que determinamos.

// cria um retangulo com origem (x, y) = (10, 100) // largura = 80 e altura = 50 void createRect () {tft.fillRect (10, 100, 80, 50, RED); tft.drawRect (10, 100, 80, 50, BRANCO); } // cria um triangulo com os vértices: // A = (110, 150); B = (150, 100); C = (190, 150) vazio createTriangle () {tft.fillTriangle (110, 150, 150, 100, 190, 150, AMARELO); tft.drawTriangle (110, 150, 150, 100, 190, 150, BRANCO); } // 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, BRANCO); }

Etapa 12: verifique se tocamos no retângulo

Esta função verifica se o ponto está dentro do retângulo.

// 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) {retorno verdadeiro; } } retorna falso; }

Etapa 13: verifique se tocamos o círculo

É o mesmo que acontece com o círculo.

// 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 do bool pointInCircle (TSPoint p) {float distance = sqrt (pow (px - circle_x, 2) + pow (py - circle_y, 2)); if (distância <= circle_radius) {return true; } retorna falso; }

Etapa 14: verifique se tocamos o triângulo

A mesma verificação do ponto também ocorre dentro do triângulo.

// 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 = triânguloArea (a, b, c); flutuante ACP = área triangular (a, c, p); float ABP = trianguloArea (a, b, p); float CPB = área triangular (c, p, b); if (ABC == ACP + ABP + CPB) {retornar verdadeiro; } retorna falso; } // Função que calcula a área de um triangulo com base nos pontos x, y float trianguloArea (TSPoint a, TSPoint b, TSPoint c) {return fabs (((bx - ax) * (cy - ay) - (cx - ax) * (por - ay)) / 2); }

Etapa 15: Função para imprimir o nome do objeto tocado

Aqui escrevemos na tela o nome da figura geométrica utilizada.

// indicado 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 (WHITE); tft.println (forma); }

Etapa 16: Arquivos

Baixe os arquivos:

EU NÃO

PDF