Belajar ESP32: Display OLED (SSD1306)

Pada artikel sebelumnya, kita telah berhasil membaca data dari sensor eksternal BMP280 dan menampilkannya di Serial Monitor. Namun jujur saja — terus-terusan menatap Serial Monitor di layar laptop terasa kurang praktis, apalagi jika kita ingin perangkat kita berdiri sendiri tanpa terhubung ke komputer.

Nah, di artikel ini kita akan menambahkan layar OLED SSD1306 pada ESP32. Dengan layar ini, data sensor, teks, maupun grafis sederhana bisa ditampilkan langsung di perangkat kita, tanpa memerlukan Serial Monitor sama sekali.

Mengenal OLED SSD1306

OLED (Organic Light-Emitting Diode) adalah teknologi layar yang memancarkan cahaya langsung dari setiap pikselnya. Berbeda dengan LCD yang membutuhkan backlight, setiap piksel OLED menyala sendiri. Ini menghasilkan beberapa keunggulan:

• Kontras tinggi — terutama di lingkungan gelap, tampilan sangat tajam
• Hemat daya — piksel yang mati benar-benar tidak mengonsumsi listrik
• Ukuran kecil — cocok untuk proyek embedded yang ringkas

Modul yang akan kita gunakan adalah SSD1306, layar OLED monokrom berukuran 0,96 inci dengan resolusi 128×64 piksel. Layar ini sangat populer dalam proyek IoT dan embedded karena harganya terjangkau serta mudah diintegrasikan.

Modul SSD1306 umumnya memiliki empat pin dan berkomunikasi melalui protokol I2C, sehingga hanya memerlukan dua jalur data untuk terhubung ke ESP32.

Protokol I2C dan Alamat OLED

Seperti yang sudah kita bahas pada artikel Belajar ESP32: External Sensor, protokol I2C hanya membutuhkan dua jalur komunikasi:

• SDA (Serial Data) → jalur pengiriman data
• SCL (Serial Clock) → jalur sinkronisasi clock

Salah satu keunggulan I2C adalah kemampuannya menghubungkan banyak perangkat sekaligus pada bus yang sama, selama masing-masing perangkat memiliki alamat yang berbeda. Ini berarti jika kita sudah memasang sensor BMP280, kita cukup memparalel kabel SDA dan SCL — tidak perlu pin tambahan.

Alamat I2C default OLED SSD1306 adalah:

Tips: Jika layar tidak menampilkan apapun setelah upload, coba ganti alamat ke 0x3C. Mayoritas modul yang beredar di pasaran menggunakan alamat 0x3C meskipun resolusinya 128×64.

Wiring: Menghubungkan OLED ke ESP32

Koneksi OLED SSD1306 ke ESP32 sangat sederhana karena hanya memerlukan empat kabel.

Jika Anda juga masih memasang sensor BMP280 dari artikel sebelumnya, cukup sambungkan pin SCL dan SDA OLED ke pin yang sama dengan BMP280 (paralel). Keduanya dapat berbagi satu bus I2C karena memiliki alamat yang berbeda.

Instalasi Library

Untuk mengontrol layar OLED SSD1306 dengan Arduino IDE, kita membutuhkan dua library dari Adafruit:

• Adafruit SSD1306 — library utama untuk driver layar
• Adafruit GFX Library — library grafis dasar (teks, garis, bentuk, bitmap)

Langkah instalasi:

1. Buka Arduino IDE
2. Pilih menu Sketch → Include Library → Manage Libraries
3. Cari “SSD1306”, lalu install Adafruit SSD1306
4. Saat muncul dialog “Install all”, pilih Install All agar Adafruit GFX dan Adafruit BusIO ikut terinstal
5. Restart Arduino IDE

Latihan 1: Hello World di OLED

Mari kita mulai dengan program paling dasar — menampilkan teks di layar OLED.

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

#define SCREEN_WIDTH  128
#define SCREEN_HEIGHT 64
#define OLED_RESET    -1
#define SCREEN_ADDRESS 0x3C

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

void setup() {
  Serial.begin(115200);

  if (!display.begin(SSD1306_SWITCHCAPVCC, SCREEN_ADDRESS)) {
    Serial.println("SSD1306 allocation failed");
    for (;;);
  }

  display.clearDisplay();

  display.setTextSize(2);
  display.setTextColor(SSD1306_WHITE);
  display.setCursor(10, 20);
  display.println("Hello!");
  display.setCursor(10, 42);
  display.println("ESP32 :)");

  display.display();
}

void loop() {
  // tidak ada yang dilakukan di loop
}

Penjelasan Program

Inisialisasi library — kita include tiga library: Wire.h untuk I2C, Adafruit_GFX.h untuk fungsi grafis, dan Adafruit_SSD1306.h untuk driver layar.

Deklarasi objek display — kita buat objek display dengan parameter lebar, tinggi, referensi Wire, dan pin reset (-1 artinya tidak ada pin reset terpisah).

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

Inisialisasi di setup() — fungsi display.begin() menginisialisasi layar. Jika gagal (misalnya wiring salah atau alamat I2C tidak cocok), program akan berhenti dan mencetak pesan error ke Serial Monitor.

Alur menggambar:

1. display.clearDisplay() — bersihkan buffer (penting! selalu lakukan ini sebelum menggambar)
2. display.setTextSize(2) — atur ukuran teks (1 = kecil, 2 = medium, 3 = besar)
3. display.setTextColor(SSD1306_WHITE) — atur warna teks
4. display.setCursor(x, y) — tentukan posisi kursor, dihitung dari sudut kiri atas (0,0)
5. display.println("teks") — tulis teks
6. display.display() — wajib dipanggil! Fungsi ini yang benar-benar mengirim buffer ke layar fisik

Penting: Semua fungsi draw* dan print* hanya menulis ke buffer di memori, belum ke layar fisik. Kita harus memanggil display.display() agar perubahan tampil di layar.

Latihan 2: Menggambar Bentuk Geometri

Library Adafruit GFX menyediakan berbagai fungsi untuk menggambar bentuk. Berikut contoh menampilkan beberapa bentuk sekaligus.

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

#define SCREEN_WIDTH  128
#define SCREEN_HEIGHT 64
#define OLED_RESET    -1
#define SCREEN_ADDRESS 0x3C

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

void setup() {
  Serial.begin(115200);
  if (!display.begin(SSD1306_SWITCHCAPVCC, SCREEN_ADDRESS)) {
    for (;;);
  }

  // --- Persegi panjang kosong ---
  display.clearDisplay();
  display.drawRect(0, 0, 60, 30, SSD1306_WHITE);
  display.display();
  delay(1500);

  // --- Persegi panjang terisi ---
  display.clearDisplay();
  display.fillRect(0, 0, 60, 30, SSD1306_WHITE);
  display.display();
  delay(1500);

  // --- Lingkaran ---
  display.clearDisplay();
  display.drawCircle(64, 32, 20, SSD1306_WHITE);
  display.display();
  delay(1500);

  // --- Segitiga ---
  display.clearDisplay();
  display.drawTriangle(64, 0, 20, 60, 108, 60, SSD1306_WHITE);
  display.display();
  delay(1500);

  // --- Garis diagonal ---
  display.clearDisplay();
  display.drawLine(0, 0, 127, 63, SSD1306_WHITE);
  display.display();
  delay(1500);
}

void loop() {}

Ringkasan Fungsi Grafis

Latihan 3: Menampilkan Data Sensor di OLED

Ini adalah aplikasi paling praktis — menggabungkan pembacaan sensor BMP280 dengan tampilan di OLED. Tidak perlu Serial Monitor lagi!

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

#define SCREEN_WIDTH   128
#define SCREEN_HEIGHT  64
#define OLED_RESET     -1
#define SCREEN_ADDRESS 0x3C

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

void setup() {
  Serial.begin(115200);

  if (!display.begin(SSD1306_SWITCHCAPVCC, SCREEN_ADDRESS)) {
    Serial.println("OLED gagal!");
    for (;;);
  }

  if (!bmp.begin(0x76)) {
    Serial.println("BMP280 gagal!");
    for (;;);
  }

  display.clearDisplay();
  display.setTextSize(1);
  display.setTextColor(SSD1306_WHITE);
  display.setCursor(20, 25);
  display.println("Memulai...");
  display.display();
  delay(2000);
}

void loop() {
  float suhu     = bmp.readTemperature();
  float tekanan  = bmp.readPressure() / 100.0F;

  display.clearDisplay();

  // Baris judul
  display.setTextSize(1);
  display.setCursor(0, 0);
  display.println("===BMP280Monitor ===");

  // Suhu
  display.setTextSize(2);
  display.setCursor(0, 16);
  display.print(suhu, 1);
  display.println(" C");

  // Tekanan
  display.setTextSize(1);
  display.setCursor(0, 40);
  display.print("Tekanan: ");
  display.print(tekanan, 1);
  display.println(" hPa");

  display.display();
  delay(2000);
}

Dengan program ini, layar OLED akan memperbarui bacaan suhu dan tekanan setiap dua detik secara mandiri, tanpa perlu terhubung ke laptop.

Eksperimen Tambahan: Animasi Teks Berjalan (Scrolling)

Library Adafruit SSD1306 juga mendukung efek scrolling teks secara hardware, tanpa harus menggeser piksel secara manual.

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

#define SCREEN_WIDTH  128
#define SCREEN_HEIGHT 64
#define OLED_RESET    -1
#define SCREEN_ADDRESS 0x3C

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

void setup() {
  Serial.begin(115200);
  if (!display.begin(SSD1306_SWITCHCAPVCC, SCREEN_ADDRESS)) {
    for (;;);
  }

  display.clearDisplay();
  display.setTextSize(2);
  display.setTextColor(SSD1306_WHITE);
  display.setCursor(0, 20);
  display.println("SMSRV IoT");
  display.display();
  delay(1000);

  // Scroll ke kiri
  display.startscrollleft(0x00, 0x0F);
  delay(4000);

  // Hentikan scroll
  display.stopscroll();
  delay(1000);

  // Scroll ke kanan
  display.startscrollright(0x00, 0x0F);
  delay(4000);

  display.stopscroll();
}

void loop() {}

Fungsi scrolling ini sangat berguna untuk menampilkan teks panjang di layar kecil, seperti nama stasiun cuaca, nama lokasi, atau notifikasi singkat.

Kesimpulan

Layar OLED SSD1306 adalah komponen yang sangat berguna dalam proyek ESP32. Dengan resolusi 128×64 piksel dan antarmuka I2C sederhana, kita dapat menampilkan teks, data sensor, bentuk grafis, hingga animasi scrolling hanya dengan beberapa baris kode.

Poin-poin penting yang sudah kita pelajari:

• OLED SSD1306 menggunakan protokol I2C dengan pin GPIO 21 (SDA) dan GPIO 22 (SCL)
• Library yang digunakan adalah Adafruit SSD1306 dan Adafruit GFX
• Selalu panggil display.display() setelah menggambar agar perubahan tampil di layar
• OLED dapat berbagi bus I2C dengan sensor lain seperti BMP280 selama alamatnya berbeda
• Tersedia berbagai fungsi grafis: teks, garis, kotak, lingkaran, segitiga, hingga scrolling

Pada artikel selanjutnya, kita akan membahas PWM (Pulse Width Modulation) pada ESP32 — teknik yang memungkinkan kita mengatur kecerahan LED, kecepatan motor, dan berbagai output analog lainnya secara digital.

Referensi

• https://randomnerdtutorials.com/esp32-ssd1306-oled-display-arduino-ide/
• https://github.com/adafruit/Adafruit_SSD1306
• https://github.com/adafruit/Adafruit-GFX-Library