Quick‐start Guide - Redo7/the-ultimate-streamathon-timer GitHub Wiki

Here is a quick list of the fields you need to change in order to get the widget running ASAP

Contents:

  1. Features
  2. Setup
  3. Post setup tips
  4. Settings
  5. How to add goals
  6. Default commands
  7. Minimal customization (Theming)

1. Features

General
  • Very customizable!
    • You can change pretty much everything. From fonts, text sizes, themes, to the labels themselves.
  • Custom theme creator
  • Animations
    • Countdown (A lot of presets)
    • Total amounts show / hide
    • Total amounts incoming event
    • Adjustable timings
    • Final countdown
    • Pause indicator (Zzz)
  • Adjustable start time
  • Pause indicator
  • Add your own title and subtitle
  • End time (the time the marathon will end on with the current time from the countdown)
    • Adjustable format and locale
  • Expand / Collapse next 3 goals every # minutes
  • Show / Hide time and point addition chart every # minutes
  • Show / Hide total amounts every # minutes
  • Togglable alerts
    • Adjustable text
    • Adjustable sound effect for each event
  • Check for updates function
  • Reset widget with one click to bring it to an almost brand new state
Events
  • Supports:
    • Follows
    • Subs (Tier 1, Tier 2, Tier 3, Prime)
    • Tips
    • Cheers
      • SoundAlerts trigger the cheer event
    • Raids
  • Events only count towards time / points additions after the countdown is initially started using the !start command
  • Points based goals
    • Adjust the exact amount each event adds to fit your needs
  • Adjustable time additions
    • Adjust how many seconds each event adds to fit your needs
  • Supports fractions for time additions
  • Adjustable min. amounts for tips, cheers, and raids
Supports commands!
  • Create your own command aliases (e.g. !start and !play to start the countdown)
    • You can have as many as you want
  • You can rename the default commands to something that fits you more
  • You can give viewers and moderators access to specific commands and all their aliases
  • Pause
    • Countdown
    • Event additions
    • Countdown and Event additions
  • Add / Subtract time from the countdown
  • Reset time to the amount set in the Start Time: field
  • Set / Add / Subtract points from the current amount
  • Expand / Collapse next 3 goals
  • Show all remaining goals
  • Add / Edit / Delete a goal
  • Show / Hide time and point addition chart
  • Show / Hide total amounts
  • Show / Hide end time

2. Setup

There are two ways to install the widget. The easy one uses an extension which installs the widget for you with just one click.

3. Post setup tips:

  • Events only count towards time / points additions after the countdown is initially started using the !start command
  • Make sure you resize the widget bounding box to be quite big in the StreamElements overlay in order to prevent clipping.
  • It's best to add the goals via chat commands. You can still choose to do it through StreamElements, just make sure you have only 1 tab with the widget open + your OBS is closed (if you have added the widget to a scene)

4. Settings

Setup

Start time: (min) - The time the countdown starts

Alignment: Left Center Right - Which side of the bounding box should the widget be aligned to?

The widget may appear in an "expanded" state depending on a few factors like incoming alerts, or the display of the info chart, which when setup incorrectly may result in clipping the contents on stream.

If you want to display the widget on the left side of the screen, set this dropdown to Left.
If the widget is nowhere near the edge of the screen you can leave it at Center

Commands

Commands are specific messages sent in your Twitch chat.

Viewer commands: - Which commands should be made available for ANY viewer to use?

Warning

Do not put any important commands in the Viewer commands field! I am not responsible for any havoc this may cause.

Moderator commands: - Which commands should be made available for moderators to use?

Point additions

The amounts of points to add to the current goal counter when any of the listed events occur.

  • Follow:
  • Tier 1:
  • Tier 2:
  • Tier 3:
  • Prime:
  • Tip: (points per min. tip amount)
    • The amount of points to add per the Min. Tip amount: field
  • Cheer: (points per min. cheer amount)
    • The amount of points to add per the Min. Cheer amount: field
  • Raid: (points per min. raid amount)
    • The amount of points to add per the Min. Raid amount: field

Save Points

Important

Make sure you click the Save Points button to save the changes you made. If you save just the overlay the changes WILL NOT be committed

Time additions

The amount of seconds to add to the countdown when any of the listed events occur.

  • Follow:
  • Tier 1:
  • Tier 2:
  • Tier 3:
  • Prime:
  • Tip: (seconds per min. tip amount)
    • The amount of time to add per the Min. Tip amount: field
  • Cheer: (seconds per min. cheer amount)
    • The amount of time to add per the Min. Cheer amount: field
  • Raid: (seconds per min. raid amount)
    • The amount of time to add per the Min. Raid amount: field

Save Times

Important

Make sure you click the Save Times button to save the changes you made. If you save just the overlay the changes WILL NOT be committed

Fractions

By default, the widget will add (for example) 1.5 Minutes if somebody donates 150 bits, and the Min. Cheer amount: is set to 100. Likewise it would add 30 Seconds if somebody donated 50 bits

This can be changed to only add full amounts by disabling the appropriate Use fractions for XYZ toggle. If disabled, the widget would add (for example) 1 Minute if somebody donated 150 bits, and no time would be added for any amount below Min. Cheer amount:

If you'd like to know how fractions exactly work within the widget, you can find it in this section of the 📃 Full widget settings guide: Fractions

5. How to add goals

You can add as many goals as you want, but there can only be one goal per amount (e.g. you can't have two goals with 20 points as the amount). And there are two ways to do it.

Important

It is recommended to add the widgets using the !goal add command for best results. If you have OBS open (with the widget added to the scene), you may experience issues if you're going to add the goals through the StreamElements overlay.

1. Via Chat Commands *Recommended*

  1. Go to your Twitch chat.
    • If you're a moderator who is setting the widget up for the streamer, you need to go to the streamer's chat, and make sure you have access to the relevant commands via the Moderator commands: field in the Commands group.
  2. Send the !goal add <goal amount> <description> command
    • Replace <goal amount> with the amount you want the goal to be
    • Replace <description> with the text you want it to have
    • Example: !goal add 10 Chat chooses my PFP for a week
    • If you've changed the command aliases in the Commands groups, then you have to use the ones you put in.
      • If you removed the default ones then the command will not work!
    • If you want to edit a goal you've already added, simply use the !goal edit <goal amount> <description> command.
    • Deleting a goal is very similar. You just send the !goal delete <goal amount> command.

Repeat step 2 until you add all your goals.

2. Through fields (widget settings)

  1. Select the widget in the overlay
  2. In the sidebar on the left select "Settings"
  3. Find the Goals group
  4. In the Goal amount: (points) field put the amount of points you want the goal to have.
  5. In the Goal text: field add the description of the goal
  6. THIS STEP IS REQUIRED IF YOU HAVE OBS OPEN! - Click the Save button in the top right of the website
  7. Click the Add / Update Goal to add it.
    • If you want to edit a goal you've already added, simply put it's goal number in the Goal amount: (points) field. Input the new description in the Goal text: field. And click Add / Update Goal again.
    • Deleting a goal is very similar. You just put it's goal number in the Goal amount: (points) field, and hit Delete Goal

Repeat steps 4 - 7 until you add all your goals.

When adding or deleting a goal, there are 2 things to remember:

  1. If a goal with the <goal amount> doesn't exist, it will be created instead.
  2. If a goal with the <goal amount> already exists, it will be edited instead.

This goes for both the widget settings and command methods.

To view all the goals you have added simply send the !goals all command in the chat.

Note

This will only show goals that weren't fulfilled. In case you're adding goals mid-marathon and are wondering why the earlier goals aren't shown.

6. Default commands list:

Warning

If you remove the default commands from their fields, they will no longer function!

  • !start - Starts the countdown
  • !pause - Pauses the countdown. Time / point additions still work.
    • Subcommands:
      • !pause additions - Pauses time / point additions. The countdown is still running.
      • !pause all - Pauses time / point additions and the countdown.
  • !time
    • Subcommands:
      • !time add <options> - Adds the specified amount of time to the countdown
      • !time + <options> - Same as above
      • !time sub <options> - Subtracts the specified amount of time from the countdown
      • !time - <options> - Same as above
    • Options:
      • d - Days
      • hr - Hours
      • h - Hours
      • min - Minutes
      • m - Minutes
      • sec - Seconds
      • s - Seconds
    • Example usage:
      • !time <subcommand> <options>
      • !time add 1h30m - Will add 1 Hour and 30 Minutes to the countdown
  • !current <number> - Sets the current points amount to the specified number
    • Subcommands:
      • !current add <number> - Adds the specified amount of points to the current amount
      • !current + <number> - Same as above
      • !current sub <number> - Subtracts the specified amount of points from the current amount
      • !current - <number> - Same as above
  • !goals - Expands / collapses the goals above the countdown.
    • Subcommands:
      • !goals all - Shows all remaining goals in it's own scrollable window
  • !goal - Goal handling
    • Subcommands:
      • !goal add <goal amount> <description> - Adds a goal with the amount and description provided
      • !goal edit <goal amount> <description> - Edits the description of the <goal amount> goal.
      • !goal delete <goal amount>
    • Example usage:
      • !goal add 10 Chat choses my PFP for a week
      • !goal edit 10 Chat chooses my PFP for a week
      • !goal delete 10
  • !additions - Toggles the info chart containing time and point additions
  • !endtime - Toggles the time the marathon will end at if the current countdown were to run out.
  • !totals - Toggled the total amounts of event

7. Minimal customization

The widget comes with a few pre-set themes, as well as a custom theme editor.

To change the theme:

  1. Click on the widget.
    • Either on the overlay, or in the layers panel in the sidebar
  2. Select Settings
  3. Expand the Theme tab
  4. Change the Theme dropdown to your desired theme

To create your own theme:

  1. Follow the steps above, besides the 4.
  2. Change the Theme to Custom

By default, the Custom theme will resemble the Default one. But the difference is that you can use the color swatches and fields below to adjust it's colors.

Simply click on the colored circle next to the field you want to edit and a color picker should pop up.

If you'd like to know what each field changes you can find it in this section of the 📃 Full widget settings guide: Theme

You can also change some of the animations in the Animations group.

For more information read 📃 Full widget settings guide: Animations

If you don't already have a widget for alerts and would like the widget to show a pop-up and/or make a sound when it receives an alert. Then you can toggle alerts in the Alerts group, and upload your own sounds in the Sounds group.

References:

⚠️ **GitHub.com Fallback** ⚠️