Como criar imagens em display OLED Deixe um comentário

Olá pessoal! No artigo de hoje, faremos uso de um display OLED exibindo uma imagem monocromática. Vamos lá?

Como criar imagens em display OLED

Organic Light-Emitting Diode ou Diodo orgânico emissor de luz é a sigla OLED. Diversos displays e TVs possuem esta tecnologia, trazendo imagens com ótima resolução e baixo consumo de energia elétrica.

Existem displays OLED muito pequenos em duas ou mais cores para uso com Arduino. São divididos em tamanho (em polegadas) ou por sua forma de comunicação. Seguem alguns exemplos:

Como criar imagens em display OLED

(1) 0.91” com protocolo I2C

(2) 0.96” com protocolo I2C

(3) 0.96” com protocolo SPI

Neste artigo será utilizada a versão 0.96” com protocolo I2C, pelo tamanho e menos conexões a serem feitas. Vamos aos materiais:

Materiais necessários

Montagem do circuito

Faremos o circuito conforme mostrado na figura abaixo:

Como criar imagens em display OLED

Onde:

Arduino Display
A4 SDA
A5 SCL (SCK)
GND GND
5V VCC

Instalação de bibliotecas

Usaremos duas bibliotecas a serem instaladas, chamadas Adafruit_GFX.h e Adafruit_SSD1306.h. Para a instalação, vá na IDE Arduino no menu Sketch => Incluir biblioteca => Gerenciar bibliotecas.

Na barra de busca do Gerenciador de biblioteca, procure por gfx e pressione Enter. Clique no botão Instalar e aguarde o carregamento. Depois faça o mesmo para a outra biblioteca digitando SSD1306.

Como gerar código para imagem

Escolha uma imagem monocromática para mostrar no display. No caso, utilizei uma versão preto e branco da logo MakerHero. Utilize softwares ou aplicativos para aumentar o contraste e deixar a imagem com somente duas cores.

Como criar imagens em display OLED

OBS: Caso utilize uma imagem em várias cores, com degradê e afins, não será exibida de forma correta no display.

A imagem será convertida para códigos hexadecimais e mostradas no display. Para esta conversão, utilize o site http://javl.github.io/image2cpp/ para gerar o código referente à imagem.

Como criar imagens em display OLED

Em 1. Select Image clique no botão Escolher arquivos e selecione a imagem para conversão. Role a tela para os próximos passos conforme imagem a seguir:

Como criar imagens em display OLED

Em 2. Image Settings escolha em:

(1) Canvas size(s): o tamanho da imagem para o display. No caso, o display em uso tem as dimensões 128 x 64. Caso não mude, ele terá o tamanho da imagem original, que não será mostrada corretamente no display.

(2) Scalling: a escala da imagem. Escolha a opção scale to fit, keeping propotions para que a imagem tenha a proporção do display, senão ficará cortada. Para deixar a imagem centralizada, marque as opções horizontally e vertically.

Em (3) 3. Preview você terá uma prévia da exibição.

Role a página para baixo até a opção 4. Options.

Como criar imagens em display OLED

Escolha as opções:

(4) Code output format: formato do código a ser gerado. Escolha Arduino code.

(5) Draw mode: como será desenhada a imagem no display. Escolha Horizontal – 1 bit per pixel.

Clique no botão verde Generate code e o código será gerado. Selecione o código hexadecimal em (6). Use a barra lateral pois é bastante extenso, copie a parte dentro das chaves { }.

Código

Este sketch já utiliza o código gerado pelo site. Caso queira utilizar outra imagem, substitua os códigos hexadecimais referente à imagem.

/* Sketch original escrito por Limor Fried/Ladyada (Adafruit Industries)
* Adaptado por Gedeane Kenshima
* 22/12/2020
*/
// Inclusão de bibliotecas
#include <SPI.h>
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
 
#define SCREEN_WIDTH 128 // Largura display, em pixels
#define SCREEN_HEIGHT 64 // Altura display, em pixels
 
// Declaração pino reset para I2C
#define OLED_RESET 	-1 // Será o mesmo reset da placa
 
// Criação objeto display
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);
 
// Altura e largura logo (alterar tamanho se necessário)
#define LOGO_HEIGHT   64
#define LOGO_WIDTH	128
// Código referente à logo MakerHero
// Cole entre chaves o código gerado no site
static const unsigned char PROGMEM MakerHero[] =
{ 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x3f, 0xff, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x3f, 0xff, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x00, 0x00, 0x3f, 0xff, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x00, 0x00, 0x3f, 0xff, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x0f, 0xfc, 0x3f, 0xff, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x1f, 0xfc, 0x3f, 0xff, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x1f, 0xfc, 0x3f, 0xff, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x1f, 0xfc, 0x3f, 0xff, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x1f, 0xfc, 0x3f, 0xff, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x1f, 0xfc, 0x3f, 0xff, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x1f, 0xfc, 0x3f, 0xff, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x1f, 0xfc, 0x3f, 0xff, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x1f, 0xfc, 0x3f, 0xff, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x1f, 0xfc, 0x3f, 0xff, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x1f, 0xf8, 0x3f, 0xff, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x1f, 0xf0, 0x3f, 0xff, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x00, 0x00, 0x7f, 0xff, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x00, 0x00, 0x7f, 0xff, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x00, 0x01, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x0f, 0xfe, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x0f, 0xfe, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x1f, 0xfe, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x1f, 0xfe, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x1f, 0xfe, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x1f, 0xfe, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x1f, 0xfe, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x1f, 0xfe, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x1f, 0xfe, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x1f, 0xfe, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x1f, 0xfc, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x3f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x7f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xff, 0x1b, 0xbd, 0xcf, 0x1e, 0x2f, 0x9c, 0x7f, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xfe, 0x1b, 0xbd, 0xc6, 0x1c, 0x27, 0x0c, 0x3f, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xfe, 0xfb, 0xbd, 0xd2, 0x7d, 0xe7, 0x2c, 0xbf, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xfe, 0xfb, 0xbd, 0xd2, 0x7d, 0xe7, 0x2c, 0xbf, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xfe, 0xfb, 0xbd, 0xd2, 0x7d, 0xe7, 0x2c, 0xbf, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xfe, 0x7b, 0xbd, 0xd2, 0x7d, 0xe7, 0x2c, 0x3f, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xfe, 0x3b, 0xbd, 0xc6, 0x3c, 0x67, 0x2c, 0x7f, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xfe, 0xfb, 0xbd, 0xde, 0x7d, 0xe7, 0x2c, 0xff, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xfe, 0xfb, 0xbd, 0xde, 0x7d, 0xe7, 0x2c, 0xff, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xfe, 0xfb, 0xbd, 0xde, 0x7d, 0xe7, 0x2c, 0xff, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xfe, 0xfb, 0xbd, 0xde, 0x7d, 0xe7, 0x2c, 0xff, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xfe, 0xfb, 0x8d, 0xde, 0x1d, 0xe1, 0x0c, 0xff, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
  	0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff};
 
void setup() {
  // Início comunicação serial com 9600 bps
  Serial.begin(9600);
 
  // SSD1306_SWITCHCAPVCC = gerar tensão para display 3.3V internamente
  if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) { // 0x3C sendo o end I2C
	Serial.println(F("Falha alocação SSD1306"));
	for(;;); // Não processado, loop infinito
  }
  // Limpa display
  display.clearDisplay();
}
 
// Sub-rotina para criar bitmap
void testdrawbitmap(void) {
  // Limpa display
  display.clearDisplay();
 
  // Preenche tela com bitmap
  display.drawBitmap(
	(display.width()  - LOGO_WIDTH ) / 2,
	(display.height() - LOGO_HEIGHT) / 2,
	MakerHero, LOGO_WIDTH, LOGO_HEIGHT, 1);
  // Exibe no display 
  display.display();
  // Aguarda 1 s
  delay(1000);
}
void loop() {
  // Chama sub-rotina
  testdrawbitmap();
  // Inverte cores no display
  display.invertDisplay(true);
  // Aguarda 1 s
  delay(1000);
  // Volta às cores originais no display
  display.invertDisplay(false);
  // Aguarda 1 s
  delay(1000);
}// Fim do sketch

Este código fará com que seja exibida a imagem conforme código por 1s, inverte as cores (o que era preto fica branco e vice versa) por mais um segundo, depois reverte para a cor original.

Carregue o código para seu Arduino. Aguarde a exibição da imagem e a respectiva inversão de cores no display.

Como criar imagens em display OLED

Gostou de conhecer o display OLED e como gerar imagens nele? Nos permite muitas possibilidades visuais em nossos projetos com Arduino.


Se você tiver dúvidas, sugestões ou experiências para compartilhar, fique a vontade para deixar um comentário abaixo. E para não perder nenhum conteúdo como este, não deixe de nos seguir no Instagram.

Faça seu comentário

Acesse sua conta e participe