Display TFT 1.8″ ST7735 – Utilizando o display com o NodeMCU ou Arduino

A existência de uma interface de visualização de dados é algo muito importante tanto no desenvolvimento de um software quanto no mundo dos sistemas embarcados de maneira geral, de modo que, em virtude de sua importância, precisamos sempre estar construindo interfaces concisas e de fácil entendimento. Entretanto isso é uma tarefa bastante desafiadora no mundo maker, devido a baixa quantidade de recursos disponíveis nas plataformas utilizadas. Sendo assim, apresentamos o Display TFT 1.8″ com o controlador ST7735, que por sua vez, consiste em um módulo bem interessante e que pode ser utilizado com o propósito citado.

Nesse tutorial focamos no uso do Display TFT 1.8″ ST7735 usando a plataforma NodeMCU. Ainda assim, fizemos uma explicação de como fazer a mesma experiência usando a plataforma Arduino no Tópico: Usando o Display TFT 1.8″ ST7735 na plataforma Arduino.

[toc]

O Display TFT 1.8″ ST7735

Esta pequena tela tem uma resolução de 128×160 pixels, o que permite sua utilização como um pequeno painel de visualização, sendo possível até mesmo fazer o seu uso em mini computadores como o Raspberry Pi e o Orange Pi. Além disso, ela também conta com uma interface para conexão de cartões SD em sua parte traseira. A tela conta com um total de 8 pinos, sendo dois destes para alimentação, um para o backlight e os outros 5 para comunicação que é feita via SPI.

Mãos à obra – Imprimindo informações no display usando um NodeMCU

Componentes utilizados:

• 1x NodeMCU
• 1x Display TFT 1.8″
• 8x Jumpers

Montando o projeto

Para realizar a montagem, iremos conectar os pinos na seguinte ordem:

A montagem final deve estar semelhante a imagem abaixo:

 Veja como ficou a nossa montagem na prática:

Se tudo estiver montado corretamente, quando o sistema for ligado teremos uma tela em branco.

Sempre monte seu projeto com a alimentação desligada para evitar possíveis curtos circuitos que podem danificar o seu dispositivo.

Programando

Antes de adentrarmos na apresentação do código, disponibilizamos uma seção para ajudar aqueles que são iniciantes no NodeMCU. Sinta-se livre para prosseguir caso você já tem domínio da IDE do Arduino e com o NodeMCU.

– Bibliotecas

Neste projeto estaremos utilizando duas bibliotecas, sendo uma para estabelecer a comunicação com o display, e outra para renderizar figuras de forma simplificada. Para isso, iremos fazer o download das duas bibliotecas da seguinte forma:

•  Na ide do arduino, navegamos até a opção Sketch, selecionamos a opção Incluir biblioteca e navegamos até a opção Gerenciar Bibliotecas como mostra a figura abaixo:

• Ao selecionar a opção Gerenciar bibliotecas, será aberto um painel como mostra a figura a seguir:
• Nesta Janela iremos procurar as bibliotecas Adafruit ST7735 e Adafruit GFX Library, ambas podem ser instaladas através deste ambiente (Caso ocorra algum erro ou a imagem não apareça corretamente, a tela pode estar utilizando o controlador ILI9341, neste caso faça o download da biblioteca Adafruit ILI9341).

#include <Adafruit_GFX.h>    // Core graphics library
#include <Adafruit_ST7735.h> // Hardware-specific library
#define D3 0
#define D4 2 
#define D5 14 
#define D7 13 
#define D8 15 
#define TFT_CS     D8
#define TFT_RST    D4  
#define TFT_DC     D3
Adafruit_ST7735 tft = Adafruit_ST7735(TFT_CS,  TFT_DC, TFT_RST); // Instância do objeto tipo Adafruit_ST7735 que recebe como argumentos os pinos de controle
#define TFT_SCLK D5   
#define TFT_MOSI D7 
void setup(void){

  tft.setCursor(0,30); // Move o cursor para a coluna 30 na linha 0 
  tft.initR(INITR_BLACKTAB); // Inicializa a tela com um fundo preto
  tft.setTextSize(2); // Seta o tamanho da fonte de texto para o tamanho 2
  tft.fillScreen(ST7735_BLACK); // Preenche a tela com a cor preta
  tft.setTextColor(ST7735_BLUE); // Seta a cor do texto para Azul
  tft.print("Vida"); // Escreve a palavra Vida Com a cor que foi setada na linha acima
  tft.setTextColor(ST7735_WHITE); // Seta a cor do texto para Branco
  tft.print("De "); // Escreve a palavra Vida com a cor que foi setada na linha acima
  tft.setTextColor(ST7735_BLUE); // Seta a cor do texto para Azul
  tft.print("Silicio"); // Escreve a palavra Silício, com a cor que foi setada na linha acima

} 
void loop(){
  tft.invertDisplay(true); // Inverte as cores que estão na tela
  delay(500); // Aguarda 0,5 segundos
  tft.invertDisplay(false); // Volta as cores originais
  delay(500); // Aguarda 0,5 segundos
} 

Colocando para funcionar

Veja o resultado que obtivemos.

Usando o Display TFT 1.8″ ST7735 na plataforma Arduino

As bibliotecas da Adafruit de uma maneira geral possuem um grau bastante elevado de extensibilidade, ou seja podem ser utilizadas em diversas plataformas, como o nodeMCU e também o arduino. Caso você necessite utilizar este mesmo display em outra plataforma, como por exemplo o arduino uno, basta com que siga o padrão de conexão mostrado na tabela abaixo:

Já no código, podemos eliminar a grande parte dos #DEFINES criados anteriormente, utilizando apenas três pinos para estabelecer a comunicação, após isso, o código será exatamente o mesmo de antes.

#include <Adafruit_GFX.h>    // Core graphics library
#include <Adafruit_ST7735.h> // Hardware-specific library
#define TFT_CS     10
#define TFT_RST    8  
#define TFT_DC     9
Adafruit_ST7735 tft = Adafruit_ST7735(TFT_CS,  TFT_DC, TFT_RST); // Instância do objeto tipo Adafruit_ST7735 que recebe como argumentos os pinos de controle
void setup(void){
  tft.setCursor(0,30); // Move o cursor para a coluna 30 na linha 0 
  tft.initR(INITR_BLACKTAB); // Inicializa a tela com um fundo preto
  tft.setTextSize(2); // Seta o tamanho da fonte de texto para o tamanho 2
  tft.fillScreen(ST7735_BLACK); // Preenche a tela com a cor preta
  tft.setTextColor(ST7735_BLUE); // Seta a cor do texto para Azul
  tft.print("Vida"); // Escreve a palavra Vida Com a cor que foi setada na linha acima
  tft.setTextColor(ST7735_WHITE); // Seta a cor do texto para Branco
  tft.print("De "); // Escreve a palavra Vida com a cor que foi setada na linha acima
  tft.setTextColor(ST7735_BLUE); // Seta a cor do texto para Azul
  tft.print("Silicio"); // Escreve a palavra Silício, com a cor que foi setada na linha acima
 
} 
void loop(){
  tft.invertDisplay(true); // Inverte as cores que estão na tela
  delay(500); // Aguarda 0,5 segundos
  tft.invertDisplay(false); // Volta as cores originais
  delay(500); // Aguarda 0,5 segundos
}

E pronto, agora temos o mesmo código sendo executado no arduino

Entendendo a Fundo

Software

– Incluindo as bibliotecas a serem utilizadas no projeto

Inicialmente, observe que foi necessário incluir duas bibliotecas no código para que o mesmo pudesse funcionar corretamente. A biblioteca Adafruit_GFX.h fornece um conjunto de funções gráficas para telas LCD e OLED simplificando o uso desses displays.

A biblioteca Adafruit_GFX sempre trabalha em conjunto com uma segunda biblioteca fornecida para cada tipo específico de display, no nosso caso usamos a biblioteca para o controlador ST7735: Adafruit_ST7735.h.

#include <Adafruit_GFX.h>    // Core graphics library
#include <Adafruit_ST7735.h> // Hardware-specific library

Existem vários tipos de versões de display com controladores diferentes. Para conseguir usar o seu display adequadamente, é fundamental que se saiba exatamente qual o controlador para que consiga encontrar as bibliotecas especificas para ele.

– Declarando o objeto tft

Em seguida, cria-se o objeto que é responsável por realizar a troca de mensagens entre o nodeMCU e o display.  O método construtor da classe Adafruit_ST7735 recebe como parâmetros, os pinos responsáveis por interfacear a comunicação SPI entre o microcontrolador e o display.

Adafruit_ST7735 tft = Adafruit_ST7735(TFT_CS, TFT_DC, TFT_RST);

Lembre-se: tft é apenas o nome que escolhemos, sendo assim, é importante ressaltar que, o objeto identificado por tft poderia ser chamado de qualquer outro nome, como por exemplo, lcd ou display, respectivamente.

– Movendo o cursor do LCD

tft.setCursor(0,30);

Essa função é responsável por mover o cursor responsável por escrever o texto na tela, neste caso o cursor será movido no eixo Y uma distância de 30 pixels da posição onde ela se encontra (no caso a posição 0,0), ficando este na posição (0,30).

– Inicializando a tela

Essa função inicializa o chip do controlador do display no caso o ST7735.

tft.initR(INITR_BLACKTAB);

– Definindo o tamanho da fonte

A biblioteca Adafruit_ST7735 conta com 5 tipos de tamanhos de fonte, sendo eles enumerados do menor 0 até o maior 5, e este valor sendo definido por um número inteiro.

tft.setTextSize(2);

– Preenchendo toda a tela com uma cor

A função fillScreen, como o próprio nome já diz, preenche tudo que está sob a tela com uma única cor, no caso sendo representada pelo define ST7735_NomedaCor.

tft.fillScreen(ST7735_BLACK);

– Definindo a cor do texto

De forma semelhante a função fillScreen, a função setTextColor muda a cor da fonte utilizada para escrever a mensagem desejada.

tft.setTextColor(ST7735_BLUE);

– Escrevendo na tela

A função print, escreve na tela o vetor de caracteres passados como parâmetro, porém é importante ressaltar que a cor e o tamanho da fonte serão sempre os últimos que foram setados antes da chamada desta função.

tft.print("Vida");

– Invertendo as cores do display

Já a função invertDisplay, inverte a cor de tudo que está sendo mostrado na tela no momento,caso o argumento repassado seja true,  caso seja false a cor não será invertida, ou voltará ao estado original.

tft.invertDisplay(true);

Veja que nesse programa inicializamos e escrevemos na tela na função setup() que é executada apenas umas vez. Na função loop() interagimos com a tela invertendo as cores do LCD.

Para um aplicação prática, em geral iremos escrever valores variáveis, tais como temperatura ou vazão. Nesse caso iremos trabalhar com as funções gráficas do display dentro da função loop().

Desafio

O desafio, para este tutorial, consiste em utilizar a seguinte função:

void desenhaCirculos(uint8_t radius, uint16_t color) {
  for (int16_t x=0; x < tft.width()+radius; x+=radius*2) {
    for (int16_t y=0; y < tft.height()+radius; y+=radius*2) {
      tft.drawCircle(x, y, radius, color);
    }
  }
}

Esta função possibilita o desenho de círculos em sequencia na tela, sendo estes espaçados com base em seu raio, ou seja, quanto menor o raio mais círculos teremos na tela, e quanto maior o raio, menos círculos serão desenhados na tela. Você consegue utilizando esta função desenhar círculos de tamanho variável na tela conforme o valor do raio varia ?

Considerações finais

Este tutorial, teve como objetivo apresentar um display muito utilizado como interface homem máquina em plataformas embarcadas. O seu baixo custo e bom funcionamento o tornam um módulo muito interessante de ser utilizado nos mais diversos tipos de aplicações, onde precisamos fornecer informações ao usuário. 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.

Danilo Almeida

Formado em Ciência da computação pela UFV-CAF em 2017 e atualmente cursando pós-graduação Stricto Sensu em Ciência da computação pela Universidade Federal de Viçosa, na área de arquitetura de computadores. É um entusiasta na área de sistemas embarcados e robótica.