Retro-Pixel

[WolfwithSword]

Preset Collection

Author: WolfwithSword

Available in v0.4.1+

Previews

[WolfwithSword]

Timer

A lightweight, customizable retro themed timer

It shows days, hours, minutes, and seconds separately.

opera_sWSHo9WA2e.mp4

Configuration

CSS Variables

• background
• text-color
• border-color
• pixel-border
  • thickness of border
• font
• time-font-size
• label-font-size
• timebox-background

JS Variables

• showLeadingEmptyTime
  • If <1 day, the days box will show 00 if this is true. When false, it won't show empty boxes above the minimum.
• minimumTimeUnitsShown
  • How many time boxes at minimum to show if showLeadingEmptyTime is true. Ex, 2 means minutes and seconds will both show at <60s
• alignment
  • center, left, right

[WolfwithSword]

Events

View recent events like subs and donations in a sleek retro-pixelated bar!

opera_gql2vNxG9v.mp4

Configuration

CSS Variables

• background
• border-color
• text-color
• pixel-border
  • thickness of border
• font

JS Variables

• minDisplaySeconds
  • number of seconds at minimum to display events if multiple are in queue. Accepts decimals.
• applicableEvents
  • EventTypeList - List of Events

[WolfwithSword]

Goals

An XP-like progress bar for your current goal in progress, in a retro theme!

opera_uw1YzQISMp.mp4

Optionally can play a sound on goal completion.

complete.mov

Configuration

CSS Variables

• background
• bar-background
• border-color
• bar-color
• text-color
• pixel-border
• font

JS Variables

• playSoundOnCompletedGoal
• soundVolume

[WolfwithSword]

Stats

View the stats of the subathon and your status all in one retro style widget.

opera_yOYOZcIa9N.mp4

Icon Mode enabled

Configuration

CSS Variables

• background
• text-color
• border-color
• points-color
• money-color
• time-mult-color
• locked-color
• paused-color
• pixel-border
  • border thickness
• min-width
• train-color
• stat-border-color
  • border color of each row except locked/paused
• statbox-background
  • color of the bg of each row item
• font

JS Variables

• iconMode
• showPoints
• showMoney
• showTimeMultiplier
• showHypeTrains
• pointsName
  • For example, Points, XP, Subs
• alignment
  • Center, Left, Right

[WolfwithSword]

Event Value

This widget allows you to display a configured Event's value in either seconds or points.

Whenever the value is updated, it will sync.

Configuration

CSS Variables

• background
• box-background
• text-color
• border-color
• pixel-border
  • border radius
• font
• font-size
• min-width
• min-height

JS Variables

• eventType
  • which event type to look for a config value for?
• optionalTier
  • Leave empty for most events. For Twitch Subs, "1000", "2000", "3000". YT Memberships "DEFAULT", KoFi Subs the Tier name or Default etc.
• valueType
  • Seconds or Points
• alignment
• showSuffix
  • s for Seconds, pts for Points

See http://localhost:14040/api/data/values for all your current values. "Meta" translates to optionalTier.

[WolfwithSword]

Goals List

This widget will present the goals in a list-like view instead. Will automatically use points or money based on the type of subathon set in the goals.

Configuration

CSS Variables

• goal-height
• goal-gap
• background-color
• border-color
• border-thickness
• font-size
• small-font-size
• font
• font-color
• poings-bg-color

JS Variables

• showLastCompleted
• maxGoalsToShow