Display LCD Nokia 5110 – Aprenda como utilizá-lo com seu Arduino

Já tivemos a oportunidade de explicar sobre o uso do Display LCD de caracter e como utilizá-lo com o Arduino. Apesar de muito útil, esse tipo de tela possui suas limitações. Caso você queira que a experiência do usuário com o seu projeto seja melhor através de funções gráficas esteticamente mais agradáveis, como por exemplo, imprimir uma imagem, é mais interessante a utilização de um display com mais funções tal como o display Nokia 5110 que possui uma resolução de 84×48 pixels. Nesse tutorial iremos aprender como usar o display Nokia 5110. Vamos lá?

As máquinas querem conversar

Por muitas vezes precisamos coletar dados ou interagir com sistemas automatizados. Dessa forma, precisamos de um caminho que torne essa interação possível. O nome desse caminho de comunicação chama-se IHM (Interface Homem Máquina).

IHM é um caminho pelo qual o homem e o computador podem se comunicar e interagir, visando atingir um objetivo comum.

Tipicamente, uma IHM é dada por algum tipo de saída (indicadores de velocidades, monitores, displays, auto-falantes, etc) e algum tipo de entrada (botões, touchscreen, microfone, câmera, dentre outros). Quanto mais fácil for para coletar informações e introduzir entradas em um sistema automatizado, mais trivial será a interação dele com o usuário.

Fig 1 – Exemplo de Interface Homem Máquina (IHM)

É ai que entram os displays! Boa parte dos dispositivos automatizados que utilizamos possuem displays. O motivo é claro: Eles podem apresentar ao usuário varias informações de forma rápida. Além disso, um display pode apresentar vários tipos de saídas, desde textos ou números até imagens em movimento.

O famoso celular Nokia 5110

O Nokia 5110 foi um popular telefone celular lançado pela Nokia em 1998 e fez bastante sucesso por diversos motivos: permitia a troca da tampa frontal por outras de cores diferentes, era de fácil utilização e tinha novas funcionalidades, como jogos e o recebimento de mensagens SMS. Além disso, o aparelho possuía um bom custo-beneficio e uma bateria com duração de vários dias.

Fig 2 – Nokia 5110

A tela não era colorida, porém, tinha uma ótima resolução para época e deu vida ao clássico jogo Snake que fez sua primeira aparição justamente no modelo 5110. A Nokia vendeu milhões de unidades do aparelho, contudo,  com o passar do tempo ele foi substituído por lançamentos mais modernos.

Aproveitando a onda de projetos para Arduino algumas fábricas resolveram aproveitar os displays desses milhões de telefones que estavam sem utilização, fazendo as devidas adaptações, para o uso com o Arduino.

Para isso, o display fora colocado em uma placa junto com o chip controlador PCD8544 da Philips. Esses módulos podem ser encontrados em duas versões, entretanto, a única diferença entre elas é que a versão de placa azul funciona em 5V enquanto que a versão de placa vermelha funciona em 3.3V.

Fig 3 – As duas versões do display LCD 5110

Neste tutorial será ensinado como utilizar um display LCD gráfico do Nokia 5110 usando as bibliotecas criadas por Henning Karlsen do site Rinky-Dink Eletronics.

Para baixar as bibliotecas clique aqui. Depois adicione ela à sua IDE Arduino

Fig 4 – Link para baixar biblioteca

Para saber como incluir uma biblioteca na IDE Arduino, visite o post Sensores DHT e Uso de Bibliotecas.


Mãos à obra – Exemplo 1 – Escrevendo no Display

Componentes necessários

Para este exemplo, utilizaremos:

Montando o projeto

Agora iremos conectar os componentes do projeto. Para isso, desligue o cabo USB de seu Arduino e monte seu circuito conforme a figura a seguir.

Para o display de placa azul que opera a 5V teremos o seguinte esquema:

Fig 5 – Esquema de ligações para o display de placa azul

Abaixo a tabela com as pinagens:

Pino Resistor Arduino Cor
1 – RST Pino 12 Amarelo
2 – CE Pino 11 Verde
3 – DC Pino 10 Azul
4 – DIN Pino 9 Laranja
5 – CLK Pino 8 Roxo
6 – VCC 5v Vermelho
7 – LIGHT 220R 5v Vermelho
8 – GND GND Preto

Para o display de placa vermelha que opera a 3.3V, precisamos colocar resistores de 10k Ohm nas entradas de sinal uma vez que a saída do Arduino UNO é de 5V. Nesse caso, teremos uma queda de tensão no resistor, diminuindo a tensão que chegará ao módulo.

Veja o esquema:

Fig 6 – Esquema de ligações para o display de placa vermelha

Abaixo a tabela com as pinagens:

Pino Resistor Arduino Cor
1 – RST 10K Pino 12 Amarelo
2 – CE 10K Pino 11 Verde
3 – DC 10K Pino 10 Azul
4 – DIN 10K Pino 9 Laranja
5 – CLK 10K Pino 8 Roxo
6 – VCC 3.3v Vermelho
7 – LIGHT 220R GND Marrom
8 – GND GND Preto

Nota: Caso o LCD 5110 de placa vermelha seja utilizado com um Arduino Due não será necessário o uso dos resistores de 10K pois suas portas operam a 3.3V!

Veja como ficou a nossa montagem:

Arduino Uno com display placa azul

Fig 7 – Montagem do circuito utilizando um Arduino UNO

Conectando o Arduino ao computador

Conecte seu Arduino ao computador e abra a IDE Arduino.

Antes de carregar um programa, você precisa selecionar qual porta você deseja usar para fazer carregar o programa no Arduino (upload). Dentro do Arduino IDE, clique no menu Ferramentas (tools) e abra o submenu Porta(Port). Clique na porta que seu Arduino está conectado, tal como COM3 ou COM4. Geralmente aparece o nome da placa Arduino : “COM3 (Arduino/Genuino Uno)”.

Você também precisa garantir que o tipo de placa apropriado está selecionado em Ferramentas(Tools) no submenu Placa (Board).

Programando

Crie um programa (sketch) e salve com o nome de “modulo_5110_ex1”.

Com o seu programa salvo, adicione a biblioteca LCD5110_Basic.h

Para baixar as bibliotecas clique aqui. Depois adicione ela à sua IDE Arduino

Para saber como incluir uma biblioteca na IDE Arduino, visite o post Sensores DHT e Uso de Bibliotecas.

Em seguida, insira nele o código conforme escrito abaixo:

Após escrever o código, clique em Carregar (Upload) para que o programa seja transferido para seu Arduino.

Colocando para funcionar

Se tudo deu certo, o resultado deve ser o mesmo apresentado abaixo:

Fig 9 – Exemplo 1

 


Entendendo a fundo – Exemplo 1

Entendendo o Hardware

Quando o assunto é displays é importante entendermos como é feita a organização da tela e as informações que serão impressas nela. Em resumo, uma tela é composta por uma matriz de pixels que estão organizados lado a lado. Cada pixel pode assumir uma cor, no caso de uma tela monocromática, cada pixel pode assumir uma cor opaca ou transparente.

Nosso display possui 84 pixels de comprimento e outros 48 pixels de altura.  Isso é, ele possui uma matriz de 84 pontos por 48 pontos. Veja como eles são organizados na figura abaixo:

Fig 10 – Entendendo a distribuição de pixels

Um ponto importante, é entender como eles estão enumerados. Indo de 0 a 83 da esquerda para direta e de 0 a 47 de cima para baixo. Dessa forma, quando queremos escrever algo no display, é importante saber onde estamos escrevendo, levando em conta essas coordenadas horizontais e verticais, que são denominadas de coordenadas x e y, respectivamente, ao longo do tutorial.

Fig 11 – Entendendo as coordenadas dos pixels

Entendendo o Software

Para o uso do módulo display Nokia 5110 temos que entender o uso de suas bibliotecas. Para esse exemplo, explicaremos a biblioteca que foi usada no exemplo 1, a biblioteca LCD5110_Basic.

Biblioteca LCD5110_Basic

LCD5110

É o construtor que cria um objeto da classe LCD5110. Ou seja, define em quais pinos do Arduino o módulo está conectado.

Essa é a forma mais comum de utilizá-lo:

Em alguns modelos do LCD 5110 o pino “CLK” pode aparecer como “SCK”, o pino “DIN” como “MOSI” e o pino “CE” como “CS”.

InitLCD(valorContraste)

Inicializa o LCD. Deve ser chamada antes de qualquer outra função da classe. O valor de contraste é opcional. Caso nenhum valor seja informado será usada o valor padrão que é igual a 70. O valor do contraste pode ser definido de 0 a 127.

setContrast(número)

Caso você queira alterar o valor do contraste da tela no meio do programa, você poderá usar essa função. Ela altera o valor de contraste para o valor informado (0 a 127).

setFont(nomedaFonte)

Esta função deverá ser usada antes de print, printNumF e PrintNumI para definir qual fonte será usada.

São suportadas as fontes “SmallFont”, “MediumNumbers” e “BigNumbers”.

Fig 12 – SmallFont – Tamanho dos caracteres: 6×8 pixels

Fig 13- MediumNumbers – Tamanho dos caracteres: 12×16 pixels
Fig 14 – BigNumbers –Tamanho dos caracteres: 14×24 pixels

print(texto,coluna,linha) 

Com esta função você poderá colocar um texto na tela. O texto deverá estar entre aspas e os valores de coluna e linha definirão em qual posição o texto irá começar na tela.

A coordenada de linha só pode assumir os valores: 0, 8, 16, 24, 32 ou 40

Outra forma de usar essa função é passando o parâmetro de alinhamento. Use LEFT para alinhar à esquerda, CENTER para alinhar ao centro e RIGHT para alinhar à direita.

Veja como foi usada em nosso programa:

printNumI(número inteiro,coluna,linha)

Com esta função você poderá colocar um número inteiro na tela. Seu uso é semelhante ao print().

A coordenada de linha só pode assumir os valores: 0, 8, 16, 24, 32 ou 40

printNumF(número, coluna, linha)

Com esta função você poderá colocar um número não inteiro, Float, na tela.

A coordenada de linha só pode assumir os valores: 0, 8, 16, 24, 32 ou 40

Seu uso é semelhante ao print().

clrScr()

Apaga o buffer e o que estiver na tela.

Outras funções

clrRow(coluna_inicio, coluna_fim)

Apaga um intervalo definido de uma coluna.

invert(modo)

Função para inverter a tela, caso o valor informado seja “true” ela inverterá a tela, caso seja falso deixará a tela no modo normal.

update()

Esta função serve para atualizar a tela, ela será necessária toda vez que alguma alteração na tela seja feita.


Exemplo 2 – É hora de desenhar

Este exemplo utiliza a biblioteca Graph para desenhar a bandeira do Brasil.

A montagem é a mesma que a do exemplo anterior. Dessa forma, apenas faremos outro programa.

Programando

Crie um programa (sketch) e salve com o nome de “modulo_5110_ex2”.

Com o seu programa salvo, adicione a biblioteca LCD5110_Graph.h

Em seguida, insira nele o código conforme escrito abaixo:

Após escrever o código, clique em Carregar (Upload) para que o programa seja transferido para seu Arduino.

Colocando para funcionar

Se tudo deu certo, o resultado deve ser o mesmo apresentado abaixo:

Fig 15 – Exemplo 2 funcionando

Entendendo a fundo – Exemplo 2

Entendendo o Software

As funções apresentadas no exemplo 1 estão presentes em ambas as bibliotecas, LCD5110_Basic e LCD5110_Graph. Porém existem algumas funções que são específicas da biblioteca Graph.

Biblioteca LCD5110_Graph

Para as funções de desenho a seguir os valores máximos são 83 para coluna e 47 para linha.

drawLine(coluna_inicio, linha_inicio, coluna_fim, linha_fim)

Desenha uma linha de acordo com as coordenadas informadas. Deve-se informar as coordenadas do ponto inicial “X0,Y0” e o ponto Final “X,Y”

Veja a função sendo usada em nosso exemplo:

clrLine(coluna_inicio, linha_inicio, coluna_fim, linha_fim)

Apaga uma linha de acordo com as coordenadas informadas.

drawRect(coluna_inicio, linha_inicio, coluna_fim, linha_fim)

Desenha um retângulo de acordo com as coordenadas informadas.

Veja a função sendo usada em nosso exemplo:

clrRect(coluna_inicio, linha_inicio, coluna_fim, linha_fim)

Apaga um retângulo de acordo com as coordenadas informadas.

Veja a função sendo usada em nosso exemplo:

drawRoundRect(coluna_inicio, linha_inicio, coluna_fim, linha_fim)

Desenha um retângulo com cantos arredondados de acordo com as coordenadas informadas.

Veja a função sendo usada em nosso exemplo:

clrRoundRect(coluna_inicio, linha_inicio, coluna_fim, linha_fim)

Apaga um retângulo com cantos arredondados de acordo com as coordenadas informadas.

Veja a função sendo usada em nosso exemplo:

drawCircle(coluna_centro, linha_centro, raio)
Desenha um círculo de acordo com as coordenadas informadas. O circulo é desenhando centralizado no ponto de cordenada Xo e Yo com diâmetro de D pixels.

Veja a função sendo usada em nosso exemplo:

clrCircle(coluna_centro, linha_centro, raio)

Apaga um círculo de acordo com as coordenadas informadas.

Veja a função sendo usada em nosso exemplo:


Desafio

  1. Imprima na tela o valor de distancia lido por um sensor ultrassom;
  2. Usando um DHT11 ou um LM35, imprima o valor de temperatura lido;

Esperamos que tenham gostado, deixe seu comentário com dúvidas, sugestões ou com a foto ou vídeo de seu projeto!!

Bônus – Aprenda a imprimir uma imagem

Veja nosso próximo tutorial e entenda como imprimir uma imagem no display Nokia 5110. Click na imagem para ler o tutorial Display LCD Nokia 5110 – Imprimindo uma imagem.

Fig 16 – Bônus

Fechamento

Esperamos que tenham gostado, deixe seu comentário com duvidas, sugestões ou com a foto ou vídeo de seu projeto!! Compartilhe à vontade.

Revisado por Ícaro Lobo e editado por Allan Mota

Estudante de Engenharia de Computação do CEUNES/UFES.