Tutorial Arduino: Cara Membuat Sistem Menu Navigasi Bertingkat Multi-Level (Main Menu, Sub Menu, & Action Mode) Menggunakan Layar LCD I2C 16×2 & Rotary Encoder pada WOKWI

Pada bagian ini akan dibahas pembuatan sistem antarmuka menu navigasi bertingkat interaktif (Multi-Level Menu Navigation System) berbasis mikrokontroler Arduino/ESP32, layar LCD 16×2 I2C, rotary encoder untuk navigasi naik-turun menu, serta tombol tekan (push button) dengan fitur deteksi short press (klik singkat untuk masuk menu/eksekusi) dan long press (tahan tombol untuk kembali ke menu sebelumnya) pada platform simulasi WOKWI. Skematik rangkaian ditunjukkan pada Gambar 1, program Arduino pada Kode 1, dan video pembuatan pada tautan Video 1. Sistem dirancang secara terstruktur dengan pembagian 3 tingkat level menu (Level 0 untuk Menu Utama, Level 1 untuk Sub Menu spesifik, dan Level 2 untuk Mode Eksekusi Aksi / Action Mode) yang sangat ideal diterapkan pada berbagai perangkat instrumen pintar berbasis mikrokontroler.

Gambar 1. Skematik rangkaian sistem

List Pin:

• Modul Rotary Encoder
  CLK (Clock Pin) => Digital Pin 2 (clkPin)
  DT (Data Pin) => Digital Pin 3 (dtPin)
  SW (Switch Pin) => Digital Pin 4 (swPin – dengan internal pull-up)
  VCC => 5V / 3.3V
  GND => GND
• Layar LCD Display I2C (128×64 / 16×2 SSD1306/HD44780)
  SDA => Pin SDA (A4 pada Arduino Uno / GPIO 21 pada ESP32)
  SCL => Pin SCL (A5 pada Arduino Uno / GPIO 22 pada ESP32)
  VCC => 5V / 3.3V
  GND => GND

List Virtual PIN:

• Proyek ini dirancang sebagai sistem kendali antarmuka menu lokal interaktif (standalone/offline) pada platform WOKWI menggunakan layar LCD dan rotary encoder tanpa koneksi internet/cloud. Oleh karena itu, pemetaan Virtual Pin Blynk tidak diterapkan pada modul proyek ini.

// ALFIAN CENTER
// SUBSCRIBE

#include <Wire.h>
#include <LiquidCrystal_I2C.h>

LiquidCrystal_I2C lcd(0x27, 16, 2);

// Rotary encoder pins
const int clkPin = 2;
const int dtPin = 3;
const int swPin = 4;

int lastClk = HIGH;
int encoderPos = 0;

unsigned long buttonPressTime = 0;
bool buttonHeld = false;

int menuLevel = 0; // 0 = main, 1 = sub, 2 = action

int currentMain = 0;
int currentSub = 0;

String mainMenu[] = {"1.Pengaturan", "2.Kendali", "3.Info Sistem", "4.Reset Alat"};
String pengaturan[] = {"- Kecerahan", "- Kecepatan", "- Volume"};
String kendali[] = {"- Servo", "- Motor DC", "- LED", "- Pompa"};
String info[] = {"- Waktu Aktif", "- Status Daya", "- Firmware Ver."};
String reset[] = {"- Reset Config", "- Restart Ardu."};

void setup() {
  pinMode(clkPin, INPUT);
  pinMode(dtPin, INPUT);
  pinMode(swPin, INPUT_PULLUP);

  lcd.init();
  lcd.backlight();
  lcd.setCursor(0, 0);
  lcd.print("Menu Sistem Siap");
  delay(1000);
  lcd.clear();
  showMain();
}


// ALFIAN CENTER
// SUBSCRIBE
void loop() {
  // Rotary encoder reading
  int currentClk = digitalRead(clkPin);
  int currentDt = digitalRead(dtPin);

  if (currentClk != lastClk && currentClk == LOW) {
    if (currentDt != currentClk) encoderPos++;
    else encoderPos--;

    updateMenu();
  }
  lastClk = currentClk;

  // Button logic
  bool buttonState = digitalRead(swPin) == LOW;

  if (buttonState && !buttonHeld) {
    buttonPressTime = millis();
    buttonHeld = true;
  }

  if (!buttonState && buttonHeld) {
    unsigned long pressDuration = millis() - buttonPressTime;
    buttonHeld = false;

    if (pressDuration < 800) {
      // Short press
      if (menuLevel == 0) {
        menuLevel = 1;
        encoderPos = 0;
        currentSub = 0;
        showSub();
      } else if (menuLevel == 1) {
        menuLevel = 2;
        showAction();
      }
    } else {
      // Long press → go back
      if (menuLevel == 2) {
        menuLevel = 1;
        showSub();
      } else if (menuLevel == 1) {
        menuLevel = 0;
        encoderPos = currentMain;
        showMain();
      }
    }
  }
}


// ALFIAN CENTER
// SUBSCRIBE
void updateMenu() {
  if (menuLevel == 0) {
    if (encoderPos < 0) encoderPos = 3;
    if (encoderPos > 3) encoderPos = 0;
    currentMain = encoderPos;
    showMain();
  } else if (menuLevel == 1) {
    int sizeSub = getSubMenuSize();
    if (encoderPos < 0) encoderPos = sizeSub - 1;
    if (encoderPos >= sizeSub) encoderPos = 0;
    currentSub = encoderPos;
    showSub();
  }
}

int getSubMenuSize() {
  switch (currentMain) {
    case 0: return sizeof(pengaturan) / sizeof(pengaturan[0]);
    case 1: return sizeof(kendali) / sizeof(kendali[0]);
    case 2: return sizeof(info) / sizeof(info[0]);
    case 3: return sizeof(reset) / sizeof(reset[0]);
  }
  return 0;
}


// ALFIAN CENTER
// SUBSCRIBE
void showMain() {
  lcd.clear();
  lcd.setCursor(0, 0);
  lcd.print("Menu Utama:");
  lcd.setCursor(0, 1);
  lcd.print(mainMenu[currentMain]);
}

void showSub() {
  lcd.clear();
  switch (currentMain) {
    case 0: lcd.setCursor(0, 0); lcd.print("Pengaturan:"); lcd.setCursor(0, 1); lcd.print(pengaturan[currentSub]); break;
    case 1: lcd.setCursor(0, 0); lcd.print("Kendali:"); lcd.setCursor(0, 1); lcd.print(kendali[currentSub]); break;
    case 2: lcd.setCursor(0, 0); lcd.print("Info Sistem:"); lcd.setCursor(0, 1); lcd.print(info[currentSub]); break;
    case 3: lcd.setCursor(0, 0); lcd.print("Reset Alat:"); lcd.setCursor(0, 1); lcd.print(reset[currentSub]); break;
  }
}


// ALFIAN CENTER
// SUBSCRIBE
void showAction() {
  lcd.clear();
  lcd.setCursor(0, 0);
  lcd.print("Menjalankan...");

  String label = "";
  if (currentMain == 0) label = pengaturan[currentSub];
  else if (currentMain == 1) label = kendali[currentSub];
  else if (currentMain == 2) label = info[currentSub];
  else if (currentMain == 3) label = reset[currentSub];

  lcd.setCursor(0, 1);
  lcd.print(label);

  // Simulasi aksi bisa ditambahkan di sini, contoh:
  // if (currentMain == 0 && currentSub == 0) { analogWrite(ledPin, value); }
}

Kode Arduino 1. Kode Program

Video 1. Video tutorial pembuatan

TAG:

menu navigasi bertingkat arduino, multi level menu lcd 16×2, rotary encoder arduino uno, oled lcd i2c 16×2, blynk wokwi menu system, tutorial arduino lcd, iot antarmuka menu, sistem menu interaktif arduino, library liquidcrystal i2c, rotary encoder clk dt sw, fungsi millis debounce tombol, long press short press arduino, pinout rotary encoder arduino, i2c lcd display arduino, navigasi menu utama sub menu, fungsi showmain showsub showaction, array menu c++ arduino, tutorial wokwi indonesia, simulasi iot antarmuka, pengaturan menu digital, lcd screen display menu, datastream lcd display, smart menu appliances, proyek teknik elektro kreatif, mekatronika antarmuka digital, tugas akhir arduino lcd, skripsi iot menu system, ide proyek mikrokontroler antarmuka, skematik menu bertingkat arduino, diagram rangkaian encoder lcd, source code menu bertingkat oled, program arduino lcd menu, simulasi iot tanpa hardware, platform simulasi wokwi, wokwi arduino menu navigation, alat antarmuka berbasis mikrokontroler, telemetry data lcd screen, proyek sains elektro, portofolio mikrokontroler antarmuka, praktikum arduino uno, modul lcd 16×2 i2c, pinout arduino lcd encoder, indikator status menu, grafik navigasi lcd, menu konsol digital mini, efisiensi antarmuka elektronik, panduan arduino lcd display, belajar mikrokontroler online, simulator komponen elektronik, wokwi custom chip menu, internet of things indonesia, iot smk teknik elektro, iot universitas teknik, prototipe menu lcd arduino, alat pengatur menu otomatis, smart menu project, arduino ide programming, tutorial arduino pemula, proyek elektro antarmuka digital, panduan lengkap wokwi lcd, sensor encoder putar akurat, sistem animasi layar lcd, logika perpindahan level menu, notifikasi status aksi menu, sistem kendali interaktif, otomatisasi antarmuka elektronik, proyek mekatronika elektro, simulasi hardware menu navigation, sistem menu bertingkat arduino, proyek arduino populer, kodingan antarmuka otomatis, liquidcrystal library arduino, rangkaian encoder dan lcd, tutorial mikrokontroler pemula, wawasan teknik elektro, aplikasi lcd display antarmuka, konsol menu mini arduino, koding logika switch level, pemantauan status menu real time, arduino interface management system