[5th Project of Embedded System] ESP32 OLED Display with Arduino IDE
Bonjour, guys! Pada kali ini, kita akan membahas bagaimana cara menggunakan OLED Display dengan ESP32 yang dapat menampilkan tulisan, gambar, maupun shapes! Sebelum kita mulai ke proyek kita, alangkah lebih baiknya kita mengenal OLED Display yang akan kita gunakan terlebih dahulu!
OLED Display
Pada proyek kali ini, OLED Display yang akan digunakan memiliki ukuran 0.96 inci, 128 ×64 dot matriks, dan disertai warna kuning dan biru.
OLED Display ini memiliki 4 pin, yaitu GND, VCC, SCL, dan SDA. Tunggu apa lagi? Ayo kita lanjut saja ke bagian selanjutnya!
Parts Required
Untuk memulai proyek ini, tentu saja terdapat beberapa komponen yang kita butuhkan:
- ESP32
- OLED Display
- 4 Jumper Wires Male to Male
Schematic
Rangkaian tersebut dihubungkan berdasarkan:
Installing Libraries
Sebelum masuk ke penulisan kode, terdapat library yang harus di-install agar proyek ini dapat berjalan.
- Pilih Sketch pada Arduino IDE
2. Pilih Include Library dan pilih Manage Libraries
3. Setelah Library Manager terbuka, install Adafruit SSD1306
4. Kemudian, install GFX Library
5. Setelah proses instalansi selesai, jangan lupa untuk me-restart Arduino IDE-mu!
Program Details and Experiment
Pada bagian ini, Aku akan langsung memberikan program bersamaan dengan hasil tampilannya pada OLED. Aku melakukan hal ini karena terdapat banyak sekali hasil yang akan Aku tampilkan kepada kalian! Oleh karena itu, Aku memutuskan untuk memberikan program dengan hasilnya secara bersamaan. Ayo kita langsung saja!
Hello, World!
Program pertama yang akan kita coba adalah menampilkan teks “Hello, World!” pada layar OLED! Ayo langsung kita coba saja!
Program di atas ini akan menghasilkan tampilan seperti pada gambar di bawah ini pada layar OLED.
Kemudian, mari kita coba untuk mengubah ukuran teksnya menjadi satu, yaitu mengubah kode pada line 26 menjadi display.setTextSize(1). Pengubahan kode ini akan menghasilkan tampilan seperti pada gambar di bawah.
Rectangle
Program selanjutnya yang akan Aku tampilkan adalah gambar rectangle! Sebenarnya, terdapat banyak sekali fungsi-fungsi yang ada untuk display OLED ini dan yang Aku pilih untuk tampilkan adalah gambar persegi.
Program di atas akan menampilkan gambar seperti di bawah ini.
drawRect()Terdapat beberapa hal yang perlu diperhatikan pada metode utama yang menampilkan rectangle, yaitu display.drawRect(10, 10, 50, 30, WHITE). Parameter-parameter yang dibutuhkan pada metode tersebut adalah drawRect(x, y, width, height, color). x menunjukkan lokasi pada sumbu x dan y menunjukkan lokasi pada sumbu y. width menunjukkan lebar dari persegi yang akan dibuat, sedangkan height menunjukkan tinggi dari persegi yang akan dibuat.
Selain itu, kita juga dapat menggunakan metode fillRect(x, y, width, height, color) untuk menggambar filled rectangle. Jika line 25, yaitu display.drawRect(10, 10, 50, 30, WHITE) kita ubah menjadi display.fillRect(10, 10, 50, 30, WHITE), maka OLED akan menampilkan gambar seperti di bawah ini.
Tidak hanya itu, kita juga dapat menggambar rectangle yang ujungnya bulat! Parameter yang harus ditambah hanyalah radius, yaitu drawRoundRect(x, y, width, height, radius, color) atau fillRoundRect(x, y, width, height, radius, color).
Invert
Pada bagian ini Aku akan menampilkan pada kalian metode invert. Metode yang diperlukan untuk penggunaan invert hanyalah invertDisplay(), dengan parameter true atau false. Aku akan mencoba untuk menampilkan invert dari program fillRect() yang sudah Aku buat!
Program di atas akan memberikan tampilan seperti gambar di bawah ini.
Display Bitmap Images
Program terakhir yang akan Aku jelaskan kepada kalian adalah untuk menampilkan gambar manusia! Ya, kamu tidak salah baca. Program-program sebelumnya yang sudah Aku tampilkan itu memang sudah ada metodenya pada Arduino IDE. Namun, untuk menampilkan gambar manusia, terdapat beberapa hal yang harus kamu perhatikan, mulai dari konversi gambar menjadi kode hingga pengeditan gambar!
Jadi, gambar yang akan aku tampilkan pada OLED adalah foto berikut.
Sebelum kalian memilih foto yang akan kalian tampilkan pada OLED, kalian harus memperhatikan ukuran dari foto tersebut! Karena OLED hanya berukuran 128 ×64, maka kalian harus mengedit foto tersebut agar foto tersebut dapat dimuat dalam OLED. Kalau begitu, ayo kita mulai saja!
- Mengubah ukuran foto
Setelah Aku ubah, foto tersebut terkesan lebih buruk (tentu saja). Alangkah lebih baiknya jika kalian dapat menemukan foto-foto yang memiliki ukuran 128 ×64 dari awalnya agar kalian tidak perlu meng-compress foto yang kalian pilih!
Seperti yang kalian lihat di atas, fotonya menjadi sangat kecil (sedih sekali).
2. Simpan foto dalam bentuk monochrome bitmap
Untuk menyimpan foto yang Aku pilih dalam bentuk monochrome bitmap, Aku menggunakan aplikasi Paint. Aku tidak tahu aplikasi-aplikasi edit lainnya yang memiliki fitur ini, namun jika kalian penasaran, mungkin kalian dapat mencobanya di aplikasi edit favorit kalian!
Setelah disimpan dalam bentuk monochrome bitmap, fotonya berubah seperti gambar di atas!
3. Konversi foto dalam bentuk kode C
Langkah selanjutnya adalah untuk mengubah foto yang telah kita simpan dalam bentuk monochrome bitmap ke kode C. Untuk melakukan hal ini, kalian dapat menggunakan aplikasi image to C converter. Terdapat banyak aplikasi yang dapat digunakan untuk pengkonversian ini, namun Aku sendiri menggunakan LCD Image Converter.
Kalian dapat menjalankan aplikasi tersebut dan pilih New Image, kemudian pergi ke Image > Import
Dan setelah kalian meng-import foto yang kalian inginkan, tampilannya akan seperti ini.
Setelah itu, pergi ke Option > Conversion
Kemudian, pada tab Prepare bagian Scanning, ubah Main Scan Direction menjadi Top to Bottom dan Line Scan Direction menjadi Forward.
Kemudian pergi ke bagian Preprocessing dan pilih Type Monochrome dan Threshold Dither.
Setelah itu, pergi ke Tab Image, pilih Split to rows, Block size: 8 bit, dan Byte order: Little-Endian. Kemudian, kalian dapat langsung klik OK.
Setelah itu, pergi ke File > Convert. Jangan lupa untuk konversi ke kode C!
Setelah itu, buka program C yang kalian dapatkan. Ambil bagian arraynya saja dari program tersebut! Untuk array yang Aku dapatkan adalah seperti ini.
Setelah kalian mendapatkan array dari foto yang telah kalian konversi, lakukan copy paste array tersebut seperti kode di bawah ini.
Kode di atas akan menampilkan gambar seperti di bawah ini.
Bagaimana? Menarik, bukan?
Analysis
Terdapat beberapa hal yang harus diperhatikan pada saat kalian menulis kode untuk menampilkan apa pun pada OLED. clearDisplay() menjadi salah satu kode yang sangat penting untuk diperhatikan. Hal ini karena clearDisplay() berfungsi untuk membersihkan layar dari tampilan bawaan OLED. Akan Aku perlihatkan jika clearDisplay() dihilangkan dari program Hello, World! yang sudah Aku buat.
Bagaimana? Cukup sulit untuk melihat program yang kita buat, bukan? Bagaimana jika Aku hilangkan clearDisplay() dan display.println(“Hello, world!”) ? Ayo dilihat gambar di bawah ini!
Sekarang kalian makin terlihat, bukan? Apa yang akan terjadi jika clearDisplay() tidak ditulis dalam kode? Bukan hanya clearDisplay(), terdapat metode lain yang tidak kalah penting, yaitu metode display(). Tanpa adanya metode ini, maka tampilan apa pun yang kita coba untuk tampilkan pada OLED, maka tidak akan ada apa pun yang muncul pada OLED. Oleh karena itu, display() menjadi sangat vital pada eksperimen ini.
Closing
Yah, cukup sekian untuk eksperimen kali ini. Eksperimen yang kita lakukan semakin lama semakin menantang bukan? Kalau begitu, tunggu apa lagi? Langsung saja kalian coba eksperimen-eksperimen yang Aku coba! Dengan begitu, kalian juga akan semakin mengerti mengenai eksperimen-eksperimen ini! Kalau begitu, sampai jumpa di eksperimen lainnya, ya!
