PROJECT 5: EXPERIMENT WITH DISPLAY (LCD & OLED)
Bismillaahirrahmaanirrahiim..
Hello sobat setia medium-ers semua!! Gimana kabarnya?? Semoga sehat selalu yaa..
Menurut pepatah, tak kenal maka?? ya kenalan dongg.. Sebelumnya kita kenalan dulu ya guys. Kenalin namaku Muhammad Raflie Dwi Putra yang bisa dipanggil Raflie dengan NIM 18219035. Aku sedang berkuliah semester 4 di prodi Sistem dan Teknologi Informasi (STI) Institut Teknologi Bandung.
Disclaimer, pada project sebelumnya, aku sudah mencoba kedua alat display ini. Namun, pada pekan lalu aku masih mengalami kegagalan yang terus menerus dengan display LCD, sedangkan pada display OLED sudah berhasil untuk menyambungkannya dengan hasil pembacaan sensor MPU-6050 kemarin.
Pada project kali ini, kita akan mencoba bermain-main dengan dua buah komponen display yang dapat dioperasikan dengan ESP32, yakni Liquid Crystal Display (LCD) dan Organic Light Emitting Diode (OLED). Kita akan kembali berusaha namun HARUS BERHASIL. Keoptimisan ku timbul karena aku menganggap tidak adanya masalah yang tak dapat dipecahkan, begitupun mengoprek ESP32 ini juga setiap troubleshoot pasti bisa solved.
KOMPONEN DAN ALAT YANG DIBUTUHKAN
Tentunya, untuk menjalankan berbagai program eksperimen with Display ESP32 yang telah disebutkan sebelumnya, membutuhkan beberapa komponen atau alat yang perlu disiapkan, yaitu:
- ESP32 DEVKIT V1 DOIT Board, sebagai komponen utama untuk dimasukkan program dari Arduino IDE.
- Kabel Micro USB (type A), sebagai kabel penghubung ESP32 Board dengan PC/Laptop untuk memasukkan program.
- Perangkat PC (Laptop / Komputer), tentunya yang sudah terinstall aplikasi Arduino IDE dan paket board ESP-32 di dalamnya.
(Catatan: Jika belum disiapkan, bisa diikuti langkah-langkah pada link ini.)
- Breadboard 830 points, sebagai tempat meletakkan ESP32 Board dan menghubungkan berbagai komponen dengan bantuan kabel jumper wires, baik secara seri maupun parallel.
- Jumper Wires Male to Female and Jumper Wires Male to Male, sebagai penghubung antar komponen melalui breadboard.
- 0.96 inch I2C Organic Light Emitting Diode (OLED) Display SSD1306, sebagai komponen display.
Spesifikasi:
- Interface: I2C (3.3V / 5V logic level)
- Resolusi: 128 x 64
- Sudut Pandang: >160 derajat
- Warna : Kombinasi Kuning dan Biru
- Power supply: DC3.3V~5V
- Operating temperature: -20'C~70'C
- Ukuran LCD+Board : 2.7 x 2.7 cm
- 16x2 I2C Liquid Crystal Display (LCD) Display, sebagai komponen display.
Spesifikasi :
- Power : DC 5V
- Support LCD 1602 dan 2004 (LCD 16x2, LCD 16x4)
- Kontrol pin : SDA dan SCL
- Built-in potensio untuk adjust brightness
- Built-in jumper untuk menon-aktifkan backlight
- Dimensi : 40mm x 18mm
- Berat : 20 gram
Aplikasi :
→ I2C LCD backpack dipakai untuk mengurangi jumlah pin yang diperlukan untuk koneksi dengan LCD.
Diagram Skema Rangkaian
Pada diagram skema rangkaian berikut, kita dapat menyusun rangkaian sesuai diagram skema ataupun dengan kreasi sendiri. Untuk menyusun rangkaian terdapat 2 pilihan jenis jumper wires yang digunakan. Jika kita menyusun rangkaian dengan tidak meletakkan ESP32 Board pada Breadboard, maka kita dapat menghubungkan Breadboard dengan ESP32 Board dengan jumper wires jenis male to female, dengan male pada Breadboard dan female pada kaki ESP32 Board. Sedangkan jika kita menyusun rangkaian dengan menanam / memasukkan semua kaki ESP32 Board pada Breadboard, maka kita dapat menghubungkan antar komponen dengan ESP32 Board dengan jumper wires jenis male to male, dengan langsung memasukkan male ke point yang sejajar kaki pin ESP32 yang sesuai pada Breadboard. Namun jika memungkinkan, menurut aku lebih baik pilihan kedua, yaitu menanamkan ESP32 board pada Breadboard, sehingga ketika ESP32 dihubungkan ke powersource (catu daya) pada Laptop/PC dapat diminimalisir tersentuhnya kaki ESP32 oleh tangan kita, karena apabila tersentuh oleh tangan dapat menyebabkan hubung singkat sehingga menurunkan performa ESP32 kita.
16x2 I2C Liquid Crystal Display (LCD) Display
Salah satu keuntungan menggunakan protokol komunikasi I2C pada LCD sebagai backpack adalah wiring yang sangat simple. Kita hanya membutuhkan wire dari pin SDA dan pin SCL. Selain itu, pada backpack I2C ini juga terdapat tambahan built-in potentiometer. Nahh apa fungsi dari potentiometer ini?? Ini nanti bagian serunya guyss, yuk disimak di bagian Troubleshoot. Nahh untuk wiring, berdasarkan skema rangkaian di atas, kita perlu memastikan bahwa:
- Pin 3v3 atau VIN pada ESP32 terhubung dengan pin VCC pada LCD (kabel coklat) (Catatan: lebih baik menghubungkan dengan pin VIN pada ESP32 karena akan memberikan output tegangan 5 V, sedangkan pin 3v3 memberikan output tegangan 3,3 V. Sehingga jika menggunakan pin3v3 akan menghasilkan keluaran LCD yang lebih redup dibandingkan dengan pin VIN)
- Pin GND pada ESP32 terhubung dengan pin GND pada LCD (kabel hitam)
- GPIO 21 atau D21 pada ESP32 terhubung dengan pin SDA pada LCD (kabel merah)
- GPIO 22 atau D22 pada ESP32 terhubung dengan pin SCL pada LCD (kabel orange)
- Pastikan bahwa: ESP32 Board sudah terhubung pada power source (catu daya) Laptop / PC dengan kabel Micro USB (type A), sehingga LED pada ESP32 Board dan LED pada I2C (backpack LCD) menyala.
0.96 inch I2C Organic Light Emitting Diode (OLED) Display SSD1306
Berdasarkan skema rangkaian di atas, kita perlu memastikan bahwa:
- Pin 3v3 atau VIN pada ESP32 terhubung dengan pin VDD pada OLED (kabel merah)
- Pin GND pada ESP32 terhubung dengan pin GND pada OLED (kabel hitam)
- GPIO 21 atau D21 pada ESP32 terhubung dengan pin SDA pada OLED (kabel kuning)
- GPIO 22 atau D22 pada ESP32 terhubung dengan pin SCK pada OLED (kabel putih)
- Pastikan bahwa: ESP32 Board sudah terhubung pada power source (catu daya) Laptop / PC dengan kabel Micro USB (type A), sehingga LED pada ESP32 Board menyala.
- Beberapa KETIDAKTELITIAN pada proses wiring disini adalah terlalu mengikuti posisi jumper wires pada diagram skema di atas. Seharusnya diagram skema di atas hanya menjadi patokan nama setiap keterhubungan GPIO atau pins nya, sehingga wiring tetap menyesuaikan nama pins pada LCD atau OLED kita. Alasannya karena beberapa LCD atau OLED dari kita, memiliki posisi pins yang berbeda, misal tertukarnya posisi SDA dan SCL, atau posisi GND dan VCC.
LIBRARIES dan KODE PROGRAM
16x2 I2C Liquid Crystal Display (LCD) Display
- Untuk melakukan penampilan output ke LCD Display, kita butuh menggunakan LiquidCrystal_I2C library. Berikut cara menginstall seluruh libraries tersebut dalam Arduino IDE:
Buka aplikasi Arduino IDE dan buka menu Sketch > Include Library > Manage Libraries. Kemudian Library Manager akan terbuka.
Search “LiquidCrystal” pada Search box dan install library Adafruit tersebut;
- Setelah library tersebut terinstall, kemudian restart Arduino IDE kita.
- Lalu setelah rangkaian sesuai dengan diagram skema di atas, sebelum program untuk menampilkan hasil output ke LCD Display diupload, kita perlu mencari address dari I2C LCD terlebih dahulu. Dapat disesuaikan dengan kode program berikut:
I2C Scanner Sketch
#include <Wire.h>
void setup() {
Wire.begin();
Serial.begin(115200);
Serial.println("\nI2C Scanner");
}
void loop() {
byte error, address;
int nDevices;
Serial.println("Scanning...");
nDevices = 0;
for(address = 1; address < 127; address++ ) {
Wire.beginTransmission(address);
error = Wire.endTransmission();
if (error == 0) {
Serial.print("I2C device found at address 0x");
if (address<16) {
Serial.print("0");
}
Serial.println(address,HEX);
nDevices++;
}
else if (error==4) {
Serial.print("Unknow error at address 0x");
if (address<16) {
Serial.print("0");
}
Serial.println(address,HEX);
}
}
if (nDevices == 0) {
Serial.println("No I2C devices found\n");
}
else {
Serial.println("done\n");
}
delay(5000);
}- Setelah kode program tersebut diupload, bukalah Serial Monitor pada baud rate 115200. Address dari I2C pun akan ditampilkan di sana.
- Setelah itu, kemudian baru kita dapat mengupload kode program inti dari project ini. Namun, kita perlu menyesuaikan parameter pertama pada fungsi LiquidCrystal_I2C lcd(0x27, lcdColumns, lcdRows); yaitu mengganti ‘0x27’ dengan address yang telah didapat dari Serial Monitor program sebelumnya.
- Berikut kode programnya:
Static Text
#include <LiquidCrystal_I2C.h>// sesuaikan jumlah kolom dan baris dari LCD Anda
int lcdColumns = 16;
int lcdRows = 2;// sesuaikan address dari I2C LCD dari yg telah didapat dari I2C scanner sketch
LiquidCrystal_I2C lcd(0x27, lcdColumns, lcdRows);void setup(){
// menginisialisasi LCD
lcd.init();
// menyalakan backlight dari LCD
lcd.backlight();
}void loop(){
// atur cursor ke kolom pertama dan baris pertama (kolom, baris)
lcd.setCursor(0, 0);
// print static text
lcd.print("Hello, World!");
delay(2000);
// display dijadikan clear untuk print text baru
lcd.clear();
// atur cursor ke kolom pertama dan baris kedua (kolom, baris)
lcd.setCursor(0,1);
lcd.print("Alhamdulillah :)");
delay(2000);
lcd.clear();
}
Scrolling Text
#include <LiquidCrystal_I2C.h>// sesuaikan dengan jumlah kolom dan baris LCD
int lcdColumns = 16;
int lcdRows = 2;// sesuaikan address dari I2C LCD dari yg telah didapat dari I2C scanner sketch
LiquidCrystal_I2C lcd(0x27, lcdColumns, lcdRows);String messageStatic = "Static message";
String messageToScroll = "This is a scrolling message with more than 16 characters";// Fungsi tersebut untuk scroll text
// Fungsi ini menerima arguments yg sesuai
// row: jumlah baris dimana text akan ditampilkan
// message: pesan untuk discroll
// delayTime: delay pergantian antara masing-masing karakter
// lcdColumns: jumlah kolom dari LCD Anda
void scrollText(int row, String message, int delayTime, int lcdColumns) {
for (int i=0; i < lcdColumns; i++) {
message = " " + message;
}
message = message + " ";
for (int pos = 0; pos < message.length(); pos++) {
lcd.setCursor(0, row);
lcd.print(message.substring(pos, pos + lcdColumns));
delay(delayTime);
}
}void setup(){
// menginisialisasi LCD
lcd.init();
// menyalakan backlight dari LCD
lcd.backlight();
}void loop(){
// atur cursor ke kolom pertama dan baris pertama (kolom, baris)
lcd.setCursor(0, 0);
// print static text
lcd.print(messageStatic);
// print scrolling text
scrollText(1, messageToScroll, 250, lcdColumns);
}
Beberapa KETIDAKTELITIAN yang sering terjadi terhadap program ini yaitu:
- Library belum terinstall, atau sudah terinstall namun penulisan nama library yang diinclude tidak sama dengan nama library yang telah terinstall. Bisa kita cek kesesuaiannya dengan klik Sketch > Include Library > LiquidCrystal_I2C
- Ukuran kolom dan baris LCD pada kode program tidak sesuai dengan lcdColumns dan lcdRows dari LCD yang kita miliki.
- Address 0x27 pada kode tidak sesuai dengan address I2C LCD milik kita. Harus disesuaikan dengan address yang muncul pada Serial Monitor baud rate 115200 setelah mengupload program I2C Scanner Sketch.
- Cursor yang diletakkan lebih dari range kolom atau baris dari ukuran LCD sehingga program akan error atau tidak mengeluarkan display apapun.
0.96 inch I2C Organic Light Emitting Diode (OLED) Display SSD1306
- Untuk melakukan penampilan output ke LCD Display, kita butuh menggunakan Adafruit_SSD1306 library dan Adafruit_GFX library. Berikut cara menginstall seluruh libraries tersebut dalam Arduino IDE:
Buka aplikasi Arduino IDE dan buka menu Sketch > Include Library > Manage Libraries. Kemudian Library Manager akan terbuka.
Search “SSD1306” pada Search box dan install library Adafruit tersebut;
Search “GFX” pada Search box dan install library Adafruit tersebut;
- Setelah kedua libraries tersebut terinstall, kemudian restart Arduino IDE kita.
- Lalu setelah rangkaian sesuai dengan diagram skema di atas, sebelum program untuk menampilkan hasil output ke OLED Display diupload, kita perlu meneriksa ukuran OLED terlebih dahulu. Kemudian dapat disesuaikan dengan kode program beserta penjelasan per kode nya sebagai berikut:
Testing for OLED Display
#include <SPI.h>
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>#define SCREEN_WIDTH 128 // lebar OLED display, dalam pixels
#define SCREEN_HEIGHT 64 // tinggi OLED display, dalam pixels// Mendeklarasikan sebuah SSD1306 display terhubung ke I2C (SDA, SCL pins)
#define OLED_RESET -1 // Reset pin # (atau -1 jika sharing Arduino reset pin)
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);#define NUMFLAKES 10 // // Jumlah 'kepingan salju' dalam contoh animasi#define LOGO_HEIGHT 16
#define LOGO_WIDTH 16
static const unsigned char PROGMEM logo_bmp[] =
{ B00000000, B11000000,
B00000001, B11000000,
B00000001, B11000000,
B00000011, B11100000,
B11110011, B11100000,
B11111110, B11111000,
B01111110, B11111111,
B00110011, B10011111,
B00011111, B11111100,
B00001101, B01110000,
B00011011, B10100000,
B00111111, B11100000,
B00111111, B11110000,
B01111100, B11110000,
B01110000, B01110000,
B00000000, B00110000 };void setup() {
Serial.begin(115200);// SSD1306_SWITCHCAPVCC = generate display voltage from 3.3V internally
if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {
Serial.println(F("SSD1306 allocation failed"));
for(;;); // Don't proceed, loop forever
}// Show initial display buffer contents on the screen --
// the library initializes this with an Adafruit splash screen.
display.display();
delay(2000); // Berhenti selama 2 seconds// Clear the buffer
display.clearDisplay();// Menggambar single pixel dalam warna putih
display.drawPixel(10, 10, WHITE);// Menunjukkan display buffer di layar.
// Kamu HARUS memanggil fungsi display() setelah perintah menggambar untuk membuat mereka terlihat di layar
display.display();
delay(2000);
// display.display () TIDAK diperlukan setelah setiap perintah menggambar, kecuali itu yang Anda inginkan
// ... sebaliknya, Anda dapat mengumpulkan banyak operasi menggambar
// dan kemudian memperbarui layar sekaligus dengan memanggil display.display ().
// Contoh-contoh ini menunjukkan kedua pendekatan ...testdrawline(); // Menggambar banyak garistestdrawrect(); // Menggambar persegi panjang (outlines)testfillrect(); // Menggambar persegi panjang (filled)testdrawcircle(); // Menggambar lingkaran (outlines)testfillcircle(); // Menggambar lingkaran (filled)testdrawroundrect(); // Menggambar persegi panjang bulat (outlines)testfillroundrect(); // Menggambar persegi panjang bulat (filled)testdrawtriangle(); // Menggambar segitiga (outlines)testfilltriangle(); // Menggambar segitiga (filled)testdrawchar(); // Menggambar karakter font defaulttestdrawstyles(); // Menggambar karakter 'stylized'testscrolltext(); // Menggambar scrolling texttestdrawbitmap(); // Menggambar gambar bitmap kecil// Balikkan dan pulihkan tampilan, jeda di antaranya
//
display.invertDisplay(true);
delay(1000);
display.invertDisplay(false);
delay(1000);testanimate(logo_bmp, LOGO_WIDTH, LOGO_HEIGHT); // Animate bitmaps
}void loop() {
}void testdrawline() {
int16_t i;display.clearDisplay(); // Clear display bufferfor(i=0; i<display.width(); i+=4) {
display.drawLine(0, 0, i, display.height()-1, WHITE);
display.display(); // Update screen with each newly-drawn line
delay(1);
}
for(i=0; i<display.height(); i+=4) {
display.drawLine(0, 0, display.width()-1, i, WHITE);
display.display();
delay(1);
}
delay(250);display.clearDisplay();for(i=0; i<display.width(); i+=4) {
display.drawLine(0, display.height()-1, i, 0, WHITE);
display.display();
delay(1);
}
for(i=display.height()-1; i>=0; i-=4) {
display.drawLine(0, display.height()-1, display.width()-1, i, WHITE);
display.display();
delay(1);
}
delay(250);display.clearDisplay();for(i=display.width()-1; i>=0; i-=4) {
display.drawLine(display.width()-1, display.height()-1, i, 0, WHITE);
display.display();
delay(1);
}
for(i=display.height()-1; i>=0; i-=4) {
display.drawLine(display.width()-1, display.height()-1, 0, i, WHITE);
display.display();
delay(1);
}
delay(250);display.clearDisplay();for(i=0; i<display.height(); i+=4) {
display.drawLine(display.width()-1, 0, 0, i, WHITE);
display.display();
delay(1);
}
for(i=0; i<display.width(); i+=4) {
display.drawLine(display.width()-1, 0, i, display.height()-1, WHITE);
display.display();
delay(1);
}delay(2000); // Berhenti selama 2 seconds
}void testdrawrect(void) {
display.clearDisplay();for(int16_t i=0; i<display.height()/2; i+=2) {
display.drawRect(i, i, display.width()-2*i, display.height()-2*i, WHITE);
display.display(); // Update screen with each newly-drawn rectangle
delay(1);
}delay(2000);
}void testfillrect(void) {
display.clearDisplay();for(int16_t i=0; i<display.height()/2; i+=3) {
// Warna INVERSE digunakan sehingga persegi panjang bergantian putih / hitam
display.fillRect(i, i, display.width()-i*2, display.height()-i*2, INVERSE);
display.display(); // Update screen with each newly-drawn rectangle
delay(1);
}delay(2000);
}void testdrawcircle(void) {
display.clearDisplay();for(int16_t i=0; i<max(display.width(),display.height())/2; i+=2) {
display.drawCircle(display.width()/2, display.height()/2, i, WHITE);
display.display();
delay(1);
}delay(2000);
}void testfillcircle(void) {
display.clearDisplay();for(int16_t i=max(display.width(),display.height())/2; i>0; i-=3) {
// Warna INVERSE digunakan sehingga lingkaran bergantian putih / hitam
display.fillCircle(display.width() / 2, display.height() / 2, i, INVERSE);
display.display(); // Perbarui layar dengan setiap lingkaran yang baru digambar
delay(1);
}delay(2000);
}void testdrawroundrect(void) {
display.clearDisplay();for(int16_t i=0; i<display.height()/2-2; i+=2) {
display.drawRoundRect(i, i, display.width()-2*i, display.height()-2*i,
display.height()/4, WHITE);
display.display();
delay(1);
}delay(2000);
}void testfillroundrect(void) {
display.clearDisplay();for(int16_t i=0; i<display.height()/2-2; i+=2) {
// Warna INVERSE digunakan sehingga bentuk bulat bergantian putih / hitam
display.fillRoundRect(i, i, display.width()-2*i, display.height()-2*i,
display.height()/4, INVERSE);
display.display(); // Perbarui layar dengan setiap bentuk bulat yang baru digambar
delay(1);
}delay(2000);
}void testdrawtriangle(void) {
display.clearDisplay();for(int16_t i=0; i<max(display.width(),display.height())/2; i+=5) {
display.drawTriangle(
display.width()/2 , display.height()/2-i,
display.width()/2-i, display.height()/2+i,
display.width()/2+i, display.height()/2+i, WHITE);
display.display();
delay(1);
}delay(2000);
}void testfilltriangle(void) {
display.clearDisplay();for(int16_t i=max(display.width(),display.height())/2; i>0; i-=5) {
// Warna INVERSE digunakan sehingga segitiga bergantian putih / hitam
display.fillTriangle(
display.width()/2 , display.height()/2-i,
display.width()/2-i, display.height()/2+i,
display.width()/2+i, display.height()/2+i, INVERSE);
display.display();
delay(1);
}delay(2000);
}void testdrawchar(void) {
display.clearDisplay();display.setTextSize(1); // Normal 1:1 pixel scale
display.setTextColor(WHITE); // Draw white text
display.setCursor(0, 0); // Start at top-left corner
display.cp437(true); // Use full 256 char 'Code Page 437' font// Tidak semua karakter akan muat di layar. Ini normal.
// Perpustakaan akan menggambar apa yang bisa dan sisanya akan dipotong.
for(int16_t i=0; i<256; i++) {
if(i == '\n') display.write(' ');
else display.write(i);
}display.display();
delay(2000);
}void testdrawstyles(void) {
display.clearDisplay();display.setTextSize(1); // Normal 1:1 pixel scale
display.setTextColor(WHITE); // Draw white text
display.setCursor(0,0); // Start at top-left corner
display.println(F("Hello, world!"));display.setTextColor(BLACK, WHITE); // Draw 'inverse' text
display.println(3.141592);display.setTextSize(2); // Draw 2X-scale text
display.setTextColor(WHITE);
display.print(F("0x")); display.println(0xDEADBEEF, HEX);display.display();
delay(2000);
}void testscrolltext(void) {
display.clearDisplay();display.setTextSize(2); // Draw 2X-scale text
display.setTextColor(WHITE);
display.setCursor(10, 0);
display.println(F("scroll"));
display.display(); // Show initial text
delay(100);// Gulir ke berbagai arah, jeda di antara:
display.startscrollright(0x00, 0x0F);
delay(2000);
display.stopscroll();
delay(1000);
display.startscrollleft(0x00, 0x0F);
delay(2000);
display.stopscroll();
delay(1000);
display.startscrolldiagright(0x00, 0x07);
delay(2000);
display.startscrolldiagleft(0x00, 0x07);
delay(2000);
display.stopscroll();
delay(1000);
}void testdrawbitmap(void) {
display.clearDisplay();display.drawBitmap(
(display.width() - LOGO_WIDTH ) / 2,
(display.height() - LOGO_HEIGHT) / 2,
logo_bmp, LOGO_WIDTH, LOGO_HEIGHT, 1);
display.display();
delay(1000);
}#define XPOS 0 // Mengindeks ke dalam array 'icons' dalam fungsi di bawah ini
#define YPOS 1
#define DELTAY 2void testanimate(const uint8_t *bitmap, uint8_t w, uint8_t h) {
int8_t f, icons[NUMFLAKES][3];// Initialize 'snowflake' positions
for(f=0; f< NUMFLAKES; f++) {
icons[f][XPOS] = random(1 - LOGO_WIDTH, display.width());
icons[f][YPOS] = -LOGO_HEIGHT;
icons[f][DELTAY] = random(1, 6);
Serial.print(F("x: "));
Serial.print(icons[f][XPOS], DEC);
Serial.print(F(" y: "));
Serial.print(icons[f][YPOS], DEC);
Serial.print(F(" dy: "));
Serial.println(icons[f][DELTAY], DEC);
}for(;;) { // Loop forever...
display.clearDisplay(); // Clear the display buffer// Draw each snowflake:
for(f=0; f< NUMFLAKES; f++) {
display.drawBitmap(icons[f][XPOS], icons[f][YPOS], bitmap, w, h, WHITE);
}display.display(); // Show the display buffer on the screen
delay(200); // Pause for 1/10 second// Kemudian perbarui koordinat setiap serpihan ...
for(f=0; f< NUMFLAKES; f++) {
icons[f][YPOS] += icons[f][DELTAY];
// Jika 'kepingan salju' di bagian bawah layar ...
if (icons[f][YPOS] >= display.height()) {
// Reinitialize to a random position, just off the top
icons[f][XPOS] = random(1 - LOGO_WIDTH, display.width());
icons[f][YPOS] = -LOGO_HEIGHT;
icons[f][DELTAY] = random(1, 6);
}
}
}
}
HASIL PERCOBAAN
Aku telah melakukan banyak sekali percobaan terhadap program LCD Display ini, selama beberapa hari. Sampai pernah hopeless dan akhirnya aku membeli OLED Display ini, sehingga aku jadi memiliki dua buah alat display, yakni LCD dan OLED. Beberapa alasan aku hopeless telah aku kemukakan pada project sebelumnya, yakni:
Pada percobaan pertama, aku belum berhasil mengeluarkan apapun ke LCD. Aku berusaha melakukan berbagai troubleshoot dari percobaan ini, seperti wiring antar pin, kode program, libraries Arduino yang dibutuhkan, kesesuaian address dari LCD, menukar GPIO yang memiliki kesamaan fungsi, dsb. Setelah aku coba dan coba oprek berkali-kali dari berbagai referensi lainnya, tetap tidaklah membuahkan hasil. LCD ini hanyalah menyala pada bagian layar LCD dan red-LED dari I2C nya, serta merespon dengan meredupkan layar sekejap setelah program aku upload dari Arduino IDE ke ESP32 kemudian kembali menyala. Aku tidaklah menyerah dan mencobanya terus-menerus hampir memakan waktu dari pagi hingga malam (selain jam kuliah), serta konsultasi dengan asisten dosen (kating) yang membantu menjawab berbagai pertanyaan ku. Konsultasi ini pun pada akhirnya membuahkan hasil dengan pertanyaan dari katingku bahwa “Kamu kalo nyoba beli lcd baru lagi masalah gak flii?” yang artinya kami berasumsi bahwa terdapat ‘kecacatan’ pada LCD tersebut (padahal aku baru membelinya). Walau aku tetap mencoba untuk solving, namun tetaplah tidak berhasil, dan ALHASIL aku memutuskan untuk membeli display jenis lainnya yaitu OLED (sekalian memesan komponen sensor lainnya, termasuk HC-SR04 wkwk).
Namun, aku tetaplah mendapat kepuasan tersendiri dengan mendapatkan banyak pengalaman dalam troubleshoot di ESP32 ini. Ingatlah guys, “Banyak-banyaklah melakukan kegagalan dalam belajar demi mencapai kesuksesan kelak yang haqiqi”.
Setelah 1 pekan kemudian, hingga datanglah tugas project 5 yang fokus terkait Display ini. Ketika di kelas, dosenku sempat mengatakan salah satu kata kunci yg SANGAT membuat aku sadar dan sungguh aku ingat, yakni “Selain menyederhanakan wiring menjadi I2C (SDA, SCL pins), pada backpack dari LCD ini juga terdapat potentiometer built-in yang berfungsi untuk mengatur kontras cahata antara keluaran text dengan backlight pada layar LCD”.
Dengan perkataan ini, aku langsung mengambil obeng dan mencoba menjalankan program dengan LCD ini kembali. Namun, ketika keluaran text tidak muncul di LCD, aku membalik LCD ini untuk menemukan kotak biru kecil pada backpack LCD ini. Kemudian aku memutar (searah jarum jam) potentiometer built-in tersebut dengan obeng. Aku terus memutar sambil memantau tampilan layar LCD yang semakin jelas terlihat text tersebut. Ketika putaran terakhir, FINALLY!!! I DID IT. Text tersebut muncul pada layar LCD. Keyakinanku pun terbukti bahwa alat ini pasti akan berjalan…
Troubleshoot tersebut sangat berharga. Padahal merupakan hal sepele yang sering dilupakan oleh orang lain terutama aku yang menganggap selama ini komponen yang berkaitan dengan ESP32 sudah siap sedia dipakai (kecuali soldering).
Video Demo Troubleshoot:
Video Demo Display Static Text with LCD:
Video Demo Display Scrolling Text with LCD:
Video Demo Display Testing with OLED:
KESIMPULAN
Dari eksperimen yang telah dilakukan, ESP32 berhasil untuk menjalankan program Sistem LCD Display dan OLED Display dengan baik sesuai dengan kode program yang dibuat pada aplikasi Arduino IDE. Harapannya, berbagai pengalaman dalam Sistem Display ESP32 ini dapat dikembangkan lebih jauh lagi.
Walaupun pada beberapa eksperimen tertentu tidak langsung berhasil karena menemukan berbagai kendala. Namun, dengan adanya banyak kegagalan tersebut akan membuat kita mempunyai pengalaman lebih banyak pada project ini sehingga akan lebih lancar mengatasi problem-problem tersebut di masa yang akan datang.
Alhamdulillaah..
Sekian, terima kasih atas perhatiannya..
SELAMAT MENCOBA!!!
