Embedded System Project 5: OLED Display With ESP32
Wait What?! My ESP32 says “Hello, World!”
This time we are going to play with external display with OLED. With this, we don’t have to depends on PC to do some reading, so that we can be more flexible!
First, let me explain about external display. Actually, there are many external displays that we can use, but this time I want to make it simple so I will only explain in short about 2 external display, which is LCD and OLED.
The LCD that I meant before is 16×2 I2C Liquid Crystal Display (although size shouldn’t be really matters), while the OLED that I meant is 0.96 inch Organic Light Emitting Diode Display. In short, their notable differences are LCD is heavier, having more components, and cheaper if compared to OLED. For your information, LCD costs around IDR 20k while OLED costs around IDR 50k (luckily I bought mine for IDR 44k). Unfortunately, LCD can’t output the display as sharp as OLED, but I believe that the output is still readable which means it is fine.
I2C? What’s That?
I hope that it’s not too late to explain about I2C. I2C (Inter Integrated Circuit) is synchronous, multi-master, multi-slave communication protocol to ease the communication between the components. In this case, I2C will ease the communication between our PC with LCD/OLED. What does it mean? To make it more understandable, I will take the example of using LCD as external display. 16x2 LCD has 16 pins, so to make it runs, actually we have to use all of its pins. But, with I2C we can make it works by only using 4 pins instead of 16 pins.
As usual, we will use https://randomnerdtutorials.com/esp32-ssd1306-oled-display-arduino-ide/ as reference, but of course we will make our own version!
Let’s Start!
For this project, we will need:
- ESP32 Board
- 0.96 inch OLED display
- USB cable to connects ESP32 with PC
- Jumper wires (I am using 4 male to male jumper wires)
- Breadboard
As we know, OLED display uses I2C communication protocol, so wiring is pretty simple. You may look at my schematic diagram below:
Friendly reminder that in this example, we will use I2C communication protocol instead of SPI communication protocol. For your information, the most suitable pins for I2C communication in the ESP32 are GPIO 22 (SCL) and GPIO 21 (SDA).
Installing Library — ESP32
We need to install 2 library, which is Adafruit_SSD1306 library and Adafruit_GFX library. You may follow these steps below to install the library.
- In your Arduino IDE, Sketch > Include Library > Manage Libraries
- Type “Adafruit SSD1306” in the search box and then install the SSD1306 library from Adafruit
- After you are done, type “Adafruit GFX” in the search box and install the library
- Next, type “Adafruit BusIO” in the search box and install the library
- After installing the libraries, restart the Arduino IDE
Finally, we are done with libraries, which means we can do the real fun! In your Arduino IDE, go to File > Examples > Adafruit SSD1306 and then select the example for the display you’re using. In my case, I pick “ssd1306_128x64_i2c”.
After it, the following code should load. It’s pretty long code so I decided to make it in link instead of directly raw code in this medium article! In short, this code is an example of monochrome OLED based on SSD1306 drivers, made by Adafruit.
Before we continue, you should check your OLED. If your OLED doesn’t have a RESET pin, you should set the OLED_RESET variable to -1 as shown below:
#define OLED_RESET -1 // Reset pin # (or -1 if sharing Arduino reset pin)
Next, you should change the OLED address if necessary in the following line. You can check what is your OLED address with this code. In our case, the address is 0x3C.
#define SCREEN_ADDRESS 0x3C
Result?
Fortunately, it seems that it can works really well!
Now It’s Time To Make Our Version!
Let’s start with the simple one, which of course “Hello, world!”. But this time, I add more text which is “Good bye!” below “Hello, world!”.
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>#define SCREEN_WIDTH 128 // OLED display width, in pixels
#define SCREEN_HEIGHT 64 // OLED display height, in pixels
#define SCREEN_ADDRESS 0x3C // Address 0x3D for 128x64// Declaration for an SSD1306 display connected to I2C (SDA, SCL pins)
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1);void setup() {
Serial.begin(115200);if(!display.begin(SSD1306_SWITCHCAPVCC, SCREEN_ADDRESS)) {
Serial.println(F("SSD1306 allocation failed"));
for(;;);
}
delay(2000);
display.clearDisplay(); // Clear display buffer
display.setTextSize(1.5); // Set text size
display.setTextColor(WHITE); // Set text color
display.setCursor(5, 5); // Define position
display.println("Hello, world!"); // Display static text
display.setCursor(5, 18);
display.println("Good bye!");
display.drawRect(0, 0, 90, 30, WHITE);// Draw rectangle
display.display(); // Display the text and shape on the screen
}void loop() {
}
In short, after initializing the display, it’s better to add a two second delay, so that the OLED has enough time to initialize before writing text, then clear the display buffer with the clearDisplay() method. Next, we need to set the text size with setTextSize(size) method, the text color with setTextColor(color) method. Then, we can define position with setCursor(x, y) method. After that, draw the rectangle with drawRect(x, y, width, height, color) method. In this case, the (x, y) coordinates indicate the top left corner of the rectangle. Finally, we can send the text to the display using println() method, then call the display() method to actually display the text and shape on the screen.
Wait what?! How can we have :
display.setTextColor(WHITE);While as we can see in the demo, the color are yellow and blue?
No worries! Actually, that happened because actually my OLED is Yellow-Blue I2C OLED. In normal cases, the color would be white instead of yellow and blue!
To conclude, OLED display can be used to write text, draw shape, and even display bitmap images with Arduino IDE software and ESP32. I’d like to notify you that the OLED display doesn’t require backlight, which results in a pretty nice contrast in dark environments. Moreover, its pixels will only consume energy when they are on, so the OLED display consumes less power when compared with other displays.
That’s all for this story about external OLED display. I hope that this story can give you guys who is reading this more inspiration to keep exploring your idea and knowledge. There are still many ESP32 features that can be explored, stay curious and see you in the next story! Good bye!
