Video Tutorial - Timers, Countdowns and Stopwatches

[Jaxel]

Package JS:

var countdown = null;
var stopwatch = null;

Page HTML:

<b>Stopwatch:</b>
<div class="stopwatch"></div>

<b>Countdown:</b>
<div class="countdown"></div>

Page JS:

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;
}

 

[moshiro]

How do I take out the tenth of a seconds? I would like to only show hours / minutes / seconds

 

[Jaxel]

How do I take out the tenth of a seconds? I would like to only show hours / minutes / seconds

toFixed(1) shows 1 number after the decimal point. Just change it to 0.

 

[Gilmax]

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]

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]

Can we mix timers and scores?

 

[Jaxel]

Can we mix timers and scores?

You can embed multiple browser sources in a single scene.

 

[Nuelemma]

You are talking about using OBS scenes?

 

[Jaxel]

Yes.

 

[Nuelemma]

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]

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.

 

[tsvaufderhoehe]

Would you please integrate Countdown and Stopwatch in your StreamDeck-Plugin?

 

[PhaNtoM]

I watched the video followed the set up of the timers, then added the code but nothing. I check to make see if the name matched, they do now i'm confused and can't figure out why it would work.

 

[Jaxel]

You have a typo somewhere.

 

[birdgangpodcast]

So I have been trying to set up a countdown timer right now it looks like the attached image. I'm sure I did something very basic wrong I just can not figure out what it is. Any help would be appreciated

 

[Bogdanuxj]

Where is admin?
I'ts important.
Regards.

 

[Okapi]

So I caught something funny. I intend to use the scoreboard mostly for TCGs so having a round timer is important. But, as described, with the function

time = Math.abs(time / 1000);

I was getting 60 in the seconds column whenever a minute rolled over, which is... not the end of the world, I suppose, but it was driving my attention to detail batty. I changed it to call Math.floor instead and it seems to have fixed it.

I don't know JS at all and my code skill in general outside of TI-Basic are nothing to write home about, so IDK if there was a reason for Math.abs over Math.floor but this seems to work just fine until the timer goes negative, which yeah is a whole other can of worms but at least it encourages me to learn I guess.