{"id":856217,"date":"2026-05-27T16:07:14","date_gmt":"2026-05-27T16:07:14","guid":{"rendered":"https:\/\/elektrobox.ch\/?page_id=856217"},"modified":"2026-06-02T17:06:48","modified_gmt":"2026-06-02T17:06:48","slug":"time_tracking_monitor","status":"publish","type":"page","link":"https:\/\/elektrobox.ch\/index.php\/time_tracking_monitor\/","title":{"rendered":"Time Tracking Monitor"},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\n\/* =========================================================\n   ElektroBox Project Page CSS\n   Shared layout for all project pages\n   Matches the ElektroClock restructured HTML form\n   Paste once into Appearance -> Customize -> Additional CSS\n   ========================================================= *\/\n\n.ebox-project-page,\n.ebox-project-page *,\n.ebox-project-page *::before,\n.ebox-project-page *::after {\n  box-sizing: border-box;\n}\n\n.ebox-project-page {\n  width: 100%;\n  max-width: 1080px;\n  margin: 0 auto;\n  padding: 0 20px;\n  font-family: inherit;\n  line-height: 1.7;\n  color: #1f2933;\n  overflow-x: hidden;\n}\n\n.ebox-project-page h1,\n.ebox-project-page h2,\n.ebox-project-page h3 {\n  color: #111827;\n  line-height: 1.25;\n  overflow-wrap: break-word;\n}\n\n.ebox-project-page h1 {\n  margin: 0 0 16px;\n  font-size: clamp(2.15rem, 4.5vw, 3.5rem);\n  letter-spacing: -0.035em;\n}\n\n.ebox-project-page h2 {\n  margin: 52px 0 16px;\n  padding-bottom: 8px;\n  border-bottom: 2px solid #e5e7eb;\n  font-size: clamp(1.45rem, 2.6vw, 2.05rem);\n}\n\n.ebox-project-page h3 {\n  margin: 28px 0 10px;\n  font-size: 1.2rem;\n}\n\n.ebox-project-page p {\n  margin: 0 0 18px;\n}\n\n.ebox-project-page ul,\n.ebox-project-page ol {\n  margin: 0 0 20px 22px;\n  padding: 0;\n}\n\n.ebox-project-page li {\n  margin: 6px 0;\n}\n\n.ebox-project-page code {\n  padding: 0.08em 0.28em;\n  border-radius: 6px;\n  background: #eef2f7;\n  color: #111827;\n  font-family: Consolas, Monaco, \"Courier New\", monospace;\n  font-size: 0.92em;\n}\n\n\/* Hero *\/\n\n.ebox-hero {\n  margin: 28px 0 34px;\n  padding: clamp(24px, 4vw, 44px);\n  border: 1px solid #e5e7eb;\n  border-radius: 22px;\n  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 55%, #eef6ff 100%);\n  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);\n}\n\n.ebox-hero-with-image {\n  display: grid;\n  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.9fr);\n  align-items: center;\n  gap: 32px;\n}\n\n.ebox-hero-text {\n  min-width: 0;\n}\n\n.ebox-hero-label {\n  display: inline-block;\n  margin-bottom: 14px;\n  padding: 6px 14px;\n  border-radius: 999px;\n  background: #e0f2fe;\n  color: #075985;\n  font-size: 0.92rem;\n  font-weight: 800;\n}\n\n.ebox-hero-image {\n  min-width: 0;\n  width: 100%;\n}\n\n.ebox-hero-image img {\n  display: block;\n  width: 100%;\n  height: auto;\n  border-radius: 18px;\n  object-fit: cover;\n  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);\n}\n\n\/* Video *\/\n\n.ebox-video-section {\n  margin: 42px 0 46px;\n}\n\n.ebox-video-card,\n.ebox-video-box {\n  margin: 20px 0 12px;\n  padding: clamp(12px, 2vw, 18px);\n  border: 1px solid #dce3ea;\n  border-radius: 22px;\n  background: #f8fafc;\n  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);\n}\n\n.ebox-video-frame,\n.ebox-video-wrapper {\n  position: relative;\n  width: 100%;\n  aspect-ratio: 16 \/ 9;\n  overflow: hidden;\n  border-radius: 18px;\n  background: #0f172a;\n}\n\n.ebox-video-frame iframe,\n.ebox-video-wrapper iframe {\n  position: absolute;\n  inset: 0;\n  display: block;\n  width: 100%;\n  height: 100%;\n  border: 0;\n}\n\n\/* Cards and grids *\/\n\n.ebox-card-grid,\n.ebox-summary-grid,\n.ebox-check-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));\n  gap: 16px;\n  margin: 20px 0 28px;\n}\n\n.ebox-info-card,\n.ebox-check-card {\n  min-width: 0;\n  padding: 18px;\n  border: 1px solid #e5e7eb;\n  border-radius: 16px;\n  background: #ffffff;\n  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);\n}\n\n.ebox-info-card strong,\n.ebox-check-card strong {\n  display: block;\n  margin-bottom: 6px;\n  color: #111827;\n}\n\n\/* Sections and images *\/\n\n.ebox-step {\n  margin: 24px 0;\n  padding: clamp(18px, 3vw, 26px);\n  border: 1px solid #e5e7eb;\n  border-radius: 18px;\n  background: #ffffff;\n  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);\n}\n\n.ebox-step h2 {\n  margin-top: 0;\n}\n\n.ebox-section-grid {\n  display: grid;\n  grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr);\n  gap: 28px;\n  align-items: center;\n  margin: 20px 0 30px;\n}\n\n.ebox-image-card,\n.ebox-svg-preview {\n  min-width: 0;\n  margin: 28px 0 34px;\n  padding: clamp(12px, 2vw, 20px);\n  border: 1px solid #dce3ea;\n  border-radius: 18px;\n  background: #f8fafc;\n  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);\n  overflow: hidden;\n  text-align: center;\n}\n\n.ebox-image-card img,\n.ebox-svg-preview img {\n  display: block;\n  width: 100%;\n  max-width: 100%;\n  height: auto;\n  max-height: 72vh;\n  margin: 0 auto;\n  border-radius: 14px;\n  object-fit: contain;\n}\n\n.ebox-image-card .ebox-img-tall {\n  width: auto;\n  max-height: 520px;\n}\n\n.ebox-caption,\n.ebox-svg-caption {\n  margin: 12px 0 0;\n  color: #475569;\n  font-size: 0.95rem;\n  text-align: center;\n}\n\n\/* Notes *\/\n\n.ebox-note,\n.ebox-warning {\n  margin: 22px 0;\n  padding: 18px 20px;\n  border-radius: 12px;\n}\n\n.ebox-note {\n  border-left: 5px solid #0ea5e9;\n  background: #f0f9ff;\n}\n\n.ebox-warning {\n  border-left: 5px solid #f97316;\n  background: #fff7ed;\n}\n\n\/* Flow *\/\n\n.ebox-flow {\n  display: grid;\n  gap: 10px;\n  margin: 20px 0 26px;\n}\n\n.ebox-flow-step {\n  padding: 14px 16px;\n  border-radius: 14px;\n  background: #111827;\n  color: #ffffff;\n  font-weight: 700;\n}\n\n\/* Collapsible details *\/\n\n.ebox-details {\n  margin: 24px 0 34px;\n  border: 1px solid #e5e7eb;\n  border-radius: 18px;\n  background: #ffffff;\n  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);\n  overflow: hidden;\n}\n\n.ebox-details summary {\n  cursor: pointer;\n  padding: 16px 18px;\n  color: #111827;\n  font-weight: 800;\n  background: #f8fafc;\n  border-bottom: 1px solid #e5e7eb;\n}\n\n.ebox-details-content {\n  padding: 18px;\n}\n\n\/* Code *\/\n\n.ebox-code-block {\n  margin: 20px 0 26px;\n  border: 1px solid #d1d5db;\n  border-radius: 16px;\n  overflow: hidden;\n  background: #0b1020;\n  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);\n}\n\n.ebox-code-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 12px 14px;\n  background: #111827;\n  color: #ffffff;\n}\n\n.ebox-code-title {\n  font-size: 0.95rem;\n  font-weight: 800;\n  word-break: break-word;\n}\n\n.ebox-copy-button {\n  appearance: none;\n  border: 0;\n  border-radius: 999px;\n  padding: 8px 13px;\n  background: #dbeafe;\n  color: #0f172a;\n  cursor: pointer;\n  font-weight: 800;\n  font-size: 0.85rem;\n  white-space: nowrap;\n}\n\n.ebox-copy-button:hover {\n  background: #bfdbfe;\n}\n\n.ebox-code-textarea {\n  display: block;\n  width: 100%;\n  min-height: 360px;\n  max-height: 620px;\n  padding: 18px;\n  border: 0;\n  outline: none;\n  resize: vertical;\n  background: #0b1020;\n  color: #e5e7eb;\n  font-family: Consolas, Monaco, \"Courier New\", monospace;\n  font-size: 13px;\n  line-height: 1.55;\n  white-space: pre;\n  overflow: auto;\n}\n\n.ebox-code-textarea.small {\n  min-height: 190px;\n}\n\n.ebox-code-textarea.medium {\n  min-height: 300px;\n}\n\n.ebox-code-textarea.large {\n  min-height: 520px;\n}\n\n.ebox-small-code-box {\n  margin: 18px 0 28px;\n}\n\n.ebox-small-code {\n  width: 100%;\n  min-height: 90px;\n  max-height: 500px;\n  height: 220px;\n  padding: 16px;\n  resize: vertical;\n  overflow: auto;\n  border: 1px solid #334155;\n  border-radius: 12px;\n  background-color: #111827;\n  color: #f1f5f9;\n  font-family: Consolas, Monaco, \"Courier New\", monospace;\n  font-size: 13px;\n  line-height: 1.45;\n  white-space: pre;\n  box-sizing: border-box;\n}\n\n\/* Tables, galleries, FAQ *\/\n\n.ebox-table {\n  width: 100%;\n  border-collapse: collapse;\n  margin: 18px 0 28px;\n}\n\n.ebox-table th,\n.ebox-table td {\n  border: 1px solid #d1d5db;\n  padding: 10px;\n  text-align: left;\n  vertical-align: top;\n}\n\n.ebox-table th {\n  background: #f2f2f2;\n}\n\n.ebox-gallery {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));\n  gap: 18px;\n  margin: 22px 0 32px;\n}\n\n.ebox-faq-list {\n  display: grid;\n  gap: 14px;\n  margin: 20px 0 34px;\n}\n\n.ebox-faq-list details {\n  border: 1px solid #e5e7eb;\n  border-radius: 16px;\n  background: #ffffff;\n  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);\n  overflow: hidden;\n}\n\n.ebox-faq-list summary {\n  cursor: pointer;\n  padding: 16px 18px;\n  color: #111827;\n  font-weight: 800;\n}\n\n.ebox-faq-content {\n  padding: 0 18px 18px;\n  color: #4b5563;\n}\n\n\/* Links and final box *\/\n\n.ebox-download-link,\n.ebox-schematic-link {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin: 10px 0 18px;\n  padding: 10px 16px;\n  border-radius: 999px;\n  background: #dbe8ee;\n  color: #1f3a46;\n  font-size: 0.92rem;\n  font-weight: 800;\n  text-decoration: none;\n}\n\n.ebox-download-link:hover,\n.ebox-schematic-link:hover {\n  background: #c8dce5;\n  color: #132a34;\n}\n\n.ebox-final-box {\n  margin: 42px 0 24px;\n  padding: clamp(20px, 3vw, 28px);\n  border: 1px solid #e5e7eb;\n  border-radius: 20px;\n  background: #f8fafc;\n}\n\n\/* Optional project-specific accent hooks *\/\n\n.ebox-project-page--elektroclock .ebox-hero-label,\n.ebox-project-page--matrix .ebox-hero-label {\n  background: #e0f2fe;\n  color: #075985;\n}\n\n.ebox-project-page--lightbox .ebox-hero-label {\n  background: #fef3c7;\n  color: #92400e;\n}\n\n.ebox-project-page--rgb .ebox-hero-label {\n  background: #fae8ff;\n  color: #86198f;\n}\n\n.ebox-project-page--pcmon .ebox-hero-label {\n  background: #dcfce7;\n  color: #166534;\n}\n\n.ebox-project-page--ttm .ebox-hero-label {\n  background: #ffedd5;\n  color: #9a3412;\n}\n\n\/* Responsive *\/\n\n@media (max-width: 820px) {\n  .ebox-hero-with-image,\n  .ebox-section-grid {\n    grid-template-columns: 1fr;\n  }\n\n  .ebox-hero-image {\n    margin-top: 8px;\n  }\n}\n\n@media (max-width: 640px) {\n  .ebox-project-page {\n    padding: 0 16px;\n  }\n\n  .ebox-hero {\n    padding: 22px 18px;\n  }\n\n  .ebox-code-header {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .ebox-copy-button {\n    width: 100%;\n  }\n\n  .ebox-code-textarea {\n    min-height: 320px;\n    font-size: 12.5px;\n  }\n\n  .ebox-image-card .ebox-img-tall {\n    width: 100%;\n    max-height: none;\n  }\n}\n<\/style>\n\n\n\n<div class=\"ebox-project-page ebox-project-page--ttm\">\n\n  <section class=\"ebox-hero ebox-hero-with-image\">\n    <div class=\"ebox-hero-text\">\n      <span class=\"ebox-hero-label\">Arduino Nano Project<\/span>\n      <h1>DIY Time Tracking Monitor<\/h1>\n      <p>\n        In this ElektroBox project, I build a simple Time Tracking Monitor for gaming breaks, work sessions,\n        or any situation where you want a clear visual timer.\n      <\/p>\n      <p>\n        The monitor uses an Arduino Nano, 12 LEDs, resistors, and one setup button. The LEDs work like a\n        progress bar with green, yellow, and red sections, so the remaining time is easy to see at a glance.\n      <\/p>\n    <\/div>\n\n    <div class=\"ebox-hero-image\">\n      <img decoding=\"async\" src=\"https:\/\/elektrobox.ch\/wp-content\/uploads\/2026\/05\/IMG_2652-scaled.jpg\" alt=\"DIY Time Tracking Monitor with Arduino Nano and LED status bar\">\n    <\/div>\n  <\/section>\n\n<div class=\"ebox-video-card\">\n  <div class=\"ebox-video-frame\">\n    <iframe\n      src=\"https:\/\/www.youtube.com\/embed\/lY-eVkyBijc?start=123\"\n      title=\"Project video\"\n      allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n      allowfullscreen>\n    <\/iframe>\n  <\/div>\n<\/div>\n\n\n  <h2>1. Project Idea<\/h2>\n\n  <p>\n    In between ElektroBox projects, I like to play games. But sometimes, a short break gets much longer\n    than planned. To solve this, I built a small desktop Time Tracking Monitor.\n  <\/p>\n\n  <p>\n    The idea is simple: before the break starts, the time is set with one button. During operation, the\n    LED bar shows the passed time. When the time is over, a wave animation starts as a visual reminder.\n  <\/p>\n\n  <div class=\"ebox-card-grid\">\n    <div class=\"ebox-info-card\"><strong>Main controller<\/strong>Arduino Nano.<\/div>\n    <div class=\"ebox-info-card\"><strong>Status display<\/strong>12 LEDs arranged as a green, yellow, and red progress bar.<\/div>\n    <div class=\"ebox-info-card\"><strong>Time setup<\/strong>One button. Each press adds 15 minutes, up to 3 hours.<\/div>\n  <\/div>\n\n  <h2>2. How the System Works<\/h2>\n\n  <p>\n    The project has four program modes: idle, setup, tracking, and finished. The button is checked\n    continuously, and the Arduino switches between these modes depending on the current state.\n  <\/p>\n\n  <div class=\"ebox-flow\">\n    <div class=\"ebox-flow-step\">Idle mode \u2192 hold the button for 3 seconds to start setup<\/div>\n    <div class=\"ebox-flow-step\">Setup mode \u2192 each button press adds 15 minutes<\/div>\n    <div class=\"ebox-flow-step\">Tracking mode \u2192 the selected time is divided across all 12 LEDs<\/div>\n    <div class=\"ebox-flow-step\">Finished mode \u2192 a wave animation runs continuously<\/div>\n  <\/div>\n\n  <p>\n    Example: If you select 1 hour, the Arduino divides this time across the 12 LEDs. One LED then\n    represents 5 minutes of passed time.\n  <\/p>\n\n  <h2>3. Required Parts<\/h2>\n\n  <ul>\n    <li>Arduino Nano<\/li>\n    <li>12 LEDs<\/li>\n    <li>1 push button<\/li>\n    <li>12 \u00d7 1 k\u03a9 resistors for the LEDs<\/li>\n    <li>1 \u00d7 10 k\u03a9 resistor for the button circuit<\/li>\n    <li>Prototype PCB or perfboard<\/li>\n    <li>Dupont wires<\/li>\n    <li>USB cable for power<\/li>\n    <li>3D-printed housing<\/li>\n  <\/ul>\n\n  <h2>4. LED Status Bar<\/h2>\n\n  <p>\n    The LED status bar is built with green, yellow, and red LEDs. I used four LEDs per color to create\n    a simple progress-bar style display.\n  <\/p>\n\n  <p>\n    Each LED is connected from an Arduino digital pin through a 1 k\u03a9 resistor to GND. This limits the\n    LED current to roughly 5 mA, depending on the LED forward voltage.\n  <\/p>\n\n  <div class=\"ebox-warning\">\n    <strong>Important:<\/strong>\n    Check the LED orientation before soldering. The longer leg is the anode and goes to the Arduino side\n    through the resistor. The shorter leg goes to GND.\n  <\/div>\n\n  <h2>5. Button Circuit<\/h2>\n\n  <p>\n    The setup button is connected to pin A1. In this version, the code expects an external pulldown\n    resistor, so the input is normally LOW. When the button is pressed, A1 is connected to 5 V and reads HIGH.\n  <\/p>\n\n  <div class=\"ebox-note\">\n    <strong>Note:<\/strong>\n    If your wiring uses a pullup resistor instead, the button logic in the code must be inverted.\n  <\/div>\n\n  <h2>6. Wiring Overview<\/h2>\n\n  <ul>\n    <li>LED 1 to LED 12 are connected to pins D2 to D13.<\/li>\n    <li>The setup button is connected to pin A1.<\/li>\n    <li>The Arduino Nano is powered through USB.<\/li>\n    <li>All LED cathodes are connected to GND.<\/li>\n    <li>Each LED has its own 1 k\u03a9 current-limiting resistor.<\/li>\n  <\/ul>\n\n  <details class=\"ebox-details\">\n    <summary>Pin overview<\/summary>\n    <div class=\"ebox-details-content\">\n      <div class=\"ebox-code-block\">\n        <div class=\"ebox-code-header\">\n          <span class=\"ebox-code-title\">Arduino Nano wiring overview<\/span>\n          <button class=\"ebox-copy-button\" onclick=\"eboxCopyCode('ttm-pin-overview', this)\">Copy code<\/button>\n        <\/div>\n        <textarea id=\"ttm-pin-overview\" class=\"ebox-code-textarea small\" readonly=\"\">LEDs:\nD2, D3, D4, D5, D6, D7, D8, D9, D10, D11, D12, D13\n\nButton:\nA1\n\nButton wiring used by this code:\nA1 \u2014 button \u2014 5 V\nA1 \u2014 10 k\u03a9 resistor \u2014 GND\n\nButton not pressed = LOW\nButton pressed = HIGH<\/textarea>\n      <\/div>\n    <\/div>\n  <\/details>\n\n  <h2>7. Program Modes<\/h2>\n\n  <div class=\"ebox-card-grid\">\n    <div class=\"ebox-info-card\"><strong>Idle<\/strong>The monitor waits until the button is held for 3 seconds.<\/div>\n    <div class=\"ebox-info-card\"><strong>Setup<\/strong>Each button press adds 15 minutes to the selected time.<\/div>\n    <div class=\"ebox-info-card\"><strong>Tracking<\/strong>The LEDs show the elapsed time across the selected interval.<\/div>\n    <div class=\"ebox-info-card\"><strong>Finished<\/strong>A wave animation reminds you that the time block is over.<\/div>\n  <\/div>\n\n  <h2>8. Basic Arduino Code Structure<\/h2>\n\n  <details class=\"ebox-details\">\n    <summary>Timer logic structure<\/summary>\n    <div class=\"ebox-details-content\">\n      <div class=\"ebox-code-block\">\n        <div class=\"ebox-code-header\">\n          <span class=\"ebox-code-title\">Arduino state machine outline<\/span>\n          <button class=\"ebox-copy-button\" onclick=\"eboxCopyCode('ttm-code-outline', this)\">Copy code<\/button>\n        <\/div>\n        <textarea id=\"ttm-code-outline\" class=\"ebox-code-textarea small\" readonly=\"\">\n\/*Arduino Nano Time Tracking Monitor\n\n  LEDs:\n  D2 &#8211; D13\n\n  Button:\n  A1 with external pulldown resistor\n  Button pressed = HIGH\n\n  Setup:\n  Hold button for 3 seconds -> enter setup mode\n  All LEDs blink 1 time\n\n  In setup mode:\n  Each button press = +15 minutes\n  1 LED = 15 minutes\n  12 LEDs = 3 hours max\n  No button press for 5 seconds -> setup ends\n  All LEDs blink 2 times\n\n  Tracking:\n  Selected time is divided by 12\n  LEDs light up one after another to show passed time\n\n  Finished:\n  LEDs blink in a wave from D2 to D13\n*\/\n\nconst byte buttonPin = A1;\n\nconst byte ledPins[12] = {\n  2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13\n};\n\nconst byte ledCount = 12;\n\n\/\/ Time settings\nconst unsigned long holdTime = 3000;       \/\/ 3 seconds\nconst unsigned long setupTimeout = 5000;   \/\/ 5 seconds without button press\nconst unsigned long timePerLed = 15UL * 60UL * 1000UL; \/\/ 15 minutes\n\n\/\/ Button debounce\nconst unsigned long debounceDelay = 40;\n\nbool lastRawButtonState = LOW;\nbool stableButtonState = LOW;\nbool lastStableButtonState = LOW;\n\nunsigned long lastDebounceTime = 0;\nbool buttonPressEvent = false;\n\n\/\/ Long press detection\nunsigned long buttonHoldStart = 0;\nbool longPressTriggered = false;\n\n\/\/ Program modes\nenum Mode {\n  IDLE,\n  SETUP_MODE,\n  TRACKING_MODE,\n  FINISHED_MODE\n};\n\nMode mode = IDLE;\n\n\/\/ Setup variables\nbyte selectedSteps = 0;\nunsigned long lastSetupActivity = 0;\n\n\/\/ Tracking variables\nunsigned long trackingStartTime = 0;\nunsigned long totalTrackingTime = 0;\nunsigned long segmentTime = 0;\nbyte currentLedStep = 255;\n\nvoid setup() {\n  pinMode(buttonPin, INPUT); \/\/ external pulldown resistor required\n\n  for (byte i = 0; i < ledCount; i++) {\n    pinMode(ledPins[i], OUTPUT);\n    digitalWrite(ledPins[i], LOW);\n  }\n}\n\nvoid loop() {\n  updateButton();\n\n  switch (mode) {\n    case IDLE:\n      handleIdleMode();\n      break;\n\n    case SETUP_MODE:\n      handleSetupMode();\n      break;\n\n    case TRACKING_MODE:\n      handleTrackingMode();\n      break;\n\n    case FINISHED_MODE:\n      finishAnimation();\n      break;\n  }\n}\n\nvoid updateButton() {\n  buttonPressEvent = false;\n\n  bool rawState = digitalRead(buttonPin);\n\n  if (rawState != lastRawButtonState) {\n    lastDebounceTime = millis();\n  }\n\n  if ((millis() - lastDebounceTime) > debounceDelay) {\n    stableButtonState = rawState;\n\n    if (stableButtonState != lastStableButtonState) {\n      if (stableButtonState == HIGH) {\n        buttonPressEvent = true;\n      }\n\n      lastStableButtonState = stableButtonState;\n    }\n  }\n\n  lastRawButtonState = rawState;\n}\n\nvoid handleIdleMode() {\n  if (stableButtonState == HIGH) {\n    if (buttonHoldStart == 0) {\n      buttonHoldStart = millis();\n    }\n\n    if (!longPressTriggered &#038;&#038; millis() &#8211; buttonHoldStart >= holdTime) {\n      longPressTriggered = true;\n      enterSetupMode();\n    }\n  } else {\n    buttonHoldStart = 0;\n    longPressTriggered = false;\n  }\n}\n\nvoid enterSetupMode() {\n  mode = SETUP_MODE;\n\n  selectedSteps = 0;\n  lastSetupActivity = millis();\n\n  allLedsOff();\n  blinkAllLeds(1);\n  showSelectedSetupTime();\n}\n\nvoid handleSetupMode() {\n  if (buttonPressEvent) {\n    if (selectedSteps < ledCount) {\n      selectedSteps++;\n    }\n\n    lastSetupActivity = millis();\n    showSelectedSetupTime();\n  }\n\n  if (millis() - lastSetupActivity >= setupTimeout) {\n    exitSetupMode();\n  }\n}\n\nvoid exitSetupMode() {\n  blinkAllLeds(2);\n\n  if (selectedSteps == 0) {\n    allLedsOff();\n    mode = IDLE;\n    return;\n  }\n\n  totalTrackingTime = selectedSteps * timePerLed;\n  segmentTime = totalTrackingTime \/ ledCount;\n\n  trackingStartTime = millis();\n  currentLedStep = 255;\n\n  allLedsOff();\n  mode = TRACKING_MODE;\n}\n\nvoid handleTrackingMode() {\n  unsigned long elapsedTime = millis() &#8211; trackingStartTime;\n\n  if (elapsedTime >= totalTrackingTime) {\n    showPassedTime(ledCount);\n    delay(500);\n    mode = FINISHED_MODE;\n    return;\n  }\n\n  byte ledsToShow = elapsedTime \/ segmentTime;\n\n  if (ledsToShow != currentLedStep) {\n    currentLedStep = ledsToShow;\n    showPassedTime(ledsToShow);\n  }\n}\n\nvoid showSelectedSetupTime() {\n  for (byte i = 0; i < ledCount; i++) {\n    if (i < selectedSteps) {\n      digitalWrite(ledPins[i], HIGH);\n    } else {\n      digitalWrite(ledPins[i], LOW);\n    }\n  }\n}\n\nvoid showPassedTime(byte ledsToShow) {\n  for (byte i = 0; i < ledCount; i++) {\n    if (i < ledsToShow) {\n      digitalWrite(ledPins[i], HIGH);\n    } else {\n      digitalWrite(ledPins[i], LOW);\n    }\n  }\n}\n\nvoid blinkAllLeds(byte times) {\n  for (byte i = 0; i < times; i++) {\n    allLedsOn();\n    delay(250);\n    allLedsOff();\n    delay(250);\n  }\n}\n\nvoid finishAnimation() {\n  while (true) {\n    for (byte i = 0; i < ledCount; i++) {\n      allLedsOff();\n      digitalWrite(ledPins[i], HIGH);\n      delay(100);\n    }\n\n    for (int i = ledCount - 2; i > 0; i&#8211;) {\n      allLedsOff();\n      digitalWrite(ledPins[i], HIGH);\n      delay(100);\n    }\n  }\n}\n\nvoid allLedsOn() {\n  for (byte i = 0; i < ledCount; i++) {\n    digitalWrite(ledPins[i], HIGH);\n  }\n}\n\nvoid allLedsOff() {\n  for (byte i = 0; i < ledCount; i++) {\n    digitalWrite(ledPins[i], LOW);\n  }\n}\n\n}<\/textarea>\n      <\/div>\n    <\/div>\n  <\/details>\n\n  <h2>9. Common Problems<\/h2>\n\n  <div class=\"ebox-faq-list\">\n    <details>\n      <summary>One LED does not light up<\/summary>\n      <div class=\"ebox-faq-content\">\n        <p>Check the LED polarity, resistor, solder joint, and assigned Arduino pin.<\/p>\n      <\/div>\n    <\/details>\n\n    <details>\n      <summary>The button input behaves randomly<\/summary>\n      <div class=\"ebox-faq-content\">\n        <p>Check the pulldown resistor and add debounce handling in the firmware.<\/p>\n      <\/div>\n    <\/details>\n\n    <details>\n      <summary>The timing is not correct<\/summary>\n      <div class=\"ebox-faq-content\">\n        <p>Use millis-based timing and verify the selected time interval calculation.<\/p>\n      <\/div>\n    <\/details>\n  <\/div>\n\n  <div class=\"ebox-final-box\">\n    <h2>10. Final Result<\/h2>\n    <p>\n      The final result is a compact visual timer with a 12 LED progress bar. It is simple, readable,\n      and useful as a small desktop electronics project.\n    <\/p>\n    <p>\n      The project can be expanded with different time presets, a pause function, brightness control,\n      startup animations, or a more advanced button menu.\n    <\/p>\n  <\/div>\n\n<\/div>\n\n<script>\n  function eboxCopyCode(id, button) {\n    const textarea = document.getElementById(id);\n    if (!textarea) return;\n\n    textarea.focus();\n    textarea.select();\n    textarea.setSelectionRange(0, 999999);\n\n    const oldText = button.textContent;\n\n    function showCopied() {\n      button.textContent = 'Copied!';\n      setTimeout(function () {\n        button.textContent = oldText;\n      }, 1400);\n    }\n\n    if (navigator.clipboard && window.isSecureContext) {\n      navigator.clipboard.writeText(textarea.value).then(showCopied).catch(function () {\n        document.execCommand('copy');\n        showCopied();\n      });\n    } else {\n      document.execCommand('copy');\n      showCopied();\n    }\n  }\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Arduino Nano Project DIY Time Tracking Monitor In this ElektroBox project, I build a simple Time Tracking Monitor for gaming breaks, work sessions, or any situation where you want a clear visual timer. The monitor uses an Arduino Nano, 12 LEDs, resistors, and one setup button. The LEDs work like a progress bar with green, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-856217","page","type-page","status-publish","hentry"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":7}},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Time Tracking Monitor - ElektroBox<\/title>\n<meta name=\"description\" content=\"Build a DIY Arduino Time Tracking Monitor for gaming breaks with 12 LEDs, button setup, wiring, code, soldering tips, and a 3D-printed housing.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elektrobox.ch\/index.php\/time_tracking_monitor\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Time Tracking Monitor - ElektroBox\" \/>\n<meta property=\"og:description\" content=\"Build a DIY Arduino Time Tracking Monitor for gaming breaks with 12 LEDs, button setup, wiring, code, soldering tips, and a 3D-printed housing.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elektrobox.ch\/index.php\/time_tracking_monitor\/\" \/>\n<meta property=\"og:site_name\" content=\"ElektroBox\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-02T17:06:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elektrobox.ch\/wp-content\/uploads\/2026\/05\/IMG_2652-scaled.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/elektrobox.ch\\\/index.php\\\/time_tracking_monitor\\\/\",\"url\":\"https:\\\/\\\/elektrobox.ch\\\/index.php\\\/time_tracking_monitor\\\/\",\"name\":\"Time Tracking Monitor - ElektroBox\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/elektrobox.ch\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/elektrobox.ch\\\/index.php\\\/time_tracking_monitor\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/elektrobox.ch\\\/index.php\\\/time_tracking_monitor\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/elektrobox.ch\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/IMG_2652-scaled.jpg\",\"datePublished\":\"2026-05-27T16:07:14+00:00\",\"dateModified\":\"2026-06-02T17:06:48+00:00\",\"description\":\"Build a DIY Arduino Time Tracking Monitor for gaming breaks with 12 LEDs, button setup, wiring, code, soldering tips, and a 3D-printed housing.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/elektrobox.ch\\\/index.php\\\/time_tracking_monitor\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/elektrobox.ch\\\/index.php\\\/time_tracking_monitor\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/elektrobox.ch\\\/index.php\\\/time_tracking_monitor\\\/#primaryimage\",\"url\":\"https:\\\/\\\/elektrobox.ch\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/IMG_2652-scaled.jpg\",\"contentUrl\":\"https:\\\/\\\/elektrobox.ch\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/IMG_2652-scaled.jpg\",\"width\":2560,\"height\":1920},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/elektrobox.ch\\\/index.php\\\/time_tracking_monitor\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/elektrobox.ch\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Time Tracking Monitor\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/elektrobox.ch\\\/#website\",\"url\":\"https:\\\/\\\/elektrobox.ch\\\/\",\"name\":\"ElektroBox\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/elektrobox.ch\\\/#\\\/schema\\\/person\\\/878bd55e17d9d0b1a53523fa5e90f6b2\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/elektrobox.ch\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/elektrobox.ch\\\/#\\\/schema\\\/person\\\/878bd55e17d9d0b1a53523fa5e90f6b2\",\"name\":\"Jacob Jarosz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/elektrobox.ch\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/Logo_Color-Kopie-scaled.png\",\"url\":\"https:\\\/\\\/elektrobox.ch\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/Logo_Color-Kopie-scaled.png\",\"contentUrl\":\"https:\\\/\\\/elektrobox.ch\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/Logo_Color-Kopie-scaled.png\",\"width\":2560,\"height\":2560,\"caption\":\"Jacob Jarosz\"},\"logo\":{\"@id\":\"https:\\\/\\\/elektrobox.ch\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/Logo_Color-Kopie-scaled.png\"},\"sameAs\":[\"http:\\\/\\\/elektrobox.ch\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Time Tracking Monitor - ElektroBox","description":"Build a DIY Arduino Time Tracking Monitor for gaming breaks with 12 LEDs, button setup, wiring, code, soldering tips, and a 3D-printed housing.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elektrobox.ch\/index.php\/time_tracking_monitor\/","og_locale":"en_US","og_type":"article","og_title":"Time Tracking Monitor - ElektroBox","og_description":"Build a DIY Arduino Time Tracking Monitor for gaming breaks with 12 LEDs, button setup, wiring, code, soldering tips, and a 3D-printed housing.","og_url":"https:\/\/elektrobox.ch\/index.php\/time_tracking_monitor\/","og_site_name":"ElektroBox","article_modified_time":"2026-06-02T17:06:48+00:00","og_image":[{"url":"https:\/\/elektrobox.ch\/wp-content\/uploads\/2026\/05\/IMG_2652-scaled.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/elektrobox.ch\/index.php\/time_tracking_monitor\/","url":"https:\/\/elektrobox.ch\/index.php\/time_tracking_monitor\/","name":"Time Tracking Monitor - ElektroBox","isPartOf":{"@id":"https:\/\/elektrobox.ch\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elektrobox.ch\/index.php\/time_tracking_monitor\/#primaryimage"},"image":{"@id":"https:\/\/elektrobox.ch\/index.php\/time_tracking_monitor\/#primaryimage"},"thumbnailUrl":"https:\/\/elektrobox.ch\/wp-content\/uploads\/2026\/05\/IMG_2652-scaled.jpg","datePublished":"2026-05-27T16:07:14+00:00","dateModified":"2026-06-02T17:06:48+00:00","description":"Build a DIY Arduino Time Tracking Monitor for gaming breaks with 12 LEDs, button setup, wiring, code, soldering tips, and a 3D-printed housing.","breadcrumb":{"@id":"https:\/\/elektrobox.ch\/index.php\/time_tracking_monitor\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elektrobox.ch\/index.php\/time_tracking_monitor\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elektrobox.ch\/index.php\/time_tracking_monitor\/#primaryimage","url":"https:\/\/elektrobox.ch\/wp-content\/uploads\/2026\/05\/IMG_2652-scaled.jpg","contentUrl":"https:\/\/elektrobox.ch\/wp-content\/uploads\/2026\/05\/IMG_2652-scaled.jpg","width":2560,"height":1920},{"@type":"BreadcrumbList","@id":"https:\/\/elektrobox.ch\/index.php\/time_tracking_monitor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/elektrobox.ch\/"},{"@type":"ListItem","position":2,"name":"Time Tracking Monitor"}]},{"@type":"WebSite","@id":"https:\/\/elektrobox.ch\/#website","url":"https:\/\/elektrobox.ch\/","name":"ElektroBox","description":"","publisher":{"@id":"https:\/\/elektrobox.ch\/#\/schema\/person\/878bd55e17d9d0b1a53523fa5e90f6b2"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elektrobox.ch\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/elektrobox.ch\/#\/schema\/person\/878bd55e17d9d0b1a53523fa5e90f6b2","name":"Jacob Jarosz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elektrobox.ch\/wp-content\/uploads\/2026\/05\/Logo_Color-Kopie-scaled.png","url":"https:\/\/elektrobox.ch\/wp-content\/uploads\/2026\/05\/Logo_Color-Kopie-scaled.png","contentUrl":"https:\/\/elektrobox.ch\/wp-content\/uploads\/2026\/05\/Logo_Color-Kopie-scaled.png","width":2560,"height":2560,"caption":"Jacob Jarosz"},"logo":{"@id":"https:\/\/elektrobox.ch\/wp-content\/uploads\/2026\/05\/Logo_Color-Kopie-scaled.png"},"sameAs":["http:\/\/elektrobox.ch"]}]}},"_links":{"self":[{"href":"https:\/\/elektrobox.ch\/index.php\/wp-json\/wp\/v2\/pages\/856217","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elektrobox.ch\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/elektrobox.ch\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/elektrobox.ch\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/elektrobox.ch\/index.php\/wp-json\/wp\/v2\/comments?post=856217"}],"version-history":[{"count":5,"href":"https:\/\/elektrobox.ch\/index.php\/wp-json\/wp\/v2\/pages\/856217\/revisions"}],"predecessor-version":[{"id":856322,"href":"https:\/\/elektrobox.ch\/index.php\/wp-json\/wp\/v2\/pages\/856217\/revisions\/856322"}],"wp:attachment":[{"href":"https:\/\/elektrobox.ch\/index.php\/wp-json\/wp\/v2\/media?parent=856217"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}