Generic

[WolfwithSword]

A collection of non-themed widgets

[WolfwithSword]

Event Popups

Author: WolfwithSword
Event Popups

An overlay for displaying animated values from events. Can customize a variety of ways, such as which events, which values, colours, and animation.

opera_5RwWd5bSSN.mp4

Configuration

CSS Variables

• positive-time-color
• negative-time-color
  • for reverse subathons
• points-color
• money-color
• font
• font-size

JS Variables

• applicableEvents
  • EventTypeList - List of Events
• showSeconds
• showPoints
• showMoney
  • will be the true amount in the currency it came in. Includes twitch cheers as bits.
• animation
  • float-up, float-down, popup
• groupGifts
  • if true, gift subs / memberships will be grouped for their points/seconds values. If false, each one is individually displayed with per points/seconds.

[WolfwithSword]

Generic Goal Bar

Author: WolfwithSword
Goal Bar

A very basic progress bar, allowing you to configure it to track your goals for either a subathon or donothon (Money/Points), and override the max value or goal text if you choose.

Configuration

CSS Variables

• bar-height
• font-family
• font-size
• font-color
• bar-bg-color
• bar-fg-color
• bar-border-radius

JS Variables

• goalType
  • Money or Points. Determines which value to track for current value.
• valuePrefix
• valueSuffix
• formatWithCommas
• showDecimalsForMoney
• overrideMax
  • Override the max value so it is not tied to your goals list.
• maxGoalOverride
• overrideGoalText
  • Whether or not to override the current goal in progress text, which can be empty below
• goalTextOverride

[WolfwithSword]

Subathon Totals

Author: WolfwithSword
Totals #TODO (v1.1.0)

A customizable widget for displaying the total values for the subathon. You can show the total subs/memberships, bits/tokens, follows, total donated, and number of orders for each compatible store. Each type can be shown or hidden, and be filtered based on event type. I.E, can show twitch subs and exclude twitch gifted, or show both and exclude youtube memberships, etc.

Has both a vertical and horizontal view! Horizontal view will scale in width to widget width.

Configuration

CSS Variables

• background-color
• border-color
• border-thickness
• font-size
• small-font-size
• font-family
• text-color
• accent-color
• icon-color
• label-color
• row-gap
  • vertical gap between rows of items
• col-gap
  • horizontal gap between items in horizontal mode
• base-width
  • width of the panel box in vertical mode
• header-alignment
• value-alignment

JS Variables

• orientation
  • vertical, horizontal
• includeSimulated
  • Where or not to include simulated events for testing. Does not affect total donated, that will always include the raw total.
• showSubs
• subsHeader
• subEvents
  • EventTypes to filter on that are subLike
• subCountOffset
  • offset to add or subtract from the real total
• showBitstokens
• tokensHeader
• tokenEvents
  • EventTypes to filter on that are tokenLike
• tokensCountOffset
  • offset to add or subtract from the real total
• showFollows
• followsHeader
• followEvents
  • EventTypes to filter on that are followLike
• followCountOffset
  • offset to add or subtract from the real total
• showTotalDonated
• donatedHeader
• donatedOffset
  • offset to add or subtract from the real total
• showOrders
• ordersHeaderShowOrdersTag
  • By default, orders will be "storename Orders" in the header. Toggling this off will hide the " Orders" part and show only the store name
• orderEvents
  • EventTypes to filter on that are orderLike

[WolfwithSword]

Compact Timer

Author: WolfwithSword
Compact #TODO

A compact subathon timer which has the time, stats (configurable) and shows the next upcoming goal to unlock.

Stats are configurable to show points, subs, bits, followers, and total money donated. Each one is filterable by event type, and allows adding or subtracting offsets, and configurable labels to say whatever you want (members instead subs for example). Also optional to show icons!

opera_SFzFvSrTNg.mp4

Configuration

CSS Variables

• timer-color
• timer-font
• timer-font-size
• timer-outline-color
• timer-outline-width
• timer-paused-opacity
• timer-lock-color
• stats-color
• stats-font
• stats-font-size
• stats-label-color
• stats-outline-color
• stats-outline-width
• stats-gap
• stats-icon-color
• goal-color
• goal-font
• goal-font-size
• goal-outline-color
• goal-outline-width
• goal-arrow-color
• section-gap
• timer-alignment
• stats-alignment
• goal-alignment

JS Variables

• showIcons
• showSubs
• subsLabel
• subEvents
  • Filter list of EventTypes to count
• subCountOffset
• showBitsTokens
• tokensLabel
• tokenEvents
  • Filter list of EventTypes to count
• tokensCountOffset
• showTotalDonated
• donatedLabel
• donatedOffset
• showFollows
• followsLabel
• followEvents
  • Filter list of EventTypes to count
• followCountOffset
• showPoints
• pointsLabel
• pointsOffset
• includeSimulated

[WolfwithSword]

Event Alerts

Author: WolfwithSword
Event Alerts #TODO

A generic event-alerts widget for all event types, with customization for colours per type, entrance and exit animations, and expected filtering.

For certain OrderLike events, will display their logo instead of the shopping cart icon.

opera_L11VryKhVJ.mp4

Configuration

CSS Variables

• accent
  • The default accent colour if none match for an event
• accent-glow-opacity
  • opacity of the glow effect of the colour accents. Set to 0 to disable glow
• dropshadow-opacity
  • opacity of the dropshadow. Set to 0 to disable
• bg
  • background colour
• text-primary
  • Colour for username or store information
• text-secondary
  • Colour for details text below primary, details about the event
• font-display
  • Font for the header text
• font-body
  • Font for the body, primary and secondary texts.
• alert-width
  • Width of the alert popup
• sub-color
• giftsub-color
• token-color
• donation-color
• follow-color
• raid-color
• order-color
• hypetrain-color
• border-thickness

JS Variables

• displaySeconds
  • Float, how many seconds to display the alert for
• minDonationAmount
  • Minimum amount the donation must be in to display. Does NOT account for currency conversion!
• minTokensAmount
• minRaidersAmount
• animationDirection
• animationStyle
• exitAnimationDirection
• existanimationStyle
• followSound
• followVolume
• subSound
• subVolume
• giftSubSound
• giftSubVolume
• tokenSound
• tokenVolume
• raidSound
• raidVolume
• donationSound
• donationVolume
• trainSound
• trainVolume
• orderSound
• orderVolume