Setting Up the 72 Hour Stream Countdown Clock

Discussion in 'Tutorials & Resources' started by 14bit, Jul 11, 2017.

  1. 14bit

    aa 14bit L14: Bit Member

    Messages:
    238
    Positive Ratings:
    625
    [​IMG]

    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.
    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 Windows, but it works the same on Mac and Linux)​

    [​IMG]
    3. Name it whatever you like and click OK

    4. Put in the URL (http://magic.geit.uk/countdown/new_cd/?targetTime=1532973600), then set the width to 320 and height to 150. Leave the rest of the settings alone.​

    [​IMG]

    5. Click OK. It should look like this. You're done!
    [​IMG]

    For the 2018 Summer 72 Hour Jam, you should use this URL to ensure the clock is counting down to the right time: http://magic.geit.uk/countdown/new_cd/?targetTime=1532973600

    Neat, but how do I make it even cooler?


    Use this link instead: http://magic.geit.uk/countdown/new_...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
    • 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.
    Here's Geit's original example link that shows off multiple parameters together: http://magic.geit.uk/countdown/new_...ttp://geit.uk/uploads/tv_bg.png&TVColor=black

    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.


    [​IMG]

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



    Credit 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.
     
    • Thanks Thanks x 5
    Last edited: Jul 27, 2018
  2. Tumbolisu

    aa Tumbolisu  I ⌄ I 

    Messages:
    957
    Positive Ratings:
    944
    Wouldn't making the clock 316 by 148 be better for keeping the correct aspect ratio?
     
  3. 14bit

    aa 14bit L14: Bit Member

    Messages:
    238
    Positive Ratings:
    625
    Updated to include 2018 Summer Jam timecodes!
     
    • Thanks Thanks x 2