ZSST – ZLG's Simple Stream Timer

Ever since streamerific.com went down, I was looking for a new countdown widget to add to my streams. Since I was also learning Javascript, it was a good opportunity to produce a countdown timer on my own, and import it into OBS as a Browser Source.

Usage

Make your timer with the make_timer.html file. It contains a form that gives you some basic options for the timer's behavior, and takes you to timer.html, pre-populated with arguments to its script via GET query data.

The timer.html page supports these query variables:

duration, which is how long the timer should last, in seconds.
end_text, which will display after the timer ends.
f_family, the font used by the timer.
f_color, a 6-digit hexadecimal code for the text color of the timer.

Since this tool uses GET data / query strings, it doesn't need a server, and you don't need to use make_timer.html if you know which options you want to use and are comfortable editing query strings.

Initial Setup

Navigate to the make_timer.html file via your browser.
Customize your timer and generate it by clicking "Make My Timer".
Copy the URL in the address bar on the page where your timer is ticking.
Create a CSS file somewhere that you can style your countdown with.
Create a new Browser Source in OBS.
Paste the URL you copied from your main browser into the URL field.
Under Custom CSS, be sure to point it to the new CSS file you started.
Set the browser viewport dimensions to values compatible with what you need for your stream.
Ensure "Reload on activate" is enabled, so you can hide and reshow your countdown in order to restart it.
Enjoy customizing your new widget!

Styling your Timer

Styling timers with CSS is pretty simple. Each time you edit the CSS file, you'll need to either refresh your browser window (if pointed to the timer page), or refresh the Browser Source in OBS by toggling its visibility. This is the same workflow used by zlg to develop the timer.

The page's structure is extremely straightforward:

div#page
 └─ div#countdown
     ├─ div#minutes
     ├─ div#separator
     └─ div#seconds

With the above structure, it should be adaptable to any countdown needs you have. I've used it to great effect with flexbox and responsive layout design.

Copyright

ZSST is Copyright © 2023 zlg. It is licensed under the Affero GNU General Public License, version 3. Further details concerning the distribution and use of this software can be found in this project's accompanying LICENSE file.

SPDX-License-Identifier: AGPL-3-only

Contact

Please reach out to me for any merge requests, constructive feedback, or even just a shoutout, if you enjoy using this widget.