OLED on an Uno
A 128x64 SSD1306 over bit-banged I2C: titles, shapes, a bouncing ball and a counter. The whole build, an Arduino Uno and 1 more part, runs here in your browser on the firmware below; open it in the editor to change the wiring or the code and run it again.
Teaching? Assign it to your class in one click.
Intermediate About 20 minutes to build and run. Runs in your browser. Free, and no account needed.
The parts retail for about $36. On Mokxi they're free.
Step by step, with the wiring and the common mistakes: Arduino OLED Display (SSD1306) Tutorial
What you'll learn
- Driving an SSD1306 OLED over I2C
- Why a pixel display needs a frame buffer
- Drawing text and shapes
- Animating a bouncing ball
- Sending only the changed screen blocks
- Difficulty: Intermediate
- Time: About 20 minutes
- Board: Arduino Uno R3
- Parts: 3
How it works
The Uno draws on a 128x64 SSD1306 OLED using two pins, A4 for SDA and A5 for SCL. The simulator's chip has no hardware I2C, so a small library toggles the pins itself. The screen shows MOKXI in big letters, a bordered arena with a bouncing ball, a sliding bar, a counter and a filling bar.
The still parts are drawn once into a 1 KB buffer. After that, only the moving parts change, and the library sends just the blocks that changed. That keeps the frames fast.
Parts list
3 parts, plus the jumper wires. They retail for about $36; on Mokxi they're free.
- 1 × Arduino Uno R3In Starter Kit, Claw Machine Kit, Vending Machine Kit.
- 1 × Full-size breadboard
- 1 × OLED display, 128x64In Fight Stick Kit, Pocket Pet Kit, Slot Machine Kit.
Kits that can build it
This starter kit has every part in the circuit. Each kit's page lists what else it can build.
Wiring table
Every connection, pin by pin, read from the circuit itself. Each row joins the pin on the left to the pin on the right, by a jumper wire or a breadboard strip.
| Part and pin | Connects to |
|---|---|
| OLED display, 128x64 pin VCC | Arduino Uno R3 pin 5V |
| OLED display, 128x64 pin GND | Arduino Uno R3 pin GND |
| OLED display, 128x64 pin SDA | Arduino Uno R3 pin A4 |
| OLED display, 128x64 pin SCL | Arduino Uno R3 pin A5 |
The code
The firmware exactly as the editor opens it. Change a line there and press Run: it compiles in the browser.
// OLED: text and shapes on a 128x64 SSD1306, over bit-banged I2C.
//
// Wiring, module to board:
// SCL -> A5 SDA -> A4 VCC -> 5 V GND -> GND
//
// Those are the Uno's I2C pins, but nothing here uses the TWI peripheral: the
// Mokxi ATmega328P model does not have one (docs/uno.md section 3), so
// mokxi_i2c.h pulls the two lines down and lets them go, and the module's own
// 4k7 pull-ups bring them back up. Any two pins would do.
//
// # The 1 KB
//
// A 128x64 monochrome frame is 1024 bytes, and the panel cannot be read back,
// so a driver that wants to change one pixel has to remember the other 1023.
// That is half of this part's SRAM. It is what a pixel display costs on an
// ATmega328P, and it is why the screen furniture below is drawn once into that
// buffer and only the ball, the counter and the bar are touched again.
//
// Each display() sends only the eight-column blocks of each page that actually
// changed. A moving ball is a few dozen bytes rather than a kilobyte, which is
// the difference between twenty-five frames a second and two: this board's
// software I2C manages about 32 kbit/s, so a full 1 KB refresh would take a
// third of a second.
#include "mokxi_i2c.h"
#include "mokxi_ssd1306.h"
const uint8_t SCL_PIN = A5;
const uint8_t SDA_PIN = A4;
// 400 kHz nominal. On this board the pin work dominates and it lands near
// 100 kHz, which is still twice what the 5 us standard-mode delays give.
SoftI2c bus(SCL_PIN, SDA_PIN, 400);
Ssd1306 oled(bus, SSD1306_ADDRESS);
// The arena the ball bounces in, and the ball.
const int16_t AX = 2;
const int16_t AY = 21;
const int16_t AW = 60;
const int16_t AH = 41;
const int16_t R = 4;
int16_t bx = AX + R + 6;
int16_t by = AY + R + 4;
int16_t bdx = 2;
int16_t bdy = 1;
uint16_t ticks = 0;
const int FRAME_MS = 40;
// Everything that never moves, drawn once into the buffer.
static void furniture() {
oled.clear();
oled.text(3, 2, "MOKXI", 2);
oled.text(100, 8, "UNO", 1);
oled.hLine(0, 18, 128);
oled.rect(AX - 1, AY - 1, AW + 2, AH + 2);
oled.rect(68, 22, 24, 16);
oled.circle(110, 30, 7);
oled.rect(106, 44, 20, 16);
}
void setup() {
Serial.begin(115200);
Serial.println("Mokxi Uno: SSD1306 over bit-banged I2C");
bus.begin();
if (!oled.begin()) {
Serial.println("no OLED answered 0x3C; check SCL, SDA and power");
return;
}
furniture();
oled.display();
}
void loop() {
oled.fillCircle(bx, by, R, false);
bx = (int16_t)(bx + bdx);
by = (int16_t)(by + bdy);
if (bx - R <= AX) {
bx = (int16_t)(AX + R);
bdx = (int16_t)-bdx;
} else if (bx + R >= AX + AW - 1) {
bx = (int16_t)(AX + AW - 1 - R);
bdx = (int16_t)-bdx;
}
if (by - R <= AY) {
by = (int16_t)(AY + R);
bdy = (int16_t)-bdy;
} else if (by + R >= AY + AH - 1) {
by = (int16_t)(AY + AH - 1 - R);
bdy = (int16_t)-bdy;
}
oled.fillCircle(bx, by, R, true);
// The counter and the bar move a good deal more picture than the ball does,
// so they tick at a sixth of the frame rate and the lozenge at a third. The
// driver only sends the eight-column blocks that changed, and a frame where
// only the ball moved is a few dozen bytes on the bus instead of four hundred.
ticks++;
if (ticks % 6u == 0u) {
oled.number(68, 44, (long)((ticks / 6u) % 1000u), 2, true, true);
int16_t fill = (int16_t)(1 + ((ticks / 6u) % 16u));
oled.fillRect(108, 46, 16, 12, false);
oled.fillRect(108, 46, fill, 12, true);
}
if (ticks % 3u == 0u) {
// The lozenge in the top box slides, so the shapes panel is not quite still.
oled.fillRect(70, 24, 20, 12, false);
oled.fillRect((int16_t)(70 + ((ticks / 3u) % 14u)), 24, 6, 12, true);
}
oled.display();
delay(FRAME_MS);
}
Code walkthrough
The key functions of the sketch, and what each one does.
furniture sketch.ino
Draws everything that never moves into the buffer: the title, the divider line, the ball arena and the outlines of the shapes. It runs once, and the moving parts are drawn over it later.
// Everything that never moves, drawn once into the buffer.
static void furniture() {
oled.clear();
oled.text(3, 2, "MOKXI", 2);
oled.text(100, 8, "UNO", 1);
oled.hLine(0, 18, 128);
oled.rect(AX - 1, AY - 1, AW + 2, AH + 2);
oled.rect(68, 22, 24, 16);
oled.circle(110, 30, 7);
oled.rect(106, 44, 20, 16);
}setup sketch.ino
Starts the serial port and the I2C bus, then tries to start the OLED. If it does not answer at its address, it prints a hint to check SCL, SDA and power. Otherwise it draws furniture and sends the first frame.
void setup() {
Serial.begin(115200);
Serial.println("Mokxi Uno: SSD1306 over bit-banged I2C");
bus.begin();
if (!oled.begin()) {
Serial.println("no OLED answered 0x3C; check SCL, SDA and power");
return;
}
furniture();
oled.display();
}loop sketch.ino
Erases the ball, moves it, bounces it off the arena walls, and draws it again. The counter, bar and sliding block update less often. Each frame ends with display and a 40 ms pause.
void loop() {
oled.fillCircle(bx, by, R, false);
bx = (int16_t)(bx + bdx);
by = (int16_t)(by + bdy);
if (bx - R <= AX) {
bx = (int16_t)(AX + R);
bdx = (int16_t)-bdx;
} else if (bx + R >= AX + AW - 1) {
bx = (int16_t)(AX + AW - 1 - R);
bdx = (int16_t)-bdx;
}
if (by - R <= AY) {
by = (int16_t)(AY + R);
bdy = (int16_t)-bdy;
} else if (by + R >= AY + AH - 1) {
by = (int16_t)(AY + AH - 1 - R);
bdy = (int16_t)-bdy;
}
oled.fillCircle(bx, by, R, true);
// The counter and the bar move a good deal more picture than the ball does,
// so they tick at a sixth of the frame rate and the lozenge at a third. The
// driver only sends the eight-column blocks that changed, and a frame where
// only the ball moved is a few dozen bytes on the bus instead of four hundred.
ticks++;
if (ticks % 6u == 0u) {
oled.number(68, 44, (long)((ticks / 6u) % 1000u), 2, true, true);
// ... 13 more lines in the editorTroubleshooting
The usual mistakes with this circuit, and the fix for each.
- The screen stays blank. This project
Check SDA on A4, SCL on A5, 5 V and GND. The serial monitor will say if the OLED did not answer. - SDA and SCL are swapped. This project
The sketch definesSCL_PINas A5 andSDA_PINas A4. Match your wires to those. - The OLED stays blank. OLED display
Check SDA and SCL are not swapped, and power it with 3.3 V or 5 V as its board allows. Most use address 0x3C, some 0x3D. Call display.begin() with the matching address. - Text never shows up even though the code runs. OLED display
Drawing only writes to a buffer. Call display.display() after drawing to push it out. Also set a text color with setTextColor(WHITE) and clear the buffer between frames. - Upload fails or nothing runs after wiring pins 0 and 1 to a module. Arduino Uno R3
Pins 0 and 1 are the USB serial port. Move the module to other pins, or unplug it while uploading. Also check the right board is selected. - Pins misbehave or the board resets when you power motors or servos from it. Arduino Uno R3
Each I/O pin gives about 20 mA, 40 mA max. Power motors and servos from their own supply and join its ground to the Uno's GND.
Change it and keep it
Open it in the editor, change the circuit or the code, and keep your version in a free account.