Video Tutorial - Timers, Countdowns and Stopwatches

  • Thread starter
  • Admin
  • #1

Jaxel

Administrator

Package JS:
Code:
var countdown = null;
var stopwatch = null;

Page HTML:
Code:
<b>Stopwatch:</b>
<div class="stopwatch"></div>

<b>Countdown:</b>
<div class="countdown"></div>
Page JS:
Code:
clearInterval(countdown);
clearInterval(stopwatch);

$('.countdown').text(calcTimer(docData['count_o']));
$('.stopwatch').text(calcTimer(docData['watch_o']));

if (docData['count_s'] > 0)
{
    countdown = setInterval(function()
    {
        time = parseInt(docData['count_e']) + parseInt(docData['count_o']) - new Date().getTime();
        $('.countdown').text(calcTimer(time));
    }, 100);
}

if (docData['watch_s'] > 0)
{
    stopwatch = setInterval(function()
    {
        time = new Date().getTime() - parseInt(docData['watch_e']) + parseInt(docData['watch_o']);
        $('.stopwatch').text(calcTimer(time));
    }, 100);
}

function calcTimer(time)
{
    let neg = (time < 0) ? '- ' : '';
    time = Math.abs(time / 1000);
    
    hours = (Math.floor(time / 3600)).toString().padStart(2, '0');
    minutes = (Math.floor(time % 3600 / 60)).toString().padStart(2, '0');
    seconds = (time % 60).toFixed(1).toString().padStart(4, '0');
    
    return neg + hours + ' : ' + minutes + ' : ' + seconds;
}
 

Gilmax

New member
How can you integrate this with a Streamdeck? I tried to use the toggle on count_s, but when I turn the timer back on it seems as if the timer has been running the whole time (i.e. if I had the timer off for 10 seconds (at say 12:13), and start the timer again, instead of a new timer starting (at 30:00) it starts 10 seconds as after I stopped the timer (at 12:03).

If I use the controls on the webpage everything works fine, but not through a streamdeck.
 

Brothercassius

New member
Great feature but I'm having one issue which is when I pause the countdown it changes the time to all 0s "00:00:00". Is there a way to have it show the current remaining time at the paused value? For what I'm using it for each player is allotted a specific amount of time for the game, and they pause/unpause their clock like a chess clock. and they really would want to see the remaining time while paused.

Thanks
 

Nuelemma

New member
I am not actually planning on using OBS.

I saw a post that you can read docData from other pages. I tried and was able to read the players names. But if I change the name they dont get changed in the timers page. Only If I refresh the page,
 

Nuelemma

New member
It worked. I am using two pages one for scores one for timer. In timer I call the docData from scores and update the text acordingly for player names and score values.