From 776605926111b462bba2d397b150b0447da8b6d9 Mon Sep 17 00:00:00 2001 From: zlg Date: Sat, 1 Apr 2023 23:41:02 -0700 Subject: Initial commit This is a simple streaming timer meant to be hooked up to OBS and customized using a separate CSS file. --- README.md | 72 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 72 insertions(+) create mode 100644 README.md (limited to 'README.md') diff --git a/README.md b/README.md new file mode 100644 index 0000000..96d8fbd --- /dev/null +++ b/README.md @@ -0,0 +1,72 @@ +# 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](https://zlg.space) for any merge requests, constructive +feedback, or even just a shoutout, if you enjoy using this widget. -- cgit v1.2.3-54-g00ecf