Tampilkan Gambar ke OLED Arduino Pakai u8g2

By Posted on

Bitmap OLED SSD1306 u8g2 Library

Pada artikel ini saya akan memberikan panduan dan kode program bagaimana cara Tampilkan Gambar ke OLED Arduino Pakai ug82 Library. OLED SSD1306 merupakan OLED monochrome yang artinya gambar atau bitmap hanya bisa dalam bentuk satu warna saja.

Untuk jenis modul OLED pada artikel ini, saya menggunakan modul yang menggunakan komunikasi I2C yang terhubung ke A4 dan A5 pada modul Arduino Uno.


Konversi Gambar ke XBM

Sebelum kita melanjutkan pada tahapan berikutnya, perlu diketahui bahwa library u8g2 ini menggunakan format gambar XDM. XBM merupakan singkatan dari X BitMap, baca selengkapnya disini.

Oleh karena itu, kita tidak bisa menggunakan langkah yang pada umumnya mengkonversikan gambar menggunakan ImageToCPP agar mendapatkan kode hexadesimalnya.

Untuk melakukan konversi gambar menjadi XBM, ikuti langkah berikut:

  • Siapkan gambar, disini saya sudah ada gambar dengan ukuran 62×63 piksel dengan format .png
  • Konversikan gambar ke XBM melalui ProConvert.
  • Setelah itu anda akan menerima file gambar dengan ekstensi .XBM
  • Sebagai contoh, berikut adalah contoh sumber gambar dan hasil konversi:
Gambar AsliHasil Konversi

.png
.xbm
  • Sekarang, buka file .XBM tersebut menggunakan teks editor. Jika sudah, akan tampak data-data hexadesimal seperti berikut:
Tampilkan Gambar ke OLED Arduino Pakai ug82 Library
  • Nilai-nilai hexadesminal diatas akan kiga gunakan pada kode Arduino nanti.

Kode program

Untuk memudahkan anda, saya telah menyediakan kode program dasar untuk menampilkan gambar atau bitmat diatas. Disini, saya menggunakan mode page buffer sehingga akan membutuhkan function firstPage(); dan nextPage();.

Silahkan upload kode program dibawah ini ke Arduino board anda. 

/*
  Library ini bersumber oleh Copyright (c) 2016, olikraus@gmail.com
  Modifikasi oleh kinisayangerti.com
*/

#include <Arduino.h>
#include <U8g2lib.h>
#include <Wire.h>

//Tentukan jenis OLED
U8G2_SSD1306_128X64_NONAME_1_HW_I2C u8g2(U8G2_R0, /* reset=*/ U8X8_PIN_NONE);

// =======  Bagian ini adalah hasil copy dari file .XBM   ===================
#define _width 62
#define _height 63

//Secara default, nama file adalah static char _bits[] = {
//Ubah menjadi static const unsigned char _bits[] U8X8_PROGMEM = {

static const unsigned char _bits[] U8X8_PROGMEM = {
  0x00, 0x00, 0x00, 0x30, 0x02, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x70,
  0x02, 0x00, 0x00, 0x00, 0x00, 0x00, 0xE0, 0x71, 0xE2, 0x01, 0x00, 0x00,
  0x00, 0x00, 0xF8, 0xF1, 0xE2, 0x07, 0x00, 0x00, 0x00, 0x00, 0xFE, 0xD0,
  0xC3, 0x1F, 0x00, 0x00, 0x00, 0x80, 0x1F, 0x90, 0x03, 0x7E, 0x00, 0x00,
  0x00, 0xC0, 0x03, 0x10, 0x03, 0xF0, 0x00, 0x00, 0x00, 0xF0, 0x01, 0x10,
  0x03, 0xE0, 0x03, 0x00, 0x00, 0x78, 0x00, 0x00, 0x00, 0x80, 0x07, 0x00,
  0x00, 0x3C, 0x00, 0x00, 0x00, 0x00, 0x0F, 0x00, 0x00, 0x1E, 0x00, 0x00,
  0x00, 0x00, 0x1E, 0x00, 0x00, 0x0F, 0x00, 0x00, 0x00, 0x00, 0x3C, 0x00,
  0x80, 0x07, 0x00, 0x00, 0x00, 0x00, 0x78, 0x00, 0xC0, 0x03, 0x00, 0x00,
  0x00, 0x00, 0x70, 0x00, 0xC0, 0x01, 0x00, 0x00, 0x00, 0x00, 0xE0, 0x00,
  0xE0, 0x00, 0x00, 0x00, 0x00, 0x00, 0xC0, 0x01, 0xE0, 0x00, 0x00, 0x00,
  0x00, 0x00, 0xC0, 0x01, 0x70, 0x00, 0x00, 0x00, 0x00, 0x00, 0x80, 0x03,
  0x30, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x03, 0x38, 0x00, 0x00, 0x00,
  0x00, 0x00, 0x00, 0x07, 0x18, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x06,
  0x1C, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x0E, 0x1C, 0x00, 0x00, 0x00,
  0x00, 0x00, 0x00, 0x0E, 0x0C, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x0C,
  0x0E, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x1C, 0x00, 0x00, 0x00, 0x00,
  0x00, 0x00, 0x00, 0x00, 0x07, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
  0x7F, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xF8, 0x00, 0x00, 0x00,
  0x00, 0x00, 0x00, 0x00, 0xF0, 0x00, 0x00, 0x00, 0x00, 0x00, 0xC0, 0x3F,
  0x3F, 0x00, 0x00, 0x00, 0x00, 0x00, 0xC0, 0x3F, 0x07, 0x00, 0x00, 0x00,
  0x00, 0x00, 0xC0, 0x34, 0x3F, 0x00, 0x00, 0x00, 0x00, 0x00, 0xC0, 0x34,
  0xF0, 0x00, 0x00, 0x00, 0x00, 0x00, 0xC0, 0x34, 0xF8, 0x00, 0x00, 0x00,
  0x00, 0x00, 0x00, 0x00, 0x7F, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
  0x07, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
  0x00, 0x00, 0x00, 0x00, 0x0E, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x1C,
  0x0C, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x0C, 0x1C, 0x00, 0x00, 0x00,
  0x00, 0x00, 0x00, 0x0E, 0x1C, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x0E,
  0x18, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x06, 0x38, 0x00, 0x00, 0x00,
  0x00, 0x00, 0x00, 0x07, 0x30, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x03,
  0x70, 0x00, 0x00, 0x00, 0x00, 0x00, 0x80, 0x03, 0xE0, 0x00, 0x00, 0x00,
  0x00, 0x00, 0xC0, 0x01, 0xE0, 0x00, 0x00, 0x00, 0x00, 0x00, 0xC0, 0x01,
  0xC0, 0x01, 0x00, 0x00, 0x00, 0x00, 0xE0, 0x00, 0xC0, 0x03, 0x00, 0x00,
  0x00, 0x00, 0x70, 0x00, 0x80, 0x07, 0x00, 0x00, 0x00, 0x00, 0x78, 0x00,
  0x00, 0x0F, 0x00, 0x00, 0x00, 0x00, 0x3C, 0x00, 0x00, 0x1E, 0x00, 0x00,
  0x00, 0x00, 0x1E, 0x00, 0x00, 0x3C, 0x00, 0x00, 0x00, 0x00, 0x0F, 0x00,
  0x00, 0x78, 0x00, 0x00, 0x00, 0x80, 0x07, 0x00, 0x00, 0xF0, 0x01, 0xE0,
  0x03, 0xE0, 0x03, 0x00, 0x00, 0xC0, 0x07, 0x70, 0x03, 0xF8, 0x00, 0x00,
  0x00, 0x80, 0x1F, 0x30, 0x00, 0x7E, 0x00, 0x00, 0x00, 0x00, 0xFE, 0xF0,
  0xC0, 0x1F, 0x00, 0x00, 0x00, 0x00, 0xF8, 0xE1, 0xE3, 0x07, 0x00, 0x00,
  0x00, 0x00, 0xE0, 0x01, 0xE3, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0xF0,
  0x03, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xE0, 0x01, 0x00, 0x00, 0x00,
};
// =========================  akhir dari file .XBM   =========================


void setup() {
  u8g2.begin();
}

void loop() {
  u8g2.firstPage();
  do {
    u8g2.drawXBMP(0, 0, _width, _height, _bits); //x, y, width, height, data
  } while (u8g2.nextPage());
}

Hasil

Jika kode program diatas telah selesai di upload ke board Arduino anda, anda akan melihat gambar atau bitmap seperti pada gambar berikut:

Tampilkan Gambar ke OLED Arduino Pakai u8g2

Semoga artikel Tampilkan Gambar ke OLED Arduino Pakai ug82 Library ini dapat membantu anda dalam mengembangkan projek-projek anda. Jika anda menemukan kekeliruan dalam tulisan dan kode, silahkan berkomentar dibawah.

Artikel bermanfaat lainnya: