ESP32 Arduino SSD1306 OLED: Drawing a QR Code

The objective of this ESP32 Arduino Tutorial is to explain how to draw a QR Code on a SSD1306 OLED display, using the Arduino core on the ESP32. For this tutorial an Elecrow’s version of the OLED was used. The display can be bought here. The ESP32 board used was a NodeMCU.

Introduction

The objective of this post is to explain how to draw a QR Code on a SSD1306 OLED display, using the Arduino core on the ESP32.

You can check this previous post for an explanation on how to install the libraries needed to interact with the OLED from the ESP32 and how to get started. It also includes the electric connection diagram between the ESP32 and the SSD1306.

Additionally, we will need a library that will take care of generating the QR Code for us, which you can check at GitHub here.

Nonetheless, the easiest way to install it is via Arduino IDE libraries manager, as can be seen below in figure 1. You just need to search for “SSD1306 QRCode” in the search bar of the libraries manager and install the library that appears below.

Figure 1 – Installing the QR Code library.

Note that although the library only references support for the ESP8266, it will work on the ESP32. For some versions of the Arduino IDE, it will give a waning during compilation regarding that the library only claims support for the ESP8266 architecture, but again you can safely ignore it.

For this tutorial an Elecrow’s version of the OLED was used. The display can be bought here. It can also be obtained as part of this starter kit. The ESP32 board used was a NodeMCU.

The code

The code for this tutorial will be very simple, since both the OLED and the QR Code libraries expose high level APIs that allow us to easily interact with the display without worrying about the more complex low level details.

Thus, we start with the library includes. We will need the Wire.h library, which is needed for the I2C functionality, since this is the protocol we use to interact with the OLED display from the ESP32.

We will also need the SSD1306.h library, for having access to all the functionality needed to send commands to the display. Finally, we will need the qrcode.h library we just installed, which exposes the methods needed to draw the QR Codes.

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

Next, we need to declare an instance of class SSD1306, which exposes the methods for the basic interaction with the display, such as initializing it and showing the content.

As first argument of the constructor for this class, we need to pass the I2C address of the device, which is 0x3c. As second and third arguments, we need to pass the I2C SDA and SDL pins we are using. Accordingly to the connection diagram from the previous tutorial, we are using pins 21 and 22 from the ESP32, respectively.

SSD1306 display(0x3c, 21, 22);

We will also need to declare an object of class QRcode, which will expose the methods needed for the initialization and the creation of the QR Code.

The constructor for this class receives as input a reference to our display object, which we just created.

QRcode qrcode (&display);

Now moving to the Arduino setup function, we will initialize the SSD1306 with a call to the init method on our display object.

display.init();

We will also need to call the init method on the qrcode object, to initialize it.

qrcode.init();

Finally, to display the QR Code, we simply call the create method of the qrcode object, passing as input a string with the content for the QR Code. We will just pass as input a simple “Hello World” message.

qrcode.create("Hello from esp32");

Since we are not going to need to refresh the display, we can leave the main loop empty. The final source code can be see below.

#include <Wire.h>
#include "SSD1306.h"
#include <qrcode.h>
 
SSD1306 display(0x3c, 21, 22);
QRcode qrcode (&display);
 
void setup() {
 
  display.init();
  display.display();
 
  qrcode.init();
  qrcode.create("Hello from esp32");
}
 
void loop() {}

Testing the code

To test the code, simply compile it and upload it to your ESP32 using the Arduino IDE, after all the connections between the devices are done. As mentioned in the introductory section, you can safely ignore if a warning regarding architecture mismatch is shown.

After the procedure finishes, you should have the QR Code rendered on your display, as shown in figure 2.

Figure 2 – Rendering the QR Code on the SSD1306 OLED with the ESP32.

You can then use a scanning app on your cellphone or tablet to scan the QR Code. As illustrated in figure 3, it should contain the content we have defined in our code.

Figure 3 – QR Code scanning from android app.

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