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

329 Flares Twitter 0 Facebook 329 Google+ 0 329 Flares ×

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.

dsc00016

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

nokia 5110

Fig 2 – 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.

snake_1878153c

Fig 3 – Famoso jogo Snake

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.

lcds5110

Fig 4 – 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

Ingredientes:

Para este exemplo, utilizaremos:

  • Arduino UNO (ou outra placa compatível)
  • Módulo display Nokia 5110 (Azul ou Vermelho)
  • Fios jumper’s
  • Protoboard

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:

esquemalcd5110red

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:

esquemalcd5110blue

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

Arduino Due com display placa vermelha

Fig 8 - Montagem do circuito utilizando um Arduino Due

Fig 8 – Montagem do circuito utilizando um Arduino Due

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  o nome da placa Arduino é exibido : “COM3 (Arduino 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

Caso ainda não tenha feito, baixe as bibliotecas clicando aquiPara 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 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 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

Fig 9 – 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:

Display Nokia 5110

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

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
smallfont5110

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

mediumnumbers

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

bignumbers

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:

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

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 contéudo 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

Caso ainda não tenha feito, baixe as bibliotecas clicando aquiPara 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 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 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 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 retangulo

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

tela.drawRect(0,0,83,47); //desenhando um retangulo

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 retangulo

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

tela.clrRect(0,0,83,47); //apagando o retangulo

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:


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

 

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 15 - Exemplo 3

Fig 16 – Bônus

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

Revisado por Ícaro Lobo e editado por Allan Mota

Apostila Arduino 800px

 

329 Flares Twitter 0 Facebook 329 Google+ 0 329 Flares ×

William Lima

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

You may also like...

  • Pingback: Display LCD Nokia 5110 - Imprimindo uma imagem - Vida de Silício()

  • Pingback: Display LCD Nokia 5110 - Imprimindo uma imagem - VDS()

  • Guilherme Borges

    Há alguma diferença quantos aos recursos incluídos nessas duas bibliotecas comparando com as da Adafruit (Adafruit_GFX.h e Adafruit_PCD8544.h) Há alguma facilidade que exista em uma e que a outra não possua, ou ambas possuem os mesmo recursos??

    • Olá Guilherme Borges!
      Tem algumas diferenças no uso das funções. As bibliotecas da Adafruit possuem algumas funções adicionais como a de desenhar triângulos por exemplo.
      Para o uso de imagens acho a biblioteca do Hennin Karlsen mais fácil de usar pois a sua função draWBitmap suporta o array gerado pelo programa LCD Assistant(o que não ocorre com a mesma função da biblioteca da Adafruit). Outro ponto interessante dela são os caracteres numéricos médios e grandes.

    • Olá Guilherme Borges!
      Tem algumas diferenças no uso das funções. As bibliotecas da Adafruit possuem algumas funções adicionais como a de desenhar triângulos por exemplo.
      Para o uso de imagens acho a biblioteca do Hennin Karlsen mais fácil de usar pois a sua função draWBitmap suporta o array gerado pelo programa LCD Assistant(o que não ocorre com a mesma função da biblioteca da Adafruit). Outro ponto interessante dela são os caracteres numéricos médios e grandes.

  • Thiago Passamani

    William funciona para Raspberry Pi?

  • Lucas dantas

    Olá Willian, eu gostaria se saber se tem como fazer esse procedimento com um display de 4 polegadas? De um aparelho lumia 520.

  • Cara, excelente post!! Explicou muita coisa e “esmiuçou” todas as partes!

    Minha dúvida quanto à esse display é: tem alguma forma de “desligar” o display após algum tempo e tornar a ligá-lo apertando um botão? Por exemplo… quero fazer um relógio com informações de umidade e temperatura… mas se eu deixar ligado o tempo inteiro, vai consumir muita energia e a vida útil do display vai pro espaço. Existe alguma forma de desligar/ligar o display via software? E o backlight?

  • Andre Rocha

    Pessoal boa noite! Preciso de uma ajuda, tenho uma central de alarme residencial com frequência 433,92 a qual trabalha com o DECODIFICADOR HT6P20B, a dificuldade está em fazer o arduino conversar com esse decodificador.

    Tenho transmissor e receptor do arduino, tentei configura-los como um controle gravando o codigo de transmissão, porém não deu certo. Alguém já passou por isso? Ou poderia auxiliar?

  • R.Peetz aka. legaCy

    DICA: Se o seu display estiver com um monte de pixel preto misturado com o texto ou o texto estiver com pixel branco no meio é só ajustar o contraste. eu estava tendo esse problema com o meu e resolvi ajustando o contraste para 60 logo no tela.InitLCD(60);

  • Fernando B M

    Amigo, seu artigo está bem completo, parabéns. Mas está equivocado quanto ao uso da placa vermelha. Ela aceita somente 3.3v na alimentação, mas nos outros pinos tolera de 3.3v a 5v. No esquema da figura 6, você coloca resistores de 10k em série, que só servem para limitar a corrente, se quisesse baixar de 5v para 3.3v teria que fazer divisores de tensão. Na figura 8 não tem esse monte de resistores, não dá pra entender o que foi feito lá… De qualquer forma, acho que vale a pena dar uma verificada nisso e corrigir a figura. Abraço

  • Filipe Chagas

    Copiei e colei o codigo acima, e deu os seguintes erros:

    sketch_jan21a.ino:1:27: error: LCD5110_Basic.h: No such file or directory
    sketch_jan21a:3: error: ‘LCD5110’ does not name a type
    sketch_jan21a.ino: In function ‘void setup()’:
    sketch_jan21a:19: error: ‘tela’ was not declared in this scope
    sketch_jan21a.ino: In function ‘void loop()’:
    sketch_jan21a:24: error: ‘tela’ was not declared in this scope
    sketch_jan21a:26: error: ‘LEFT’ was not declared in this scope
    sketch_jan21a:29: error: ‘CENTER’ was not declared in this scope
    sketch_jan21a:32: error: ‘RIGHT’ was not declared in this scope

  • Paulo Ricardo

    Olá, gostaria de saber se tem alguma biblioteca para esse display compatível com o TIVA, utilizando a IDE ENERGIA.