Guia Completo do Display OLED (parte 2) – Como programar

Introdução

Se você está lendo este post, muito provavelmente já conferiu a primeira parte do nosso Guia Completo do Display OLED. Caso não tenha visto, acessa já clicando aqui para aprender um pouco mais sobre a história e o funcionamento desse importante componente. Tendo feito isso, vamos partir para a parte prática do nosso guia. Vamos aprender como se programa um display OLED, demonstrando na prática com um projeto exemplo para maior entendimento. E aí, bora começar?

Projeto Exemplo

O projeto consistirá em três partes: a primeira consistirá numa série de comandos para imprimir diversos tipos de textos, formas e desenhos já disponíveis na biblioteca Adafruit; a segunda será destinada a imprimir uma imagem qualquer no display; e a terceira será para demonstrar como rodar um GIF no display OLED. O objetivo é familiarizar o leitor com as principais funcionalidades do componente aqui abordado. Cada parte terá um revisão detalhada de cada comando utilizado, assim como todo o desenvolvimento necessário para chegar naquele resultado. Mas antes, é aconselhável que o leitor abra um exemplo próprio da biblioteca instalada (se não possui a biblioteca, siga os passos abaixo para instala-la) apenas para a familiarização da impressão do display. Para isso, abra a IDE do Arduino e vá em Arquivo->Exemplos->Adafruit SSD1306->ssd1306_128x64_i2c.

Rode este exemplo no seu display OLED e observe algumas das funcionalidades deste componente, sua capacidade para produzir imagens e pequenas animações. Tendo feito esta familiarização, vamos começar com o nosso projeto!

Lista de Materiais

Os materiais necessários nesta prática são os seguintes:

Diagrama

O diagrama abaixo representa a montagem do projeto:

Instalar biblioteca

Para realizar esta prática, é preciso que o leitor instale algumas bibliotecas para que o código funcione. As bibliotecas que serão instaladas são a Adafruit SSD1306 e a Adafruit GFX. Portanto, siga os passos descritos abaixo para fazer a instalação. Primeiramente, abra sua IDE e clique em Sketch->Incluir Biblioteca->Gerenciar Bibliotecas…

Logo em seguida, faça a busca da biblioteca desejada, adafruit ssd1306, encontre a opção cujo autor é a Adafruit e clique para instalar.

Feito isso, procure pela segunda biblioteca, adafruit gfx, e instale a opção cujo o autor também é a Adafruit.

Tendo as duas bibliotecas instaladas, é necessário fazer uma pequena modificação em uma delas. O display que estamos utilizando aqui é 128×64, porém a biblioteca é feita para o 128×32, portanto precisamos modificar isso no código base. Neste caso, encontre a biblioteca no seu computador para podermos alterá-la. Vá em Documentos->Arduino->libraries->Adafruit SSD1306. Para abrir a biblioteca, utilize algum programa de texto, como o Word ou o Wordpad, para que possamos fazer a modificação.

Tendo aberto o texto, procure (Ctrl+F) pela expressão “define SSD1306_128_64”.

Tendo encontrado, basta descomentar esta opção e comentar a opção com 128×32, como feito abaixo.

Salve a modificação e volte para o IDE. Pronto! Agora podemos implementar o código.

Código

O código utilizado neste projeto está apresentado abaixo. Ele está dividido em três partes. Estas partes serão detalhadas no tópico a seguir.

Parte 1

Parte 2

Parte 3

Passo-a-passo da implementação

Os códigos foram apresentados, agora vamos para suas explicações.

Parte 1: Texto, formas e desenhos

Texto no Display

Inicialmente, define-se o tamanho da fonte que será usada para escrever o texto. Aqui, utilizou-se a fonte 1 com o comando display.setTextSize(). Logo em seguida, define-se a cor do texto, que será branco, através do comando display.setTextColor(). Define-se também em qual posição o cursor estará no display, onde o texto será escrito. O display é composto por 124 pixels na horizontal e 64 na vertical. Neste caso, o texto será posicionada nas coordenadas (0, 28), ou seja, na coluna 0 e na linha 28. Tendo setado a  posição do texto, basta escreve-lo, utilizando o comando display.println(), que imprime o texto desejado no display. O comando display.display() é necessário para instruir a biblioteca a realizar a transferência em massa do buffer de tela no ATmega328P para a memória interna do controlador SSD1306. Assim que a memória estiver sendo transferida, os pixels correspondentes ao buffer da tela aparecerão no display OLED. Por fim, o texto continuará impresso na tela por 2 segundos (delay(2000)) e posteriormente será apagado (display.clearDisplay()).

Mudar a fonte

Para mudar a fonte do texto, basta incluir a biblioteca necessária, neste caso, #include <Fonts/FreeSerif12pt7b.h>, e utilizar o comando display.setFont(), inserindo a fonte adicionada entre os parênteses. A biblioteca Adafruit GFX nos permite usar algumas fontes alternativas além das fontes internas. Ele permite que você escolha entre Serif, Sans e Mono. Cada fonte está disponível em negrito, itálico e em tamanhos diferentes.

 

Você pode escolher a partir da próxima seleção de fontes:

Texto invertido no Display

Alguns dos comandos utilizados nas partes seguintes já foram explicados, portanto apenas os comandos novos serão detalhados a partir daqui. Nesta parte do código, o texto será impresso com suas cores invertidas, ou seja, o texto será impresso na cor preta enquanto o seu entorno será branco. Para isso, basta inverter a cor do texto utilizando o comando display.setTextColor(BLACK, WHITE).

 

 

 

 

Mudar tamanho da fonte

Para mudar o tamanho da fonte, basta alterar o comando display.setTextSize().

 

 

 

 

 

 

 

Números no Display

Se for imprimir apenas números no display, não é necessário colocar aspas, basta apenas adicionar o número dentro dos parênteses.

 

 

 

 

 

 

Imprimir caracteres ASCII no Display

Há diversos caracteres ASCII disponíveis para uso, porém serão apresentados apenas 12 no exemplo. Para imprimir um caractere ASCII, basta utilizar o comando display.write() e digitar o número referente ao caractere que deseja dentro dos parênteses. Para saber quais são os caracteres, basta fazer uma rápida pesquisa online.

 

 

 

 

Movimentar texto sobre a tela

A movimentação do texto sobre a tela é feita através do comando display.startscrollright(0x00, 0x0f), movendo o texto para a direita, e display.startscrollleft(0x00, 0x0f), movendo para a esquerda. O comando display.stopscroll() para o movimento do texto.

 

 

 

 

 

Desenhar um Pixel

Para desenhar um pixel, basta utilizar a função display.drawPixel(), que possui 3 parâmetros, as coordenadas x e y do pixel e sua cor.

 

 

 

 

 

 

Linha

O comando display.drawLine() é utilizado para desenhar uma linha no display, sendo que seus 5 parâmetros se referem a: coordenada x e y do ponto inicial da linha, coordenada x e y do ponto final da linha e cor da linha.

 

 

 

 

 

 

Retângulo

O desenho de um retângulo pode ser feito através do comando display.drawRect(), o qual possui 5 parâmetros, coordenada x do vértice superior esquerdo do retângulo, coordenada y do mesmo vértice, largura do retângulo, altura e cor, respectivamente. Outro comando possível para desenhar um retângulo é o display.fillRect(), o qual desenha um retângulo preenchido de cor.

 

 

 

 

Retângulo com Borda Arredondada

Outro tipo de retângulo possível para desenhar é o com bordas arredondas. Para isso, basta usar o comando display.drawRoundRect(), que possui os mesmo parâmetros dos anterior, com uma pequena adição, o último parâmetro é o raio da curvatura da borda. O mesmo se aplica para o display.fillRoundRect().

 

 

 

 

 

Círculo

O círculo é desenhado através do comando display.drawCircle() (ou display.fillCircle() para círculos cheios), e ele possui 4 parâmetros, coordenada x do centro do círculo, coordenada y do centro do círculo, raio do círculo e sua cor.

 

 

 

 

 

 

Triângulo

O comando utilizado para desenhar um triângulo é o display.drawTriangle(), o qual possui 7 parâmetros, dos quais os 6 primeiros são as coordenadas x e y dos vértices superior, esquerdo e direito, respectivamente, e o último parâmetro é a cor do triângulo.

 

 

 

 

 

Inverter cores

O display OLED também permite que o texto seja escrito com cores invertidas. Para isso, basta utilizar o comando display.invertDisplay(). Seu único parâmetro representa apenas o estado da função, se ela será verdadeira (true, ou seja, se o texto será invertido) ou falsa (false, ou seja, se o texto não será invertido).

 

 

 

 

Parte 2: Imagens

Nesta parte, vamos entender como imprimir uma imagem no display OLED. Inicialmente, é necessário escolher uma imagem para a impressão. Pode ser qualquer imagem, desde que tenha uma resolução de no máximo 128×64, que é o tamanho do display utilizado aqui. A imagem escolhida para fazer o projeto deste post foi a seguinte:

Ela foi baixada do site Icon Archive, que pode ser acessado através deste link. O leitor pode escolher qual imagem quiser, apenas utilizamos este site pois nele é possível escolher o tamanho da imagem. Como dito anteriormente, ela precisa ser inferior a 128×64, e neste caso, escolhemos o tamanho 48×48.

Tendo baixado a imagem desejada, é preciso convertê-la para o modo monocromático. Para isso, se o leitor estiver utilizando um PC Windows, basta abrir a imagem no Paint e seguir os próximos passos:

Clique Aquivo->Salvar como, e na próxima janela, selecione Bitmap monocromático como tipo da imagem.

Feito isso, é necessário converter a imagem em uma matriz para podermos inseri-la no código. Recomendamos que utilize o programa LCD Image Converter, que pode ser acessado para download neste link. Continuaremos a explicação a partir do programa recomendado.

Tendo instalado o conversor, execute-o e abra a imagem nele. Vá em Options->Convertion…

Deixe a configuração igual a mostrada abaixo, para todas as abas destacadas.

Feito isso, clique em OK, depois clique em File->Convert…

Salve o documento convertido e o abra em um programa de texto. Copie a matriz hexadecimal e cole no código abaixo.

Se necessário, modifique o tamanho da imagem no comando display.drawBitmap(), o quarto e quinto parâmetro são a proporção da imagem utilizada em x e y, respectivamente.

Pronto! Basta rodar o código e sua imagem será impressa no display.

 

 

 

 

Parte 3

Por fim, a última parte do nosso projeto consiste em programar uma animação ou GIF no display OLED. Para isso, primeiro selecionamos um GIF. O leitor pode selecionar qualquer GIF que deseja, desde que seja preto e branco (se não for, siga os passos da parte anterior para tornar seu GIF monocromático) e tenha proporções de até 128×64. O GIF que vamos utilizar neste projeto foi baixado do site animated gifs, que pode ser acessado através deste link. Ele está ao lado.

Inicialmente, precisamos separar o GIF em frames. Para isso, iremos utilizar o site ezgif.com. Nele, basta fazer o upload do GIF, ou informar o URL do próprio, dividir o GIF em imagens e baixar o arquivo .zip. Feito isso, é necessário transformar as imagens do GIF em código para implementarmos no display. Para isso, utilizaremos o programa online image2cpp (link) para fazer a transformação. Depois de acessar o site, basta fazer o upload de todas as imagens do GIF. Faça na ordem de reprodução.

Feito isso, precisamos fazer algumas configurações. Certifique-se de que a página abaixo esteja igual a sua para que o código esteja correto.

Tudo pronto, agora basta clicar em “Generate code”. Copie todo o código gerado e cole no espaço informado abaixo.

Dentro do void loop, é possível perceber que há oito frames sendo impressos, pois estamos usando um GIF com oito frames. Cada frame é enviado para o display através da seguinte parte do código.

O leitor deve tirar ou incluir frames de acordo com o tamanho do seu GIF.

Pronto! Agora você sabe como incluir GIF em seus projetos com display OLED.

 

 

 

Considerações Finais

Aqui se encerra nosso Guia Completo do Display OLED. Espero que tenha compreendido como programar o display, os principais comandos e a lógica por trás. Certifique-se de praticar bastante seus conhecimentos, monte nosso projeto exemplo e crie projetos próprios, assim você se familiarizará com o componente.

Se o leitor se interessou pela implementação prática do projeto, acredito que gostará dos seguintes posts relacionados:

Curtiu o post? Avalie e deixe um comentário!

Siga-nos também no Instagram e nos marque quando fizer algum projeto nosso: @eletrogate.

Até a próxima!

Referências

Avaliação: 5.0/5. De 2 votos.
Espere por favor...
Ricardo Lousada
Ricardo Lousada
Graduando em Engenharia de Controle e Automação pela UFMG. Ocupo meu tempo aprendendo cada vez mais sobre eletrônica e programação, áreas que mais gosto. Meus hobbies são cinema e livros.
Acesse nossa loja