Termometer meja dengan layar OLED: suhu tampil dengan angka besar, dan kelembapan digambar sebagai bar. Data yang sama juga dikirim ke Klenik. OLED kecil ini tajam, kontras, dan tetap terbaca dalam gelap tanpa lampu latar.

OLED 128×64 terdiri dari 8.192 titik yang masing-masing menyala sendiri, jadi tidak butuh lampu latar seperti LCD. Pustaka Adafruit SSD1306 menyimpan gambar di memori ESP32 lebih dulu. Semua perintah gambar (print, drawRect, fillRect) hanya mengubah memori itu, dan baru display() yang mengirim seluruh gambar ke layar lewat I2C sekaligus. Dengan cara ini layar tidak berkedip saat digambar ulang.

Ukuran huruf diatur dengan setTextSize(): ukuran 1 = 6×8 piksel, ukuran 3 = 18×24 piksel. Bar kelembapan adalah kotak berisi yang lebarnya sebanding dengan persen kelembapan. Teks di atasnya memakai warna INVERSE, jadi tetap terbaca baik di bagian bar yang terisi maupun yang kosong.

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
Modul sensor DHT11	1	Rp12.000
Kabel jumper female-female 10 cm (isi 10)isi 10, terpakai 7	1	Rp3.500
Kabel micro USB data 30 cmopsional, kalau belum punya kabel micro USB data	1	Rp11.700
Total (tanpa opsional)		Rp155.500

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
DHT11 VCC	→	3V3	merah
DHT11 DATA	→	D15 GPIO15	hijau
DHT11 GND	→	GND	hitam

Langkah 2: Siapkan dashboard Klenik

Suhuichibot/budi1234/p104/suhu

0 detik lalu

Kelembapanichibot/budi1234/p104/lembap

0 detik lalu

Cara cepat: unduh p104.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
Gauge Suhu	`ichibot/KODE/p104/suhu`	15–40 °C
Gauge Kelembapan	`ichibot/KODE/p104/lembap`	0–100 %

Langkah 3: Upload kode

Library: PubSubClient (Nick O'Leary), Adafruit SSD1306, Adafruit GFX Library, DHT sensor library (Adafruit), Adafruit Unified Sensor. 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).

p104.inoUnduh .ino

// Proyek 104 - OLED: Suhu & Kelembapan
// 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>
#include <DHT.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_SUHU   = "ichibot/budi1234/p104/suhu";
const char* TOPIK_LEMBAP = "ichibot/budi1234/p104/lembap";

const char* BROKER = "mqtt.ichibot.id";
WiFiClient wifi;
PubSubClient mqtt(wifi);
Adafruit_SSD1306 layar(128, 64, &Wire, -1);
DHT dht(15, DHT11);                  // DATA di GPIO15, dekat pin 3V3 dan GND
unsigned long terakhir = 0;

void gambar(float suhu, float lembap) {
  layar.clearDisplay();
  layar.setTextColor(SSD1306_WHITE);
  layar.setTextSize(1);
  layar.setCursor(0, 0);
  layar.print("Suhu ruangan");
  layar.setTextSize(3);               // angka besar: 18 x 24 piksel per huruf
  layar.setCursor(0, 14);
  layar.print(suhu, 1);
  layar.setTextSize(1);
  layar.print(" C");
  layar.drawRect(0, 46, 128, 18, SSD1306_WHITE);              // bingkai bar kelembapan
  layar.fillRect(2, 48, (int)(lembap / 100 * 124), 14, SSD1306_WHITE);
  layar.setTextColor(SSD1306_INVERSE);
  layar.setCursor(48, 52);
  layar.print("RH ");
  layar.print(lembap, 0);
  layar.print("%");
  layar.display();                    // kirim gambar ke layar
}

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);
  dht.begin();
  if (!layar.begin(SSD1306_SWITCHCAPVCC, 0x3C)) Serial.println("OLED tidak ditemukan");
  layar.clearDisplay();
  layar.setTextColor(SSD1306_WHITE);
  layar.setCursor(0, 0);
  layar.print("Menyambung WiFi...");
  layar.display();
  sambungWiFi();
  mqtt.setServer(BROKER, 1883);
}

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

  if (millis() - terakhir >= 5000) {
    terakhir = millis();
    float suhu = dht.readTemperature();
    float lembap = dht.readHumidity();
    if (isnan(suhu) || isnan(lembap)) return;
    gambar(suhu, lembap);
    mqtt.publish(TOPIK_SUHU, String(suhu, 1).c_str());
    mqtt.publish(TOPIK_LEMBAP, String(lembap, 0).c_str());
  }
}

// Proyek 104 - OLED: Suhu & Kelembapan
// 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>
#include <DHT.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_SUHU   = "ichibot/budi1234/p104/suhu";
const char* TOPIK_LEMBAP = "ichibot/budi1234/p104/lembap";

const char* BROKER = "mqtt.ichibot.id";
WiFiClient wifi;
PubSubClient mqtt(wifi);
Adafruit_SSD1306 layar(128, 64, &Wire, -1);
DHT dht(15, DHT11);                  // DATA di GPIO15, dekat pin 3V3 dan GND
unsigned long terakhir = 0;

void gambar(float suhu, float lembap) {
  layar.clearDisplay();
  layar.setTextColor(SSD1306_WHITE);
  layar.setTextSize(1);
  layar.setCursor(0, 0);
  layar.print("Suhu ruangan");
  layar.setTextSize(3);               // angka besar: 18 x 24 piksel per huruf
  layar.setCursor(0, 14);
  layar.print(suhu, 1);
  layar.setTextSize(1);
  layar.print(" C");
  layar.drawRect(0, 46, 128, 18, SSD1306_WHITE);              // bingkai bar kelembapan
  layar.fillRect(2, 48, (int)(lembap / 100 * 124), 14, SSD1306_WHITE);
  layar.setTextColor(SSD1306_INVERSE);
  layar.setCursor(48, 52);
  layar.print("RH ");
  layar.print(lembap, 0);
  layar.print("%");
  layar.display();                    // kirim gambar ke layar
}

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);
  dht.begin();
  if (!layar.begin(SSD1306_SWITCHCAPVCC, 0x3C)) Serial.println("OLED tidak ditemukan");
  layar.clearDisplay();
  layar.setTextColor(SSD1306_WHITE);
  layar.setCursor(0, 0);
  layar.print("Menyambung WiFi...");
  layar.display();
  sambungWiFi();
  mqtt.setServer(BROKER, 1883);
}

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

if (millis() - terakhir >= 5000) {
    terakhir = millis();
    float suhu = dht.readTemperature();
    float lembap = dht.readHumidity();
    if (isnan(suhu) || isnan(lembap)) return;
    gambar(suhu, lembap);
    mqtt.publish(TOPIK_SUHU, String(suhu, 1).c_str());
    mqtt.publish(TOPIK_LEMBAP, String(lembap, 0).c_str());
  }
}

Langkah 4: Pahami kodenya

Alamat I2C OLED biasanya 0x3C. Sebagian modul memakai 0x3D.
Bar kelembapan: lebar maksimal 124 piksel untuk 100%. fillRect(x, y, lebar, tinggi, warna).
Tanpa display(), tidak ada yang berubah di layar. Semua gambar baru dikirim sekaligus di sini.