Como utilizar Display Nokia 5110 com Arduino?
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.
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:
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!
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.
/* ======================================================================================================== 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!
Parabéns pelo artigo!!! Gostaria de saber se já foi escrito o tutorial ensinando com incluir imagens usando a biblioteca Adafruit no display do Nokia 5110. Já agradeço diante mão pela sua disponibilidade!!!
Olá Fred, fico feliz que tenha gostado e a segunda parte já está na lista de post a serem feitos!
Estamos focando agora mais em IoT e robótica mas em breve a segunda parte irá sair e vamos enviar um e-mail à você comunicando combinado?
Grande abraço!