Published January 8, 2025

How to Display Dynamic Emoji Bitmaps on the SSD1306

Unlock vibrant visuals on your SSD1306! Learn to display dynamic emoji bitmaps effortlessly and enhance your projects with style.

BeginnerProtip217

Things used in this project

Hardware components

Arduino UNO

Adafruit SSD1306

Jumper wires (generic)

SparkFun Breadboard Power Supply 5V/3.3V

Software apps and online services

PCBX Online Simulation

Story

In this tutorial, we'll walk through the process of displaying bitmap images on an SSD1306 OLED display using the PCBX online simulation environment. This tutorial will cover setting up the PCBX simulation, formatting bitmap data, configuring display size, and managing image delays.

Step 1: Setting Up PCBX Simulation

Visit PCBX: Go to the PCBX online simulator page.
Create a New Project: Start a new project by selecting New Project from the main menu.

Add Components:

Search for Arduino UNO and drag it onto the workspace.
Search for SSD1306 OLED Display (I2C) and add it to your workspace.

Connect the components:

Connect VCC of the SSD1306 to 5V of the Arduino.
Connect GND of the SSD1306 to GND of the Arduino.
Connect SDA of the SSD1306 to A4 (SDA) of the Arduino.
Connect SCL of the SSD1306 to A5 (SCL) of the Arduino.

Step 2: Install Required Libraries

In the PCBX simulation environment:

Open the Library Manager: Look for the library manager option in the PCBX IDE.

Search for Libraries: Install the following libraries if they are not already available:

Adafruit_GFX
Adafruit_SSD1306
Search for Libraries: Install the following libraries if they are not already available:Adafruit_GFX Adafruit_SSD1306

These libraries are essential to interact with the SSD1306 display for rendering graphics, including bitmaps.

Step 3: Define Bitmap Data

Next, you'll define the bitmap data that you want to display on the SSD1306. Ensure your bitmap data is formatted correctly, with each byte separated by commas and rows ending with semicolons.

Step 4: Simulate Your Project

Upload the Code: Click on the upload or compile button in the PCBX IDE to compile and upload your code to the simulated Arduino.
Run the Simulation: Start the simulation. You should see your bitmap images displayed on the SSD1306 OLED display, each for 2 seconds.

Simulate project online

Conclusion

You have successfully set up a PCBX online simulation to display bitmap images on an SSD1306 display with an Arduino sketch. Feel free to modify the bitmap data, add more images, and experiment with different delays for a customized display experience.

If you need further assistance or have any questions, feel free to ask!

Join the PCBX community to create your first project and get a $5 coupon.

https://www.pcbx.com/community?mtm_campaign=E&mtm_kwd=hack

https://www.pcbx.com/?mtm_campaign=E&mtm_kwd=BD

Code

Untitled file

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

#define SCREEN_WIDTH 128 // OLED display width, in pixels
#define SCREEN_HEIGHT 64 // OLED display height, in pixels
#define OLED_RESET -1 // Reset pin # (or -1 if sharing Arduino reset pin)

Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);

// Bitmap data for each image, each array represents one image
// Please fill your bitmap data into these arrays
const unsigned char bitmap_nono[] PROGMEM = { /* Bitmap data */0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x0E,0x00,0x06,0x00,0x00,0x00,0x00,0x00,0x1F,0x00,0x0F,0x80,0x00,0x00,
0x00,0x00,0x7F,0x00,0x0F,0xC0,0x00,0x00,0x00,0x00,0xFE,0x00,0x07,0xF0,0x00,0x00,
0x00,0x01,0xF8,0x00,0x01,0xF8,0x00,0x00,0x00,0x07,0xF0,0x00,0x00,0xFC,0x00,0x00,
0x00,0x0F,0xC0,0x00,0x00,0x7F,0x00,0x00,0x00,0x1F,0x80,0x00,0x00,0x1F,0x80,0x00,
0x00,0x1E,0x00,0x00,0x00,0x0F,0x80,0x00,0x00,0x0C,0x00,0x00,0x00,0x03,0x00,0x00,
0x00,0x00,0x1C,0x00,0x07,0x80,0x00,0x00,0x00,0x00,0x1C,0x00,0x07,0x80,0x00,0x00,
0x00,0x00,0x1C,0x00,0x07,0x80,0x00,0x00,0x00,0x00,0x1C,0x00,0x07,0x80,0x00,0x00,
0x00,0x00,0x1C,0x00,0x07,0x80,0x00,0x00,0x06,0x00,0x1C,0x00,0x07,0x80,0x0C,0x00,
0x07,0xC0,0x1C,0x00,0x07,0x80,0x3E,0x00,0x07,0xF0,0x00,0x00,0x00,0x01,0xFE,0x00,
0x07,0xFE,0x00,0x00,0x00,0x07,0xFE,0x00,0x01,0xFF,0xFF,0xFF,0xFF,0xFF,0xF0,0x00,
0x00,0x3F,0xFF,0xFF,0xFF,0xFF,0xC0,0x00,0x00,0x07,0xFF,0xFF,0xFF,0xFE,0x00,0x00,
0x00,0x03,0xC0,0x00,0x00,0x3C,0x00,0x00,0x00,0x03,0x80,0x00,0x00,0x3C,0x00,0x00,
0x00,0x03,0x80,0x00,0x00,0x3C,0x00,0x00,0x00,0x03,0x80,0x00,0x00,0x3C,0x00,0x00,
0x00,0x03,0x80,0x00,0x00,0x3C,0x00,0x00,0x00,0x03,0x80,0x00,0x00,0x3C,0x00,0x00,
0x00,0x03,0x80,0x00,0x00,0x3C,0x00,0x00,0x00,0x03,0x80,0x00,0x00,0x3C,0x00,0x00,
0x00,0x03,0x80,0x00,0x00,0x3C,0x00,0x00,0x00,0x03,0x80,0x00,0x00,0x3C,0x00,0x00,
0x00,0x03,0x80,0x00,0x00,0x3C,0x00,0x00,0x00,0x03,0x80,0x00,0x00,0x3C,0x00,0x00,
0x00,0x03,0x80,0x00,0x00,0x3C,0x00,0x00,0x00,0x03,0x80,0x00,0x00,0x3C,0x00,0x00,
0x00,0x03,0x80,0x00,0x00,0x3C,0x00,0x00,0x00,0x03,0x80,0x00,0x00,0x3C,0x00,0x00,
0x00,0x03,0xFF,0xFF,0xFF,0xFC,0x00,0x00,0x00,0x0F,0xFF,0xFF,0xFF,0xFF,0x00,0x00,
0x00,0x7F,0xFF,0xFF,0xFF,0xFF,0xE0,0x00,0x03,0xFF,0xFF,0xFF,0xFF,0xFF,0xF8,0x00,
0x0F,0xFC,0x00,0x00,0x00,0x07,0xFE,0x00,0x07,0xF0,0x00,0x00,0x00,0x00,0xFE,0x00,
0x07,0x80,0x00,0x00,0x00,0x00,0x1E,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x04,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
 };
const unsigned char bitmap_unhappy[] PROGMEM = { /* Bitmap data */
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x0F,0xFF,0x80,0x1F,0xFF,0x00,0x00,
0x00,0x1F,0xFF,0x80,0x1F,0xFF,0x00,0x00,0x00,0x1F,0xFF,0x80,0x1F,0xFF,0x00,0x00,
0x00,0x00,0x0E,0x00,0x00,0x1E,0x00,0x00,0x00,0x00,0x0E,0x00,0x00,0x1C,0x00,0x00,
0x00,0x00,0x0E,0x00,0x00,0x1C,0x00,0x00,0x00,0x00,0x0E,0x00,0x00,0x1C,0x00,0x00,
0x00,0x00,0x0E,0x00,0x00,0x1C,0x00,0x00,0x00,0x00,0x0E,0x00,0x00,0x1C,0x00,0x00,
0x00,0x00,0x0E,0x00,0x00,0x1E,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x1F,0xFF,0xFF,0x80,0x00,0x00,
0x00,0x00,0x1F,0xFF,0xFF,0x80,0x00,0x00,0x00,0x00,0x1F,0xFF,0xFF,0x80,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
 };
const unsigned char bitmap_angry_demon[] PROGMEM = { /* Bitmap data */0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x3F,0xC0,0x00,0x00,0x00,0x00,0x00,0x01,0xFF,0xF8,0x00,0x00,0x00,
0x00,0x00,0x07,0xFF,0xFE,0x00,0x00,0x00,0x00,0x00,0x1F,0xFF,0xFF,0x80,0x00,0x00,
0x00,0x00,0x3F,0xFF,0xFF,0xC0,0x00,0x00,0x00,0x00,0x7F,0xFF,0xFF,0xE0,0x00,0x00,
0x00,0x00,0xFF,0xFF,0xFF,0xF0,0x00,0x00,0x00,0x01,0xFF,0xFF,0xFF,0xF8,0x00,0x00,
0x00,0x03,0xFF,0xFF,0xFF,0xFC,0x00,0x00,0x00,0x03,0xFF,0xFF,0xFF,0xFC,0x00,0x00,
0x00,0x07,0xFF,0xFF,0xFF,0xFE,0x00,0x00,0x00,0x07,0xE0,0x1F,0x80,0x7E,0x00,0x00,
0x00,0x0F,0x80,0x06,0x00,0x1F,0x00,0x00,0x00,0x0F,0x00,0x00,0x00,0x0F,0x00,0x00,
0x00,0x0E,0x00,0x00,0x00,0x07,0x00,0x00,0x00,0x0C,0x00,0x00,0x00,0x03,0x00,0x00,
0x00,0x1C,0x00,0x00,0x00,0x03,0x80,0x00,0x00,0x1C,0x00,0x00,0x00,0x03,0x80,0x00,
0x00,0x7C,0x00,0x00,0x00,0x03,0xE0,0x00,0x00,0xFC,0x00,0x00,0x00,0x03,0xF0,0x00,
0x01,0xE0,0x0C,0x00,0x03,0x00,0x78,0x00,0x03,0xC0,0x1C,0x00,0x03,0x00,0x3C,0x00,
0x03,0x80,0x0C,0x00,0x03,0x00,0x1C,0x00,0x03,0x80,0x00,0x00,0x00,0x00,0x1C,0x00,
0x03,0x80,0x00,0x00,0x00,0x00,0x1C,0x00,0x03,0x80,0x00,0x79,0xE0,0x00,0x1C,0x00,
0x03,0x80,0x00,0xFF,0xF0,0x00,0x1C,0x00,0x01,0xE0,0x01,0xFF,0xF8,0x00,0x78,0x00,
0x01,0xF8,0x03,0xC7,0xBC,0x01,0xF8,0x00,0x00,0xF8,0x07,0x83,0x9E,0x01,0xF0,0x00,
0x00,0x38,0x0F,0x01,0xCF,0x01,0xC0,0x00,0x00,0x00,0x1E,0x01,0xC7,0x80,0x00,0x00,
0x00,0x00,0x3C,0x01,0xC3,0xC0,0x00,0x00,0x00,0x00,0x78,0x03,0xC1,0xE0,0x00,0x00,
0x00,0x00,0xF0,0x07,0x80,0xF0,0x00,0x00,0x00,0x01,0xE0,0x0F,0x00,0x78,0x00,0x00,
0x00,0x03,0xC0,0x1F,0x80,0x3C,0x00,0x00,0x00,0x07,0x80,0x3F,0xC0,0x1E,0x00,0x00,
0x00,0x1F,0x00,0x79,0xE0,0x0F,0x80,0x00,0x00,0x0E,0x00,0xF0,0xF0,0x07,0x00,0x00,
0x00,0x04,0x01,0xE0,0x78,0x02,0x00,0x00,0x00,0x00,0x03,0xC0,0x3C,0x00,0x00,0x00,
0x00,0x00,0x07,0x80,0x1E,0x00,0x00,0x00,0x00,0x00,0x0F,0x00,0x0F,0x00,0x00,0x00,
0x00,0x00,0x1E,0x00,0x07,0x80,0x00,0x00,0x00,0x00,0x3C,0x00,0x03,0xC0,0x00,0x00,
0x00,0x00,0x18,0x00,0x01,0x80,0x00,0x00,0x00,0x00,0x08,0x00,0x01,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
 };
//const unsigned char bitmap_ogre[] PROGMEM = { /* Bitmap data */ };
//const unsigned char bitmap_cold[] PROGMEM = { /* Bitmap data */ };

void setup() {
  Serial.begin(9600);
  // Initialize OLED display
  if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) { // Address 0x3C for 128x64
    Serial.println(F("SSD1306 allocation failed"));
    while(true); // If initialization fails, enter an infinite loop
  }
  display.clearDisplay();
  display.display();
}

void loop() {
  displayBitmap(bitmap_nono, SCREEN_WIDTH, SCREEN_HEIGHT);
  delay(200);
  displayBitmap(bitmap_unhappy, SCREEN_WIDTH, SCREEN_HEIGHT);
  delay(200);
   //Uncomment the following lines to display additional images
   displayBitmap(bitmap_angry_demon, SCREEN_WIDTH, SCREEN_HEIGHT);
  delay(200);
  // displayBitmap(bitmap_ogre, SCREEN_WIDTH, SCREEN_HEIGHT);
  // delay(2000);
  // displayBitmap(bitmap_cold, SCREEN_WIDTH, SCREEN_HEIGHT);
  // delay(2000);
}

void displayBitmap(const unsigned char *bitmap, uint16_t w, uint16_t h) {
  uint8_t bytes = (w + 7) / 8 * h; // Calculate the number of bytes for the bitmap data
  display.clearDisplay();
  display.drawBitmap(0, 0, bitmap, w, h, SSD1306_WHITE);
  display.display();
}