Generate a QR code using Arduino and display it on SSD1306 OLED

The "Quick Response" code or abbreviated as QR code has become an essential part of our digital lives, chances are that you're already subconsciously familiar with them by now you've probably been roaming around your local grocery store, or maybe you are reading through your favourite book, or even possibly you are making an online payment with Google Pay, PhonePe or Paytm, or surfing the web, etc. (I suppose I could go on and on with examples huh?) and you happened to have come across this weird looking square thing and thought, what is this square thing anyway and if you haven’t...well, don’t worry it’s bound to happen sooner or later, so to understand the topic better we are going to do a fun little project with Arduino and OLED and demystify the following things:

• Basic Concept of the QR code.
• How it works.
• How to make your very own QR code using Arduino.
• And finally, display it in an OLED (SSD1306) screen.

So, What is this QR Code Anyway?

QR code (Quick Response code) is a matrix 2D code for reading data at high speed, developed by DENSO WAVE in 1994 for the automotive industry of Japan. A QR code compresses data very efficiently compared to the standard barcode, to achieve this it uses four standardized encoding modes (numeric, alphanumeric, byte/binary, and kanji), the technology was made "open source” i.e. available for everyone so, it gained popularity very rapidly. Significant advantages of QR Codes over conventional barcodes are larger data capacity and high fault tolerance.

How QR Code Works? 

QR codes (and other data matrix codes) are designed to be read by special tools, not by humans, so there's only a specific amount we can understand by studying visually, although every code is different in various ways though they contain a few interesting common features by observing the circuitdigest.com QR code we will study some of them

1. Finder Patterns: Large square boxes with a solid box inside in the three corners of the code make it easy to confirm that it’s a QR code since there are only three of them, so it's pretty obvious that in which way the code is oriented.
2. Alignment Pattern: This makes it certain that whatever the orientation the code can be readable.
3. Timing Pattern: This runs horizontally and vertically between the three finder patterns, using these lines the reader can determine the size of the code.
4. Version Information: There are currently 40 different versions of the QR code standard, this section of the code determines the QR code version which is being used, for marketing version 1-7 used normally.
5. Format Information: The format partners have information about error tolerance and data masking.
6. Data Area: This section of the code contains all the data elements and error correction code along.
7. Quit Zone: The spacing in every QR code is mandatory in order to differentiate the code from its surroundings.

The image below will give you a clear idea about the code

Other sections of the code are data and redundancy code.

There are a number of other features and complicated topics that I won't be discussing in this tutorial, if you do like to read in more details about the QR code please follow this QR Code tutorial by Tan Jin Soon, EPCglobal Singapore Council. Synthesis Journal, 2008.

 

 

 

 

 

 

 

The Specification of the QR Code  

 

 

 

 

Symbol Size	Min. 21x21 cell - Max. 177x177 cell (with 4-cells interval)
Information Type and Volume	Numeric Characters	7,089 characters at maximum
	Alphabets, Signs	4,296 characters at maximum
	Binary (8 bit)	2,953 characters at maximum
	Kanji Characters	1,817 characters at maximum
Conversion efficiency	Numeric Characters Mode	3.3 cells/character
	Alphanumeric/Signs Mode	5.5 cells/character
	Binary (8 bit) Mode	8 cells/character
	Kanji Characters Mode (13 bit)	13 cells/character
Error correction  functionality	Level L	Approx. 7% of the symbol area restored at maximum
	Level M	Approx. 15% of the symbol area restored at maximum
	Level Q	Approx. 25% of the symbol area restored at maximum
	Level H	Approx. 30% of the symbol area restored at maximum
Linking functionality	Possible to be divided into 16 symbols at maximum

Generating your very own QR code

Follow the steps mentioned below to generate your very own QR code, in this example, we are going to make a QR code of our beloved Circuit Digest website

To generate a QR code go to this website and if you look at the top side of the website you can see a list of options, in this tutorial we are generating a QR code for a URL, so we are going to

1. Click on the URL tab and paste the URL for the Circuit Digest in the Enter URL section.
2. Click on save.
3. Give a file name for the output file.
4. Select PNG as our preferred file format.
5. and click save.

The image below will give you a clear idea about the process

Our dearest microcontroller “Arduino” is not that intelligent enough that it could just compile the raw PNG image and displays it in the OLED display. So, to display the QR code to the OLED we need to follow some simple steps and convert the PNG image to a bitmap array readable by Arduino. This conversion we have previously done while interfacing SSD1306 OLED with Arduino and interfacing Graphical LCD with Arduino. We also interfaced SSD1306 OLED with Raspberry Pi, ESP32, NodeMCU, and many other microcontrollers. Bitmap array conversion can be done in below two steps:

1. Converting the PNG to BMP format.
2. Convert the BMP image to an array of HEX codes.

Converting the PNG to BMP format 

To convert the downloaded PNG image to BMP image, go to this website and in the image converter section and

1. Click on the dropdown menu and select
2. Convert to BMP
3. Click Go

The image below will give you a clear idea about the process:

 

You will be presented with a new page looks like the below image:

1. Click on the Choose Files tab and select the downloaded image
2. In the Optional settings, panel type your desired size (we are using a 128x64 OLED)
3. Click on Start conversion button

You will be presented with the following page and after a few seconds your converted image will be downloaded if the download doesn't start automatically click on the download your file option:

Great! Now we got our BMP file its time to convert it to an array of HEX codes readable by an Arduino.

Convert the BMP image to an array of HEX codes

To convert the downloaded BMP image to a HEX array, go to this website and click on Tools -> image2cpp

The image below will give you a clear idea about the process

You will be presented with a screen which has four options and we will discuss them in details

1. Select image
2. Image Settings
3. Preview
4. Output

Select image section 

In this section we will select the image which we have just converted to BMP:

Image Settings Section 

In this section, we will set the canvas size, background color, scaling and centre options to our required value.

1. Canvas size (we set to 128x64 because we are using an OLED with 128x64 pixel density).
2. In this section, we can set the background color of the OLED (we choose it to be white).
3. Scaling is set to the original size.
4. Finally, in the centre option click on the horizontal and vertical checkboxes, this will make the image appear in the centre.

The image below will give you a clear idea

Preview Section 

In the preview section we can see a clear preview of the image which will be displayed in the OLED like shown below:

Output Section 

In the output section we will generate and copy the generated code, to do so follow the below steps:

1. Code output format (we set it as Arduino code because we are using one).
2. Identifier (this option sets the name for the generated array we leave it default as it is).
3. Draw mode (We set the draw mode option to horizontal).
4. And finally, we click on the generate code button this will generate the final output code.

The image below will give you a clear idea

Circuit Diagram

Below image shown the interfacing connections between Arduino Nano and SSD1306: 

Arduino Nano Pin	OLED PIN
GND	GND
3.3V	VCC
D13	CLK
D11	MOSI
D8	RES
D9	SDC
D10	CCS

Code Explanation

To show the image on the OLED we need the help of an Arduino library, which can be downloaded from this GitHub repository. Download the U8glib-1.19.1.zip version of the library and import it in the Arduino IDE. If you are new to Arduino then take the help of this link describing how to import a library.  In the below section we will modify the code to display the previously generated HEX array to the OLED. Complete code with a working video is given at the end of this article. The Detail Explanation of the code is given below. 

First, include the downloaded library.

#include "U8glib.h" // including the U8glib library

Then define all the necessary pins for OLED.

#define OLED_CLK_PIN 13  //Arduino Digital Pin D13: SCK
#define OLED_MOSI_PIN 11 //Arduino Digital Pin D11: MOSI
#define OLED_RES_PIN 10 //Arduino Digital Pin D10: SS
#define OLED_SDC_PIN 9  //Arduino Digital Pin D9: OC1A
#define OLED_CSS_PIN 8 //Arduino Digital Pin D13: ICP1

Initialize the u8glib Library.

U8GLIB_SH1106_128X64 u8g(OLED_CLK_PIN, OLED_MOSI_PIN, OLED_RES_PIN, OLED_SDC_PIN, OLED_CSS_PIN);

Then Include the generated image array.

const uint8_t circuitdigest[] PROGMEM = {
  0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
  0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
  0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
  0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
  0xff, 0xff, 0xff, 0xff, 0xf0, 0x00, 0x1c, 0x01, 0x87, 0xf0, 0x00, 0x0f, 0xff, 0xff, 0xff, 0xff,
  0xff, 0xff, 0xff, 0xff, 0xf0, 0x00, 0x0c, 0x01, 0x87, 0xf0, 0x00, 0x0f, 0xff, 0xff, 0xff, 0xff,
  0xff, 0xff, 0xff, 0xff, 0xf3, 0xff, 0x8f, 0xf0, 0x7f, 0x31, 0xff, 0x8f, 0xff, 0xff, 0xff, 0xff,
  0xff, 0xff, 0xff, 0xff, 0xf3, 0xff, 0x8f, 0xf0, 0x7f, 0x33, 0xff, 0xcf, 0xff, 0xff, 0xff, 0xff,
  0xff, 0xff, 0xff, 0xff, 0xf3, 0x81, 0x8f, 0x31, 0x80, 0x33, 0x81, 0xcf, 0xff, 0xff, 0xff, 0xff,
  0xff, 0xff, 0xff, 0xff, 0xf3, 0x01, 0x8f, 0x31, 0x80, 0x33, 0x81, 0xcf, 0xff, 0xff, 0xff, 0xff,
  0xff, 0xff, 0xff, 0xff, 0xf3, 0x01, 0x8f, 0xb1, 0x80, 0x33, 0x81, 0xcf, 0xff, 0xff, 0xff, 0xff,
  0xff, 0xff, 0xff, 0xff, 0xf3, 0x01, 0x8f, 0xc1, 0x98, 0x33, 0x81, 0xcf, 0xff, 0xff, 0xff, 0xff,
  0xff, 0xff, 0xff, 0xff, 0xf3, 0x01, 0x8f, 0xc1, 0x98, 0x33, 0x81, 0xcf, 0xff, 0xff, 0xff, 0xff,
……..
………..

Draw function is used to draw the bitmap image (QR code) on OLED with the help of u8g.drawBitmapP function.

void draw(void) {
  // graphic commands to redraw the complete screen should be placed here
  u8g.drawBitmapP( 0, 0, 16, 64, circuitdigest);
…..
……

Finally, in loop() function, call all the necessary procedures to build the image on OLED

void loop() {
  u8g.firstPage();  //A call to this procedure, marks the beginning of the picture loop.
  do {
    draw();
  } while( u8g.nextPage() ); // A call to this procedure, marks the end of the body of the picture loop.
  // rebuild the picture after some delay
  delay(1000);
}

After completing the code, plug in the Arduino in the USB port of your computer, select your COM port and upload the code. If you have done everything correctly you will have a working display with a QR code on OLED.

I hope you liked this project and enjoyed learning something new, keep reading keep learning and I will see you next time.