Menampilkan Gambar Bitmap pada OLED SSD1306 dengan Arduino

Layar OLED (Organic Light Emitting Diode) merupakan salah satu komponen tampilan yang semakin banyak digunakan dalam berbagai proyek elektronika, terutama yang berbasis mikrokontroler seperti Arduino. Dengan ukurannya yang kecil namun memiliki kontras tinggi dan konsumsi daya rendah, OLED menjadi pilihan ideal untuk menampilkan teks, grafik, dan bahkan gambar dalam bentuk bitmap.

Salah satu fitur menarik dari OLED adalah kemampuannya untuk menampilkan gambar monokrom dalam bentuk array bitmap. Fitur ini sangat berguna bagi para pengembang dan pelajar yang ingin menampilkan ikon, logo, atau karakter maskot pada perangkat mereka. Selain memberikan kesan profesional, penambahan elemen visual ini juga dapat meningkatkan interaktivitas dan nilai estetika dari sebuah alat.

Dalam tutorial ini, kita akan mempelajari bagaimana cara menampilkan gambar bitmap pada OLED menggunakan Arduino. Gambar yang digunakan adalah sebuah ikon karakter yang disimpan dalam bentuk array dan ditampilkan dengan bantuan fungsi dari library Adafruit SSD1306 dan Adafruit GFX. Proyek ini sangat cocok untuk branding produk, tampilan startup alat otomatisasi, atau sebagai latihan dasar sebelum masuk ke dunia GUI embedded yang lebih kompleks.

---

Komponen yang Digunakan

• 1x Arduino Uno / MFB ATMEL 328 micro
• OLED SSD1306 128×64 (komunikasi I2C)
• Kabel jumper
• PC/laptop dengan Arduino IDE

---

Skema Rangkaian

---

Koneksi Rangkaian

OLED SSD1306	Arduino
VCC	5V
GND	GND
SDA	A4 (Uno/Nano)
SCL	A5 (Uno/Nano)

---

Library yang Harus Ditambahkan

Untuk menjalankan program ini, tambahkan 2 library berikut ke Arduino IDE:

• 🔗 Adafruit SSD1306
• 🔗 Adafruit GFX Library

Cara instal:

1. Buka Arduino IDE
2. Masuk ke menu Sketch > Include Library > Manage Libraries
3. Cari Adafruit SSD1306 dan Adafruit GFX, lalu klik Install

---

Kode Program Lengkap

// PROGRAM INI DI BUAT OLEH  : MANFAHBOT INDUSTRIAL AUTOMATION
// HAK CIPTA PROGRAM/CODING  : LUKMAN HAKIM A.
// WEBSITE                   : http://manfahbot.cc

#include <SPI.h>
#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);

// Array bitmap 128x64 (ikon karakter)
const unsigned char orang [] PROGMEM = {
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
  0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xff, 0x00, 0x00, 0x00, 0x07, 0xff, 0xe0, 0x00, 0x00, 0x7f, 
  0xff, 0xfe, 0x00, 0x01, 0xff, 0xff, 0xff, 0x80, 0x03, 0xff, 0xff, 0xff, 0xc0, 0x0f, 0xff, 0xff, 
  0xff, 0xf0, 0x1f, 0xff, 0xff, 0xff, 0xf8, 0x7f, 0xfc, 0x00, 0x3f, 0xfe, 0xff, 0xe0, 0x00, 0x07, 
  0xff, 0xff, 0x87, 0xff, 0xe1, 0xff, 0x7f, 0x1f, 0xff, 0xf8, 0xff, 0x7e, 0x7f, 0xff, 0xfe, 0x7e, 
  0x3c, 0xff, 0xff, 0xff, 0x3c, 0x01, 0xff, 0xff, 0xff, 0x80, 0x03, 0xff, 0xe7, 0xff, 0xc0, 0x03, 
  0xfe, 0x00, 0x3f, 0xe0, 0x03, 0xf8, 0x7e, 0x1f, 0xc0, 0x01, 0xe3, 0xff, 0xc7, 0x80, 0x00, 0xc7, 
  0xff, 0xe3, 0x00, 0x00, 0x0f, 0xff, 0xf0, 0x00, 0x00, 0x1f, 0xff, 0xf8, 0x00, 0x00, 0x1f, 0xff, 
  0xf8, 0x00, 0x00, 0x0f, 0xc3, 0xf0, 0x00, 0x00, 0x07, 0x81, 0xe0, 0x00, 0x00, 0x03, 0x3c, 0xc0, 
  0x00, 0x00, 0x00, 0x7e, 0x00, 0x00, 0x00, 0x00, 0xff, 0x00, 0x00, 0x00, 0x00, 0xff, 0x00, 0x00, 
  0x00, 0x00, 0xff, 0x00, 0x00, 0x00, 0x00, 0xff, 0x00, 0x00, 0x00, 0x00, 0x7e, 0x00, 0x00, 0x00, 
  0x00, 0x3c, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
  0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00

};

void setup() {
  Serial.begin(9600);
  // SSD1306_SWITCHCAPVCC = generate display voltage from 3.3V internally
  if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) { 
    Serial.println(F("SSD1306 allocation failed"));
    for(;;); 
  }
  
  // just intro
  display.clearDisplay();
  display.setTextColor(WHITE);
  display.setTextSize(1);
  display.setCursor(39,10);  display.println(F("TEST ICON"));
  display.setCursor(39,25);  display.println(F("MANFAHBOT"));
  display.setCursor(0,55);  display.println(F("manfahbot.cc"));
  display.display(); //tampilkan data
  delay(3000); 
}

void loop() {
  display.clearDisplay(); //clear sebelum tampilan baru
  //seuaikan dengan gambar (x, y, orang, h, w, WHITE)
  display.drawBitmap(44, 15, orang, 40, 10, WHITE);
  display.display(); //tampilkan data
}

---

Penjelasan Singkat Program

• Library Adafruit_GFX dan Adafruit_SSD1306 digunakan untuk menampilkan grafis dan teks.
• Gambar disimpan dalam bentuk array orang[] menggunakan format bitmap monokrom (1-bit).
• Fungsi drawBitmap() digunakan untuk menggambar gambar ke OLED dengan koordinat (0,0), lebar 128 piksel dan tinggi 64 piksel.
• Di awal program, OLED akan menampilkan teks pengantar selama 3 detik.
• Setelah itu, layar akan menampilkan gambar ikon secara penuh dan statis di loop().

---

Tips Membuat Gambar Sendiri

Jika ingin mengganti gambar:

1. Buat gambar hitam putih (1-bit) berukuran 128×64 dengan software seperti Paint.NET, Photoshop, atau GIMP.
2. Gunakan konverter bitmap ke array seperti:
   • 🔗 Image2CPP by Rinky-Dink
   • 🔗 image2cpp
3. Copy hasil array .h atau .cpp ke dalam sketch Arduino dan sesuaikan nama variabel dan ukuran.

---

Kesimpulan

Menampilkan gambar bitmap pada OLED membuka banyak kemungkinan untuk menambahkan elemen visual ke proyek Arduino, mulai dari logo, karakter, hingga ikon animasi. Hal ini meningkatkan profesionalitas tampilan serta memperkuat identitas brand, seperti yang dicontohkan dengan Icon WiFi.

Proyek ini cocok dikembangkan untuk:

• Tampilan pembuka alat otomatis
• Indikator status sistem
• Tampilan robot dengan wajah animasi
• Alat branding atau presentasi interaktif