ESP32 Challenge #5: OLED Display

22 min readFeb 28, 2021

Selamat datang di challenge ke-5! Pada challenge kali ini, kita akan menggunakan OLED Display untuk menampilkan berbagai macam tulisan, bentuk dan gambar. Menarik banget, kan?

Sebelumnya, udah pada tau tentang OLED Display, gak?

**Gambar 1. OLED Display (Sumber: amazon.in)**

OLED adalah singkatan dari Organic Light-Emitting Diode. Nah, layar OLED memiliki panel yang mampu memancarkan cahaya untuk tampilan layar saat dialiri listrik. Layar terbuat dari lapisan organik dengan ketebalan < 1 mm. Umumnya, layar OLED banyak digunakan pada perangkat televisi dan smartphone. Keunggulan OLED dibandingkan LCD adalah tampilan layar lebih luas, ringan dan fleksibel, memiliki warna terang, efisien, konsumsi daya rendah, dan kecepatan respon display lebih tinggi. Namun, umur OLED masih di bawah LCD, tidak tahan kelembaban dan terkena air, serta harga relatif lebih mahal.

Nah, daripada menunggu terlalu lama, langsung aja kita eksperimen, yuk!

—

DAFTAR KOMPONEN DAN PERANGKAT

ESP32 Development Board (1 buah)
Breadboard (2 buah breadboard 400 titik) — bisa menyesuaikan, ya!
OLED Display (1 buah)
Kabel male to male (4 buah)
Micro USB Cable (1 buah)
Laptop/komputer yang terdapat Aplikasi Arduino IDE (sudah terinstall package board ESP32)

Btw, ESP32 yang aku pakai DOIT DEVKIT V1 dengan 30 pin dan OLED yang aku pakai Yellow Blue OLED Display dengan protokol komunikasi I2C. Jika kalian menggunakan OLED dengan warna Yellow Blue juga maka warna yang dapat ditampilkan hanya warna kuning dan biru. Kalau tidak salah terdapat pilihan lainnya, yaitu Blue, dan White. Silahkan sesuaikan saja warnanya, yaa!

—

DIAGRAM SKEMA

Skema rangkaian sebagai berikut:

Pada skema tersebut, sebenarnya keterhubungan kabel sama seperti ketika kita bermain dengan sensor BMP 280. GPIO 22 (D22) terhubung dengan SCL OLED, GPIO 21 (D21) terhubung dengan SDA OLED, 3V3 terhubung dengan VCC OLED, dan GND ESP32 terhubung dengan GND OLED. Gampang banget, kan? Micro USB Cable digunakan untuk menghubungkan ESP32 Development Board dengan komputer/laptop kalian, yaa!

—

INSTALL LIBRARY

Nah, sekarang kita perlu menginstall beberapa library agar OLED bisa terhubung dengan ESP32.

Pada aplikasi Arduino IDE, silahkan pilih Sketch > Include Library > Manage Libraries
Setelah window Library Manager terbuka, silahkan ketikkan “SSD1306” dan install library Adafruit SSD1306 seperti Gambar 3.

3. Setelah itu, ketikkan “GFX” dan install library Adafruit GFX Library seperti Gambar 4.

Nah, setelah sudah install library-nya, langsung aja kita mulai eksperimennya!

—

TESTING OLED DISPLAY WITH ESP32

Pertama-tama, kita tes dulu, yuk apakah OLED nya bisa terhubung dengan ESP32.

Pada aplikasi Arduino IDE, silahkan buka File > Examples > Adafruit SSD1306 dan pilih sesuai display yang kalian miliki. Karena aku menggunakan OLED 128x64 dan protokol komunikasinya I2C maka aku memilih ssd1306_128x64_i2c.

Keterangan program:

#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)
// The pins for I2C are defined by the Wire-library. 
// On an arduino UNO: A4(SDA), A5(SCL)
// On an arduino MEGA 2560: 20(SDA), 21(SCL)
// On an arduino LEONARDO: 2(SDA), 3(SCL), …
#define OLED_RESET 4 // Reset pin # (or -1 if sharing Arduino reset pin)
#define SCREEN_ADDRESS 0x3D ///< See datasheet for Address; 0x3D for 128x64, 0x3C for 128x32
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 };

Seperti biasa pada awal program kita harus menginclude library yang digunakan. Selain itu, karena kita menggunakan OLED display, kita harus melakukan define panjang dan lebar layar OLED sesuai dengan ukuran OLED yang kalian miliki, I2C Address, serta ukuran logo yang akan ditampilkan.

Selanjutnya, seperti biasa pada Arduino IDE harus terdapat 2 fungsi utama, yaitu setup dan loop.

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

Pada setup, seperti biasa kita menghubungkan dengan serial monitor menggunakan perintah Serial.begin dengan kecepatan 9600 baud.

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

Kemudian, apabila tidak terbaca akan mengeluarkan error message di layar serial monitor.

Nah, selanjutnya terdapat beberapa fungsi baru yang digunakan. Di sini aku akan membahas 2 fungsi yang menurutku paling dasar saja karena fungsi-fungsi lain akan aku jelaskan pada program selanjutnya. Jadi, pastikan untuk mengikuti sampai akhir, ya!

display.display() : berfungsi untuk menampilkan pada layar OLED
display.clearDisplay() : berfungsi untuk mengosongkan tampilan layar OLED

Pada bagian setup selanjutnya berisi pemanggilan berbagai fungsi untuk menggambar berbagai bentuk, mulai dari garis, persegi panjang, segitiga, lingkaran, membuat scrolling text, dll.

Pada bagian loop, terdapat kode program untuk membuat fungsi-fungsi tersebut dengan fungsi-fungsi yang telah aku jelaskan di atas. Kalian bisa melakukan eksperimen dengan kode program tersebut, kok!

EKSPERIMEN DAN DEMO

Nah, setelah itu verify dan upload kode program tersebut.

— OLED tidak menampilkan apapun ke layar!

Pada kasusku, OLED tidak menampilkan apapun ke layar. Jika kalian mengalami masalah yang sama, silahkan lakukan hal berikut:

Cek apakah OLED telah terhubung ke ESP32 dengan baik.
Cek OLED I2C address dengan cara mengupload kode program berikut.

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

Dengan mengupload kode program tersebut, kita dapat mengetahui I2C address. Pada kasusku, I2C berada pada address 0x3C pada serial monitor seperti Gambar 6. Buat kalian yang lupa di mana serial monitor silahkan memilih Tools > Serial Monitor.

Setelah itu, aku mengubah bagian address seperti berikut.

#define SCREEN_ADDRESS 0x3C

Nah, setelah aku upload, akhirnya program dapat berjalan dan ditampilkan di layar OLED.

**Gambar 7. Testing OLED Display with ESP32**

Setelah kita berhasil melakukan testing terhadap OLED Display dengan ESP32. Yuk, kita coba eksperimen cara menampilkan tulisan, bentuk dan gambar!

WRITE TEXT “Hello, world!” | OLED DISPLAY

Nah, selanjutnya kita coba menampilkan tulisan “Hello, world!” pada layar OLED, yuk!

—

KODE PROGRAM

Kode program yang digunakan sebagai 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() {
  
}

Keterangan program:

#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

Sama seperti kode program sebelumnya, kita perlu menginclude library yang kita gunakan dan melakukan define ukuran layar OLED.

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

Selanjutnya, kita mendeklarasi SSD1306 display terhubung dengan I2C.

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

Pada bagian setup, seperti biasa kita menghubungkan dengan serial monitor menggunakan Serial.begin dengan kecepatan 115200 baud.

if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) { // Address 0x3D for 128x64
    Serial.println(F("SSD1306 allocation failed"));
    for(;;);
  }

Jika tidak terhubung, akan terdapat error message pada layar serial monitor lalu akan terus melakukan looping.

delay(2000);
  display.clearDisplay();

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

Selanjutnya, kita set delay sebanyak 2000 ms atau 2 s.

Fungsi display() dan clearDisplay() telah kita jelaskan pada kode program sebelumnya.

display.setTextSize(n) : berfungsi untuk mengatur ukuran tulisan (antara 1 hingga 8)
display.setTextColor(color) : berfungsi untuk mengatur warna tulisan dan background (WHITE/BLACK)

Apabila ditulis sebagai berikut : display.setTextColor(WHITE) maka akan menampilkan font dengan warna putih dan background warna hitam.

display.setCursor(x,y) : berfungsi untuk mengatur posisi tampilan pada koordinat (x, y)
display.println(“message”) : berfungsi untuk menampilkan tulisan ke layar pada koordinat (x, y)

void loop() {
  
}

Karena kita tidak akan melakukan pengulangan, kalian bisa mengosongkan bagian loop.

—

EKSPERIMEN DAN DEMO

Setelah itu, silahkan klik verify dan upload.

**Gambar 8. Menampilkan tulisan “Hello, world!”**

Nah, kalian bisa melihat tulisan “Hello, world!” pada layar OLED kalian. Kalian bisa mengubah tulisan tersebut juga, kok. Selamat mencoba!

USING OTHER FONTS

Kalian juga bisa menggunakan font lainnya selain built-in font tersebut untuk ditampilkan di layar OLED, supaya gak bosen gitu, ya, kan!

Eh tapi, caranya gimana?

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

Adafruit GFX Library memberikan pilihan font Serif, Sans, dan Mono. Setiap font tersedia dalam bentuk bold, italic and ukuran berbeda. Kalian bisa pilih dari beberapa font di atas, tetapi setTextSize() tidak berfungsi pada font ini karena ukuran sudah di set. Font yang tersedia dalam ukuran 9, 12, 18 dan 24 serta termasuk 7-bit karakter (ASCII) di mana dideskripsikan dalam 7b pada nama font.

Ukuran font yang bekerja dengan baik pada layar OLED adalah 9 dan 12.

Untuk menggunakannya, kalian harus memasukkan include ke dalam kode program, seperti kode berikut.

#include <Fonts/FreeSerif12pt7b.h>

Selanjutnya, kalian bisa menggunakan setFont() dan argumen berisi nama tersebut, seperti kode berikut.

display.setFont(&FreeSerif12pt7b);

Nah, selesai deh! Kalau kalian ingin menggunakan original font, kalian cukup menggunakan setFont() tanpa argumen apapun seperti kode berikut.

display.setFont();

Gampang banget, kan?

—

KODE PROGRAM

Nah, silahkan coba kode program berikut.

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

#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
#include <Fonts/FreeSerif9pt7b.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("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() {
  
}

—

EKSPERIMEN DAN DEMO

SCROLLING TEXT

Selanjutnya, kita akan membuat scrolling text.

—

KODE PROGRAM

Silahkan copy paste kode program 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, 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);
}

Keterangan program:

Sebenarnya kode program yang digunakan sama seperti kode program membuat text biasa. Namun, karena kita mau membuat scrolling text maka pada bagian loop tidak dikosongi lagi.

Terdapat beberapa fungsi yang akan kita gunakan.

startscrollright(0x00, 0x0F): berfungsi untuk melakukan scroll text dari kiri ke kanan
startscrollleft(0x00, 0x0F): berfungsi untuk melakukan scroll text dari kanan ke kiri
startscrolldiagright(0x00, 0x07): berfungsi untuk melakukan scroll text dari kiri bawah ke kanan atas
startscrolldiagleft(0x00, 0x07): berfungsi untuk melakukan scroll text dari kanan bawah ke kiri atas
stopscroll() : berfungsi untuk menghentikan scroll yang dilakukan

—

EKSPERIMEN DAN DEMO

Silahkan klik verify dan upload pada Arduino IDE.

DRAW SHAPES IN THE OLED DISPLAY

Setelah bermain-main dengan text, kita coba membuat berbagai bentuk di OLED Display ini, yuk!

—

KODE PROGRAM

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

#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() {
  
}

Keterangan program:

Perbedaan program menggambar bentuk dengan text sebenarnya terletak pada fungsi-fungsi yang digunakan.

drawPixel(x,y, color): berfungsi untuk membuat titik / 1 pixel menyala pada koordinat (x,y) serta color merupakan warna yang dipilih jika OLED yang digunakan memiliki warna (WHITE, BLACK atau INVERT)
drawLine(x1, y1, x2, y2, color) : berfungsi untuk membuat garis dengan titik awal pada koordinat (x1, y1) dan berakhir pada titik dengan koordinat (x2, y2) serta color merupakan warna yang dipilih.
drawRect(x, y, width, height, color) : berfungsi untuk membuat persegi panjang dengan koordinat (x, y) sebagai bagian kiri atas dan mengatur panjang, lebar dan warna persegi panjang.
fillRect(x, y, width, height, color) : berfungsi untuk membuat filled rectangle dengan argumen yang sama seperti drawRect()
drawRoundRect(x, y, width, height, radius, color) : berfungsi untuk membuat round rectangle dengan argumen yang sama seperti drawRect() ditambahkan dengan jari-jari.
fillRoundRect(x, y, width, height, radius, color) : berfungsi untuk membuat round rectangle dengan argumen yang sama seperti drawRoundRect()
drawCircle(x, y, radius, color) : berfungsi untuk membuat lingkaran dengan koordinat (x, y) sebagai titik pusat lingkaran, menentukan jari-jari, dan warna.
fillCircle(x, y, radius, color) : berfungsi untuk membuat filled circle dengan argumen yang sama seperti drawCircle()
drawTriangle(x1, y1, x2, y2, x3, y3, color) : berfungsi untuk membuat segitiga dengan titik koordinat pertama (x1, y1), titik koordinat kedua (x2, y2), dan titik koordinat ketiga (x3, y3) dan menentukan warna.
fillTriangle(x1, y1, x2, y2, x3, y3, color) : berfungsi untuk membuat filled triangle dengan argumen yang sama seperti drawTriangle()
invertDisplay(bool) : berfungsi untuk melakukan invert warna, true jika ingin melakukan invert warna, false jika ingin mengembalikan warna seperti semula. Fungsi ini dapat digunakan pada shape atau text.

Untuk penjelasan lebih detailnya dan jika ingin melihat fungsi lainnya, kalian bisa mengunjungi situs berikut.

—

EKSPERIMEN DAN DEMO

Silahkan klik verify dan upload.

**Gambar 11. Membuat pixel dengan drawPixel()**

**Gambar 12. Membuat garis dengan drawLine()**

Gambar 13. Membuat *rectangle dengan drawRect()*

**Gambar 14. Membuat filled rectangle dengan drawfillRect()**

**Gambar 15. Membuat round rectangle dengan drawRoundRect()**

**Gambar 16. Membuat filled round rectangle dengan fillRoundRect()**

**Gambar 17. Membuat circle dengan drawCircle()**

**Gambar 18. Membuat filled circle dengan fillCircle()**

**Gambar 19. Membuat triangle dengan drawTriangle()**

**Gambar 20. Membuat filled triangle dengan fillTriangle()**

**Gambar 21. Mengaktifkan inverted triangle dengan invertDisplay(true)**

**Gambar 22. Menonaktifkan inverted triangle dengan invertDisplay(false)**

Akhirnya, kita sudah bisa membuat berbagai macam bentuk pada OLED Display.

DISPLAY BITMAP IMAGES IN THE OLED

Setelah mencoba menampilkan tulisan, membuat berbagai macam bentuk. Kita akan mencoba menampilkan 128x64 bitmap monocolor images pada OLED Display.

Kenapa 128x64? Karena menyesuaikan dengan ukuran OLED, yaitu 128x64.

Nah, kalian bisa mengikuti cara pada randomnerdtutorials berikut https://randomnerdtutorials.com/esp32-ssd1306-oled-display-arduino-ide/ tetapi perlu untuk menginstall aplikasi tambahan.

Namun, sekarang sudah tersedia banyak converter dari gambar ke kode program bahasa C nya. Di sini aku akan menjelaskan dengan menggunakan converter yang tersedia di internet. Converter yang aku gunakan berada pada link berikut: https://diyusthad.com/image2cpp

—

Pada link tersebut, kalian tinggal memilih foto yang ingin kalian ubah menjadi kode program dalam bahasa C pada bagian Select image. Di sini aku menggunakan gambar doraemon, hehe.

Pada image settings, silahkan atur ukuran menjadi 128x64, background color, serta berbagai pilihan lainnya yang tersedia. Kalian bisa menyesuaikan dengan gambar yang kalian pilih, yaa!

Selanjutnya, pada bagian Preview akan dihasilkan gambar dalam bitmap monocolor images.

Gambar 24. Gambar setelah convert

Setelah itu, kalian tinggal mengklik tombol Generate code dan kode program akan berada di bawah.

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, 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, 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, 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, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x0f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x00, 0x00, 0x00, 0x7f, 0xff, 0xff, 0xff, 0xff, 0xff
0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x03, 0xe0, 0xfe, 0x00, 0x07, 0xff, 0xff, 0xff, 0xff, 0xff
0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x0f, 0xf1, 0xff, 0x80, 0x01, 0xff, 0xff, 0xff, 0xff, 0xff
0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x1f, 0xfb, 0xff, 0xc0, 0x00, 0x7f, 0xff, 0xff, 0xff, 0xff
0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0x3f, 0xf3, 0xff, 0xc0, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xff
0xff, 0xff, 0xff, 0xff, 0xfe, 0x00, 0x3f, 0x00, 0x3f, 0xc0, 0x00, 0x0f, 0xff, 0xff, 0xff, 0xff
0xff, 0xff, 0xff, 0xff, 0xfe, 0x00, 0x1f, 0xc1, 0xff, 0x9e, 0x00, 0x07, 0xff, 0xff, 0xff, 0xff
0xff, 0xff, 0xff, 0xff, 0xfc, 0x03, 0xc7, 0x00, 0x00, 0x71, 0xc0, 0x03, 0xff, 0xff, 0xff, 0xff
0xff, 0xff, 0xff, 0xff, 0xf8, 0x08, 0x08, 0x00, 0xe0, 0x0f, 0xf0, 0x03, 0xff, 0xff, 0xff, 0xff
0xff, 0xff, 0xff, 0xff, 0xf8, 0x03, 0xff, 0x81, 0xf8, 0x00, 0xf8, 0x03, 0xff, 0xff, 0xff, 0xff
0xff, 0xff, 0xff, 0xff, 0xf8, 0x78, 0x0f, 0xe7, 0xf3, 0xff, 0xfc, 0x01, 0xff, 0xff, 0xff, 0xff
0xff, 0xff, 0xff, 0xff, 0xf0, 0x40, 0x0f, 0xe7, 0xf0, 0x00, 0xfc, 0x01, 0xff, 0xff, 0xff, 0xff
0xff, 0xff, 0xff, 0xff, 0xf8, 0xcf, 0xff, 0x80, 0x00, 0x00, 0x7e, 0x01, 0xff, 0xff, 0xff, 0xff
0xff, 0xff, 0xff, 0xff, 0xf8, 0xe0, 0x00, 0x00, 0x00, 0x00, 0x7e, 0x03, 0xff, 0xff, 0xff, 0xff
0xff, 0xff, 0xff, 0xff, 0xf8, 0xfe, 0x00, 0x00, 0x00, 0x00, 0x7e, 0x03, 0xff, 0xff, 0xff, 0xff
0xff, 0xff, 0xff, 0xfe, 0x1c, 0x7f, 0x00, 0x00, 0x00, 0x00, 0xfc, 0x03, 0xff, 0xff, 0xff, 0xff
0xff, 0xff, 0xff, 0xf1, 0xe6, 0x7f, 0x80, 0x00, 0x00, 0x03, 0xfc, 0x07, 0xff, 0xff, 0xff, 0xff
0xff, 0xff, 0xff, 0xe7, 0xf8, 0x7f, 0xc0, 0x00, 0x00, 0x0f, 0xf8, 0x0f, 0xff, 0xff, 0xff, 0xff
0xff, 0xff, 0xff, 0xef, 0xf8, 0x3f, 0xf0, 0x00, 0x00, 0x3f, 0xf0, 0x0f, 0xff, 0xff, 0xff, 0xff
0xff, 0xff, 0xff, 0xe7, 0xf8, 0x1f, 0xfc, 0x00, 0x00, 0xff, 0xf0, 0x1f, 0xff, 0xff, 0xff, 0xff
0xff, 0xff, 0xff, 0xf9, 0xc0, 0x0f, 0xff, 0x80, 0x0f, 0xff, 0xe0, 0x3f, 0xff, 0xff, 0xff, 0xff
0xff, 0xff, 0xff, 0xff, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xff, 0xff, 0xff, 0xff, 0xff
0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0xff, 0xff, 0xff, 0xff, 0xff
0xff, 0xff, 0xff, 0xff, 0xc0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0xff, 0xff, 0xff, 0xff, 0xff
0xff, 0xff, 0xff, 0xff, 0xe0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff
0xff, 0xff, 0xff, 0xff, 0xf0, 0x00, 0x7e, 0x00, 0xff, 0x00, 0x00, 0x7f, 0xff, 0xff, 0xff, 0xff
0xff, 0xff, 0xff, 0xff, 0xf8, 0x00, 0xff, 0x00, 0xff, 0xc0, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xff
0xff, 0xff, 0xff, 0xff, 0xfe, 0x01, 0xff, 0xff, 0xff, 0xe0, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xff
0xff, 0xff, 0xff, 0xff, 0xff, 0x03, 0xff, 0xff, 0xff, 0xf0, 0x00, 0x0f, 0xff, 0xff, 0xff, 0xff
0xff, 0xff, 0xff, 0xff, 0xff, 0xe0, 0x00, 0x00, 0x00, 0x70, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff
0xff, 0xff, 0xff, 0xff, 0xff, 0xf2, 0x7f, 0xff, 0xfe, 0x70, 0x00, 0xfc, 0xff, 0xff, 0xff, 0xff
0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x7f, 0xff, 0xfe, 0x70, 0x01, 0xfe, 0x7f, 0xff, 0xff, 0xff
0xff, 0xff, 0xff, 0xff, 0xff, 0xf3, 0x3f, 0xff, 0xfc, 0x70, 0x01, 0xfe, 0x7f, 0xff, 0xff, 0xff
0xff, 0xff, 0xff, 0xff, 0xff, 0xf1, 0x1f, 0xff, 0xf9, 0xe0, 0x00, 0xfc, 0xff, 0xff, 0xff, 0xff
0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0xc7, 0xff, 0xe3, 0xc0, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff
0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x38, 0x3c, 0x1f, 0x00, 0x00, 0x0f, 0xff, 0xff, 0xff, 0xff
0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x0f, 0xc3, 0xfc, 0x00, 0x00, 0x0f, 0xff, 0xff, 0xff, 0xff
0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x00, 0x1f, 0x00, 0x00, 0x00, 0x0f, 0xff, 0xff, 0xff, 0xff
0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x00, 0x00, 0x00, 0x00, 0x00, 0x7f, 0xff, 0xff, 0xff, 0xff
0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x00, 0x00, 0x00, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff
0xff, 0xff, 0xff, 0xff, 0xff, 0xe0, 0x00, 0x00, 0x00, 0x00, 0x01, 0xff, 0xff, 0xff, 0xff, 0xff
0xff, 0xff, 0xff, 0xff, 0xff, 0x9f, 0xff, 0xe7, 0xff, 0xff, 0xfe, 0x7f, 0xff, 0xff, 0xff, 0xff
0xff, 0xff, 0xff, 0xff, 0xff, 0x9f, 0xff, 0xe7, 0xff, 0xff, 0xfe, 0x7f, 0xff, 0xff, 0xff, 0xff
0xff, 0xff, 0xff, 0xff, 0xff, 0xe0, 0x00, 0x03, 0xff, 0xff, 0xf0, 0xff, 0xff, 0xff, 0xff, 0xff
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x00, 0x00, 0x1f, 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, 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, 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, 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, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff

—

KODE PROGRAM

Kode program hasil generate tersebut dimasukkan ke dalam kode program yang berada pada contoh randomnerdtutorials sehingga diperoleh kode program berikut.

#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>#define SCREEN_WIDTH 128
#define SCREEN_HEIGHT 64Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1);const unsigned char myBitmap [] PROGMEM = {
 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, 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, 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, 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, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x0f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x00, 0x00, 0x00, 0x7f, 0xff, 0xff, 0xff, 0xff, 0xff,
 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x03, 0xe0, 0xfe, 0x00, 0x07, 0xff, 0xff, 0xff, 0xff, 0xff,
 0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x0f, 0xf1, 0xff, 0x80, 0x01, 0xff, 0xff, 0xff, 0xff, 0xff,
 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x1f, 0xfb, 0xff, 0xc0, 0x00, 0x7f, 0xff, 0xff, 0xff, 0xff,
 0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0x3f, 0xf3, 0xff, 0xc0, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xff,
 0xff, 0xff, 0xff, 0xff, 0xfe, 0x00, 0x3f, 0x00, 0x3f, 0xc0, 0x00, 0x0f, 0xff, 0xff, 0xff, 0xff,
 0xff, 0xff, 0xff, 0xff, 0xfe, 0x00, 0x1f, 0xc1, 0xff, 0x9e, 0x00, 0x07, 0xff, 0xff, 0xff, 0xff,
 0xff, 0xff, 0xff, 0xff, 0xfc, 0x03, 0xc7, 0x00, 0x00, 0x71, 0xc0, 0x03, 0xff, 0xff, 0xff, 0xff,
 0xff, 0xff, 0xff, 0xff, 0xf8, 0x08, 0x08, 0x00, 0xe0, 0x0f, 0xf0, 0x03, 0xff, 0xff, 0xff, 0xff,
 0xff, 0xff, 0xff, 0xff, 0xf8, 0x03, 0xff, 0x81, 0xf8, 0x00, 0xf8, 0x03, 0xff, 0xff, 0xff, 0xff,
 0xff, 0xff, 0xff, 0xff, 0xf8, 0x78, 0x0f, 0xe7, 0xf3, 0xff, 0xfc, 0x01, 0xff, 0xff, 0xff, 0xff,
 0xff, 0xff, 0xff, 0xff, 0xf0, 0x40, 0x0f, 0xe7, 0xf0, 0x00, 0xfc, 0x01, 0xff, 0xff, 0xff, 0xff,
 0xff, 0xff, 0xff, 0xff, 0xf8, 0xcf, 0xff, 0x80, 0x00, 0x00, 0x7e, 0x01, 0xff, 0xff, 0xff, 0xff,
 0xff, 0xff, 0xff, 0xff, 0xf8, 0xe0, 0x00, 0x00, 0x00, 0x00, 0x7e, 0x03, 0xff, 0xff, 0xff, 0xff,
 0xff, 0xff, 0xff, 0xff, 0xf8, 0xfe, 0x00, 0x00, 0x00, 0x00, 0x7e, 0x03, 0xff, 0xff, 0xff, 0xff,
 0xff, 0xff, 0xff, 0xfe, 0x1c, 0x7f, 0x00, 0x00, 0x00, 0x00, 0xfc, 0x03, 0xff, 0xff, 0xff, 0xff,
 0xff, 0xff, 0xff, 0xf1, 0xe6, 0x7f, 0x80, 0x00, 0x00, 0x03, 0xfc, 0x07, 0xff, 0xff, 0xff, 0xff,
 0xff, 0xff, 0xff, 0xe7, 0xf8, 0x7f, 0xc0, 0x00, 0x00, 0x0f, 0xf8, 0x0f, 0xff, 0xff, 0xff, 0xff,
 0xff, 0xff, 0xff, 0xef, 0xf8, 0x3f, 0xf0, 0x00, 0x00, 0x3f, 0xf0, 0x0f, 0xff, 0xff, 0xff, 0xff,
 0xff, 0xff, 0xff, 0xe7, 0xf8, 0x1f, 0xfc, 0x00, 0x00, 0xff, 0xf0, 0x1f, 0xff, 0xff, 0xff, 0xff,
 0xff, 0xff, 0xff, 0xf9, 0xc0, 0x0f, 0xff, 0x80, 0x0f, 0xff, 0xe0, 0x3f, 0xff, 0xff, 0xff, 0xff,
 0xff, 0xff, 0xff, 0xff, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xff, 0xff, 0xff, 0xff, 0xff,
 0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0xff, 0xff, 0xff, 0xff, 0xff,
 0xff, 0xff, 0xff, 0xff, 0xc0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0xff, 0xff, 0xff, 0xff, 0xff,
 0xff, 0xff, 0xff, 0xff, 0xe0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff,
 0xff, 0xff, 0xff, 0xff, 0xf0, 0x00, 0x7e, 0x00, 0xff, 0x00, 0x00, 0x7f, 0xff, 0xff, 0xff, 0xff,
 0xff, 0xff, 0xff, 0xff, 0xf8, 0x00, 0xff, 0x00, 0xff, 0xc0, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xff,
 0xff, 0xff, 0xff, 0xff, 0xfe, 0x01, 0xff, 0xff, 0xff, 0xe0, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xff,
 0xff, 0xff, 0xff, 0xff, 0xff, 0x03, 0xff, 0xff, 0xff, 0xf0, 0x00, 0x0f, 0xff, 0xff, 0xff, 0xff,
 0xff, 0xff, 0xff, 0xff, 0xff, 0xe0, 0x00, 0x00, 0x00, 0x70, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff,
 0xff, 0xff, 0xff, 0xff, 0xff, 0xf2, 0x7f, 0xff, 0xfe, 0x70, 0x00, 0xfc, 0xff, 0xff, 0xff, 0xff,
 0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x7f, 0xff, 0xfe, 0x70, 0x01, 0xfe, 0x7f, 0xff, 0xff, 0xff,
 0xff, 0xff, 0xff, 0xff, 0xff, 0xf3, 0x3f, 0xff, 0xfc, 0x70, 0x01, 0xfe, 0x7f, 0xff, 0xff, 0xff,
 0xff, 0xff, 0xff, 0xff, 0xff, 0xf1, 0x1f, 0xff, 0xf9, 0xe0, 0x00, 0xfc, 0xff, 0xff, 0xff, 0xff,
 0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0xc7, 0xff, 0xe3, 0xc0, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff,
 0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x38, 0x3c, 0x1f, 0x00, 0x00, 0x0f, 0xff, 0xff, 0xff, 0xff,
 0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x0f, 0xc3, 0xfc, 0x00, 0x00, 0x0f, 0xff, 0xff, 0xff, 0xff,
 0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x00, 0x1f, 0x00, 0x00, 0x00, 0x0f, 0xff, 0xff, 0xff, 0xff,
 0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x00, 0x00, 0x00, 0x00, 0x00, 0x7f, 0xff, 0xff, 0xff, 0xff,
 0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x00, 0x00, 0x00, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff,
 0xff, 0xff, 0xff, 0xff, 0xff, 0xe0, 0x00, 0x00, 0x00, 0x00, 0x01, 0xff, 0xff, 0xff, 0xff, 0xff,
 0xff, 0xff, 0xff, 0xff, 0xff, 0x9f, 0xff, 0xe7, 0xff, 0xff, 0xfe, 0x7f, 0xff, 0xff, 0xff, 0xff,
 0xff, 0xff, 0xff, 0xff, 0xff, 0x9f, 0xff, 0xe7, 0xff, 0xff, 0xfe, 0x7f, 0xff, 0xff, 0xff, 0xff,
 0xff, 0xff, 0xff, 0xff, 0xff, 0xe0, 0x00, 0x03, 0xff, 0xff, 0xf0, 0xff, 0xff, 0xff, 0xff, 0xff,
 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x00, 0x00, 0x1f, 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, 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, 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, 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, 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, myBitmap, 128, 64, WHITE);
 display.display();
}
 
void loop() {
 
}

Keterangan program:

Prinsip dalam membuat kode program sebenarnya sama seperti kode program sebelumnya.

Di sini kita hanya perlu memasukkan kode program hasil generate menggunakan converter tadi dan pada kasusku aku beri nama myBitmap serta kita menggunakan fungsi drawBitmap(x, y, bitmap, width, height, color) untuk dapat menampilkan bitmap tadi ke layar OLED. Karena bitmap telah kita simpan dengan nama myBitmap, maka kita hanya perlu menulis nama bitmap tersebut.

—

EKSPERIMEN DAN DEMO

Seperti biasa, klik verify dan upload. Yeay, gambar yang dipilih sudah muncul pada layar OLED kalian!

**Gambar 25. Display Bitmap Images in the OLED**

ANALISIS

Dalam bereksperimen dengan OLED Display, I2C Address yang digunakan harus benar. Apabila OLED tidak menampilkan apapun, kita bisa mengecek I2C Address menggunakan kode program yang diberikan di awal atau memastikan keterhubungan antar kabel yang digunakan sudah benar.
Dengan menggunakan ESP32 dan OLED Display, kita dapat menampilkan tulisan dengan pilihan 1 built-in font dan 3 font tambahan (Serif, Sans, dan Mono) serta dapat membuat scrolling text dengan fungsi-fungsi yang tersedia pada Adafruit GFX Library.
Dengan menggunakan ESP32 dan OLED Display, kita dapat menampilkan berbagai macam bentuk, antara lain titik, garis, persegi panjang, lingkaran, segitiga dengan fungsi yang tersedia pada Adafruit GFX Library.
Dengan menggunakan ESP32 dan OLED Display, kita dapat menampilkan bitmap images sebesar ukuran OLED (128x64) tetapi memerlukan converter untuk mengubah gambar menjadi kode program dalam bahasa C.

—

HASIL EKSPERIMEN

OLED Display dapat menampilkan tulisan, berbagai macam bentuk dan bitmap images sesuai dengan kode program. Terdapat error saat melakukan compile pada awal percobaan karena I2C Address yang digunakan tidak sesuai. Namun, setelah mengetahui I2C Address, program dapat berjalan dengan baik.

Seru banget, kan, bereksperimen menggunakan OLED Display? Challenge selanjutnya gak akan kalah menarik, nih. Sampai jumpa di challenge berikutnya!

ESP32 Challenge #5: OLED Display

DAFTAR KOMPONEN DAN PERANGKAT

DIAGRAM SKEMA

INSTALL LIBRARY

TESTING OLED DISPLAY WITH ESP32

EKSPERIMEN DAN DEMO

WRITE TEXT “Hello, world!” | OLED DISPLAY

KODE PROGRAM

EKSPERIMEN DAN DEMO

USING OTHER FONTS

KODE PROGRAM

EKSPERIMEN DAN DEMO

SCROLLING TEXT

KODE PROGRAM

EKSPERIMEN DAN DEMO

DRAW SHAPES IN THE OLED DISPLAY

KODE PROGRAM

EKSPERIMEN DAN DEMO

DISPLAY BITMAP IMAGES IN THE OLED

KODE PROGRAM

EKSPERIMEN DAN DEMO

ANALISIS

HASIL EKSPERIMEN

Written by Gisela Ivenita

No responses yet