{"id":627,"date":"2026-11-06T13:28:53","date_gmt":"2026-11-06T13:28:53","guid":{"rendered":"https:\/\/kuliahelektro.org\/?p=627"},"modified":"2026-11-06T13:28:53","modified_gmt":"2026-11-06T13:28:53","slug":"tutorial-esp32-arduino-cara-membuat-dadu-digital-elektronik-interaktif-dengan-layar-oled-ssd1306-rotary-encoder-buzzer-led-pada-wokwi","status":"publish","type":"post","link":"https:\/\/kuliahelektro.org\/?p=627","title":{"rendered":"Tutorial ESP32 \/ Arduino: Cara Membuat Dadu Digital Elektronik Interaktif dengan Layar OLED SSD1306, Rotary Encoder, Buzzer, &amp; LED pada WOKWI"},"content":{"rendered":"\n<p>Pada bagian ini akan dibahas pembuatan proyek kreatif dadu digital interaktif (Digital Dice Simulator) berbasis mikrokontroler Arduino\/ESP32, modul layar OLED SSD1306 (128&#215;64 I2C), rotary encoder untuk pengaturan jumlah dadu (1 hingga 3 buah dadu), lampu LED indikator, buzzer efek suara (tick &amp; jingle kemenangan), serta platform simulasi WOKWI. Skematik rangkaian ditunjukkan pada Gambar 1, program Arduino pada Kode 1, dan video pembuatan pada tautan Video 1. Sistem memungkinkan pengguna memilih jumlah dadu yang ingin dilempar dengan memutar rotary encoder, menekan tombol switch (SW) untuk memulai animasi pengocokan dadu realistis (lengkap dengan efek drop dari atas layar dan visual dot pola angka 1 sampai 6), serta menghasilkan umpan balik suara dan cahaya yang sinkron.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><a href=\"https:\/\/www.youtube.com\/watch?v=FU47qUuDMlc&amp;lc=UgzSovFyOQX0bqIigkt4AaABAg\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"957\" src=\"https:\/\/kuliahelektro.org\/wp-content\/uploads\/2026\/11\/image-6-1024x957.png\" alt=\"\" class=\"wp-image-630\" style=\"aspect-ratio:1.0700104493207943;width:436px;height:auto\" srcset=\"https:\/\/kuliahelektro.org\/wp-content\/uploads\/2026\/11\/image-6-1024x957.png 1024w, https:\/\/kuliahelektro.org\/wp-content\/uploads\/2026\/11\/image-6-300x281.png 300w, https:\/\/kuliahelektro.org\/wp-content\/uploads\/2026\/11\/image-6-768x718.png 768w, https:\/\/kuliahelektro.org\/wp-content\/uploads\/2026\/11\/image-6.png 1170w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/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 (CLK)<br>DT (Data Pin) =&gt; Digital Pin 3 (DT)<br>SW (Switch Pin) =&gt; Digital Pin 4 (SW &#8211; dengan internal pull-up)<br>VCC =&gt; 5V \/ 3.3V<br>GND =&gt; GND<\/li>\n\n\n\n<li>Layar OLED Display I2C (128&#215;64 SSD1306)<br>SDA =&gt; Pin SDA (GPIO 21 pada ESP32 \/ A4 pada Arduino Uno)<br>SCL =&gt; Pin SCL (GPIO 22 pada ESP32 \/ A5 pada Arduino Uno)<br>VCC =&gt; 5V \/ 3.3V<br>GND =&gt; GND<\/li>\n\n\n\n<li>Aktuator Indikator &amp; Audio<br>Buzzer Alarm (Positive Terminal) =&gt; Digital Pin 5 (BUZZER_PIN)<br>LED Indikator Dadu =&gt; Digital Pin 6 (LED_PIN via Resistor 220 Ohm)<\/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 perangkat simulator dadu elektronik interaktif mandiri (standalone\/offline) pada platform WOKWI menggunakan layar OLED, rotary encoder, dan buzzer 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>\/\/ =============================\r\n\/\/ ALFIAN CENTER\r\n\/\/ SUBSCRIBE\r\n\/\/ DADU DIGITAL\r\n\/\/ PROGRAM BAKAL DI SHARE KALO LIKE TEMBUS 50 DAN KOMEN 20\r\n\/\/ ATAU BISA KIRIM EMAIL VIA KOMENTAR\r\n\/\/ =============================\r\n\r\n#include &lt;Adafruit_GFX.h>\r\n#include &lt;Adafruit_SSD1306.h>\r\n#include &lt;Wire.h>\r\n#include &lt;Arduino.h>\r\n#include &lt;Encoder.h>   \/\/ \u2705 pakai library Encoder\r\n\r\n#define SCREEN_WIDTH 128\r\n#define SCREEN_HEIGHT 64\r\nAdafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &amp;Wire, -1);\r\n\r\n\/\/ Rotary encoder pins\r\n#define CLK 2\r\n#define DT 3\r\n#define SW 4\r\n\r\n\/\/ LED + buzzer\r\n#define LED_PIN 6\r\n#define BUZZER_PIN 5\r\n\r\n\/\/ Encoder object\r\nEncoder encoder(CLK, DT);\r\nlong lastEncoderPos = 0;\r\n\r\n\/\/ state\r\nint encoderPos = 1;     \r\nbool swPressed = false;\r\nint diceResult&#91;3] = {1,1,1};\r\n\r\n\/\/ \u2705 Global variabel untuk ukuran dadu &amp; jarak angka\r\nint diceSize = 34;         \r\nint numberOffset = 8;      \r\n\r\nvoid setup() {\r\n  pinMode(SW, INPUT_PULLUP);\r\n  pinMode(LED_PIN, OUTPUT);\r\n  pinMode(BUZZER_PIN, OUTPUT);\r\n\r\n  if (!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {\r\n    for (;;); \r\n  }\r\n  display.clearDisplay();\r\n  display.setTextSize(1);\r\n  display.setTextColor(SSD1306_WHITE);\r\n  display.setCursor(0,0);\r\n  display.println(\"Dadu Elektronik\");\r\n  display.display();\r\n  delay(1000);\r\n}\r\n\r\nvoid loop() {\r\n  readEncoder();\r\n\r\n  if (digitalRead(SW) == LOW &amp;&amp; !swPressed) {\r\n    swPressed = true;\r\n    rollDice();\r\n  } else if (digitalRead(SW) == HIGH) {\r\n    swPressed = false;\r\n  }\r\n\r\n  drawMenu();\r\n}\r\n\r\nvoid readEncoder() {\r\n  long newPos = encoder.read() \/ 4; \/\/ bagi 4 biar langkah nggak terlalu sensitif\r\n  if (newPos != lastEncoderPos) {\r\n    if (newPos > lastEncoderPos) {\r\n      encoderPos++;\r\n    } else {\r\n      encoderPos--;\r\n    }\r\n    if (encoderPos &lt; 1) encoderPos = 1;\r\n    if (encoderPos > 3) encoderPos = 3;\r\n    lastEncoderPos = newPos;\r\n  }\r\n}\r\n\r\nvoid rollDice() {\r\n  \/\/ animasi roll (lebih lama, makin pelan)\r\n  for (int i=0; i&lt;20; i++) {\r\n    for (int d=0; d&lt;encoderPos; d++) {\r\n      diceResult&#91;d] = random(1,7);\r\n    }\r\n    drawDiceInstant(false);\r\n\r\n    \/\/ efek suara + LED\r\n    digitalWrite(LED_PIN, HIGH);\r\n    tone(BUZZER_PIN, 800, 50); \/\/ tick pendek\r\n    delay(50);\r\n    digitalWrite(LED_PIN, LOW);\r\n\r\n    delay(80 + i*20);\r\n  }\r\n\r\n  \/\/ animasi turun dari atas layar\r\n  for (int offset=-40; offset&lt;=0; offset+=4) {\r\n    drawDiceWithOffset(offset, false);\r\n    delay(50);\r\n  }\r\n\r\n  \/\/ tampilkan hasil akhir\r\n  drawDiceWithOffset(0, true);\r\n\r\n  \/\/ \ud83c\udfb6 Jingle akhir + LED sinkron\r\n  playJingle();\r\n\r\n  delay(2000); \r\n}\r\n\r\nvoid drawMenu() {\r\n  display.clearDisplay();\r\n  display.setTextSize(1);\r\n  display.setCursor(0,0);\r\n  display.println(\"Pilih jumlah dadu:\");\r\n  display.setTextSize(2);\r\n  display.setCursor(50,20);\r\n  display.print(encoderPos);\r\n  display.display();\r\n}\r\n\r\nvoid drawDiceInstant(bool showNumber) {\r\n  drawDiceWithOffset(0, showNumber);\r\n}\r\n\r\nvoid drawDiceWithOffset(int offsetY, bool showNumber) {\r\n  display.clearDisplay();\r\n\r\n  int x&#91;3], y = 10 + offsetY;\r\n\r\n  if (encoderPos == 1) {\r\n    x&#91;0] = (SCREEN_WIDTH - diceSize)\/2;  \r\n  } else if (encoderPos == 2) {\r\n    x&#91;0] = 15;  \r\n    x&#91;1] = SCREEN_WIDTH - diceSize - 15;  \r\n  } else if (encoderPos == 3) {\r\n    x&#91;0] = 5;  \r\n    x&#91;1] = (SCREEN_WIDTH - diceSize)\/2;  \r\n    x&#91;2] = SCREEN_WIDTH - diceSize - 5;  \r\n  }\r\n\r\n  for (int d=0; d&lt;encoderPos; d++) {\r\n    drawSingleDice(x&#91;d], y, diceSize, diceResult&#91;d]);\r\n\r\n    if (showNumber) {\r\n      display.setTextSize(1);\r\n      display.setCursor(x&#91;d] + diceSize\/2 - 3, y + diceSize + numberOffset);\r\n      display.print(diceResult&#91;d]);\r\n    }\r\n  }\r\n\r\n  display.display();\r\n}\r\n\r\nvoid drawSingleDice(int x, int y, int size, int value) {\r\n  display.drawRect(x, y, size, size, SSD1306_WHITE);\r\n\r\n  int cx = x + size\/2;\r\n  int cy = y + size\/2;\r\n  int r = 3;\r\n\r\n  switch(value) {\r\n    case 1:\r\n      display.fillCircle(cx, cy, r, SSD1306_WHITE);\r\n      break;\r\n    case 2:\r\n      display.fillCircle(x+8, y+8, r, SSD1306_WHITE);\r\n      display.fillCircle(x+size-8, y+size-8, r, SSD1306_WHITE);\r\n      break;\r\n    case 3:\r\n      display.fillCircle(x+8, y+8, r, SSD1306_WHITE);\r\n      display.fillCircle(cx, cy, r, SSD1306_WHITE);\r\n      display.fillCircle(x+size-8, y+size-8, r, SSD1306_WHITE);\r\n      break;\r\n    case 4:\r\n      display.fillCircle(x+8, y+8, r, SSD1306_WHITE);\r\n      display.fillCircle(x+size-8, y+8, r, SSD1306_WHITE);\r\n      display.fillCircle(x+8, y+size-8, r, SSD1306_WHITE);\r\n      display.fillCircle(x+size-8, y+size-8, r, SSD1306_WHITE);\r\n      break;\r\n    case 5:\r\n      drawSingleDice(x,y,size,4);\r\n      display.fillCircle(cx, cy, r, SSD1306_WHITE);\r\n      break;\r\n    case 6:\r\n      display.fillCircle(x+8, y+8, r, SSD1306_WHITE);\r\n      display.fillCircle(x+8, cy, r, SSD1306_WHITE);\r\n      display.fillCircle(x+8, y+size-8, r, SSD1306_WHITE);\r\n      display.fillCircle(x+size-8, y+8, r, SSD1306_WHITE);\r\n      display.fillCircle(x+size-8, cy, r, SSD1306_WHITE);\r\n      display.fillCircle(x+size-8, y+size-8, r, SSD1306_WHITE);\r\n      break;\r\n  }\r\n}\r\n\r\nvoid playJingle() {\r\n  int melody&#91;] = {600, 800, 1000};   \/\/ nada naik\r\n  int duration&#91;] = {200, 200, 400};  \r\n\r\n  for (int i=0; i&lt;3; i++) {\r\n    tone(BUZZER_PIN, melody&#91;i], duration&#91;i]);\r\n    digitalWrite(LED_PIN, HIGH);\r\n    delay(duration&#91;i]);\r\n    digitalWrite(LED_PIN, LOW);\r\n    delay(50);\r\n  }\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=FU47qUuDMlc&amp;lc=UgzSovFyOQX0bqIigkt4AaABAg\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"576\" src=\"https:\/\/kuliahelektro.org\/wp-content\/uploads\/2026\/11\/image-5-1024x576.png\" alt=\"\" class=\"wp-image-629\" srcset=\"https:\/\/kuliahelektro.org\/wp-content\/uploads\/2026\/11\/image-5-1024x576.png 1024w, https:\/\/kuliahelektro.org\/wp-content\/uploads\/2026\/11\/image-5-300x169.png 300w, https:\/\/kuliahelektro.org\/wp-content\/uploads\/2026\/11\/image-5-768x432.png 768w, https:\/\/kuliahelektro.org\/wp-content\/uploads\/2026\/11\/image-5-1536x864.png 1536w, https:\/\/kuliahelektro.org\/wp-content\/uploads\/2026\/11\/image-5-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\">dadu digital arduino, digital dice oled display, rotary encoder arduino uno, oled ssd1306 128&#215;64, blynk wokwi digital dice, tutorial arduino oled, iot game elektronik, dadu elektronik interaktif, library adafruit ssd1306, library encoder arduino, buzzer tone melodi dadu, led indikator dadu, pinout rotary encoder clk dt sw, i2c oled display arduino, animasi lempar dadu oled, fungsi draw single dice, random number generator arduino, tutorial wokwi indonesia, simulasi iot game, permainan dadu digital, oled screen graphics, datastream oled display, smart game appliances, proyek teknik elektro kreatif, mekatronika game digital, tugas akhir arduino oled, skripsi iot digital dice, ide proyek mikrokontroler, skematik dadu digital oled, diagram rangkaian encoder oled buzzer, source code dadu digital oled, program arduino oled dice, simulasi iot tanpa hardware, platform simulasi wokwi, wokwi arduino digital dice, alat permainan berbasis mikrokontroler, telemetry data oled screen, proyek sains elektro, portofolio mikrokontroler, praktikum arduino uno, modul oled ssd1306 i2c, pinout arduino oled encoder, indikator suara buzzer, grafik dadu oled, game digital konsol mini, efisiensi hiburan elektronik, panduan arduino oled display, belajar mikrokontroler online, simulator komponen elektronik oled, wokwi custom chip game, internet of things indonesia, iot smk teknik elektro, iot universitas teknik, prototipe dadu oled arduino, alat pengocok dadu otomatis, smart game project, arduino ide programming, tutorial arduino pemula, proyek elektro game digital, panduan lengkap wokwi oled, sensor encoder putar akurat, sistem animasi layar oled, logika pemilihan jumlah dadu, notifikasi suara jingle dadu, sistem hiburan interaktif, otomatisasi game elektronik, proyek mekatronika elektro, simulasi hardware digital dice, sistem dadu digital arduino, proyek arduino populer, kodingan game dadu otomatis, oled graphics library, rangkaian encoder dan oled, tutorial mikrokontroler pemula, wawasan teknik elektro, aplikasi oled display, konsol game mini arduino, koding logika switch oled, pemantauan status menu real time, arduino game management system<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Pada bagian ini akan dibahas pembuatan proyek kreatif dadu digital interaktif (Digital Dice Simulator) berbasis mikrokontroler Arduino\/ESP32, modul layar OLED SSD1306 (128&#215;64 I2C), rotary encoder untuk pengaturan jumlah dadu (1 hingga 3 buah dadu), lampu LED indikator, buzzer efek suara (tick &amp; jingle kemenangan), serta platform simulasi WOKWI. Skematik rangkaian ditunjukkan pada Gambar 1, program Arduino pada Kode 1, dan&#8230;<\/p>\n","protected":false},"author":3,"featured_media":629,"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\/627"}],"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=627"}],"version-history":[{"count":2,"href":"https:\/\/kuliahelektro.org\/index.php?rest_route=\/wp\/v2\/posts\/627\/revisions"}],"predecessor-version":[{"id":631,"href":"https:\/\/kuliahelektro.org\/index.php?rest_route=\/wp\/v2\/posts\/627\/revisions\/631"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kuliahelektro.org\/index.php?rest_route=\/wp\/v2\/media\/629"}],"wp:attachment":[{"href":"https:\/\/kuliahelektro.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=627"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kuliahelektro.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=627"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kuliahelektro.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=627"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}