• We just upgraded the platform on which this website runs! Please inform @Jaxel of any issues.

Video Tutorial - Timers, Countdowns and Stopwatches

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.
 

PhaNtoM

New member
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.SA.PNG
 
Last edited:

birdgangpodcast

New member
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
 

Attachments

  • countdown.JPG
    countdown.JPG
    15 KB · Views: 6

Okapi

New member
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.