Display gráfico 128×64

Neste tutorial você aprenderá a controlar o display gráfico 128×64 pixels em seus projetos. Aqui, abordaremos o uso das principais funções do display, como a inserção de caracteres especiais e de elementos como círculos, quadrados, box de texto e, além disso, você verá também o esquema de ligação utilizando o Arduino Mega.

[toc]

Contexto histórico

O display gráfico é largamente utilizado em celulares, painéis e interfaces IHM (interface homem máquina). Uma das grandes vantagens de sua utilização é o fato de funcionarem por pixels ao invés de caracteres definidos possibilitando a exibição de qualquer tipo de caractere, tamanho ou fonte. O display que iremos utilizar possui escrita branca, sendo composto por 128×64 pixels, ou seja, 128 pixels de comprimento e 64 pixels de largura.

Funcionamento do Display Gráfico 128×64

Este display possui a pinagem conforme a figura abaixo, tendo 8 portas de dados e 6 para controle, além da entrada de alimentação dos display assim como o controle de backlight (iluminação de fundo).

 

A tabela abaixo representa a função de cada pino do display com maiores detalhes.

Aplicações do Display Gráfico 128×64

O display gráfico pode ser utilizado em qualquer projeto que se deseja exibir uma informação ao usuário. Alguns exemplos de aplicação:

•  IHM;
• Osciloscópio;
• Medidor de energia elétrica;
• Jogos;
• Plotagem de funções;

Na área automobilística em projetos de veículos Baja, grande parte dos painéis são construídos com este tipo de display, a fim de exibir velocidade, rotação, nível de combustível e bateria, isso é possível devido sua ampla área de trabalho em relação à outros displays comerciais e também por sua robustez.

---

Mãos à obra- Conexão do Display Gráfico 128×64 com o Arduino

 Componentes Necessários

• 1 x​ ​Arduino Uno​ ou​ ​Arduino Mega
• 1 x ​Display Gráfico 128×64
• 1 x​ ​Potenciômetro 10KΩ
• 1 x​ ​Protoboard
• Fios Jumpers

Montando o Projeto

Agora chegou a hora de colocar a mão na massa, vamos​ conectar os componentes do projeto na protoboard.​ Antes disso, desligue o cabo USB de seu Arduino e posteriormente monte seu circuito conforme a figura a seguir.

Há duas observações que devemos ficar atentos. Uma delas está relacionada com a alimentação do display, de modo que, este deve ser ser alimentado com uma tensão de 5 Vdc. Outro ponto de atenção é que ao se utilizar o backlight (iluminação de fundo) haverá um consumo maior de corrente. Portanto, dependendo do consumo dos outros componentes do seu projeto, o Arduino não suportará e por proteção irá resetar constantemente. Nesse caso, é indicado que se utilize uma fonte externa ao invés da USB do Computador.

Conectando ao computador

Para iniciar o projeto, primeiramente conecte o Arduino ao computador por meio do cabo USB. Posteriormente, abra a IDE do Arduino e comece a programar.

Programando

Agora que toda a parte de hardware da aplicação está montada, vamos ao software responsável por controlar o display e exibir textos e formas nesse. Segue abaixo o código comentado que exemplifica o funcionamento do display gráfico 128×64.

// Biblioteca utilizada no Projeto
#include "U8glib.h"

//Configuração de Pinagem, Enable, RW, RS, RESET
U8GLIB_ST7920_128X64_1X Display(8, 7, 6 , 9);

// Rotina de Configuração da Escrita no Display
void Display_config() {

  Display.setFont(u8g_font_6x10);
  Display.setFontRefHeightExtendedText();
  Display.setDefaultForegroundColor();
  Display.setFontPosTop();
}

void Tela1() {

  Display.setFont(u8g_font_unifont);
  Display.drawStr(45, 15, "Vida");
  Display.drawStr(53, 40, "de");
  Display.drawStr(35, 60, "Silicio");
}

void Tela2() {

  Display.setFont(u8g_font_unifont);
  Display.drawBox(0, 0, 128, 64);
  Display.setColorIndex(0);
  Display.drawStr(4, 35, "Vida de Silicio");
  Display.drawStr(5, 35, "Vida de Silicio");
  Display.drawFrame(1, 1, 126, 62);
}

void Tela3() {

  Display.setFont(u8g_font_helvB08);
  Display.drawStr(45, 31, "Arduino");
  Display.drawStr90(105, 15, "Display");
  Display.drawStr270(20, 55, "Eletronica");
}

void Tela4() {

  Display.setFont(u8g_font_robot_de_niro);
  Display.drawStr(0, 13, "Vida de Silicio");

  Display.setFont(u8g_font_helvB08);
  Display.drawStr(0, 25, "Display Grafico");

  Display.setFont(u8g_font_8x13);
  Display.drawBox(0, 31, 96, 13);
  Display.setColorIndex(0);
  Display.drawStr(0, 41, "Arduino Mega");

  Display.setFont(u8g_font_ncenB10);
  Display.setColorIndex(1);
  Display.drawStr(0, 60, "0123456789");
}

void Tela5() {

  char ASCII[2] = " ";
  int dec = 32;

  Display.setFont(u8g_font_robot_de_niro);

  for (int linha = 10; linha < 70; linha += 10) {
    for (int coluna = 2; coluna < 128; coluna += 8) {
      ASCII[0] = dec;
      Display.drawStr(coluna, linha, ASCII);
      dec ++;
    }
  }
  
}

void Tela6() {

  Display.setFont(u8g_font_8x13);

  Display.drawLine(10, 2, 110, 2);
  Display.drawBox(20, 10, 15, 15);
  Display.drawCircle(85, 20, 15);
  Display.drawEllipse(30, 50, 10, 10);
  Display.drawDisc(90, 50, 10);
}

void setup() {

  Serial.begin(9600);

  if ( Display.getMode() == U8G_MODE_R3G3B2 )
    Display.setColorIndex(20);
  else if ( Display.getMode() == U8G_MODE_GRAY2BIT )
    Display.setColorIndex(1);
  else if ( Display.getMode() == U8G_MODE_BW )
    Display.setColorIndex(1);
}

void loop() {

  //Tela 1
  Display.firstPage();
  do {
    Display_config();
    Tela1();
  }
  while (Display.nextPage());
  delay(1000);

  //Tela 2
  Display.firstPage();
  do {
    Display_config();
    Tela2();
  }
  while (Display.nextPage());
  delay(1000);

  //Tela 3
  Display.firstPage();
  do {
    Display_config();
    Tela3();
  }
  while (Display.nextPage());
  delay(1000);

  //Tela 4
  Display.firstPage();
  do {
    Display_config();
    Tela4();
  }
  while (Display.nextPage());
  delay(1000);

  //Tela 5
  Display.firstPage();
  do {
    Display_config();
    Tela5();
  }
  while (Display.nextPage());
  delay(1000);

  //Tela 6
  Display.firstPage();
  do {
    Display_config();
    Tela6();
  }
  while (Display.nextPage());
  delay(1000);

}

Colocando para funcionar

Para verificar o funcionamento do display gráfico 128×64, foi montado em bancada o circuito com Arduino Mega, como pode ser visualizado no vídeo a seguir:

Entendo a fundo

Entendendo o Software

– Incluindo as bibliotecas a serem utilizadas

Inicialmente para que a aplicação funcione de forma adequada é necessário adicionar a biblioteca que permitirá acessar as funções e comandos para a escrita no display gráfico.

#include "U8glib.h"

Na próxima linha criamos um objeto chamado Display, responsável por acessar as instruções existentes na biblioteca U8glib.h. Note que o objeto Display(8, 7, 6, 9) envia quatro valores como parâmetro ao construtor da biblioteca, esses parâmetros dentro dos parênteses informam quais serão os pinos de comunicação entre o arduino e display. Sendo assim, cada pino tem a seguinte função (Enable, RW, RS, RESET).

U8GLIB_ST7920_128X64_1X Display(8, 7, 6 , 9);

– Configurando a escrita no display

Na função Display_config(), são definidos algumas características do display e a respeito das informações que seram escrita no mesmo. A primeira linha executada contém a seguinte instrução: Display.setFont(u8g_font_6x10), responsável por definir a fonte das mensagem mostradas no display com o nome da mesma dentro dos parenteses. Com a instrução Display.setFontRefHeightExtendedText() definimos a altura de referência padrão para o modelo do display utilizado, no caso o ST7920. Em seguida a instrução Display.setDefaultForegroundColor() que define a cor de fundo padrão e por último com o comando Display.setFontPosTop() é definido o tamanho de fonte máximo permitido para o display. Para mais modelos de fontes, cores de fundo, funções especiais e até mesmo como configurar outros modelos de display gráfico e tipos de comunicação consulte a arquivo .h da biblioteca U8glib.h que você encontrará uma grande variedade de informações e configurações para os mais variados displays.

void Display_config() {

  Display.setFont(u8g_font_6x10);
  Display.setFontRefHeightExtendedText();
  Display.setDefaultForegroundColor();
  Display.setFontPosTop();
}

– Função Tela1 – Imprimido texto simples

Para exibir as diferentes opções de escrita no display, foram criados algumas funções para cada tela em questão. Na função Tela1(), a primeira instrução executada é Display.setFont().  Esta responsável por selecionar a fonte que será empregada na escrita. Logo abaixo, o comando Display.drawStr recebe três parâmetros: (pos. X, pos. Y, “String”) para exibir a string entre aspas no display na posição desejada. Nesta função considera-se o ponto de referência (0,0) o ponto superior esquerdo.

void Tela1() {

  Display.setFont(u8g_font_unifont);
  Display.drawStr(45, 15, "Vida");
  Display.drawStr(53, 40, "de");
  Display.drawStr(35, 60, "Silicio");
}

– Função Tela2 – Imprimindo com moldura

Esta rotina tem por finalidade programar uma moldura na interface do display. A função Display.drawBox () recebe quatro parâmetros (pos. X, pos. Y, largura, altura) e tem por finalidade imprimir uma “caixa” na tela de acordo com os parâmetros. Já a função Display.setColorIndex(0), é responsável por inverter as cores dos pixels nas coordenadas da string no display. Observe ainda que a instrução Display.drawStr() foi executada duas veses, mas com um deslocamento em no eixo X. Esse artifício permite exibir mensagens na tela do display com a fonte mais grossa.

void Tela2() {

  Display.setFont(u8g_font_unifont);
  Display.drawBox(0, 0, 128, 64);
  Display.setColorIndex(0);
  Display.drawStr(4, 35, "Vida de Silicio");
  Display.drawStr(5, 35, "Vida de Silicio");
  Display.drawFrame(1, 1, 126, 62);
}

– Função Tela3 – Imprimindo com diferentes ângulos 

Esta tela é similar à tela 1. Nesse caso as informações exibidas são rotacionadas em 0, 90 e 270 graus. Ou seja, Display.drawStr() escreve a string Arduino na horizontal, Display.drawStr90() escreve a string Display com inclinação de 90º, enquanto que Display.drawStr270() provoca um giro de 270º na string Eletronica. Observe que a fonte nessa função foi alterada em relação a primeira tela com o comando Display.setFont(u8g_font_helvB08).

void Tela3() {

  Display.setFont(u8g_font_helvB08);
  Display.drawStr(45, 31, "Arduino");
  Display.drawStr90(105, 15, "Display");
  Display.drawStr270(20, 55, "Eletronica");
}

– Função Tela4 – Imprimindo textos com diferentes fundos e fontes

Nesta tela, há configuração de diferentes fontes de escrita e cor de fundo por meio das funções Display.setFont() e Display.setColorIndex().

void Tela4() {

  Display.setFont(u8g_font_robot_de_niro);
  Display.drawStr(0, 13, "Vida de Silicio");

  Display.setFont(u8g_font_helvB08);
  Display.drawStr(0, 25, "Display Grafico");

  Display.setFont(u8g_font_8x13);
  Display.drawBox(0, 31, 96, 13);
  Display.setColorIndex(0);
  Display.drawStr(0, 41, "Arduino Mega");

  Display.setFont(u8g_font_ncenB10);
  Display.setColorIndex(1);
  Display.drawStr(0, 60, "0123456789");
}

– Função Tela5 – Imprimindo caracteres especiais

Nessa tela foram apresentados alguns caracteres da tabela ASCII. Caso você não tenha uma tabela como essa pode acessar uma nesse LINK, usada como base para fazer o tutorial. No vídeo apresentando, os caracateres especiais exibidos correpondem aos numeros em decimal de 32 a 127. Observe que nao função Tela5, é instanciado a variável ASCII (do tipo char) que recebe os valores (do tipo int), e exibe o seu caractere correspondente por meio da intrução Display.drawStr(coluna, linha, ASCII). Os dois for presentes na função são utilizados para imprimir os caracteres ao longo de toda a área do display, sendo que o primeiro for é responsáel por pular linhas ao passo que na linhas corresponde não há mais espaço para exibir mais caracteres. Já o segundo for, ou for interno, é responsável por definir a posição de cada caractere ao longo dos 128 pixels disponíveis do display. A variável dec so pode ser incrementada até o valor 127, que é o valor decimal correspondente ao último caractere especial da tabela ASCII, por isso a variável foi incrementada dentro do segundo for, que por coincidência também tem limite de 127, definido pelo numero máximo de  pixels do display.

void Tela5() {

  char ASCII[2] = " ";
  int dec = 32;

  Display.setFont(u8g_font_robot_de_niro);

  for (int linha = 10; linha < 70; linha += 10) {
    for (int coluna = 2; coluna < 128; coluna += 8) {
      ASCII[0] = dec;
      Display.drawStr(coluna, linha, ASCII);
      dec ++;
    }
  }
  
}

– Função Tela6 – Imprimindo formas geométricas

Na função Tela6(), são exibidos diferentes formas geométricas, todas as funções tem em comum os seguites parâmetros (pos. X, pos. Y). Com a mescla dessas figuras geométricas é possível fazer vários formatos e artes diferentes para serem exibidos no display. As seguir listamos oque cada instrução para desenhar as figuras no display recebe de parâmetros:

• Display.drawLine(pos. X , pos. Y, comprimento em X, pos. final Y);
• Display.drawBox(pos. X, pos. Y, comprimento da base, comprimento da altura);
• Display.drawCircle(pos. X, pos. Y, raio do círculo);
• Display.drawEllipse(pos. X, pos. Y, raio em X, raio em Y);
• Display.drawDisc(pos. X, pos. Y, raio do disco).

void Tela6() {

  Display.setFont(u8g_font_8x13);

  Display.drawLine(10, 2, 110, 2);
  Display.drawBox(20, 10, 15, 15);
  Display.drawCircle(85, 20, 15);
  Display.drawEllipse(30, 50, 10, 10);
  Display.drawDisc(90, 50, 10);
}

– Estabelecendo as configurações iniciais

Na função void setup(), foram realizados algumas configurações de exibião do display. Possibilitando definir a intensidade, a cor, e o pixel ativado. A função Display.getMode() seleciona o modo de operação do display. Por exemplo, o comando U8G_MODE_R3G3B2, define o padrão RGB.

void setup() {

  if ( Display.getMode() == U8G_MODE_R3G3B2 )
    Display.setColorIndex(20);
  else if ( Display.getMode() == U8G_MODE_GRAY2BIT )
    Display.setColorIndex(1);
  else if ( Display.getMode() == U8G_MODE_BW )
    Display.setColorIndex(1);
}

– Mudando as telas

Na função void loop() é realizada a mudanas das telas, na primeira linha é executada a instrução Display.firstPage(), que tem por finalidade iniciar a comunicação do display com o Arduino e habilitar a exibião de informações na tela do mesmo. Em seguida a função Display_config() já explicada anteriormente é executada, seguida da chamada da função Tela1(). A cada nova função de exibição de tela o comando Display.nextPage() também é executado para evitar sobreposição e lixo de caracteres das telas anteriores. Observe que o tempo de exibição de cada tela é de 1 segundo, sendo possível por meio da função delay() que possui como parâmetro o tempo em milisegundos da mudança da troca de telas.

  Display.firstPage();
  do {
    Display_config();
    Tela1();
  }

---

Desafio

Para aprimorar suas habilidade com o displays, propomos a você desenvolver um relógio analógico/digital. Uma dica, é utilizar o módulo RTC DS 3231. Agora é com você!

Fechamento

Neste tutorial, demonstramos como você pode utilizar o display gráfico em seus projetos, esperamos que você continue nos acompanhando e sinta-se à vontade para deixar suas sugestões dúvidas nos comentários abaixo.