Display LCD TfT 2.4"- Primeiros passos com Touchscreen

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.

by Danilo Almeida

Shield display LCD TFT 2.4" Touchscreen - Descobrindo o drive

Shield display LCD TFT 2.4" Touchscreen - Descobrindo o drive

No desenvolvimento de qualquer tipo de projeto, é indispensável o uso de uma interface que permita ao usuário ver todo o funcionamento do sistema. Entretanto, essa não é uma tarefa fácil, principalmente quando dispomos de sistemas de baixo poder computacional, como é o caso dos microcontroladores tais como os Arduino. Sabendo disso, neste tutorial você aprenderá a utilizar o display TFT 2.4" com touchscreen embutido em conjunto a uma Placa Arduino Uno e descobriremos como resolver o problema da tela branca, comum ao usar esse LCD. Com esse display podemos criar interfaces interativas e supervisionar dados em tempo real.

É interessante ressaltar que uma das maiores dificuldade na utilização desse tipo de LCD se dá em achar a biblioteca adequada. Isso porque existe diversos modelos semelhantes o que gera uma grande confusão na hora de botar ele para funcionar. Pensando nisso, nesse conteúdo usamos uma biblioteca que faz a leitura do controlador usado pelo Display e nos informa qual é o driver através do monitor serial. Em seguida usamos o número do controlador para configurar a Biblioteca.

[toc]

O Shield Display LCD TFT 2.4" Touchscreen

O shield Lcd 2.4" possui uma resolução de 240x320, 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. Se você deseja adicionar sensores em conjunto com a tela, recomendo que utilize o Arduino Mega, pois ao acoplar o shield em um Arduino uno você não terá espaço nem pinos para conectar outros dispositivos.

Esse shield também possui uma interface para cartões SD em sua parte traseira. Tal interface é muito comum em LCDs coloridos, seu propósito é armazenar imagens prontas para serem exibidas no Display. Além disso, esse módulo SD  pode ser usado para armazenar outras informações que seja úteis ao seu projeto.

Ao utilizar essa tela no Arduino uno, se certifique que a parte do conector USB do arduino NÃO esteja tocando no shield, caso contrário pode ocorrer um curto circuito capaz de danificar o shield ou até o Arduino.

Mãos à obra – Construindo um sistema de controle de acesso utilizando a shield LCD

O projeto é divido em duas partes, na primeira descobrimos qual o controlador do nosso LCD e em seguida configuramos a biblioteca para se adequar ao modelos de Display que temos em mão.

Componentes Utilizados:

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

Montando o projeto

Para realizar a montagem em um Arduino uno não existe muito segredo, basta encaixar o módulo em seu Arduino sempre deixando um espaço entre o conector usb e a shield. Tenha cuidado para não amassar uma das pernas de seu shield.

Caso tudo esteja funcionando corretamente o display deverá acender como mostra o gif abaixo:

Instalando Biblioteca da Tela

A utilização destas telas nem sempre é uma tarefa fácil, isso ocorre devido a grande quantidade de controladores disponíveis no mercado para este tipo de tela. Sabendo disso, neste tutorial iremos utilizar uma biblioteca que abrange uma grande quantidade de controladores, no caso a MCUFRIEND. A instalação da biblioteca pode ser feita de maneira bem simples, bastando seguir os seguintes passos:

• Clique em  Sketch e vá até a opção Incluir Biblioteca como mostra a figura abaixo:

• Logo em seguida selecione a opção Gerenciar Bibliotecas, uma nova tela será aberta onde você pode gerenciar todas as bibliotecas disponíveis no repositório.

• Por fim, para instalar  a biblioteca, basta digitar MCUF RIEND_kbv na barra de pesquisa e instalar a opção da imagem.

Ao fim do processo de instalação, reinicie a IDE do Arduino para diminuir a possibilidade de problemas de compatibilidade.

Descobrindo o Driver do Display LCD TFT 2.4"

Agora que temos a nossa biblioteca instalada, iremos testar se da forma como ela está já conseguimos renderizar informações na tela. Para isso execute o seguinte código:

#include <MCUFRIEND_kbv.h>
MCUFRIEND_kbv tft;
#define VERDE   0x07E0
#define BRANCO 0xFFFF

void setup() {
  Serial.begin(9600);
  uint16_t ID = tft.readID(); 
  Serial.print("Identificador do display: ");
  Serial.println(ID,HEX);
  tft.begin(ID);
  tft.setRotation(1);
  tft.fillScreen(BRANCO);
  tft.setCursor(20,100);
  tft.setTextColor(VERDE);
  tft.setTextSize(3);
  tft.print("It's Alive !!!");
}

void loop() {

}

O código acima realiza uma leitura do registrador responsável por armazenar o código do circuito integrado que controla a tela através da função readID(). Com este código, a biblioteca sabe quais os registradores utilizados para entrada e saída de dados, podendo assim estabelecer uma comunicação com o display que é feita através da função begin(ID).  Além de fazer isso, no monitor serial e escreve a  mensagem "It's Alive" em verde caso o código esteja funcionando corretamente.

Se tudo estiver ok, você verá a seguinte mensagem escrita em seu display:

Dessa forma, o nosso controlador é o driver LGPD4532.

Consertando bug da tela branca - Configurando a biblioteca para o nosso controlador

Caso a tela simplesmente continue branca, será necessário realizar uma modificação na biblioteca MCUFRIEND. Para isso você deve ir até a pasta onde a biblioteca está instalada:

• Windows: C:\Program Files (x86)\Arduino\libraries
• Linux: /home/Usuario/Arduino/libraries

Após encontrar a localização da biblioteca instalada, selecione a pasta MCUFRIEND_kbv e abra o arquivo MCUFRIEND_kbv.cpp com o seu editor de textos favorito

A biblioteca MCUFRIEND possui praticamente todos os controladores disponíveis para esse display, porém algumas são desabilitadas devido a pequena quantidade de memória disponível. Sabendo disso, iremos através dessa modificação habilitar este controlador. Para fazer isso, iremos precisar do identificador do controlador do display, que pode ser obtido através do código de teste apresentado logo acima. Neste exemplo estou utilizando o controlador 4532, então devemos habilitar o suporte a este controlador

Na linha correspondente ao controlador que foi mostrado no código de testes, basta "descomentar" a linha do controlador desejado.

Antes de realizar qualquer modificação em uma biblioteca, é altamente recomendado que se faça backup da versão anterior para que caso  ocorre algum problema seja possível retornar ao estado anterior.

Logo após realizar as modificações, salve o arquivo e reinicie a IDE do Arduino. Se tudo tiver sido feito corretamente a mensagem It's Alive irá aparecer na sua tela quando você fizer o upload do código novamente.

Programando

Agora que temos a biblioteca funcionando corretamente, iremos construir a interface do nosso controle de acesso. O código abaixo é responsável por renderizar todos os botões que iremos utilizar em nosso sistema.

#include "Adafruit_GFX.h" // Biblioteca Gráfica Adafruit
#include <MCUFRIEND_kbv.h> // Bibllioteca para controle do lcd 

// Cores que iremos utilizar em nosso projeto
#define PRETO   0x0000
#define VERMELHO     0xF800
#define VERDE   0x07E0
#define BRANCO 0xFFFF

//---------------------------------------------//

MCUFRIEND_kbv tft; // Objeto  de comunicação com  display

void setup() {
  uint16_t ID = tft.readID(); // Leitura do código de identificação do controlador
  tft.begin(ID); // Inicialização da tela
  telaInicial(); // Chamada da função responsável por renderizar o nosso painel de acesso
}
void telaInicial(){
  tft.setRotation(1); // Display é rotacionado para modo paisagem
  tft.fillScreen(BRANCO); // Tela  é preenchida pela cor Branca
  escreveTexto(50,0,"Controle de Acesso",2,PRETO); // Texto é escrito na posição (50,0)
  criarBotao(60,50,200,30,"",PRETO); // Criamos uma pequena caixa onde será mostrada a senha digitada
  criarBotao(50,100,30,30,"1",VERMELHO); // Criação do botão 1 do  sistema
  criarBotao(100,100,30,30,"2",VERMELHO); // Criação do botão 2 do sistema
  criarBotao(150,100,30,30,"3",VERMELHO); // Criação do botão 3 do sistema
  criarBotao(200,100,30,30,"4",VERMELHO); // Criação do botão 4 do sistema
  criarBotao(250,100,30,30,"5",VERMELHO); // Criação do botão 5 do sistema
  criarBotao(50,150,30,30,"6",VERMELHO); // Criação do botão 6 do sistema
  criarBotao(100,150,30,30,"7",VERMELHO); // Criação do botão 7 do sistema
  criarBotao(150,150,30,30,"8",VERMELHO); // Criação do botão 8 do sistema
  criarBotao(200,150,30,30,"9",VERMELHO); // Criação do botão 9 do sistema
  criarBotao(250,150,30,30,"0",VERMELHO); // Criação do botão 0 do sistema
  criarBotao(50,200,120,30,"Apagar",VERMELHO); // Criação do botão Apagar
  criarBotao(180,200,100,30,"Logar",VERMELHO); // Criação do botão Logar
}

void telaAcesso(bool acesso){ // Função que controla o acesso ao sistema
  if (acesso){ // Se o acesso for permitido
     tft.fillScreen(PRETO); // Tela é preenchida pela cor preta
     tft.setCursor(10,100); // Cursor é deslocado para pixel de posição (10,100)
     tft.setTextColor(VERDE); // Cor do texto é alterada para verde
     tft.setTextSize(3); // Tamanho da fonte do texto é alterada para o tamanho 3 ( Grande )
     tft.print("Acesso Autorizado"); // Texto é escrito em verde com mensagem Acesso Autorizado
     delay(3000); // Sistema aguarda 3 segundos
     telaInicial(); // Tela de acesso inicial é renderizada
  }
  else{ // Caso contrário
     tft.fillScreen(PRETO); // Tela é preenchida pela cor preta
     tft.setCursor(40,100); // Cursor é deslocado para pixel de posição (40,100)
     tft.setTextColor(VERMELHO); // Cor do texto é alterada para vermelho
     tft.setTextSize(3); // Tamanho da fonte do texto é alterada para o tamanho 3 ( Grande )
     tft.print("Acesso Negado"); // Texto é escrito em vermelho com mensagem Acesso Negado
     delay(3000); // Sistema aguarda 3 segundos
     telaInicial();  // Tela de acesso inicial é renderizada
  }
  
}

void escreveTexto(int posx,int posy, String texto,int tamanho,int cor){ // Função criada para facilitar escrita de texto
  tft.setCursor(posx,posy); // Cursor é deslocado para posição passada como parâmetro
  tft.setTextColor(cor); // Cor a ser escrita é alterada conforme valor recebido como parâmetro
  tft.setTextSize(tamanho); // Tamanho da fonte é  alterado conforme parâmetro recebido
  tft.print(texto); // Texto passado por parâmetro é escrito na tela
}

void criarBotao(int posx,int posy, int largura, int altura,String texto,int cor) //
{
    //Create Red Button
  tft.fillRect(posx,posy, largura, altura, cor); // um quadrado começando em (posx,posy) é renderizado conforme parâmetros passados
  tft.drawRect(posx,posy, largura, altura,PRETO); // um quadrado de cor preta é desenhado ao redor do quadrado vermelho 
  tft.setCursor(posx+8,posy+4); // Cursor é deslocado para o pixel de posição (posx+8,posy+4)
  tft.setTextColor(BRANCO); // Cor do texto é alterada para Branco
  tft.setTextSize(3); // Fonte é alterada para tamanho 3
  tft.print(texto); // Texto é escrito em posição determinada
}
void loop() { // Cada uma das três telas que compõem o sistema é chamada a cada dois segundos
telaInicial();
delay(2000);
telaAcesso(true);
delay(2000);
telaAcesso(false);  
delay(2000); 
}

Colocando pra funcionar

Entendendo a Fundo

Software

- Incluindo bibliotecas a serem adicionadas ao projeto

Inicialmente podemos observar que necessitamos adicionar penas duas bibliotecas ao nosso projeto. A biblioteca Adafruit_GFX fornece uma série de funções que permitem o desenho de figuras geométricas de forma transparente. Já a biblioteca MCUFRIEND_kbv fornece o objeto com o qual iremos nos comunicar com o display.

#include "Adafruit_GFX.h" // biblioteca com funções Gráficas
#include <MCUFRIEND_kbv.h> // biblioteca de acesso e comunicação com display

- Declarando objeto de comunicação com display

Para estabelecer uma comunicação com o nosso display, iremos criar um objeto de nome tft que ficará responsável por renderizar toda a informação que for requisitada pelo código.

MCUFRIEND_kbv tft; // Objeto de comunicação com a tela

O nome do objeto não precisa ser necessariamente tft, você pode nomear o objeto com o nome que preferir.

- Paleta de cores utilizada

Neste exemplo iremos utilizar um total de 4 cores, para desenhar botões e telas de acesso. Para facilitar o trabalho de digitar o código da cor utilizada, criaremos 4 defines contendo as cores utilizadas e seu respectivo código RGB.

#define PRETO 0x0000
#define VERMELHO 0xF800
#define VERDE 0x07E0
#define BRANCO 0xFFFF

- Função desenha botão

Para  facilitar o processo de desenhar botões na tela, foi  elaborada uma função que dada a posição inicial, dimensões, texto e cor um retângulo representando um botão é desenhado na tela. Seu funcionamento segue a seguinte lógica:

void criarBotao(int posx,int posy, int largura, int altura,String texto,int cor)
{
  tft.fillRect(posx,posy, largura, altura, cor); // Cria um quadrado com inicio na posição (posx,posy) com altura e largura definidas na função
  tft.drawRect(posx,posy, largura, altura,PRETO); // Cria uma borda ao redor do quadrado desenhado anteriormente
  tft.setCursor(posx+8,posy+4); // Cursor de escrita é deslocado para centro do quadrado desenhado
  tft.setTextColor(BRANCO); // Cor do texto é alterada para branco
  tft.setTextSize(3); // Tamanho do texto é alterado para tamanho 3
  tft.print(texto); // Texto é escrito na posição central da caixa desenhada
}

- Tft.fillRect()

Esse método recebe como parâmetros a posição inicial onde o quadrado deve começar, sua largura, altura e cor. Com todos esses dados o método irá renderizar na tela um quadrado da seguinte forma:

- Tft.drawRect

O método drawRect por sua vez, com  base nos mesmos parâmetros irá criar uma borda sobre o quadrado que foi renderizado anteriormente

- Escrevendo texto

O processo para escrever informações na tela segue o seguinte fluxo:

1. Primeiro através da função setCursor() iremos selecionar a posição onde o nosso texto começará a ser Escrito
   

   

2. Logo em seguida configuramos a cor da fonte e seu tamanho através dos métodos setTextColor() e setTextSize().

1. Por fim escrevemos o texto desejado através do método print()

- Função escreveTexto

Como foi possível observar na etapa onde escrevemos o texto dentro do retângulo, uma grande quantidade de comandos é necessária até que se escreva o texto em si. Para reduzir a quantidade de código escrita foi também criada uma função que já encapsula todo esse processo. Seu uso consiste em basicamente fornecer o ponto de inicio do texto, o texto a ser escrito, seu tamanho, e a cor do texto.

void escreveTexto(int posx,int posy, String texto,int tamanho,int cor){ 
  tft.setCursor(posx,posy); // Move cursor para posição inicial onde o texto será escrito
  tft.setTextColor(cor); // Muda a cor do texto
  tft.setTextSize(tamanho); // Altera o tamanho da fonte
  tft.print(texto); // Escreve texto na tela
}

- Função setup

dentro da nossa função setup iremos basicamente inicializar a nossa tela seguindo o seguinte fluxo

1. Lemos o código de identificação do display através do método readID()

   uint16_t ID = tft.readID();

2. Inicializamos o nosso display através do método begin()

   tft.begin(ID);
   

3. Mudamos o layout da tela para o modo paisagem através do método setRotation(1)

   tft.setRotation(1);
   

4.  Por fim chamamos a função telaInicial() que irá renderizar na tela nosso painel de acesso

   telaInicial();
   

- Função telaInicial

A função tela inicial tem como função básica renderizar todos os botões e o campo de texto que será responsável por mostrar a senha digitada. Para isso a função executa os seguintes passos:

1. Mudamos a tela para o modo paisagem através do método setRotation(1)

     tft.setRotation(1);
   

    

2. Toda a tela é preenchida pela cor branca através do método fillScreen(BRANCO)

   tft.fillScreen(BRANCO);
   

   

3. Utilizando a função escreveTexto iremos escrever o texto: "Controle de acesso" na cor preta na parte superior da tela

   escreveTexto(50,0,"Controle de Acesso",2,PRETO);
   

   

4. Logo em seguida criamos uma caixa onde a senha digitada será armazenada conforme os botões forem clicados.

   criarBotao(60,50,200,30,"",PRETO);
   

   

5. Sequencialmente, criamos todos os 10 botões que serão utilizados para que o usuário digite a senha para acesso ao sistema. Isso é feito através do método criarBotao(), onda cada botão será desenhado na tela com uma distância de 50 pixels entre um e outro.

     criarBotao(50,100,30,30,"1",VERMELHO);
     criarBotao(100,100,30,30,"2",VERMELHO);
     criarBotao(150,100,30,30,"3",VERMELHO);
     criarBotao(200,100,30,30,"4",VERMELHO);
     criarBotao(250,100,30,30,"5",VERMELHO);
     criarBotao(50,150,30,30,"6",VERMELHO);
     criarBotao(100,150,30,30,"7",VERMELHO);
     criarBotao(150,150,30,30,"8",VERMELHO);
     criarBotao(200,150,30,30,"9",VERMELHO);
     criarBotao(250,150,30,30,"0",VERMELHO);

   

6. Por fim, criamos os dois botões responsáveis por apagar caracteres digitados incorretamente, e o botão responsável por validar a senha digitada.

     criarBotao(50,200,120,30,"Apagar",VERMELHO);
     criarBotao(180,200,100,30,"Logar",VERMELHO);

   

- Função telaAcesso(bool autorizacao)

Agora que temos a nossa tela de controle de acesso criada, iremos precisar criar mais duas telas, uma para quando o acesso for permitido e outra para quando o acesso for negado. Para encapsular todo esse processo e deixa-lo mais transparente, foi criada uma função denominada telaAcesso que funciona da seguinte forma:

• Caso o argumento recebido seja verdadeiro significa que o acesso foi autorizado, então
  • A Tela é preenchida pela cor preta através do método fillScreen()

    tft.fillScreen(PRETO);
    

  • O cursor é deslocado para o pixel de posição (10,100)

    tft.setCursor(10,100);
    

  • A cor do texto é alterada para verde

    tft.setTextColor(VERDE);
    

  • O tamanho da fonte do texto é alterada para o tamanho 3

    tft.setTextSize(3);
    

  • O texto acesso autorizado é escrito na tela

    tft.print("Acesso Autorizado");
    

    

  • Após 3 segundos o sistema volta para a tela inicial
• Caso contrário uma mensagem de acesso negado será escrita em vermelho na tela

- Função Loop()

A função loop por sua vez apenas alterna entre as três telas criadas em nosso sistema sendo cada uma das telas chamadas a cada dois segundos.

void loop() { // Cada uma das três telas que compõem o sistema é chamada a cada dois segundos
telaInicial();
delay(2000);
telaAcesso(true);
delay(2000);
telaAcesso(false);  
delay(2000); 
}

Desafio

Agora que você sabe como construir uma tela para controle de acesso, tente alterar as cores da paleta de cores, para cores que sejam do seu agrado. Adicione também novos botões ao sistema para que ele possa ter uma maior quantidade de combinações possíveis.

Considerações Finais

Este tutorial teve como objetivo ensinar uma forma de elaborar interfaces utilizando a shield display TfT. Além disso foi possível também aprender a como resolver um problema bastante recorrente neste display devido a grande diversidade de controladores utilizados. Este tutorial foi dividido em duas partes devido a complexidade dos passos apresentados, então aguardem que logo logo iremos adicionar a parte touch ao projeto. 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.

by Danilo Almeida