ESP32 com Display OLED

O ESP32 que vamos abordar hoje é um que já vem Display Oled embutido. Essa função facilita muito a nossa vida, pois podemos dar um print e já aparecer o valor da variável. Você não precisa nem olhar para uma janela de depuração. Por outro lado, você consegue montar representações, pode desenhar também gráficos de performance, entre outras coisas. Por conta de tudo isso que considero esse modelo, que vamos programar hoje usando a IDE do Arduino, um produto fantástico.

Portanto, neste vídeo vamos programar uma barrinha de progresso. É importante lembrar que, caso o seu ESP32 não tenha o display oled, é possível comprá-lo a parte. Ainda, se você nunca programou um ESP32, lhe convido para assistir esse vídeo: INTRODUÇÃO AO ESP32, o qual trata do assunto mais detalhadamente.

Biblioteca

Para utilizar o display oled precisamos configurar a biblioteca na IDE do arduino. Para isso, faça o download da biblioteca através deste link.

Descompacte o arquivo e cole na pasta de bibliotecas da IDE do arduino.

C:/Program Files (x86)/Arduino/libraries

Wemos Lolin ESP32 OLED

Wemos Lolin é o nome deste ESP. Na imagem, a parte na cor preta é o display e, ao lado do dispositivo, exibimos toda pinagem. Você pode perceber que são diversos IOs os quais nos possibilitam ligar e desligar vários elementos. Além disso tudo, esse modelo ainda conta com WiFi e Bluetooth de última geração.

Exemplo

No vídeo você pode ver nosso projeto pronto e como utilizar o display oled para exibir uma barra de progresso controlada por um potenciômetro.

Montagem

Para nossa montagem eu utilizei um potenciômetro de 10k e o cursor liguei no GPIO25. Temos ainda o 3v3 e o GND, como você pode ver na figura abaixo. A alimentação já vai vir pela própria USB.

Código

Primeiramente adicionamos a biblioteca “SSD1306.h”. Com ela que acessaremos o display oled. Feito isso, criamos um objeto “display” do tipo SSD1306 que será o responsável por controlar o conteúdo que será exibido no display oled.

#include "SSD1306.h" // alias for #include "SSD1306Wire.h"

//objeto controlador do display de led
/*
  0x3c  :   é um identificador único para comunicação do display
  pino 5 e 4 são os de comunicação (SDA, SDC)   
*/
SSD1306  screen(0x3c, 5, 4);

//pino que ligamos o potenciometro
#define PINO_POTENCIOMETRO 25

//utilizado para fazer o contador de porcentagem
int contador;

Setup

Na função setup(), vamos inicializar nosso objeto display para podermos controlar o que será exibido. Através desse objeto também vamos configurar a fonte de escrita para os textos que serão exibidos. E, por fim, configuramos o pino que ligamos o potenciômetro como INPUT para fazermos leitura do valor.

void setup() {
  Serial.begin(115200);
  Serial.println();
  Serial.println();


  // Inicializa o objeto que controlará o que será exibido na tela
  screen.init();

  //gira o display 180º (deixa de ponta cabeça)
 // display.flipScreenVertically();

  //configura a fonte de escrita "ArialMT_Plain_10"
  screen.setFont(ArialMT_Plain_10);


  //configura o pino para fazer a leitura do potenciômetro.
  pinMode(PINO_POTENCIOMETRO, INPUT);

}

Loop

Na função loop(), faremos a leitura do valor atual do potenciômetro, repare que estamos usando da função “map” logo após a leitura do valor, isso porque o valor lido é muito alto para colocar em uma barra de progresso, então mapearemos o valor para estar dentro do intervalo de 0 a 100.

void loop() 
{

  //leitura do valor do potenciometro
  int valor = analogRead(PINO_POTENCIOMETRO);  
  //Serial.println(valor);

  //mapeando o valor do potenciometro para o valor da barra de progresso
  //potenciometro faz a leitura do valor no intervalo de 0 a 4095
  //a barra de progresso espera um valor entre 0 e 100
  contador = map(valor, 0, 4095, 0, 100);

  //limpa todo o display, apaga o contúdo da tela
  screen.clear();
  
//  ++counter;
//  counter > 100 ? counter = 0 : counter = counter;  

  //desenha a progress bar
  drawProgressBar();

  //exibe na tela o que foi configurado até então.
  screen.display();
  delay(10);
}

Na função “desenhaBarraProgresso()”, utilizaremos o valor lido do potenciômetro que está salvo na variável “percProgress” para setar na barra de progresso. Também vamos colocar um texto logo acima da barra de progresso, indicando a porcentagem atual.

//função para desenhar a progress bar no display
void drawProgressBar() {
  
  Serial.print(">> ");
  Serial.println(contador);
  
  // desenha a progress bar
  /*
   * drawProgressBar(x, y, width, height, value);
    parametros (p):
      p1: x       --> coordenada X no plano cartesiano
      p2: y       --> coordenada Y no plano cartesiano
      p3: width   --> comprimento da barra de progresso
      p4: height  --> altura da barra de progresso
      p5: value   --> valor que a barra de progresso deve assumir
    
  */
  screen.drawProgressBar(10, 32, 100, 10, contador);

  // configura o alinhamento do texto que será escrito
  //nesse caso alinharemos o texto ao centro
  screen.setTextAlignment(TEXT_ALIGN_CENTER);
  
  //escreve o texto de porcentagem
  /*
   * drawString(x,y,text);
    parametros (p):
     p1: x      --> coordenada X no plano cartesiano
     p2: y      --> coordenada Y no plano cartesiano
     p3: string --> texto que será exibido
  */
  screen.drawString(64, 15, String(contador) + "%");

  //se o contador está em zero, escreve a string "valor mínimo"
  if(contador == 0){
    screen.drawString(64, 45, "Valor mínimo");
  }
  //se o contador está em 100, escreve a string "valor máximo"
  else if(contador == 100){
    screen.drawString(64, 45, "Valor máximo");
  }
}

Algumas outras funções interessantes

Display

//coloca o display de ponta cabeça

void flipScreenVertically();

Desenho

//desenha um único pixel da tela

void setPixel(int16_t x, int16_t y);

//desenha uma linha

void drawLine(int16_t x0, int16_t y0, int16_t x1, int16_t y1);

//desenha um retangulo

void drawRect(int16_t x, int16_t y, int16_t width, int16_t height);

//desenha um circulo

void drawCircle(int16_t x, int16_t y, int16_t radius);

 // preenche um circulo

void fillCircle(int16_t x, int16_t y, int16_t radius);

 // desenha uma linha horizontal

 void drawHorizontalLine(int16_t x, int16_t y, int16_t length);

// desenha uma linha vertical

void drawVerticalLine(int16_t x, int16_t y, int16_t length);

Texto

//configura o alinhamento do texto que será escrito

// TEXT_ALIGN_LEFT, TEXT_ALIGN_CENTER, TEXT_ALIGN_RIGHT, TEXT_ALIGN_CENTER_BOTH

void setTextAlignment(OLEDDISPLAY_TEXT_ALIGNMENT textAlignment);

Arquivos para download:

PDF

INO