/ExtraLifeWidgets

Making some widgets for use during the Extra Life Game A Thon

Primary LanguageJavaScript

This will be a project containing some tools for creating Extra Life widgets.

How to Use

The widgets are controlled by JavaScript files inside the js/ directory.

The HTML for the widgets is stored in the Widgets/ directory.

You should be able to edit those files and open them in a browser like Chrome or Firefox to see the widgets in action.

Embedding Widgets in OBS

  • Requires the CLRBrowser Extension
  • First, download the source of this project to a location on your computer.
  • The URL to use will look like file:///C:/Path/To/ExtraLifeWidgets/Widgets/Widget.html?id=12345
    • Replace Path/To/ExtraLifeWidgets with the location of the files you just downloaded.
    • Replace the id value with your participant or team ID as desired.
    • Make sure to include any Query String parameters the widget requires.
  • Embedding a widget in OBS
    • In your scene, select Add > CLRBrowser
    • Use the URL from above
    • Adjust the width and height to fit on your stream
  • Embedding a widget in OBS Multiplatform
    • In your scene, select Add > BrowserSource
    • Use the URL from above
    • Adjust the width and height to fit on your stream
    • You can use a low FPS value, since most widgets update once every 10 seconds or longer

Available Widgets

  • Top Donors (Participant)
    • Displays the top X donors to a participant
    • Query String Parameters
      • id - Numeric Participant ID
      • topX - Number of donors to display
        • Default is 3 donors
    • Example URL
      • file:///C:/Source/Git%20Repos/ExtraLifeWidgets/Widgets/ParticipantTopDonors.html?id=12345&topX=3
        • id=12345 - Set Participant ID to 12345
        • topX=3 - Display the highest 3 donors
  • Top Donors (Team)
    • Displays the top X donors to a team
    • Query String Parameters
      • id - Numeric Team ID
      • topX - Number of donors to display
        • Default is 3 donors
    • Example URL
      • file:///C:/Source/Git%20Repos/ExtraLifeWidgets/Widgets/TeamTopDonors.html?id=12345&topX=3
        • id=12345 - Set Team ID to 12345
        • topX=3 - Display the highest 3 donors
  • Goal Progress
    • Displays the progress toward the participant's / team's goal
    • Works with either team or participant
    • Query String Parameters
      • id - Numeric Team or Participant ID
      • team - Optional. Flag to control team or participant mode
        • Default is false
        • Omitting team, or setting team=0 or team=false will cause the widget to act in Participant mode
        • Setting team=1 or any other value will cause the widget to act in Team mode
    • Example URL
      • file:///C:/Source/Git%20Repos/ExtraLifeWidgets/Widgets/Progress.html?id=12345&team=true
        • id=12345 - Set ID to 12345
        • team=true - This is a Team ID, so fetch Team Information
  • Recent Donations
    • Displays the most recent X donations to a participant or team
    • Works with either team or participant
    • Query String Parameters
      • id - Numeric Team or Participant ID
      • team - Flag to control team or participant mode
        • Setting team= will cause the widget to act in Participant mode
        • Setting team=1 or any other value will cause the widget to act in Team mode
      • update - Optional. Number of seconds to wait before fetching new information
        • Default is 10 seconds
      • count - Optional. Number of recent donations to show
        • Default is 5 donations
    • Example URL
      • file:///C:/Source/Git%20Repos/ExtraLifeWidgets/Widgets/RecentDonations.html?id=12345&team=true&count=3&update=15
        • id=12345 - Set ID to 12345
        • team=true - This is a Team ID, so fetch Team Information
        • count=3 - Display the 3 most recent donations
        • update=15 - Fetch new information every 15 seconds.