[II2260 — Embedded System, 5th Project] ESP32 Display : OLED & ESP32 PWM

— Pengantar

5 min readMar 15, 2023

Setelah membuat project keempat (ESP32 eksternal sensor), selanjutnya kita akan membahas tentang ESP32 display dan ESP32 PWM. Langsung saja kita mulai!

— Komponen

Komponen yang akan digunakan yaitu :

ESP32 + Breadboard
Kabel Micro USB
Kabel Jumper Male-to-Male
Lampu LED
Resistor 330 Ohm
Display OLED
Push Button

— Hands-On ESP32 Display

Untuk langkah pengerjaannya yaitu :

Sambungkan pin GPIO22 pada ESP32 ke pin SCL di OLED
Sambungkan pin GPIO21 pada ESP32 ke pin SDA di OLED
Sambungkan pin 3.3V pada ESP32 ke pin Vin di OLED
Sambungkan pin GND pada ESP32 ke pin GND di OLED

Adapun hasil rangkaiannya seperti gambar berikut.

5. Buka Arduino IDE kalian lalu silahkan install library Adafruit SSD1306 dan Adafruit GFX Library.

Tampilan library Adafruit SSD1306 dan Adafruit GFX Library.

6. Lalu upload code berikut

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

#include <Wire.h>
#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)) { // Address 0x3D for 128x64
    Serial.println(F("SSD1306 allocation failed"));
    for(;;);
  }
  delay(2000);
  display.clearDisplay();

  display.setTextSize(1);
  display.setTextColor(WHITE);
  display.setCursor(0, 10);
  // Display static text
  display.println("Hello, world!");
  display.display(); 
}

void loop() {
  
}

Code di atas bertujuan untuk menampilkan tulisan “Hello, world!” pada OLED. Jika kalian ingin mengganti tampilan tulisannya, kalian bisa mengubahnya pada potongan code display.println("masukkan kalimat")

7. Setelah berhasil diupload, maka hasilnya seperti gambar berikut

Tampilan OLED ketika code berhasil diupload

— Hands-On ESP32 PWM

Untuk percobaan PWM, adapun langkah-langkahnya sebagai berikut :

Sambungkan pin positif pada LED ke pin GPIO16 pada ESP32
Sambungkan pin ground pada ESP32 ke ground pada breadboard
Sambungkan pin negatif pada LED ke pin ground pada breadboard menggunakan resistor 330 ohm.

4. Setelah itu silahkan buka Arudino IDE kalian lalu upload coode berikut

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

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

5. Setelah berhasil diupload, maka hasilnya akan seperti video berikut

— Extra Project

Setelah berhasil menampilkan tulisan pada OLED, kita akan mencoba memvariasikan hasil project OLED kita dengan menambahkan push button yang mana output yang dihasilkan yaitu tampilan pada OLED akan berubah jika push button ditekan.

Adapun langkah-langkahnya seperti berikut :

Sambungkan pin GPIO22 pada ESP32 ke pin SCL di OLED
Sambungkan pin GPIO21 pada ESP32 ke pin SDA di OLED
Sambungkan pin 3.3V pada ESP32 ke pin Vin di OLED
Sambungkan pin GND pada ESP32 ke pin GND di OLED
Sambungkan push button pada breadboard
Sambungkan pin GPIO5 pada esp32 ke pin push button
Sambungkan pin push button yang sudah tersambung dengan GPIO5 ke ground dengan menggunakan resistor 330 ohm
Sambungkan pin satunya pada push button ke ground dengan menggunakan kabel jumper

Tampilan rangkaiannya seperti berikut

Tampilan rangkaian extra project (OLED + push button)

9. Buka Arduino IDE kalian lalu upload code berikut

#include <Wire.h>
#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
#define BUTTON_PIN 5
// Declaration for an SSD1306 display connected to I2C (SDA, SCL pins)
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1);
int button_state;       // the current state of button 
void setup() {
  Serial.begin(115200);
  button_state = digitalRead(BUTTON_PIN);
  if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) { // Address 0x3D for 128x64
    Serial.println(F("SSD1306 allocation failed"));
    for(;;);
  }
}

void loop() {
        // save the last state
  button_state = digitalRead(BUTTON_PIN); // read new state

  if (button_state == LOW) {
    Serial.println("The button is pressed");

    // toggle state of LED
    // control LED arccoding to the toggled state
    display.clearDisplay();

    display.setTextSize(1);
    display.setTextColor(WHITE);
    display.setCursor(0, 10);
    // Display static text
    display.println("Hafidz"); //Kalian bisa mengubah text ini
    display.display();
  }
  else{
    display.clearDisplay();

    display.setTextSize(1);
    display.setTextColor(WHITE);
    display.setCursor(0, 10);
    // Display static text
    display.println("Shidqi"); //Kalian bisa mengubah text ini
    display.display();
  }
}

10. Jika berhasil diupload, maka tampilan OLED seperti video berikut

Tampilan OLED dengan menggunakan push button

Kalian bisa mengubah text pada tampilan OLED dengan mengubah potongan code display.println("masukkan text") pada code di atas.

Dengan berhasilnya extra project merupakan akhir dari project kelima ini. Jika ada pertanyaan atau masalah, silahkan tulis di kolom komentar. Sekian dan terima kasih!