Display LCD TfT 2.4″ – Primeiros passos com touchscreen

Neste tutorial iremos dar continuidade a utilização do display TfT no Arduíno Uno. Caso não tenha lido esse tutorial, recomendo fortemente que o veja aqui, pois nele ensinamos o processo de configuração da tela. Já nesta parte do tutorial, iremos aprender a como configurar, calibrar e utilizar o touchscreen disponível no display.

[toc]

Evolução da interface homem máquina (IHM)

Durante o desenvolvimento de qualquer tipo de sistema computacional, é fundamental que a elaboração de interfaces para visualização e controle destes sistemas sejam elaboradas levando em consideração fatores como facilidade de uso e layout agradável. Com isso, muito vem se evoluindo no que tange o desenvolvimento de intefaces homem máquina, e algo que permitiu um salto significativo na evolução destas interfaces foi o desenvolvimento das telas de toque, ou TouchScreen.

As telas TouchScreen podem ser consideradas como uma evolução para o desenvolvimento de interfaces homem máquina mais robustas. Isso se deve ao fato de que através de uma tela TouchScreen, é possível elaborar interfaces dinâmicas, com imagens e comandos intuitivos ao usuário final. Além disso, seu uso pode reduzir significativamente o tamanho final de um produto, uma vez que dispensa a necessidade de outros periféricos de interface humana, como botões, teclados, e mouse. E levando em consideração o barateamento desta tecnologia seu uso ainda reduz o preço final de um produto.

 

O surgimento da considerada primeira “tela” touchscreen

 

Considerada como um “acidente”, a primeira tela touchscreen surgiu em meados dos anos 70. Em virtude da necessidade de se criar um meio mais simples para interação com planos cartesianos, o engenheiro George Samuel Hurst, conseguiu, através de uma malha condutiva, ler as coordenadas de um plano cartesiano ao pressionar um ponto desta malha com uma caneta, criando assim o que pode ser considerado a primeira “tela” touchscreen.

Como funciona

Telas TouchScreen são subdivididas entre duas categorias, denominadas resistivas e capacitivas.

• Tela Resistiva: Uma tela resistiva é composta basicamente por duas camadas, sendo a primeira camada um material condutor e a segunda camada composta por vidro. No momento em que uma pressão é realizada sob a tela e essa pressão é capaz de fazer com que a camada de vidro toque a camada condutora, uma variação no campo elétrico é detectada e com base nessa variação o sistema é capaz de informar o ponto onde o toque ocorreu.

• Tela Capacitiva: Composta por um material condutor carregado eletricamente e um controlador capaz de detectar variações no campo elétrico em regiões distintas um ponto de toque é detectado no momento em que ocorre uma variação no campo elétrico decorrente ao toque de um material condutor na superfície.

Shield Lcd TFT 2.4″ Touchscreen

Neste tutorial iremos utilizar o shield LCD TFT 2.4″ como base para o nosso projeto de controle de acesso. Se você ainda não sabe como configurar, instalar driver e renderizar informações nesta tela, você pode conferir um tutorial neste link:

• Shield display LCD TFT 2.4″ Touchscreen – Descobrindo o drive

O shield Lcd TFT 2.4″ possui uma resolução de 240×320, além de possuir uma interface touchscreen resistiva por onde é possível interagir com a tela sem a necessidade de botões. A tela conta com um total de 13 pinos distribuídos entre alimentação, controle do touch e controle do display.

É importante que para o uso correto deste display, você utilize o tutorial anterior e consiga assim configurar e instalar as bibliotecas corretas.

 

 

---

Mãos a obra – Primeiros passos com Touchscreen

Componentes utilizados

• 1x Placa Arduino Uno REV3 – Você pode usar o Arduino Mega
• 1x Shield Lcd TFT 2.4″ Touchscreen

Instalando bibliotecas necessárias

Para implementarmos as aplicações propostas, nós iremos primeiramente baixar a biblioteca TouchScreen da Adafruit, que pode ser facilmente encontrada através da opção Gerenciar Biblioteca dentro do menu Sketch como mostra a figura abaixo:

Calibração da tela

Com a biblioteca instalada, iremos agora iniciar o processo de calibração da tela, que consiste basicamente em encontrar os valores de extremidade da nossa tela. Esse processo é extremamente importante, pois será através dos valores obtidos desta calibração que sistema será capaz de identificar qual ponto da tela foi pressionado. Para iniciarmos o processo de calibração, iremos executar um dos exemplos disponibilizados pela biblioteca MCU_FRIEND de nome TouchScreen_Calibr_native como mostra a imagem a seguir:

 

Se todo processo de instalação da biblioteca tiver sido feito corretamente, você verá a seguinte imagem no display.

A tela em questão informa tudo que deve ser feito para realização do processo de calibração, que consiste apenas em pressionar alguns quadrados que vão estar posicionados nas extremidades da tela. Para prosseguir até a próxima tela, basta tocar a tela em qualquer lugar. Logo após clicarmos na tela, seremos direcionado a imagem abaixo:

Nessa tela, você deve pressionar sequencialmente todos os quadrados o mais próximo possível do sinal de + e manter pressionado até que a mensagem PRESS, mude para RELEASE. O processo deve ser feito em TODOS os quadrados, sendo um por vez e sempre levando em consideração que o quadrado que deve ser pressionado estará com uma cor branca mais forte. Ao fim do procedimento você será direcionado para uma segunda tela, onde as configurações de calibração estarão seguindo o formato da imagem abaixo:

Anote todas as configurações, elas serão fundamentais para qualquer projeto que você queira utilizar o Touchscreen.

 

No caso da minha tela, foi gerada a seguinte configuração:

Modo Retrato:

• x = map(p.x,LEFT=184,RT=924,0,240)
• y = map(p.y,TOP=177,BOT=901,0,320)

Modo Paisagem:

• x = map(p.y, LEFT=177,BOT=902,0,320)
• y = map(p.x, TOP=924, BOT=184,0,240)

As duas configurações em questão, estão diretamente relacionadas a forma como a tela ficará posicionada. Sendo assim caso queira utilizar a tela em modo retrato, utilize a primeira configuração, caso contrário a segunda.

 

– Programando

Agora que instalamos a biblioteca Touchscreen, e realizamos a calibração da tela, podemos prosseguir para a parte do código. O código abaixo é responsável por renderizar todos os componentes da tela  e responder a toques na tela.

#include <Adafruit_GFX.h>
#include <MCUFRIEND_kbv.h>
#include <TouchScreen.h>

#define TAMANHOMAXSENHA 9
#define SENHAVALIDA "01234"
#define MINPRESSURE 300
#define MAXPRESSURE 2000
#define PRETO   0x0000
#define VERMELHO     0xF800
#define VERDE   0x07E0
#define BRANCO   0xFFFF

#define XP 6
#define XM A2
#define YP A1
#define YM 7

#define TS_LEFT 170
#define TS_RT 901
#define TS_TOP 932
#define TS_BOT  159


TouchScreen ts = TouchScreen(XP, YP, XM, YM, 300);
Adafruit_GFX_Button botoes[12];
MCUFRIEND_kbv tft;

bool pressionado = false;
int posX;
int posY;
String senha = "";


bool obterToque(void){
    TSPoint p = ts.getPoint();
    pinMode(YP, OUTPUT);      
    pinMode(XM, OUTPUT);
    digitalWrite(YP, HIGH);   
    digitalWrite(XM, HIGH);
    bool pressed = (p.z > MINPRESSURE);
    if (pressed) {
        posX = map(p.y, TS_LEFT, TS_RT, 0, 320); 
        posY = map(p.x, TS_TOP, TS_BOT , 0, 240);
        return true;
    }
    return false; 
}



void setup() {
  uint16_t ID = tft.readID();
  tft.begin(ID);
  tft.setRotation(1);
  telaInicial();
}

void telaInicial(){
  senha = "";
  tft.fillScreen(PRETO);
  botoes[0].initButton(&tft,  60, 100, 30, 40, BRANCO, VERDE, PRETO, "1", 2);
  botoes[1].initButton(&tft, 110, 100, 30, 40, BRANCO, VERDE, PRETO, "2", 2);
  botoes[2].initButton(&tft, 160, 100, 30, 40, BRANCO, VERDE, PRETO, "3", 2);
  botoes[3].initButton(&tft, 210, 100, 30, 40, BRANCO, VERDE, PRETO, "4", 2);
  botoes[4].initButton(&tft, 260, 100, 30, 40, BRANCO, VERDE, PRETO, "5", 2);
  botoes[5].initButton(&tft, 60,  150, 30, 40, BRANCO, VERDE, PRETO, "6", 2);
  botoes[6].initButton(&tft, 110, 150, 30, 40, BRANCO, VERDE, PRETO, "7", 2);
  botoes[7].initButton(&tft, 160, 150, 30, 40, BRANCO, VERDE, PRETO, "8", 2);
  botoes[8].initButton(&tft, 210, 150, 30, 40, BRANCO, VERDE, PRETO, "9", 2);
  botoes[9].initButton(&tft, 260, 150, 30, 40, BRANCO, VERDE, PRETO, "0", 2);
  botoes[10].initButton(&tft, 85, 200, 80, 40, BRANCO, VERDE, PRETO, "Acesso", 2);
  botoes[11].initButton(&tft, 235, 200, 80, 40, BRANCO, VERDE, PRETO, "Apagar", 2);

  for (int i=0; i<12; i++){
    botoes[i].drawButton(false);
  }
  escreveSenha();
  
}

void TeclaPressionada(bool teclaTocada){
  for (int i=0; i<12; i++){
    botoes[i].press(teclaTocada && botoes[i].contains(posX,posY));
  }
  checkPressedButton();

}

void checkPressedButton(){
  for (int i=0; i<12; i++){
    if (botoes[i].justPressed()){
      checkPressed(i);
    }
  }
}

void esperaSoltar(){
  while (obterToque()){
    delayMicroseconds(50);
  }

}

void escreveSenha(){
  tft.fillRect(70, 30, 190, 30, BRANCO);
  tft.setCursor(74,35); 
  tft.setTextColor(PRETO); 
  tft.setTextSize(3);
  tft.print(senha+"_"); 
}


void apagarUltimocaractere(){
  if (senha.length()>0){
    senha.remove (senha.length () - 1);
  }
}
void checkPressed(int button){
    botoes[button].drawButton(true);
    esperaSoltar();
    botoes[button].drawButton();
    if(senha.length()<TAMANHOMAXSENHA || button == 10 || button == 11){
    switch (button){
        case 0:
          senha = senha + "1";
        break;
        case 1:
          senha = senha + "2";
        break;
        case 2:
          senha = senha + "3";
        break;
        case 3:
          senha = senha + "4";        
        break;
        case 4:
          senha = senha + "5";
        break; 
        case 5:
          senha = senha + "6";
        break;
        case 6:
          senha = senha + "7";
        break;
        case 7:
          senha = senha + "8";
        break;
        case 8:
          senha = senha + "9";
        break;
        case 9:
          senha = senha + "0";
        break;
        case 10:
        validarAcesso();
        break; 
        case 11:
        apagarUltimocaractere();
        break;  
    }
    escreveSenha();
    }
}




void validarAcesso(){

  if (senha == SENHAVALIDA){
     tft.fillScreen(PRETO);
     tft.setCursor(10,100);
     tft.setTextColor(VERDE);
     tft.setTextSize(3);
     tft.print("Acesso Autorizado");
     delay(3000);
     telaInicial();
  }
  else{ // Caso contrário
     tft.fillScreen(PRETO);
     tft.setCursor(40,100);
     tft.setTextColor(VERMELHO); 
     tft.setTextSize(3); 
     tft.print("Acesso Negado"); 
     delay(3000); 
     telaInicial();
  }
  
}

void loop() {
  bool toque = obterToque();
  TeclaPressionada(toque);
}

 

Colocando pra funcionar

---

Entendendo a Fundo

Software

– Bibliotecas utilizadas

Neste tutorial, iremos precisar de três bibliotecas para construir o nosso sistema de controle de acesso. Essas bibliotecas serão responsáveis por fornecer os objetos necessários para comunicação entre o display e o microcontrolador.

#include <Adafruit_GFX.h> // Biblioteca gráfica Adafruit
#include <MCUFRIEND_kbv.h> // Biblioteca do display
#include <TouchScreen.h> // Biblioteca do Touchscreen

– Defines

Alguns defines também serão criados para facilitar a modificação de parâmetros conforme a necessidade, sendo eles:

1. TAMANHOMAXSENHA: Define o tamanho máximo que a senha pode ter.
2. SENHAVALIDA: Serve apenas para testar o código, você pode adaptar o código por exemplo para ler os dados de um cartão sd.
3. MINPRESSURE:  Valor mínimo de força a ser considerado como um toque pelo código.
4. MAXPRESSURE: Valor máximo de força a ser considerado como um toque pelo código.
5. PRETO, VERMELHO, VERDE, BRANCO: Código hexadecimal das cores utilizadas neste código.
6. XP XM, YP, YM: Pinos utilizados para comunicação com módulo touchscreen.
7. TS_LEFT, TS_RT, TS_TOP, TS_BOT: Valores limites da tela que foram obtidos através do código de calibração.

#define TAMANHOMAXSENHA 9 // Tamanho máximo da senha
#define SENHAVALIDA "01234" // Senha válida
#define MINPRESSURE 300 // Pressão minima para a tela considerar um toque
#define MAXPRESSURE 2000 // Pressão máxima que a tela deve considerar
#define PRETO   0x0000 // Cor preta
#define VERMELHO     0xF800 // Cor vermelha
#define VERDE   0x07E0 // Cor verde
#define BRANCO   0xFFF // Cor branca

// Pinos do touchscreen
#define XP 6 
#define XM A2
#define YP A1
#define YM 7

// Pontos de extremidade do touchscreen
#define TS_LEFT 170
#define TS_RT 901
#define TS_TOP 932
#define TS_BOT  159

– Objetos criados

Para elaboração da interface gráfica, iremos utlizar um total de 12 botões, sendo 10 botões representando os valores entre 0 e 9 e os outros dois botões utilizados para realizar uma tentativa de acesso e apagar o último caractere escrito. Sabendo disso, iremos utilizar um recurso muito interessante disponível na biblioteca Adafruit_GFX, que são os Adafruit_GFX_Button. Essa funcionalidade permite com que criemos botões de forma bem transparente e simplificada, onde passando alguns parâmetros criamos botões selecionaveis com bastante facilidade. Neste exemplo iremos instanciar um vetor contendo 12 desses botões, o fato de utilizar um vetor ao invés de criar uma variável para cada botão é o fato de que conseguimos reduzir bastante o nosso código utilizando o comando for para acesso a cada um deles.

Adafruit_GFX_Button botoes[12];

Além disso, iremos instânciar um objeto do tipo Touchscreen, que será responsável por estabelecer a comunicação entre o nosso código e o touchscreen da tela. Ele recebe como parâmetros os pinos onde o touchscreen está conectado e um valor que representa o nível de força mínimo na tela para que seja considerado um toque.

TouchScreen ts = TouchScreen(XP, YP, XM, YM, 300); // Instancia do objeto ts do tipo touchscreen

Por fim, mas não menos importante, o objeto responsável por estabelecer a comunicação entre nosso código e a tela, de nome tft também será instanciado.

MCUFRIEND_kbv tft; // Instancia do objeto tft, responsável por se comunicar com a tela

– Variáveis globais

Um conjunto de 4 variáveis globais serão criadas neste código, sendo elas:

• pressionado: informa se o touchscreen está sendo pressionado ou não.
• posX: Armazena a posição X onde a tela foi pressionada.
• posY: Armazena a posição Y onde a tela foi pressionada.
• senha: Armazena a senha digitada pelo usuário.

– Função setup

dentro da função setup, iremos inicializar o nosso display, através do método tft.begin() e rotacionar a tela para o modo paisagem, e por fim chamar a função responsável por desenhar todo o nosso painel de acesso.

void setup() {
  uint16_t ID = tft.readID();
  tft.begin(ID);
  tft.setRotation(1);
  telaInicial();
}

-Função telaInicial

Esta função, tem como objetivo construir todo o desenho do nosso painel de acesso. Para fazer isso, iremos initialmente escurecer toda a tela com o comando tft.fillScreen(PRETO). Logo em seguinda inicializamos os botões que iremos utilizar para digitar a senha de acesso, fazemos isso através do método initButton que recebe como parâmetros:

1.  Referência do objeto de acesso a tela – tft
2.  Posição X na tela.
3.  posição Y na tela.
4.  Altura.
5.  Largura.
6.  Cor da borda.
7.  Cor de preenchimento do botão.
8.  Cor de preenchimento do botão ao ser apertado.
9.  O que deve ser escrito no botão.
10.  Tamanho da fonte.

Neste trecho de código inicializamos todos os 12 botões seguindo essa ordem:

  botoes[0].initButton(&tft,  60, 100, 30, 40, BRANCO, VERDE, PRETO, "1", 2);
  botoes[1].initButton(&tft, 110, 100, 30, 40, BRANCO, VERDE, PRETO, "2", 2);
  botoes[2].initButton(&tft, 160, 100, 30, 40, BRANCO, VERDE, PRETO, "3", 2);
  botoes[3].initButton(&tft, 210, 100, 30, 40, BRANCO, VERDE, PRETO, "4", 2);
  botoes[4].initButton(&tft, 260, 100, 30, 40, BRANCO, VERDE, PRETO, "5", 2);
  botoes[5].initButton(&tft, 60,  150, 30, 40, BRANCO, VERDE, PRETO, "6", 2);
  botoes[6].initButton(&tft, 110, 150, 30, 40, BRANCO, VERDE, PRETO, "7", 2);
  botoes[7].initButton(&tft, 160, 150, 30, 40, BRANCO, VERDE, PRETO, "8", 2);
  botoes[8].initButton(&tft, 210, 150, 30, 40, BRANCO, VERDE, PRETO, "9", 2);
  botoes[9].initButton(&tft, 260, 150, 30, 40, BRANCO, VERDE, PRETO, "0", 2);
  botoes[10].initButton(&tft, 85, 200, 80, 40, BRANCO, VERDE, PRETO, "Acesso", 2);
  botoes[11].initButton(&tft, 235, 200, 80, 40, BRANCO, VERDE, PRETO, "Apagar", 2);
 for (int i=0; i<12; i++){
   botoes[i].drawButton(false);
 }
 escreveSenha();

E por fim, desenhamos os botões na tela utilizando o comando drawButton(), o resultado será semelhante ao da imagem abaixo:

 

 

– Função escreveSenha

como o próprio nome diz, esta função serve simplemente para escrever a senha de acesso na tela, para fazer isso, iremos criar um retângulo branco na tela, onde a string será escrita a medida em que os botões forem sendo pressionados.

– Função loop

no trecho de loop do nosso código, iremos estar sempre conferindo se o botão foi de fato pressionado ou não através da função obterToque(), e logo em seguida checamos se algum desses botões foram pressionados ou não através do método TeclaPressionada().

void loop() {
  bool toque = obterToque();
  TeclaPressionada(toque);
}

-Função obterToque

A função obterToque, como o próprio nome diz é responsável por descobrir se a tela foi pressionada ou não, e além disso determinar em qual posição (x,y) a tela foi pressionada. Para fazer isso iremos utilizar o objeto ts instanciado no início do código e seu método getPoint().

    TSPoint p = ts.getPoint();

Além disso, iremos configurar os pinos XP e XM como saída e habilitar seu nível lógico para alto.

    pinMode(YP, OUTPUT);      
    pinMode(XM, OUTPUT);
    digitalWrite(YP, HIGH);   
    digitalWrite(XM, HIGH);

Para determinarmos se de fato um clique na tela foi feito, utilizamos o bloco if e verificamos se a força feita é maior do que o valor mínimo determinado.

bool pressed = (p.z > MINPRESSURE);

Se o botão tiver sido de fato pressionado, a variável pressed receberá o valor true, caso contrário terá como resultado false. esse valor será posteriormente utilizado em um bloco if onde caso o botão tenha sido realmente pressionado iremos além de atualizar a variável pressionado para true, obteremos as cordenadas x e y de onde foi feito o toque.

    if (pressed) {
        posX = map(p.y, TS_LEFT, TS_RT, 0, 320); 
        posY = map(p.x, TS_TOP, TS_BOT , 0, 240);
        return true;
    }
    return false;

Você se lembra dos valores obtidos logo no começo deste tutorial para calibração ? eles são necessários neste ponto do código, onde iremos determinar qual coordenada foi tocada pelo usuário. Para fazer isso basta obter, as coordenadas x e y fornecidas pelo objeto p e realizar  uma operação map sob estes dados levando em consideração a resolução desta tela, que no caso é 320 por 240 pixels. Por fim, retornamos true caso o botão tenha sido pressionado ou else caso contrário.

-Função TeclaPressionada

dentro da função TeclaPressionada iremos determinar se uma tecla foi pressionada ou não. Para isso, utilizando o método press(), executamos a seguinte operação lógica sob todos os botões:

• Percorremos todo o vetor de botões 0 até 11 determinando se um botão foi pressionado ou não da seguinte forma:
  • Se a tela foi tocada e o meu botão está dentro das coordenadas definidas, houve um clique no botão
  • Caso contrário o botão não foi tocado

 

void TeclaPressionada(bool teclaTocada){
  for (int i=0; i<12; i++){
    botoes[i].press(teclaTocada && botoes[i].contains(posX,posY));
  }
  checkPressedButton();
}

Ao fim desse código verificamos qual botão foi apertado através da função checkPressedButton().

 

-Função checkPressedButton

dentro da função checkPressedButton, iremos simplesmente verificar qual botão foi apertado, para isso basta verificarmos através de um for, qual botão está com retorno true para função justPressed().

void checkPressedButton(){
  for (int i=0; i<12; i++){
    if (botoes[i].justPressed()){
      checkPressed(i);
    }
  }
}

Caso o botão da iteração atual esteja sendo pressionado a funão checkPressed será invocada recebendo como parâmetro o indice do botão em questão.

-Função checkPressed

Essa função será responsável por executar todos os comandos associados aos botões, sendo eles:

• Escrever adicionar a senha digitos de 0 a 9.
• Apagar o último caractere digitado.
• Realizar uma tentativa de acesso ao sistema.
• Mudar a animação do botão quando ele for pressionado.

 

void checkPressed(int button){
    botoes[button].drawButton(true);
    esperaSoltar();
    botoes[button].drawButton();
    if(senha.length()<TAMANHOMAXSENHA || button == 10 || button == 11){
    switch (button){
        case 0:
          senha = senha + "1";
        break;
        case 1:
          senha = senha + "2";
        break;
        case 2:
          senha = senha + "3";
        break;
        case 3:
          senha = senha + "4";        
        break;
        case 4:
          senha = senha + "5";
        break; 
        case 5:
          senha = senha + "6";
        break;
        case 6:
          senha = senha + "7";
        break;
        case 7:
          senha = senha + "8";
        break;
        case 8:
          senha = senha + "9";
        break;
        case 9:
          senha = senha + "0";
        break;
        case 10:
        validarAcesso();
        break; 
        case 11:
        apagarUltimocaractere();
        break;  
    }
    escreveSenha();
    }
}

Inicialmente, mudamos a animação de algum dos botões através da função drawButton(true), ao receber o parâmetro true altera a cor do botão para preto, que definimos no início do código através do initButton. Logo em seguida, chamamos uma função denominada esperaSoltar(). Esta função ( que pode ser melhorada e fica de desafio :) ) será responsável por travar o código até que o usuário pare de tocar o botão na tela. Ela consiste basicamente em um while onde utilizamos a função obterToque para descobrir se o botão foi de fato solto ou não.

void esperaSoltar(){
  while (obterToque()){
    delayMicroseconds(50);
  }
}

Logo após o botão ser solto, retornamos o botão para sua cor inicial (verde) atavés da função drawButton().

botoes[button].drawButton();

Em seguida iremos executar o comando ao qual o botão está associado, para isso devemos sempre levar em consideração que a nossa senha não pode ultrapassar o valor definido em TAMANHOMAXSENHA. Com isso, iremos restringir a execução dos botões números quando a senha for igual ao valor máximo através do if abaixo:

if(senha.length()<TAMANHOMAXSENHA || button == 10 || button == 11)

Esse comando if permite apenas que o bloco delimitado seja executado caso a senha não tenha atingido seu valor máximo, ou o botão apertado seja aqueles utilizados para apagar caracteres ou realizar uma tentativa de acesso. Por fim, o bloco swich-case, será responsável por de fato executar os comandos.

    switch (button){
        case 0:
          senha = senha + "1";
        break;
        case 1:
          senha = senha + "2";
        break;
        case 2:
          senha = senha + "3";
        break;
        case 3:
          senha = senha + "4";        
        break;
        case 4:
          senha = senha + "5";
        break; 
        case 5:
          senha = senha + "6";
        break;
        case 6:
          senha = senha + "7";
        break;
        case 7:
          senha = senha + "8";
        break;
        case 8:
          senha = senha + "9";
        break;
        case 9:
          senha = senha + "0";
        break;
        case 10:
        validarAcesso();
        break; 
        case 11:
        apagarUltimocaractere();
        break;  
    }

do case 0 até 9 basicamente incrementamos a string com um novo caractere e dentro dos cases 10 e 11 realizamos uma tentativa de acesso e apagamos o último caractere respectivamente.

– Função validarAcesso

Dentro da função validar acesso, iremos realizar a validação da senha, comparando a senha digitada pelo usuário e a senha padrão. Para isso, iremos simplesmente comparar a nossa string senha com o define SENHAVALIDA, caso o valor seja igual, mostramos a mensagem “Acesso Autorizado”, aguardamos um total de 3 segundos e voltamos a tela de acesso. Caso contrário mostramos a mensagem “Acesso Negado” aguardamos um total de 3 segundos e voltamos a tela de acesso.

void validarAcesso(){

  if (senha == SENHAVALIDA){
     tft.fillScreen(PRETO);
     tft.setCursor(10,100);
     tft.setTextColor(VERDE);
     tft.setTextSize(3);
     tft.print("Acesso Autorizado");
     delay(3000);
     telaInicial();
  }
  else{ // Caso contrário
     tft.fillScreen(PRETO);
     tft.setCursor(40,100);
     tft.setTextColor(VERMELHO); 
     tft.setTextSize(3); 
     tft.print("Acesso Negado"); 
     delay(3000); 
     telaInicial();
  }
  
}

 

– Função apagarUltimocaractere()

Já a função apagarUltimocaractere será responsável por apagar o último digito feito pelo usuário, para fazer isso iremos simplesmente verificar se a senha é maior que zero. Caso seja apagamos o último caractere digitado pegando o tamanho total da string através da função length e removendo o último caractere através da função remove().

void apagarUltimocaractere(){
  if (senha.length()>0){
    senha.remove (senha.length () - 1);
  }
}

---

Desafio

Como dito anteriormente, a função esperaSoltar, pode ser melhorada para que o código não trave enquanto o usuário mantiver o botão pressionado. O desafio deste tutorial será exatamente pensar numa lógica para que isso aconteça.

Considerações Finais

Este tutorial, teve como objetivo mostrar como podemos utilizar o touchscreen disponível na shield ftf, passando pelo processo de calibração e uso final da funcionalidade. Espero que tenham gostado do conteúdo apresentado, sinta-se à vontade para nos dar sugestões, críticas ou elogios. Lembre-se de deixar suas dúvidas nos comentários abaixo.