Logo

DYNAMIC TIMERS

An OBS widget to display as many fully controllable timers as you want. It even comes with a bunch of custom triggers for Streamer.bot
itsTimeToStop

ACTION IMPORT
Loading...
BROWSER SOURCE URL
https://tawmae.xyz/overlays/dynamic-timers.html
SETUP

1. Copy the Action Import text from above into your clipboard.

2. In Streamer.bot, click the Import button at the top of the window. Paste the text into the Import String section and press Import at the bottom.

3. Now head to the Commands tab and look for the imported commands. Then rightclick the group and select Group -> Enable All.

4. Go into the Servers/Clients -> WebSocket Server tab. Check Auto Start WebSocket Server, leave Address at 127.0.0.1 and the Port at 8080. You can set a password if you want, just make sure to leave Enforce All Requests unchecked. Start the server.

Here you can check in real-time if your Websocket server is up and running:

5. Copy the Browser Source URL from above into your clipboard.

6. In OBS, create a new Browser Source, name it whatever you want. Then paste the copied URL into URL and preferably set the Width and Height to your OBS canvas size.

And then you're done Pog Clap
Important Note: If you want to have the timers in multiple scenes, don’t create a second browser source. Instead, use nested scenes or source clones.

COMMANDS

If you want to use any other trigger than a Command or Channel Point Reward, you can use the variables that you see in the respective actions, like timerId, timerName or timerValue. If both, the variables as well as rawInput are available, rawInput will always take priority. timerId will always take priority over timerName if both are available.

!createTimer [Time Value] | [Timer Title] | [Timer Description]

Create the timer. Title and description are optional. Elements are separated by a pipe symbol |. The Time Value can be a number 300 (in seconds), a timestamp hh:mm:ss or mm:ss or a timecode like 10s, 10min, 10h.

!pauseTimer [Timer ID] or [Timer Title]

Pause the timer. You can specify the timer ID or its title.

!continueTimer [Timer ID] or [Timer Title]

Continue the timer. You can specify the timer ID or its title.

!addTime [Time Value] | [Timer ID] or [Timer Title]

Add time to the timer. You can specify the timer ID or its title. Elements are separated by a pipe symbol |. The Time Value can be a number 300 (in seconds), a timestamp hh:mm:ss or mm:ss or a timecode like 10s, 10min, 10h.

!removeTime [Time Value] | [Timer ID] or [Timer Title]

Remove time from the timer. You can specify the timer ID or its title. Elements are separated by a pipe symbol |. The Time Value can be a number 300 (in seconds), a timestamp hh:mm:ss or mm:ss or a timecode like 10s, 10min, 10h.

!deleteTimer [Timer ID] or [Timer Title]

Delete the timer. You can specify the timer ID or its title.

!pauseAllTimers

Pauses all timers.

!continueAllTimers

Continues all timers.

!clearAllTimers

Clears all timers.

CUSTOM TRIGGERS

Under Custom -> DYNAMIC TIMERS you will be able to find various triggers that populate variables with the timer's info.


Available variables:

  • timerName string - the name of the timer
  • timerId int - the ID of the timer
  • timerInitialDuration string - A timestamp in a hh:mm:ss format of the starting duration.
  • timeStartedAt datetime - Date and time of when the timer initially started.



CUSTOMIZATION

You can add URL Parameters at the end of the URL to customize certain things. The first parameter is getting added with a ?, every additional one with a &.


Example: https://tawmae.xyz/overlays/dynamic-timers.html?hideBackground=true&font=Segoe+UI&idColor=pink

Background Color

Changes the background color of the background. Supports hex colors, but then you need to replace the # with %23

backgroundColor=pink


backgroundColor=%23ffc0cb

Hide Background

Hide the background. This also removes the progress bar.

hideBackground=true

Background Opacity

Changes the opacity of the background. The default opacity is set to 80

backgroundOpacity=69

Font

Changes the font used for the text. Supports standard fonts. Use a + character to replace spaces.

font=Arial


font=Comic+Sans+MS

Font Color

Changes the font color. Supports hex colors, but then you need to replace the # with %23

fontColor=pink


fontColor=%23ffc0cb

Font Size

Changes the font size and also scales all other elements according to it. The default size is set to 40

fontSize=30

ID Color

Changes the ID color. Supports hex colors, but then you need to replace the # with %23

idColor=pink


idColor=%23ffc0cb

Max. Timers

Changes the max. limit of timers you can have at the same time. Default is set to 7

maxTimers=5

FAQ & EXAMPLES

How can I create a timer with a Channel Reward?

For any trigger other than a command, you will have to use the variables seen in the 1 - Create Timer action: timerName, timerDescription and timerValue. For best practice the variable subactions in the 1 - Create Timer action are disabled, so they don't overwrite our previous values.



What you do is create a new action, then add your channel reward trigger and the Core -> SetArgument subactions. You can then specify the title, description and the duration of the timer. And they accept variables too, and since we use a channel reward trigger, we can use stuff like %rewardName% or %rewardCost%.

We then use a Core -> Actions -> Run Action subaction to run the 1 - Create Timer action. And we pass the variables over to it, so it'll create a timer with our set values. You can now create as many actions as you like, with any triggers you like and apply the same logic to all of them :)

How do I trigger something when a timer ends?

You can check the Custom Triggers section above to see what custom triggers are available and what variables they offer. In our case, we want the Timer Finished trigger. But since that trigger fires for ALL finished timers and not just specific ones, we have to do the filtering ourselves.

For that we create a Core -> Logic -> If/Else subaction and check if the variable timerName matches the title of our timer we want this to trigger on. So let's say our timer is called "AFK", then we check if timerName equals AFK and if so, continue. But if it doesn't we break the action. So then below the if/else check you can add the subactions that fire when our AFK timer finishes, like playing a sound and sending a message to chat.

My triggers fire multiple times even though they should just fire once, why?

That's probably because you have multiple instances of the script running, e.g. having two Browser Sources with the dynamic timer in them. You are only supposed to run a single browser source. If you want to have the timers in multiple scenes, use nested scenes or Source Clones instead.

CHANGELOG
Date Changes Version
February 06, 2025 Channel Rewards now also use the time arguments instead of rawInput 1.0.1
February 02, 2025 Release 1.0.0