ESP32 Arduino SSD1306 OLED: Redrawing a string

The objective of this post 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 post 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.

Advertisements
This entry was posted in ESP32 and tagged , , , , , , . Bookmark the permalink.

7 Responses to ESP32 Arduino SSD1306 OLED: Redrawing a string

  1. Bob says:

    Why wouldn’t one just clear the digits of the counter leaving the text ‘Counter’ intact? In other words why refresh the whole line? I frequently just update only the data rather than the ‘titles’ on my GLCD displays.

    Liked by 1 person

    • antepher says:

      Hi! It was just due to simplicity, since this is an introductory tutorial 🙂

      The way you suggest is indeed the most optimized way of interacting with the display, thanks for mentioning it.

      Best regards,
      Nuno Santos

      Like

  2. Pingback: ESP32 Arduino SSD1306 OLED: Drawing a QR Code | techtutorialsx

  3. A.L. says:

    Excellent example and explanation! I have been playing with ESP32 and OLED for several months. I wish I came across this post sooner. I finally figured out the port of the I2C on the ESP32 board last week. I have been working on an example to test OLED. This example is by far the shortest example. In no time, I was able to see number scrolling on the OLED. Happy Arduino-ing!
    Tip: The OLED on my ESP32 uses I2C interface. In order to see the address of the OLED module, you need to know the port of the I2C. My ESP32 has 5 for SDA and 4 for SCL . Instead of using wire.begin() to scan the I2C devices. I changed this line to wire.begin(5,4). For my ESP32, the
    SSD1306 is “SSD1306 display(0x3c, 5, 4);

    Liked by 1 person

    • antepher says:

      Hi!

      Thank you very much for the feedback, I’m glad it was easy to setup everything by following this tutorial 🙂

      Thanks for the tip, I’ve only tried with pins 21 and 22 but it’s good to know that it will work fine with others 🙂

      Need to get some time to go back to the OLED, there’s still plenty of stuff I would like to explore.

      Best regards,
      Nuno Santos

      Like

  4. Jimmy says:

    Hi nuno, do you have an example using the RTC from the esp32? or an example that doen’t require delays? Thanks

    Liked by 1 person

    • antepher says:

      Hi Jimmy,

      Unfortunately I don’t have any example using a RTC or without delays.

      Nonetheless, I have an example on how to generate timer interrupts on the ESP32 which should be easy to adapt to work with the OLED:
      https://techtutorialsx.com/2017/10/07/esp32-arduino-timer-interrupts/

      Just be careful to not write to the OLED inside the interrupt routine. Instead, simply use the routine to signal to the main loop that it should redraw the string 🙂

      Note however that even with timer interrupts, if you are trying to do something such as displaying an accurate clock, then the precision of your clock will be affected by many factors, such as temperature.

      In that case, the best option is indeed going to an RTC such as the DS3231, which has temperature compensation.

      Unfortunately I don’t have any example for the ESP32 or tested if it works. Nonetheless, I have a couple of them for the ESP8266 using an Arduino library, so my guess is that the same code should work on the ESP32. Here is an example on how to generate an alarm:
      https://techtutorialsx.com/2017/02/04/esp8266-ds3231-alarm-when-seconds-match/

      And another:
      https://techtutorialsx.com/2017/02/12/esp8266-ds3231-alarms-once-per-second/

      Hope this helps getting you in the right track.

      Best regards,
      Nuno Santos

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s