Tutorial ESP32 : Display — OLED
Halo gais! Welcome to Project #5
Pada artikel ini, kita bakal bahas topik baru, yaitu Display. Yak, jadi kita akan belajar untuk menampilkan grafis, teks, dan tampilan lain pada display. Display yang biasa digunakan dengan ESP32 adalah LED dan OLED. Pada proyek kali ini, display yang aku pakai adalah OLED (Organic Light Emitting Diode) berukuran 0,96 inch dengan 128x64 pixels. Display OLED akan lebih jelas jika dilihat pada kondisi lingkungan yang gelap. Pada OLED yang aku gunakan, terdapat 4 pin yang dapat berkomunikasi dengan mikrokontroler dengan menggunakan protokol komunikasi I2C. Yuk, langsung aja kita coba.
Komponen yang Dibutuhkan
Buat proyek kali ini, kita butuh beberapa komponen yaitu :
- ESP32 Development Board
- OLED
- Kabel jumper (male-to-male)
- Breadboard
- Kabel micro-USB
- Laptop
- Sensor BME-280
Sebelom kita pake displaynya, kita harus install library di Arduino IDE terlebih dahulu. Jadi, kita harus download Adafruit_SSD1306 library dan Adafruit_GFX library yang dapat dicari di Sketch > Include Library > Manage Libraries.
Menampilkan Grafis
Nah, setelah install library-nya, aku mau coba cek dulu OLED yang aku pakai bisa digunakan apa engga. Jadi, aku pakai kode yang ada di di Files > Examples > Adafruit SSD1306 > ssd1306_128x64_i2c. Pertama, kita rangkai komponennya seperti Gambar 2. Buat wiring-nya, bisa cek Tabel 1 supaya lebih jelas, jangan sampai ketuker yaa.
Nah, kalo udah selesai merangkai komponennya, kita cari tau dulu address OLED yang dipakai. Caranya, copy kode di bawah ke Arduino IDE dan setelah Upload kode, buka Tools > Serial Monitor dan ubah baud rate ke 115200. Seharusnya, tampilannya akan seperti Gambar 3. Karena tulisannya “I2C device found at address 0x3C”, berarti OLED yang dipakai terhubung di 0x3C.
//kode cekAddress
/*********
Rui Santos
Complete project details at https://randomnerdtutorials.com
*********/
#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 tau addressnya, ubah address-nya di bagian if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)),sesuaiin sama address OLED kalian masing-masing yaa. Selain itu, kalo OLED-nya ga ada tombol reset atau pakai tombol reset ESP32, kalian perlu tulis #define OLED_RESET -1 pada kode kalian.
Jika berhasil, OLED akan menampilkan berbagai macam tampilan, seperti lingkaran, persegi, bintang, dan lain sebagainya.
Menampilkan Teks
Untuk percobaan yang kedua, bentuk rangkaian masih sama, kita hanya perlu ubah kode programnya saja. Kali ini, aku mau coba tampilin tulisan “Hello, World!” ke layar OLED.
//kode displayText
#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)) {
Serial.println(F("SSD1306 allocation failed"));
for(;;);
}
delay(2000);
display.clearDisplay(); //mengosongkan layar
display.setTextSize(1); //mengatur ukuran teks
display.setTextColor(WHITE); //mengatur warna teks
display.setCursor(0, 10); //mengatur letak teks (koordinat)
// Display static text
display.println("Hello, world!"); //teks yg ingin ditampilkan
display.display(); //menampilkan teks
void loop() {
}Dengan kode tersebut, kita dapat menampilkan tulisan statis dengan ukuran, letak, dan teks yang bermacam-macam.
Menampilkan Suhu yang Dideteksi Sensor
Nah, kali ini aku mau coba gabungin apa yang kita pelajari minggu lalu, yaitu eksternal sensor. Jadi, aku mau nampilin nilai temperatur yang dideteksi oleh sensor BME-280 ke OLED. Pertama, rangkai komponen seperti pada Gambar 4.
Sebenarnya, rangkaiannya mirip sama rangkaian pada Gambar 2, kita cuma perlu tambahin sensor aja. Sensor yang aku pake adalah BME-280 yang memiliki 4 pin. Aku jelasin dikit pin-pin yang terhubung antara OLED dan BME-280 yaa. Pin VIN pada BME-280 dihubungkan ke VDD pada OLED, pin GND ke GND juga di OLED, pin SCL (BME-280) ke SCK (OLED), dan SDA ke SDA juga pada OLED. Kemudian, upload kode di bawah ini pada Arduino IDE.
// kode displaySensor
#include <Wire.h>//library display
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
Adafruit_BME280 bme; // I2C//library sensor
#include <Adafruit_Sensor.h>
#include <Adafruit_BME280.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);
bme.begin(0x76); // inisialisasi alamat bme280
if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {
Serial.println(F("SSD1306 allocation failed or couldn't find a valid bme280"));
for(;;);
}
delay(2000);
display.clearDisplay();
display.setTextColor(WHITE);
}
void loop() {
delay(5000);display.clearDisplay();
// display temperature
display.setTextSize(1);
display.setCursor(0,0);
display.println("Temperature: ");
display.println(" ");
display.setTextSize(2);
display.print(bme.readTemperature()); //menampilkan hasil deteksi sensor
display.setTextSize(1);
display.print(" o");
display.setTextSize(2);
display.print("C");
display.display();
}
Kalian juga bisa coba tampilkan hasil deteksi sensor lainnya, seperti tekanan dan kelembaban, cukup ubah pada bagian display.print(bme.readTemperature()).
Untuk lebih jelasnya, bisa langsung nonton video ini aja yaa :)
Analisis
Pada proyek kali ini, aku belajar tentang display OLED yang dapat menampilkan grafis, teks, dan lain sebagainya. Pengalaman yang menarik adalah waktu aku coba menampilkan temperatur yang dideteksi sensor pada OLED. Waktu aku coba, layar OLED ga nampilin apa-apa. Aku awalnya kira salah di bagian kodenya terus aku coba ubah-ubah tetap ga berhasil. Akhirnya aku cek rangkaian komponenku dan ternyata aku salah menyambungkan pin sensor BME-280. Akhirnya aku benerin dan berhasil deh hehe. Jadi, pastiin wiring-nya udah bener dan jangan lupa cek address display yang dipakai juga. Nah, jadi gitu dulu yaa buat proyek kali ini. Stay tune buat proyek-proyek berikutnya yang bakal lebih seru! :)