SSD1306 Cat Eyes GIF

Greetings and welcome back!

For those of you who are experiencing issues with the animation on the SSD1306 OLED display, here is a short tutorial.

Two SSD1306 OLED displays are showing a basic Cat Eye animation; the animation is a GIF that has been divided into smaller frames.

Here, the idea is to use a sequence of sequentially shown frames in the OLED display to provide the illusion of motion and make the image move.

Below are the materials used in this small setup.

• SSD1306 OLED Screens
• XIAO ESP32 MCU
• Jumper Wires
• Breadboard

The SSD1306 is a popular monochrome OLED (Organic Light-Emitting Diode) display controller chip. It is commonly used to drive small displays in various electronic projects, such as DIY electronics, Arduino-based projects, and other microcontroller applications. The SSD1306 supports a range of display sizes and resolutions, and it communicates with a microcontroller or other host device via I2C or SPI communication protocols.

Here are some key features and information about the SSD1306 display controller:

• Display Types: The SSD1306 is typically used with monochrome OLED displays, which means they can only display one color (usually white or blue) on a black background. These displays are known for their high contrast ratios and wide viewing angles.
• Communication Protocols:
• I2C (Inter-Integrated Circuit): This is the most common communication protocol used with the SSD1306. It requires only two wires (SDA for data and SCL for clock), making it simple to interface with microcontrollers.
• SPI (Serial Peripheral Interface): Some SSD1306 displays also support SPI for communication, which is another popular serial communication protocol.
• Resolution: The resolution of SSD1306 displays can vary, but common resolutions include 128x64 and 128x32 pixels.
• Interface: The SSD1306 communicates with a microcontroller or other host device through its I2C or SPI interface. This allows the host device to send commands and data to the display for rendering graphics and text.
• Voltage Requirements: The SSD1306 typically operates at low voltages, making it suitable for battery-powered applications. It often works in the range of 3.3V to 5V.
• Supported Fonts and Graphics: The SSD1306 supports a variety of fonts and graphics commands. This allows users to display text, numbers, and simple graphics on the OLED screen.
• Library Support: Several libraries are available for different microcontroller platforms (Arduino, Raspberry Pi, etc.) to simplify the process of interfacing with SSD1306 displays. These libraries provide functions to initialize the display, write text, draw shapes, and more.
• Applications: SSD1306 displays are commonly used in DIY electronics projects, wearables, IoT devices, and other applications where a small and lightweight display is required.

When working with an SSD1306 display, it's essential to refer to the datasheet and documentation specific to the display module you are using, as there may be variations and additional features depending on the manufacturer.

As for sourcing the OLED display, we got both displays from PCBWAY's Giftshop.

PCBWAY Gift Shop is an online marketplace where you can get a variety of electronics modules and boards for their genuine price, or you could use the PCBWAY currency, which is called beans.

You get beans after ordering something from PCBWAY as reward points, or you can also get them by posting any project in the PCBWAY community.

Additionally, PCBWAY is now running a Christmas campaign that offers a range of services, such as free coupons on orders for PCBs, PCBAs, 3D printing, CNC, and even free PCB service for designs with a Christmas theme.

https://www.pcbway.com/activity/christmas2023.html

Check PCBWAY out for great PCB service from here: https://www.pcbway.com/

We will be utilizing a basic black-and-white gif of a winking cat eye for this tutorial.

To put the gif inside the SSD1306 display, the gif size must be reduced. To do this, we utilize EZ GIF, an all-in-one image-gif editor.

• After uploading our gif file to EZ Gif, we first scale it to fit the 128x64-pixel SSD1306 display size.
• Next, we use the splitting feature of EZ GIF to separate gifs into images, and we export each image in JPEG format.

Sadly, we are unable to put the images straight into the MCU. Instead, we must first convert each image to a C file, upload the raw C code into the MCU, and the result will be displayed on the SSD1306 display.

To do this, we use this LCD image converter, which you can download and use.

https://sourceforge.net/projects/lcd-image-converter/files/

• We install the LCD Image Converter and then open the first image for conversion. ( make a folder for C files to keep things nice and clean.)
• Next, we go to file>Convert and save the C file in the created folder.
• We do the above two steps for all 16 images and generate the C files.

A GIF (Graphics Interchange Format) is a file format commonly used for animated images. Unlike videos, which consist of a sequence of frames played in rapid succession to create motion, GIFs are typically short, looping animations that convey a specific action.

Every image is converted to C code, which is then sequentially displayed on the SSD1306 Display to give an illusion of motion and produce a moving video.

Libraries

#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>

These lines include the necessary libraries for working with I2C communication (Wire), graphics (Adafruit_GFX), and the SSD1306 OLED display (Adafruit_SSD1306).

OLED Display Setup

#define SCREEN_WIDTH 128
#define SCREEN_HEIGHT 64

Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1);

Here, the display object is created using the Adafruit_SSD1306 class, specifying the screen dimensions and I2C communication parameters.

Animation Frames

const unsigned char Frame1 [512] PROGMEM = {};
const unsigned char Frame2 [512] PROGMEM = {};
// Frames 3 to 16
const unsigned char Frame16 [512] PROGMEM = {};

Empty arrays are defined to store 16 animation frames. It seems like the actual frame data is missing or not provided in the code.

Setup Function

void setup() {
  if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {
    Serial.println(F("SSD1306 allocation failed"));
    for(;;);
  }
}

In the setup function, the OLED display is initialized. If the initialization fails, the program prints an error message and enters an infinite loop.

Loop Function

void loop() {
  // Animation frames from Frame1 to Frame16
  // Each frame is displayed with a delay
  // The delay between frames decreases over time
  if (frame_delay > 100) frame_delay = frame_delay - 20;
}

The loop function displays each animation frame in sequence, with a specified delay (frame_delay) between frames. After each frame is displayed, the display is cleared, and the next frame is drawn. The frame delay is reduced over time.

The wiring for this configuration is rather straightforward: two SSD1306 displays are connected in parallel to the 5V, GND, SCL, and SCK pins of the XIAO ESP32 MCU.

• VCC to 5V
• GND to GND
• SDA to D4
• SCL to D5

Please note that we have connected both displays in parallel.

The end result of this straightforward but time-consuming process is this Cat Eye GIF, which is displayed on both SSD1306 Screens.

The XIAO ESP32 MCU's i2C pins are connected to both displays in parallel. Unfortunately, as we are using identical screens with the same i2C address, we are unable to run different images on the two screens that share the same i2C pins.

We must utilize a different address OLED screen or a different size OLED screen, which will allow us to declare two different screens in the code, in order to carry out different animation on one display and different animation on the other.

This is it for today folks, Leave a comment if this was helpful.

Special thanks to PCBWAY for supporting this project and providing both displays for this project.

You can reach them for a variety of services, ranging from 3D printing to PCB and PCB assembly.

Thanks for getting this far, and I will be back with a new project pretty soon. Peace.