Project 5 ESP32 OLED Display
Assalamualaikum wr. wb.. Halo Teman-teman! Saya Naja!
Pada percobaan kali ini, kita akan membuat percobaan OLED Display yang akan menampilkan “ Hello, World! “ dan menampilkan beberapa gambar bentuk ( titik, garis, segitiga, lingkaran, persegi panjang ). Bagi teman-teman yang ingin melihat project-project saya sebelumnya bisa lihat di link berikut ini.
- Project 1 LED BLINK, https://cahayanaza12.medium.com/project-1-led-blink-3a4ed13ed9eb
- Project 2 Digital Input Output dan Analog Output, https://cahayanaza12.medium.com/project-2-digital-input-output-esp32-4cf1ede0915a
- Project 3 ESP32 Internal Sensor, https://cahayanaza12.medium.com/project-3-esp32-internal-sensor-4566ef0643bb
- Project 4 ESP32 Eksternal Sensor, https://cahayanaza12.medium.com/project-4-esp32-eksternal-sensor-2b7da63ba2e3
➸ OLED Display
Organic Light-Emitting Diode ( OLED ) adalah sebuah semikonduktor sebagai pemancar cahaya yang terbuat dari lapisan organik. OLED digunakan dalam teknologi elektroluminensi, seperti pada aplikasi tampilan layar atau sensor. OLED Display ini memiliki 4 pin, yaitu GND, VCC, SCL, dan SDA. Oke, dengan adanya penjelasan singkat tentang sensor tadi saya harap teman-teman jadi kebayang nihh tentang percobaan kali ini. Jadi, tunggu apalagi langsung aja kita masuk ke percobaannya. Check This Out!
➸ Daftar Komponen
Agar percobaan kali ini berjalan dengan lancar, pastikan teman-teman harus punya daftar komponen yang dibutuhkan yaitu :
- ESP32 DEVKIT V1
- Breadboard
- Laptop
- Kabel micro USB
- 4 buah kabel jumper male to male
- 1 buah OLED Display 128x64P
➸ Diagram Skema
Supaya teman-teman lebih mudah merakitnya saya akan menampilkan diagram skema rangkaian di bawah ini.
Karena OLED Display menggunakan protokol komunikasi I2C, pemasangan kabel menjadi sangat sederhana. Pin yang paling cocok untuk komunikasi I2C di ESP32 adalah GPIO 22 (SCL) dan GPIO 21 (SDA). Jika, menggunakan OLED Display dengan protokol komunikasi SPI, gunakan GPIO berikut.
- GPIO 18: CLK
- GPIO 19: MISO
- GPIO 23: MOSI
- GPIO 5: CS
Langkah selanjutnya, kita akan menginstal beberapa Library yang digunakan untuk mengontrol OLED Display dengan ESP32.
➸ Menginstal Library OLED
Ada beberapa Library yang tersedia untuk mengontrol OLED Display dengan ESP32. Dalam percobaan ini kita akan menginstal tiga library yaitu Adafruit SSD1306, Adafruit GFX Library, dan Adafruit BusIO.
- Adafruit SSD1306, pilih Sketch → Include Library → Manage Library. Lalu, lakukan pencarian “ Adafruit SSD1306 “ kemudian install.
2. Adafruit GFX Library, pilih Sketch → Include Library → Manage Library. Lalu, lakukan pencarian “ Adafruit GFX Library “ kemudian install.
3. Adafruit BusIO, pilih Sketch → Include Library → Manage Library. Lalu, lakukan pencarian “ Adafruit BusIO “ kemudian install.
Setelan melakukan semua penginstalan, kita akan memulai dengan menjalankan programnya.
➸ Daftar Program
Pada percobaan ini saya akan menampilkan “ Hello, World! “ dan menampilkan beberapa Gambar bentuk ( titik, garis, segitiga, lingkaran, persegi panjang ).
➢ Program Hello, World!
/*********
Rui Santos
Complete project details at https://randomnerdtutorials.com
*********/
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
#define SCREEN_WIDTH 128 // OLED display width, in pixels
#define SCREEN_HEIGHT 64 // OLED display height, in pixels
// Declaration for an SSD1306 display connected to I2C (SDA, SCL pins)
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1);
void setup() {
Serial.begin(115200);
if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) { // Address 0x3D for 128x64
Serial.println(F("SSD1306 allocation failed"));
for(;;);
}
delay(2000);
display.clearDisplay();
display.setTextSize(1);
display.setTextColor(WHITE);
display.setCursor(0, 10);
// Display static text
display.println("Hello, world!");
display.display();
}
void loop() {
}Disini saya akan menjelaskan secara singkat bagaimana program ini bekerja. Dimulai dengan menginisialisasi serial monitor. Setelah menginisialisasi tampilan, tambahkan jeda dua detik, sehingga OLED memiliki cukup waktu untuk menginisialisasi sebelum menulis teks. Sebelum menulis teks, kita perlu mengatur ukuran teks, warna dan tempat teks akan ditampilkan di OLED. Terakhir, program akan menampilkan teks “ Hello, World! “ pada layar OLED.
➢ Program Gambar Bentuk
/*********
Rui Santos
Complete project details at https://randomnerdtutorials.com
*********/
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
#define SCREEN_WIDTH 128
#define SCREEN_HEIGHT 64
// Declaration for an SSD1306 display connected to I2C (SDA, SCL pins)
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1);
void setup() {
Serial.begin(115200);
if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {
Serial.println(F("SSD1306 allocation failed"));
for(;;);
}
delay(2000); // Pause for 2 seconds
// Clear the buffer
display.clearDisplay();
// Draw a single pixel in white
display.drawPixel(64, 32, WHITE);
display.display();
delay(3000);
// Draw line
display.clearDisplay();
display.drawLine(0, 0, 127, 20, WHITE);
display.display();
delay(3000);
// Draw rectangle
display.clearDisplay();
display.drawRect(30, 10, 50, 30, WHITE);
display.display();
delay(3000);
// Fill rectangle
display.fillRect(30, 10, 50, 30, WHITE);
display.display();
delay(3000);
// Draw round rectangle
display.clearDisplay();
display.drawRoundRect(10, 10, 30, 50, 2, WHITE);
display.display();
delay(3000);
// Fill round rectangle
display.clearDisplay();
display.fillRoundRect(10, 10, 30, 50, 2, WHITE);
display.display();
delay(3000);
// Draw circle
display.clearDisplay();
display.drawCircle(64, 32, 10, WHITE);
display.display();
delay(3000);
// Fill circle
display.fillCircle(64, 32, 10, WHITE);
display.display();
delay(3000);
// Draw triangle
display.clearDisplay();
display.drawTriangle(10, 10, 55, 20, 5, 40, WHITE);
display.display();
delay(3000);
// Fill triangle
display.fillTriangle(10, 10, 55, 20, 5, 40, WHITE);
display.display();
delay(3000);
// Invert and restore display, pausing in-between
display.invertDisplay(true);
delay(3000);
display.invertDisplay(false);
delay(3000);
}
void loop() {
}Disini saya akan menjelaskan secara singkat bagaimana program ini bekerja. Dimulai dengan menampilkan gambar titik. Untuk menggambar titik di layar OLED, kita dapat menggunakan fungsi drawPixel (x, y, warna). Kemudian, menggunakan fungsi drawLine (x1, y1, x2, y2, warna) untuk menggambar garis. Kemudian, menggunakan fungsi drawRect (x, y, lebar, tinggi, warna) untuk menggambar persegi panjang. Kemudian, menggunakan fungsi drawCircle (x, y, radius, warna) untuk menggambar lingkaran. Untuk membuat lingkaran penuh, gunakan fungsi fillCircle( ). Terakhir, menggunakan fungsi drawTriangle (x1, y1, x2, y2, x3, y3, color) untuk menggambar lingkaran. Untuk membuat segitiga penuh, digunakan fungsi fillTriangel( ). Sedangkan untuk membuat segitiga segitiga terbalik, digunakan fungsi invertDisplay ().
Agar teman-teman lebih kebayang gimana sihh hasilnya. Yukk kita simak!
➸ Hasil Eksperimen
Yeayyy! percobaan kali ini berhasil. Agar teman-teman lebih paham lagi gimana prosesnya ketika program yang ditampilkan berjalan dengan menampilkan teks “ Hello, World “ dan Gambar bentuk pada layar OLED, saya akan memberikan video di akhir percobaan ini ya.
➢ Hello, World!
➢ Gambar Bentuk ( titik, garis, segitiga, lingkaran, persegi panjang ).
Saya akan menceritakan kendala yang saya alami ketika melakukan percobaan ini sebagai berikut.
Pada saat saya mengompile program tersebut terdapat tulisan “ Error compilling for board DOIT ESP32 DEVKIT V1 “. Saya mencoba mengecek ulang dimana kesalahan saya tapi masih gagal. Saya mencoba hingga berhari-hari untuk mencari letak kesahalan saya hingga pada akhirnya merasa ingin menyerah. Maka dari itu, saya memutuskan untuk menanyakan masalah yang saya alami ke teman saya. Akhirnya, saya telah menemukan letak kesalahannya yaitu saya lupa untuk menginstall Library Adafruit BusIO karena Arduino sendiri belum bisa membaca program dari I2C sehingga program tersebut tidak dapat berjalan. Saya juga baru menyadari bahwa Library Adafruit BusIO berfungsi untuk membaca I2C. Jadi, itulah kendala yang saya alami :’)
Pada percobaan ini, saya dapat mempelajari bahwa :
- ESP32 mampu untuk menjalankan OLED Display dengan baik sesuai dengan perintah program yang dijalankan.
- OLED Display yang ditampilkan sudah sesuai dengan program yang dijalankan.
Baiklah, sekian dari saya dan sampai jumpa di project-project selanjutnya! Stay toon!
Selamat Mencoba Teman-teman :)
#Project 5 OLED Display
#Referensi