ESP32 - OLED
Este tutorial ensina você a usar o ESP32 para mostrar dados no OLED. Em detalhes, vamos aprender a imprimir caracteres e números, desenhar linhas e formas e mostrar imagens no display OLED.
Hardware Necessário
Or you can buy the following kits:
| 1 | × | DIYables ESP32 Starter Kit (ESP32 included) | |
| 1 | × | DIYables ESP32 S3 Starter Kit (ESP32 S3 included) | |
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
Buy Note: If you want a bigger OLED display, use the 2.42 inch OLED Display 128x64 .
Sobre o Display OLED
Existem vários tipos diferentes de display OLED que funcionam com o ESP32. Eles diferem entre si na interface de comunicação ( I2C, SPI), nas cores (branco, azul, duas cores...) e nos tamanhos (128x64, 128×32...)

Este tutorial usa um Display OLED SSD1306 128x64 I2C
Pinagem do Display OLED I2C
O Display OLED I2C tem 4 pinos:
- Pino GND: deve ser conectado ao terra (GND) do ESP32
- Pino VCC: deve ser conectado ao pino de 5 volts do ESP32.
- Pino SCL: é o pino de clock I2C.
- Pino SDA: é o pino de dados I2C.

Diagrama de Ligação
- Como conectar o ESP32 ao display OLED 128x64 usando protoboard

This image is created using Fritzing. Click to enlarge image
Se você não sabe como alimentar o ESP32 e outros componentes, veja as instruções no tutorial a seguir: Como alimentar o ESP32.
- Como conectar o ESP32 ao display OLED 128x64 usando a placa breakout com bornes de parafuso

※ Nota:
- A ordem dos pinos do módulo OLED pode variar entre fabricantes. SEMPRE use os rótulos impressos no módulo OLED. Observe com atenção!
Como Usar o OLED com o ESP32
Instalar a biblioteca SSD1306 OLED
- Clique no ícone Libraries na barra esquerda da Arduino IDE.
- Digite SSD1306 na caixa de pesquisa e procure a biblioteca SSD1306 da Adafruit
- Instale a biblioteca clicando no botão Install.

- Uma janela aparece pedindo para você instalar as dependências da biblioteca
- Instale todas as dependências da biblioteca clicando no botão Install All.

Como programar o OLED
- Inclua a biblioteca
- Defina o tamanho da tela (128x64 ou 128x32)
- Declare um objeto OLED SSD1306
- Na função setup(), inicialize o display OLED
- E então você pode mostrar texto, imagens, desenhar linhas...
Código ESP32 - Mostrar Texto no OLED
O código ESP32 abaixo mostra um texto no OLED
Podemos fazer mais usando as seguintes funções:
- oled.clearDisplay(): esta função é usada para limpar o display
- oled.setTextSize(n): esta função é usada para definir o tamanho da fonte, suporta tamanhos de 1 a 8
- oled.setTextColor(WHITE): esta função é usada para definir a cor do texto
- oled.setCursor(x,y): esta função é usada para definir as coordenadas onde o texto começa a ser mostrado
- oled.drawPixel(x,y, color): esta função é usada para desenhar um pixel nas coordenadas x,y
- oled.setTextColor(BLACK, WHITE): esta função é usada para definir a cor do texto e a cor de fundo, respectivamente
- oled.println("message"): esta função é usada para imprimir uma string
- oled.println(number): esta função é usada para imprimir um número
- oled.println(number, HEX): esta função é usada para imprimir um número no formato hexadecimal
- oled.display(): esta função é usada para aplicar as alterações
- oled.startscrollright(start, stop): esta função é usada para rolar o texto da esquerda para a direita
- oled.startscrollleft(start, stop): esta função é usada para rolar o texto da direita para a esquerda
- oled.startscrolldiagright(start, stop): esta função é usada para rolar o texto do canto inferior esquerdo para o canto superior direito
- oled.startscrolldiagleft(start, stop): esta função é usada para rolar o texto do canto inferior direito para o canto superior esquerdo
- oled.stopscroll(): esta função é usada para parar a rolagem
Código ESP32 - Desenhar Formas no OLED
O código abaixo mostra como desenhar várias formas no OLED
Depois de executar o código, você verá um retângulo, um círculo e um triângulo na tela OLED.

Código ESP32 – Mostrar Imagem no OLED
Para mostrar uma imagem no OLED, é preciso converter a imagem em um array de bitmap. Existe uma ferramenta online para converter a imagem em array de bitmap. A imagem abaixo mostra como fazer isso. Eu converti o ícone do ESP32 em um array de bitmap.

Depois de converter, copie o código do array e atualize-o no array bitmap_image no código a seguir:
Ao executar o código acima, você verá a imagem mostrada no OLED como abaixo.
