OLED Display Graphics with Arduino Uno – SSD1306 128×64 Complete Guide | MakeMindz

📺 Advanced Display Project

OLED Display Graphics
SSD1306 128×64 with Arduino

Complete step-by-step guide to interface an SSD1306 OLED display with Arduino Uno using I2C — text, shapes, animations and graphics patterns in Wokwi simulator.

⚡ I2C Protocol 🖥️ 128×64 px 🧰 Wokwi Simulator ⏱️ ~25 mins

01 — Overview

What is This Project?

This project demonstrates how to interface an SSD1306 OLED display (128×64 pixels) with an Arduino Uno microcontroller using the I2C communication protocol. You will learn to display text, shapes, animations and graphics patterns on the OLED screen — all without any physical hardware using the Wokwi online simulator.

What Will You Learn?

I2C communication with Arduino
OLED display programming techniques
Text displays with multiple sizes
Drawing geometric shapes
Implementing animations (bouncing ball)
Creating scrolling text effects
Generating graphics patterns
Adafruit GFX library usage

▶ Open Free Simulation

02 — Background

About OLED Displays

OLED (Organic Light-Emitting Diode) displays differ from LCDs — each pixel emits its own light, eliminating the need for a backlight. This results in several advantages:

🌑

True Black

Off pixels emit zero light — pure, perfect black.

⚡

Low Power

Only illuminated pixels consume power.

⚡️

Fast Response

No liquid crystal delay; instant pixel switching.

👁️

Wide Angles

Clear, readable from virtually any viewing angle.

SSD1306 Specifications

Specification	Value
Resolution	128 × 64 pixels
Display Type	Monochrome (White or Blue on Black)
Interface	I2C (Two-wire)
Operating Voltage	3.3V – 5V
I2C Address	0x3C or 0x3D
Screen Size	0.96 inch (typical)
Viewing Angle	>160°
Driver Chip	SSD1306

I2C Communication Protocol

I2C (Inter-Integrated Circuit) uses only two wires — SDA (Serial Data) and SCL (Serial Clock). It supports multiple devices on the same bus, each with a unique address, and operates at up to 400 kHz in Fast Mode.

💡

Why I2C? Only 2 wires needed (saves Arduino pins), multiple devices can share the same bus, each device has a unique address, and speeds up to 400 kHz are supported.

03 — Hardware

Components Required

🤖

Arduino Uno × 1

ATmega328P, 5V, 16 MHz, 32KB Flash, 14 digital pins.

🖥️

SSD1306 OLED × 1

128×64 px, I2C, 0.96" monochrome display module.

🔌

Jumper Wires × 4

Red, Black, Green, Blue for VCC, GND, SCL, SDA.

04 — Pinout

Pin Layout

Arduino Uno — Key I2C Pins

Pin Name	Pin Number	Purpose	Connect To
5V	Power Rail	Provides 5V power	OLED VCC
GND	Ground Rail	Common ground	OLED GND
A4	Analog Pin 4	I2C SDA (Data)	OLED SDA
A5	Analog Pin 5	I2C SCL (Clock)	OLED SCL

⚠️

Important: On Arduino Uno, A4 is hardwired to SDA and A5 is hardwired to SCL. You cannot use other pins for hardware I2C. The Wire library uses these pins automatically.

OLED Display — 4-Pin I2C Layout

Pin	Name	Function	Voltage
1	GND	Ground	0V
2	VCC	Power Supply	3.3V – 5V
3	SCL	I2C Clock	Digital Signal
4	SDA	I2C Data	Digital Signal

05 — Wiring

Circuit Connections

OLED Pin	Wire Color	Arduino Pin	Description
VCC	Red	5V	Power supply (positive)
GND	Black	GND	Ground (negative)
SCL	Green	A5	I2C Clock line
SDA	Blue	A4	I2C Data line

     OLED Display              Arduino Uno
    ┌────────────┐           ┌────────────┐
    │    GND      │────────────│    GND     │
    │    VCC      │────────────│     5V     │
    │    SCL      │────────────│     A5     │
    │    SDA      │────────────│     A4     │
    └────────────┘           └────────────┘

06 — Simulator

Setting Up Wokwi

Wokwi is a free online Arduino simulator. No physical hardware needed — build circuits, write code, and see real-time simulation in your browser.

Create Account

Go to wokwi.com, sign in or register (free), then click New Project → Arduino Uno.

~2 min

Load diagram.json

Click the diagram.json tab, select all, delete, paste the JSON below. Circuit appears automatically.

~3 min

Load Arduino Code

Click sketch.ino, select all, delete, paste the provided code.

~3 min

Add Libraries

Create libraries.txt, add Adafruit SSD1306 and Adafruit GFX Library.

~2 min

Run Simulation

Click the green ▶ Start Simulation button. Watch the demo cycle through all 5 modes.

~2 min

07 — diagram.json

Wokwi diagram.json

Copy the entire block below and paste it into the diagram.json tab in Wokwi to automatically wire the Arduino Uno to the SSD1306 OLED display.

diagram.json

{
  "version": 1,
  "author": "Arduino OLED Graphics Demo",
  "editor": "wokwi",
  "parts": [
    {
      "type": "wokwi-arduino-uno",
      "id": "uno",
      "top": 0,
      "left": 0,
      "attrs": {}
    },
    {
      "type": "wokwi-ssd1306",
      "id": "oled1",
      "top": -120,
      "left": 100,
      "attrs": {
        "i2cAddress": "0x3C"
      }
    }
  ],
  "connections": [
    ["oled1:GND", "uno:GND.1", "black", ["v0"]],
    ["oled1:VCC", "uno:5V",   "red",   ["v0"]],
    ["oled1:SCL", "uno:A5",   "green", ["v0"]],
    ["oled1:SDA", "uno:A4",   "blue",  ["v0"]]
  ],
  "dependencies": {}
}

08 — Arduino Code

Full Arduino Sketch

Paste the following into sketch.ino. The sketch cycles through 5 demo modes: text display, shapes, animation, scrolling text, and graphics patterns.

oled_display_project.ino

/*
 * OLED Display Graphics (SSD1306 128x64) with Arduino Uno
 * Demonstrates: text, shapes, animation, scrolling, patterns
 */

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

// OLED display dimensions
#define SCREEN_WIDTH  128
#define SCREEN_HEIGHT 64
#define OLED_RESET    -1   // -1 = share Arduino reset pin
#define SCREEN_ADDRESS 0x3C

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

void setup() {
  Serial.begin(9600);
  if(!display.begin(SSD1306_SWITCHCAPVCC, SCREEN_ADDRESS)) {
    Serial.println(F("SSD1306 allocation failed"));
    for(;;); // halt
  }
  display.clearDisplay();
  display.display();
  delay(1000);
  Serial.println(F("OLED Display Initialized!"));
}

void loop() {
  displayTextDemo();      delay(2000);
  displayShapesDemo();    delay(2000);
  displayAnimationDemo(); delay(2000);
  displayScrollingText(); delay(2000);
  displayGraphicsPattern();
}

// ── Demo 1: Text at multiple sizes ──
void displayTextDemo() {
  display.clearDisplay();
  display.setTextColor(SSD1306_WHITE);

  display.setTextSize(1);
  display.setCursor(0, 0);
  display.println(F("Text Display Demo"));
  display.drawLine(0, 10, SCREEN_WIDTH, 10, SSD1306_WHITE);

  display.setTextSize(1); display.setCursor(0, 15);
  display.println(F("Size 1 Text"));

  display.setTextSize(2); display.setCursor(0, 28);
  display.println(F("Size 2"));

  display.setTextSize(3); display.setCursor(0, 45);
  display.println(F("Big"));
  display.display();
}

// ── Demo 2: Geometric shapes ──
void displayShapesDemo() {
  display.clearDisplay();
  display.setTextSize(1); display.setTextColor(SSD1306_WHITE);
  display.setCursor(0, 0);
  display.println(F("Shapes Demo"));
  display.drawLine(0, 10, SCREEN_WIDTH, 10, SSD1306_WHITE);

  display.drawRect(5, 15, 30, 20, SSD1306_WHITE);   // outline rect
  display.fillRect(40, 15, 30, 20, SSD1306_WHITE);   // filled rect
  display.drawCircle(85, 25, 10, SSD1306_WHITE);      // outline circle
  display.fillCircle(110, 25, 10, SSD1306_WHITE);     // filled circle
  display.drawTriangle(10,55, 25,40, 40,55, SSD1306_WHITE);
  display.fillTriangle(50,55, 65,40, 80,55, SSD1306_WHITE);
  display.drawLine(90,40, 120,55, SSD1306_WHITE);
  display.drawLine(120,40, 90,55, SSD1306_WHITE);
  display.display();
}

// ── Demo 3: Bouncing ball animation ──
void displayAnimationDemo() {
  int x=64, y=32, dx=2, dy=2, radius=5;
  for(int i=0; i<100; i++) {
    display.clearDisplay();
    display.setTextSize(1); display.setCursor(0,0);
    display.println(F("Animation Demo"));
    display.drawLine(0,10,SCREEN_WIDTH,10,SSD1306_WHITE);
    display.fillCircle(x, y, radius, SSD1306_WHITE);
    x += dx; y += dy;
    if(x+radius >= SCREEN_WIDTH || x-radius <= 0) dx = -dx;
    if(y+radius >= SCREEN_HEIGHT || y-radius <= 12) dy = -dy;
    display.display();
    delay(30);
  }
}

// ── Demo 4: Scrolling text ──
void displayScrollingText() {
  display.clearDisplay();
  display.setTextSize(2); display.setTextColor(SSD1306_WHITE);
  for(int x=SCREEN_WIDTH; x>-200; x-=2) {
    display.clearDisplay();
    display.setCursor(x, 25);
    display.println(F("Scrolling!"));
    display.display();
    delay(20);
  }
}

// ── Demo 5: Grid + concentric circles ──
void displayGraphicsPattern() {
  display.clearDisplay();
  display.setTextSize(1); display.setCursor(0,0);
  display.println(F("Pattern Demo"));
  display.drawLine(0,10,SCREEN_WIDTH,10,SSD1306_WHITE);

  for(int i=0; i<SCREEN_WIDTH; i+=10)
    display.drawLine(i,12,i,SCREEN_HEIGHT,SSD1306_WHITE);
  for(int i=12; i<SCREEN_HEIGHT; i+=10)
    display.drawLine(0,i,SCREEN_WIDTH,i,SSD1306_WHITE);
  display.display(); delay(1500);

  display.clearDisplay();
  display.setTextSize(1); display.setCursor(0,0);
  display.println(F("Circles"));
  display.drawLine(0,10,SCREEN_WIDTH,10,SSD1306_WHITE);
  for(int r=5; r<30; r+=5)
    display.drawCircle(64,36,r,SSD1306_WHITE);
  display.display();
}

09 — Implementation

Step-by-Step Implementation

Phase 1 — Environment Setup (~5 min)

Open your browser and go to wokwi.com
Sign in or create a free account
Click New Project → Arduino Uno
Verify the workspace opens with default Arduino code

Phase 2 — Circuit Construction (~10 min)

Click the diagram.json tab
Select all content (Ctrl+A) and delete it
Paste the diagram.json from Section 7 above
The circuit with all wires appears automatically

Phase 3 — Library Installation (~3 min)

Click the + button next to file tabs
Select libraries.txt
Add two lines: Adafruit SSD1306 and Adafruit GFX Library
Save the file

Phase 4 — Code Implementation (~5 min)

Click the sketch.ino tab
Select all default code and delete it
Paste the Arduino code from Section 8 above
Save your project with a descriptive name

Phase 5 — Testing & Validation (~7 min)

Click the green ▶ Start Simulation button
Watch the OLED initialize (blank screen clears)
Open Serial Monitor — should show "OLED Display Initialized!"
Observe all 5 demo modes cycling through

10 — Testing

Demo Modes & Testing

🔤

Text Demo

3 font sizes, line separator

🔷

Shapes Demo

Rects, circles, triangles

⚽

Animation

Bouncing ball, 100 frames

📜

Scrolling Text

Smooth left-to-right scroll

⊙

Grid + Circles

Grid pattern & concentric rings

✅

Expected outcome: All 5 demos cycle in order, repeating continuously. Serial Monitor shows "OLED Display Initialized!" within 2 seconds of starting. Text is sharp, shapes have clean edges, animation runs at ~33 fps.

11 — More Projects

OLED Display Graphics (SSD1306 128×64) using arduino uno project with step by step instructions in wowki

OLED Display GraphicsSSD1306 128×64 with Arduino

What is This Project?

What Will You Learn?

About OLED Displays

True Black

Low Power

Fast Response

Wide Angles

SSD1306 Specifications

I2C Communication Protocol

Components Required

Arduino Uno × 1

SSD1306 OLED × 1

Jumper Wires × 4

Pin Layout

Arduino Uno — Key I2C Pins

OLED Display — 4-Pin I2C Layout

Circuit Connections

Setting Up Wokwi

Create Account

Load diagram.json

Load Arduino Code

Add Libraries

Run Simulation

Wokwi diagram.json

Full Arduino Sketch

Step-by-Step Implementation

Phase 1 — Environment Setup (~5 min)

Phase 2 — Circuit Construction (~10 min)

Phase 3 — Library Installation (~3 min)

Phase 4 — Code Implementation (~5 min)

Phase 5 — Testing & Validation (~7 min)

Demo Modes & Testing

Text Demo

Shapes Demo

Animation

Scrolling Text

Grid + Circles

Related Arduino Projects

🟢 Beginner — Foundation & Basics

🟡 Intermediate — Displays & Sensors

🔴 Advanced — Motors, Security & IoT

Comments

Post a Comment

try for free

Best 15 IoT Projects Using ESP32 for Beginners & Advanced Makers in 2026

BEST 25 ARDUINO WOKWI SIMULATOR PROJECTS

Top 20 Raspberry Pi Projects for Beginners - Complete Guide 2026

Intermediate Projects (Build Your Skills)

Advanced Projects (Master Level)

OLED Display Graphics
SSD1306 128×64 with Arduino