{"id":647,"date":"2026-11-07T07:45:43","date_gmt":"2026-11-07T07:45:43","guid":{"rendered":"https:\/\/kuliahelektro.org\/?p=647"},"modified":"2026-11-07T07:45:44","modified_gmt":"2026-11-07T07:45:44","slug":"tutorial-arduino-cara-membuat-sistem-menu-navigasi-bertingkat-multi-level-main-menu-sub-menu-action-mode-menggunakan-layar-lcd-i2c-16x2-rotary-encoder-pada-wokwi","status":"publish","type":"post","link":"https:\/\/kuliahelektro.org\/?p=647","title":{"rendered":"Tutorial Arduino: Cara Membuat Sistem Menu Navigasi Bertingkat Multi-Level (Main Menu, Sub Menu, &amp; Action Mode) Menggunakan Layar LCD I2C 16&#215;2 &amp; Rotary Encoder pada WOKWI"},"content":{"rendered":"\n<p>Pada bagian ini akan dibahas pembuatan sistem antarmuka menu navigasi bertingkat interaktif (Multi-Level Menu Navigation System) berbasis mikrokontroler Arduino\/ESP32, layar LCD 16&#215;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.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/www.youtube.com\/watch?v=tQXCmJfnL7s&amp;lc=UgxBB7ZobzSFshpWpLF4AaABAg\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" loading=\"lazy\" width=\"891\" height=\"760\" src=\"https:\/\/kuliahelektro.org\/wp-content\/uploads\/2026\/11\/image-13.png\" alt=\"\" class=\"wp-image-648\" style=\"aspect-ratio:1.1723684210526315;width:629px;height:auto\" srcset=\"https:\/\/kuliahelektro.org\/wp-content\/uploads\/2026\/11\/image-13.png 891w, https:\/\/kuliahelektro.org\/wp-content\/uploads\/2026\/11\/image-13-300x256.png 300w, https:\/\/kuliahelektro.org\/wp-content\/uploads\/2026\/11\/image-13-768x655.png 768w\" sizes=\"(max-width: 891px) 100vw, 891px\" \/><\/a><\/figure><\/div>\n\n\n<p class=\"has-text-align-center\"><strong>Gambar 1. Skematik rangkaian sistem<\/strong><\/p>\n\n\n\n<p><strong>List Pin:<\/strong><\/p>\n\n\n\n<ul>\n<li>Modul Rotary Encoder<br>CLK (Clock Pin) =&gt; Digital Pin 2 (clkPin)<br>DT (Data Pin) =&gt; Digital Pin 3 (dtPin)<br>SW (Switch Pin) =&gt; Digital Pin 4 (swPin &#8211; dengan internal pull-up)<br>VCC =&gt; 5V \/ 3.3V<br>GND =&gt; GND<\/li>\n\n\n\n<li>Layar LCD Display I2C (128&#215;64 \/ 16&#215;2 SSD1306\/HD44780)<br>SDA =&gt; Pin SDA (A4 pada Arduino Uno \/ GPIO 21 pada ESP32)<br>SCL =&gt; Pin SCL (A5 pada Arduino Uno \/ GPIO 22 pada ESP32)<br>VCC =&gt; 5V \/ 3.3V<br>GND =&gt; GND<\/li>\n<\/ul>\n\n\n\n<p><strong>List Virtual PIN:<\/strong><\/p>\n\n\n\n<ul>\n<li>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.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ ALFIAN CENTER\r\n\/\/ SUBSCRIBE\r\n\r\n#include &lt;Wire.h>\r\n#include &lt;LiquidCrystal_I2C.h>\r\n\r\nLiquidCrystal_I2C lcd(0x27, 16, 2);\r\n\r\n\/\/ Rotary encoder pins\r\nconst int clkPin = 2;\r\nconst int dtPin = 3;\r\nconst int swPin = 4;\r\n\r\nint lastClk = HIGH;\r\nint encoderPos = 0;\r\n\r\nunsigned long buttonPressTime = 0;\r\nbool buttonHeld = false;\r\n\r\nint menuLevel = 0; \/\/ 0 = main, 1 = sub, 2 = action\r\n\r\nint currentMain = 0;\r\nint currentSub = 0;\r\n\r\nString mainMenu&#91;] = {\"1.Pengaturan\", \"2.Kendali\", \"3.Info Sistem\", \"4.Reset Alat\"};\r\nString pengaturan&#91;] = {\"- Kecerahan\", \"- Kecepatan\", \"- Volume\"};\r\nString kendali&#91;] = {\"- Servo\", \"- Motor DC\", \"- LED\", \"- Pompa\"};\r\nString info&#91;] = {\"- Waktu Aktif\", \"- Status Daya\", \"- Firmware Ver.\"};\r\nString reset&#91;] = {\"- Reset Config\", \"- Restart Ardu.\"};\r\n\r\nvoid setup() {\r\n  pinMode(clkPin, INPUT);\r\n  pinMode(dtPin, INPUT);\r\n  pinMode(swPin, INPUT_PULLUP);\r\n\r\n  lcd.init();\r\n  lcd.backlight();\r\n  lcd.setCursor(0, 0);\r\n  lcd.print(\"Menu Sistem Siap\");\r\n  delay(1000);\r\n  lcd.clear();\r\n  showMain();\r\n}\r\n\r\n\r\n\/\/ ALFIAN CENTER\r\n\/\/ SUBSCRIBE\r\nvoid loop() {\r\n  \/\/ Rotary encoder reading\r\n  int currentClk = digitalRead(clkPin);\r\n  int currentDt = digitalRead(dtPin);\r\n\r\n  if (currentClk != lastClk &amp;&amp; currentClk == LOW) {\r\n    if (currentDt != currentClk) encoderPos++;\r\n    else encoderPos--;\r\n\r\n    updateMenu();\r\n  }\r\n  lastClk = currentClk;\r\n\r\n  \/\/ Button logic\r\n  bool buttonState = digitalRead(swPin) == LOW;\r\n\r\n  if (buttonState &amp;&amp; !buttonHeld) {\r\n    buttonPressTime = millis();\r\n    buttonHeld = true;\r\n  }\r\n\r\n  if (!buttonState &amp;&amp; buttonHeld) {\r\n    unsigned long pressDuration = millis() - buttonPressTime;\r\n    buttonHeld = false;\r\n\r\n    if (pressDuration &lt; 800) {\r\n      \/\/ Short press\r\n      if (menuLevel == 0) {\r\n        menuLevel = 1;\r\n        encoderPos = 0;\r\n        currentSub = 0;\r\n        showSub();\r\n      } else if (menuLevel == 1) {\r\n        menuLevel = 2;\r\n        showAction();\r\n      }\r\n    } else {\r\n      \/\/ Long press \u2192 go back\r\n      if (menuLevel == 2) {\r\n        menuLevel = 1;\r\n        showSub();\r\n      } else if (menuLevel == 1) {\r\n        menuLevel = 0;\r\n        encoderPos = currentMain;\r\n        showMain();\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n\r\n\/\/ ALFIAN CENTER\r\n\/\/ SUBSCRIBE\r\nvoid updateMenu() {\r\n  if (menuLevel == 0) {\r\n    if (encoderPos &lt; 0) encoderPos = 3;\r\n    if (encoderPos > 3) encoderPos = 0;\r\n    currentMain = encoderPos;\r\n    showMain();\r\n  } else if (menuLevel == 1) {\r\n    int sizeSub = getSubMenuSize();\r\n    if (encoderPos &lt; 0) encoderPos = sizeSub - 1;\r\n    if (encoderPos >= sizeSub) encoderPos = 0;\r\n    currentSub = encoderPos;\r\n    showSub();\r\n  }\r\n}\r\n\r\nint getSubMenuSize() {\r\n  switch (currentMain) {\r\n    case 0: return sizeof(pengaturan) \/ sizeof(pengaturan&#91;0]);\r\n    case 1: return sizeof(kendali) \/ sizeof(kendali&#91;0]);\r\n    case 2: return sizeof(info) \/ sizeof(info&#91;0]);\r\n    case 3: return sizeof(reset) \/ sizeof(reset&#91;0]);\r\n  }\r\n  return 0;\r\n}\r\n\r\n\r\n\/\/ ALFIAN CENTER\r\n\/\/ SUBSCRIBE\r\nvoid showMain() {\r\n  lcd.clear();\r\n  lcd.setCursor(0, 0);\r\n  lcd.print(\"Menu Utama:\");\r\n  lcd.setCursor(0, 1);\r\n  lcd.print(mainMenu&#91;currentMain]);\r\n}\r\n\r\nvoid showSub() {\r\n  lcd.clear();\r\n  switch (currentMain) {\r\n    case 0: lcd.setCursor(0, 0); lcd.print(\"Pengaturan:\"); lcd.setCursor(0, 1); lcd.print(pengaturan&#91;currentSub]); break;\r\n    case 1: lcd.setCursor(0, 0); lcd.print(\"Kendali:\"); lcd.setCursor(0, 1); lcd.print(kendali&#91;currentSub]); break;\r\n    case 2: lcd.setCursor(0, 0); lcd.print(\"Info Sistem:\"); lcd.setCursor(0, 1); lcd.print(info&#91;currentSub]); break;\r\n    case 3: lcd.setCursor(0, 0); lcd.print(\"Reset Alat:\"); lcd.setCursor(0, 1); lcd.print(reset&#91;currentSub]); break;\r\n  }\r\n}\r\n\r\n\r\n\/\/ ALFIAN CENTER\r\n\/\/ SUBSCRIBE\r\nvoid showAction() {\r\n  lcd.clear();\r\n  lcd.setCursor(0, 0);\r\n  lcd.print(\"Menjalankan...\");\r\n\r\n  String label = \"\";\r\n  if (currentMain == 0) label = pengaturan&#91;currentSub];\r\n  else if (currentMain == 1) label = kendali&#91;currentSub];\r\n  else if (currentMain == 2) label = info&#91;currentSub];\r\n  else if (currentMain == 3) label = reset&#91;currentSub];\r\n\r\n  lcd.setCursor(0, 1);\r\n  lcd.print(label);\r\n\r\n  \/\/ Simulasi aksi bisa ditambahkan di sini, contoh:\r\n  \/\/ if (currentMain == 0 &amp;&amp; currentSub == 0) { analogWrite(ledPin, value); }\r\n}<\/code><\/pre>\n\n\n\n<p class=\"has-text-align-center\"><strong>Kode Arduino 1. Kode Program<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.youtube.com\/watch?v=tQXCmJfnL7s&amp;lc=UgxBB7ZobzSFshpWpLF4AaABAg\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"576\" src=\"https:\/\/kuliahelektro.org\/wp-content\/uploads\/2026\/11\/image-14-1024x576.png\" alt=\"\" class=\"wp-image-649\" srcset=\"https:\/\/kuliahelektro.org\/wp-content\/uploads\/2026\/11\/image-14-1024x576.png 1024w, https:\/\/kuliahelektro.org\/wp-content\/uploads\/2026\/11\/image-14-300x169.png 300w, https:\/\/kuliahelektro.org\/wp-content\/uploads\/2026\/11\/image-14-768x432.png 768w, https:\/\/kuliahelektro.org\/wp-content\/uploads\/2026\/11\/image-14-1536x864.png 1536w, https:\/\/kuliahelektro.org\/wp-content\/uploads\/2026\/11\/image-14-2048x1152.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"has-text-align-center\"><strong>Video 1. Video tutorial pembuatan<\/strong><\/p>\n\n\n\n<h1 class=\"wp-block-heading\">TAG:<\/h1>\n\n\n\n<p class=\"has-text-align-left\">menu navigasi bertingkat arduino, multi level menu lcd 16&#215;2, rotary encoder arduino uno, oled lcd i2c 16&#215;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&#215;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<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Pada bagian ini akan dibahas pembuatan sistem antarmuka menu navigasi bertingkat interaktif (Multi-Level Menu Navigation System) berbasis mikrokontroler Arduino\/ESP32, layar LCD 16&#215;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&#8230;<\/p>\n","protected":false},"author":3,"featured_media":649,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"_links":{"self":[{"href":"https:\/\/kuliahelektro.org\/index.php?rest_route=\/wp\/v2\/posts\/647"}],"collection":[{"href":"https:\/\/kuliahelektro.org\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kuliahelektro.org\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kuliahelektro.org\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/kuliahelektro.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=647"}],"version-history":[{"count":1,"href":"https:\/\/kuliahelektro.org\/index.php?rest_route=\/wp\/v2\/posts\/647\/revisions"}],"predecessor-version":[{"id":650,"href":"https:\/\/kuliahelektro.org\/index.php?rest_route=\/wp\/v2\/posts\/647\/revisions\/650"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kuliahelektro.org\/index.php?rest_route=\/wp\/v2\/media\/649"}],"wp:attachment":[{"href":"https:\/\/kuliahelektro.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=647"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kuliahelektro.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=647"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kuliahelektro.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=647"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}