ESP32 OLED Library Display Example

ESP32,

This tutorial demonstrate how to use 0.96″ small I2C based Display with ESP32 DevKit using only two IO lines. Interfacing of large 16×2 LCD is difficult with ESP32, as it requires 6 IO Lines. This is shown in this post How to Interface 16×2 LCD with NodeMCU ESP8266 with only three wires?

Components Required

  1. OLED Display 0.96″ Four Wire I2C Type Display
  2. DevKit ESP32
  3. Connecting Wires
  4. USB Cable and Laptop

OLED Display 0.96″

Datasheet SD1306 OLED Display

This is a 0.96 inch blue/white OLED display module can be interfaced with any microcontroller using SPI/IIC protocols. It is having a resolution of 128×64.

OLED (Organic Light-Emitting Diode) is a self light-emitting technology composed of a thin, multi-layered organic film placed between an anode and cathode. In contrast to LCD technology, OLED does not require a backlight. OLED possesses high application potential for virtually all types of displays and is regarded as the ultimate technology for the next generation of flat-panel displays.

OLEDs basic structure consists of organic materials positioned between the cathode and the anode, which is composed of electric conductive transparent Indium Tin Oxide (ITO). The organic materials compose a multi-layered thin film, which includes the Hole Transporting Layer (HTL), Emission Layer (EML) and the Electron Transporting Layer (ETL). By applying the appropriate electric voltage, holes and electrons are injected into the EML from the anode and the cathode, respectively. The holes and electrons combine inside the EML to form excitons, after which electro luminescence occurs. The transfer material, emission layer material and choice of electrode are the key factors that determine the quality of OLED components.

Setting up OLED Display I2C Connection with ESP32

Make connections as shown, Connect VDD to 3.3V, GND to GND, D19 to SCK and D18 to SDA.

ESP32 OLED Library

Features:

  • OLED Driver IC: SSD1306
  • Resolution: 128 x 64
  • Visual Angle: >160°
  • Input Voltage: 3.3V ~ 6V
  • Compatible I/O Level: 3.3V, 5V
  • Mini Size: 2.7 x 2.8cm
  • Only Need 2 I/O Port to Control
  • Pixel Color: Blue
  • Full Compatible with Arduino
  • Working temperature: -30°C ~ 70°C
  • Module volume ( generous ): 27.0 x 27.0 x 4.1mm
  • Factory configured for SPI protocol (can be easily changed to IIC)

Installing Required Libraries for OLED Display

To install OLED display Library for ESP8266 goto Sketch>Include Library>Manage Libraries and search for SD1306 that’s the display. Click on install as shown below.

ESP32 DevKit OLED Display Code Arduino IDE

Note that it uses same labeling of IO pins used on ESP32.

/*
 * https://circuits4you.com
 * ESP32 DevKit OLED Display Code Example
 * 
 */

#include <ESP8266WiFi.h>
#include <Wire.h>  // Only needed for Arduino 1.6.5 and earlier
#include "SSD1306Wire.h" // legacy include: `#include "SSD1306.h"`


// Initialize the OLED display using Wire library
SSD1306Wire  display(0x3c, 18, 19);  //18=SDK  19=SCK  As per labeling on ESP32 DevKit

//=======================================================================
//                    Power on setup
//=======================================================================

void setup() {
  delay(1000);
  Serial.begin(115200);  
  Serial.println("");
  
  Serial.println("Initializing OLED Display");
  display.init();

  display.flipScreenVertically();
  display.setFont(ArialMT_Plain_10);
}

//=======================================================================
//                    Main Program Loop
//=======================================================================
void loop() {
  drawFontFaceDemo();
  delay(1000);
  drawRectDemo();
  delay(1000);
  void drawCircleDemo();
  delay(1000);
}
//=========================================================================


void drawFontFaceDemo() {
  // clear the display
  display.clear();
    // Font Demo1
    // create more fonts at http://oleddisplay.squix.ch/
    display.setTextAlignment(TEXT_ALIGN_LEFT);
    display.setFont(ArialMT_Plain_10);
    display.drawString(0, 0, "Hello world");
    display.setFont(ArialMT_Plain_16);
    display.drawString(0, 10, "Hello world");
    display.setFont(ArialMT_Plain_24);
    display.drawString(0, 26, "Hello world");
  // write the buffer to the display
  display.display();
}

void drawRectDemo() {
  // clear the display
  display.clear();
      // Draw a pixel at given position
    for (int i = 0; i < 10; i++) {
      display.setPixel(i, i);
      display.setPixel(10 - i, i);
    }
    display.drawRect(12, 12, 20, 20);

    // Fill the rectangle
    display.fillRect(14, 14, 17, 17);

    // Draw a line horizontally
    display.drawHorizontalLine(0, 40, 20);

    // Draw a line horizontally
    display.drawVerticalLine(40, 0, 20);
   // write the buffer to the display
  display.display();
}

void drawCircleDemo() {
  // clear the display
  display.clear();
  
  for (int i=1; i < 8; i++) {
    display.setColor(WHITE);
    display.drawCircle(32, 32, i*3);
    if (i % 2 == 0) {
      display.setColor(BLACK);
    }
    display.fillCircle(96, 32, 32 - i* 3);
  }

  // write the buffer to the display
  display.display();
}

After uploading display will show Hello World and some square and circles. If you see compilation errors check that you have installed proper library required for OLED Display.

Leave a Reply