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