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á?

[toc]

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.

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

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:

#include <LCD5110_Basic.h>

LCD5110 tela(8,9,10,12,11);
/*Cria objeto da classe LCD5110
CLK – Pino 8
DIN – Pino 9
DC – Pino 10
RST – Pino 12
CE – Pino 11
*/

//Obtendo as fontes
extern uint8_t SmallFont[];
extern uint8_t MediumNumbers[];
extern uint8_t BigNumbers[];

void setup()
{
 tela.InitLCD(); //Inicializando o display
}

void loop()
{
 tela.setFont(SmallFont); //Definindo a fonte
 //Escreve a palavra vida alinhada à esquerda começando na linha 0
 tela.print("Vida", LEFT, 0);
 delay(500);
 tela.clrScr(); //Apaga o contéudo que estiver na tela
 tela.print("de", CENTER, 20);
 delay(500);
 tela.clrScr();
 tela.print("Silicio", RIGHT, 40);
 delay(500);
 tela.clrScr();
 delay(1000);

tela.print("VIDA", LEFT, 0);
 tela.print("DE", CENTER, 20);
 tela.print("SILICIO", RIGHT, 40);
 delay(1000);
 tela.clrScr();

tela.print("Numero medio:", LEFT, 0);
 tela.setFont(MediumNumbers);
 tela.printNumI(123, CENTER, 16);
 delay(2000);
 tela.clrScr();

tela.setFont(SmallFont);
 tela.print("Numero grande:", LEFT, 0);
 tela.setFont(BigNumbers);
 tela.printNumI(123, CENTER, 16);
 delay(2000);
 tela.clrScr();

}

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:

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.

 LCD5110 tela(8,9,10,12,11);
 /*Cria objeto da classe LCD5110
 CLK – Pino 8
 DIN – Pino 9
 DC – Pino 10
 RST – Pino 12
 CE – Pino 11
 */

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

 LCD5110(CLK, DIN, DC, RST, CE);
 // CLK: pino do sinal de Clock;
 // DIN: pino para transferência de dados;
 // DC: pino de seleção de registros (dados/comandos);
 // RST: pino para resetar;
 // CE: pino para seleção do chip.

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.

 void setup()
 {
 tela.InitLCD(); //Inicializando o display
 }

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

tela.setConstrastLCD(); //Alterando o valor de contraste do display

setFont(nomedaFonte)

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

 tela.setFont(nome da fonte); //Definindo a fonte

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

 tela.setFont(SmallFont); //Definindo a fonte

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

tela.print("texto", coluna, linha);
tela.print("texto", alinhamento, linha);

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:

[cpp collapse="false"]
 //Escreve a palavra vida alinhada à esquerda começando na linha 0
  tela.print("Vida", LEFT, 0);
 [/cpp]

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

tela.print(número,coluna,linha);
 tela.print(número,alinhamento,linha);

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

 tela.print(número,coluna,linha);
 tela.print(número,alinhamento,linha);

clrScr()

Apaga o buffer e o que estiver na tela.

tela.clrScr(); //Apaga o conteúdo 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:

#include <LCD5110_Basic.h>
#include <LCD5110_Graph.h>

LCD5110 tela(8,9,10,12,11);
/*Define os pinos do Display 5110 e
cria o objeto da classe LCD5110
CLK – Pino 8
DIN – Pino 9
DC – Pino 10
RST – Pino 12
CE – Pino 11
*/

void setup()
{
 tela.InitLCD(); //Inicializando o display
}

void loop()
{
 tela.clrScr(); //limpando a tela
 tela.drawRect(0,0,83,47); //desenhando o retangulo
 tela.update(); //atualizando a tela com os dados escritos no buffer
 delay(500);
 tela.drawLine(0,23,41,0); //desenhando uma linha diagonal com
 // as coordenadas (0,23) e (41,0)
 tela.drawLine(0,23,41,47);
 tela.drawLine(41,0,83,23);
 tela.drawLine(41,47,83,23);
 tela.update();
 delay(500);
 tela.drawCircle(41,23,14); //desenhando um circulo centralizado com diâmetro de 14 pixels
 tela.update();
 delay(500);
 tela.drawLine(28,21,56,21); //desenhando uma linha reta mantendo
 //as mesmas coordenadas das linhas
 tela.drawLine(28,25,56,25);
 tela.update();
 delay(3000);
}

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:

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”

tela.drawLine(Xo,Yo,X,Y);

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

tela.drawLine(0,23,41,0); //desenhando uma linha diagonal com
 // as coordenadas (0,23) e (41,0)

clrLine(coluna_inicio, linha_inicio, coluna_fim, linha_fim)

Apaga uma linha de acordo com as coordenadas informadas.

tela.clrLine(0,23,41,0); //apaga uma linha diagonal com
 // as coordenadas (0,23) e (41,0)

drawRect(coluna_inicio, linha_inicio, coluna_fim, linha_fim)

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

tela.drawRect(Xo,Yo,X,Y); //desenhando um retângulo

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

tela.drawRect(0,0,83,47); //desenhando um retângulo

clrRect(coluna_inicio, linha_inicio, coluna_fim, linha_fim)

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

tela.clrRect(Xo,Yo,X,Y); //apagando o retângulo

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

tela.clrRect(0,0,83,47); //apagando o retângulo

drawRoundRect(coluna_inicio, linha_inicio, coluna_fim, linha_fim)

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

//desenhando um retangulo com cantos arredondados
 tela.RoundRect(Xo,Yo,X,Y);

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

tela.RoundRect(0,0,83,47);

clrRoundRect(coluna_inicio, linha_inicio, coluna_fim, linha_fim)

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

//apagando um retangulo com cantos arredondados
 tela.clrRoundRect(Xo,Yo,X,Y);

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

tela.clrRoundRect(0,0,83,47);

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.

tela.drawCircle(X0,Y0,D);

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

//desenhando um circulo centralizado no ponto (41,23) com diâmetro de 14 pixels
 tela.drawCircle(41,23,14);

clrCircle(coluna_centro, linha_centro, raio)

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

tela.clrCircle(X0,Y0,D);

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

//desenhando um circulo centralizado no ponto (41,23) com diâmetro de 14 pixels
 tela.drawCircle(41,23,14);

Desafio

Imprima na tela o valor de distancia lido por um sensor ultrassom;
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.