Ep 5 : Display in ESP32

Output merupakan segala informasi yang diproses dan dikirim dari sebuah sistem atau device elektronik. Output component pada saat ini menjadi bagian penting dalam sebuah embedded system — display component (e.g smartphone, pc, etc).

Display component adalah device untuk menampilkan output secara visual. Pada ESP32 system, biasanya digunakan LCD atau OLED untuk menampilkan informasi dari sistem.

LCD dan OLED | (source : Arduino.cc)

Pada project kali ini, akan dirangkai board ESP32 beserta OLED Display untuk menampilkan output dari ESP32. Bagian pertama, OLED akan diprogram agar menampilkan tulisan (text), sedangkan bagian kedua, ditampilkan gambar bitmap pada OLED Display.

Let’s get started!!

Things used in this project

1. ESP32 — DevKitC
2. BreadBoard
3. Kabel jumper male-to-male (4 pcs)
4. OLED 0.96 inch 4 Pin Display (1 pcs)
5. Kabel USB micro-B
6. Laptop

Note :

• Disarankan menggunakan warna kabel jumper yang berbeda-beda untuk mempermudah wiring.
• Saya menggunakan OLED monochrome bewarna kuning-biru sehingga semua output yang tiampilkan bewarna kuning-biru.

Installing Libraries

Agar program dapat dijalankan di ESP32 dan OLED Display, diperlukan konfigurasi serta install Adafruit SSD 1306 Library and Adafruit GFX library pada ArduinoIDE.

1. Buka Arduino IDE.
2. Pilih Sketch > Include Library > Manage Libraries.
3. Cari “SSD 1306” pada kolom pencarian, lalu pilih Install pada kolom Adafruit SSD1306.

4. Akan muncul windows baru untuk meng-install Adafruit GFX Library. Pilih Install all.

5. Setelah proses instalasi selesai, restart Arduino IDE 😃.

Schematic

Jika semua komponen sudah tersedia dan library sudah ter-install, maka dapat dimulai merangkai setiap komponen. Pada projek ini, digunakan I2C communication protocol sebagai protokol komunikasi OLED Display dengan board ESP32. Fyi, OLED Display bisa menggunakan dua macam protokol komunikasi, I2C communication protocol dan SPI communication protocol.

OLED Display yang saya gunakan memiliki 4 pin, yaitu

• Vin : single power pin.
• GND : ground pin.
• SCL : sebagai common clock signal untuk ESP32 dengan OLED.
• SDA : menerima data dari ESP32.

Detail GPIO yang digunakan untuk menghubungkan 4 pin OLED Display dengan OLED Dispay, sebagai berikut (default I2C communication protocol)

Program

Write Text

Pada bagian awal diinisialisasi library yang digunakan. Wire library digunakan dalam protokol I2C, sedangkan Adafruit GFX library dan Adafruit SSD1306 library digunakan untuk menampilkan output display. Diset juga library yang digunakan — FreeSerifItalic9pt7b.

#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
#include <Fonts/FreeSerifItalic9pt7b.h

Bagian selanjutnya diinisialisasi nilai lebar dan tinggi dari OLED Display yang disimpan dalam SCREEN_WIDTH dan SCREEN_HEIGHT.

#define SCREEN_WIDTH 128 // lebar OLED display, dalam pixels
#define SCREEN_HEIGHT 64 // tinggi OLED display, in pixels

Deklarasi terhadap SSD1306 dilakukan dengan fungsi display() untuk menghubungkan ke I2C.

// Deklarasi untuk SSD1306 display connected ke I2C (SDA, SCL pins)
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1);

Nilai -1 menandakan RESET tidak diset ke GPIO manapun — OLED Display yang digunakan tidak memiliki RESET pin.

Pada setup() diinisialisasi parameter baud raute 155200 ke Serial Monitor. OLED Display diinisialisasi dengan fungsi display.begin() yang digunakan.

Serial.begin(115200);
  // Mengecek OLED display
  if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) { 
    Serial.println("SSD1306 allocation failed");
    for(;;);
  }

Jika OLED Display tidak terdeteksi akan tercetak pesan “SSD1306 allocation failed” ke serial monitor.

Bagian selanjutnya digunakan untuk mengeset dan mencetak tulisan ke OLED Display.

display.setFont(&FreeSerifItalic9pt7b);
display.clearDisplay();
display.setTextSize(1);             
display.setTextColor(WHITE);        
display.setCursor(0,20);             
display.println("Embedded System");
display.println("--ESP32--");
display.display();
delay(2000);

Detail kegunaan fungsi :

• display.setFont(&FreeSerifItalic9pt7b)
  Fungsi untuk mengeset jenis font yang digunakan text untuk ditampilkan ke layar OLED.
• display.clearDisplay()
  Membersihkan buffer.
• display.setTextSize(1);
  Mengeset besar tulisan.
• display.setTextColor(WHITE);
  Mengeset warna tulisan. Setelah dicoba, fungsi ini tidak berpengaruh pada OLED Display 1 warna(warna sudah fix).
• display.setCursor(0,20);
  Mengeset posisi text yang akan ditulis
• display.println(“Embedded System”);
  display.println(“ — ESP32 — “);
  Mencetak text “Embedded System — ESP32 — “ ke layar OLED dalam FreeSerifItalic font.
• display.display();
  Fungsi ini dipanggil agar text dapat ditampilkan ke layar OLED.

Display Bitmap Image

Bagian ini, sistem akan diprogram untuk dapat menampilkan gambar bitmap. Untuk itu, diperlukan aplikasi untuk men-convert gambar biasa ke gambar 128x64 bitmap monocolor agar bisa ditampikan di layar OLED.

Detail step-by-step untuk men-convert gambar dapat dibaca di : ESP32 OLED Display with Arduino IDE | Random Nerd Tutorials

Berikut gambar yang saya gunakan untuk ditampilkan di layar OLED :

Gambar yang digunakan | (source : dlf.pt)

Setelah di-convert ke 128×64 bitmap monocolor, gambar menjadi seperti :

Gambar yang telah di-convert

Gambar diatas kemudian di-conver lagi ke dalam C array menggunakan aplikasi LCD Image Converter.

Pada bagian awal inisialisasi dan deklarasi yang digunakan sama dengan program sebelumnya (Write Text).

Array static const uint8_t image_data_Image[1024] adalah C array hasil convert dari gambar bitmap.

Pada bagian setup() digunakan untuk mendeklarasikan OLED Display dan mencetak gambar bitmap ke layar.

// Menggambar bitmap pict ke layar
display.drawBitmap(0, 0, image_data_Image, 128, 64, 1);
display.display();

Code diatas jika di-run akan menampilkan array gambar bitmap melalui fungsi drawBitmap(). Fungsi ini membutuhkan parameter (x, y, array gambar, lebar gambar, tinggi gambar, rotasi).

Result

Setelah kode program selesai di-upload, device berhasil berjalan sesuai dengan spesifikasi program yang diberikan 😃.

Kondisi saat program Write Text dijalankan

Pada program Write Text, layar OLED dapat menampilkan text “Embedded System — ESP32 — ’’

Kondisi saat program Display Bitmap Image dijalankan

Dari program Display Bitmap Picture, ditampilkan gambar bitmap sesuai input pada layar OLED.

Berikut video project kali ini per masing-masing bagian.

Overall, semua program yang dijalankan ke sistem ESP32 berjalan sesuai dengan spesifikasi program yang diberikan. Saya tidak menemui kendala dalam melakukan project ini. Namun, saya mendapat tantangan untuk belajar menyolder kaki OLED Display karena komponen yang saya beli dalam kondisi belum tersolder. Walaupun hasil solder belum optimal (terdapat bercak hitam, bentuk tidak simetris, dll.), tetapi untungnya OLED Display saya bisa digunakan untuk menampilkan output dengan baik.

Thanks for reading
See you on another ep! 😄

References

ESP32 OLED Display with Arduino IDE | Random Nerd Tutorials