ESP32 feat I2C LCD — Hello, World!

ESP32 Project #5

6 min readFeb 27, 2021

Hello fellows!

Welcome to the 5th Project! Kali ini, topiknya adalah Display. Untuk ESP32, ada 2 pilihan komponen untuk display, yaitu LCD dan OLED. LCD (Liquid Crystal Display) itu display yang cuma bisa nampilin 2 warna, yaitu foreground color dan background color. LCD ini 8 bit jadi punya 8 pin untuk data, dengan pin 15 dan 16 untuk menyalakan lampu display-nya. Semua pin ini harus dihubungkan ke ESP32. Tapi sekarang udah ada I2C (Inter-Integrated Circuit) yang dipasang sebagai backpack untuk LCD-nya. I2C ini terhubung ke LCD dan membuatnya compatible dengan ESP32 hanya melalui 4 buah pin. Pilihan lain adalah OLED (Organic Light-Emitting Diode) yang dapat menampilkan lebih dari 1 warna. Bahkan, OLED dapat menampilkan garis, bidang, bahkan gambar dalam bentuk pixel. Karena itulah harga OLED jauh lebih mahal daripada I2C LCD.

Aku waktu itu belinya yang I2C LCD jadi di project ini aku bakal eksperimen pake komponendisplay itu. Buat kalian yang mau eksperimen pake OLED mungkin bisa coba liat referensi dari Random Nerd Tutorials. Buat yang punya I2C LCD, yuk langsung kita bahas aja~

Hello World Testing

Pertama, sebelum modifikasi project-nya, aku coba dulu komponennya, jalan atau ngga. Seperti biasa aku pake panduan dari Random Nerd Tutorials. Program yang aku pake itu program “Hello World” yang static, jadi simple banget. Komponen yang dibutuhkan itu :

1 buah ESP32 Development Board
Breadboard (opsional tapi recommended)
1 helai kabel micro-USB
4 helai jumper wire (male-to-female/female-to-female)
1 buah I2C LCD

Sebenernya ga pake breadboard bisa, jadi pake jumper wirenya yang female-to-female aja langsung. Tetapi, disarankan banget pake breadboard dan jumper wire male-to-female aja supaya komponennya lebih aman, ga banyak gerak atau kesentuh.

Untuk I2C LCD-nya, aku pake yang ukuran 16x2. I2C dan LCD ini harus dihubungkan dengan cara disolder. Kalau ga bisa atau ga punya solder jangan khawatir karena banyak toko yang jual I2C yang udah disolder ke LCD-nya. Kalau udah disolder artinya udah siap banget buat lanjut ke tahap selanjutnya!

Rangkaiannya sesuai yang ada di Random Nerd Tutorials :

Skema Rangkaian Hello World Testing I2C LCD

Sebelum upload kodenya, kita harus install dulu I2C LCD library di Arduino IDE. Caranya itu :

Download dulu library-nya dari link ini : https://github.com/marcoschwartz/LiquidCrystal_I2C/archive/master.zip
Karena hasilnya zip, kita harus unzip dulu pake opsi Extract Here supaya ga ada double foldernya (folder di dalam folder).

3. Rename folder menjadi LiquidCrystal_I2C

4. Pindahkan folder LiquidCrystal_I2C ke Arduino IDE installation libraries folder.

5. Re-open Arduino IDE.

Setelah library I2C LCD berhasil di-install, kita perlu mengecek alamat I2C LCD-nya. Kode untuk mengecek alamat ini sama seperti kode untuk mengecek alamat BMP280 di project sebelumnya, yaitu menggunakan kode pada link : https://raw.githubusercontent.com/RuiSantosdotme/Random-Nerd-Tutorials/master/Projects/LCD_I2C/I2C_Scanner.ino

Setelah dicek, ternyata alamatnya itu di aku 0x27. Kalau kalian pake I2C LCD yang 16x2 biasanya alamatnya bakal sama juga.

Sekarang, kita baru bisa masuk ke kode program utamanya. Kodenya juga sama dari Random Nerd Tutorials. Jangan lupa ubah lcdColumns dan lcdRows menyesuaikan komponen kalian. Alamat I2C LCD-nya juga jangan lupa diubah di bagian set alamat LCD (yang aku bold). Kalian bisa ubah output tulisannya di bagian lcd.print().

/*********
  Rui Santos
  Complete project details at https://randomnerdtutorials.com  
*********/

#include <LiquidCrystal_I2C.h>

// set the LCD number of columns and rows
int lcdColumns = 16;
int lcdRows = 2;

// set LCD address, number of columns and rows
// if you don't know your display address, run an I2C scanner sketch
LiquidCrystal_I2C lcd(0x27, lcdColumns, lcdRows);  

void setup(){
  // initialize LCD
  lcd.init();
  // turn on LCD backlight                      
  lcd.backlight();
}

void loop(){
  // set cursor to first column, first row
  lcd.setCursor(0, 0);
  // print message
  lcd.print("Hello fellows!");
  delay(1000);
  // clears the display to print new message
  lcd.clear();
  // set cursor to first column, second row
  lcd.setCursor(0,1);
  lcd.print("@nadyalaurentia");
  delay(1000);
  lcd.clear(); 
}

Nah, waktu pertama aku coba, ternyata ga berhasil. Displaynya biru polos kaya foto di bawah ini.

Ternyata, itu karena kontras LCD-nya belum diatur. Cara ngatur kontrasnya itu lewat sekrup yang ada di backpack-nya (yang di dalem kotak biru). Jadi lepas dulu rangkaian dari laptop, terus lepas juga I2C LCD dari rangkaian. Kalau udah puter sekrupnya pake obeng searah jarum jam sampe mentok. Seudah itu, baru sambungin lagi deh ke rangkaiannya dan ke laptop.

Seudah sekrupnya diputer dan aku rangkai lagi, ternyata tulisannya berhasil keluar gais yey! Hasilnya jadi kaya foto di bawah ini. Kontrasnya udah maksimal tapi ternyata masih kurang kontras. Konsekuensi harga murah sih jadi kualitasnya juga ga terlalu bagus. Walau agak susah tapi masih lumayan kebaca untungnya.

Summary

So far, intinya kalau mau pake I2C LCD ini jangan lupa 4 hal ini :

Install library I2C LCD di Arduino IDE
Cari address I2C LCD
Modifikasi kode sesuai kondisi I2C LCD masing-masing
Putar sekrup pada backpack untuk mengatur kontras

The Real Project

Karena udah berhasil ngecek I2C LCD-nya, di project kali ini aku mau coba eksperimen gabungin display ini sama sensor BMP280 kemarin. Jadi untuk project ini aku butuh :

1 buah ESP32 Development Board
2 buah breadboard
1 helai kabel micro-USB
8 helai jumper wire male-to-male
4 helai jumper wire male-to-female
1 buah I2C LCD
1 buah sensor BMP280

Untuk jumper wire-nya, kita butuh 3 paket, 1 paket male-to-male buat hubungin ESP32 ke breadboard, 1 paket male-to-male buat hubungin BMP280 ke breadboard, dan 1 paket male-to-female buat hubungin I2C LCD ke breadboard. Rangkaiannya jadi kaya gambar di bawah ini karena BMP280 dan I2C LCD both harus terhubung ke pin ESP32 yang sama. Untuk setiap pin aku pake kabel berwarna sama supaya ga pusing. Aku pake warna hitam untuk ground (GND), merah untuk tegangan (3V3, VCC), hijau untuk SDA/GPIO 21, dan kuning untuk SCL/GPIO 22.

Di project kali ini, aku mau nampilin temperatur lewat display. Jadi, aku tulis kodenya kaya di bawah ini :

//Include library untuk BMP280 dan I2C LCD
#include <Wire.h>
#include <Adafruit_BMP280.h>
#include <LiquidCrystal_I2C.h>//BMP280
Adafruit_BMP280 bmp;//I2C LCD
int lcdColumns = 16;
int lcdRows = 2;
LiquidCrystal_I2C lcd(0x27, lcdColumns, lcdRows);void setup() {
  //Setup BMP280
  Serial.begin(9600);
  Serial.println(F("BMP280 test"));if (!bmp.begin(0x76)) {
    Serial.println(F("Could not find a valid BMP280 sensor, check wiring!"));
    while (1);
  }/* Default settings from datasheet. */
  bmp.setSampling(Adafruit_BMP280::MODE_NORMAL,     /* Operating Mode. */
                  Adafruit_BMP280::SAMPLING_X2,     /* Temp. oversampling */
                  Adafruit_BMP280::SAMPLING_X16,    /* Pressure oversampling */
                  Adafruit_BMP280::FILTER_X16,      /* Filtering. */
                  Adafruit_BMP280::STANDBY_MS_500); /* Standby time. *///Setup I2C LCD
  lcd.init(); //Inisiasi   
  lcd.backlight(); //Menyalakan backlight LCD
}void loop() {
  //Set cursor ke kolom 1 baris 1
  lcd.setCursor(0, 0);
  //Tampilkan pesan
  lcd.print("Temperature =");
  //Set kursor ke kolom 1 baris 2
  lcd.setCursor(0,1);
  //Tampilkan temperatur
  lcd.print(bmp.readTemperature());
  lcd.print(" *C");
  delay(2000);
}

Nah langsung aja liat video aku merangkai dan mencoba eksperimen ini yaa! Seperti biasa jangan lupa nyalakan CC-nya~

Yeay berhasil gaiss! Buat coba sensornya, kaya kemarin, aku sentuh aja sensornya dan di display keliatan deh naik temperaturnya. Project ini agak tricky di bagian wiring-nya karena pin-pin di BMP280 dan I2C LCD connect ke pin ESP32 yang sama. Makanya tips untuk project ini harus super teliti waktu wiring-nya. Untuk mempermudah, pake kabel warna yang sama untuk pin-pin yang harus berhubungan. Perhatiin juga bahwa urutan pin di BMP280 dan di I2C LCD itu beda ya gais jangan sampe salah~ Jadi, kesimpulan untuk project kali iniii..

Project 5 : Successful!

Sekian cerita aku buat project display I2C ini. Semakin lama semakin challenging nih projectnya karena semakin banyak komponen eksternalnya. Walau mungkin ada gagal-gagalnya semangat terus ngulik ya gais karena kalo bisa solve problemnya itu pasti pemahaman kita bakal nambah jugaa! Intinya, banyakin jam terbang aja dan sering-sering diskusi sama sesama pengulik ESP32 huehe~ Kalo mau discuss sama aku juga boleh banget^^

Mungkin sampe sini dulu sharing hari ini, thank you yang udah baca sampe sini, see you in the project!

Adiós amigos!✨