ESP32 with OLED | Interfacing OLED with ESP32 using Arduino IDE
Nowadays OLED display is popular display. OLED is a graphical display module that can be used to display small images and graphics. Nowadays we use OLED because 16×2 LCD modules are space and power-consuming modules and can’t be used in wearable products. In this tutorial we will use ESP32 with OLED to display some graphical images on it.
Learn more about ESP32 Tutorials by going through various applications built on it.
Many types of OLEDs are available in the market based on the color of the display, the number of pins, size and controller IC.
Based on color –
- Monochrome (Blue)
- Monochrome(white)
- Yellow
Based on size –
- 128*64(0.96″)
- 128*32(0.91″)
Based on Controller IC –
- SSD1306
- SSD1331
Based on pins –
- 4-pins(I2C)
- 7-pins(I2C/SPI)
ESP32 with OLED | Interfacing OLED Display with ESP32 using Arduino IDE
In this tutorial, we will use the Monochrome Blue 4-pin SSD1306 0.96” OLED module which is 128 pixels wide and 64 pixels long. This 4-pin OLED supports only I2C protocol and controller IC SSD1306 helps the OLED to display the received characters.
We need ESP32 module, 128*64 SSD1306 OLED module, Jumper Wires for this tutorial.
ESP32 OLED Connections:
- SCL pin (D22) of ESP32 ——> SCL pin of OLED
- SDA pin (D21) of ESP32 ——> SDA pin of OLED
- 3.3v pin of ESP32 ——> Vcc of OLED (support 3-5v)
- GND of ESP32 ——> GND of OLED
Installing required Libraries for OLED in Arduino IDE
we need two libraries Adafruit_SSD1306 library and Adafruit_GFX library.
Follow the below steps:
- Open the Arduino IDE and go to Sketch > Include Library > Manage Libraries.
- In library manager, search for the above libraries and install them.
After installing the libraries, restart the Arduino IDE.
Programming ESP32 for OLED
If you need, Visit this https://iotbyhvm.ooo/esp32-tutorials/ for setting up Arduino IDE for ESP32 Board.
In this tutorial I2C communication is used between ESP32 and OLED, so we need the I2C address of the display. Generally, the I2C address of the 128*64 OLED is 0x3C. To find the I2C address, connect the OLED with the ESP32 and upload the below code and open the serial monitor. Now you got the address of the OLED. This address will be used in the final code for ESP32.
#include <Wire.h>
void setup() {
Serial.begin (9600);
Serial.println ("Scanning I2C device...
Wire.begin();
for (byte i = 0; i <50; i++)
{
Wire.beginTransmission (i);
if (Wire.endTransmission () == 0)
{
Serial.print ("Address found->");
Serial.print (" (0x");
Serial.print (i, HEX);
Serial.println (")");
Count++;
}
Serial.print ("Found ");
Serial.print (count, DEC);
Serial.println (" device");
}
void loop() {}
Display Image on OLED using ESP32
Complete code
is given at the end of this tutorial. Here, we will write the code to display the scrolling text and bitmap image one after another. You can find an example code for OLED in File->Examples->AdafruitSSD1306.
Import the necessary libraries. Include “Adafruit_GFX.h”, “Adafruit_SSD1306.h” for OLED Display and wire.h for I2C.
#include <Wire.h> #include <Adafruit_GFX.h> #include <Adafruit_SSD1306.h>
Use #define macro for define the screen width and height
#define SCREEN_WIDTH 128 #define SCREEN_HEIGHT 64 Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1);
Make a function to display scrolling text
void display_scrolltext(void) {
display.clearDisplay();
display.setTextSize(2);
display.setTextColor(WHITE);
display.setCursor(0, 0);
display.println(F("Welcome"));
delay(2000);
display.clearDisplay();
We will use some Functions for scrolling the text in different directions.
For scroll right – display.startscrollright()
For scroll left – display.startscrollleft()
For scroll diagonal right – display.startscrolldiagright()
display.startscrollright(0x00, 0x0F); delay(2000); display.stopscroll(); delay(1000); display.startscrollleft(0x00, 0x0F); delay(2000); display.stopscroll(); delay(1000);
In the setup function, Initialization of OLED display and function calling
void setup() {
if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {
Serial.println(F("SSD1306 allocation failed"));
for(;;);
}
delay(2000);
display.clearDisplay();
testscrolltext();
display.clearDisplay();
display.drawBitmap(0, 0, image_data, 128, 64, 1);
display.display();
}
Here display.drawBitmap() function takes 6 parameters (x-coordinate, y-coordinate, bitmap array, width, height and color) to display image. Here the bitmap array contains the pixel information to draw the pixel on the screen to create the image. This bitmap array (Hex values) can be generated online or using bitmap software as explained below.
To convert the image into hex values, you can use this online tool.
We can set width and height as 128 and 64 respectively because we are using 128×64 OLED.
In this tutorial we are converting one Raspberry Pi logo graphics. So after converting the image, copy all the generated hex values and paste it in Arduino code as shown below.
Complete Arduino Sketch Code with full Hex values is given at the end of this tutorial.
static const uint8_t image_data[1024] = { 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,, ……… …. …. ……… ……..
ESP32 OLED Graphics Display
Finally, Flash the complete code into ESP32 using Arduino IDE and you will first see the scrolling text saying “Coming up RPi logo” and then it will show the Raspberry Pi logo graphics image which we have converted into Hex values using the online tool.
Complete Arduino sketch Code
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
#define SCREEN_WIDTH 128
#define SCREEN_HEIGHT 64
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1);
static const uint8_t image_data[1024] = {
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, 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, 0xfb, 0xff, 0xff, 0xff, 0xff, 0xdf, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xfc, 0x00, 0x00, 0xff, 0xff, 0x00, 0x00, 0x3f, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xe0, 0x00, 0x00, 0x1f, 0xf8, 0x00, 0x00, 0x07, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xf0, 0x20, 0x00, 0x0f, 0xf0, 0x00, 0x04, 0x0f, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xf0, 0x0e, 0x00, 0x07, 0xe0, 0x00, 0x60, 0x0f, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xe0, 0x01, 0xe0, 0x03, 0xc0, 0x07, 0x80, 0x07, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xf8, 0x00, 0x3c, 0x03, 0xc0, 0x3c, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xf8, 0x00, 0x07, 0x87, 0xe1, 0xe0, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xfe, 0x00, 0x01, 0xff, 0xff, 0x80, 0x00, 0x7f, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x7f, 0xfe, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0xff, 0xff, 0x00, 0x01, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x01, 0xff, 0xff, 0x80, 0x0f, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x3f, 0xff, 0xff, 0xfc, 0x7f, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x0f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x0f, 0x80, 0x01, 0xc0, 0x7f, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xe0, 0x1e, 0x00, 0x00, 0x60, 0x0f, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0x3e, 0x00, 0x00, 0x78, 0x03, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xfe, 0x00, 0xff, 0x00, 0x00, 0xfe, 0x01, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xfe, 0x03, 0xff, 0xe0, 0x03, 0xff, 0x80, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xfc, 0x0f, 0xff, 0xff, 0xff, 0xff, 0xe0, 0x7f, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xfc, 0x7f, 0x00, 0x3f, 0xf8, 0x00, 0xfc, 0x7f, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x00, 0x0f, 0xf0, 0x00, 0x3f, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x00, 0x07, 0xe0, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xf3, 0xf0, 0x00, 0x07, 0xc0, 0x00, 0x0f, 0x8f, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xc3, 0xe0, 0x00, 0x03, 0xc0, 0x00, 0x07, 0x03, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0x01, 0xc0, 0x00, 0x03, 0xc0, 0x00, 0x07, 0x01, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0x01, 0xc0, 0x00, 0x07, 0xe0, 0x00, 0x07, 0x01, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xfe, 0x01, 0xc0, 0x00, 0x07, 0xf0, 0x00, 0x07, 0x80, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xfe, 0x03, 0xe0, 0x00, 0x0f, 0xf8, 0x00, 0x0f, 0x80, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xfe, 0x03, 0xf0, 0x00, 0x3f, 0xfc, 0x00, 0x1f, 0x80, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0x07, 0xfc, 0x00, 0xff, 0xff, 0x80, 0x3f, 0xc1, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0x87, 0xff, 0xff, 0xc0, 0x03, 0xff, 0xff, 0xc3, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xcf, 0xff, 0xff, 0x00, 0x00, 0xff, 0xff, 0xf7, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xfe, 0x3f, 0xfe, 0x00, 0x00, 0x7f, 0xe0, 0x3f, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xf8, 0x07, 0xfc, 0x00, 0x00, 0x3f, 0x80, 0x1f, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xf8, 0x01, 0xfc, 0x00, 0x00, 0x3e, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xf8, 0x00, 0x7c, 0x00, 0x00, 0x3c, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xf8, 0x00, 0x3c, 0x00, 0x00, 0x38, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xf8, 0x00, 0x1e, 0x00, 0x00, 0x70, 0x00, 0x3f, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xfc, 0x00, 0x1f, 0x80, 0x01, 0xf0, 0x00, 0x3f, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xfe, 0x00, 0x0f, 0xe0, 0x07, 0xe0, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0x0f, 0xff, 0xff, 0xf0, 0x03, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x1f, 0xff, 0xff, 0xf0, 0x0f, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x03, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x00, 0x00, 0x7f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x00, 0x00, 0x7f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x07, 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, 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
};
void setup() {
Serial.begin(115200);
if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {
Serial.println(F("SSD1306 allocation failed"));
for(;;);
}
delay(2000); // Pause for 2 seconds
// Clear the buffer.
display.clearDisplay();
testscrolltext();
// Clear the buffer.
display.clearDisplay();
// Draw bitmap on the screen
display.drawBitmap(0, 0, image_data, 128, 64, 1);
display.display();
}
void testscrolltext(void) {
display.clearDisplay(); // clear the display screen of the OLED
display.setTextSize(2); // Draw 2X-scale text
display.setTextColor(WHITE);
display.setCursor(0, 0);
display.println(F("Welcome"));
delay(2000);
display.clearDisplay();
display.println(F("Coming Up"));
display.println(F("RPi logo"));
display.display();
delay(100);
display.startscrollright(0x00, 0x0F);
delay(2000);
display.stopscroll();
delay(1000);
display.startscrollleft(0x00, 0x0F);
delay(2000);
display.stopscroll();
delay(1000);
display.startscrolldiagright(0x00, 0x07);
delay(2000);
display.startscrolldiagleft(0x00, 0x07);
delay(2000);
display.stopscroll();
delay(1000);
}
void loop() {
}
I hope you like this post “ESP32 with OLED”.These ESP32 tutorials for beginners.If you want explore more ESP32 Tutorials Click Here. Do you have any questions? Leave a comment down below!
Thanks for reading. If you like this post probably you might like my next ones, so please support me by subscribing my blog.
You may like also:
