External Display on ESP32: Representing GIF on OLED

LED vs OLED, source: LG
Magnificent GIF by instagram.com/dami_lee
OLED Display
diagram(left), real life circuit(right)

A. EXAMPLE CODE

B. DRAWING SHAPES

display.drawRect(40, 20, 40, 40, WHITE);
display.fillRect(40, 20, 40, 40, WHITE);
display.drawCircle(64 ,32 ,15 ,WHITE);
square(left), filled square(mid), circle(right)

C. REPRESENTING GIF

  • Change the canvas size from 720x360 to 128x64
  • Invert image color (optional, the background would be dark if performed)
  • Change the scaling to “scale to fit, keep proportion”
  • Change output format to “Arduino code”
  • You can also change the identifier to the name you desired for the array
setting(left), code generated(right)
#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);const unsigned char bd1 [] PROGMEM;
const unsigned char bd2 [] PROGMEM;
const unsigned char bd3 [] PROGMEM;
const unsigned char bd4 [] PROGMEM;
const unsigned char bd5 [] PROGMEM;
void setup() {
Serial.begin(115200);

if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {
Serial.println(F("SSD1306 allocation failed"));
for(;;);
}
delay(2000); // Pause for 2 seconds
}
void loop() {
// Clear the buffer.
display.clearDisplay();

// Draw bitmap on the screen
display.drawBitmap(0, 0, bd1, 128, 64, 1);
display.display();
delay(500);
// Clear the buffer.
display.clearDisplay();

// Draw bitmap on the screen
display.drawBitmap(0, 0, bd2, 128, 64, 1);
display.display();
delay(500);
// Clear the buffer.
display.clearDisplay();

// Draw bitmap on the screen
display.drawBitmap(0, 0, bd3, 128, 64, 1);
display.display();
delay(500);

// Clear the buffer.
display.clearDisplay();

// Draw bitmap on the screen
display.drawBitmap(0, 0, bd4, 128, 64, 1);
display.display();
delay(500);
// Clear the buffer.
display.clearDisplay();

// Draw bitmap on the screen
display.drawBitmap(0, 0, bd5, 128, 64, 1);
display.display();
delay(500);

}

Analysis

  • We need to proof-read the codes we want to perform,In my first experiment I wanted to display something on OLED and it didn’t work because the code I ran the first time assumed that my microcontroller had a reset button so I needed to adjust the code first so that it worked as desired.
  • Do not forget to use clearDisplay procedure before and display procedure after every drawing argument. If you don’t type the clearDisplay before displaying something, both layers will be displayed on OLED which doesn’t match the plan and could confuse you. You need to type display.display(); after every drawing arguments so that the resulting image can be displayed on OLED.
  • The GIF experiment shows how videos are made from multiple images that are displayed and switched quickly. In order to get smoother GIF transitions we need more frames, and most videos now have a frame rate of 60fps, so much better than our experiment at the moment.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
I Wayan Ananta Wijaya Muji Suandira

I Wayan Ananta Wijaya Muji Suandira

I don't know what to write here haha but i'm living my life.