Extra Life Tracker is a collection of web pages that can be used as a web source in streaming software such as OBS to display your and your team's current Extra Life fundraising status and goal.
More in-depth information can be found on the project page.
Displays the amount of time left in your event or the time left till your event starts if it is before the start of your event.
Displays the last donation for the specified participant or set of participants.
Like Last Donation, but it will continually loop through all donations recived instead of just showing the latest ones as they arrive.
Displays amount raised and goal for the specified participant.
Cycles through the fundraising amounts of a specified number of participants.
Displays amount raised and goal for the specified team.
Displays the last donation for the specified team.
Displays an offline message and optionally plays elevator music.
Each widget has a [widget-name]-settings.js file in its folder (e.x. participant-goal-settings.js), to set up each widget just update the values in its settings file with the correct values you would like to use. There are full descriptions of the values in the settings files for each widget.
There are several included themes with Extra-Life-Tracker. The default theme uses the classic offical Extra Life colors but you can switch between any of them by doing the following steps:
- Copying the contents of the
styles-<theme name>.cssyou want to use (default is the standard one that is instyles.cssto start) - Paste everything into
styles.css(located in the root directory) with what you just copied - Save
The easiest way to make your own theme is to just start experimenting. Open one of the widgets in a browser by dragging the HTML file into your browser window and then start making changes to styles.css. You can check your changes by hitting refresh in the browser. If you want to submit a theme so others can use it just make a file in the root directory named styles-<theme name>.css (ex. styles-grey.css) with the styles for your theme and open a pull request.
- Add a new BrowserSource and give it a name (e.x. "Extra Life Tracker - Team Goal")
- Tick the Local File box
- Click the browse button next to the Local File line and select the html file of the widget you want to add
- Set the width to whatever your desired width is (300 is a good starting point). The list will automatically adjust to the defined width
- Set the height according the what widget you are adding
- Countdown Timer: 69
- Last Donation: 41 (+28 with header, +35 with recipiant)
- Participant Goal: 41 (+28 with header)
- Subteam Participants: (30 * number of configured participants to display at a time) + 2 (+28 with header)
- Team Goal: 74
- Team Last Donation: 76 (+28 with header)
- Click OK
- Repeat for all widgets you wish to use
This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
You should have received a copy of the GNU General Public License along with this program. If not, see http://www.gnu.org/licenses/.
Music: The Elevator Bossa Nova from Bensound.com