JavaScript timer reset time

Developer
1

Hi, I am new to the tulip application and trying to figure this out. The code I will have down below is the code to my timer that i have made and what i need it to do is for when one of the triggers go off i just want the timer to reset and just start from zero again. But the issue im having is how can i have a trigger reach out and tell the java code to reset the time.
Thank you for any help.

label { display:inline; color: green; font-family: Verdana, sans-serif, Arial; font-size: 40px; font-weight: bold; text-decoration: none; } 
  p{
      color: black;
      font-family: Verdana, sans-serif, Arial;
      font-size: 50px;
      text-decoration: none;
      font-weight: bold;
  }

  body {
    padding: 20px;
    text-align: center;
  }

  button {
      margin-top: 20px;
      padding: 10px 20px;
      font-size: 1em;
  }
</style>
00:00:00
Reset Timer 
<script>
  // Get the total down time in milliseconds from the tulip app
  let tMill = getValue('total_down_time');
  let t = tMill / 1000;

  let timer = {
      totalSeconds: t,
      intervalId: null,

      start: function() {
          this.intervalId = setInterval(this.setTime.bind(this), 1000);
      },

      setTime: function() {
          ++this.totalSeconds;
          document.getElementById("hours").innerHTML = this.twoDigits(parseInt(this.totalSeconds / 3600));
          document.getElementById("minutes").innerHTML = this.twoDigits(parseInt(this.totalSeconds / 60) % 60);
          document.getElementById("seconds").innerHTML = this.twoDigits(this.totalSeconds % 60);
      },

      twoDigits: function(n) {
          return (n <= 9 ? "0" + n : n);
      },

      reset: function() {
          clearInterval(this.intervalId);
          this.totalSeconds = t;
          this.updateDisplay();
          this.start();
      },

      updateDisplay: function() {
          document.getElementById("hours").innerHTML = this.twoDigits(parseInt(this.totalSeconds / 3600));
          document.getElementById("minutes").innerHTML = this.twoDigits(parseInt(this.totalSeconds / 60) % 60);
          document.getElementById("seconds").innerHTML = this.twoDigits(this.totalSeconds % 60);
      }
  };

  timer.start();

  // Example reset function call
  function resetTimer() {
      timer.reset();
  }
</script>
2

Hey Tony,

I think you will need to use a writable input to the custom widget which will store the current time remaining. When you add a prop to a custom widget, note the writeable button on the far left. What this means is that the custom widget can change the value of this and use a tulip integer as the true determinant of when to stop the timer. This will require refactoring your code a bit and doing the getValue() call every second.

image
image988Ă—428 19.8 KB

Once this is set up, you can easily build a tulip button to trigger a change in this input prop. For example, a button to reset the timer to 60 seconds.

1 Like
3

You should try this. I hope it will be helpful for you.
Click “Variables” → Create new variable:
Name: should_reset_timer
Type: Boolean
Initial Value: false
in HTML

<p>
  <span id="hours">00</span>:<span id="minutes">00</span>:<span id="seconds"
    >00</span
  >
</p>

in js

let timer = {
  totalSeconds: 0,
  intervalId: null,

  start: function () {
    this.intervalId = setInterval(this.setTime.bind(this), 1000);
  },

  setTime: function () {
    ++this.totalSeconds;
    document.getElementById("hours").innerText = this.twoDigits(
      Math.floor(this.totalSeconds / 3600)
    );
    document.getElementById("minutes").innerText = this.twoDigits(
      Math.floor(this.totalSeconds / 60) % 60
    );
    document.getElementById("seconds").innerText = this.twoDigits(
      this.totalSeconds % 60
    );
  },

  twoDigits: function (n) {
    return n <= 9 ? "0" + n : n;
  },

  reset: function () {
    clearInterval(this.intervalId);
    this.totalSeconds = 0;
    this.updateDisplay();
    this.start();
  },

  updateDisplay: function () {
    document.getElementById("hours").innerText = this.twoDigits(
      Math.floor(this.totalSeconds / 3600)
    );
    document.getElementById("minutes").innerText = this.twoDigits(
      Math.floor(this.totalSeconds / 60) % 60
    );
    document.getElementById("seconds").innerText = this.twoDigits(
      this.totalSeconds % 60
    );
  },
};

// Start timer
timer.start();

// Check reset signal
async function checkResetSignal() {
  const reset = await getValue("should_reset_timer");
  if (reset) {
    timer.reset();
    await setValue("should_reset_timer", false); // Reset the flag
  }
}

// Poll for reset flag every 500ms
setInterval(checkResetSignal, 500);

Add a Reset Button in your app → Trigger → Set Variable should_reset_timer = true.