ESP32 SSD1306 OLED: Drawing rectangles

Tutorials Writer: TECHTUTORIALSX

In this tutorial we are going to learn how to draw rectangles on a SSD1306 OLED, 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 rectangles on a SSD1306 OLED, using the ESP32 and the Arduino core.

We are going to use this library to interact with the display using higher level methods that will make our program very simple. We have already covered the basics on how to use the library on this previous tutorial.

For this tutorial the ESP32 will interact with the display using the I2C protocol. The wiring diagram to connect both devices can be seen in detail here.

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. This library will expose to us some higher level methods that allow to interact with the display without the need to worry about the lower level details of the I2C protocol.

#include "SSD1306.h"

After that we will create an object of class SSD1306. The constructor of this class receives as input the I2C address of

the display and the number of the SDA and SCL pins of the ESP32 used.

The address of the display is 0x3c and I’m assuming the use of pins 21 and 22 of the ESP32 as SDA and SCL,

respectively.

SSD1306 display(0x3c, 21, 22);

Moving on to the Arduino setup, we will start by initializing the display with a call to the init method on our SSD1306 object.

display.init();

Then we will draw a rectangle (not filled) with a call to the drawRect method. This method receives four arguments.

The first two are the x and y position of the top left corner of the rectangle. We will set it to x = 10 and y = 10.

The last two arguments are the width and height of the rectangle. We will pass 30 pixels for both (meaning we will get a square).

display.drawRect(10, 10, 30, 30);

After this we will draw a filled rectangle. We can do this with a call to the fillRect method. This method receives as input exactly the same arguments as the drawRect method.

We will position this rectangle at x = 70 and y = 10 and assign it a width and height of 30 pixels (another square).

display.fillRect(70, 10, 30, 30);

Note that both previous calls don’t actually send the data to the display to be drawn. So, to finalize, we need to call the display method, which will take care of sending the data to the display.

display.display();

The complete code can be seen below.

#include "SSD1306.h"
 
SSD1306 display(0x3c, 21, 22);
 
void setup(){
 
  display.init();
   
  display.drawRect(10, 10, 30, 30);
  display.fillRect(70, 10, 30, 30);
 
  display.display();
 
}
 
void loop(){}

Testing the code

To test the whole system, first wire the ESP32 to the display. After all the connections are finished, compile and upload the code to the ESP32, using the Arduino IDE.

Once the procedure finishes, you should have a result similar to figure 1. As can be seen, both squares are drawn.

Figure 1 – OLED display showing the squares.