ESP32 SSD1306 OLED: Drawing circles

Tutorials Writer: TECHTUTORIALSX

In this tutorial we are going to learn how to draw circles on a SSD1306 OLED display, using the ESP32 and the Arduino core.

Introduction

In this tutorial we are going to learn how to draw circles on a SSD1306 OLED display, using the ESP32 and the Arduino core. We are going to use this library, for which we have already covered the basics on a previous tutorial.

The mentioned library has methods to draw both filled and not filled circles. We are going to test both.

The ESP32 will interact with the display using the I2C protocol, which means we will have to connect two pins of the microcontroller to the display, besides the power supply.

You can check in detail the electric schematic on this tutorial. Below at figure 1 there’s a copy of the diagram, taken from the mentioned tutorial.

Figure 2 – Electric diagram between the ESP32 and the SSD1306 OLED display.

As can be seen above, we are assuming the use of the ESP32 pins 21 and 22 as I2C SDA and SCL, respectively.

Note also that, since the display works at a 3.3 voltage level, we can use the 3.3 V supply pin that most ESP32 boards have to power it. Alternatively, you can use an external power supply.

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

The code

To start, we will be including the SSD1306.h library, which will provide the functionalities we need to interact with the OLED display.

#include "SSD1306.h"

Next we will create an object of class SSD1306. This will expose to us the methods we need to draw content on the display.

As first input, the constructor of the SSD1306 class receives the I2C address of the display, which is 0x3c. As second and third inputs it receives the number of the SDA and SCL pins, respectively.

SSD1306 display(0x3c, 21, 22);

We will write the rest of our code in the Arduino setup function. We will start by initializing the display by calling the init method on our previously created object. This method takes no arguments and returns void.

display.init();

Next we will take care of drawing the first circle, which won’t be filled. To do it, we simply call the drawCircle method on our SSD1306 display object.

This method receives as first and second arguments the x and y positions of the center of the circle, respectively. We will draw this first circle at x = 20 and y = 20.

As third and last parameter this method receives the radius of the circle. We will pass a value of 15 pixels.

Note that, after calling this method, the circle won’t be immediately drawn. We need to call an additional method, as we will see below.

display.drawCircle(20, 20, 15);

After this we will take care of drawing a filled circle, with a call to the fillCircle method. The arguments of this function are exactly the same as the drawCircle method.

So, we will draw our filled circle at x = 70 and y = 20, with a radius of 15 pixels. Once again, this won’t be immediately drawn.

display.fillCircle(70, 20, 15);

To finalize, we need to effectively draw the content to the screen with a call to the display method.

display.display();

The final code can be seen below.

#include "SSD1306.h"
 
SSD1306 display(0x3c, 21, 22);
 
void setup(){
 
  display.init();
 
  display.drawCircle(20, 20, 15);
  display.fillCircle(70, 20, 15);
 
  display.display();
 
}
 
void loop(){}

Testing the code

To test the whole system, first wire the ESP32 to the display accordingly to the diagram shown in figure 1.

After everything is correctly connected, compile and upload the code to your ESP32, using the Arduino IDE.

Once the procedure finishes, the two circles should get displayed in your OLED display, similarly to what is shown in figure 2 (the display is shown upside down).

Figure 2 – Circles drawn on the display.