Franzininho WiFi: Display OLED

23/05/2023

ÍNDICE DE CONTEÚDO

Este post faz parte da série Franzininho WiFI - Arduino. Leia também os outros posts da série:

Introdução

O display OLED (Organic Light-Emitting Diodes) é composto por uma matriz de diodos sob uma camada orgânica que emite luz quando excitada por uma corrente elétrica. Essa tecnologia é conhecida como eletroluminescente. Existem diversos módulos de OLED, classificados de acordo com a resolução, interface de comunicação (SPI ou I2C) e quantidade de cores (monocromático ou policromático). A característica diferencial desses componentes é a capacidade de acionar cada LED individualmente, o que possibilita a criação de pequenas imagens, componentes geométricos e animações.

O tamanho da tela é definido pela quantidade de pontos na horizontal e na vertical. Por exemplo, o módulo de display SSD1306 possui 0.96 polegadas na diagonal, com 128 colunas e 64 linhas, o que geralmente atende à maioria das aplicações em projetos de Sistemas Embarcados.

Neste artigo, iremos explorar a utilização do display OLED, fornecendo um exemplo prático com recursos básicos que podem ser incorporados em diferentes projetos.

Biblioteca Adafruit SSD1306

Os métodos apresentados para este artigo são da biblioteca “Adafruit_SSD1306.h”, pois devido sua popularidade e compatibilidade com outros microcontroladores oferecer uma vasta quantidade de recursos para criar telas. Contudo, vamos elencar as mais comuns dentre os diversos métodos suportáveis.

Embarcados Experience 2024: Evento Presencial

Participe do Embarcados Experience 2024 em São Paulo. Conhecimento técnico, palestras, workshops e oportunidade de networking com profissionais experientes.

Inscreva-se agora

begin()

Inicializa o periférico (I2C) e os pinos conectados a o display.

void oled.begin(uint8_t vcs, uint8_t i2caddr,bool reset );

1	void oled.begin(uint8_t vcs, uint8_t i2caddr,bool reset );

vcs : seleciona a tensão de entrada (VCC), podendo ser interna (3.3v) ou utilizando externa .
- SSD1306_SWITCHAPVCC – tensão de entrada 3.3v
- SSD1306_EXTERNALVCC – tensão externa, por exemplo, fontes de alimentação adicionadas a protoboard.
i2caddr : endereço I2C do dispositivo
reset : true, informa que possui um pino de reset ou caso seja false, informa não possui nenhum pino de reset.

clear()

Libera o buffer alocado do display, ou seja, limpa a tela.

void oled.clearDisplay(void);

1	void oled.clearDisplay(void);

ssd1306_command()

Libera o buffer alocado do display, ou seja, limpa a tela.

void display.ssd1306_command(uint8_t cmd);

1	void display.ssd1306_command(uint8_t cmd);

cmd : comandos específicos interpretados pelo o display OLED, os valores válidos são entre 0 à 255 .

display()

Aloca as informações no buffer e imprime na tela do display. Esse método vem logo após selecionarmos a posição e o tipo de dado que vai ser imprimido na tela.

void display.display();

1	void display.display();

setCursor()

Posiciona o cursor em coordenadas específicas na tela.

void display.setCursor(uint8_t x,uint8_t y);

1	void display.setCursor(uint8_t x,uint8_t y);

x : posição no eixo X .
y : posição no eixo Y .

setTextColor()

Seleciona a “cor” em que o texto será escrito na tela

void display.setTextColor(uint16_t c);

1	void display.setTextColor(uint16_t c);

c : define a “cor”

print()

Armazena no buffer os caracteres a serem imprimidos na tela.

void display.print(uint16_t c);

1	void display.print(uint16_t c);

c : caracteres a serem escritos

setFont()

Define qual fonte do será utilizada. Caso deseje utilizar outra fonte, consulte a lista de fontes suportadas pela biblioteca.

void display.setFont(const GFXfont *f);

1	void display.setFont(const GFXfont *f);

f : ponteiro para a fonte a ser utilizada.

setSize()

Define o tamanho da fonte.

void display.setFont( uint8_t *sz);

1	void display.setFont( uint8_t *sz);

sz : tamanho desejado

Materiais necessários

Para desenvolver nossa aplicação os materiais utilizados foram:

Placa Franzininho WiFi
Display OLED SSD1306
Jumpers
Arduino IDE

Circuito

Dentre os quatro pinos do display OLED, dois pinos são para comunicação de dados (SDA e SCL ou SCK), e outros dois pinos para alimentação do módulo. Abaixo segue as conexões e uma imagem do circuito.

SCL -> GPIO 9
SDA -> GPIO 8
VCC -> 3.3V
GND -> GND

Figura 1: Esquema de montagem com a Franzininho WiFi e o módulo SSD1306
Fonte: Equipe Embarcados

Código

No projeto proposto vamos criar uma animação bem simples, invertendo o fundo da tela para destacar o texto impresso na tela. Abaixo segue o código comentado. Caso sinta alguma dúvida nos métodos retorne a sessão anterior.

// Inclui biblioteca i2c
#include <Wire.h>
//Inclui biblioteca do display OLED
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>

// Inclui o arquivo de fontes
#include <Fonts/FreeSansBoldOblique9pt7b.h>

// Define o pino de reset, -1 indica que não há nenhum pino 
// de reset sendo utilizado.
#define OLED_RESET -1

// Declara o construtor da biblioteca
Adafruit_SSD1306 display(OLED_RESET);

void setup() 
{
 
  // Inicia o barramento i2c e configura as GPIOs
  display.begin(SSD1306_SWITCHCAPVCC, 0x3C);
  //Aguarda 2 segundos
  delay(2000);

  //Limpa o buffer do display
  display.clearDisplay();
  // Seleciona uma fonte específica, passando o endereço.
  display.setFont(&FreeSansBoldOblique9pt7b);
  // Tamanho da fonte
  display.setTextSize(1);
  // Cor selecionada
  display.setTextColor(WHITE);
  // Posiciona o cursor em coordenadas específica
  display.setCursor(12,14);
  // Adiciona os caracteres no buffer
  display.print("Franzininho");
  // Posiciona o cursor em coordenadas específica
  display.setCursor(35,30);
  // Adiciona os caracteres no buffer
  display.print("WiFi");
  // Imprime os dados no buffer
  display.display();
}

void loop() 
{
  // Invert o fundo de tela do display
  display.invertDisplay(true);
  delay(500); 
  // Volta ao o escuro.
  display.invertDisplay(false);
  delay(500); 
}

// Inclui biblioteca i2c

#include <Wire.h>

//Inclui biblioteca do display OLED

#include <Adafruit_GFX.h>

#include <Adafruit_SSD1306.h>

// Inclui o arquivo de fontes

#include <Fonts/FreeSansBoldOblique9pt7b.h>

// Define o pino de reset, -1 indica que não há nenhum pino

// de reset sendo utilizado.

#define OLED_RESET -1

// Declara o construtor da biblioteca

Adafruit_SSD1306 display(OLED_RESET);

void setup()

{

// Inicia o barramento i2c e configura as GPIOs

display.begin(SSD1306_SWITCHCAPVCC, 0x3C);

//Aguarda 2 segundos

delay(2000);

//Limpa o buffer do display

display.clearDisplay();

// Seleciona uma fonte específica, passando o endereço.

display.setFont(&FreeSansBoldOblique9pt7b);

// Tamanho da fonte

display.setTextSize(1);

// Cor selecionada

display.setTextColor(WHITE);

// Posiciona o cursor em coordenadas específica

display.setCursor(12,14);

// Adiciona os caracteres no buffer

display.print("Franzininho");

// Posiciona o cursor em coordenadas específica

display.setCursor(35,30);

// Adiciona os caracteres no buffer

display.print("WiFi");

// Imprime os dados no buffer

display.display();

}

void loop()

{

// Invert o fundo de tela do display

display.invertDisplay(true);

delay(500);

// Volta ao o escuro.

display.invertDisplay(false);

delay(500);

}

Simule esse exemplo no Wokwi: https://wokwi.com/projects/365520814421120001

Explicação do Código

Nesta seção, explicaremos o código linha por linha, para garantir uma compreensão completa e entender a finalidade de cada função utilizada.

Incluiu-se a biblioteca Wire, para ter acesso aos métodos da desta biblioteca, pois nela é possível configurar o barramento I2C, enviar e receber os dados dos dispositivos com esse tipo de comunicação.

// Inclui biblioteca i2c
#include <Wire.h>

1 2	// Inclui biblioteca i2c #include <Wire.h>

Incluíram-se as bibliotecas responsáveis por incluir os métodos de criar os objetos e texto na tela. Além disso, adicionamos uma fonte em específico (FreeSansBoldOblique9pt7.h) para usarmos no texto.

//Inclui biblioteca do display OLED
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>

// Inclui o arquivo de fontes
#include <Fonts/FreeSansBoldOblique9pt7b.h>

//Inclui biblioteca do display OLED

#include <Adafruit_GFX.h>

#include <Adafruit_SSD1306.h>

// Inclui o arquivo de fontes

#include <Fonts/FreeSansBoldOblique9pt7b.h>

Define-se o pino de reset, nesse caso é considerado -1. Para display com comunicação SPI esse pino é definido em qual GPIO está conectado. Também declarou o construtor com o parâmetro do pino de reset.

// Define o pino de reset, -1 indica que não há nenhum pino 
// de reset sendo utilizado.
#define OLED_RESET -1

// Declara o construtor da bibliotecav
Adafruit_SSD1306 display(OLED_RESET);

// Define o pino de reset, -1 indica que não há nenhum pino

// de reset sendo utilizado.

#define OLED_RESET -1

// Declara o construtor da bibliotecav

Adafruit_SSD1306 display(OLED_RESET);

No setup(), inicializamos o driver i2c, adicionamos seu endereço i2c, tipo de fonte de alimentação, nesse caso vamos utilizar a própria alimentação da placa e aguardamos 2 segundos.

// Inicia o barramento i2c e configura as GPIOs
display.begin(SSD1306_SWITCHCAPVCC, 0x3C);
//Aguarda 2 segundos
delay(2000);

//Limpa o buffer do display
display.clearDisplay();

// Inicia o barramento i2c e configura as GPIOs

display.begin(SSD1306_SWITCHCAPVCC, 0x3C);

//Aguarda 2 segundos

delay(2000);

//Limpa o buffer do display

display.clearDisplay();

Define o tipo de fonte, caso deseje utilizar uma fonte padrão esse método pode ser comentado, e logo em seguida o tamanho da fonte.

// Seleciona uma fonte específica, passando o endereço.
display.setFont(&FreeSansBoldOblique9pt7b);
// Tamanho da fonte
display.setTextSize(1);
// Cor selecionada
display.setTextColor(WHITE);

// Seleciona uma fonte específica, passando o endereço.

display.setFont(&FreeSansBoldOblique9pt7b);

// Tamanho da fonte

display.setTextSize(1);

// Cor selecionada

display.setTextColor(WHITE);

Selecionando no espaço da tela as posições de acordo com as coordenadas da tela e o tamanho da fonte e alocando no buffer os caracteres desejados.

// Posiciona o cursor em coordenadas específica
display.setCursor(12,14);
// Adiciona os caracteres no buffer
display.print("Franzininho");
// Posiciona o cursor em coordenadas específica
display.setCursor(35,30);
// Adiciona os caracteres no buffer
display.print("WiFi");
// Imprime os dados no buffer
display.display();

// Posiciona o cursor em coordenadas específica

display.setCursor(12,14);

// Adiciona os caracteres no buffer

display.print("Franzininho");

// Posiciona o cursor em coordenadas específica

display.setCursor(35,30);

// Adiciona os caracteres no buffer

display.print("WiFi");

// Imprime os dados no buffer

display.display();

No loop(), vamos realizar a animação, uma espécie de “pisca-pisca” do fundo da tela utilizando o método de inversão.

// Invert o fundo de tela do display
  display.invertDisplay(true);
  delay(500); 
  // Volta ao o escuro.
  display.invertDisplay(false);
  delay(500);

// Invert o fundo de tela do display

display.invertDisplay(true);

delay(500);

// Volta ao o escuro.

display.invertDisplay(false);

delay(500);

Conclusão

Neste artigo, apresentamos todas as etapas necessárias para começar a utilizar o display OLED. Agora, os leitores têm a capacidade de criar interfaces com seus projetos e até mesmo construir animações. Vale ressaltar que existem outras bibliotecas disponíveis que seguem o mesmo padrão de escrita dos métodos da Adafruit_SDD1306. No entanto, é importante consultar a documentação. Também incentivamos a compartilhar suas aplicações com a comunidade por meio de artigos ou vídeos.