Na Aula 05 – Instax OLED [Parte I], começamos o preparo de uma imagem no formato bitmap para ser impressa no display OLED 128x64, como uma fotografia instantânea. Agora, chegou o momento de conectarmos o display OLED ao Arduino e fazermos as conversões dos dados da imagem para a programação. Vamos lá?
• Converter dados da imagem em matriz para exibição no display OLED;
• Utilizar a função drawBitmap(), recurso presente na biblioteca Adafruit GFX.
• Display OLED;
• Arduino Uno R3;
• Protoboard;
• 4 jumpers macho-macho;
• 4 jumpers macho-fêmea, caso não utilize protoboard;
• Computador e/ou notebook.
O formato bitmap é um tipo de imagem que armazena os dados em pixels, esse formato é ideal para o display OLED por permitir um controle preciso de cada pixel e alta qualidade da imagem.
Vimos, na última aula, que para converter uma fotografia para o formato bitmap podemos usar um software de edição de imagem. Como nosso foco é a impressão de fotografia no display OLED, o primeiro passo foi recortar e redimensionar a imagem para o tamanho do display OLED presente no kit de Robótica. Depois, indicamos a conversão da imagem para escala de cinza, pois o seu display só pode mostrar dois tons, para você ter uma prévia da impressão.
A imagem que preparamos e está como exemplo na programação desta aula é do braço robótico do B1N0. Sinta-se à vontade para explorar outras imagens e fotografias, lembrando da proporção 2:1 para nosso display!
Agora que temos a imagem em formato bitmap, precisamos convertê-la em um código que o Arduino possa entender, utilizando a ferramenta Image2cpp, e carregá-la ao Arduino para ser exibida, com o auxílio das bibliotecas Adafruit SSD1306 e Adafruit GFX Library, no display OLED.
Por essa ferramenta, podemos fazer o upload (1. Select image) tanto da imagem original do braço robótico do B1N0 quanto de outra que você desejar e, nas configurações de imagem (2. Image Settings), definir a cor de fundo e escalar para o tamanho do display, verificando o resultado prévio (3. Preview).
As opções de configuração da imagem (Image Settings) no Image2cpp permitem personalizar a conversão da imagem em array de bytes. Por exemplo:
■ Canvas size(s): Define o tamanho do “quadro” ou “canvas” da imagem e você pode escolher o tamanho adequado com base nas dimensões do display OLED.
■ Background color: Aqui, você pode escolher a cor de fundo (branco, preto ou transparente) para a imagem.
■ Invert image colors: Se ativada, essa opção inverte as cores da imagem. Pixels brancos se tornam pretos e vice-versa.
■ Dithering: Suaviza ou mistura as cores da imagem original para representação monocromática dos pixels no display OLED, com efeito de pontilhamento e gradiente de pixels.
Binary
Converte uma imagem colorida em preto e branco (1 bit) sem tons intermediários. Funciona aplicando um limiar: valores abaixo do limiar se tornam pretos, e valores acima se tornam brancos. É o método mais rápido e simples, mas pode perder muitos detalhes da imagem original.
Bayer
Usa uma matriz infinitamente repetida que determina os valores de dither para cada pixel. É usado para converter imagens em tons de cinza para 1 bit (preto e branco).
Floyd-Steinberg
É o algoritmo de difusão de erro mais conhecido. Ele distribui o erro de quantização para os pixels vizinhos, criando um efeito de suavização.
Atkinson
Também é um algoritmo de difusão de erro, mas usa pesos menores e ignora alguns pixels, resultando em um dithering mais suave e menos ruidoso.
■ Brightness / alpha threshold: Ajusta o brilho ou transparência. Se o brilho de um pixel estiver acima do nível especificado, o pixel se torna branco, caso contrário, o pixel se torna preto. Quando o canal alfa é selecionado, os valores opaco e transparente são usados.
■ Scaling: Dimensiona a imagem para o tamanho do quadro (Canvas size) definido.
• Original size – mantém o tamanho original de upload da imagem.
• Scale to fit, keeping proportions – dimensiona a imagem para caber no tamanho do quadro, mantendo as proporções.
• Stretch to fill canvas – estica a imagem para preencher a tela.
• Stretch to fill canvas horizontally – estica para preencher a tela horizontalmente.
• Stretch to fill canvas vertically – estica para preencher a tela verticalmente.
■ Center image: Centraliza horizontalmente e/ou verticalmente a imagem no display se a proporção da tela for diferente.
■ Rotate image: Rotaciona a imagem em ângulos de 0°, 90°, 180° ou 270°.
■ Flip image: Vira a imagem no sentido horizontal e/ou vertical.
O dithering (pontilhamento) é uma técnica usada para simular tons de cinza ou cores em displays que só podem exibir preto e branco (ou poucas cores). Ele cria a ilusão de diferentes níveis de intensidade ou sombreamento, mesmo quando o display é binário (apenas preto e branco).
As configurações afetam como a imagem será representada no array de bytes gerado pelo Image2cpp. Experimente diferentes combinações desses parâmetros para obter o resultado desejado e conhecer outros, se atentando que, para melhor impressão no display OLED.
Estando ok o resultado prévio da imagem, confira se o formato de saída está selecionado para Plain bytes (4. Output) e gere o código (Generate code) do array de bytes, na versão simples.
Além do array de bytes, a ferramenta Image2cpp gera um complemento de linhas, caso você deixe, como formato de saída, a opção Arduino code. Nossa programação está pronta para você imprimir a imagem que desejar, copie apenas o conteúdo presente dentro das chaves da constante do tipo unsigned char para substituir na programação - certifique-se de ter optado pela opção Plain bytes (bytes simples), que gera apenas o array de bytes e os dados da imagem como comentário //.
Consulte o PDF desta aula para continuar a montagem e programação do protótipo.
Que tal converter outros estilos de imagens e fotografias para serem impressas no display OLED?
Que tal criar uma animação com as imagens impressas no display OLED? Para isso, crie no escopo duas ou mais variáveis const unsigned char para cada imagem e, no void loop(), peça para que o Arduino exiba cada uma por um intervalo de tempo, gerando assim o efeito animado.
Que tal desenhar e recortar em uma superfície uma imagem que se relacione às câmeras instantâneas com um orifício do tamanho do display OLED? Assim, você pode encaixá-lo para exibir suas fotografias impressas.
O projeto não funcionar - atente para alguns possíveis erros:
• Verifique se os jumpers estão nos pinos certos e na mesma coluna dos terminais dos componentes, fazendo assim a conexão;
• Verifique as conexões SCL e SDA do display OLED ao Arduino;
• Verifique se a programação está adequada ao display;
• Verifique a conversão da imagem bitmap em matriz e correta declaração no escopo da programação.
Confira, compartilhando seu projeto com os demais colegas, se o objetivo de impressão de imagens e fotografias no display OLED foi alcançado. Compartilhem também suas experiências sobre todo o processo, refletindo em como isso pode contribuir para a criação de outros projetos.
ARDUINO. Documentação de Referência da Linguagem do Arduino. Disponível em: https://www.arduino.cc/reference/pt/. Acesso em: 04 mar de 2024.
AUTOCORE ROBÓTICA. Conhecendo o protocolo I2C com Arduino. Disponível em: https:// autocorerobotica.blog.br/conhecendo-oprotocolo-i2c-com-arduino/. Acesso em: 15 ago de 2023.
CATARINA. Adair Santana. Discretização de cores: Quantização. Disponível em: https://www.inf.unioeste.br/~adair/PID/Notas%20Aula/Discretizacao%20de%20 Cores%20-%20Quantizacao.pdf. Acesso em: 11 mar. 2024.
ELETROGATE. Guia Completo do Display OLED (parte 1) – O que é? Como funciona? Disponível em: https://blog.eletrogate.com/guia-completo-do-display-oled-parte-1-o-que-e-como-funciona-2/. Acesso em: 14 ago de 2023.
ELETROGATE. Guia Completo do Display OLED (parte 2) – Como programar? Disponível em: https://blog.eletrogate.com/guia-completo-do-display-oled-parte-2-como-programar-3/. Acesso em: 17 ago de 2023.
GITHUB. Image2cpp, by Jasper van Loenen. Disponível em: https://github.com/javl/ image2cpp. Acesso em: 26 fev. 2024.
SURMA. Ditherpunk – The article I wish I had about monochrome image dithering. Disponível em: https://surma.dev/things/ditherpunk/. Acesso em: 11 mar. 2024.