Display LCD Nokia 5110 – Imprimindo uma imagem

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

No último tutorial vimos como fazemos para imprimir textos e desenhos no display LCD Nokia 5110 usando as bibliotecas LCD5110_Basic.h e LCD5110_Graph.h . Nesse tutorial faremos algo ainda mais interessante. Iremos aprender a imprimir uma imagem em nosso display usando uma função da biblioteca LCD5110_Graph.h.

Para o melhor aproveitamento desse tutorial, é melhor que você já tenha lido o tutorial anterior sobre o Display LCD Nokia 5110.

Exemplo 3 – Imprimindo uma imagem no display Nokia 5110

Ingredientes:

Para este exemplo, utilizaremos:

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

Montando o projeto

O circuito desse exemplo é o mesmo do exemplo 1 do tutorial Display LCD Nokia 5110 – Aprenda como utilizá-lo com seu Arduino, caso precise, você pode consultá-lo para entender o esquema de montagem.

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

Preparando a Imagem

Neste exemplo iremos movimentar uma imagem na tela. Para que uma imagem seja exibida na tela do LCD 5110 será necessário convertê-la para uma arranjo de caracteres hexadecimais, formato suportado pela biblioteca e a tela. Além disso é necessário ajustar as dimensões da imagem para seja igual ou menor que as dimensões da tela (84×48 pixels).

Vamos utilizar esta imagem:

vidadesilicio

Fig 1 – Imagem para o exemplo 3

 

Para editar a imagem usaremos o editor de imagens GIMP que é gratuito e está disponível aqui. Você pode utilizar qualquer outro editor de imagens.

Abra a imagem com o GIMP, vá no menu Imagem e clique em “Redimensionar imagem”

Na janela seguinte coloque o valor 48 para altura e automaticamente ele ajustará a largura para 63. Clique em Redimensionar e a imagem estará com as dimensões ideais para o display.

Fig 12 - Redimensionando a imagem

Fig 2 – Redimensionando a imagem

Depois vá no menu Imagem, clique em “Modo” e em seguida “Indexado…”
Na janela a seguir selecione “Usar paleta preto e branco (1 Bit) e clique em “Converter”

Fig 12 - Convertendo a imagem para um bitmap de 1 bit

Fig 3 – Convertendo a imagem para um bitmap de 1 bit

Agora clique no menu Arquivo, vá em “Exportar como”, selecione o formato “Imagem BMP do Windows”, defina um nome(para o exemplo usaremos “vidadesilicio.bmp”) e clique em “Exportar”
O resultado será essa imagem:

Fig 13

Fig 4

Agora vamos utilizar o programa LCD Assistant para converter nossa imagem em um arranjo hexadecimal. Para baixa-lo clique aqui. Abra o programa clique em “File” e em seguida “Load image” e abra a imagem “vidadesilicio.bmp”. Clique novamente em “File” e clique na opção “Save output”. Salve com o nome “vidadesilicio.c” dentro da pasta exemplo3.

Fig 14 - Salvando o arquivo gerado pelo programa LCD Assistant

Fig 5 – Salvando o arquivo gerado pelo programa LCD Assistant

 

Programando

Crie um programa (sketch) e salve com o nome de “modulo_5110_ex3”.

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.

Com o seu programa salvo, adicione a biblioteca LCD5110_Basic.h.

Em seguida, insira nele o código conforme escrito abaixo:

#include <LCD5110_Graph.h>

LCD5110 tela(8,9,10,12,11);

//O arranjo gerado pelo programa terá o mesmo nome da imagem
extern uint8_t vidadesilicio[]; //Obtendo o arranjo

void setup()
{
 tela.InitLCD();
}

void loop()
{
 for (int i=0; i<=160; i++) //laço necessário para o carrinho percorrer a tela toda
 {
 tela.clrScr(); //limpando a tela e o buffer
 tela.drawBitmap(i-63, 0, vidadesilicio, 63, 48); //desenhando a imagem na tela
 tela.update(); //atualizando a tela com as informações armazenadas no buffer
 delay(100); //Aumentando esse tempo a velocidade diminuirá,
             //diminuindo-o a velocidade aumentará
 }
}

Colocando para funcionar

Se tudo deu certo, o resultado deve ser o mesmo apresentado abaixo:

Fig 15 - Exemplo 3

Fig 6 – Exemplo 3

Entendendo o Software

Para imprimir a imagem no display, utilizamos duas funções, são elas:

drawBitmap(coluna, linha, bitmap, largura, altura)
Esta função desenha na tela um bitmap que deve ser previamente definido como um array hexadecimal. Os valores de coluna e linha definirão em que posição a imagem será desenhada na tela. Os valores de altura e largura correspondem ao tamanho da imagem. Os valores máximos são 84 para largura e 48 para altura.

tela.drawBitmap(coluna, linha, nome da imagem, largura, altura); //desenhando a imagem na tela

Você pode encontrar ela em nosso programa tal como apresentado abaixo. Note que a coluna está em função da variável i, usada no for, e por isso a imagem se mexe na tela.

 

tela.drawBitmap(i-63, 0, vidadesilicio, 63, 48); //desenhando a imagem na tela

update()

Esta função serve para atualizar a tela, ela será necessária toda vez que alguma alteração na tela seja feita.

tela.update(); //atualizando a tela com as informações armazenadas no buffer

Desafio

  1. Utilizando o sensor ultrassom HC-SR04 modifique o código do exemplo 3 para que o carrinho pare na tela sempre que a distância for menor que 10cm. Caso a distância seja maior ou igual a 10cm ele deverá continuar andando.

Esperamos que tenham gostado, deixe seu comentário com dúvidas, sugestões ou com a foto ou vídeo de seu projeto!!

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 - Aprenda como utilizá-lo com seu Arduino - Vida de Silício()

  • João Garcia

    Olá, William,

    Primeiramente, parabéns pela matéria! Porém, sou iniciante nesse mundo.

    Minha dúvida é a seguinte. Após construir e salvar meu sketch, numa pasta particular do arduino, onde eu gravo o arquivo hexadecimal da imagem? (para que meu sketch carregue na execução do programa). (pode ser criada uma pasta de imagens junto às bibliotecas do LCD, sensores etc..?)

    Agradeço antecipadamente a atenção.

    • Olá João, obrigado!
      Você deverá salvar o arquivo “.c” dentro da pasta do seu sketch!
      Perceba que na figura 5 o arquivo hexadecimal da imagem “vidadesilicio.c” é salvo na mesma pasta do sketch exemplo3.ino!
      Se tiver qualquer outra dúvida não hesite em perguntar!

      • João Garcia

        Olá, Willian!
        Desculpe-me a falta de atenção!
        Foi muito bem explicado. O detalhe importante é a extensão do arquivo (.c).
        Muito obrigado e um abraço.

  • João Garcia

    Olá, Willian
    Segui todos os procedimentos para uma imagem que escolhi na net.
    Redimensionada ficou com 50×48. O sketch foi compilado sem problemas. No entanto, no visor ela ficou toda embaralhada. Usei a biblioteca da Adafruit para o Lcd. Será que foi este o problema?
    Agradeço a atenção.

    • Angelo Ventura

      O meu está ocorrendo o mesmo erro do João Garcia. O que pode ser??
      E parabens pelo seu Post!!!

  • Roberto Ozu

    Olá Willian,

    Muito legal este post. Executei numa boa os exemplos 1 e 2, mas no terceiro estou encontrando um problema. A imagem do tanquinho aparece todo “esculhambado”. Daria para você mandar o vidadesilicio.c para que eu possa comparar com o que gerei?

  • Marco Antonio Santiago

    Olá Willian, parabéns pelo trabalho.
    Também estou com o mesmo problema do pessoal, a imagem aparece toda borrada (pontos) deslocando pela tela. o arquivo “.c” encontra-se na mesma pasta do sketch. Já editei vários arquivos de imagem e o problema persiste. Você pode disponibilizar esse seu arquivo “.c” para que a gente pode esclarecer se o problema é na criação do nosso arquivo “.c”, “.bmp” ou seja lá onde or ?

    • Carlos Alberto Neto

      Funcionou só que o include é ‘#include ‘