Tutorial Belanja komponen

Tutorial › Layar

Status Rapat: Sibuk / Kosong di LCD

ESP32-WROOM-32D23D22TX0RX0D21D19D18D5TX2RX2D4D2D15GND3V3ENVPVND34D35D32D33D25D26D27D14D12D13GNDVINIchibot16x2 I2CGNDVCCSDASCLLCD 16×2 + modul I2C+−LED merah + resistor 330 Ω+−LED hijau + resistor 330 Ω

Papan di pintu ruang rapat: LED merah dan tulisan SEDANG RAPAT saat dipakai, LED hijau dan RUANG KOSONG saat bebas. Penjelasan tambahan seperti Selesai 11.30 bisa diketik dari HP tanpa keluar ruangan.

Penutup bab Layar ini menggabungkan LCD I2C (proyek 101) dengan dua LED (proyek 004). Switch Sibuk menentukan semuanya: LED mana yang menyala, tulisan di baris atas, dan keterangan bawaan di baris bawah. Kalau ada teks dari widget Keterangan, teks itu menggantikan keterangan bawaan sampai status berubah lagi.

Semua tampilan diurus satu fungsi, tampilkan(), yang dipanggil setiap ada pesan. Status juga dikirim ke topic sibuk/status dengan flag retained, jadi siapa pun yang membuka dashboard dari meja kerja bisa melihat apakah ruangan sedang dipakai.

Komponen

KomponenQtyHarga
ESP32 DOIT DevKit V1 30 pin1Rp75.000
LCD 1602 Biru Terpasang I2C IIC 16×02 Display Mo1Rp37.500
LED 5 mm merah (isi 10)isi 10, terpakai 11Rp2.500
LED 5 mm hijau (isi 10)isi 10, terpakai 11Rp2.850
Resistor 330 Ω (isi 10)isi 10, terpakai 21Rp1.800
Breadboard mini 170 titik1Rp4.875
Kabel jumper male-female 10 cm (isi 10)isi 10, terpakai 41Rp3.500
Kabel jumper female-female 10 cm (isi 10)isi 10, terpakai 41Rp3.500
Kabel micro USB data 30 cmopsional, kalau belum punya kabel micro USB data1Rp11.700
Total (tanpa opsional)Rp131.525
Daftar 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.

DariKeKabel
LCD 16×2 + modul I2C GND→GNDhitam
LCD 16×2 + modul I2C VCC→VINmerah
LCD 16×2 + modul I2C SDA→D21 GPIO21biru
LCD 16×2 + modul I2C SCL→D22 GPIO22kuning
LED merah + resistor 330 Ω +→D25 GPIO25merah
LED merah + resistor 330 Ω −→GNDhitam
LED hijau + resistor 330 Ω +→D26 GPIO26hijau
LED hijau + resistor 330 Ω −→GNDhitam

Langkah 2: Siapkan dashboard Klenik

Ruang Dipakaiichibot/budi1234/p110/sibuk
Sibuk
0 detik lalu
Keterangan (16 huruf)ichibot/budi1234/p110/keterangan
Selesai 11.30
Belum pernah dikirim
Ruang Rapatichibot/budi1234/p110/sibuk/status
SIBUK
0 detik lalu

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

WidgetTopicSetting
Switch
Ruang Dipakai
ichibot/KODE/p110/sibukpayload ON / OFF
TEXT_INPUT
Keterangan (16 huruf)
ichibot/KODE/p110/keteranganteks bebas
Indikator Boolean
Ruang Rapat
ichibot/KODE/p110/sibuk/statusON = 1 “SIBUK”, OFF = 0

Langkah 3: Upload kode

Library: PubSubClient (Nick O'Leary), LiquidCrystal I2C (Frank de Brabander). 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).

p110.inoUnduh .ino
// Proyek 110 - Status Rapat: Sibuk / Kosong di LCD
// Board: ESP32 DOIT DevKit V1 | Dashboard: klenik.ichibot.id
#include <WiFi.h>
#include <PubSubClient.h>
#include <Wire.h>
#include <LiquidCrystal_I2C.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_SIBUK_STATUS = "ichibot/budi1234/p110/sibuk/status";
const char* TOPIK_SIBUK        = "ichibot/budi1234/p110/sibuk";
const char* TOPIK_KETERANGAN   = "ichibot/budi1234/p110/keterangan";

const char* BROKER = "mqtt.ichibot.id";
WiFiClient wifi;
PubSubClient mqtt(wifi);
LiquidCrystal_I2C lcd(0x27, 16, 2);
const int LED_MERAH = 25, LED_HIJAU = 26;
bool sibuk = false;
String keterangan = "Silakan masuk";

void tampilkan() {
  digitalWrite(LED_MERAH, sibuk);
  digitalWrite(LED_HIJAU, !sibuk);
  lcd.clear();
  lcd.setCursor(0, 0);
  lcd.print(sibuk ? ">> SEDANG RAPAT" : "   RUANG KOSONG");
  lcd.setCursor(0, 1);
  lcd.print(keterangan.substring(0, 16));
  mqtt.publish(TOPIK_SIBUK_STATUS, sibuk ? "1" : "0", true);
}

void pesanMasuk(char* t, byte* isi, unsigned int panjang) {
  String topik = t;
  String p;
  for (unsigned int i = 0; i < panjang; i++) p += (char)isi[i];
  if (topik == TOPIK_SIBUK) {
    sibuk = (p == "ON");
    keterangan = sibuk ? "Mohon tidak masuk" : "Silakan masuk";   // teks bawaan
  } else if (topik == TOPIK_KETERANGAN) {
    keterangan = p;                   // misalnya "Selesai 11.30"
  }
  tampilkan();
}

void langganan() {
  mqtt.subscribe(TOPIK_SIBUK);
  mqtt.subscribe(TOPIK_KETERANGAN);
}

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); pinMode(LED_MERAH, OUTPUT); pinMode(LED_HIJAU, OUTPUT); lcd.init(); lcd.backlight(); sambungWiFi(); mqtt.setServer(BROKER, 1883); mqtt.setCallback(pesanMasuk); tampilkan(); } void loop() { if (!mqtt.connected()) sambungMQTT(); mqtt.loop(); }

Langkah 4: Pahami kodenya

  1. LED hijau selalu kebalikan LED merah. ! membalik true/false.
  2. Keterangan dipotong 16 huruf supaya tidak meluber. Untuk teks panjang, pakai teknik berjalan dari proyek 101.
  3. Setiap kali status berubah, keterangan kembali ke teks bawaan, jadi keterangan rapat sebelumnya tidak tertinggal.