ESP32 Project 5 : Display OLED Interfacing
- K02_Faiza Aqiela Zuma
- Mar 4, 2022
- 4 min read
Updated: Mar 19, 2022
Hello, balik lagi di sini another part of simple project using ESP32. So dalam projek kali ini akan melakukan percobaan output melalui Display OLED Interface. Melalui projek ini hendaknya kita dapat memahami cara membaca suatu program serta mengerti cara menggunakan dan implementasi dari Interfacing menggunakan OLED Display melalui dengan ESP32. Pada percobaan kali ini akan digunakan OLED Display SSD1306 untuk menampilkan keluaran yang diinginkan. OLED (organic light emiting diode) biasanya digunakan untuk menampilkan teks, bitmap, gambar dan beberapa tipe jam. Sebelum memulai projek, kita cek terlebih dahulu OLED Display seperti pinout, koneksi ke ESP32 board dan kemudian kita akan menggunakan Arduino IDE untuk memprogram kita punya modul untuk menampilkan teks, bitmap, gambar dan beberapa tipe jam pada OLED Display.
SSD1306 OLED Pinout
Terdapat empat pin pada alat ini. Terdiri dari VCC, GND, SCL dan SDA yang menyatakan VCC dan GND pins sebagai power supply dari OLED Display yang akan dikoneksikan dengan power supply pins yang ada di ESP32 sesuai kebutuhan yakni 3.3v-5v. Kemudian terdapat SCL dan SDA pins yang sangat penting untuk membuat sinyal yang akan mentransmisikan data. Kedua pins ini akan terkoneksi dengabn I2C pins dari ESP32.
Size : 0.96 inch
Terminals : 4
Pixels : 128×64
Communication : I2C only
VCC : 3.3V-5V
Operating Temperature : -40℃ to +80℃
Tampilan SSD1306 Display dengan ESP32
As we have seen above, the OLED display has 4 terminals which we will connect with the ESP32 board. As the OLED display requires an operating voltage in the range of 3.3-5V hence we will connect the VCC terminal with 3.3V which will be in common with the ESP32 board. SCL of the display will be connected with the SCL pin of the module and the SDA of the display will be connected with the SDA of the module. By default, the I2C pin in ESP32 for SDA is GPIO21, and for SCL is GPIO22. The connections between the two devices can be seen below.
VCC=3.3V -> VCC Vcc merupakan power supply pin. diimplementasikan pada rentang 3.3v to 5.0 untuk pin ini.
GPIO21(I2C SDA) -> SDA Pins akan menerima data yang dikirimkan dari ESP32 board.
GPIO22(I2C SCL) -> SCL Pins akan menerima data yang dikirimkan dari ESP32 board.
GND -> GND GND akan terkoneksi dengan GND pin pada ESP32
Components Required:
We will need the following components to connect our ESP32 board with the OLED Display.
ESP32 board
SSD1306 OLED Display
Connecting Wires
Breadboard
OLED Display dikoneksikan dengan ESP32 yang nantinya akan diprogram menggunakan Arduino IDE. Diagram koneksi dapat dilihat pada gambar di bawah ini.
Sebelum kita masuk ke penulisan kode dan compiling. Untuk menggunakan OLED Display pada projek kali ini, kita harus menginstall Adafruit Library dari Adafruit SSD1306 dan Adafruit GFX library pada Arduino IDE. Untuk menginstall library cara cukup mudah cukup navigasikan kearah Sketch -> Include Library -> Manage Libraries lalu cari SSD1306 Library dan install. Kemudian tak lupa install juga library Adafruit GFX Library. Setelah semua persiapan telah dilakukan masuk ke bagian utama yakni bagaimana kita menampilkan interface melalui OLED Dipslay.
Ardunio Sketch : Menampilkan tulisan simpel pada OLED Display
Kali ini kita akan belajar mengenai cara menampilkan simpel teks di OLED display. Di sini akan digunakan Adafruit SSD1306 library untuk mengakses fungsi-fungsi untuk menampilkan teks dengan mudah pada OLED.
Sketch ini akan menampilkan "Welcome!" pada OLED display.
This sketch will display ‘Welcome!’ on the OLED display.
Demonstration
Saat kode sudah teruploud ke ESP32, OLED Display akan mulai menampilkan teks pada layar seperti yang dapat dilihat dibawah ini.
OLED Changing Fonts Type and Size
Jenis tulisan yang bisa diimplementasikan bervariasi. Kita bisa menggunakan jenis yang berbeda-beda (Serif, Sans, Mono) untuk menampilkan tulisan pada OLED.
This sketch shows you how to change the font to FreeMono9pt7b.
Draw Pixels, Lines and Shapes on OLED with ESP32
Selanjutnya kita berlajut belajar bagaimana menampilkan pixel, garis dan berbagai bangun datar pada OLED Display. Adapun yang dapat kita bentuk yakni diantaranya:
Pixel
Line
Rectangle (Unfilled, Filled and Rounded)
Circle (Unfilled and Filled)
Triangle (Unfilled and Filled)
Inverting the display colours (Dark/Bright)
Arduino Sketch
Sketch ini akan menampilkan semua ilustrasi yang tertera diatas dengan jeda 5 detik.
Displaying a Pixel
Pertama-tama kita akan menampilkan pixel pada layar OLED. Hal ini dapat terjadi dengan menggunakan fungsi drawPixel() yang ada pada Adafruit_SSD1306. Pada kode terlihat parameter(64, 32) yang menunjukkan x dan y yakni koordinat pada OLED. Dan WHITE sebagai pilihan warna.
OLED akan menampilkan pada layar seperti dibawah.
Draw Rectangle OLED
Kemudian kita akan menampilkan persegi panjang pada layar OLED dan termasuk yang terisi atau tidak. Dua parameter pertama menunjukkan koordinat dari sudut kiri atas dari persegi panjang. Dua parameter selanjutnya menunjukkan panjang dan lebar dari persegi panjang. dan parameter terakhir menunjukkan warna dari persegi panjang.
OLED akan menampilkan pada layar seperti di bawah.
Draw Circle on OLED
Untuk menampilkan lingkaran kita perlu menggunakan fungsi drawCircle() pada Adafruit_SSD1306 dan fungsi ini meliputi empat parameter. Untuk dua parameter pertama adalah koordinat dari titik tengah lingkaran. Parameter selanjutnya adalah radius dari lingkaran. dan parameter terakhir adalah warna dari lingkaran.
OLED akan menampilkan pada layar seperti di bawah.
Drawing a Triangle
Untuk menampilkan segitiga kita perlu menggunakan fungsi drawCircle() pada Adafruit_SSD1306 dan fungsi ini meliputi tujuh parameter. Dua parameter pertama menunjukkan sudut pertama dari segitiga. Dua parameter selanjutnya menunjukkan sudut kedua dari segitiga. Sama seperti sebelumnya dua selanjutnya juga menunjukkan sudut dari segitiga. Barulah parameter terakhir menunjukkan warna dari segitiga.
OLED akan menampilkan pada layar seperti di bawah.
Inverting OLED Display
Kita juga bisa melakukan invert terhadap warna dalam OLED display dengan menggunakan fungsi invertDisplay() dan mengganti 'true' sebagai parameternya.
OLED akan menampilkan pada layar seperti di bawah.
ESP32 PWM with Arduino IDE (Analog Output)
Selanjutnya, kita akan melanjutkan dengan percobaan selanjutnya yakni implementasi akuator dengan LED. Kali ini akan belajar bagaimana cara membuat PWM signals dengan EPS32. Namun karena tidak mempunyai motor untuk implementasinya maka di sini, sebagai contoh kita akan belajar cara mendapatkan PWM signal yang sama pada GPIO yang berbeda pada waktu yang sama.
Berikut ada beberapa yang perlu dipersiapkan:
ESP32 DOIT DEVKIT V1 Board
3x 5mm LED
3x 330 Ohm resistor
Breadboard
Jumper wires
Kita dapat mendapatkan signal dari channel yang sama dalam GPIOs yang berbeda. Untuk mendapatkan itu kita perlu memasang GPIOs pada channel yang sama di setup()
Schematic
Setelah merangkai seperti pada contoh skema di atas maka dilanjutkan pada penulisan sketch:
Demonstration
Setelah proses uploud sketch ke ESP32 selesai. mari lihat pada sirkuit. Semua GPIOs akan mengeluarkan pada PWM signal yang sama. Jadi semua tingkat kecerahan LEDs akan meningkat dan menurun secarah berurutan.
FAIZA AQIELA ZUMA
1822005
Comments