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.

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...)

OLED com ESP32

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.
Pinagem do OLED

Diagrama de Ligação

  • Como conectar o ESP32 ao display OLED 128x64 usando protoboard
Diagrama de ligação do ESP32 com OLED 128x64

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 e o OLED

※ 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.
Biblioteca OLED para ESP32
  • 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.
Biblioteca Adafruit GFX para ESP32

Como programar o OLED

  • Inclua a biblioteca
#include <Wire.h> #include <Adafruit_GFX.h> #include <Adafruit_SSD1306.h>
  • Defina o tamanho da tela (128x64 ou 128x32)
#define SCREEN_WIDTH 128 // OLED display width, in pixels #define SCREEN_HEIGHT 64 // OLED display height, in pixels
  • Declare um objeto OLED SSD1306
// declare an SSD1306 display object connected to I2C Adafruit_SSD1306 oled(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1);
  • Na função setup(), inicialize o display OLED
// initialize OLED display with address 0x3C for 128x64 if (!oled.begin(SSD1306_SWITCHCAPVCC, 0x3C)) { Serial.println(F("SSD1306 allocation failed")); while (true); }
  • 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

/* * Este código de ESP32 foi desenvolvido por pt.newbiely.com * Este código de ESP32 é disponibilizado ao público sem nenhuma restrição. * Para tutoriais completos e diagramas de ligação, visite: * https://pt.newbiely.com/tutorials/esp32/esp32-oled */ #include <Wire.h> #include <Adafruit_GFX.h> #include <Adafruit_SSD1306.h> #define SCREEN_WIDTH 128 // OLED width, in pixels #define SCREEN_HEIGHT 64 // OLED height, in pixels // create an OLED display object connected to I2C Adafruit_SSD1306 oled(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1); void setup() { Serial.begin(9600); // initialize OLED display with I2C address 0x3C if (!oled.begin(SSD1306_SWITCHCAPVCC, 0x3C)) { Serial.println(F("failed to start SSD1306 OLED")); while (1); } delay(2000); // wait two seconds for initializing oled.clearDisplay(); // clear display oled.setTextSize(1); // set text size oled.setTextColor(WHITE); // set text color oled.setCursor(0, 10); // set position to display oled.println("esp32io.com"); // set text oled.display(); // display on OLED } void loop() { }

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

/* * Este código de ESP32 foi desenvolvido por pt.newbiely.com * Este código de ESP32 é disponibilizado ao público sem nenhuma restrição. * Para tutoriais completos e diagramas de ligação, visite: * https://pt.newbiely.com/tutorials/esp32/esp32-oled */ #include <Wire.h> #include <Adafruit_GFX.h> #include <Adafruit_SSD1306.h> #define SCREEN_WIDTH 128 // OLED width, in pixels #define SCREEN_HEIGHT 64 // OLED height, in pixels // create an OLED display object connected to I2C Adafruit_SSD1306 oled(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1); void setup() { Serial.begin(9600); // initialize OLED display with I2C address 0x3C if (!oled.begin(SSD1306_SWITCHCAPVCC, 0x3C)) { Serial.println(F("failed to start SSD1306 OLED")); while (1); } delay(2000); // wait two seconds for initializing oled.setCursor(0, 0); } void loop() { // draw a circle oled.clearDisplay(); //oled.drawCircle(64, 32, 20, WHITE); oled.fillCircle(64, 32, 20, WHITE); oled.display(); // draw a triangle oled.clearDisplay(); //oled.fillTriangle(80, 62, 128, 62, 104, 32, WHITE); oled.drawTriangle(80, 62, 128, 62, 104, 32, WHITE); oled.display(); // draw a rectangle oled.clearDisplay(); //oled.fillRect(0, 0, 40, 25, WHITE); oled.drawRect(0, 0, 40, 25, WHITE); oled.display(); delay(1000); }

Depois de executar o código, você verá um retângulo, um círculo e um triângulo na tela OLED.

ESP32 desenhando retângulo, círculo e triângulo no 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.

Imagem para array de bitmap

Depois de converter, copie o código do array e atualize-o no array bitmap_image no código a seguir:

/* * Este código de ESP32 foi desenvolvido por pt.newbiely.com * Este código de ESP32 é disponibilizado ao público sem nenhuma restrição. * Para tutoriais completos e diagramas de ligação, visite: * https://pt.newbiely.com/tutorials/esp32/esp32-oled */ #include <Wire.h> #include <Adafruit_GFX.h> #include <Adafruit_SSD1306.h> #define SCREEN_WIDTH 128 // OLED width, in pixels #define SCREEN_HEIGHT 64 // OLED height, in pixels // create an OLED display object connected to I2C Adafruit_SSD1306 oled(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1); // bitmap of DIYables-icon image const unsigned char bitmap_image [] PROGMEM = { // 'DIYables-icon', 128x64px 0x00, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xff, 0xfe, 0x00, 0x03, 0xf1, 0xf8, 0x00, 0x3e, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xff, 0xff, 0xc0, 0x03, 0xf1, 0xf8, 0x00, 0x7e, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xff, 0xff, 0xf0, 0x03, 0xf0, 0xfc, 0x00, 0x7c, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xff, 0xff, 0xf8, 0x03, 0xf0, 0xfc, 0x00, 0xfc, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xff, 0xff, 0xfc, 0x03, 0xf0, 0x7e, 0x00, 0xf8, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xf8, 0x01, 0xfe, 0x03, 0xf0, 0x3f, 0x01, 0xf8, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xf8, 0x00, 0x7f, 0x03, 0xf0, 0x3f, 0x03, 0xf0, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xf8, 0x00, 0x3f, 0x03, 0xf0, 0x1f, 0x83, 0xe0, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xf8, 0x00, 0x3f, 0x83, 0xf0, 0x1f, 0x87, 0xe0, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xf8, 0x00, 0x1f, 0x83, 0xf0, 0x0f, 0xc7, 0xc0, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xf8, 0x00, 0x1f, 0x83, 0xf0, 0x07, 0xef, 0xc0, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xf8, 0x00, 0x1f, 0x83, 0xf0, 0x07, 0xff, 0x80, 0xf0, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xf8, 0x00, 0x1f, 0x83, 0xf0, 0x03, 0xff, 0x00, 0xfe, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xf8, 0x00, 0x1f, 0x83, 0xf0, 0x03, 0xff, 0x00, 0xff, 0xc0, 0x03, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xf8, 0x00, 0x1f, 0x83, 0xf0, 0x01, 0xfe, 0x00, 0xff, 0xe0, 0x03, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xf8, 0x00, 0x1f, 0x83, 0xf0, 0x00, 0xfe, 0x00, 0xff, 0xf8, 0x03, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xf8, 0x00, 0x1f, 0x83, 0xf0, 0x00, 0xfc, 0x00, 0xff, 0xfc, 0x03, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xf8, 0x00, 0x3f, 0x03, 0xf0, 0x00, 0xfc, 0x00, 0xff, 0xfe, 0x03, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xf8, 0x00, 0x7f, 0x03, 0xf0, 0x00, 0xfc, 0x00, 0xff, 0xff, 0x03, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xf8, 0x00, 0xff, 0x03, 0xf0, 0x00, 0xfc, 0x00, 0xff, 0xff, 0x83, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xf8, 0x03, 0xfe, 0x03, 0xf0, 0x00, 0xfc, 0x00, 0xff, 0xff, 0xc3, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xff, 0xff, 0xfc, 0x03, 0xf0, 0x00, 0xfc, 0x00, 0xff, 0xff, 0xc3, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xff, 0xff, 0xf8, 0x03, 0xf0, 0x00, 0xfc, 0x00, 0xff, 0xff, 0xe3, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xff, 0xff, 0xe0, 0x03, 0xf0, 0x00, 0xfc, 0x00, 0xff, 0xff, 0xe3, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xff, 0xff, 0x80, 0x03, 0xf0, 0x00, 0xfc, 0x00, 0xff, 0xff, 0xf3, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xff, 0xf8, 0x00, 0x03, 0xe0, 0x00, 0xfc, 0x00, 0xff, 0xff, 0xf3, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xff, 0xff, 0xfb, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xff, 0xff, 0xfb, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xff, 0xff, 0xfb, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xff, 0xff, 0xfb, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xff, 0xff, 0xc7, 0xff, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xff, 0xff, 0xc7, 0xff, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfb, 0xff, 0xff, 0xff, 0xff, 0x80, 0xff, 0xff, 0xc7, 0xff, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfb, 0xff, 0xff, 0xff, 0xff, 0x80, 0xff, 0xff, 0xc7, 0xff, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfb, 0xff, 0xff, 0xff, 0xff, 0x80, 0xff, 0x9f, 0xc6, 0x7f, 0x1f, 0xdf, 0xf9, 0xff, 0xff, 0xff, 0xfb, 0xff, 0xff, 0xff, 0xff, 0x00, 0xfc, 0x03, 0xc0, 0x0f, 0x1e, 0x03, 0xe0, 0x3f, 0xff, 0xff, 0xf3, 0xff, 0xff, 0xff, 0xff, 0x00, 0xfc, 0x03, 0xc0, 0x07, 0x1c, 0x01, 0xc0, 0x3f, 0xff, 0xff, 0xf3, 0xff, 0xff, 0xff, 0xfe, 0x00, 0xfd, 0xf1, 0xc3, 0xc7, 0x18, 0xf8, 0x8f, 0xff, 0xff, 0xff, 0xe3, 0xff, 0xff, 0xff, 0xfe, 0x00, 0xff, 0xf1, 0xc7, 0xe3, 0x18, 0xf8, 0x8f, 0xff, 0xff, 0xff, 0xe3, 0xff, 0xff, 0xff, 0xfc, 0x00, 0xfe, 0x01, 0xc7, 0xe3, 0x18, 0x00, 0xc0, 0xff, 0xff, 0xff, 0xc3, 0xff, 0xff, 0xff, 0xfc, 0x00, 0xfc, 0x01, 0xc7, 0xe3, 0x18, 0x00, 0xe0, 0x3f, 0xff, 0xff, 0xc3, 0xff, 0xff, 0xff, 0xf8, 0x00, 0xf8, 0xf1, 0xc7, 0xe3, 0x18, 0xff, 0xfe, 0x1f, 0xff, 0xff, 0x83, 0xff, 0xff, 0xff, 0xf0, 0x00, 0xf8, 0xf1, 0xc3, 0xc7, 0x18, 0xff, 0xff, 0x1f, 0xff, 0xff, 0x03, 0xff, 0xff, 0xff, 0xe0, 0x00, 0xf8, 0x61, 0xc0, 0x07, 0x1c, 0x01, 0xc0, 0x3f, 0xff, 0xfe, 0x03, 0xff, 0xff, 0xff, 0xc0, 0x00, 0xfc, 0x01, 0xc0, 0x0f, 0x1e, 0x01, 0x80, 0x3f, 0xff, 0xfc, 0x03, 0xff, 0xff, 0xff, 0x80, 0x00, 0xfe, 0x19, 0xc4, 0x3f, 0x1f, 0x87, 0xe0, 0xff, 0xff, 0xf8, 0x03, 0xff, 0xff, 0xff, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xe0, 0x03, 0xff, 0xff, 0xfc, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x03, 0xff, 0xff, 0xf0, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x03, 0xff, 0xff, 0xc0, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x00, 0x03, 0xff, 0xfc, 0x00, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff }; void setup() { Serial.begin(9600); // initialize OLED display with I2C address 0x3C if (!oled.begin(SSD1306_SWITCHCAPVCC, 0x3C)) { Serial.println(F("failed to start SSD1306 OLED")); while (1); } delay(2000); // wait two seconds for initializing oled.setCursor(0, 0); } void loop() { oled.clearDisplay(); // display bitmap oled.drawBitmap(0, 0, bitmap_image, 128, 57, WHITE); oled.display(); delay(1000); // invert display oled.invertDisplay(1); delay(1000); }

Ao executar o código acima, você verá a imagem mostrada no OLED como abaixo.

ESP32 mostrando imagem no OLED

Solução de Problemas do OLED

Veja Solução de Problemas do OLED

※ NOSSAS MENSAGENS

  • Fique à vontade para compartilhar o link deste tutorial. Porém, por favor, não use nosso conteúdo em outros sites. Investimos muito esforço e tempo para criar este conteúdo, por favor respeite nosso trabalho!