Setting Up the 72 Hour Stream Countdown Clock

14bit

L14: Bit Member
aa
Oct 5, 2014
642
2,065
Screen Shot 2019-07-25 at 10.57.11 AM.png


How to Use the 72 Clock in Your OBS Studio Stream

Have you ever wanted to use that fancy countdown clock made by @Geit that All The Cool Streamers™ are using these days? Of course you do! This handy guide will help you set up and customize your very own stream countdown in OBS Studio.

THE 2023 TIMESTAMP IS: 1695056400

How to get the clock:

1. Download, install, and setup OBS Studio
2. Right Click the stream preview (or click the little + in the sources section) and go to Add -> BrowserSource. (I'm doing this tutorial on MacOS, but it works the same on Windows and Linux)​

Screen Shot 2019-07-25 at 10.43.44 AM.png

3. Name it whatever you like and click OK​
4. Put in the URL (https://countdownclock.tf2maps.net/jam/?targetTime=1695056400), then set the width to 320 and height to 150. Leave the rest of the settings alone.​

Screen Shot 2019-07-25 at 10.49.38 AM.png

5. Click OK. It should look like this. You're done!​
Screen Shot 2019-07-25 at 10.51.00 AM.png

For the 2022 72 Hour Jam, you should use this URL to ensure the clock is counting down to the right time: https://countdownclock.tf2maps.net/jam/?targetTime=1695056400

Neat, but how do I make it even cooler?

Use this link instead: https://countdownclock.tf2maps.net/jam/?targetTime=1695056400&TVImage=http://orig11.deviantart.net/e380/f/2014/100/3/8/b1_in_hd_by_tomajko-d7dz8iy.png&TVColor=black

In all seriousness, Geit made the countdown customizable using the URL's Query String! In other words, add a "?" to the end of the URL and then add one of the following parameters. You can add multiple by adding "&"s between them. Please note that these are case sensitive!
  • noaudio - Stops audio from playing
  • targetTime - Changes the date/time the countdown is counting down to. These are Unix timestamps, use this to convert human dates in to Unix timestamps if you need to change it. The correct time for the 2023 Jam is 1695056400.
  • TVImage - Link to an image to use as the TV background
  • TVColor - The background color of the TV, set to transparent if you'd like to put something dynamic under the screen in your stream.
  • transform - Use CSS transforms to change the size, rotation and shape of the countdown. Recommended for advanced users. You can use any of the values here: http://www.w3schools.com/cssref/css3_pr_transform.asp - for example "transform=rotate(-10deg) translate(0, 50px)" gives the clock a slight rotation. You will need to modify the height/width to make this fit.
Can I replace the Clock Entirely?

Yes you can! Here's what mine looks like; it's not obvious at first but mine says 7.2 HR and there's a few words that are upside-down.


background.png

If you want to customize your clock farther and re-skin it to fit your needs, head over to this other post by @fubarFX:


Special thanks to @Geit for making the clock and the original setup guide. This is an updated and improved version of his guide, as his was written for the old version of OBS. Find it here.

Thanks to @saph and @ProfHappycat for figuring out/confirming the timestamp for the Summer 2018 Jam, and @Khuntza for figuring out the correct one for the 2019 Jam!
 
Last edited:

Khuntza

L4: Comfortable Member
Dec 29, 2009
155
102
I was just messing with OBS getting ready for the weekend and I noticed my timer was already counting down. It would appear that the time 14bit used was the start time by mistake. The correct time value for this years jam is actually 1565028000.

The basic link you'll want to use is this one..
http://magic.geit.uk/countdown/new_cd/?targetTime=1565028000

I've also made a custom gif for the TV screen component that just scrolls through the sponsor logos if anyone would like to use it..
http://magic.geit.uk/countdown/new_...khuntza.net/72hr/tv_bg_tf2m.gif&TVColor=black
 
Last edited:

14bit

L14: Bit Member
aa
Oct 5, 2014
642
2,065
It would appear that the time 14bit used was the start time by mistake.

Yep, It was! Thanks so much for catching that, I've updated the post with the correct information!
 
Last edited:

Dribbleondo - Au Yeah

L2: Junior Member
Jul 22, 2016
87
65
Just so people know, the countdown clock link no longer works. Pinging @14bit (sorry!) in the hope that it gets fixed.
 

14bit

L14: Bit Member
aa
Oct 5, 2014
642
2,065
[snip] hope that it gets fixed.
We're actually looking into that right now! It was hosted on a former Staff member's personal site, and since they're no longer Staff it's gone down. We'll get a new one up before the Jam!
 

Dribbleondo - Au Yeah

L2: Junior Member
Jul 22, 2016
87
65
We're actually looking into that right now! It was hosted on a former Staff member's personal site, and since they're no longer Staff it's gone down. We'll get a new one up before the Jam!

Good to know =)
 

Dribbleondo - Au Yeah

L2: Junior Member
Jul 22, 2016
87
65
The thread and clock have been updated for the 2020 Jam. Good luck tomorrow to everyone participating!

Awesome!
 

14bit

L14: Bit Member
aa
Oct 5, 2014
642
2,065
The thread and clock have once again been updated, this time for the 2022 Summer Jam. The Unix Timestamp for the end of the Jam is 1658768400 if you need to edit it into your custom clock manually.

The clock is currently down as of writing this! We are working to get it back up before the Jam starts. This post will be updated when we fix it.

Edit: The clock is fixed!


Good luck to everyone participating!
 
Last edited:

Khuntza

L4: Comfortable Member
Dec 29, 2009
155
102
I thought I had my countdown clock correctly configured until it started ticking down on OBS early.. posting for future reference as I found this site easy to use to make the conversion..

 

14bit

L14: Bit Member
aa
Oct 5, 2014
642
2,065
The 72hr clock is now hosted on our site, instead of Geit's personal site. The guide has been updated with new links, and the new, uncustomized clock link can be found below. Thank you for hosting it for so many years, Geit!

https://countdownclock.tf2maps.net/jam/