ExtraLife NodeCG Template Pack

This is a tool that you can use to add quick and simple templates to your ExtraLife stream to display information on donations, time elapsed, and other various things. This tool includes both two fully pre-built templates with graphics and individual component templates for those who want to build their own look. All of these templates run on NodeCG, but you don't need to know any Node or HTML to use them.

Including these templates and data points into your stream is as simple as downloading the package, running the system, and then adding the templates to your stream through XSplit/OBS as a webpage.

All the art for the templates was done by the amazing @aurahack, and all the coding was done by that one @ltsquigs guy on top of NodeCG

Sample of Templates

Example Dashboard
16x9 Full Template
4x3 Example Template
Various Components

Download Links

Windows 64Bit

Mac OSX 64bit

Instructions on Use

  1. Extract the files
  2. In the extracted folder run "run.bat" (Windows) or "run.command" (Mac OSX)
  3. This will launch a command line window, on the first launch it will install some dependencies (this can take some time), and once its finished installing will launch the control panel in your browser
  4. In the control panel set your preferred settings. The most important are your ExtraLife ID and ExtraLife Team ID (optional). These are the ID's in your ExtraLife Participant page. (i.e. http://www.extra-life.org/index.cfm?fuseaction=donordrive.participant&participantID=169398 -> ID is 169398)
  5. To access the templates you can either click on the info icon on any of the boxes to find a link or navigate to here
  6. From this list of templates find which you want to include on your stream (On several of them the text may be white on a white background, appearing to be invisible, its really there)
  7. Finally add these templates to your XSplit/OBS Scenes. You can do this through a Webpage Source on XSplit, or by using the CLR Browser plugin for OBS.
  8. You're done

F.A.Q

  • I have questions not answered here!
  • Feel free to ping by at @ltsquigs on twitter and Ill try to answer them!

  • Do I need to be part of the Giant Bomb team to use these templates?
  • Nope. You can set your team ID in the control panel to any team. The pre-built templates have some references to Giantbomb in their images, but they are minor. Also the components are completely agnostic in this regard.

  • What Resolution are these templates at?
  • There is a 720P and 1080P version for both the 16x9 and 4x3 templates. You can scale these to any 16:9 resolution using XSplit/OBS's plugins, so any 16x9 resolution is supported.

  • I get a message about needing to "Reconnect"...?
  • Don't close the Command dialog that launches with "run.bat", this runs the server that sends data to the templates, if you close it nothing will update!

  • Do I need to know Node or HTML to use this?
  • No, it's designed to just be run and forget it! No detailed technical knowledge required

  • I don't want to show donor comments, can I turn those off?
  • Yep, theres an option on the dashboard to turn them off at any time!

  • Is there any way I can contribute/add/modify these templates?
  • Yes! All of this is just a NodeCG module, so you can edit the templates however you want if you know how to modify those. If you want to contribute something back to the original package I have a github with the extensions code in it. (N.B. The pre-packaged version above uses a slightly modified version of NodeCG, if you want to use this with other modules, use the github version)

  • What streaming tools does this work with?
  • I have tested this with XSplit and OBS and it works with those two, any other tool that allows an HTML source and supports modern Webkit should also work.

  • The sizes/colors of the components aren't right for my stream layout!
  • There are two tools for adjusting this. First on the dashboard you can change the text size/color of any component. Second in XSplit (and OBS I believe) you can tell the webpage component to render at a specific resolution, which can change the size of the resulting output. (This is important for the Donation Components)
  • What's with all these Donation components?!?!?
  • There are a lot of different donation components that are there to work for any ones people need on their stream. An explanation of their differences is as follows:
    • Donation Widget - Full - Top to Bottom: The full widget, including background/link, ordering donations from top to bottom (what the full templates use)
    • Donation Widget - Full - Bottom To Top: Same, but ordered from bottom to top
    • Donation Widget - Only Donations - Top To Bottom: As above, but with no background or links
    • Donation Widget - Only Donations - Bottom To Top: As above, but from bottom to top
    • Donation Widget - Full - Top to Bottom - Fade Out: As the other Top To Bottom, but donations fade out over time. After a donation is made, halfway between posting the next the last one fades out.
    • Donation Widget - Full - Bottom to Top - Fade Out: As above but showing from Bottom to Top
    • Donation Widget - Full - Single Donation - Fade Out: This simply shows a single donation, fading in and out as they come in