1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
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 <strong>Browser Source</strong> in OBS.
- Paste the URL you copied from your main browser into the URL field.
- Under <strong>Custom CSS</strong>, 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.
|
