IHM é um caminho pelo qual o homem e o computador podem se comunicar e interagir, visando atingir um objetivo comum.
O famoso Nokia 5110
O Nokia 5110 foi um popular telefone 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 receção de mensagens SMS. Além disso, o equipamento 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, contudo, com o passar do tempo ele foi substituído por outros telemóveis 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 foi colocado num modulo 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.
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 fazer download das bibliotecas clique aqui. Depois adicione ao Arduino IDE.
Exemplo 1 – Escrevendo
Material necessário:
- 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:
Abaixo a tabela com as pinagens:
Pino | Resistência | 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 resistências 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 na resistência, diminuindo a tensão que chegará ao módulo.
Veja o esquema:
Abaixo a tabela com as pinagens:
Pino | Resistência | 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 das resistências de 10K pois suas portas operam a 3.3V!
Veja como ficou a nossa montagem:
Arduino Uno com display placa azul
Arduino Due com display placa vermelha
Interligando o Arduino ao computador
Interligue o seu Arduino ao computador e abra a Arduino IDE.
Antes de carregar um programa, precisa selecionar qual porta que 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 em que o Arduino está ligado, tal como COM3 ou COM4. Geralmente o nome da placa Arduino é exibido : “COM3 (Arduino Uno)”.
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, faça download desta biblioteca clicando aqui.
Em seguida, insira 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("Arduino", LEFT, 0); delay(500); tela.clrScr(); //Apaga o contéudo que estiver na tela tela.print("", CENTER, 20); delay(500); tela.clrScr(); tela.print("Portugal", RIGHT, 40); delay(500); tela.clrScr(); delay(1000); tela.print("Arduino", LEFT, 0); tela.print("", CENTER, 20); tela.print("Portugal", 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.
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 pixeis 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 pixeis de comprimento e outros 48 pixeis de altura. Isso é, ele possui uma matriz de 84 pontos por 48 pontos. Veja como eles são organizados na figura abaixo:
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.
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 queira alterar o valor do contraste da tela no meio do programa, 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)
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
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 arduino alinhada à esquerda começando na linha 0 tela.print("Vida", LEFT, 0);
printNumI(número inteiro,coluna,linha)
Com esta função 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("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 no 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 aqui. 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 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.
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 no 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 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:
//apagando um circulo centralizado no ponto (41,23) com diâmetro de 14 pixels tela.clrCircle(41,23,14);
Artigo gentilmente cedido por Vida de Silicio
Todos os produtos utilizados neste artigo podem ser encontrados na Loja de Eletrónica e Robótica – ElectroFun.
Gostaram deste artigo? Deixem o vosso comentário no formulário a baixo e partilhem com os vossos amigos.
Não se esqueçam de fazer like na nossa Página no Facebook.
Podem ainda colocar as vossas dúvidas no nosso Forum da Comunidade Arduino em Portugal ou no nosso Grupo no Facebook Arduino Portugal – Qual o teu projeto?