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?
Forte abraço!