Tutorial Arduino TFT LCD Touch Screen – Guia Passo a Passo

Neste tutorial de tela de toque Arduino, aprenderemos como usar TFT LCD Touch Screen com Arduino. Você pode assistir ao vídeo a seguir ou ler o tutorial escrito abaixo.

Visão Geral

Para este tutorial, preparei três exemplos. O primeiro exemplo é medição de distância usando sensor ultrassônico. A saída do sensor, ou a distância, é impressa na tela e, usando a tela de toque, podemos selecionar as unidades, seja centímetros ou polegadas.

O próximo exemplo é controlar um LED RGB usando estes três sliders RGB. Por exemplo, se começarmos a deslizar o slider azul, o LED acenderá em azul e aumentará a luz conforme formos ao valor máximo. Os sliders podem mover de 0 a 255 e, com sua combinação, podemos definir qualquer cor para o LED RGB, mas lembre-se que o LED não pode representar as cores com tanta precisão.

O terceiro exemplo é um jogo. Na verdade, é uma réplica do popular jogo Flappy Bird para smartphones. Podemos jogar usando o botão ou até mesmo usando a própria tela de toque.

Agora, passaremos por cada um destes exemplos e explicaremos passo a passo os códigos por trás deles.

Peças Necessárias para este Arduino Touch Screen

Como exemplo, estou usando um TFT Touch Screen de 3.2" em combinação com um Shield TFT LCD Arduino Mega. Precisamos de um shield porque a tela TFT Touch funciona a 3.3V e as saídas do Arduino Mega são 5V. Para o primeiro exemplo, tenho o sensor ultrassônico HC-SR04, depois para o segundo exemplo um LED RGB com três resistores e um botão para o exemplo do jogo. Também tive que fazer um header de pinos personalizado como este, soldando headers de pinos e dobrando um deles para poder inseri-los entre a placa Arduino e o Shield TFT.

Você pode obter estes componentes em qualquer um dos sites abaixo:

Display TFT Touch 3.2"
Shield Mega para Display TFT
Placa Arduino
Módulo Ultrassônico HC-SR04

Aqui está o esquema do circuito. Usaremos o pino GND, os pinos digitais de 8 a 13, bem como o pino 14. Como os pinos 5V já são usados pela Tela TFT, usarei o pino 13 como VCC, definindo-o como alto logo na seção setup do código.

Código Arduino Touch Screen

Como o código é um pouco longo e para melhor entendimento, postarei o código fonte do programa em seções com descrição para cada seção. E no final deste artigo, postarei o código fonte completo.

Usarei as bibliotecas UTFT e URTouch feitas por Henning Karlsen. Aqui gostaria de agradecer a ele pelo incrível trabalho que fez. As bibliotecas permitem uso muito fácil das Telas TFT, e funcionam com muitos tamanhos diferentes de telas TFT, shields e controladores. Você pode baixar estas bibliotecas do site dele, RinkyDinkElectronics.com, e também encontrar muitos exemplos de demonstração e documentação detalhada de como usá-las.

Após incluirmos as bibliotecas, precisamos criar objetos UTFT e URTouch. Os parâmetros destes objetos dependem do modelo da Tela TFT e Shield e estes detalhes também podem ser encontrados na documentação das bibliotecas.

Em seguida, precisamos definir as fontes que vêm com as bibliotecas e também definir algumas variáveis necessárias para o programa. Na seção setup, precisamos iniciar a tela e o toque, definir os modos de pino para o sensor conectado, o LED e o botão, e inicialmente chamar a função personalizada drawHomeScreen(), que desenhará a tela inicial do programa.

#include <UTFT.h>
#include <URTouch.h>
//==== Criando Objetos
UTFT myGLCD(SSD1289,38,39,40,41); // Parâmetros devem ser ajustados ao seu modelo de Display/Shield
URTouch myTouch(6, 5, 4, 3, 2);
//==== Definindo Variáveis
extern uint8_t SmallFont[];
extern uint8_t BigFont[];
extern uint8_t SevenSegNumFont[];
extern unsigned int bird01[0x41A];
int x, y;
char currentPage, selectedUnit;
// Sensor Ultrassônico
const int VCC = 13;
const int trigPin = 11;
const int echoPin = 12;
long duration;
int distanceInch, distanceCm;
// LEDs RGB
const int redLed = 10;
const int greenLed = 9;
const int blueLed = 8;
int xR=38; int xG=38; int xB=38;
// Floppy 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() {
  // Configuração inicial
  myGLCD.InitLCD();
  myGLCD.clrScr();
  myTouch.InitTouch();
  myTouch.setPrecision(PREC_MEDIUM);
  // Definindo Modos de Pino
  pinMode(VCC, OUTPUT); // VCC
  pinMode(trigPin, OUTPUT); // Define trigPin como Saída
  pinMode(echoPin, INPUT); // Define echoPin como Entrada
  pinMode(redLed, OUTPUT);
  pinMode(greenLed, OUTPUT);
  pinMode(blueLed, OUTPUT);
  pinMode(button, INPUT);
  digitalWrite(VCC, HIGH); // +5V - Pino 13 como VCC
  drawHomeScreen(); // Desenha a Tela Inicial
  currentPage = '0'; // Indica que estamos na Tela Inicial
  selectedUnit = '0'; // Indica a unidade selecionada para o primeiro exemplo, cm ou polegadas
}

Agora explicarei como podemos fazer a tela inicial do programa. Com a função setBackColor(), precisamos definir a cor de fundo da área onde o texto será impresso, preta no nosso caso. Em seguida, precisamos definir a cor para branco, definir a fonte grande e, usando a função print(), imprimiremos a string "Arduino TFT Tutorial" no centro da tela e 10 pixels abaixo do eixo Y da tela. Em seguida, definiremos a cor para vermelho e desenharemos a linha vermelha abaixo do texto. Depois, precisamos definir a cor de volta para branco e imprimir as outras duas strings, "by HowToMechatronics.com" usando a fonte pequena e "Selecionar Exemplo" usando a fonte grande.

Em seguida, o botão do sensor de distância. Primeiro, precisamos definir a cor e, usando a função fillRoundRect(), desenharemos o retângulo arredondado preenchido. Em seguida, definiremos a cor de volta para branco e, usando a função drawRoundRect(), desenharemos outro retângulo arredondado sobre o anterior, mas este sem preenchimento, para que a aparência geral do botão pareça que tem uma moldura. Sobre o botão, imprimiremos o texto usando a fonte grande e a mesma cor de fundo do preenchimento do botão. O mesmo procedimento vale para os outros dois botões.

// drawHomeScreen - Função Personalizada
void drawHomeScreen() {
  // Título
  myGLCD.setBackColor(0,0,0); // Define cor de fundo da área do texto para preto
  myGLCD.setColor(255, 255, 255); // Define cor para branco
  myGLCD.setFont(BigFont); // Define fonte para grande
  myGLCD.print("Arduino TFT Tutorial", CENTER, 10); // Imprime string na tela
  myGLCD.setColor(255, 0, 0); // Define cor para vermelho
  myGLCD.drawLine(0,32,319,32); // Desenha linha vermelha
  myGLCD.setColor(255, 255, 255); // Define cor para branco
  myGLCD.setFont(SmallFont); // Define fonte para pequena
  myGLCD.print("by HowToMechatronics.com", CENTER, 41); // Imprime string
  myGLCD.setFont(BigFont);
  myGLCD.print("Selecionar Exemplo", CENTER, 64);
  // Botão - Sensor de Distância
  myGLCD.setColor(16, 167, 103); // Define cor verde
  myGLCD.fillRoundRect(35, 90, 285, 130); // Desenha retângulo arredondado preenchido
  myGLCD.setColor(255, 255, 255); // Define cor para branco
  myGLCD.drawRoundRect(35, 90, 285, 130); // Desenha retângulo arredondado sem preenchimento
  myGLCD.setFont(BigFont); // Define fonte para grande
  myGLCD.setBackColor(16, 167, 103); // Define cor de fundo do texto para verde
  myGLCD.print("SENSOR DE DISTÂNCIA", CENTER, 102);
  // Botão - Controle LED RGB
  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("CONTROLE LED RGB", CENTER, 152);
  // Botão - Jogo 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("JOGO BIRDUINO", CENTER, 202);
}

Agora precisamos tornar os botões funcionais para que, quando pressionados, nos enviem ao exemplo apropriado. Na seção setup, definimos o caractere '0' para a variável currentPage, que indicará que estamos na tela inicial. Então, se isso for verdade, e se pressionarmos na tela, este if statement se tornará verdadeiro e, usando estas linhas, obteremos as coordenadas X e Y onde a tela foi pressionada. Se for a área que cobre o primeiro botão, chamaremos a função personalizada drawDistanceSensor() que ativará o exemplo do sensor de distância. Também definiremos o caractere '1' para a variável currentPage, que indicará que estamos no primeiro exemplo. A função personalizada drawFrame() é usada para destacar o botão quando pressionado. O mesmo procedimento vale para os outros dois botões.

//========== Seção loop ==========
void loop() {
  // Tela Inicial
  if (currentPage == '0') {
    if (myTouch.dataAvailable()) {
      myTouch.read();
      x = myTouch.getX(); // Coordenada X onde a tela foi pressionada
      y = myTouch.getY(); // Coordenada Y onde a tela foi pressionada
      // Se pressionarmos o Botão Sensor de Distância
      if ((x >= 35) && (x <= 285) && (y >= 90) && (y <= 130)) {
        drawFrame(35, 90, 285, 130); // Função Personalizada - Destaca botão quando pressionado
        currentPage = '1'; // Indica que estamos no primeiro exemplo
        myGLCD.clrScr(); // Limpa a tela
        drawDistanceSensor(); // Chamado apenas uma vez
      }
      // Se pressionarmos o Botão Controle LED RGB
      if ((x >= 35) && (x <= 285) && (y >= 140) && (y <= 180)) {
        drawFrame(35, 140, 285, 180);
        currentPage = '2';
        myGLCD.clrScr();
        drawLedControl();
      }
      // Se pressionarmos o Botão Jogo 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);
      }
    }
  }
  // Exemplo Sensor de Distância
  if (currentPage == '1') {
    getDistance(); // Obtém distância do sensor e é chamado repetidamente
    if (myTouch.dataAvailable()) {
      myTouch.read();
      x = myTouch.getX();
      y = myTouch.getY();
      // Se pressionarmos o Botão Centímetros
      if ((x >= 10) && (x <= 135) && (y >= 90) && (y <= 163)) {
        selectedUnit = '0';
      }
      // Se pressionarmos o Botão Polegadas
      if ((x >= 10) && (x <= 135) && (y >= 173) && (y <= 201)) {
        selectedUnit = '1';
      }
      // Se pressionarmos o Botão Voltar
      if ((x >= 10) && (x <= 60) && (y >= 10) && (y <= 36)) {
        drawFrame(10, 10, 60, 36);
        currentPage = '0';
        myGLCD.clrScr();
        drawHomeScreen();
      }
    }
  }
  // Controle LED RGB
  if (currentPage == '2') {
    setLedColor();
    if (myTouch.dataAvailable()) {
      myTouch.read();
      x = myTouch.getX();
      y = myTouch.getY();
      // Botão Voltar
      if ((x >= 10) && (x <= 60) && (y >= 10) && (y <= 36)) {
        drawFrame(10, 10, 60, 36);
        currentPage = '0';
        myGLCD.clrScr();
        drawHomeScreen();
        // Desliga o LED
        analogWrite(redLed, 0);
        analogWrite(greenLed, 0);
        analogWrite(blueLed, 0);
      }
    }
  }
  // Jogo Birduino (explicado no próximo tutorial)
  if (currentPage == '3') {
    // ... código do jogo ...
  }
}

A função personalizada drawDistanceSensor() precisa ser chamada apenas uma vez quando o botão é pressionado, para desenhar todos os gráficos deste exemplo de forma similar ao que descrevemos para a tela inicial. No entanto, a função personalizada getDistance() precisa ser chamada repetidamente para imprimir os resultados mais recentes da distância medida pelo sensor.

Aqui está essa função que usa o sensor ultrassônico para calcular a distância e imprimir os valores com fonte SevenSegNum em cor verde, seja em centímetros ou polegadas. Se precisar de mais detalhes de como o sensor ultrassônico funciona, pode conferir meu tutorial específico para isso. De volta à seção loop, podemos ver o que acontece quando pressionamos os botões de seleção de unidade, bem como o botão voltar.

//===== getDistance() - Função Personalizada
void getDistance() {
  // Limpa o trigPin
  digitalWrite(trigPin, LOW);
  delayMicroseconds(2);
  // Define trigPin em HIGH por 10 microssegundos
  digitalWrite(trigPin, HIGH);
  delayMicroseconds(10);
  digitalWrite(trigPin, LOW);
  // Lê o echoPin, retorna tempo de viagem da onda sonora em microssegundos
  duration = pulseIn(echoPin, HIGH);
  // Calculando a distância
  distanceCm = duration * 0.034 / 2;
  distanceInch = distanceCm / 2.53;
  // Imprime a distância em centímetros
  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);
  }
  // Imprime a distância em polegadas
  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, próximo é o exemplo de Controle LED RGB. Se pressionarmos o segundo botão, a função personalizada drawLedControl() será chamada apenas uma vez para desenhar o gráfico daquele exemplo e a função personalizada setLedColor() será chamada repetidamente. Nesta função, usamos a tela de toque para definir os valores dos 3 sliders de 0 a 255. Com as instruções if, confinamos a área de cada slider e obtemos o valor X do slider. Então, os valores da coordenada X de cada slider são de 38 a 310 pixels e precisamos mapear estes valores em valores de 0 a 255 que serão usados como sinal PWM para acender o LED. Se precisar de mais detalhes de como o LED RGB funciona, pode conferir meu tutorial específico para isso. O resto do código nesta função personalizada é para desenhar os sliders. De volta à seção loop, temos apenas o botão voltar que também desliga o LED quando pressionado.

//============= setLedColor() - Função Personalizada
void setLedColor() {
  if (myTouch.dataAvailable()) {
    myTouch.read();
    x = myTouch.getX();
    y = myTouch.getY();
    // Área do slider da cor Vermelha
    if ((y >= 130) && (y <= 156)) {
      xR = x;
      if (xR <= 38) { xR = 38; }
      if (xR >= 303) { xR = 303; }
    }
    // Área do slider da cor Verde
    if ((y >= 170) && (y <= 196)) {
      xG = x;
      if (xG <= 38) { xG = 38; }
      if (xG >= 303) { xG = 303; }
    }
    // Área do slider da cor Azul
    if ((y >= 210) && (y <= 236)) {
      xB = x;
      if (xB <= 38) { xB = 38; }
      if (xB >= 303) { xB = 303; }
    }
  }
  // Mapeia valores do eixo X de 38 a 0 e 310 a 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);
  // Envia sinal PWM para os pinos do LED
  analogWrite(redLed, xRC);
  analogWrite(greenLed, xGC);
  analogWrite(blueLed, xBC);
  // Desenha retângulo com a última combinação de cores
  myGLCD.setColor(xRC, xGC, xBC);
  myGLCD.fillRoundRect(175, 87, 310, 119);
  // Desenha os posicionadores
  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);
  // ... (código similar para verde e azul)
}

Próximo é o Exemplo de Jogo Arduino, mas deixarei esse para meu próximo tutorial para que possamos entendê-lo melhor, pois é um pouco mais complexo.

Código Fonte Completo do Programa

Para que o código funcione e compile, você terá que incluir um arquivo ".c" adicional no mesmo diretório do sketch Arduino. Este arquivo é para o terceiro exemplo do jogo e é um bitmap do pássaro. Para mais detalhes de como esta parte do código funciona, você pode conferir meu tutorial específico.

Arquivos do Tutorial Arduino TFT

Aqui está o código fonte completo do programa:

/* Arduino TFT Tutorial
 * Programa feito por Dejan Nedelkovski,
 * www.HowToMechatronics.com
 */
#include <UTFT.h>
#include <URTouch.h>
// ... (código completo omitido por brevidade, mas incluído na versão final)

Nota: O código completo está disponível no artigo original e inclui todas as funções personalizadas: drawHomeScreen, drawFrame, drawDistanceSensor, getDistance, drawLedControl, setLedColor, drawGround, drawPilars, drawBird, gameOver, restartGame.

Tutorial Arduino: Domine Temperatura e Umidade com Sensores DHT11 e DHT22 Explorando Sensores MEMS: Acelerômetros, Giroscópios e Magnetômetros para Projetos Arduino

Processo de manufatura

impressao 3D

Sistema de controle de automação

Tecnologia industrial