OLED menggambar grafik garis yang berjalan dari kanan ke kiri, seperti monitor detak jantung. Putar potensiometer dan garisnya naik-turun mengikuti. Teknik grafik ini bisa dipakai untuk data sensor apa pun.

Layar selebar 128 piksel, jadi grafik menyimpan 128 data terakhir, satu data per kolom. Selama belum penuh, data baru ditambahkan di kanan. Setelah penuh, semua data digeser satu ke kiri dengan memmove() dan data paling lama dibuang. Akibatnya grafik terlihat berjalan.

Setiap data (0-100%) diubah ke posisi y. Di layar, y = 0 ada di atas, jadi nilai besar harus diberi y kecil, sehingga rumusnya dibalik: ATAS + TINGGI - 1 - nilai × skala. Titik-titik yang bersebelahan disambung dengan drawLine(), sehingga grafiknya berupa garis utuh, bukan titik terputus.

Layar digambar 10 kali per detik supaya halus, tetapi Klenik hanya dikirimi data sekali per detik supaya tidak membanjiri broker.

Komponen

Komponen	Qty	Harga
ESP32 DOIT DevKit V1 30 pin	1	Rp75.000
OLED 1.3 Inch I2C SSD1306 Putih 128×64 Arduino E	1	Rp65.000
Potensiometer 10K	1	Rp2.910
Breadboard mini 170 titik	1	Rp4.875
Kabel jumper male-female 10 cm (isi 10)isi 10, terpakai 3	1	Rp3.500
Kabel jumper female-female 10 cm (isi 10)isi 10, terpakai 4	1	Rp3.500
Kabel micro USB data 30 cmopsional, kalau belum punya kabel micro USB data	1	Rp11.700
Total (tanpa opsional)		Rp154.785

Order semua komponen via WhatsAppDaftar komponen proyek ini otomatis masuk ke pesan. Hapus yang sudah kamu punya sebelum dikirim.

Langkah 1: Rangkai komponen

Sambungkan kabel sesuai gambar di atas. Kalau gambar dan tabel terlihat berbeda, ikuti tabel.

Dari		Ke	Kabel
OLED 1.3" 128×64 I2C (cek urutan label pin) GND	→	GND	hitam
OLED 1.3" 128×64 I2C (cek urutan label pin) VCC	→	3V3	merah
OLED 1.3" 128×64 I2C (cek urutan label pin) SCL	→	D22 GPIO22	kuning
OLED 1.3" 128×64 I2C (cek urutan label pin) SDA	→	D21 GPIO21	biru
Potensiometer 10K 1	→	GND	hitam
Potensiometer 10K W	→	D34 GPIO34	hijau
Potensiometer 10K 3	→	3V3	merah

Langkah 2: Siapkan dashboard Klenik

Grafik Potensiometerichibot/budi1234/p105/pot

90%

0.0%12 titik100.0%

0 detik lalu

Cara cepat: unduh p105.json, ganti budi1234 dengan KODE-mu, lalu import di Klenik (menu titik tiga → Export / Import → Import → Ganti total). Langkah lengkapnya ada di Panduan Klenik.

Widget	Topic	Setting
Chart Grafik Potensiometer	`ichibot/KODE/p105/pot`	0–100 %

Langkah 3: Upload kode

Library: PubSubClient (Nick O'Leary), Adafruit SSD1306, Adafruit GFX Library. Board di Arduino IDE: ESP32 Dev Module. Isi dulu nama WiFi dan password di bagian ISI DULU, lalu ganti budi1234 di baris topic dengan KODE-mu, lalu upload dan buka Serial Monitor (115200).

p105.inoUnduh .ino

// Proyek 105 - OLED: Grafik Data Mini
// Board: ESP32 DOIT DevKit V1 | Dashboard: klenik.ichibot.id
#include <WiFi.h>
#include <PubSubClient.h>
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>

// ===== ISI DULU =====
const char* WIFI_NAMA = "nama-wifi-kamu";
const char* WIFI_PASS = "password-wifi-kamu";

// topic MQTT: ganti budi1234 dengan KODE-mu (sama dengan di dashboard Klenik)
const char* TOPIK_POT = "ichibot/budi1234/p105/pot";

const char* BROKER = "mqtt.ichibot.id";
WiFiClient wifi;
PubSubClient mqtt(wifi);
Adafruit_SSD1306 layar(128, 64, &Wire, -1);
const int PIN_POT = 34;
const int LEBAR = 128, ATAS = 12, TINGGI = 52;   // area grafik di bawah teks
uint8_t data[LEBAR];                  // satu titik per kolom piksel
int jumlah = 0;
unsigned long terakhir = 0, kirimTerakhir = 0;

void tambahData(int persen) {
  if (jumlah < LEBAR) data[jumlah++] = persen;
  else {                              // penuh: geser semua ke kiri, data baru di kanan
    memmove(data, data + 1, LEBAR - 1);
    data[LEBAR - 1] = persen;
  }
}

void gambar(int persen) {
  layar.clearDisplay();
  layar.setTextSize(1);
  layar.setTextColor(SSD1306_WHITE);
  layar.setCursor(0, 0);
  layar.print("Pot: ");
  layar.print(persen);
  layar.print("%");
  for (int x = 1; x < jumlah; x++) {
    int y1 = ATAS + TINGGI - 1 - data[x - 1] * (TINGGI - 1) / 100;
    int y2 = ATAS + TINGGI - 1 - data[x] * (TINGGI - 1) / 100;
    layar.drawLine(x - 1, y1, x, y2, SSD1306_WHITE);
  }
  layar.display();
}

void langganan() {}

sambungWiFi() dan sambungMQTT(): sama di semua proyek (klik untuk lihat)
void sambungWiFi() {
  WiFi.begin(WIFI_NAMA, WIFI_PASS);
  Serial.print("WiFi");
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println(" OK, IP " + WiFi.localIP().toString());
}

void sambungMQTT() {
  while (!mqtt.connected()) {
    if (mqtt.connect(WiFi.macAddress().c_str())) {
      Serial.println("Terhubung ke Klenik");
      langganan();
    } else {
      Serial.println("Broker gagal, coba lagi 3 detik");
      delay(3000);
    }
  }
}
void setup() {
  Serial.begin(115200);
  layar.begin(SSD1306_SWITCHCAPVCC, 0x3C);
  sambungWiFi();
  mqtt.setServer(BROKER, 1883);
}

void loop() {
  if (!mqtt.connected()) sambungMQTT();
  mqtt.loop();

  if (millis() - terakhir >= 100) {   // 10 titik per detik: grafik penuh dalam ±13 detik
    terakhir = millis();
    int persen = analogRead(PIN_POT) * 100 / 4095;
    tambahData(persen);
    gambar(persen);
    if (millis() - kirimTerakhir >= 1000) {
      kirimTerakhir = millis();
      mqtt.publish(TOPIK_POT, String(persen).c_str());
    }
  }
}

// Proyek 105 - OLED: Grafik Data Mini
// Board: ESP32 DOIT DevKit V1 | Dashboard: klenik.ichibot.id
#include <WiFi.h>
#include <PubSubClient.h>
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>

// ===== ISI DULU =====
const char* WIFI_NAMA = "nama-wifi-kamu";
const char* WIFI_PASS = "password-wifi-kamu";

// topic MQTT: ganti budi1234 dengan KODE-mu (sama dengan di dashboard Klenik)
const char* TOPIK_POT = "ichibot/budi1234/p105/pot";

const char* BROKER = "mqtt.ichibot.id";
WiFiClient wifi;
PubSubClient mqtt(wifi);
Adafruit_SSD1306 layar(128, 64, &Wire, -1);
const int PIN_POT = 34;
const int LEBAR = 128, ATAS = 12, TINGGI = 52;   // area grafik di bawah teks
uint8_t data[LEBAR];                  // satu titik per kolom piksel
int jumlah = 0;
unsigned long terakhir = 0, kirimTerakhir = 0;

void tambahData(int persen) {
  if (jumlah < LEBAR) data[jumlah++] = persen;
  else {                              // penuh: geser semua ke kiri, data baru di kanan
    memmove(data, data + 1, LEBAR - 1);
    data[LEBAR - 1] = persen;
  }
}

void gambar(int persen) {
  layar.clearDisplay();
  layar.setTextSize(1);
  layar.setTextColor(SSD1306_WHITE);
  layar.setCursor(0, 0);
  layar.print("Pot: ");
  layar.print(persen);
  layar.print("%");
  for (int x = 1; x < jumlah; x++) {
    int y1 = ATAS + TINGGI - 1 - data[x - 1] * (TINGGI - 1) / 100;
    int y2 = ATAS + TINGGI - 1 - data[x] * (TINGGI - 1) / 100;
    layar.drawLine(x - 1, y1, x, y2, SSD1306_WHITE);
  }
  layar.display();
}

void langganan() {}

void sambungWiFi() {
  WiFi.begin(WIFI_NAMA, WIFI_PASS);
  Serial.print("WiFi");
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println(" OK, IP " + WiFi.localIP().toString());
}

void sambungMQTT() {
  while (!mqtt.connected()) {
    if (mqtt.connect(WiFi.macAddress().c_str())) {
      Serial.println("Terhubung ke Klenik");
      langganan();
    } else {
      Serial.println("Broker gagal, coba lagi 3 detik");
      delay(3000);
    }
  }
}
void setup() {
  Serial.begin(115200);
  layar.begin(SSD1306_SWITCHCAPVCC, 0x3C);
  sambungWiFi();
  mqtt.setServer(BROKER, 1883);
}

void loop() {
  if (!mqtt.connected()) sambungMQTT();
  mqtt.loop();

if (millis() - terakhir >= 100) {   // 10 titik per detik: grafik penuh dalam ±13 detik
    terakhir = millis();
    int persen = analogRead(PIN_POT) * 100 / 4095;
    tambahData(persen);
    gambar(persen);
    if (millis() - kirimTerakhir >= 1000) {
      kirimTerakhir = millis();
      mqtt.publish(TOPIK_POT, String(persen).c_str());
    }
  }
}

Langkah 4: Pahami kodenya

Menggeser 127 data ke kiri satu posisi sekaligus. Lebih cepat daripada perulangan for.
Mengubah persen ke baris piksel. 0% = baris paling bawah area grafik, 100% = baris paling atas.
uint8_t (0-255) cukup untuk 0-100% dan hemat memori, hanya 128 byte.