Friday, March 29, 2024
ESPHow ToIoT HardwaresTutorials/DIY

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:

Interfacing-OLED-Display-with-ESP32-using-Arduino-IDE

  • 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:

  1. Open the Arduino IDE and go to Sketch > Include Library > Manage Libraries.
  2. 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.

Converting Image into Bitmap Array

 

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:

Harshvardhan Mishra

Hi, I'm Harshvardhan Mishra. Tech enthusiast and IT professional with a B.Tech in IT, PG Diploma in IoT from CDAC, and 6 years of industry experience. Founder of HVM Smart Solutions, blending technology for real-world solutions. As a passionate technical author, I simplify complex concepts for diverse audiences. Let's connect and explore the tech world together! If you want to help support me on my journey, consider sharing my articles, or Buy me a Coffee! Thank you for reading my blog! Happy learning! Linkedin

Leave a Reply

Your email address will not be published. Required fields are marked *