Embedded System 5th Project — LCD Display & PWM

7 min readMar 11, 2023

Hi ges, selamat datang kembali di proyek ke 5 kali ini!! Setelah minggu kemaren kita menggunakan external sensor BMP280, kita sekarang mau mencoba mengeluarkan tulisan pada display LCD. Kalau kalian mau baca proyek-proyek sebelumnya bisa klik disini dulu!!

— Project Introduction

Jadi gais, kita akan mencoba untuk menggunakan sebuah LCD display untuk menampilkan kata-kata ataupun simbol yang kita inginkan. Disini LCD display yang kita gunakan berukuran 16x2. Oleh karena itu kita membutuhkan beberapa alat-alat untuk menjalankan proyek kali ini, yaitu:

ESP32
Kabel MicroUSB
LCD Display
Breadboard
Kabel Male to Female (8 buah) / Kabel Female to Female (4 buah)

Nah oke ayo kita mulai ngerangkai!!

— The Circuitry

Untuk menyambungkan rangkaian kali ini kita perlu menyambungkan 4 pin pada ESP32 dengan 4 pin pada LCD display kita, yaitu :

ESP32 GND — LCD GND
ESP32 Vin — LCD VCC
ESP32 GPIO21/D21 — LCD SDA
ESP32 GPIO22/D22 — LCD SCL

Berikut gambar rangkaian untuk proyek kali ini :

Rangkaian Menggunakan 8 Kabel Male to Female

Rangkaian Menggunakan 4 Kabel Female to Female

Sebenarnya akan lebih mudah untuk menggunakan kabel Female to Female karena hanya akan menggunakan 4 kabel, tetapi karena saya hanya memiliki kabel Male to Male dan Male to Female jadi terpaksa mencoba mencari cara lain. Cara yang saya pilih adalah menggunakan breadboard sebagai penyambung antara ESP dan LCD Display.

— Installing the LiquidCrystal_I2C Library

Untuk bisa menggunakan LCD Display kita, dibutuhkan sebuah library external. Untuk menginstall library tersebut bisa mengikuti cara ini,

Klik link ini untuk mendownload .zip file library tersebut.
Unzip file tersebut dan akan ditemukan folder LiquidCrystal_I2C-master
Ubah nama folder tersebut menjadi LiquidCrystal_I2C dan pindahkan ke folder libraries Arduino IDE
Matikan dan nyalakan kembali Arduino IDE anda

Setelah selesai dengan langkah-langkah diatas, kita dapat mulai menggunakan LCD display kita

— Finding the LCD Address

Untuk menggunakan sebuah alat I2C kita membutuhkan address alat tersebut. Nah, untuk mulai mengeluarkan output pada LCD kita membutuhkan address LCD tersebut. Untuk mendapatkannya kita tinggal melakukan copy dan paste code dibawah ini, dan melakukan upload kepada ESP32 kita. Setelah itu address LCD display akan muncul di Serial Monitor pada baud rate 115200.

/*********
  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);          
}

Disini bisa dilihat kita menemukan address LCD display kita pada 0x27.

— The Code

/*********
  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);  

String messageStatic = "18221095";
String messageToScroll = "Halo nama aku Owen";

// Function to scroll text
// The function acepts the following arguments:
// row: row number where the text will be displayed
// message: message to scroll
// delayTime: delay between each character shifting
// lcdColumns: number of columns of your LCD
void scrollText(int row, String message, int delayTime, int lcdColumns) {
  for (int i=0; i < lcdColumns; i++) {
    message = " " + message;  
  } 
  message = message + " "; 
  for (int pos = 0; pos < message.length(); pos++) {
    lcd.setCursor(0, row);
    lcd.print(message.substring(pos, pos + lcdColumns));
    delay(delayTime);
  }
}

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

void loop(){
  // set cursor to first column, first row
  lcd.setCursor(4, 0);
  // print static message
  lcd.print(messageStatic);

  // print scrolling message
  scrollText(1, messageToScroll, 250, lcdColumns);
}

byte ArrowDown[8] = {
 0b00000,
 0b00100,
 0b00100,
 0b00100,
 0b00100,
 0b11111,
 0b01110,
 0b00100
};

byte ArrowUp[8] = {
 0b00100,
 0b01110,
 0b11111,
 0b00100,
 0b00100,
 0b00100,
 0b00100,
 0b00000
};

/*********
  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
  // print message
  //Membuat variabel untuk arrowup and arrow down
  lcd.createChar(0, ArrowDown);
  lcd.createChar(1,ArrowUp);
  lcd.setCursor(3,0);
  lcd.print("Going Down");
  
  //Delay agar arrow keluar telat
  delay(1000);

  lcd.setCursor(0,0);
  lcd.write(0);
  lcd.setCursor(15,0);
  lcd.write(0);
  delay(2000);
  lcd.clear();
  lcd.setCursor(4, 1);
  lcd.print("Going Up");
  
  //Delay agar arrow keluar telat
  delay(1000);
  lcd.setCursor(0,1);
  lcd.write(1);
  lcd.setCursor(15,1);
  lcd.write(1);
  delay(2000);
  lcd.clear();
}

— Code Analysis

Disini saya melakukan 2 kali testing dengan 2 kode yang berbeda. Pada kode yang pertama saya mencoba menjalankan sebuah text static dan text yang berjalan (dengan text berjalan ini kita dapat memasukkan text yang lebih dari 16 character). Pada kode yang kedua saya mencoba mencetak text yang blinking dengan menggunakan sistem clear dan mencetak text berbentuk simbol . Saya sedikit mengubah kode dari randomnerdstutorial dengan membuat panah muncul sedikit lebih lama dari tulisannya. Rencana awal saya adalah panah blinking 2x terlebih dahulu tetapi ada sedikit kendala sehingga tidak jadi menggunakan rencana tersebut.

// 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);

Pada bagian kode diatas, kita akan menginisasi panjang dan lebar dari LCD display kita yaitu 16x2. Setelah itu kita akan membuat variabel lcd yang akan kita gunakan untuk mengakses LCD display kita.

void scrollText(int row, String message, int delayTime, int lcdColumns) {
  for (int i=0; i < lcdColumns; i++) {
    message = " " + message;  
  } 
  message = message + " "; 
  for (int pos = 0; pos < message.length(); pos++) {
    lcd.setCursor(0, row);
    lcd.print(message.substring(pos, pos + lcdColumns));
    delay(delayTime);
  }
}

Fungsi scrollText merupakan fungsi yang saya ambil dari randomnerdstutorial yang menerima 4 parameter, yaitu row, message (text yang akan dicetak), delay time, dan lcdcolumns. Fungsi ini berfungsi untuk membuat text berjalan pada LCD display kita.

lcd.backlight();
lcd.setCursor(x,y)
lcd.print(message);
lcd.createChar(x,shape);
lcd.write(x);
lcd.clear();

Diatas merupakan beberapa fungsi dari liquidcrystal. lcd.backlight() digunakan untuk menyalakan display, lcd.setCursor(x,y) digunakan untuk meletakkan posisi kursor dimana text akan dicetak (x = baris, y = kolom), lcd.print(message) digunakan untuk mencetak sebuah text, lcd.chearChar(x,shape) digunakan untuk membuat sebuah variabel x yang berisi bentuk yang diinginkan, lcd.write(x) berfungsi untuk mencetak bentuk dari variabel x ke dalam display, dan lcd.clear() berfungsi untuk mengosongkan lcd display.

byte ArrowDown[8] = {
 0b00000,
 0b00100,
 0b00100,
 0b00100,
 0b00100,
 0b11111,
 0b01110,
 0b00100
};

Contoh diatas adalah hasil pembuatan shape menggunakan website ini.

Berikut adalah hasil dari kedua kode dijalankan :

— PWM Explanation & Circuit

Jadiii kita disini tuh ada 1 proyek lagi ternyata, yaitu PWM. Apa itu PWM??? PWM tuh Pulse Width Modulation yaitu sebuah teknik untuk memperoleh sinyal analog dari suatu sistem digital. Nah teknik ini tuh bisa digunain salah satu contohnya untuk mengatur brightness LED. Untuk coba proyek ini dibutuhkan :

ESP32
Breadboard
MicroUSB
2 LED
2 Resistor

— PWM Code & Analysis

// the number of the LED pin
const int ledPin = 16;  // 16 corresponds to GPIO16
const int ledPin3 = 5;  // 5 corresponds to GPIO5

// setting PWM properties
const int freq = 5000;
const int ledChannel = 0;
const int resolution = 8;
 
void setup(){
  // configure LED PWM functionalitites
  ledcSetup(ledChannel, freq, resolution);
  
  // attach the channel to the GPIO to be controlled
  ledcAttachPin(ledPin, ledChannel);
  ledcAttachPin(ledPin3, ledChannel);
}
 
void loop(){
  // increase the LED brightness
  for(int dutyCycle = 0; dutyCycle <= 255; dutyCycle++){   
    // changing the LED brightness with PWM
    ledcWrite(ledChannel, dutyCycle);
    delay(15);
  }

  // decrease the LED brightness
  for(int dutyCycle = 255; dutyCycle >= 0; dutyCycle--){
    // changing the LED brightness with PWM
    ledcWrite(ledChannel, dutyCycle);   
    delay(15);
  }
}

Nah untuk bisa menggunakan teknik PWM ini pada lampu LED, kita harus melakukan setup terlebih dahulu pada void setup() yaitu dengan menjalankan ledcSetup(ledChannel, freq, resolution). Setelah itu kita akan memasukkan pin yang digunakan untuk menyambungkan LED pada ESP (GPIO5 dan GPIO16) ke LED channel. Selanjutnya pada bagian looping kita akan menggunakan angka 0–255 untuk mengatur keterangan lampu LED dan akan menggunakan fungsi ledcWrite(ledchnanel,dutyCycle) untuk menyalakan lampu tersebut.

— Closing

Nah jadi sekian gais untuk proyek kali ini. Seru juga kan ya berhasil menulis text” di LCD Display dan mainin PWM jadinya bisa ngeliat lampu mati nyala pelan-pelan. Cukup sampai disini saja gais dan sampai jumpa di blog berikutnya!!!