ESP32 Arduino SSD1306 OLED: Redrawing a string

The objective of this esp32 tutorial is to explain how we can change the value of a string drawn in the SSD1306 OLED display, using the Arduino core running on the ESP32. For this tutorial, an Elecrow’s version of the SSD1306  OLED display was used. The ESP32 board used was a NodeMCU.

Introduction

The objective of this esp32 tutorial is to explain how we can change the value of a string drawn in the SSD1306 OLED display, using the Arduino core running on the ESP32.

To illustrate how to do it, we will show a simple counter that will be incremented every second.

You can check how to wire the ESP32 to the SSD1306 OLED display and how to install the library needed to interact with it on this previous post.

For this tutorial, an Elecrow’s version of the SSD1306  OLED display was used. The ESP32 board used was a NodeMCU.

The code

We will start the code by including the Wire.h library, which is needed to interact with the display via I2C. We will also include the SSD1306.h library, which exposes the functionality needed to draw on the display.

#include <Wire.h>
#include "SSD1306.h"

Next we will create an object of class SSD1306, which has the methods we are going to use to draw on the display.

Remember from the previous post that the constructor for this class receives as first input the I2C address of the display and as second and third inputs the numbers of the I2C SDA and SCL pins, respectively.

In our case, we will keep using the connection diagram shown on the previous post, so the SDA pin will be 21 and the SCL will be the 22.

SSD1306 display(0x3c, 21, 22);

We will also declare our counter as a global variable, so we can later increment it on the multiple iterations of the Arduino loop function.

int counter = 0;

Moving on to the setup function, we will initialize the display with a call to the init method on our display object.

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

Since we want to dynamically change the content of the string that is going to be shown on the display, we will do the remaining code on the Arduino loop function.

Since in each iteration of the loop we will be displaying new content, we first clear the display with a call to the clear method. This method receives no arguments and returns void.

display.clear();

Then we write the string we want to display with a call to the drawString method on our display object.

We will keep the coordinates where the string will be drawn at zero (the first and second parameters of the drawString method are the x and y position, respectively).

As third argument, we will pass the string to be drawn, which will be built from our global counter.

display.drawString(0,0, "Counter: " + String(counter));

Next, in order to send the actual content to be drawn on the display, we call the display method on our object.

display.display();

To finalize the Arduino loop, we will increment the counter and perform a small 1 second delay between each iteration. Thus, the content shown in the display should refresh each second and show the new value of the counter.

counter ++;
delay(1000);

The final complete code can be seen below

#include <Wire.h>
#include "SSD1306.h" 
 
SSD1306  display(0x3c, 21, 22);
int counter = 0;
 
void setup() {
  display.init();
}
 
void loop() {
  display.clear();
  display.drawString(0,0, "Counter: " + String(counter));
  display.display();
 
  counter ++;
  delay(1000);
}

Testing the code

After performing the wiring between the display and the ESP32, simply compile and upload the code with the Arduino IDE. You can check the expected result in the video below.

DFRobot supply lots of esp32 arduino tutorials and esp32 projects for makers to learn.