ESP32 Arduino SSD1306 OLED: Drawing a QR Code

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. 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.

ESP32 Arduino OLED SSD1306 install QR Code library.png

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.

ESP32 QR Code OLED SSD1306 display.png

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.

ESP32 QR Code OLED SSD1306 android.png

Figure 3 – QR Code scanning from android app.


Related Posts

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

2 Responses to ESP32 Arduino SSD1306 OLED: Drawing a QR Code

  1. Rick says:

    That looks like a great project. I want to do something similar but then with a QR code that contains a URL. Did you test it with a URL also?

    Liked by 1 person

    • antepher says:

      Hi! Thanks 🙂

      I didn’t test it with a URL but my guess is that it should work just fine.

      I think that for the QR code library the URL should be just a regular string and the identification that it is an URL should be on the scanning app.

      But let us know if you test it.

      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 )

w

Connecting to %s