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:



3 comentários:

  1. A função que faz a tela girar, não funcionou nem na que esta na programação quanto a que esta nas notas abaixo do programa, esta assim:

    //coloca o display de ponta cabeça
    void flipScreenVertically();

    e na programação:
    //gira o display 180º (deixa de ponta cabeça)
    // display.flipScreenVertically();

    único problema é exatamente a palavra antes do ponto, que o certo seria "screen", portanto:
    //gira o display 180º (deixa de ponta cabeça)
    screen.flipScreenVertically();

    testei assim e funcionou.

    Obrigado pelo ótimo material professor Fernando

    ResponderExcluir
    Respostas
    1. Sim, pois como está declarado na linha 8, o objeto é 'screen'.
      Na linha 26 tem um erro mesmo..

      Excluir
    2. A resposta do FERNANDO AVERALDO está correta.
      O objeto de uso é screen.
      A linha comentada é apenas um exemplo de como utilizar.
      No caso correto basta utilizar
      screen.flipScreenVertically();

      Obrigado pelos comentários. Abraços

      Excluir

Tecnologia do Blogger.