ESP32 SSD1306: Drawing a progress bar

In this tutorial we are going to learn how to draw a progress bar on a SSD1306 OLED display, using the ESP32 and the Arduino core. The tests from this tutorial were done using a DFRobot’s ESP32 module integrated in a ESP32 development board.

Introduction

In this tutorial we are going to learn how to draw a progress bar on a SSD1306 OLED display, using the ESP32 and the Arduino core. We are going to use this library.

You can check the wiring diagram between the ESP32 and the display on this previous tutorial.

The tests from this tutorial were done using a DFRobot’s ESP32 module integrated in a ESP32 development board.

The code

We will start the code by importing the SSD1306.h library.

#include "SSD1306.h"

Then we will create an object of class SSD1306. As input of this class constructor we will pass the I2C address of the display and the number of the SDA and SCL pins of the ESP32 connected to it, by this order.

SSD1306 display(0x3c, 21, 22);

We will also define a global variable that will contain the current progress of the bar. We will assign an initial value of zero. This value will be incremented in our program so the bar progresses.

int progress = 0;

Moving on to the Arduino setup, we will call the init method on our SSD1306 object, to initialize the display. This will be the only call we will do here since the drawing of the progress bar will be done on the Arduino main loop.

void setup(){
  display.init();
}

At the beginning of the loop we will call the clear method to make sure the display’s local pixel buffer is cleaned before we draw new content and send it to the device.

display.clear();

After this we will calculate the next progress value, so we see the bar progressing. We will assume it will progress 10% per each iteration of the main loop and then reset back to 0 after 100% is reached.

To do it, we simply sum 10 to the current value of the progress global variable and we get the remainder of the division by 110 by using the modulus operator. So, in the iteration after 100 is reached, we will have 110%110, which gives 0.

progress = (progress + 10) % 110;

To draw the progress bar with the current progress value, we call the drawProgressBar method on the SSD1306 object.

As first and second arguments, we pass the x and y coordinates where the bar should be drawn. As third and fourth arguments we pass the width and height of the bar. Finally, as fifth and last argument, we pass the progress, as an integer between 0 and 100.

display.drawProgressBar(20, 20, 100, 20, progress);

Take in consideration that the previous call doesn’t actually send the data to the display, only prepares it. To send it we need to call the display method.

display.display();

The complete main loop can be seen below. Note that a 1 second delay was added to make the animation of the progress.

void loop(){

      display.clear();

      progress = (progress + 10) % 110;
      
      display.drawProgressBar(20, 20, 100, 20, progress);
      display.display();

      delay(1000);
}

The final code can be seen below.

#include "SSD1306.h"

SSD1306 display(0x3c, 21, 22);
int progress = 0;

void setup(){
  display.init();
}

void loop(){

      display.clear();

      progress = (progress + 10) % 110;
      
      display.drawProgressBar(20, 20, 100, 20, progress);
      display.display();

      delay(1000);
}

Testing the code

First, make sure the ESP32 and the display are correctly wired and powered up. Then, compile and upload the previous code to your device using the Arduino IDE.

When the procedure finishes, the progress bar should be drawn on the display, like shown in the video below.

Tutorial originally shared by techtutorialsx