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 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. 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.