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?
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!
Os materiais necessários nesta prática são os seguintes:
O diagrama abaixo representa a montagem do projeto:
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.
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.
#include <SPI.h>
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
#include <Fonts/FreeSerif12pt7b.h>
Adafruit_SSD1306 display(-1);
void setup()
{
// Inicializa com o I2C addr 0x3C
display.begin(SSD1306_SWITCHCAPVCC, 0x3C);
}
void loop() {
// Limpa o display
display.clearDisplay();
// Texto no display
display.setTextSize(1); // Fonte do texto
display.setTextColor(WHITE); // Cor do texto
display.setCursor(0,28); // Posiciona o cursor
display.println("Display OLED"); // Imprime mensagem
display.display();
delay(2000);
display.clearDisplay();
// Mudar a fonte
display.setFont(&FreeSerif12pt7b); // Muda a fonte
display.setTextSize(1);
display.setTextColor(WHITE);
display.setCursor(0,38);
display.println("OLED");
display.display();
delay(2000);
display.clearDisplay();
display.setFont(); // Retorna para a fonte normal
// Texto invertido no display
display.setTextColor(BLACK, WHITE); // Cores do texto 'invertido'
display.setCursor(0,28);
display.println("Display OLED");
display.display();
delay(2000);
display.clearDisplay();
// Muda o tamanho da fonte
display.setTextColor(WHITE);
display.setCursor(0,20);
display.setTextSize(3); // Tamanho da fonte: 3
display.println("Arduino");
display.display();
delay(2000);
display.clearDisplay();
// Números no display
display.setTextSize(2);
display.setCursor(0,24);
display.println(314159265); // Números
display.display();
delay(2000);
display.clearDisplay();
// Imprime caractteres ASCII no display
display.setCursor(0,10);
display.setTextSize(3);
display.write(1); // Caracter ASCII
display.setCursor(20,10);
display.write(2);
display.setCursor(40,10);
display.write(3);
display.setCursor(60,10);
display.write(4);
display.setCursor(80,10);
display.write(5);
display.setCursor(100,10);
display.write(6);
display.setCursor(0,35);
display.write(7);
display.setCursor(20,35);
display.write(8);
display.setCursor(40,35);
display.write(9);
display.setCursor(60,35);
display.write(11);
display.setCursor(80,35);
display.write(12);
display.setCursor(100,35);
display.write(14);
display.display();
delay(4000);
display.clearDisplay();
// Movimenta o texto sobre a tela
display.setCursor(0,20);
display.setTextSize(1);
display.println("Texto");
display.println("em");
display.println("movimento!");
display.display();
display.startscrollright(0x00, 0x0f); // Movimenta texto para a direita
delay(7000);
display.stopscroll();
delay(1000);
display.startscrollleft(0x00, 0x0f); // Movimenta texto para a esquerda
delay(7000);
display.stopscroll();
delay(1000);
display.clearDisplay();
delay(500);
//-----------------------------------------------------------------------------------------------------------
// Pixel
display.setTextSize(1);
display.setTextColor(WHITE);
display.setCursor(0,0);
display.println("Pixel");
display.drawPixel(64, 32, WHITE); // Pixel: Coordenada X, coordenada Y, cor
display.display();
delay(2000);
display.clearDisplay();
// Linha
display.setTextSize(1);
display.setTextColor(WHITE);
display.setCursor(0,0);
display.println("Linha");
display.drawLine(0, 20, 127, 60, WHITE); // Linha: Coordenada x e y do começo da linha, coordenada x e y do final da linha, cor
display.display();
delay(2000);
display.clearDisplay();
// Retângulo
display.setTextSize(1);
display.setTextColor(WHITE);
display.setCursor(0,0);
display.println("Retangulo");
display.drawRect(0, 17, 60, 40, WHITE); // Retângulo vazio: Coordenada X, coordenada Y, largura, altura e cor
display.fillRect(64, 17, 60, 40, WHITE); // Retângulo cheio: Coordenada X, coordenada Y, largura, altura e cor
display.display();
delay(2000);
display.clearDisplay();
// Retângulo com borda arredondada
display.setTextSize(1);
display.setTextColor(WHITE);
display.setCursor(0,0);
display.println("Borda arredondada");
display.drawRoundRect(0, 17, 60, 40, 8, WHITE); // Retângulo com borda arredondada: mesmos parâmetros do retângulo
display.fillRoundRect(64, 17, 60, 40, 8, WHITE); // Retângulo com borda arredondada cheio: mesmos parâmetros do retângulo
display.display();
delay(2000);
display.clearDisplay();
// Círculo
display.setTextSize(1);
display.setTextColor(WHITE);
display.setCursor(0,0);
display.println("Circulo");
display.drawCircle(20, 37, 20, WHITE); // Círculo: Coordenada X do centro, coordenada Y do centro, raio e cor
display.fillCircle(84, 37, 20, WHITE); // Círculo cheio: Coordenada X do centro, coordenada Y do centro, raio e cor
display.display();
delay(2000);
display.clearDisplay();
// Triângulo
display.setTextSize(1);
display.setTextColor(WHITE);
display.setCursor(0,0);
display.println("Triangulo");
display.drawTriangle(30, 17, 0, 62, 60, 62, WHITE); // Triângulo: Pares de coordenadas X e Y nos vértices do topo, a esquerda e a direita, e por fim, a cor do triângulo
display.fillTriangle(94, 17, 64, 62, 124, 62, WHITE); // Triângulo cheio: Pares de coordenadas X e Y nos vértices do topo, a esquerda e a direita, e por fim, a cor do triângulo
display.display();
delay(2000);
display.clearDisplay();
// Cores invertidas
display.invertDisplay(true);
display.setTextSize(1);
display.setTextColor(WHITE);
display.setCursor(0,0);
display.println("Invertido");
display.drawCircle(30, 37, 20, WHITE); // Círculo: Coordenada X do centro, coordenada Y do centro, raio e cor
display.drawRoundRect(64, 17, 60, 40, 8, WHITE); // Retângulo com borda arredondada cheio: mesmos parâmetros do retângulo
display.display();
delay(3000);
display.clearDisplay();
display.invertDisplay(false);
}
#include <SPI.h>
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
#include <Fonts/FreeSerif12pt7b.h>
Adafruit_SSD1306 display(-1);
static const unsigned char PROGMEM image_data_Saraarray[] = { // Imagem convertida deve vir aqui
0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xfe, 0x7f, 0xff, 0xff,
0xff, 0xff, 0xfe, 0x7f, 0xff, 0xff,
0xff, 0xff, 0xfe, 0x7f, 0xff, 0xff,
0xff, 0xff, 0xfe, 0x7f, 0xff, 0xff,
0xff, 0xff, 0xfe, 0x7f, 0xff, 0xff,
0xff, 0xff, 0xfe, 0x7f, 0xff, 0xff,
0xff, 0xff, 0xfc, 0x3f, 0xff, 0xff,
0xff, 0xe0, 0x00, 0x00, 0x07, 0xff,
0xff, 0xe3, 0xff, 0xff, 0xc7, 0xff,
0xff, 0xe7, 0xff, 0xff, 0xe7, 0xff,
0xff, 0xe7, 0xff, 0xff, 0xe7, 0xff,
0xff, 0xe7, 0x87, 0xe1, 0xe7, 0xff,
0xff, 0xe7, 0x87, 0xe1, 0xe7, 0xff,
0xff, 0xe7, 0x87, 0xe1, 0xe7, 0xff,
0xff, 0xe7, 0xff, 0xff, 0xe7, 0xff,
0xff, 0xe7, 0xff, 0xff, 0xe7, 0xff,
0xff, 0xe7, 0xff, 0xff, 0xe7, 0xff,
0xff, 0xe6, 0x00, 0x00, 0x67, 0xff,
0xff, 0xe6, 0x3f, 0xfc, 0x67, 0xff,
0xff, 0xe6, 0x7f, 0xfe, 0x67, 0xff,
0xff, 0xe6, 0x00, 0x00, 0x67, 0xff,
0xff, 0xe6, 0x00, 0x00, 0x67, 0xff,
0xff, 0xe7, 0x00, 0x00, 0xe7, 0xff,
0xff, 0xe7, 0xff, 0xff, 0xe7, 0xff,
0xff, 0xe3, 0xff, 0xff, 0xc7, 0xff,
0xff, 0xe0, 0x00, 0x00, 0x07, 0xff,
0xff, 0xff, 0xe0, 0x07, 0xff, 0xff,
0xff, 0xff, 0xe7, 0xe7, 0xff, 0xff,
0xff, 0xff, 0xe7, 0xe7, 0xff, 0xff,
0xff, 0xff, 0xe7, 0xe7, 0xff, 0xff,
0xff, 0xff, 0xe7, 0xe7, 0xff, 0xff,
0xff, 0xff, 0xe7, 0xe7, 0xff, 0xff,
0xfc, 0x00, 0x00, 0x00, 0x00, 0x3f,
0xf8, 0x00, 0x00, 0x00, 0x00, 0x1f,
0xf8, 0x00, 0x00, 0x00, 0x00, 0x1f,
0xf9, 0xff, 0xff, 0xff, 0xff, 0x9f,
0xf9, 0xff, 0xff, 0xff, 0xff, 0x9f,
0xf9, 0xff, 0xff, 0xff, 0xff, 0x9f,
0xf9, 0xe7, 0xff, 0xff, 0xe7, 0x9f,
0xf9, 0xe7, 0xff, 0xff, 0xe7, 0x9f,
0xf9, 0xe7, 0xff, 0xff, 0xe7, 0x9f,
0xf9, 0xe7, 0xff, 0xff, 0xe7, 0x9f,
0xf9, 0xe7, 0xff, 0xff, 0xe7, 0x9f,
0xf9, 0xe7, 0xff, 0xff, 0xe7, 0x9f,
0xf8, 0x00, 0x00, 0x00, 0x00, 0x1f,
0xf8, 0x00, 0x00, 0x00, 0x00, 0x1f,
0xfc, 0x00, 0x00, 0x00, 0x00, 0x3f
};
void setup() {
Serial.begin(115200);
if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {
Serial.println(F("SSD1306 allocation failed"));
for(;;);
}
delay(2000); // Pausa por 2 segundos
// Limpa o display
display.clearDisplay();
// Desenha um bitmap na tela
display.drawBitmap(40, 17, image_data_Saraarray, 48, 48, 1); // Coordenada X, coordenada Y, nome da imagem,
// tamanho na coordenada x, tamanho na coordenada y, nome do arquivo bitmap (sempre 1)
display.display();
}
void loop() {
}
#include <SPI.h>
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
#include <Fonts/FreeSerif12pt7b.h>
#define x 0
Adafruit_SSD1306 display(-1);
// 'frame_0_delay-0', 48x48px
const unsigned char Frame1 [] PROGMEM = {
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x20, 0x00, 0x00, 0x00,
0x00, 0x00, 0x3c, 0x00, 0x00, 0x00, 0x00, 0x0c, 0x07, 0x80, 0x00, 0x00, 0x00, 0x38, 0x00, 0xe0,
0x00, 0x00, 0x00, 0x60, 0x00, 0x3c, 0x00, 0x00, 0x03, 0xc0, 0x00, 0x07, 0x80, 0x00, 0x7e, 0x00,
0x00, 0x00, 0xe0, 0x07, 0xe0, 0x00, 0x00, 0x00, 0x38, 0x1c, 0x00, 0x00, 0x00, 0x00, 0x0e, 0x70,
0x00, 0x00, 0x00, 0x00, 0x03, 0xc0, 0x00, 0x00, 0x18, 0x00, 0x01, 0x80, 0x00, 0x00, 0x3e, 0x00,
0x00, 0x80, 0x00, 0x00, 0x3e, 0x00, 0x00, 0x80, 0x00, 0x38, 0x3e, 0x00, 0x00, 0x80, 0x00, 0x78,
0x1c, 0x00, 0x00, 0x80, 0x00, 0x7c, 0x18, 0x00, 0x00, 0x80, 0x00, 0x38, 0x18, 0x00, 0x00, 0x80,
0x00, 0x10, 0x18, 0x00, 0x00, 0x80, 0x00, 0x30, 0x18, 0x00, 0x00, 0x80, 0x00, 0x70, 0x18, 0x00,
0x00, 0x80, 0x00, 0xd0, 0x1c, 0x00, 0x00, 0xc0, 0x01, 0x90, 0x10, 0x00, 0x00, 0xc0, 0x00, 0x10,
0x10, 0x00, 0x00, 0x40, 0x00, 0x18, 0x10, 0x00, 0x00, 0x40, 0x00, 0x18, 0x10, 0x00, 0x00, 0x40,
0x00, 0x18, 0x10, 0x00, 0x00, 0x40, 0x00, 0x0c, 0x10, 0x00, 0x00, 0x40, 0x01, 0x8c, 0x10, 0x00,
0x00, 0x40, 0x0f, 0x0c, 0x11, 0xf0, 0x00, 0x40, 0x78, 0x0e, 0x18, 0xbc, 0x00, 0x40, 0xc0, 0x08,
0x00, 0x1f, 0x80, 0x47, 0x80, 0x08, 0x00, 0x03, 0xf0, 0x7c, 0x00, 0x00, 0x00, 0x00, 0x7e, 0xe0,
0x00, 0x00, 0x00, 0x00, 0x0b, 0xc0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x40, 0x0c, 0x00, 0x00, 0x00, 0x00, 0x4c, 0x4d, 0x00,
0x00, 0x00, 0x00, 0x38, 0x04, 0x00, 0x00, 0x00, 0x02, 0x30, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00
};
// 'frame_1_delay-0', 48x48px
const unsigned char Frame2 [] PROGMEM = {
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x0c, 0x00, 0x00, 0x00, 0x00, 0x00, 0x07, 0x80, 0x00, 0x00, 0x00, 0x18, 0x00, 0xe0,
0x00, 0x00, 0x00, 0x70, 0x00, 0x3c, 0x00, 0x00, 0x03, 0xc0, 0x00, 0x07, 0x00, 0x00, 0x1e, 0x00,
0x00, 0x01, 0xc0, 0x01, 0xf0, 0x00, 0x00, 0x00, 0x70, 0x07, 0x00, 0x00, 0x00, 0x00, 0x1c, 0x3c,
0x00, 0x00, 0x00, 0x00, 0x07, 0xe0, 0x00, 0x00, 0x00, 0x00, 0x01, 0x80, 0x00, 0x00, 0x00, 0x00,
0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0x00, 0x00, 0x00, 0x00, 0x70, 0x01, 0x80, 0x00, 0x00,
0x00, 0xf8, 0x01, 0x80, 0x0e, 0x00, 0x00, 0xfc, 0x00, 0x80, 0x1f, 0x00, 0x00, 0x78, 0x00, 0x80,
0x1f, 0x00, 0x00, 0x70, 0x00, 0x80, 0x1f, 0x00, 0x03, 0xe8, 0x01, 0x80, 0x0e, 0x00, 0x06, 0x2c,
0x01, 0x80, 0x0c, 0x00, 0x00, 0x27, 0x01, 0x80, 0x3f, 0x00, 0x00, 0x21, 0x00, 0x80, 0x24, 0xc0,
0x00, 0x20, 0x00, 0x80, 0x64, 0x40, 0x00, 0x20, 0x00, 0x80, 0xc4, 0x00, 0x30, 0x20, 0x00, 0x80,
0x04, 0x0c, 0x38, 0x70, 0x00, 0x80, 0x04, 0x78, 0x0c, 0xf0, 0x00, 0x80, 0x04, 0x60, 0x01, 0x98,
0x00, 0x80, 0x06, 0x00, 0x07, 0x19, 0x00, 0x80, 0x06, 0x00, 0x04, 0x19, 0xc0, 0x80, 0x66, 0x00,
0x00, 0x08, 0xf0, 0x81, 0xcf, 0x00, 0x00, 0x08, 0x3c, 0xce, 0x09, 0x80, 0x00, 0x08, 0x0f, 0xf8,
0x18, 0xc0, 0x00, 0x08, 0x03, 0xf0, 0x70, 0x40, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00
};
// 'frame_2_delay-0', 48x48px
const unsigned char Frame3 [] PROGMEM = {
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x38, 0x0f, 0x00, 0x00, 0x00, 0x00, 0x70, 0x01, 0x80,
0x00, 0x00, 0x01, 0xc0, 0x00, 0xe0, 0x00, 0x00, 0x06, 0x00, 0x00, 0x3c, 0x00, 0x00, 0x18, 0x00,
0x00, 0x07, 0x00, 0x00, 0xf0, 0x00, 0x00, 0x01, 0xe0, 0x07, 0x80, 0x00, 0x00, 0x00, 0x3e, 0x3e,
0x00, 0x00, 0x00, 0x00, 0x07, 0xe0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x80, 0x00, 0x00, 0x00, 0x00,
0x01, 0x80, 0x00, 0x00, 0x00, 0x00, 0x01, 0x80, 0x00, 0x00, 0x00, 0x00, 0x01, 0x80, 0x00, 0x00,
0x00, 0x00, 0x01, 0x80, 0x00, 0x00, 0x00, 0x00, 0x00, 0x80, 0x00, 0x00, 0x00, 0x00, 0x00, 0x80,
0x00, 0x00, 0x00, 0x00, 0x70, 0x80, 0x00, 0x00, 0x00, 0x00, 0xf1, 0x83, 0x00, 0x00, 0x00, 0x00,
0xf9, 0x87, 0x80, 0x00, 0x00, 0x00, 0xf9, 0x07, 0x80, 0x00, 0x00, 0x00, 0xf1, 0x0f, 0xc0, 0x00,
0x00, 0x00, 0xe1, 0x0f, 0xc0, 0x00, 0x00, 0x01, 0xe1, 0x07, 0x80, 0x00, 0x30, 0x06, 0x71, 0x03,
0x00, 0x04, 0x1c, 0x04, 0x71, 0x03, 0x80, 0x1e, 0x07, 0x44, 0x59, 0x87, 0x80, 0x60, 0x01, 0xf8,
0x48, 0x87, 0x80, 0xc0, 0x00, 0x7e, 0x68, 0x87, 0xc3, 0x80, 0x00, 0x10, 0x48, 0x85, 0xce, 0x00,
0x00, 0x00, 0x40, 0x85, 0x48, 0x00, 0x00, 0x01, 0xe0, 0x81, 0x40, 0x00, 0x00, 0x0f, 0x33, 0x21,
0x00, 0x00, 0x00, 0x0c, 0x19, 0xe3, 0x80, 0x00, 0x00, 0x00, 0x08, 0x02, 0xc0, 0x00, 0x00, 0x00,
0x18, 0x02, 0x40, 0x00, 0x00, 0x00, 0x18, 0x02, 0x70, 0x00, 0x00, 0x00, 0x10, 0x06, 0x10, 0x00,
0x00, 0x00, 0x10, 0x07, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00
};
// 'frame_3_delay-0', 48x48px
const unsigned char Frame4 [] PROGMEM = {
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x20, 0x00, 0x00, 0x00,
0x00, 0x30, 0x3c, 0x00, 0x00, 0x00, 0x00, 0x60, 0x07, 0x80, 0x00, 0x00, 0x01, 0xc0, 0x00, 0xe0,
0x00, 0x00, 0x07, 0x00, 0x00, 0x3c, 0x00, 0x00, 0x3c, 0x00, 0x00, 0x07, 0x00, 0x01, 0xe0, 0x00,
0x00, 0x01, 0xe0, 0x07, 0x00, 0x00, 0x00, 0x00, 0x70, 0x3c, 0x00, 0x00, 0x00, 0x00, 0x0e, 0xe0,
0x00, 0x00, 0x00, 0x00, 0x03, 0x80, 0x00, 0x00, 0x00, 0x00, 0x01, 0x80, 0x00, 0x00, 0x00, 0x00,
0x01, 0x80, 0x00, 0x00, 0x00, 0x00, 0x01, 0x80, 0x00, 0x00, 0x00, 0x00, 0x61, 0x80, 0x00, 0x00,
0x00, 0x00, 0x70, 0x0e, 0x00, 0x00, 0x00, 0x00, 0x3c, 0x3a, 0x00, 0x00, 0x00, 0x00, 0x27, 0xe2,
0x00, 0x00, 0x00, 0x07, 0x21, 0x86, 0x00, 0x00, 0x00, 0x07, 0xe0, 0x86, 0x00, 0x00, 0x00, 0x03,
0x00, 0x03, 0xf0, 0x00, 0x00, 0x01, 0x80, 0x30, 0x10, 0x00, 0x00, 0x00, 0x8c, 0xf8, 0x30, 0x00,
0x00, 0x03, 0x9f, 0xf8, 0x30, 0x00, 0x00, 0x0e, 0x1f, 0xf8, 0x3c, 0x00, 0x00, 0x0d, 0xdf, 0x7c,
0x18, 0x00, 0x20, 0x01, 0xff, 0x7f, 0x00, 0x1c, 0x3e, 0x00, 0x0e, 0x71, 0xc0, 0x70, 0x0f, 0x80,
0x0e, 0x70, 0x40, 0xc0, 0x03, 0xf0, 0x0b, 0xf0, 0x03, 0x80, 0x00, 0x78, 0x09, 0xf0, 0x06, 0x00,
0x00, 0x07, 0x08, 0x70, 0x0c, 0x00, 0x00, 0x03, 0x88, 0x70, 0x18, 0x00, 0x00, 0x00, 0x08, 0x30,
0xf0, 0x00, 0x00, 0x00, 0x7c, 0x38, 0x00, 0x00, 0x00, 0x00, 0xc4, 0x6c, 0x00, 0x00, 0x00, 0x00,
0x84, 0xcc, 0x00, 0x00, 0x00, 0x00, 0x04, 0xc4, 0x00, 0x00, 0x00, 0x00, 0x04, 0xc6, 0x00, 0x00,
0x00, 0x00, 0x06, 0x86, 0x00, 0x00, 0x00, 0x00, 0x06, 0x06, 0x00, 0x00, 0x00, 0x00, 0x04, 0x03,
0x00, 0x00, 0x00, 0x00, 0x04, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00
};
// 'frame_4_delay-0', 48x48px
const unsigned char Frame5 [] PROGMEM = {
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x38, 0x00, 0x00, 0x00,
0x00, 0x30, 0x1f, 0x00, 0x00, 0x00, 0x00, 0xe0, 0x01, 0xc0, 0x00, 0x00, 0x07, 0x80, 0x00, 0x70,
0x00, 0x00, 0x1c, 0x00, 0x00, 0x1e, 0x00, 0x00, 0xf0, 0x00, 0x00, 0x03, 0x80, 0x03, 0x80, 0x00,
0x00, 0x00, 0xe0, 0x1c, 0x00, 0x00, 0x00, 0x00, 0x3c, 0x70, 0x00, 0x00, 0x00, 0x00, 0x07, 0xc0,
0x00, 0x00, 0x00, 0x00, 0x03, 0x80, 0x00, 0x00, 0x00, 0x00, 0x03, 0x00, 0x00, 0x00, 0x00, 0x00,
0x03, 0x00, 0x00, 0x00, 0x00, 0x00, 0x03, 0x00, 0x80, 0x00, 0x00, 0x01, 0x83, 0x00, 0x00, 0x00,
0x00, 0x00, 0x03, 0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0x0c, 0x00, 0x00, 0x00, 0x08, 0x01, 0x00,
0x20, 0x00, 0x00, 0x08, 0x01, 0x00, 0x00, 0x00, 0x06, 0x00, 0x43, 0x00, 0x00, 0x00, 0x00, 0x00,
0x43, 0x00, 0x00, 0x00, 0x00, 0x00, 0xc3, 0x00, 0x00, 0x00, 0x00, 0x00, 0x81, 0x08, 0x80, 0x00,
0x00, 0x08, 0x81, 0x00, 0x80, 0x00, 0x00, 0x1f, 0x01, 0x00, 0xc0, 0x00, 0x00, 0x3f, 0x01, 0x00,
0xf8, 0x00, 0x01, 0xff, 0x01, 0x80, 0xfc, 0x0c, 0x30, 0x1f, 0x01, 0x80, 0x7c, 0x3c, 0x3c, 0x01,
0x01, 0x00, 0x7c, 0x40, 0x07, 0x01, 0x81, 0x00, 0x3c, 0x00, 0x01, 0xc0, 0xc0, 0x00, 0x7f, 0x00,
0x00, 0x7c, 0x60, 0xe1, 0xc1, 0x00, 0x00, 0x0c, 0x7c, 0x3f, 0x00, 0x00, 0x00, 0x00, 0x22, 0x06,
0x30, 0x00, 0x00, 0x00, 0x20, 0x22, 0x00, 0x00, 0x00, 0x00, 0x21, 0xe3, 0x00, 0x00, 0x00, 0x00,
0x23, 0x43, 0x00, 0x00, 0x00, 0x00, 0x20, 0x03, 0x00, 0x00, 0x00, 0x00, 0x30, 0x06, 0x00, 0x00,
0x00, 0x00, 0x30, 0x04, 0x00, 0x00, 0x00, 0x00, 0x10, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00
};
// 'frame_5_delay-0', 48x48px
const unsigned char Frame6 [] PROGMEM = {
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0xc0, 0x1e, 0x00, 0x00, 0x00, 0x01, 0x80, 0x0f, 0x80, 0x00, 0x00, 0x1f, 0x00, 0x00, 0xf0,
0x00, 0x00, 0x70, 0x00, 0x00, 0x1c, 0x00, 0x01, 0xc0, 0x00, 0x00, 0x07, 0x80, 0x0f, 0x00, 0x00,
0x00, 0x00, 0xe0, 0x38, 0x00, 0x00, 0x00, 0x00, 0x3d, 0xe0, 0x00, 0x00, 0x00, 0x00, 0x07, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00,
0x01, 0x80, 0x00, 0x00, 0x00, 0x00, 0x00, 0x80, 0x00, 0x00, 0x00, 0x00, 0x00, 0x80, 0x00, 0x00,
0x00, 0x00, 0x00, 0x80, 0x00, 0x00, 0x00, 0x00, 0x00, 0x80, 0x00, 0x00, 0x00, 0x00, 0x01, 0x80,
0x00, 0x00, 0x00, 0x00, 0x01, 0x80, 0x00, 0x00, 0x00, 0x00, 0x01, 0x80, 0x00, 0x00, 0x00, 0x00,
0x01, 0x80, 0x00, 0x00, 0x00, 0x00, 0x01, 0x80, 0x00, 0x00, 0x00, 0x00, 0x01, 0x80, 0x00, 0x00,
0x00, 0x00, 0x01, 0x80, 0x00, 0x00, 0x00, 0x00, 0x01, 0x80, 0x00, 0x00, 0x00, 0x00, 0x01, 0x00,
0x00, 0x00, 0x00, 0x00, 0x01, 0x00, 0x00, 0x18, 0x30, 0x00, 0x01, 0x00, 0x00, 0x70, 0x3e, 0x00,
0x01, 0x00, 0x00, 0x00, 0x03, 0xc0, 0x03, 0x00, 0x0c, 0x00, 0x00, 0x7c, 0x03, 0x00, 0x79, 0x00,
0x00, 0x0f, 0x83, 0x01, 0xc1, 0x00, 0x00, 0x80, 0xf1, 0x13, 0x81, 0x00, 0x03, 0xc0, 0x1f, 0x18,
0x01, 0x20, 0x07, 0xe0, 0x03, 0xd8, 0x01, 0xf0, 0x03, 0xf0, 0x00, 0x0c, 0x03, 0xf8, 0x03, 0xff,
0xe1, 0x84, 0x1f, 0xf8, 0x00, 0xd1, 0xff, 0x07, 0xff, 0xf0, 0x03, 0xb0, 0xc0, 0x03, 0x81, 0xc0,
0x0e, 0x20, 0x20, 0x83, 0x00, 0x40, 0x08, 0x20, 0x1c, 0xc2, 0x00, 0x20, 0x00, 0x40, 0x0e, 0x66,
0x00, 0x30, 0x00, 0x00, 0x00, 0x1c, 0x00, 0x10, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00
};
// 'frame_6_delay-0', 48x48px
const unsigned char Frame7 [] PROGMEM = {
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x10, 0x00, 0x00, 0x00,
0x00, 0x20, 0x1c, 0x00, 0x00, 0x00, 0x00, 0xe0, 0x06, 0x00, 0x00, 0x00, 0x03, 0x80, 0x03, 0x00,
0x00, 0x00, 0x0e, 0x00, 0x01, 0xc0, 0x00, 0x00, 0x78, 0x00, 0x00, 0x70, 0x00, 0x03, 0xc0, 0x00,
0x00, 0x1e, 0x00, 0x1e, 0x00, 0x00, 0x00, 0x03, 0xc0, 0x70, 0x00, 0x00, 0x00, 0x00, 0x78, 0xc0,
0x00, 0x00, 0x00, 0x00, 0x0f, 0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00,
0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0x00, 0x00, 0x00,
0x00, 0x00, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0x00,
0x00, 0x00, 0x00, 0x00, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00,
0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0x00, 0x00, 0x00,
0x00, 0x00, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0x00,
0x00, 0x00, 0x00, 0x00, 0x01, 0x00, 0x00, 0x18, 0x10, 0x00, 0x01, 0x00, 0x00, 0x70, 0x1e, 0x00,
0x01, 0x00, 0x07, 0xc0, 0x03, 0xe0, 0x01, 0x00, 0x1e, 0x00, 0x00, 0x7e, 0x01, 0x00, 0xe0, 0x00,
0x00, 0x03, 0x81, 0x07, 0x80, 0x00, 0x00, 0x00, 0xe1, 0x1c, 0x00, 0x00, 0x00, 0x00, 0x3d, 0x70,
0x00, 0x00, 0x00, 0x00, 0x07, 0x40, 0x00, 0x00, 0x04, 0x00, 0x00, 0x00, 0x00, 0x00, 0x06, 0x00,
0x00, 0x00, 0x08, 0x00, 0x03, 0x00, 0x00, 0x00, 0x08, 0x00, 0x1d, 0x00, 0x00, 0x00, 0x0c, 0x00,
0x1f, 0x00, 0x00, 0x10, 0x06, 0x00, 0x3f, 0x81, 0xf8, 0x1f, 0xf3, 0x30, 0x1f, 0xff, 0x80, 0x00,
0x7f, 0xf8, 0x0f, 0x87, 0x80, 0x01, 0x83, 0xfc, 0x1c, 0x00, 0xf8, 0x07, 0x03, 0x7c, 0x00, 0x00,
0x08, 0x1c, 0x03, 0x38, 0x00, 0x00, 0x00, 0x00, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00
};
// 'frame_7_delay-0', 48x48px
const unsigned char Frame8 [] PROGMEM = {
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x60, 0x00, 0x00, 0x00,
0x00, 0x18, 0x3c, 0x00, 0x00, 0x00, 0x00, 0x70, 0x07, 0x80, 0x00, 0x00, 0x01, 0xc0, 0x00, 0xe0,
0x00, 0x00, 0x03, 0x00, 0x00, 0x38, 0x00, 0x00, 0x0c, 0x00, 0x00, 0x0e, 0x00, 0x00, 0x78, 0x00,
0x00, 0x03, 0x80, 0x07, 0xc0, 0x00, 0x00, 0x00, 0xe0, 0xfe, 0x00, 0x00, 0x00, 0x00, 0x3d, 0xc0,
0x00, 0x00, 0x00, 0x00, 0x07, 0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00,
0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0x00, 0x00, 0x00,
0x00, 0x00, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0x80,
0x00, 0x00, 0x00, 0x00, 0x01, 0x80, 0x00, 0x00, 0x00, 0x00, 0x01, 0x80, 0x00, 0x00, 0x00, 0x00,
0x01, 0x80, 0x00, 0x00, 0x00, 0x00, 0x01, 0x80, 0x00, 0x00, 0x00, 0x00, 0x01, 0x80, 0x00, 0x00,
0x00, 0x00, 0x01, 0x80, 0x00, 0x00, 0x00, 0x00, 0x01, 0x80, 0x00, 0x0c, 0x00, 0x00, 0x01, 0x80,
0x00, 0x0c, 0x00, 0x00, 0x01, 0x80, 0x00, 0x3c, 0x10, 0x00, 0x01, 0x80, 0x00, 0x60, 0x1c, 0x00,
0x01, 0x80, 0x01, 0x80, 0x07, 0x80, 0x01, 0x80, 0x07, 0x00, 0x00, 0xe0, 0x01, 0x80, 0xfc, 0x00,
0x00, 0x3e, 0x01, 0x8f, 0xe0, 0x00, 0x00, 0x03, 0xc1, 0xbc, 0x00, 0x00, 0x00, 0x00, 0x7f, 0xe0,
0x00, 0x00, 0x00, 0x00, 0x02, 0x80, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0x80, 0x02, 0x00, 0x00, 0x00, 0x07, 0x00, 0x03,
0x00, 0x00, 0x1c, 0x04, 0x00, 0x01, 0x80, 0x80, 0x3f, 0xfc, 0x00, 0x0f, 0xf0, 0x80, 0x3f, 0xf0,
0x00, 0x08, 0x3c, 0xfc, 0x1f, 0x80, 0x00, 0x00, 0x07, 0xfc, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00
};
void setup() {
Serial.begin(115200);
if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {
Serial.println(F("SSD1306 allocation failed"));
for(;;);
}
delay(2000); // Pausa por 2 segundos
// Limpa o display
display.clearDisplay();
}
void loop() {
// Desenha um bitmap na tela
display.drawBitmap(40, 17, Frame1, 48, 48, 1); // Coordenada X, coordenada Y, nome da imagem,
// tamanho na coordenada x, tamanho na coordenada y, nome do arquivo bitmap (sempre 1)
display.display();
delay(x);
display.clearDisplay();
display.drawBitmap(40, 17, Frame2, 48, 48, 1); // Coordenada X, coordenada Y, nome da imagem,
// tamanho na coordenada x, tamanho na coordenada y, nome do arquivo bitmap (sempre 1)
display.display();
delay(x);
display.clearDisplay();
display.drawBitmap(40, 17, Frame3, 48, 48, 1); // Coordenada X, coordenada Y, nome da imagem,
// tamanho na coordenada x, tamanho na coordenada y, nome do arquivo bitmap (sempre 1)
display.display();
delay(x);
display.clearDisplay();
display.drawBitmap(40, 17, Frame4, 48, 48, 1); // Coordenada X, coordenada Y, nome da imagem,
// tamanho na coordenada x, tamanho na coordenada y, nome do arquivo bitmap (sempre 1)
display.display();
delay(x);
display.clearDisplay();
display.drawBitmap(40, 17, Frame5, 48, 48, 1); // Coordenada X, coordenada Y, nome da imagem,
// tamanho na coordenada x, tamanho na coordenada y, nome do arquivo bitmap (sempre 1)
display.display();
delay(x);
display.clearDisplay();
display.drawBitmap(40, 17, Frame6, 48, 48, 1); // Coordenada X, coordenada Y, nome da imagem,
// tamanho na coordenada x, tamanho na coordenada y, nome do arquivo bitmap (sempre 1)
display.display();
delay(x);
display.clearDisplay();
display.drawBitmap(40, 17, Frame7, 48, 48, 1); // Coordenada X, coordenada Y, nome da imagem,
// tamanho na coordenada x, tamanho na coordenada y, nome do arquivo bitmap (sempre 1)
display.display();
delay(x);
display.clearDisplay();
display.drawBitmap(40, 17, Frame8, 48, 48, 1); // Coordenada X, coordenada Y, nome da imagem,
// tamanho na coordenada x, tamanho na coordenada y, nome do arquivo bitmap (sempre 1)
display.display();
delay(x);
display.clearDisplay();
}
Os códigos foram apresentados, agora vamos para suas explicações.
// Texto no display
display.setTextSize(1); // Fonte do texto
display.setTextColor(WHITE); // Cor do texto
display.setCursor(0,28); // Posiciona o cursor
display.println("Display OLED"); // Imprime mensagem
display.display();
delay(2000); // Pausa de 2 segundos
display.clearDisplay(); // Limpa o 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
display.setFont(&FreeSerif12pt7b); // Muda a fonte
display.setTextSize(1);
display.setTextColor(WHITE);
display.setCursor(0,38);
display.println("OLED");
display.display();
delay(2000);
display.clearDisplay();
display.setFont(); // Retorna para a fonte normal
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:
FreeMono12pt7b.h FreeSansBoldOblique12pt7b.h FreeMono18pt7b.h FreeSansBoldOblique18pt7b.h FreeMono24pt7b.h FreeSansBoldOblique24pt7b.h FreeMono9pt7b.h FreeSansBoldOblique9pt7b.h FreeMonoBold12pt7b.h FreeSansOblique12pt7b.h FreeMonoBold18pt7b.h FreeSansOblique18pt7b.h FreeMonoBold24pt7b.h FreeSansOblique24pt7b.h FreeMonoBold9pt7b.h FreeSansOblique9pt7b.h FreeMonoBoldOblique12pt7b.h FreeSerif12pt7b.h FreeMonoBoldOblique18pt7b.h FreeSerif18pt7b.h FreeMonoBoldOblique24pt7b.h FreeSerif24pt7b.h FreeMonoBoldOblique9pt7b.h FreeSerif9pt7b.h FreeMonoOblique12pt7b.h FreeSerifBold12pt7b.h FreeMonoOblique18pt7b.h FreeSerifBold18pt7b.h FreeMonoOblique24pt7b.h FreeSerifBold24pt7b.h FreeMonoOblique9pt7b.h FreeSerifBold9pt7b.h FreeSans12pt7b.h FreeSerifBoldItalic12pt7b.h FreeSans18pt7b.h FreeSerifBoldItalic18pt7b.h FreeSans24pt7b.h FreeSerifBoldItalic24pt7b.h FreeSans9pt7b.h FreeSerifBoldItalic9pt7b.h FreeSansBold12pt7b.h FreeSerifItalic12pt7b.h FreeSansBold18pt7b.h FreeSerifItalic18pt7b.h FreeSansBold24pt7b.h FreeSerifItalic24pt7b.h FreeSansBold9pt7b.h FreeSerifItalic9pt7b.h
// Texto invertido no display
display.setTextColor(BLACK, WHITE); // Cores do texto 'invertido'
display.setCursor(0,28);
display.println("Display OLED");
display.display();
delay(2000);
display.clearDisplay();
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).
// Muda o tamanho da fonte
display.setTextColor(WHITE);
display.setCursor(0,20);
display.setTextSize(3); // Tamanho da fonte: 3
display.println("Arduino");
display.display();
delay(2000);
display.clearDisplay();
Para mudar o tamanho da fonte, basta alterar o comando display.setTextSize().
// Números no display display.setTextSize(2); display.setCursor(0,24); display.println(314159265); // Números display.display(); delay(2000); display.clearDisplay();
Se for imprimir apenas números no display, não é necessário colocar aspas, basta apenas adicionar o número dentro dos parênteses.
// Imprime caractteres ASCII no display display.setCursor(0,10); display.setTextSize(3); display.write(1); // Caracter ASCII display.setCursor(20,10); display.write(2); display.setCursor(40,10); display.write(3); display.setCursor(60,10); display.write(4); display.setCursor(80,10); display.write(5); display.setCursor(100,10); display.write(6); display.setCursor(0,35); display.write(7); display.setCursor(20,35); display.write(8); display.setCursor(40,35); display.write(9); display.setCursor(60,35); display.write(11); display.setCursor(80,35); display.write(12); display.setCursor(100,35); display.write(14); display.display(); delay(4000); display.clearDisplay();
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.
// Movimenta o texto sobre a tela
display.setCursor(0,20);
display.setTextSize(1);
display.println("Texto");
display.println("em");
display.println("movimento!");
display.display();
display.startscrollright(0x00, 0x0f); // Movimenta texto para a direita
delay(7000);
display.stopscroll();
delay(1000);
display.startscrollleft(0x00, 0x0f); // Movimenta texto para a esquerda
delay(7000);
display.stopscroll();
delay(1000);
display.clearDisplay();
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.
// Pixel
display.setTextSize(1);
display.setTextColor(WHITE);
display.setCursor(0,0);
display.println("Pixel");
display.drawPixel(64, 32, WHITE); // Pixel: Coordenada X, coordenada Y, cor
display.display();
delay(2000);
display.clearDisplay();
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
display.setTextSize(1);
display.setTextColor(WHITE);
display.setCursor(0,0);
display.println("Linha");
display.drawLine(0, 20, 127, 60, WHITE); // Linha: Coordenada x e y do começo da linha, coordenada x e y do final da linha, cor
display.display();
delay(2000);
display.clearDisplay();
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.
display.setTextSize(1);
display.setTextColor(WHITE);
display.setCursor(0,0);
display.println("Retangulo");
display.drawRect(0, 17, 60, 40, WHITE); // Retângulo vazio: Coordenada X, coordenada Y, largura, altura e cor
display.fillRect(64, 17, 60, 40, WHITE); // Retângulo cheio: Coordenada X, coordenada Y, largura, altura e cor
display.display();
delay(2000);
display.clearDisplay();
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.
display.setTextSize(1);
display.setTextColor(WHITE);
display.setCursor(0,0);
display.println("Borda arredondada");
display.drawRoundRect(0, 17, 60, 40, 8, WHITE); // Retângulo com borda arredondada: mesmos parâmetros do retângulo
display.fillRoundRect(64, 17, 60, 40, 8, WHITE); // Retângulo com borda arredondada cheio: mesmos parâmetros do retângulo
display.display();
delay(2000);
display.clearDisplay();
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().
display.setTextSize(1);
display.setTextColor(WHITE);
display.setCursor(0,0);
display.println("Circulo");
display.drawCircle(20, 37, 20, WHITE); // Círculo: Coordenada X do centro, coordenada Y do centro, raio e cor
display.fillCircle(84, 37, 20, WHITE); // Círculo cheio: Coordenada X do centro, coordenada Y do centro, raio e cor
display.display();
delay(2000);
display.clearDisplay();
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.
display.setTextSize(1);
display.setTextColor(WHITE);
display.setCursor(0,0);
display.println("Triangulo");
display.drawTriangle(30, 17, 0, 62, 60, 62, WHITE); // Triângulo: Pares de coordenadas X e Y nos vértices do topo, a esquerda e a direita, e por fim, a cor do triângulo
display.fillTriangle(94, 17, 64, 62, 124, 62, WHITE); // Triângulo cheio: Pares de coordenadas X e Y nos vértices do topo, a esquerda e a direita, e por fim, a cor do triângulo
display.display();
delay(2000);
display.clearDisplay();
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.
// Cores Invertidas
display.invertDisplay(true); // Inverte as cores no display
display.setTextSize(1);
display.setTextColor(WHITE);
display.setCursor(0,0);
display.println("Invertido");
display.drawCircle(30, 37, 20, WHITE); // Círculo: Coordenada X do centro, coordenada Y do centro, raio e cor
display.drawRoundRect(64, 17, 60, 40, 8, WHITE); // Retângulo com borda arredondada cheio: mesmos parâmetros do retângulo
display.display();
delay(3000);
display.clearDisplay();
display.invertDisplay(false); // Retorna o display para sua configuração normal
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).
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.
#include <SPI.h>
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
#include <Fonts/FreeSerif12pt7b.h>
Adafruit_SSD1306 display(-1);
static const unsigned char PROGMEM image_data_Saraarray[] = {
// Imagem convertida deve vir aqui <------
};
void setup() {
Serial.begin(115200);
if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {
Serial.println(F("SSD1306 allocation failed"));
for(;;);
}
delay(2000); // Pausa por 2 segundos
// Limpa o display
display.clearDisplay();
// Desenha um bitmap na tela
display.drawBitmap(40, 17, image_data_Saraarray, 48, 48, 1); // Coordenada X, coordenada Y, nome da imagem,
// tamanho na coordenada x, tamanho na coordenada y, nome do arquivo bitmap (sempre 1)
display.display();
}
void loop() {
}
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.
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.
#include <SPI.h>
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
#include <Fonts/FreeSerif12pt7b.h>
#define x 0
Adafruit_SSD1306 display(-1);
// Cole aqui <------
void setup() {
Serial.begin(115200);
if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {
Serial.println(F("SSD1306 allocation failed"));
for(;;);
}
delay(2000); // Pausa por 2 segundos
// Limpa o display
display.clearDisplay();
}
void loop() {
// Desenha um bitmap na tela
display.drawBitmap(40, 17, Frame1, 48, 48, 1); // Coordenada X, coordenada Y, nome da imagem,
// tamanho na coordenada x, tamanho na coordenada y, nome do arquivo bitmap (sempre 1)
display.display();
delay(x);
display.clearDisplay();
display.drawBitmap(40, 17, Frame2, 48, 48, 1); // Coordenada X, coordenada Y, nome da imagem,
// tamanho na coordenada x, tamanho na coordenada y, nome do arquivo bitmap (sempre 1)
display.display();
delay(x);
display.clearDisplay();
display.drawBitmap(40, 17, Frame3, 48, 48, 1); // Coordenada X, coordenada Y, nome da imagem,
// tamanho na coordenada x, tamanho na coordenada y, nome do arquivo bitmap (sempre 1)
display.display();
delay(x);
display.clearDisplay();
display.drawBitmap(40, 17, Frame4, 48, 48, 1); // Coordenada X, coordenada Y, nome da imagem,
// tamanho na coordenada x, tamanho na coordenada y, nome do arquivo bitmap (sempre 1)
display.display();
delay(x);
display.clearDisplay();
display.drawBitmap(40, 17, Frame5, 48, 48, 1); // Coordenada X, coordenada Y, nome da imagem,
// tamanho na coordenada x, tamanho na coordenada y, nome do arquivo bitmap (sempre 1)
display.display();
delay(x);
display.clearDisplay();
display.drawBitmap(40, 17, Frame6, 48, 48, 1); // Coordenada X, coordenada Y, nome da imagem,
// tamanho na coordenada x, tamanho na coordenada y, nome do arquivo bitmap (sempre 1)
display.display();
delay(x);
display.clearDisplay();
display.drawBitmap(40, 17, Frame7, 48, 48, 1); // Coordenada X, coordenada Y, nome da imagem,
// tamanho na coordenada x, tamanho na coordenada y, nome do arquivo bitmap (sempre 1)
display.display();
delay(x);
display.clearDisplay();
display.drawBitmap(40, 17, Frame8, 48, 48, 1); // Coordenada X, coordenada Y, nome da imagem,
// tamanho na coordenada x, tamanho na coordenada y, nome do arquivo bitmap (sempre 1)
display.display();
delay(x);
display.clearDisplay();
}
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.
// Desenha um bitmap na tela
display.drawBitmap(40, 17, Frame1, 48, 48, 1); // Coordenada X, coordenada Y, nome da imagem,
// tamanho na coordenada x, tamanho na coordenada y, nome do arquivo bitmap (sempre 1)
display.display();
delay(x);
display.clearDisplay();
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.
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!
Conheça a Metodologia Eletrogate e ofereça aulas de robótica em sua escola!
|
A Eletrogate é uma loja virtual de componentes eletrônicos do Brasil e possui diversos produtos relacionados à Arduino, Automação, Robótica e Eletrônica em geral.
Tenha a Metodologia Eletrogate dentro da sua Escola! Conheça nosso Programa de Robótica nas Escolas!
Rua Rio de Janeiro, 441 - Sala 1301
Centro - Belo Horizonte/MG
CEP 30160-041
*Não temos atendimento físico
Eletrogate Componentes Eletrônicos
CNPJ: 18.917.521/0001-73
