Halo, apa kabar semuanya? Perkenalkan kembali saya Muhammad Vito Ibrahim. Pada kesempatan kali ini saya akan mencoba display OLED i2c yang dihubungkan dengan ESP32

Nah , project kali ini juga merangkap sebagai rekam jejak atau laporan saya untuk mata kuliah ( II2260 Sistem Embedded ). Agar lebih detail kali ini saya akan mencoba display atau layar tepatnya adalah OLED, menggunakan lcd pun juga bisa namun kali ini saya gunakan OLED untuk menampilkan data maupun gambar yang inputnya berasal dari ESP32. Sebelum memulai project, akan dijelaskan terlebih dahulu mengenai perangkat dan komponen yang akan digunakan.

Display OLED ESP32

Perangkat dan komponen yang digunakan:

1. Mikrokontroler ESP32 Development Board

2. Arduino IDE

3. Laptop/Desktop dengan USB port

4. Kabel micro usb to USB A ( kabel data/charger biasanya )

5. Breadboard ( Dapat digunakan maupun tidak)

6. Kabel Jumper ( siapkan ketiga jenis model kabel yaitu F-F, F-M, dan M-M untuk antisipasi)

7. OLED 128x64 i2c

Penjelasan beberapa perangkat dan komponen:

1. Mikrokontroler adalah sebuah komputer kecil yang dikemas dalam bentuk chip IC (Integrated Circuit) dan dirancang untuk melakukan tugas atau operasi tertentu.

2. ESP-32 Development Board adalah adalah mikrokontroler chip dengan rangkaian sistem hemat biaya dan rendah daya pada dilengkapi Wi-Fi yang terintegrasi dan Bluetooth.

3. Arduino IDE (Integrated Development Environment) adalah software yang di gunakan untuk memprogram di arduino, dengan kata lain Arduino IDE sebagai media untuk memprogram board Arduino. Pada kali ini bisa juga digunakan untuk memprogram mikrokontoler lainnya yaitu ESP32 dengan konfigurasi tambahan.

4. Breadboard adalah papan tempat komponen elektronik tanpa harus disolder.

5. Kabel jumper adalah kawat listrik, atau kabel, dengan konektor atau pin di setiap ujungnya, yang biasanya digunakan untuk menghubungkan komponen pada breadboard.

6. OLED adalah layar yang memiliki panel.

Pendahuluan :

Kali ini saya akan mencoba menggunakan display OLED dengan ESP32 untuk memprogram data yang akan ditampilkan ke display OLED.

Langkah pengerjaan :

a. wiring dan menghubungkan display OLED ke ESP32

Siapkan perangkat dan komponen.

Proses wiring sensor OLED dengan protokol komunikasi i2c ke ESP32 adalah sebagai berikut :

pin VIN pada OLED dihubungkan ke 3.3V pada ESP32

pin GND pada OLED dihubungkan ke GND pada ESP32

pin SCL pada OLED dihubungkan ke GPIO22 pada ESP32

pin SDA pada OLED dihubungkan ke GPIO21 pada ESP32

berikut adalah contoh skemanya :

b. install library SSD1306 OLED dan GFX di ArduinoIDE

Pada interface ArduinoIDE buka sketch > include library > manage library. Untuk project kali ini saya menggunakan library oleh Adafruit. Ketik ssd1306 pada kolom filter kemudian cari dan install.

Setelah menginstall library ssd1306 dilanjutkan dengan instalasi library GFX, dapat dilakukan dengan langkah yang serupa sebelumnya.

Ketika semua instalasi library telah selesai, restart Arduino IDE.

c. Menguji coba apakah sistem i2c sudah terkoneksi dengan baik ke ESP32

Masukkan kode berikut ke Arduino IDE kemudian compile dan upload ke ESP32

#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 berhasil upload, buka tools > serial monitor , jika koneksi i2c perangkat dengan ESP32 sudah berhasil maka di serial monitor akan dinyatakan seperti berikut :

d. Mencoba display OLED dengan ESP32

Buka File > Examples > Adafruit SSD1306 > ssd 1306_128x64 i2c

(mengingat saya menggunakan oled i2c berukuran 128x64)

Maka akan tampil kode berikut :

#include <SPI.h>
#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)
#define OLED_RESET     -1 // Reset pin # (or -1 if sharing Arduino reset pin)
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);

#define NUMFLAKES     10 // Number of snowflakes in the animation example

#define LOGO_HEIGHT   16
#define LOGO_WIDTH    16
static const unsigned char PROGMEM logo_bmp[] =
{ B00000000, B11000000,
  B00000001, B11000000,
  B00000001, B11000000,
  B00000011, B11100000,
  B11110011, B11100000,
  B11111110, B11111000,
  B01111110, B11111111,
  B00110011, B10011111,
  B00011111, B11111100,
  B00001101, B01110000,
  B00011011, B10100000,
  B00111111, B11100000,
  B00111111, B11110000,
  B01111100, B11110000,
  B01110000, B01110000,
  B00000000, B00110000 };

void setup() {
  Serial.begin(115200);

  // SSD1306_SWITCHCAPVCC = generate display voltage from 3.3V internally
  if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) { 
    Serial.println(F("SSD1306 allocation failed"));
    for(;;); // Don't proceed, loop forever
  }

  // Show initial display buffer contents on the screen --
  // the library initializes this with an Adafruit splash screen.
  display.display();
  delay(2000); // Pause for 2 seconds

  // Clear the buffer
  display.clearDisplay();

  // Draw a single pixel in white
  display.drawPixel(10, 10, WHITE);

  // Show the display buffer on the screen. You MUST call display() after
  // drawing commands to make them visible on screen!
  display.display();
  delay(2000);
  // display.display() is NOT necessary after every single drawing command,
  // unless that's what you want...rather, you can batch up a bunch of
  // drawing operations and then update the screen all at once by calling
  // display.display(). These examples demonstrate both approaches...

  testdrawline();      // Draw many lines

  testdrawrect();      // Draw rectangles (outlines)

  testfillrect();      // Draw rectangles (filled)

  testdrawcircle();    // Draw circles (outlines)

  testfillcircle();    // Draw circles (filled)

  testdrawroundrect(); // Draw rounded rectangles (outlines)

  testfillroundrect(); // Draw rounded rectangles (filled)

  testdrawtriangle();  // Draw triangles (outlines)

  testfilltriangle();  // Draw triangles (filled)

  testdrawchar();      // Draw characters of the default font

  testdrawstyles();    // Draw 'stylized' characters

  testscrolltext();    // Draw scrolling text

  testdrawbitmap();    // Draw a small bitmap image

  // Invert and restore display, pausing in-between
  display.invertDisplay(true);
  delay(1000);
  display.invertDisplay(false);
  delay(1000);

  testanimate(logo_bmp, LOGO_WIDTH, LOGO_HEIGHT); // Animate bitmaps
}

void loop() {
}

void testdrawline() {
  int16_t i;

  display.clearDisplay(); // Clear display buffer

  for(i=0; i<display.width(); i+=4) {
    display.drawLine(0, 0, i, display.height()-1, WHITE);
    display.display(); // Update screen with each newly-drawn line
    delay(1);
  }
  for(i=0; i<display.height(); i+=4) {
    display.drawLine(0, 0, display.width()-1, i, WHITE);
    display.display();
    delay(1);
  }
  delay(250);

  display.clearDisplay();

  for(i=0; i<display.width(); i+=4) {
    display.drawLine(0, display.height()-1, i, 0, WHITE);
    display.display();
    delay(1);
  }
  for(i=display.height()-1; i>=0; i-=4) {
    display.drawLine(0, display.height()-1, display.width()-1, i, WHITE);
    display.display();
    delay(1);
  }
  delay(250);

  display.clearDisplay();

  for(i=display.width()-1; i>=0; i-=4) {
    display.drawLine(display.width()-1, display.height()-1, i, 0, WHITE);
    display.display();
    delay(1);
  }
  for(i=display.height()-1; i>=0; i-=4) {
    display.drawLine(display.width()-1, display.height()-1, 0, i, WHITE);
    display.display();
    delay(1);
  }
  delay(250);

  display.clearDisplay();

  for(i=0; i<display.height(); i+=4) {
    display.drawLine(display.width()-1, 0, 0, i, WHITE);
    display.display();
    delay(1);
  }
  for(i=0; i<display.width(); i+=4) {
    display.drawLine(display.width()-1, 0, i, display.height()-1, WHITE);
    display.display();
    delay(1);
  }

  delay(2000); // Pause for 2 seconds
}

void testdrawrect(void) {
  display.clearDisplay();

  for(int16_t i=0; i<display.height()/2; i+=2) {
    display.drawRect(i, i, display.width()-2*i, display.height()-2*i, WHITE);
    display.display(); // Update screen with each newly-drawn rectangle
    delay(1);
  }

  delay(2000);
}

void testfillrect(void) {
  display.clearDisplay();

  for(int16_t i=0; i<display.height()/2; i+=3) {
    // The INVERSE color is used so rectangles alternate white/black
    display.fillRect(i, i, display.width()-i*2, display.height()-i*2, INVERSE);
    display.display(); // Update screen with each newly-drawn rectangle
    delay(1);
  }

  delay(2000);
}

void testdrawcircle(void) {
  display.clearDisplay();

  for(int16_t i=0; i<max(display.width(),display.height())/2; i+=2) {
    display.drawCircle(display.width()/2, display.height()/2, i, WHITE);
    display.display();
    delay(1);
  }

  delay(2000);
}

void testfillcircle(void) {
  display.clearDisplay();

  for(int16_t i=max(display.width(),display.height())/2; i>0; i-=3) {
    // The INVERSE color is used so circles alternate white/black
    display.fillCircle(display.width() / 2, display.height() / 2, i, INVERSE);
    display.display(); // Update screen with each newly-drawn circle
    delay(1);
  }

  delay(2000);
}

void testdrawroundrect(void) {
  display.clearDisplay();

  for(int16_t i=0; i<display.height()/2-2; i+=2) {
    display.drawRoundRect(i, i, display.width()-2*i, display.height()-2*i,
      display.height()/4, WHITE);
    display.display();
    delay(1);
  }

  delay(2000);
}

void testfillroundrect(void) {
  display.clearDisplay();

  for(int16_t i=0; i<display.height()/2-2; i+=2) {
    // The INVERSE color is used so round-rects alternate white/black
    display.fillRoundRect(i, i, display.width()-2*i, display.height()-2*i,
      display.height()/4, INVERSE);
    display.display();
    delay(1);
  }

  delay(2000);
}

void testdrawtriangle(void) {
  display.clearDisplay();

  for(int16_t i=0; i<max(display.width(),display.height())/2; i+=5) {
    display.drawTriangle(
      display.width()/2  , display.height()/2-i,
      display.width()/2-i, display.height()/2+i,
      display.width()/2+i, display.height()/2+i, WHITE);
    display.display();
    delay(1);
  }

  delay(2000);
}

void testfilltriangle(void) {
  display.clearDisplay();

  for(int16_t i=max(display.width(),display.height())/2; i>0; i-=5) {
    // The INVERSE color is used so triangles alternate white/black
    display.fillTriangle(
      display.width()/2  , display.height()/2-i,
      display.width()/2-i, display.height()/2+i,
      display.width()/2+i, display.height()/2+i, INVERSE);
    display.display();
    delay(1);
  }

  delay(2000);
}

void testdrawchar(void) {
  display.clearDisplay();

  display.setTextSize(1);      // Normal 1:1 pixel scale
  display.setTextColor(WHITE); // Draw white text
  display.setCursor(0, 0);     // Start at top-left corner
  display.cp437(true);         // Use full 256 char 'Code Page 437' font

  // Not all the characters will fit on the display. This is normal.
  // Library will draw what it can and the rest will be clipped.
  for(int16_t i=0; i<256; i++) {
    if(i == '\n') display.write(' ');
    else          display.write(i);
  }

  display.display();
  delay(2000);
}

void testdrawstyles(void) {
  display.clearDisplay();

  display.setTextSize(1);             // Normal 1:1 pixel scale
  display.setTextColor(WHITE);        // Draw white text
  display.setCursor(0,0);             // Start at top-left corner
  display.println(F("Hello, world!"));

  display.setTextColor(BLACK, WHITE); // Draw 'inverse' text
  display.println(3.141592);

  display.setTextSize(2);             // Draw 2X-scale text
  display.setTextColor(WHITE);
  display.print(F("0x")); display.println(0xDEADBEEF, HEX);

  display.display();
  delay(2000);
}

void testscrolltext(void) {
  display.clearDisplay();

  display.setTextSize(2); // Draw 2X-scale text
  display.setTextColor(WHITE);
  display.setCursor(10, 0);
  display.println(F("scroll"));
  display.display();      // Show initial text
  delay(100);

  // Scroll in various directions, pausing in-between:
  display.startscrollright(0x00, 0x0F);
  delay(2000);
  display.stopscroll();
  delay(1000);
  display.startscrollleft(0x00, 0x0F);
  delay(2000);
  display.stopscroll();
  delay(1000);
  display.startscrolldiagright(0x00, 0x07);
  delay(2000);
  display.startscrolldiagleft(0x00, 0x07);
  delay(2000);
  display.stopscroll();
  delay(1000);
}

void testdrawbitmap(void) {
  display.clearDisplay();

  display.drawBitmap(
    (display.width()  - LOGO_WIDTH ) / 2,
    (display.height() - LOGO_HEIGHT) / 2,
    logo_bmp, LOGO_WIDTH, LOGO_HEIGHT, 1);
  display.display();
  delay(1000);
}

#define XPOS   0 // Indexes into the 'icons' array in function below
#define YPOS   1
#define DELTAY 2

void testanimate(const uint8_t *bitmap, uint8_t w, uint8_t h) {
  int8_t f, icons[NUMFLAKES][3];

  // Initialize 'snowflake' positions
  for(f=0; f< NUMFLAKES; f++) {
    icons[f][XPOS]   = random(1 - LOGO_WIDTH, display.width());
    icons[f][YPOS]   = -LOGO_HEIGHT;
    icons[f][DELTAY] = random(1, 6);
    Serial.print(F("x: "));
    Serial.print(icons[f][XPOS], DEC);
    Serial.print(F(" y: "));
    Serial.print(icons[f][YPOS], DEC);
    Serial.print(F(" dy: "));
    Serial.println(icons[f][DELTAY], DEC);
  }

  for(;;) { // Loop forever...
    display.clearDisplay(); // Clear the display buffer

    // Draw each snowflake:
    for(f=0; f< NUMFLAKES; f++) {
      display.drawBitmap(icons[f][XPOS], icons[f][YPOS], bitmap, w, h, WHITE);
    }

    display.display(); // Show the display buffer on the screen
    delay(200);        // Pause for 1/10 second

    // Then update coordinates of each flake...
    for(f=0; f< NUMFLAKES; f++) {
      icons[f][YPOS] += icons[f][DELTAY];
      // If snowflake is off the bottom of the screen...
      if (icons[f][YPOS] >= display.height()) {
        // Reinitialize to a random position, just off the top
        icons[f][XPOS]   = random(1 - LOGO_WIDTH, display.width());
        icons[f][YPOS]   = -LOGO_HEIGHT;
        icons[f][DELTAY] = random(1, 6);
      }
    }
  }
}

Pada bagian kode berikut ubahvalue ke -1 jika ESP32 tidak memiliki tombol reset, kebetulan ESP32 saya memiliki tombol reset sehingga tidak perlu diubah.

#define OLED_RESET -1

Compile dan upload maka akan menampilkan gambar dan animasi seperti berikut :

Jika tidak berhasil muncul pastikan OLED terhubung dengan baik ke ESP32. Kemudian ulangi langkah c.

Pada kasus saya, awalnya tidak menampilkan apapun pada OLED, solusinya adalah mengubah parameter kedua menjadi 0x3c pada baris kode berikut :

if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {

e. Variasi menampilkan kata, kalimat, bentuk, dan gambar

e.1 Menampilkan teks bertuliskan hello world

Masukkan kode 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

// 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() {

Akan menampilkan pada layar OLED seperti ini :

Penjelasan kode :

import library

#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>

memulai dan load layar OLED

#define SCREEN_WIDTH 128 // OLED display width, in pixels
#define SCREEN_HEIGHT 64 // OLED display height, in pixels

memulai load layar dengan protokol i2c, -1 artinya ESP32 tidak memiliki tombol reset, jika ada sesuaikan parameter dengan gpio reset ESP32.

Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1);

Memulai proses

if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) { 
  Serial.println("SSD1306 allocation failed"); // menampilkan ini jika sistem gagal berjalan
  for(;;); // Don't proceed, loop forever
}

Delay 2 detik setelah menginisialisasi layar OLED dan ESP32

delay(2000);

Mempersiapkan layar sebelum menampilkan

display.clearDisplay();

Mengatur ukuran font

display.setTextSize(1);

Mengatur warna font, teks akan ditampilkan putih namun background hitam

display.setTextColor(WHITE);

Menuliskan teks ke layar dengan metode println

display.println("Hello, world!");

Memanggil fungsi display untuk benar-benar menampilkan ke layar

display.display();

e.2 Menampilkan teks scrolling/bergeser

pada library adafruit tersedia kode berikut untuk membuat teks yang bergeser

teks bergeser ke kanan

startscrollright(0x00, 0x0F)

teks bergeser ke kiri

startscrollleft(0x00, 0x0F)

teks bergeser dari ujung kiri bawah ke ujung atas kanan

startscrolldiagright(0x00, 0x07)

teks bergeser dari ujung kanan bawah ke ujung atas kiri

startscrolldiagleft(0x00, 0x07)

coba masukkan kode 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

// 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, 0);
  // Display static text
  display.println("Scrolling Hello");
  display.display(); 
  delay(100);
 
}

void loop() {
  // Scroll in various directions, pausing in-between:
  display.startscrollright(0x00, 0x0F);
  delay(2000);
  display.stopscroll();
  delay(1000);
  display.startscrollleft(0x00, 0x0F);
  delay(2000);
  display.stopscroll();
  delay(1000);
  display.startscrolldiagright(0x00, 0x07);
  delay(2000);
  display.startscrolldiagleft(0x00, 0x07);
  delay(2000);
  display.stopscroll();
  delay(1000);
}

Akan ditampilkan seperti berikut :

e.3 Menampilkan teks dengan font yang berbeda

berikut font yangg tersedia pada library adafruit

FreeMono12pt7b.h		FreeSansBoldOblique12pt7b.h
FreeMono18pt7b.h		FreeSansBoldOblique18pt7b.h
FreeMono24pt7b.h		FreeSansBoldOblique24pt7b.h
FreeMono9pt7b.h			FreeSansBoldOblique9pt7b.h
FreeMonoBold12pt7b.h		FreeSansOblique12pt7b.h
FreeMonoBold18pt7b.h		FreeSansOblique18pt7b.h
FreeMonoBold24pt7b.h		FreeSansOblique24pt7b.h
FreeMonoBold9pt7b.h		FreeSansOblique9pt7b.h
FreeMonoBoldOblique12pt7b.h	FreeSerif12pt7b.h
FreeMonoBoldOblique18pt7b.h	FreeSerif18pt7b.h
FreeMonoBoldOblique24pt7b.h	FreeSerif24pt7b.h
FreeMonoBoldOblique9pt7b.h	FreeSerif9pt7b.h
FreeMonoOblique12pt7b.h		FreeSerifBold12pt7b.h
FreeMonoOblique18pt7b.h		FreeSerifBold18pt7b.h
FreeMonoOblique24pt7b.h		FreeSerifBold24pt7b.h
FreeMonoOblique9pt7b.h		FreeSerifBold9pt7b.h
FreeSans12pt7b.h		FreeSerifBoldItalic12pt7b.h
FreeSans18pt7b.h		FreeSerifBoldItalic18pt7b.h
FreeSans24pt7b.h		FreeSerifBoldItalic24pt7b.h
FreeSans9pt7b.h			FreeSerifBoldItalic9pt7b.h
FreeSansBold12pt7b.h		FreeSerifItalic12pt7b.h
FreeSansBold18pt7b.h		FreeSerifItalic18pt7b.h
FreeSansBold24pt7b.h		FreeSerifItalic24pt7b.h
FreeSansBold9pt7b.h		FreeSerifItalic9pt7b.h

#include <Fonts/"ubah dan sesuaikan bagian ini tanpa tanda petik">
display.setFont(&"ubah dan sesuaikan bagian ini tanpa tanda petik");
display.setFont(); // memanggil fungsi set font agar berhasil mengatur font

sebagai contoh coba masukkkan kode berikut ke Arduino IDE

#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("SSD1306 allocation failed");
    for(;;);
  }
  delay(2000);

  display.setFont(&FreeSerif9pt7b);
  display.clearDisplay();
  display.setTextSize(1);             
  display.setTextColor(WHITE);        
  display.setCursor(0,20);             
  display.println("Hello, world!");
  display.display();
  delay(2000); 
}
void loop() {
  
}

Akan menampilkan seperti berikut :

e.4 Menampilkan bentuk

Masukkan kode ke bagian di antara clear display dan pemanggil fungsi display. X,Y, dst merupakan parameter lokasi koordinat.

Menampilkan titik

display.drawPixel(64, 32, WHITE); // drawPixel(x, y, warna)

Menampilkan garis

display.drawLine(0, 0, 127, 20, WHITE); // drawLine(x1, y1, x2, y2, warna)

Menampilkan segiempat

display.drawRect(10, 10, 50, 30, WHITE); drawRect(x, y, panjang, lebar, warna)

Menampilkan segiempat dengan warna terisi

display.fillRoundRect(10, 10, 30, 50, 2, WHITE);

Menampilkan lingkaran

display.drawCircle(64, 32, 10, WHITE);

Menampilkan lingkaran yang terisi warna

display.fillCircle(64, 32, 10, WHITE);

Menampilkan segitiga

display.drawTriangle(10, 10, 55, 20, 5, 40, WHITE);

Menampilkan segitiga yang terisi warna

display.fillTriangle(10, 10, 55, 20, 5, 40, WHITE);

Metode invert, mengubah warna background menjadi kebalikan warna dari bentuk yang dibuat, tambahkan kode berikut setelah mendefinisikan kode pembuat bentuk.

display.invertDisplay(true);

Kode keseluruhan menampilkan bentuk dengan jeda antar tampilannya adalah 3 detik

#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>

#define SCREEN_WIDTH 128
#define SCREEN_HEIGHT 64

// 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); // Pause for 2 seconds

  // Clear the buffer
  display.clearDisplay();

  // Draw a single pixel in white
  display.drawPixel(64, 32, WHITE);
  display.display();
  delay(3000);

  // Draw line
  display.clearDisplay();
  display.drawLine(0, 0, 127, 20, WHITE);
  display.display();
  delay(3000);
  
  // Draw rectangle
  display.clearDisplay();
  display.drawRect(30, 10, 50, 30, WHITE);
  display.display();
  delay(3000);
  // Fill rectangle
  display.fillRect(30, 10, 50, 30, WHITE);
  display.display();
  delay(3000);

  // Draw round rectangle
  display.clearDisplay();
  display.drawRoundRect(10, 10, 30, 50, 2, WHITE);
  display.display();
  delay(3000);
  // Fill round rectangle
  display.clearDisplay();
  display.fillRoundRect(10, 10, 30, 50, 2, WHITE);
  display.display();
  delay(3000);
  
  // Draw circle
  display.clearDisplay();
  display.drawCircle(64, 32, 10, WHITE);
  display.display();
  delay(3000);
  // Fill circle
  display.fillCircle(64, 32, 10, WHITE);
  display.display();
  delay(3000);
  
  // Draw triangle
  display.clearDisplay();
  display.drawTriangle(10, 10, 55, 20, 5, 40, WHITE);
  display.display();
  delay(3000);
  // Fill triangle
  display.fillTriangle(10, 10, 55, 20, 5, 40, WHITE);
  display.display();
  delay(3000);

  // Invert and restore display, pausing in-between
  display.invertDisplay(true);
  delay(3000);
  display.invertDisplay(false);
  delay(3000);
}

void loop() {
  
}

e.5 Menampilkan gambar bitmap

resize gambar yang diinginkan ke ukuran layar OLED yaitu 128x64, kalau saya menggunakan paint

saya menggunakan situs konverter gambar ke kode array bahasa c

salin dan tempel kode array gambar ke bagian kode berikut

#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>

#define SCREEN_WIDTH 128
#define SCREEN_HEIGHT 64

Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1);

static const uint8_t image_data_"NAMA FILE"[1024] = {
 // MASUKKAN ARRAY GAMBAR KE SINI
};
 
void setup() {
  Serial.begin(115200);
 
  if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {
    Serial.println(F("SSD1306 allocation failed"));
    for(;;);
  }
  delay(2000); // Pause for 2 seconds
 
  // Clear the buffer.
  display.clearDisplay();
  
  // Draw bitmap on the screen
  display.drawBitmap(0, 0, "NAMA FILE", 128, 64, 1);
  display.display();
}
 
void loop() {
  
}

berikut contoh kode array gambar saya

#include <Wire.h>

#include <Adafruit_GFX.h>

#include <Adafruit_SSD1306.h>

#define SCREEN_WIDTH 128

#define SCREEN_HEIGHT 64

Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1);

static const uint8_t image_data_array[1024] = {

0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,

0xff, 0x9f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0xff, 0xff,

0xff, 0x81, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xe0, 0xff, 0xff,

0xff, 0x80, 0x3f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0xff, 0xff,

0xff, 0xc0, 0x0f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x01, 0xff, 0xff,

0xff, 0xfc, 0x01, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xe0, 0x0f, 0xff, 0xff,

0xff, 0xff, 0xe0, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x00, 0xff, 0xff, 0xff,

0xff, 0xff, 0xf8, 0x03, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x07, 0xff, 0xff, 0xff,

0xff, 0xff, 0xff, 0x00, 0x7f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x3f, 0xff, 0xff, 0xff,

0xff, 0xff, 0xff, 0xe0, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x01, 0xff, 0xff, 0xff, 0xff,

0xff, 0xff, 0xff, 0xfc, 0x07, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x07, 0xff, 0xff, 0xff, 0xff,

0xff, 0xff, 0xff, 0xff, 0x87, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x3f, 0xff, 0xff, 0xff, 0xff,

0xff, 0xff, 0xff, 0xfe, 0x07, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x1f, 0xff, 0xff, 0xff, 0xff,

0xff, 0xff, 0xff, 0xe0, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x01, 0xff, 0xff, 0xff, 0xff,

0xff, 0xff, 0xff, 0x00, 0x7f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x3f, 0xff, 0xff, 0xff,

0xff, 0xff, 0xf8, 0x03, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x07, 0xff, 0xff, 0xff,

0xff, 0xff, 0xe0, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x00, 0xff, 0xff, 0xff,

0xff, 0xff, 0x00, 0x7f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x1f, 0xff, 0xff,

0xff, 0xf0, 0x03, 0xff, 0xff, 0xf1, 0xff, 0xff, 0xff, 0xe3, 0xff, 0xff, 0xf0, 0x07, 0xff, 0xff,

0xff, 0x80, 0x3f, 0xff, 0xff, 0xf1, 0xff, 0xff, 0xff, 0xe3, 0xff, 0xff, 0xff, 0x00, 0xff, 0xff,

0xff, 0x81, 0xff, 0xff, 0xff, 0xf1, 0xff, 0xff, 0xff, 0xe3, 0xff, 0xff, 0xff, 0xe0, 0xff, 0xff,

0xff, 0x9f, 0xff, 0xff, 0xff, 0xf1, 0xff, 0xff, 0xff, 0xc3, 0xff, 0xff, 0xff, 0xf8, 0xff, 0xff,

0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0xff, 0xff, 0xff, 0xc7, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,

0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x7f, 0xff, 0xff, 0x87, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,

0xff, 0x80, 0x00, 0x00, 0x07, 0xfc, 0x7f, 0xff, 0xff, 0x0f, 0xf0, 0x00, 0x00, 0x00, 0xff, 0xff,

0xff, 0x80, 0x00, 0x00, 0x07, 0xfe, 0x3f, 0xff, 0xff, 0x1f, 0xf0, 0x00, 0x00, 0x00, 0xff, 0xff,

0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x1f, 0xff, 0xfe, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,

0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x0f, 0xff, 0xfc, 0x3f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,

0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x87, 0xff, 0xf8, 0x7f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,

0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x81, 0xff, 0xe0, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,

0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xe0, 0x7f, 0x01, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,

0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x00, 0x07, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,

0xff, 0x80, 0x00, 0x00, 0x07, 0xff, 0xfe, 0x00, 0x3f, 0xff, 0xf0, 0x00, 0x00, 0x00, 0xff, 0xff,

0xff, 0x80, 0x00, 0x00, 0x07, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x00, 0x00, 0x00, 0xff, 0xff,

0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x00, 0x00, 0x00, 0xff, 0xff,

0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,

0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff

};

void setup() {

Serial.begin(115200);

if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {

Serial.println(F("SSD1306 allocation failed"));

for(;;);

}

delay(2000); // Pause for 2 seconds

// Clear the buffer.

display.clearDisplay();

// Draw bitmap on the screen

display.drawBitmap(0, 0, image_data_array, 128, 64, 1);

display.display();

}

void loop() {

}

Akan ditampilkan seperti berikut :

Error dan Troubleshooting :

Tampilan adafruit tidak muncul pada awalnya dengan mgnubah paramaeter ke ex3c proses berjalan lancar

Kompilasi video pengerjaan :

Kesimpulan:

Menampilkan teks maupun gambar pada layar OLED dengan menuliskan baris kode di ESP32.

Referensi :

1. randomnerdtutorials.com

2. wikipedia

Project #5 ESP32 Display - Oled

Display OLED ESP32

Perangkat dan komponen yang digunakan:

Penjelasan beberapa perangkat dan komponen:

Pendahuluan :

Langkah pengerjaan :

a. wiring dan menghubungkan display OLED ke ESP32

b. install library SSD1306 OLED dan GFX di ArduinoIDE

c. Menguji coba apakah sistem i2c sudah terkoneksi dengan baik ke ESP32

d. Mencoba display OLED dengan ESP32

e. Variasi menampilkan kata, kalimat, bentuk, dan gambar

e.1 Menampilkan teks bertuliskan hello world

e.2 Menampilkan teks scrolling/bergeser

e.3 Menampilkan teks dengan font yang berbeda

e.4 Menampilkan bentuk

Error dan Troubleshooting :

Kompilasi video pengerjaan :

Kesimpulan:

Referensi :

Terimakasih, sampai jumpa pada project berikutnya!

Posting Komentar

0 Komentar

Search

Blog Archive

Recent Posts

Tags

Popular Posts

Studi kasus : Midsouth Chamber of Commerce

Project#2 ON/OFF LED dengan ESP32 melalui GPIO (Digital Input/Output)

Youtube

Recent Project

Categories

Tags

Ameblo「ブログ」

Menu Footer Widget

Project #5 ESP32 Display - Oled

Display OLED ESP32

Perangkat dan komponen yang digunakan:

Penjelasan beberapa perangkat dan komponen:

Pendahuluan :

Langkah pengerjaan :

a. wiring dan menghubungkan display OLED ke ESP32

b. install library SSD1306 OLED dan GFX di ArduinoIDE

c. Menguji coba apakah sistem i2c sudah terkoneksi dengan baik ke ESP32

d. Mencoba display OLED dengan ESP32

e. Variasi menampilkan kata, kalimat, bentuk, dan gambar

e.1 Menampilkan teks bertuliskan hello world

e.2 Menampilkan teks scrolling/bergeser

e.3 Menampilkan teks dengan font yang berbeda

e.4 Menampilkan bentuk

Error dan Troubleshooting :

Kompilasi video pengerjaan :

Kesimpulan:

Referensi :

Terimakasih, sampai jumpa pada project berikutnya!

Anda mungkin menyukai postingan ini

Posting Komentar

0 Komentar

Search

Blog Archive

Recent Posts

Social

Tags

Popular Posts

Studi kasus : Midsouth Chamber of Commerce

Project#2 ON/OFF LED dengan ESP32 melalui GPIO (Digital Input/Output)

Youtube

Recent Project

Categories

Tags

Ameblo「ブログ」

Menu Footer Widget