SSD1306 Progress Bar OLED Using U8g2 Library

By Posted on

Hasil dan Rangkaian

Pada artikel ini saya membagikan kode program untuk menampilkan di SSD1306 Progress Bar OLED menggunakan U8g2 Library. Untuk hasilnya adalah seperti pada gambar berikut:



Sebelum kita mulai, pastikan udah install library U8g2 pada Arduino IDE. Jangan lupa untuk merangkai atau hubungkan arduino board ke OLED SSD1306 seperti pada gambar diatas.



Struktur Kode Program

Kode program untuk menampilkan progress bar adalah sebagai berikut: 

#include <U8g2lib.h>

U8G2_SSD1306_128X64_NONAME_F_HW_I2C u8g2(U8G2_R0, /* reset=*/U8X8_PIN_NONE);  

int verticalProgress = 0;
int horizontalProgress = 0;

bool reverseVertical = false;
bool reverseHorizontal = false;

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

void loop() {
  u8g2.clearBuffer();
  showVerticalProgressBar();
  showHorizontalProgressBar();
  u8g2.sendBuffer();
}

void showVerticalProgressBar() {
  // Vertical bar
  int xFrame = 10;
  int yFrame = 6;
  int heightFrame = 52;
  int widthFrame = 8;
  u8g2.drawFrame(xFrame, yFrame, widthFrame, heightFrame);

  int xBox = 11;
  int yBox = 6;
  int heightBox = 51;
  int widthBox = 7;
  u8g2.drawBox(xBox, (yBox + verticalProgress), widthBox, (heightBox - verticalProgress));

  if (!reverseVertical) {
    verticalProgress++;
    if (verticalProgress > 50) {
      reverseVertical = true;
    }
  } else {
    verticalProgress--;
    if (verticalProgress < 1) {
      reverseVertical = false;
    }
  }
}

void showHorizontalProgressBar() {
  // Horizontal bar
  int xFrame = 30;
  int yFrame = 30;
  int heightFrame = 72;
  int widthFrame = 8;
  u8g2.drawFrame(xFrame, yFrame, heightFrame, widthFrame);

  int xBox = 31;
  int yBox = 30;
  int heightBox = 71;
  int widthBox = 8;
  u8g2.drawBox((xBox + horizontalProgress), yBox, (heightBox - horizontalProgress), widthBox);

  if (!reverseHorizontal) {
    horizontalProgress++;
    if (horizontalProgress > 70) {
      reverseHorizontal = true;
    }
  } else {
    horizontalProgress--;
    if (horizontalProgress < 1) {
      reverseHorizontal = false;
    }
  }
}

Dengan kode program di atas, kita sekarang dapat membuat progress bar sederhana dengan Arduino dan OLED Display. Silahkan di modifikasi kode diatas sesuai dengan kebutuhan kita.

Semoga artikel SSD1306 Progress Bar OLED Using U8g2 Library ini bermanfaat.

Baca juga: