Font Size

Olá, tudo bem? No post de hoje vamos aprender como utilizar o Display Nokia 5110 com Arduino. A partir de agora, partiremos para a utilização de um display muito mais interativo com o usuário, com melhores definições e com uma estética mais agradável. Preparado?

Por que utilizar o display Nokia 5110?

Até o momento, trabalhamos em nossos projetos apenas com o display LCD 16×2. Nada contra, porém ele tem suas limitações. Dessa forma, é preciso buscar novas ferramentas gráficas para melhorar essa interação homem x máquina. Com o nosso display Nokia 5110, podemos ter essa melhoria que procuramos. Além disso, foi nessa tela que surgiu o lendário “jogo da cobrinha”, chamado de ‘Snake‘. Lembra dele?

Então, foi aproveitando a onda da criação de módulos para o Arduino, que se decidiu reviver essas telas e adaptá-las ao Arduino. Dessa forma, buscaremos hoje trazer o exemplo de aplicação para essa telinha e nos próximos posts, aprofundar sobre as possibilidades de sua utilização!

Hardware do Display 5110

Vamos agora estudar o hardware de nosso display. Ele possui uma resolução interessante de 84×48 pixels. Ou seja, é possível desenhar com uma boa compreensão em nosso display, mas obviamente a resolução não será a mesma comparada a um computador.

Display-nokia-5110
Hardware do Display Nokia 5110

Fonte: AutoCore Robótica

Agora, observe bem a cor de seu display. Pois normalmente, os módulos azuis, como na imagem, trabalham em tensões de 5V e 3.3V. Contudo, os displays na cor vermelha, certamente é 3.3V, operando desde 2.7V.

Já o seu consumo, ele fica inferior a 20mA, então podemos ligar tranquilamente ele diretamente ao 3.3V do Arduino. Combinado? Para finalizar esse tópico, caso queira alguma informação mais detalhada, basta visualizar o Datasheet do Display 5110 clicando na imagem abaixo:

Datasheet Display Nokia 5110

Componentes do Projeto

Vamos agora iniciar a construção de nosso projeto. Para isso, separe os seguintes componentes:

Montagem do Circuito

A partir de agora, vamos iniciar a montagem do nosso circuito de hoje. Para isso, coloque eles na protoboard igual está na imagem abaixo do circuito!

Display-nokia-5110
Ligação do Display Nokia 5110 no Arduino

Fonte: AutoCore Robótica

Código do Projeto Comentado

Espere um pouco, pois antes de apresentar o código de nosso projeto de hoje, será preciso baixar a biblioteca do nosso display. Para realizar o seu download, basta clicar na imagem abaixo e instalar a biblioteca através da IDE.

Biblioteca Display Nokia 5110
/* ========================================================================================================
  Projeto: Desenhando no Display Nokia 5110
  
  **Código modificado da Adafruit**
  
  Data: 23/05/2019
  Todos os Direitos reservados.
// ==================================================================================================*/

#include <Adafruit_GFX.h>        // Biblioteca para utilizar as fontes
#include <Adafruit_PCD8544.h>    // Biblioteca para utilizar os comandos do Display

Adafruit_PCD8544 display = Adafruit_PCD8544(8, 9, 10, 11, 12);      // Criando o construtor e passando a pinagem dele

// pin 8  - Serial clock out    (SCLK)
// pin 9  - Serial data out     (DIN)
// pin 10 - Data/Command select (D/C)
// pin 11 - LCD chip select     (CS)
// pin 12 - LCD reset           (RST)

void setup() {

  // Icializando o Display
  display.begin();

  // Aqui estamos definindo o valor do contraste que pode variar entre 0-127
  display.setContrast(55);

  // Limpa todo o display
  display.clearDisplay();

  // Escreve no Display
  display.setTextSize(2);       // Tamanho da Fonte
  display.setTextColor(BLACK);  // Cor da Fonte

  display.setCursor(((display.width() / 2) - 25), ((display.height() / 2) - 16)); // Posição no Display onde vamos escrever

  display.println("AUTO");   // Texto que será escrito
  display.display();
  delay(500);

  // Invertendo texto no Display
  display.setTextColor(WHITE, BLACK); // Comando para inverter a cor da Fonte (Preto --> Branco)
  display.setCursor(((display.width() / 2) - 25), display.height() / 2);

  display.println("CORE");
  display.display();

  delay(2000);
  display.clearDisplay();

  // ==== ESCREVENDO ARDUINO =====
  display.setTextColor(BLACK);     // Cor da Fonte
  
  display.setCursor(((display.width() / 2) - 20), (display.height() / 2) - 15);   // Posição de inicio para escrever

  display.drawLine(((display.width() / 2) - 20), (display.height() / 2) - 17, ((display.width() / 2) + 19), (display.height() / 2) - 17, BLACK); // Desenhando a 1º linha
  display.display();
  
  display.setTextSize(1);     // Tamanho da fonte
  display.println("ARDUINO");
  
  display.drawLine(((display.width() / 2) - 20), (display.height() / 2) - 7, ((display.width() / 2) + 19), (display.height() / 2) - 7, BLACK);   // Desenhando a 2º Linha
  display.display();

  // Escrevendo Caracteres da Tabela ASCII
  display.setCursor(((display.width() / 2) - 9), (display.height() / 2) - 4);

  display.setTextSize(3);
  display.write(3);        // escrevendo o caractere número (3) da tabela

  display.display();
  delay(2000);
  display.clearDisplay();

  // ==== ESCREVENDO ROBÓTICA ===
  display.setTextColor(BLACK);
  display.setCursor(((display.width() / 2) - 25), (display.height() / 2) - 15);

  display.drawLine(((display.width() / 2) - 25), (display.height() / 2) - 17, ((display.width() / 2) + 25), (display.height() / 2) - 17, BLACK);
  display.display();
  
  display.setTextSize(1);     // Tamanho da fonte
  display.println("ROBOTICA");
  
  display.drawLine(((display.width() / 2) - 25), (display.height() / 2) - 7, ((display.width() / 2) + 25), (display.height() / 2) - 7, BLACK);
  display.display();

  // Escrevendo Caracteres da Tabela ASCII
  display.setCursor(((display.width() / 2) - 9), (display.height() / 2) - 5);

  display.setTextSize(3);
  display.write(3);        // escrevendo o caractere número (3) da tabela

  display.display();
  delay(2000);
  display.clearDisplay();

  // ==== ESCREVENDO 'E' ====
  display.setTextColor(BLACK);
  display.setCursor(((display.width() / 2) - 10), (display.height() / 2) - 15);

  display.setTextSize(3);     // Tamanho da fonte
  display.println("E");

  display.display();
  delay(1000);
  display.clearDisplay();

  // ==== ESCREVENDO MUITO MAIS ====
  display.setTextColor(BLACK);
  display.setCursor(((display.width() / 2) - 30), (display.height() / 2) - 15);

  display.drawLine(((display.width() / 2) - 30), (display.height() / 2) - 17, ((display.width() / 2) + 30), (display.height() / 2) - 17, BLACK);
  display.display();
  
  display.setTextSize(1);     // Tamanho da fonte
  display.println("MUITO MAIS");
  
  display.drawLine(((display.width() / 2) - 30), (display.height() / 2) - 7, ((display.width() / 2) + 30), (display.height() / 2) - 7, BLACK);
  display.display();

  // Escrevendo Caracteres da Tabela ASCII
  display.setCursor(((display.width() / 2) - 9), (display.height() / 2) - 5);

  display.setTextSize(3);
  display.write(3);        // escrevendo o caractere número (3) da tabela

  display.display();
  delay(2000);
  display.clearDisplay();
}

void loop() {}
// ============================== FIM ===================================

Analisando o Código a Fundo

Analisando o nosso código, podemos observar que ele inicia com um construtor, ou seja, uma função que irá receber parâmetros (sejam eles letras ou números), no nosso caso, o nosso construtor Adafruit vai receber a pinagem de nosso display, seguindo a ordem abaixo:

Adafruit_PCD8544 display = Adafruit_PCD8544(8, 9, 10, 11, 12);      // Criando o construtor e passando a pinagem dele

// pin 8  - Serial clock out    (SCLK)
// pin 9  - Serial data out     (DIN)
// pin 10 - Data/Command select (D/C)
// pin 11 - LCD chip select     (CS)
// pin 12 - LCD reset           (RST)

Logo depois, entrando em nosso void setup(), observe que utilizamos a função display.setContrast(). Ela tem a função de setar o nosso display com um contraste já definido.

display.setContrast(50);

Essa função, precisa ser chamada antes de qualquer outra função da classe ‘tela‘. Sobre o valor do contraste, caso nenhum valor seja informado será usada o valor padrão que é igual a 70. E este valor, pode ser definido de 0 a 127.

Logo em seguida, escrevemos na tela utilizando os seguintes comandos:

// Escreve no Display
  display.setTextSize(2);       // Tamanho da Fonte
  display.setTextColor(BLACK);  // Cor da Fonte

  display.setCursor(((display.width() / 2) - 25), ((display.height() / 2) - 16)); // Posição no Display onde vamos escrever

  display.println("AUTO");   // Texto que será escrito

Neste bloco de código, temos o comando display.setTextSize(), a qual vai configurar o tamanho da nossa fonte. Outro comando que aparece é o display.setTextColor(), comando onde passamos qual será a cor de nossa fonte.

Já o comando displaysetCursor(), segue a mesma lógica dos display de LCD, onde vamos passar pra ele, a posição do ponteiro no display. Por fim, temos o comando display.println(“texto”), o qual vai escrever na tela o texto que se encontra entre os parenteses.

Para finalizar a nossa análise do código, vamos falar de mais um comando, com este comando foi possível desenhar as linhas, observe:

display.drawLine();

Este comando, tem como função, desenhar linhas. Os parâmetros que ele irá receber são (x1,y1,x2,y2,COR DA FONTE). Dessa forma, é preciso ter as coordenadas inicial e final para que ele “ligue os pontos”. Show?

Em nosso próximo post, vou abordar o “Efeito scroll” e como transferir imagens para o nosso display! Então caso não saiba o que seja “Efeito Scroll”, basta clicar no link abaixo onde eu explico esse efeito utilizando um Display LCD. Combinado?

Resultado do Projeto

Por fim, deixo o vídeo que temos no nosso canal do Youtube onde mostra o funcionamento do nosso projeto de hoje!

Mas e ai? Gostou do post? Caso tenha ficado algo incompleto para você, comenta abaixo 📝

Dicas😯 Dúvidas? 🤔 Idéias de post?💭 Críticas? 😱 Só comentar também! 😉

Forte abraço!

0.00 avg. rating (0% score) - 0 votes