ESP32 With Display Oled - Progress Bar

The ESP32 we are going to talk about today is one that already comes with Display Oled built-in. This function makes our lives a lot easier, because we can have an impression concerning the value of the variable that appears. You don’t even have to look at a debug window. Also, you can assemble representations and draw performance charts, among other things. Because of these benefits, I consider this model a fantastic product, and we will be programming it today using Arduino IDE.

So, in this video we will program a progress bar. It is important to remember that if your ESP32 doesn’t have the display oled, it is possible to buy it separately. Also, if you have never programmed an ESP32, I suggest you watch this video: VIDEO INTRODUCTION TO ESP32, which deals with the subject in more detail.

To use the oled display, we need to configure the library in the Arduino IDE. To do this, download the library through the link.

Unzip the file and paste it into the libraries folder of the Arduino IDE.

C: /ProgramFiles(x86)/Arduino/libraries

Wemos Lolin is the name of this ESP. In the image, the black part is the display and, next to the device, we display the entire pinout. As shown, there are several IOs that allow us to turn on and off various elements. In addition, this model has the latest generation WiFi and Bluetooth.

In the video, you can see our ready project, and how to use the oled display to display a progress bar controlled by a potentiometer.

For our assembly I used a potentiometer of 10k, and I turned on the cursor’s GPIO25. We also have 3v3 and GND, as you can see in the figure below. The power will come from the USB itself.

First, we add the library "SSD1306.h". With this, we will access the oled display. After, we create a display object of the type SSD1306 that will be responsible for controlling the content shown in the oled display.

#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

In the setup () function, we will initialize our display object so that we can control what will be displayed. Through this object, we will also configure the writing source for the texts that will be displayed. And, finally, we set the pin (specifically, the pin where we turned the potentiometer) to INPUT to read the value.

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

In the loop () function, we will read the current potentiometer value. We can notice that we are using the "map" function soon after reading the value, because the read value is too high to put in a progress bar, so we will map the value to be within the range of 0 to 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);
}

In the function "drawProgress ()", we will use the value read from the potentiometer that is saved in the variable "percProgress" to set in the progress bar. We will also place a text just above the progress bar, indicating the current percentage.

//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");
  }
}

Display

// puts the display upside down

void flipScreenVertically ();

Drawing

// draws a single pixel from the screen

void setPixel (int16_t x, int16_t y);

// draw a line

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

// draw a rectangle

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

// draw a circle

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

// fill in a circle

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

// draw a horizontal line

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

// draw a vertical line

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

Text

// sets the text alignment to be written

// TEXT_ALIGN_LEFT, TEXT_ALIGN_CENTER, TEXT_ALIGN_RIGHT, TEXT_ALIGN_CENTER_BOTH

void setTextAlignment (OLEDDISPLAY_TEXT_ALIGNMENT textAlignment);