Extra Life Helper! Show real-time donation info on your stream!

January 07, 2020 | By Talitha Baker

bread_man Posted October 16, 2014

Hey everyone! I see some folks have posted questions about incorporating their Extra Life donations into their streaming sessions. I figured I’d share an application that I made called the “Extra Life Helper” that does all of the following:

Counts down the days until Extra Life if there are three or more days left.
Counts down the hours until Extra Life if there are less than four days left.
Counts the total hours played if the start time has passed.
Continually displays the total amount raised as it changes.
Shows new donation alerts as they arrive in real-time.
Works in “participant” mode or “team” mode.
Donation messages are read with text-to-speech during donation alerts.
Adjust the volume for all sound effects and text-to-speech.
Occasionally shows the Extra Life and Children’s Miracle Network Hospital logos.
Supports four color themes and three border styles.
Works in XSplit, any flavor of OBS, and any modern browser.
Available in English, French, and Spanish.
(Download version only) Custom sound effects can be specified for the donation alert.
(Download version only) Provides a hook to run custom JavaScript when a new donation arrives.
(Download version only) Core functionality and appearance can be modified with little JavaScript experience.

NEW! You can now customize the Helper and get a link to paste directly into OBS or XSplit. Downloading and editing files is no longer required!

http://breadweb.net/extralife-helper.html

The Helper is always available for download if you prefer to run it locally. Running locally is required if you plan on making changes to the source code. Download and setup instructions are available here: https://github.com/breadweb/extralife-helper

Hope you find it helpful. If you have any feedback or requests for additional features, please let me know. Good luck with your fundraising efforts!

Requirements:

Operating System:

Windows 10 or
macOS Sierra

Streaming Software:

XSplit Broadcaster 3.0 (Windows) or
OBS Studio 20.0.1 (OSX & Windows)

Changelog:

11/1/2019

Total raised for participants now includes both donations and pledges (Total raised for teams will also include pledges soon)
Fixed a typo in French text copy

10/6/2019

Added Spanish and French language options
Added Spanish and French text-to-speech options
Fixed a couple minor bugs

3/7/2019

Added volume setting
Added support for running remotely
Fixed a couple minor bugs and typos

10/21/2018

Added text-to-speech for donation messages
Fixed a bug with text rendering

10/5/2018

Added option to perform a test donation

7/8/2018

Updated to work with the newest version of the Extra Life API
Fixed a few bugs

11/18/2017

Added donation alerts when running in team mode
Added an option to show fundraising goal in addition to amount earned
Added an option to suppress alerts
Added a “full year” mode for those interested in fundraising 365 days a year
Fixed a couple bugs

9/13/2017

Removed Flash plugin requirement! The Helper is now a pure JavaScript application
Added display of donation message to the donation alert screen
Added the ability to specify custom donation alert sounds
Added ability to add custom JavaScript code that can run when a new donation comes in

10/31/2016

Made donation alerts more responsive
Added support for marathons lasting longer than 72 hours
Fixed issues with transitions

10/3/2016

Added three new color themes to choose from.
Added option to change border style.

9/3/2016

Updated to work in the latest versions of XSplit, OBS Classic and OBS Studio.

11/4/2015

Made miscellaneous fixes.

10/14/2015

Added more support for different versions of OBS and operating systems.

10/12/2015

Added support for OBS using the browser plugin.
Added support for working on OSX in OBS Multiplatform.
Fixed bugs with handling bad requests to the Extra Life API.

10/11/2015

Updated to use new data API.
Fixed issues with being unreliable for participants with many donations.
Updated the look to adhere to the new Extra Life brand colors.
Fixed a few bugs with showing new donations and switching modes.

10/24/2014

Added executable wrapper for use in OBS on Windows. 2nd monitor required.

10/16/2014

Released initial version to the public.

Airsick Posted October 17, 2014

Nice work man…subscribed to see the OBS stuff

Airsick Posted October 18, 2014

airsik said:

Nice work man…subscribed to see the OBS stuff

Just got my code for my free month of xsplit so I may just use that instead.

the_authentic_gamer Posted October 20, 2014

bread_man said:

Over the last couple days I made an executable wrapper for it so it can also be used OBS. I’ll update the page in the next few days when that is ready.

looking forward to it! this looks great, and can’t wait to use it on our stream! nice work

Prorockband Posted October 21, 2014

Hey, it looks really cool! Sadly i run OBS in this case… Is there any chance we could get a update on wither or not it will be available before the marathon? I know you are probably busy your self working to get ready, but thought it couldn’t hurt to ask. Thanks, and hopefully i can hear a reply from you soon!

bread_man Posted October 23, 2014

Sorry for the delay, everyone. I have been busy with my day job and with working on getting my stream and hardware all setup for Saturday!

I am planning on working on the Helper some more tonight. I have a couple people who are getting a bad donation URL – most likely because their donation pages contain something the Helper can’t process. I’ll try to get it working in OBS at the same time.

On that note, I am using OBS instead of Xsplit this year. I tried it out for the first time and I like the stream quality and interface a bit better. I can use the Helper in my OBS setup because I made an executable wrapper for it. I run the executable, put it on a 2nd screen and use window capture. I haven’t released the executable and not everyone has a 2nd monitor so I will try to get it to work with the CLRBrowser plugin that people have recommended.

Zyaldar Posted October 23, 2014

I really like this tracker! I have it running currently on my twitch! http://www.twitch.tv/zyaldar

bread_man Posted October 23, 2014

I did a six hour League of Legends gaming session with my coworkers last night to test the stream. You can see the widget in action:

http://www.twitch.tv/bread_man/b/580841016

bread_man Posted October 23, 2014

Zyaldar said:

I really like this tracker! I have it running currently on my twitch! http://www.twitch.tv/zyaldar

I was looking at the Extra Life “game” channel on Twitch and saw you and others using the Helper. Makes me really happy to see you and others using is successfully on your streams!

ToraGin Posted October 23, 2014

Really looking forward to testing out the OBS version when you get it! This will be the last piece i’m waiting for before Saturday! You’re the best! Thanks for working on this for everybody!

ToraGin Posted October 23, 2014

Thanks so much for working on this for everybody! Can’t wait to test out the OBS version. It will be my final piece before going live on Saturday! You’re the best, keep up the great work!

Bacchanalian Posted October 23, 2014

I sent you an email, but a couple of the guys at the Denver Guild who know Doc asked if you might be able to hack it to work with the main number on the front page for all of Extra Life? They might want to use it on the main stream Saturday if so.

Siekobilly Posted October 24, 2014

Downloaded the zip file to convert the swf file an exe with SWF to EXE, and noticed and exe file was already in there. Guess you got the work done! I fired it up, did a window capture in OBS, and now I have your tracker. Thanks a bunch man!

bread_man Posted October 24, 2014

Siekobilly said:

Ha! I am updating the instructions now and once those are up, I’ll reply to this thread with more details. Looks like you figured it out though – thanks for testing it and confirming it works on your machine!

bread_man Posted October 24, 2014

Hey everyone! As Siekobilly discovered, I updated the widget to work with OBS.

TL;DR; You need a second monitor to use the Helper with OBS. It is incompatible with any plugin that exists for OBS including CLRBrowser. New download and instructions are posted at http://www.breadweb.net/files/extralife/

For those who want to know more about the technical details:

The widget was made as a Flash application because it was originally designed for XSplit. Out of the box, XSplit lets you add Flash files to your presentation. Xsplit is an application that can load and run Flash files.

The current best way to add web or Flash content to OBS is to use the CLRBrowser plugin. Unfortunately, this plugin uses a browser to render web and Flash content. When running in a browser, Flash files are subject to the Flash player’s security restrictions around cross-domain data loading.

The Flash application actually loads ExtraLife website pages and parses them to determine your individual donations as they come in. That way it knows when you have a new donation and it can total them up. This counts as loading data from another domain and is why it won’t work when running in a browser.

ExtraLife could fix this by adding a crossdomain.xml policy file to the root of their website. I’ve reached out to them and asked them to do this and also suggested they get to work on a formal API so myself and other people wouldn’t have to resort to parsing HTML pages which is no fun. The ExtraLife team reached out to me because they were interested in the widget so hopefully we can work together to create a set of developer tools and a nice API in the future!

I could write my own plugin for OBS which would render the Flash widget without using a browser, but that will take time. For now, I created an executable that loads the Flash file and displays it in a window. That way you can load the Flash widget into your presentation via a Window Source. The catch to this is that most of us play our games fullscreen. If the window is covered, it won’t be captured correctly. The only way to get around this is by putting the window on a 2nd monitor. I’m personally using OBS tomorrow and that’s how I’m getting the widget in my presentation.

If you think I missed anything obvious that would not require a 2nd monitor, please let me know. Otherwise, I hope it works out for most everyone.

Good luck with your fundraising!

FoxRacingGurl Posted October 24, 2014

Thank you! This is awesome!!!

I hope to be streaming on and off throughout the day, so this will come in super handy!

Thanks again!

http://www.twitch.tv/foxracinggurl

Sapience Posted October 31, 2014

This is a great tool, but I noticed I have a little hiccup on mine. It shows roughly $2600 more than I’ve actually raised.

Is it possibly pulling in the totals with the monthly gift added in? Is it trying to add all that up?

Curious.

bread_man Posted November 1, 2014

Sapience said:

This is a great tool, but I noticed I have a little hiccup on mine. It shows roughly $2600 more than I’ve actually raised.

Is it possibly pulling in the totals with the monthly gift added in? Is it trying to add all that up?

Curious.

Hey Sapience! If you could please send me your participant ID, I can see why it might be totaling up weird for you. Are you streaming again and need the widget before Extra Life 2015?

Sapience Posted November 2, 2014

I may do another before the end of the year and will likely use it on any personal streams I do between now and then, but I wouldn’t consider it a “high priority” fix. Especially if it’s just me.

My ID is 88974.

A couple of things I noticed that might also help you with future revisions. These are in addition to the tally mismatch I mentioned above.

Donation notifications will occasionally repeat. Sometimes within a few minutes.
Donation notifications will often not trigger until another donation is made. This means Donor X donates, but there is not notice. Then donor Y donates and within 3-4 minutes Donor X’s donation pops up, but donor Y’s doesn’t.

#1 Might be related to the taly mismatch. The back-end updates before the page does. So if the tool gets the update when the back-end updates and then again when the actual page updates, that would likely trigger the double notification.

I pulled a highlight of the stream where you can see the double trigger of a donation. It also shows a weird hiccup in the counting of the total ($25 donation, $30 donation, but the total updates $30 then $25). it’s here: http://www.twitch.tv/sapience_/c/5418241

PM any questions or info you need. Happy to help where I can. I think this is an incredible resource for the community and would love to see everyone use it next year!

(FYI, the second total is from the other script listed here in the forums. It matches the display on the donor page).

bread_man Posted November 2, 2014

Sapience said:

My ID is 88974.

A couple of things I noticed that might also help you with future revisions. These are in addition to the tally mismatch I mentioned above.

Donation notifications will occasionally repeat. Sometimes within a few minutes.
Donation notifications will often not trigger until another donation is made. This means Donor X donates, but there is not notice. Then donor Y donates and within 3-4 minutes Donor X’s donation pops up, but donor Y’s doesn’t.

PM any questions or info you need. Happy to help where I can. I think this is an incredible resource for the community and would love to see everyone use it next year!

(FYI, the second total is from the other script listed here in the forums. It matches the display on the donor page).

Thanks for the feedback! I’m pretty sure the reason for the glitchiness you’re seeing is because of your amazing fundraising efforts. I went to your donation page and see that you have 63 pages worth of donations. Wow!

The widget was designed to work with the typical fundraiser who would have 100 donations or less. Because Extra Life doesn’t provide an API for developers, I engineered the widget to crawl all of the donation pages for a recipient and parse the HTML. It does this in order to get a full list of individual donation amounts and names. Every minute, the widget repeats this and compares the last list to the new list to see if new donations came in. So in your case, it tries to hit 63 pages every sixty seconds. Chances are good that some of those http requests will time out or that 63 requests won’t respond quickly enough and the lists will not be complete which will mess up the comparison and grand total. It’s also possible with the amount of donations you receive that you will get more than one new donation every sixty seconds and the widget only supports showing the latest one to come in.

I could certainly optimize the widget to keep it from crawling all pages every sixty seconds. There are more complicated ways to compare that would be more efficient. It just wasn’t necessary for the typical fundraiser.

With that said, the best way to make the Helper run more efficiently (and help other developers make additional tools like this) would be for Extra Life to provide an API. It could contain web services that allow people to get json or xml results for individual, team and entire campaign donations. I keep trying to find the person to contact at the Extra Life team who can make this happen every year, but people are busy and there doesn’t seem to be much interest. I would even be happy to write the API for the Extra Life team free of charge.

So, unfortunately, the Helper won’t work very well for you because of the amount of fundraising you do. I will work on optimizing it for next year though! Thanks again for the feedback.

Sapience Posted November 3, 2014

bread_man said:

So, unfortunately, the Helper won’t work very well for you because of the amount of fundraising you do. I will work on optimizing it for next year though! Thanks again for the feedback.

This makes perfect sense. I just thought it was interesting that it was coming up with a number that actually matched the back-end calculation for all monies that would be collected as a result of recurring monthly donations.

I don’t know if you have seen the other text based total tracker here, but that is what’s showing under yours in my stream. I believe he pulls the total directly from the total field on the page. Might be worth talking about working out some kinks together. Maybe together you can sort through some issues.

I’m adding your comments to my “things to consider for 2015” list. We’ll be having a team meeting this month talking about things we want to improve on. No idea where we’ll end up, but this is something I think would benefit the entire community and I would love to have a “community tool kit” ready for 2015 with tools like this for everyone to use.

Thanks,

Rick

ReviewDad Posted November 3, 2014

Oh, wow. I so wish I had known about this earlier. Nice work! Will be sure to use it in future streams.

Sgoast Posted November 3, 2014

I used this last year, will be using it for my marathon this weekend, and you are still fantastic for making this and being so open to feedback on it. Thank you.

ANHimalx11 Posted January 19, 2015

Thanks for your hard work on this widget! I was looking for a live widget to use! I’ll definitely incorporate this to 2015 streaming!

Guest vttym Posted January 24, 2015

Thanks for creating this – can’t believe I didn’t know about this until now, but I’m using it for my streams going forward

Heavy Rescue 34 Posted January 24, 2015

Wow this is awesome! Thanks for all your work on this, I’ll definitely be using this in my streams from now on!

Maeglin73 Posted February 6, 2015

It gets confused as well by donations with hidden amounts, but aside from that it works well!

Until there’s a formal API for such things, maybe grab the total from the thermometer iframe tag instead?

GRtist Posted February 11, 2015

Is there any chance of getting a .dmg file for those of us streaming from a Mac? The ability to swipe fullscreen apps essentially functions as a second monitor, so I think I might be able to work around that if I can get a .dmg, because I can’t run an .exe

Jcanulli Posted February 12, 2015

ive been looking for something like this! thanks alot for sharing and the work that went into this!

Bacchanalian Posted February 22, 2015

Who do I have to donate to to get this set up for 2015?! I loved this and it made for an awesome stream last year!

Maeglin73 Posted February 22, 2015

Bacchanalian said:

Who do I have to donate to to get this set up for 2015?! I loved this and it made for an awesome stream last year!

If you have it configured for last year, you only need to change the participant ID and event date in the config and it’ll be good for this year as well.

Bacchanalian Posted February 22, 2015

Maeglin73 said:

If you have it configured for last year, you only need to change the participant ID and event date in the config and it’ll be good for this year as well.

Sweet! Thanks!! I hadn’t realized that!

GRtist Posted February 24, 2015

Still no word on a .dmg file? I can run this in Parallels, but not only is that pretty RAM intensive, I would also have to set up my OBS overlay all over again.

Timay Posted February 24, 2015

Stigma42 said:

Still no word on a .dmg file? I can run this in Parallels, but not only is that pretty RAM intensive, I would also have to set up my OBS overlay all over again.

The file is just a flashfile you can just open it in your web browser and put the variables in the address bar. Not ideal but should work. Don’t have a mac but it works in both Firefox and Chrome on my pc

Example: ExtraLife.swf?teamId=20655&startDate=11-07-2015&startTime=08:00:00&mute=0

I have mine configured for my team instead of just me so you would just swap teamId with participantId and replace 20655 with your id of course.

GRtist Posted February 24, 2015

timay said:

Example: ExtraLife.swf?teamId=20655&startDate=11-07-2015&startTime=08:00:00&mute=0

I have mine configured for my team instead of just me so you would just swap teamId with participantId and replace 20655 with your id of course.

I tried that. I edited the XML file and tried opening the .swf file in chrome, but all that’s in the address bar is the link to where it is on my computer. Can anybody else confirm or deny that this works on Mac?

Timay Posted February 25, 2015

Stigma42 said:

I just tried it on my imac by dragging the Extralife.swf into an open chrome window and adding the ? and everything after it in the post above and it seems to work. This is an older iMac it can only go up to 10.7. I will see if I can find a newer mac in my office to test it on.

GRtist Posted February 26, 2015

timay said:

Awesome! That did it for me! The problem I was running into at first was that the “&amp” parameters made it impossible to read the code. Thanks for clearing that up!

GRtist Posted February 26, 2015

Now my only question is, does anybody know any ways to get rid of the black background and have just the helper appear? I’m on a mac, so I can’t crop sources, just resize them.

GRtist Posted March 2, 2015

Does anyone know where I can add

param name=”wmode” value=”transparent”

to the XML to make the background appear transparent in my browser?

Maeglin73 Posted March 2, 2015

Stigma42 said:

Now my only question is, does anybody know any ways to get rid of the black background and have just the helper appear? I’m on a mac, so I can’t crop sources, just resize them.

What are you using to stream? If it supports window capture with color keying, just set black as the transparent color. That works for me with OBS. I don’t know that there is a way to do it otherwise.

GRtist Posted March 2, 2015

Maeglin73 said:

I am using OBS, but it’s on a Mac. I’m going to see if I can’t crack this open in Dreamweaver and play around with it.

Maeglin73 Posted March 2, 2015

Stigma42 said:

I am using OBS, but it’s on a Mac. I’m going to see if I can’t crack this open in Dreamweaver and play around with it.

If nothing else, I’d guess that OBS on the Mac would support color keying as well.

GRtist Posted March 4, 2015

Maeglin73 said:

If nothing else, I’d guess that OBS on the Mac would support color keying as well.

From what I can tell, that feature hasn’t been implemented in the Mac version yet. And if it has, I’m certainly not seeing it.

GRtist Posted March 16, 2015

*bump*

Has anyone found a workaround for this yet? I would really love to incorporate it into my stream, and I considered using Streamtip, and then just donate the money from Streamtip into my Extra Life campaign, but I feel like a lot of people would see that as shady.

Troopertk422 Posted March 19, 2015

I know I am late to this party. Just wanted to add my name to the lest of Thank Yous. Just added this last night, works great.

Thanks!

Gnomedic Posted May 23, 2015

Hey man!

Thanks for making this widget and giving awesome instructions on how to use it! My stream team will be testing it out next week to prep for our EL 24hr stream coming up June 20th. Hoping it’ll flow well, it looks great and we can’t wait to use it!

MyrHerder Posted June 9, 2015

Sorry for the n00b question: do these plug-ins only work if you use a capture card and computer to stream? I stream straight from my Xbox One, and I would like to experiment with overlays like this EL widget. I don’t have a capture card, and I won’t have room in the budget for one any time soon. Thanks!

Zyaldar Posted June 10, 2015

MyrHerder said:

I can’t say for Xbox 1 because I don’t own it, but with my PS4 I know that I can’t have any overlays or programs like this tracker. I believe this will only work on the PC because with OBS you have to screen capture the tracker but with Xsplit you just import into the program.

Rhojin Posted June 17, 2015

When I try to run Extralife.exe I just get a message that it has stopped working right after I open it. I get a message that it requires a missing Windows component (currently using windows 7). Has anyone else come across this or have a work around for it?

Heavy Rescue 34 Posted January 24, 2015

Wow this is awesome! Thanks for all your work on this, I’ll definitely be using this in my streams from now on!

Maeglin73 Posted February 6, 2015

It gets confused as well by donations with hidden amounts, but aside from that it works well!

Until there’s a formal API for such things, maybe grab the total from the thermometer iframe tag instead?

GRtist Posted February 11, 2015

Jcanulli Posted February 12, 2015

ive been looking for something like this! thanks alot for sharing and the work that went into this!

Bacchanalian Posted February 22, 2015

Who do I have to donate to to get this set up for 2015?! I loved this and it made for an awesome stream last year!

Maeglin73 Posted February 22, 2015

Bacchanalian said:

Who do I have to donate to to get this set up for 2015?! I loved this and it made for an awesome stream last year!

If you have it configured for last year, you only need to change the participant ID and event date in the config and it’ll be good for this year as well.

Bacchanalian Posted February 22, 2015

Maeglin73 said:

If you have it configured for last year, you only need to change the participant ID and event date in the config and it’ll be good for this year as well.

Sweet! Thanks!! I hadn’t realized that!

GRtist Posted February 24, 2015

Still no word on a .dmg file? I can run this in Parallels, but not only is that pretty RAM intensive, I would also have to set up my OBS overlay all over again.

timay Posted February 24, 2015

Stigma42 said:

Still no word on a .dmg file? I can run this in Parallels, but not only is that pretty RAM intensive, I would also have to set up my OBS overlay all over again.

Example: ExtraLife.swf?teamId=20655&startDate=11-07-2015&startTime=08:00:00&mute=0

I have mine configured for my team instead of just me so you would just swap teamId with participantId and replace 20655 with your id of course.

GRtist Posted February 24, 2015

timay said:

Example: ExtraLife.swf?teamId=20655&startDate=11-07-2015&startTime=08:00:00&mute=0

I have mine configured for my team instead of just me so you would just swap teamId with participantId and replace 20655 with your id of course.

timay Posted February 25, 2015

Stigma42 said:

GRtist Posted February 26, 2015

timay said:

Awesome! That did it for me! The problem I was running into at first was that the “&amp” parameters made it impossible to read the code. Thanks for clearing that up!

GRtist Posted February 26, 2015

Now my only question is, does anybody know any ways to get rid of the black background and have just the helper appear? I’m on a mac, so I can’t crop sources, just resize them.

GRtist Posted March 2, 2015

Does anyone know where I can add

param name=”wmode” value=”transparent”

to the XML to make the background appear transparent in my browser?

Maeglin73 Posted March 2, 2015

Stigma42 said:

Now my only question is, does anybody know any ways to get rid of the black background and have just the helper appear? I’m on a mac, so I can’t crop sources, just resize them.

GRtist Posted March 2, 2015

Maeglin73 said:

I am using OBS, but it’s on a Mac. I’m going to see if I can’t crack this open in Dreamweaver and play around with it.

Maeglin73 Posted March 2, 2015

Stigma42 said:

I am using OBS, but it’s on a Mac. I’m going to see if I can’t crack this open in Dreamweaver and play around with it.

If nothing else, I’d guess that OBS on the Mac would support color keying as well.

GRtist Posted March 4, 2015

Maeglin73 said:

If nothing else, I’d guess that OBS on the Mac would support color keying as well.

From what I can tell, that feature hasn’t been implemented in the Mac version yet. And if it has, I’m certainly not seeing it.

GRtist Posted March 16, 2015

*bump*

Troopertk422 Posted March 19, 2015

I know I am late to this party. Just wanted to add my name to the lest of Thank Yous. Just added this last night, works great.

Thanks!

Gnomedic Posted May 23, 2015

Hey man!

MyrHerder Posted June 9, 2015

Zyaldar Posted June 10, 2015

MyrHerder said:

Rhojin Posted June 17, 2015

bread_man Posted October 13, 2015

Update: Got everything working for OBS and OBS MultiPlatform on both Windows and OSX. I just need to update the zip file and instructions which I’ll do tonight. Stay tuned!

bread_man Posted October 13, 2015

The Helper has been updated and is now is confirmed to work for the following combinations of broadcasting software, plugins and operating systems:

Windows 7/8/10: XSplit 2.5
Windows 7/8/10, OBS 0.656 32-bit, CLR Browser plugin 32-bit
Windows 7/8/10, OBS 0.656 64-bit, CLR Browser plugin 64-bit
Windows 7/8/10, OBS MultiPlatform 0.12.0 32-bit, Browser Source plugin 32-bit
OSX Yosemite, OBS Multiplatform 0.12.0, Browser Source plugin 32-bit
OSX Yosemite, OBS Multiplatform 0.12.0, Browser Source plugin 64-bit

The updated version can be found here: http://www.breadweb.net/files/extralife/

Please note that instructions for personalizing the Helper and adding it to your broadcast for OBS and OBS MultiPlatform is very different now.

Enjoy!

bread_man Posted October 24, 2015

On 10/15/2015 at 11:14 PM, KurisuKaatsu said:

– I just want to shout-out to @bread_man on how awesome the tracker works on OBS. Thank you so much!

Glad its working for you. Good luck with your fundraising!!

Baztastic Posted October 26, 2015

Hello, Bread_man! Just wanted to first off thank you for this plug in. I think it’s awesome and will be a huge addition to our streaming efforts as we get closer to our EL 2015 date.

However, I fear I’ve either done something wrong in setup or just plain missing a step for OBS. I was able to get a CLR Browser scene added, was able to load the Wrapper and set its size dimensions, but when it goes to OBS, i just have nothingness when I view the scene. I have the red frame to stretch and move the scene, but thats it. It’s like this in preview mode and when I did some stream tests just now.

Do the helper files need to be in my OBS folder somewhere too? Thanks to you and anyone else that can help me with this!

bread_man Posted October 26, 2015

On 10/26/2015 at 1:03 PM, baztastic said:

Hello, Bread_man! Just wanted to first off thank you for this plug in. I think it’s awesome and will be a huge addition to our streaming efforts as we get closer to our EL 2015 date.

Do the helper files need to be in my OBS folder somewhere too? Thanks to you and anyone else that can help me with this!

Hey there. It’s hard to say for sure what’s up without more info. The only time I’ve seen a blank window is when using OBS MultiPlatform on Windows. If you’re using that version of OBS on that OS, it will be blank unless you set the value of “chromaKey” to 1 in the wrapper file (more info about that is on the instructions page). Can you confirm what you’re using?

baztastic Posted October 27, 2015

On 10/26/2015 at 9:02 PM, bread_man said:

I sure can! I am using regular 64 bit OBS on 64 bit Windows 7. I hope the attached screen shot will show that I have edited the wrapper file correctly, and selected the right item for the CLR browser in OBS. As you can see, I have another CLR browser element from SteamPro that is picking up my team’s ID while in Preview Mode, but the Wrapper is jus there as a red frame. Let me know what you think! Thanks!

P.S. On a whim, I just did the ChromaKey value change to 1 and I still just have an empty red frame, so it must be something I’ve done

bread_man Posted October 27, 2015

Hmmmm. You may not have the required Flash plugin. First, can you try opening ExtraLifeHelperWrapper.html in a browser directly? If it is blank or you get a missing plugin warning, that’s definitely it. If it looks fine, it still wouldn’t hurt to make sure you have the latest and then try again.

https://get.adobe.com/flashplayer/

Sodabread Posted October 28, 2015

@Baztasic, I had the same issue when trying to set it up this morning. What fixed it for me (I think) was adding the CLR Browser control, then simply closing OBS and reopening it. It then showed up. Your mileage may vary, but give it a go! Good luck!

baztastic Posted October 28, 2015

On 10/27/2015 at 9:10 PM, bread_man said:

https://get.adobe.com/flashplayer/

Ok here’s the browser (Chrome) test:

So yeah, I am not sure what is going on at this point I’ll try to update Flash here again and report back.

baztastic Posted October 28, 2015

and what do you know!? Flash update and restart of Chrome, and voila!

Thanks for the help, one and all, and good luck on your Game Day!

bread_man Posted October 28, 2015

On 10/28/2015 at 6:24 AM, baztastic said:

and what do you know!? Flash update and restart of Chrome, and voila!

Thanks for the help, one and all, and good luck on your Game Day!

Awesome! Good luck to you as well.

Les_bloom Posted October 31, 2015

Hi bread_man,

Thank you for this sweet looking tool. Unfortunately, I am encountering a problem very similar to what baztastic was dealing with. I am using OBS 64-bit on Win 7. I have everything setup as per the instructions on your site. I just get the ‘movable red box’ for this source. Nothing actually renders. Running the html file directly in chrome works fine. I checked the adobe link you provided. Adobe tells me that I am using the chrome version, it’s up to date, and they recommend I leave it that way.

Any suggestions?
Thanks

Maeglin73 Posted October 31, 2015

On 10/31/2015 at 2:40 PM, Les_bloom said:

Hi bread_man,

Any suggestions?
Thanks
Les

Chrome does have built-in Flash support, but that doesn’t do anything for the OBS browser plugins. You still need to install the Flash plugin for those to work.

Les_bloom Posted October 31, 2015

On 10/31/2015 at 2:54 PM, Maeglin73 said:

Chrome does have built-in Flash support, but that doesn’t do anything for the OBS browser plugins. You still need to install the Flash plugin for those to work.

I see. Everything works now. Thank you for the help

Graydon Posted November 2, 2015

Wow, this is awesome. I’ll join in with everyone and say thanks bread_man! I came to the forums today to try and find information on what APIs or back end web services I could tap into to make my own tracker widget for this year’s stream (heavy PHP and general programmer) and low and behold you’ve already done it. I will definitely be using your widget this year.

Though after this year if I did get the urge to try and make my own, is there any documentation you could point me to that might help? I am really not wanting to have to resort to a file_get_contents on my donations list page and try to parse the list from that front end data. Lol

bread_man Posted November 2, 2015

On 11/2/2015 at 10:03 AM, Graydon said:

– Graydon

You’re welcome. Glad you like the Helper enough to want to use it for your Extra Life efforts.

There is documentation for the APIs they created this year tucked away in the Multimedia Kit:

https://www.dropbox.com/sh/bdgixsxamiysxaf/AAAJ6ccMb2v5dKNhfpcFdGlna/All Countries/Broadcasting Kit/1. Capturing your Extra Life Data_JSON.pdf?dl=0

Basically, you tack “&format=json” to the URLs and it returns JSON content for that page instead of the HTML. You can then consume it in your client using whatever JSON library you have available. I was so happy to see this as the original Helper I made over a year ago had to parse the HTML pages which wasn’t any fun.

Graydon Posted November 2, 2015

On 11/2/2015 at 11:27 AM, bread_man said:

I was so happy to see this as the original Helper I made over a year ago had to parse the HTML pages which wasn’t any fun.

lol I can imagine, that’s what I thought I was going to have to do this week to get set up for saturday. You definitely saved me a lot of time.

If I get the urge to build my own tracker later on I’ll certainly drop back by to compare notes. Maybe there will be something that will be beneficial to you for any future versions.

Thanks again!

bread_man Posted November 4, 2015

I’ve made a few minor optimizations and fixes to the Helper. Also, the instructions have been updated to include solutions to common issues reported here. To get the latest version, please visit http://www.breadweb.net/files/extralife Thanks!

I love going to Twitch Extra Life game channel and seeing folks using the Helper. If you have any requests for future features, please send em my way. Good luck to everyone!

Gnomedic Posted November 6, 2015

Tried to incorporate other trackers, but hands down, yours is the cleanest and most reliable so far. Thank you, again, for all of the hard work you’ve put into making this tracker! It’s loaded and ready to go for this Saturday’s marathon!

bread_man Posted November 6, 2015

On 11/6/2015 at 9:04 AM, Gnomedic said:

You’re welcome. It has been fun to make and maintain, and really satisfying to know so many people are getting use out of it. Good luck tomorrow!!!

Siddichan Posted January 14, 2016

Hi bread_man, thanks for taking it upon yourself to create this wonderful tool. I do have to ask if it’s possible to adjust the background color of the counter, or if it’s possible to remove the background altogether.. It’s hard to work around a strictly white background.

Thanks!

Matti4213 Posted August 28, 2016

Can you somehow sort out some of the ”sceens”? and does this still work with OBS? my sceens donsn’t seem to change, and im stuck on teh day until extralife event, or what ever it says. im looking to only show the donations, and the extralife logo.. any help?

Dig Douglas Posted September 10, 2016

On 1/14/2016 at 4:49 PM, siddichan said:

Thanks!

I am a bit of a stickler for keeping my stream consistent as far as “look” goes, so a bit more customization would be really great.

Thanks for crafting this tool for all of us.

Psymonkee Posted September 20, 2016

On 10/28/2015 at 7:22 AM, bread_man said:

Awesome! Good luck to you as well.

Sorry to drag this back up but I’m having similar problems and can’t seem to solve it now!

Updated Flashplayer, followed all the instructions yet nothing shows up in OBS Preview until I click ‘Edit Scene’ which brings up the dreaded red box and little else.

Opening it directly in a browser works flawlessly and shows the correct data as well. Additionally tried restarting OBS, Chrome, any game I try it with and reconfiguring OBS from the ground up.

Utterly lost as to what to try next – any pointers?

Alarikun Posted September 22, 2016

On 9/20/2016 at 8:13 AM, Psymonkee said:

Sorry to drag this back up but I’m having similar problems and can’t seem to solve it now!

Updated Flashplayer, followed all the instructions yet nothing shows up in OBS Preview until I click ‘Edit Scene’ which brings up the dreaded red box and little else.

Opening it directly in a browser works flawlessly and shows the correct data as well. Additionally tried restarting OBS, Chrome, any game I try it with and reconfiguring OBS from the ground up.

Utterly lost as to what to try next – any pointers?

Unfortunately, I don’t have a solution, but I wanted to echo that I have the same problem (so that maybe someone will notice, and we can get help for it).

Updated Flash (twice), restarted Chrome, OBS; I even tried using OBS x32. Nothing seems to be working.

It loads up fine in a regular Chrome window… so I’m at a loss.

Edit: I did want to mention that I used this last year during my stream with no issues; granted, it was on a different computer, but it did work.

Earthgamez Posted September 22, 2016

I would love to embed this tool in my website! is there any way I could do so?

Psymonkee Posted September 22, 2016

On 9/22/2016 at 10:47 AM, Alarikun said:

Unfortunately, I don’t have a solution, but I wanted to echo that I have the same problem (so that maybe someone will notice, and we can get help for it).

Updated Flash (twice), restarted Chrome, OBS; I even tried using OBS x32. Nothing seems to be working.

It loads up fine in a regular Chrome window… so I’m at a loss.

Edit: I did want to mention that I used this last year during my stream with no issues; granted, it was on a different computer, but it did work.

I got it working by upgrading to OBS Studio instead. Did have to check a couple of options in it though as it tried to stream at the same resolution I gamed at causing slow downs for me.

Also had to be very specific about the order of the overlays to make sure the counter shows up but it is certainly working now!

Alarikun Posted September 23, 2016

On 9/22/2016 at 4:15 PM, Psymonkee said:

I got it working by upgrading to OBS Studio instead. Did have to check a couple of options in it though as it tried to stream at the same resolution I gamed at causing slow downs for me.

Also had to be very specific about the order of the overlays to make sure the counter shows up but it is certainly working now!

I wanted to do my best to avoid moving to Studio (my friend had major issues with it), but I cracked. It immediately worked when I loaded up Studio… so I guess that’s what I’ll use from now on.

Thanks for the help, Psymonkee.

bread_man Posted September 24, 2016

Hey everyone! I am just starting to get to work on my fundraising for this year’s Extra Life. Every year, I need to make some new tweaks to Helper depending on what’s changed with operating systems, browsers and streaming software. I’ll most likely have a new update to the Helper and updated instructions in the next few days, so stay tuned!

Psymonkee Posted September 24, 2016

On 9/23/2016 at 1:44 PM, Alarikun said:

I wanted to do my best to avoid moving to Studio (my friend had major issues with it), but I cracked. It immediately worked when I loaded up Studio… so I guess that’s what I’ll use from now on.

Thanks for the help, Psymonkee.

No worries. I’ve tracked down my problems to a couple of poorly coded apps using massive CPU cycles and the OBS Studio trying to output the stream at my default gaming resolution. All sorted and working well now though

bread_man Posted September 24, 2016

On 9/22/2016 at 1:38 PM, Earthgamez said:

I would love to embed this tool in my website! is there any way I could do so?

Hey Earthgamez. Yep, you can totally embed the Helper into your website. I don’t have formal instructions for it, but it is easy. Just go to http://www.breadweb.net/files/extralife and view the source of that page. At the top, you’ll see Javascript that embeds the Helper. The places to put your participant ID and start date and time should be clear.

Note that it is a Flash application and so it will not show up in browsers on most mobile devices. I’m not sure if I’ll get to it this year, but I’ll be looking to remove the Flash dependency.

Psymonkee Posted September 24, 2016

Does that mean I could link it on a forum as well if I follow the source on that page? Might make persuading some folk a little easier!

bread_man Posted September 25, 2016

On 9/24/2016 at 6:36 PM, Psymonkee said:

Does that mean I could link it on a forum as well if I follow the source on that page? Might make persuading some folk a little easier!

Most forums limit you to text and images for a signature and usually Flash is not allowed, such as on this forum.

Psymonkee Posted September 25, 2016

I’m going to try and embed it in a post rather than a signature so hope to circumvent any restrictions where I plan on posting it

Nope HTML is set to off. Bah!

bread_man Posted September 26, 2016

On 1/14/2016 at 4:49 PM, siddichan said:

Thanks!

On 9/10/2016 at 1:55 PM, Dig Douglas said:

I am a bit of a stickler for keeping my stream consistent as far as “look” goes, so a bit more customization would be really great.

Thanks for crafting this tool for all of us.

Hey Siddichan and Dig: For color themes, I could offer four background colors that would respect the colors in the brand guidelines. The options will be:

White background

Gray background

Light blue background

Dark blue background

If folks are interested in that, please let me know and I can add the support this coming weekend. Thanks!

On 8/28/2016 at 3:36 AM, Matti4213 said:

Which screens were you looking to sort out? If you are more than three days away from the start date you specified in the config, the main screen will show days left. Once there are only three days, it will automatically get more dynamic with an hour count down. It will always rotate in the Extra Life and CMNH logos and show donations when they come in, of course.

bread_man Posted September 26, 2016

On 9/23/2016 at 1:44 PM, Alarikun said:

I wanted to do my best to avoid moving to Studio (my friend had major issues with it), but I cracked. It immediately worked when I loaded up Studio… so I guess that’s what I’ll use from now on.

Thanks for the help, Psymonkee.

I downloaded the latest versions of OBS Classic and OBS Studio (last I worked on the Helper, it was still called OBS Multiplatform) and can confirm that the Helper wasn’t working for me in those versions.

I made changes to the wrapper and uploaded the new version. It now works in both for me so if you want to return to OBS Classic (also my preference at the moment), you can download again and try. http://www.breadweb.net/files/extralife

bread_man Posted September 27, 2016

Hey everyone! The latest version of the Helper is now available for download: http://www.breadweb.net/files/extralife

There are a number of fixes to issues caused by streaming software updates over the last year. The Helper is now confirmed to work for the following:

Windows 7/8/10: XSplit Broadcaster 2.5

Windows 7/8/10, OBS Classic 0.659 with Browser Source
Windows 7/8/10, OBS Studio 0.15.4 with Browser Source
OSX El Capitan, OBS Studio 0.15.4 with Browser Source
I’ve seen requests for different color themes and will work on adding that this weekend. If you have any issues using the Helper or have a feature request, please let me know. Good luck with your fundraising efforts!

Sean Rooney Posted September 27, 2016

Great stuff @bread_man – really appreciate the work you’ve done on this!

SupeRaven Posted September 27, 2016

@bread_man I didn’t see a mention of this, but do you think post-EL this year you’ll look into dumping Flash and look at doing this with Javascript and/or HTML5? By Extra Life 2017 I think we’ll see Flash no longer available in Chromium, which is used in OBS’ Browser Source.

bread_man Posted September 27, 2016

On 9/27/2016 at 1:01 PM, SupeRaven said:

Totally. I originally picked Flash because I used to do a lot of applications with it in the old days and I was using XSplit at the time which had native support for loading Flash files. But yes, Flash has been on the way out for a long time and I should plan on removing that dependency for next year.

bread_man Posted October 2, 2016

As promised, the Helper has been updated and now supports a few color themes. They can be changed by updating the theme value in the config or wrapper file.

In addition, I added a border option that allows you to change the border from the default of rounded corners to square corners or to be turned off completely.

Latest version and instructions are uploaded here: http://www.breadweb.net/files/extralife

Matti4213 Posted October 10, 2016

On 9/26/2016 at 5:10 AM, bread_man said:

Hey Siddichan and Dig: For color themes, I could offer four background colors that would respect the colors in the brand guidelines. The options will be:

White background

Gray background

Light blue background

Dark blue background

If folks are interested in that, please let me know and I can add the support this coming weekend. Thanks!

Hello Bread_man.

i was talking about having only these 3 images show up in a loop

bread_man Posted October 11, 2016

On 10/10/2016 at 8:46 AM, Matti4213 said:

Hello Bread_man.

i was talking about having only these 3 images show up in a loop

Oh, I see. I’ve thought about modifying the Helper to work in “alert only” mode similar to other alert programs. In that mode there would be no clock or logos and the Helper would be invisible until a donation came in just like the ones you see on professional streamer’s broadcasts. If I have the time to do that before the 5th, I’ll post an update. Thanks for the feedback!

Matti4213 Posted October 12, 2016

On 10/11/2016 at 1:40 PM, bread_man said:

i will watch over this as a hawk then

HoodedDemon Posted October 19, 2016

I’ll keep an eye out as well, if I’m able to turn off the “total hours played” that would be amazing. I won’t be able to do 24 hours or even remotely close, so the ability to toggle certain ones would be awesome. Great work!

Loldudester Posted October 27, 2016

On 10/11/2016 at 1:40 PM, bread_man said:

This would be absolutely perfect for the stream I’m helping out with.

Unless I missed something, when I only input a Team ID instead of a Participant ID, while the total amount updates fine, you don’t get individual donation alerts.

The invisible-until-a-donation program would allow me to run multiple iterations of it with different Participant IDs for different team members I want alerts for, and put them all in the same place.

Unless you could make it so you can input multiple Participant IDs in the config for different team members you want alerts for?

Binarycupcakes Posted October 29, 2016

On 10/27/2016 at 4:40 PM, loldudester said:

This would be absolutely perfect for the stream I’m helping out with.

Unless I missed something, when I only input a Team ID instead of a Participant ID, while the total amount updates fine, you don’t get individual donation alerts.

The invisible-until-a-donation program would allow me to run multiple iterations of it with different Participant IDs for different team members I want alerts for, and put them all in the same place.

Unless you could make it so you can input multiple Participant IDs in the config for different team members you want alerts for?

^^^^ i am running a stream for a team of upwards of 200+ participants, I would love to have the donations for each team mate every time, but im not sure if that would be do-able. I mean, I could run multiple participants on the same stream, but I’m not sure. Interesting thought, thanks!

Would also love to be able to customize the panels [even just a little bit] people around these parts react well to “in support of the stollery” vs. “in support of CMNH”. but BLESS your dang heart for this, bread_man, it’s going to be super helpful.

bread_man Posted October 31, 2016

On 10/27/2016 at 4:40 PM, loldudester said:

This would be absolutely perfect for the stream I’m helping out with.

Unless I missed something, when I only input a Team ID instead of a Participant ID, while the total amount updates fine, you don’t get individual donation alerts.

The invisible-until-a-donation program would allow me to run multiple iterations of it with different Participant IDs for different team members I want alerts for, and put them all in the same place.

Unless you could make it so you can input multiple Participant IDs in the config for different team members you want alerts for?

On 10/29/2016 at 1:10 AM, binarycupcakes said:

On 10/19/2016 at 1:50 PM, HoodedDemon said:

Correct, if you put in team ID instead of participant ID, you will not get donation alerts. It would take some time to change the Helper to work that way I’m not sure it would be practical, especially for super big teams. In @binarycupcakes‘s case, one instance of the Helper would be trying to make 200 requests to the Extra Life service every few seconds in order to get real-time donation info for each member. I don’t think the web team would be happy if the Helper bombarded their service in that way.

If anyone is interested in only getting alerts of new Extra Life donations without any other features (no running total, no timer, no logos, etc), SteamPro has this exact offering and it is pretty cool. I haven’t used it myself but I imagine you can setup multiple instances of their alert with different participant information. Go check them out here:

bread_man Posted October 31, 2016

A newer version of the Helper is now available for download. It contains the following updates:

Made donation alerts more responsive
Added support for marathons lasting longer than 72 hours
Fixed issues with transitions

As always, the download and instructions are available here: http://breadweb.net/files/extralife/

JSStudz Posted November 2, 2016

Is this working with the latest version of OBS Studio? Cause Im having difficulties

sneaK Posted November 3, 2016

On 11/2/2016 at 3:17 PM, JSStudz said:

Is this working with the latest version of OBS Studio? Cause Im having difficulties

Works great here, ensure you have Flash installed and followed the instructions for overall setup & CLR Browser installation properly!

Bug report, if the same user donates more than once, it loops alerts for all of that user’s donations all over again, instead of showing only the latest one. I’m running the latest version of everything.

bread_man Posted November 3, 2016

On 11/2/2016 at 3:17 PM, JSStudz said:

Is this working with the latest version of OBS Studio? Cause Im having difficulties

Hey JS Studz – Can you describe the issue you’re having? Feel free to PM me here or on Twitch.

On 11/3/2016 at 1:02 PM, sneaK said:

Thanks for the bug report, sneaK! I’ll try to reproduce and fix it.

Bacchanalian Posted November 4, 2016

Running into what’s probably user error with the new one–it’s transparent–but I love it! Just the text, no border. Kinda slick. I probably screwed something up, but I think I’m gonna run with it.

bread_man Posted November 5, 2016

Hey everyone. It appears that my server is buckling under the stress of all of the Helper instances hitting it. The amount of people using it is way more than ever before. The helper may not refresh correctly, may show a $0 total or may take a while to show donation alerts.

If you can, please replace the ExtraLife.swf file with the latest one I just pushed. It will reduce the amount of times my server is being hit and make the Helper work better for you and everyone else. Thanks!!

Right-click and choose to save this file, replacing the one you have: http://www.breadweb.net/files/extralife/ExtraLifeHelper.swf

bread_man Posted September 12, 2017

Hey everyone! It’s that time of the year again. The Extra Life Helper has been updated for 2017.

The big news is that the Helper just got a complete refactor under the hood. I’m happy to say that it is now a pure JavaScript application and no longer requires the Flash plugin to work! Besides a few visual tweaks, it looks and works the same as before. It’s just a lot easier to setup and use. And it runs much faster and is more stable.

In addition to removing the Flash requirement, I snuck in a few new features:

Add your own custom donation alert sounds

If you don’t like the sound of the cash register and kids cheering when a donation comes in (I’m addicted to hearing that sound after 5 years) you can drop in your own mp3, wav, or ogg files and have them play instead.

Donation alerts show donation messages

If a donor included a message with their gift, it will now be displayed in the Helper.

Add your own custom JavaScript code that fires when a new donation comes in

If you know JavaScript and want to run your own code when a donation comes in, that’s now possible. I added this because I wanted the HUE lights in my office to flash each time a donation came in but not make that part of the Helper itself. So I use that hook to make a call to my light bridge. If you have similar smart devices in your home, or a remote API you want to make a request to when a donation comes in, now you can.

Please note: Previous versions of the Helper will continue to work in XSplit but will no longer work in OBS Studio as of right now. I highly encourage anyone who has used the Helper before to get the latest version.

Instructions and download link have been updated: http://breadweb.net/files/extralife/

Enjoy! – bread

bread_man Posted October 14, 2017

Because the Helper is pure JavaScript and I didn’t obfuscate or minimize the code, everyone is free to modify it as they see fit. Check out what the LOTROstream crew did to the Helper for their stream this weekend! They swapped out the fonts and color theme to match their stream presentation. They even added a background image instead of using a solid color. What kind of modifications will you make?

Check out the LOTROstream as they do their marathon this weekend! https://go.twitch.tv/lotrostream

Cptjecht Posted October 16, 2017

We just had a 4 way Pokemon HG Randomizer Race this past weekend, and one of the 4 of us works his day job as a (Full Stack?) Web dev. I’m not sure if he used your tracker or not, but he modified something to make a cool Pokemon life total for donations (bottom right). I asked him if he was interested in posting it to the forums here

https://clips.twitch.tv/PeppyVibrantNuggets4Head

bread_man Posted October 16, 2017

On 10/16/2017 at 4:11 AM, cptjecht said:

https://clips.twitch.tv/PeppyVibrantNuggets4Head

Nice! The tracker your friend made doesn’t look like the Helper or work the same, but if he used the Helper for inspiration or code example, that’s awesome. When I first made the Helper in 2013, there wasn’t much available. Since the API came out, lots of folks like your friend have been making great stuff. If he wants to share with the community, he totally should create a new thread and let people know.

Sumsum5513 Posted October 19, 2017

I set this up on my OBS and sat there and watched it for a bit, doesn’t seem to change from how many days left. Thought it would rotate, or does that only happen once you’ve past the “start time”?

bread_man Posted October 20, 2017

On 10/19/2017 at 1:44 PM, Sumsum5513 said:

Hey Sumsum! Yes, the days will change based on the start time. For example, given the following values set:

startDate = “11-04-2017”;
startTime = “10:00:00”;

If your local date/time is 10-20-2017 09:59:59, the days left will be 15.

If your local date/time is 10-20-2017 10:00:00, the days left will be 14.

Sumsum5513 Posted October 20, 2017

On 10/20/2017 at 8:15 AM, bread_man said:

Hey Sumsum! Yes, the days will change based on the start time. For example, given the following values set:

startDate = “11-04-2017”;
startTime = “10:00:00”;

If your local date/time is 10-20-2017 09:59:59, the days left will be 15.

If your local date/time is 10-20-2017 10:00:00, the days left will be 14.

Right, i understand that. I was under the impression that the info in that rectangle would rotate out, between how many days left, to the extra life logo and CMN logo, I thought they would rotate like a slide show.

bread_man Posted October 20, 2017

On 10/20/2017 at 8:28 AM, Sumsum5513 said:

Right, i understand that. I was under the impression that the info in that rectangle would rotate out, between how many days left, to the extra life logo, and so on. The screenshots you have of the widget, I thought they would rotate like a slide show.

Gotcha. The screenshots demonstrate each possible screen that the Helper shows but they’re not all displayed in sequential order.

The clock/raised screen is the main screen (showing days until, hours until, or hours played) and is refreshed continually.

The donation screen only shows when a new donation arrives.

The logos screen is shown occasionally (every 60 minutes) but you’re more than welcome to change that value if you’d like the logos to appear more often.

Sumsum5513 Posted October 20, 2017

ah.. that’s why. My math was off, i thought it was set to every 60 secs which I originally thought would be too fast of a rotation. Alright, thanks. I’ll make the change to about every 15 mins. Thank you.

bread_man Posted October 20, 2017

On 10/20/2017 at 8:39 AM, Sumsum5513 said:

Cool. This is the line in js/helper.js that you want to change if you haven’t found it already:

var LOGO_PLAY_MARK = 60; // Number of times the action item ticks before showing logos

The action timer ticks once a minute so changing that to 15 should do the trick.

Sumsum5513 Posted October 20, 2017

awesome.. thanks for the quick replies

Birdperson Posted October 21, 2017

Hello so…I’m very new to streaming, Extra Life and all this stuff. I really need some help getting started. I see I need some type of tools to get started…also I stream on playstation 4…not sure if I can even do this. Any and all help would be greatly appreciated!

bread_man Posted October 21, 2017

On 10/21/2017 at 10:35 AM, Birdperson said:

Hey Birdperson (awesome handle, BTW): First, congrats on getting started with Extra Life for the first time!

This thread is mainly focused on the Extra Life Helper which is a donation alert and time tracking tool used by folks who stream on their PC or Mac. I’d suggest starting a brand new thread in this discussion area asking about tips for streaming from your PS4. People will see your question more easily and you’ll get more help. Good luck!

Bacchanalian Posted October 25, 2017

As usual, a week and a half out trying to figure out last minute details on setting up my gameday stream and @bread_man has come through once again. Downloading this and playing with it shortly

Bacchanalian Posted October 25, 2017

Here’s a question–is there any way to track team donations with this? In any case, love the customization options with the sounds and such, maybe I just never noticed that before but I’ll definitely be using it this year. I have the OG NES 1up sound as my text tone for donation alerts, will definitely be incorporating that into the stream.

Edit: Another question. As someone with nearly zero coding knowledge, I have some stuff I want to customize in terms of fonts and such. Is there a dummies’ guide to how to do that? I don’t see anything relevant in the html.

bread_man Posted October 25, 2017

On 10/25/2017 at 8:43 AM, Bacchanalian said:

Hey Bacchanalian! No support for tracking every team member’s donations just yet. I was always worried about hammering the Extra Life website by continually making requests for individual team members, especially for big teams. I’ll ask the DonorDrive team if they think that’s not a problem and then I can consider adding that in the future. Until then, when working in team mode, the Helper only refreshes the total.

Yep, the sound customization is new this year. Also, now that the Helper is pure JavaScript, people have been finding additional ways to modify it which has been fun to watch. I’ll continue to try to expose easy customization for those who aren’t comfortable with modifying the code, however. Good luck!

Bacchanalian Posted October 25, 2017

Cool, thought so. I’ve put out feelers on Facebook to see if someone I know is comfortable in JS to help out. Surely among the dozens of programmers I know someone can do it.
Again, thanks for this! When I have a bit more cash to spare I’ll toss a donation your way (changing jobs and becoming a student for a while, so finances are strained).

Shooterboss Posted October 29, 2017

On 10/25/2017 at 8:56 AM, bread_man said:

This answered the question I was having. I was wondering why the notifications didn’t come up for team mode.

Nice job on the program anyway. It’s helping a lot!

Siekobilly Posted November 1, 2017

Another year of Extra Life, and another year of @bread_man being awesome. Kudos as usual, man. I just recently entered the coding world (teaching myself Java, JS, and Selenium for automation work) so I’m pretty excited to see if I can customize this. Though with so little time before the marathon I’m not sure I’ll get to do it this year.

Thanks again boss.

bread_man Posted November 1, 2017

On 11/1/2017 at 11:43 AM, Siekobilly said:

Kudos as usual, man. I just recently entered the coding world (teaching myself Java, JS, and Selenium for automation work) so I’m pretty excited to see if I can customize this.

Thanks, Siekobilly! Glad that you’re finding the Helper useful. The code isn’t too complex and there are a lot of comments to explain things so hopefully you can tinker with it pretty easily. I just wouldn’t assume it is a great example of JavaScript best practices. Feel free to ping me on Twitch chat if you need help working through a customization.\

bread_man Posted November 2, 2017

I love browsing the Extra Life community on Twitch and spotting folks who are using the Helper. It’s fun to see how people use it in their presentations and the customizations that are done.

https://github.com/breadweb/extralifehelper/blob/master/Examples.md

bread_man Posted November 2, 2017

Just wanted to mention that my daughter and I are doing the marathon this weekend so I won’t be available to help troubleshoot issues folks have adding the Helper to their streams or have time to make special modifications. Please try to catch me today or tomorrow if you need any assistance. Thanks!!

Psymonkee Posted November 2, 2017

Came here to check out sorting out adverts for a break in gameplay and remembered this brilliant counter from last year! All setup and ready to go in just a few seconds!

Now I just need to get my head around the function thingy and make it play some awesome sounds on donation!

bread_man Posted November 2, 2017

On 11/2/2017 at 7:23 PM, Psymonkee said:

Came here to check out sorting out adverts for a break in gameplay and remembered this brilliant counter from last year! All setup and ready to go in just a few seconds!

Now I just need to get my head around the function thingy and make it play some awesome sounds on donation!

Hey Psymonkee! You can change the sounds when a donation comes in pretty easily:

1) Copy the sound file(s) you want to play in the audio folder

2) Update the “donationSounds” value in the ExtraLifeHelper.html file to be the name of the sound file(s)

Shawn Sproule Posted November 3, 2017

Hey @bread_man, loving this helper – great addition for sure! One question I do have, if I wanted to add my overall fundraising goal to it – so that instead of just the number value of what’s been raised so far it displayed it as, for example $50 / $200, is there an easy way to do that? I’ve found the necessary variable from my fundraising page, but am unsure of what I’d edit/add in the (I’m assuming) helper.js file.

Any help you can provide is certainly appreciated!

bread_man Posted November 3, 2017

On 11/3/2017 at 1:01 AM, Shawn Sproule said:

Any help you can provide is certainly appreciated!

Hey Shawn. Sure thing. Just change line #749 (in the “onGeneralInfoSuccess” function) from

moneyText.content = formatMoney(raised);

moneyText.content = formatMoney(raised) + ” / ” + formatMoney(res[‘fundraisingGoal’]);

Psymonkee Posted November 3, 2017

On 11/2/2017 at 7:41 PM, bread_man said:

Hey Psymonkee! You can change the sounds when a donation comes in pretty easily:

1) Copy the sound file(s) you want to play in the audio folder

2) Update the “donationSounds” value in the ExtraLifeHelper.html file to be the name of the sound file(s

That’s the bit I get. I’m not sure about the ‘function’ line! If I put:

Quote

onNewDonation(donorName, soundfile)

will that work? Or will it simply play all sounds in the var donationSounds line?

I’m not getting enough donations to test it out

bread_man Posted November 3, 2017

On 11/3/2017 at 8:31 AM, Psymonkee said:

That’s the bit I get. I’m not sure about the ‘function’ line! If I put:

will that work? Or will it simply play all sounds in the var donationSounds line?

I’m not getting enough donations to test it out

You don’t need to do anything with the “onNewDonation” function to play your custom sounds. If you made any changes there, I’d revert them.

The Helper already supports playing sounds when a donation comes in. It will play the cash.mp3 and kids.mp3 sound files by default. If you want a different sound, you just need to change line 25 of ExtraLifeHelper.html:

var donationSounds = “cash.mp3,kids.mp3”; // Set this to your custom set of sounds, separated

// // by commas. Or set to blank to have no sounds play

// ============================================================================================

For example. If you want to play your sound file called explosion.mp3 instead of the default sounds then you would change it like this:

var donationSounds = “explosion.mp3”; // Set this to your custom set of sounds, separated

// // by commas. Or set to blank to have no sounds play

// ============================================================================================

And then just make sure that explosion.mp3 file is in the audio directory. That’s it!

Psymonkee Posted November 3, 2017

Sweet! Thanks! Just want to make sure I’m not going to break things!

Just hope no one gets annoyed by my donation sounds

bread_man Posted November 11, 2017

Hey all. Just a small note that I’ve moved the Helper instructions and download to GitHub. Folks can now contribute back to the Helper if they’ve made modifications they think others would enjoy.

https://github.com/breadweb/extralifehelper

bread_man Posted November 17, 2017

Hey everyone. The Extra Life Helper has been updated.

Donation alerts now work when running in team mode
Added a new option to show your fundraising goal in addition to your amount earned
Added a new option to suppress alerts if only wanting to show the timer screen
Fixed a couple bugs

https://github.com/breadweb/extralifehelper

StryderCRB Posted November 21, 2017

@bread_man When I use it in Wirecast (it opens the HTML locally) it shows everything in the widget at once. I’ve attached a link that shows what it looks like. It would be the same as if you’re putting that HTML in a standard browser…I’ve tried this in both Mac and Windows (also in OBS) and I’m experiencing the same behavior

Any help would be HUGE. Thanks!

bread_man Posted November 21, 2017

@StryderCRB Update: I can see the current Helper package is busted. Looking to fix it now…

bread_man Posted November 21, 2017

On 11/21/2017 at 11:28 AM, StryderCRB said:

Any help would be HUGE. Thanks!

@StryderCRB I found and fixed the issue. A new zip file is available: https://github.com/breadweb/extralifehelper

Dainslaif Posted December 28, 2017

Howdy – I was looking through the js file to try and find out how to disable the logos from rotating in and out (we plan on having a bar at the top displaying the info), and I noticed that there are two instances of the newDonors variable being created. I’m not sure if this might cause errors, but figured I’d mention it. I also took the liberty of adding a “showLogos” setting, which enables/disables the logos. It might be worth adding into the main file?

I want to check the donation alert text – is there a way to manually test it without actually donating money to myself?

Cheers!

Shawn Sproule Posted January 30, 2018

Hey @bread_man, I have a new question for you – hoping it’s an easy one. Is there an easy way to make the background color for the helper transparent?

No rush on it, but any help you may be able to offer would be greatly appreciated!

bread_man Posted June 16, 2018

On 12/28/2017 at 5:03 PM, Dainslaif said:

I want to check the donation alert text – is there a way to manually test it without actually donating money to myself?

Cheers!

Hey! Hope a super late response is better than nothing. ?

Nope, no issue with newDonors declared twice, but I cleaned that up in the next release. Thanks for letting me know!

Glad you were able to modify the Helper to do what you wanted. If more people are interested in disabling the occasional showing of the logos, I can certainly add that as a new configuration option in a future release.

I test changes to the script by running a local webserver and having it host the testing directory which you can find in the source repository: https://github.com/breadweb/extralifehelper/tree/master/testing Those are fake API responses. Then change value of IS_DEBUG constant in the helper.js and it will hit your local webserver instead of the real API.

On 1/30/2018 at 11:05 PM, Shawn Sproule said:

Hey @bread_man, I have a new question for you – hoping it’s an easy one. Is there an easy way to make the background color for the helper transparent?

No rush on it, but any help you may be able to offer would be greatly appreciated!

I haven’t tried this myself but you may be able to change the transparency of the background by adding this line when the backgroundPath is created. It might also affect the stroke as well, however.

backgroundPath.opacity = 0.5;

Imran alam Posted June 18, 2018

Both Xsplit and OBS are a good software to stream live donation on extra life, but before using these software you must understand the basic difference between these two.

https://www.answerslave.com/xsplit-vs-obs/

bread_man Posted July 8, 2018

Hi everyone! The Extra Life Helper has been updated to work with the new Extra Life API. You won’t notice a change as it is all under the hood.

With that said, everyone needs to upgrade by July 16th before the old API is sunset. Previous versions of the Helper will stop working at that time.

Here’s the direct download. Please let me know if you have any questions or need any help.

https://github.com/breadweb/extralifehelper/releases/download/2.1/ExtraLifeHelper-v2.1.zip

Schlerf Posted July 28, 2018

On 7/8/2018 at 7:53 PM, bread_man said:

Hi everyone! The Extra Life Helper has been updated to work with the new Extra Life API. You won’t notice a change as it is all under the hood.

With that said, everyone needs to upgrade by July 16th before the old API is sunset. Previous versions of the Helper will stop working at that time.

Here’s the direct download. Please let me know if you have any questions or need any help.

https://github.com/breadweb/extralifehelper/releases/download/2.1/ExtraLifeHelper-v2.1.zip

Okay for a sec i was like … FTW why is this not working ? (we do a bi weekly stream and it was working last stream) – Thanks for all of you hard work to make sure this stays up to date!

bread_man Posted July 30, 2018

On 7/28/2018 at 3:38 PM, Schlerf said:

FTW why is this not working ?

OMG I’m going to say that every time in place of the reverse. That’s awesome.

BJWyler Posted August 24, 2018

Here’s a question for you! I have EL helper running on three different machines that I use for streaming. All are running OBS Studio (v. 21.x.x). On two of the systems, the helper works with no problems, which are an XPS 17 and Inspiron 5577. On the third machine, an Elitebook 8440p, the helper works fine except for the fact that it won’t pick up the donation total either for the team nor my individual page. I’ve tried both a fresh install on the Elitebook, and copying over the EL folder directly from one of the other machines, and it still will only show $0 for the donation total.

Any idea what would be causing that on just the one machine? I thought maybe it might be something with flash (which i have updated to the latest version), but if EL Helper doesn’t use flash any more, then it must be something else preventing it from grabbing the total from the Extra Life site.

bread_man Posted August 26, 2018

On 8/24/2018 at 2:35 AM, BJWyler said:

Hey BJWyler,

Since two out of three machines are working fine and you copied your modified html file from one of the working machines then there may be a network or permissions issue on the 3rd machine. Please make sure you also restarted OBS and re-added the Helper to your OBS presentation after copying over the previous html file. If you didn’t do that, the old one may still have been cached by OBS when you were checking if it was fixed after the copy.

You are correct that the Helper no longer uses Flash. It is a a pure JavaScript application running in an html page. To see what might be up, I suggest opening your Chrome browser on the machine in question, turning on Developer Tools, and then dragging the html file into the browser.

Then in the Developer Tools, look at the console to see if you’re getting any errors when the Helper tries to hit the Extra Life data API. If it is working, it would look something like this.

JF Chabot Posted September 5, 2018

Hi Adam,
I’m on my 7th as an Extra Lifer and on my second year using your “Extra Life Helper” and I’m loving it!

I have only a little issue with it though. You see, as a French-Canadian Extra Lifer, most of my supporters are also French-Canadian. Even though most of them are bilinguals, some of them only speak French. So I tried to edit your file to translate the helper’s messages and I mostly find all of the main message (inside the “Helper.js” file). The only one I didn’t find is the “New Donation Received” message.

Can you help me out with this? Also, with the same order of idea, CMN is known under an other name for French-Canadian, so I was trying to find a way to change the Children’s Miracle Network logo for the “Opération Enfant Soleil” logo.

Anyhow, thanks a lot for this nice widget and good luck to your daughter (I guess Ava is your daughter) and you for Extra Life 2018.

BJWyler Posted September 7, 2018

Thanks for the info Adam! Looks like there is some issue with the helper communicating with EL API on the 3rd machine.

bread_man Posted September 8, 2018

Hey Jean-Francois! Thanks for posting the question here. And congrats on your 7th year. It’s my 7th as well.

On 9/5/2018 at 5:28 PM, JF Chabot said:

The “New Donation Received” message doesn’t exist anymore. It was removed to allow space to show donation messages. The screenshots that show that text are old and I’ll update them on the next pass.

On 9/5/2018 at 5:28 PM, JF Chabot said:

I kept the logos as vector art so they would look sharp at any size. To replace the logo, you’d want to convert your vector logo to a SVG file. I used Flash Professional (now branded Adobe Animate) for this but any program that deals with vector art should be able to do this. Then I copied the SVG source and put it in the helper-logos.js file. Each logo is a JavaScript variable at that point. Then in helper.js on line 442, you can see how the variables are used for display. If you change the extraLifeLogo variable to be the SVG source of your logo, it should work fine. You’ll probably then need to make small adjustments on the position. Hope that helps!

On 9/7/2018 at 12:52 PM, BJWyler said:

Thanks for the info Adam! Looks like there is some issue with the helper communicating with EL API on the 3rd machine.

Weird. Definitely a browser / security / network issue for this machine. Can you see any more details for the error? Can you expand the response (starts with “{readyState”) because the reason might be there.

BJWyler Posted September 18, 2018

Here it is. I was going to expand more of the fields, but there was quite a lot of them, so I figured I’d wait until you looked at it, in case you can pin point a specific one to look at for more info.

MaelstromALPHA Posted September 21, 2018

Hey @bread_man! Thank you so much for your awesome helper! Me and a friend are getting ourselves ready for our first ever Extra Life stream in November and i’m in the process of setting up all the overlays/trackers. I just wanted to know.. is there an easy way for me to run a test donation in the helper so I can see how it will look on the stream? Thanks again!

bread_man Posted September 22, 2018

On 9/21/2018 at 4:35 PM, MaelstromALPHA said:

Hey MaelstromALPHA! Glad you guys are finding the Helper useful and thanks for joining the Extra Life community and helping raise money for the kids!

There is a way, but it is complicated and requires running a local webserver serving up fake data and modifying the Helper to use that instead of the Extra Life API. I would give you the steps, but the fake data files I created haven’t been updated to use the correct data structure. You’re not the first to ask for this and so I’ll plan on adding a simple way for people to test the donation alert soon.

On 9/18/2018 at 5:03 PM, BJWyler said:

Yeah, would need to see everything expanded to get a better idea what is going on. Also, you might want to consider uninstalling and reinstalling Chrome on that machine.

bread_man Posted October 5, 2018

Hey everyone! I just released a new version that allows you to do a test donation alert so you can see how it will look / sound in your stream when you’re setting things up. In the new ExtraLifeHelper.html file, change the new testDonationSeconds value to something other than zero. When the Helper loads up, it will show a test donation that many seconds later. Don’t forget to set it back to zero when you’re done testing.

Latest version is v2.2. and can be downloaded here: https://github.com/breadweb/extralifehelper

@MaelstromALPHA, this is something you and others requested.

Sakurie_2 Posted October 5, 2018

Hey guys!

I just stumbled across this feature, and I am so happy I did! This will be my sixth year doing a stream and I’ve been looking for something functional and user friendly; this hit the nail on the head.

I’m looking to implement one of the animated gifs that EL provides in their broadcaster kit for whenever someone donate. Can someone give some insight into how I can add this in? I’m sorry if this is a repeat question that someone else asked. It’s a rather long thread and I haven’t seen it, but if it is already posted and answered, please link me! I can’t seem to find it.

Thanks!

MaelstromALPHA Posted October 6, 2018

On 10/5/2018 at 1:58 PM, bread_man said:

Latest version is v2.2. and can be downloaded here: https://github.com/breadweb/extralifehelper

@MaelstromALPHA, this is something you and others requested.

It’s perfect, exactly what I needed! All my overlays are tested and working great so, i’m super looking forward to our game day now Thanks again for all your hard work @bread_man

bread_man Posted October 6, 2018

On 10/5/2018 at 8:20 PM, Sakurie_2 said:

Hey guys!

Thanks!

Hey Sakurie! Glad you’re finding the Helper useful. And congrats on your sixth year of participation. That’s awesome!

As for using the animated gifs, here are a couple approaches:

Easy: Use StreamLabs AlertBox widget at https://streamlabs.com/dashboard#/alertbox. When configuring the widget in their dashboard, you can upload one of the animated gifs to use for the image. You can search the boards here for more information on how to use StreamLabs and the AlertBox in particular.

Advanced: The Helper provides an onNewDonation function in the ExtraLifeHelper.html page that gets called each time a new donation comes in. You can write your own JavaScript here that will display one of the animated gifs. The Helper has all the modules you’ll need to display the image and fade it in and out (paper.js and tweenjs.js), but it would be tricky to size and position it correctly depending on where you’ve placed the Helper in your presentation.

You can find the thread where the original author of the gifs shared them with the community. Maybe they have more ideas on how to use them in your stream presentation. Good luck!

MaelstromALPHA Posted October 8, 2018

@bread_man another quick question related to your helper, although it’s also a bit of a broader question regarding how extra-life operates. If you’re running the helper in team mode, do you get popups/notifications for all donations made to any team member, or does it just show the goal amount for the team on the helper? As it is just me and 1 of my friends forming a team we wanted to show any and all donations on our individual streams but we’re not sure how extra-life and the helper handles team mode.

In the case that the helper doesn’t show any/all donations made for the team.. do you recommend me and my friend just using the same donation link to achieve what we’re after? Thanks for help

bread_man Posted October 9, 2018

On 10/8/2018 at 9:41 AM, MaelstromALPHA said:

If you’re running the helper in team mode, do you get popups/notifications for all donations made to any team member, or does it just show the goal amount for the team on the helper? As it is just me and 1 of my friends forming a team we wanted to show any and all donations on our individual streams but we’re not sure how extra-life and the helper handles team mode.

Yes, when you run the Helper in team mode, it will show donation alerts for all team members as they come in.

MaelstromALPHA Posted October 9, 2018

That’s fantastic! Thank you again for all your help @bread_man, feeling 100% prepared now for our stream

Bacchanalian Posted October 12, 2018

I look forward to this bump every year! While I love the official tool too now, I actually like to run both. I use the official XSplit extension for my team info and the Breadalert (yes, we should really coin that term) for my own personal fundraising.

bread_man Posted October 20, 2018

Hey everyone! I just released version 2.3 of the Helper which contains a fun new feature. When a new donation is received, the donation message will be read with text-to-speech during the donation alert. You can choose one of three different voice styles or disable it.

New option is in the ExtraLifeHelper.html file:

var donationMessageVoice = “UK-female”; // Voice style for the reading of donation messages.

// // Set to US-female, UK-male, UK-female or set

// // to “” to not read messages with text-to-speech.

I also fixed a bug where some of the fonts may not properly load making text look weird in some situations.

As always, please let me know here if you have any questions or run into any issues.

Latest download: https://github.com/breadweb/extralifehelper/releases/tag/2.3

dmlloyd25 Posted October 22, 2018

hey @bread_man Thanks for the Helper…would love your help with a new feature or writing a function to display a gif or image file when donations are >= a certain amount of money.

Thanks again for the helper – Team Just Do Better is planning to use it on a few of our streams!

bread_man Posted October 23, 2018

On 10/22/2018 at 7:38 PM, dmlloyd25 said:

hey @bread_man Thanks for the Helper…would love your help with a new feature or writing a function to display a gif or image file when donations are >= a certain amount of money.

You’re welcome! Glad you and your team are finding it helpful.

What’s your comfort level with writing JavaScript? You could certainly write your own code and put it in the onNewDonation method in the ExtraLifeHelper.html function to display an image when a new donation comes in if the donationAmount value is over a certain amount. If you need my help to code this, I wouldn’t be able to get to it before this year’s Extra Life unfortunately.

dmlloyd25 Posted October 23, 2018

On 10/23/2018 at 4:09 PM, bread_man said:

You’re welcome! Glad you and your team are finding it helpful.

I took a few classes a while back, unfortunately they were pretty light on JavaScript. I’ll see if I can figure it out though. Thanks again – and hey maybe an idea to add images for a future build. Thanks again for all of your help and good luck with this years stream!

VagrantWolf Posted October 26, 2018

Hey @bread_man, last year you gave me an updated version of this to accommodate my over 100 hour stream. Is there any updates in this years build that I need to be made aware of, or can I just use the previous years you provided to me?

Thanks!

bread_man Posted October 26, 2018

On 10/26/2018 at 9:13 AM, VagrantWolf said:

Thanks!

Hey wolf! The custom version you have won’t work because it connects to the old Extra Life service. You’ll want to get the latest version and then copy the changes to the clock over. It should be easy enough. The changes we made were only in the helper.js file and should just be where the clock is created and where the clock digit values are changed as time ticks.

I am at TwitchCon and slammed until Extra Life so please give that a try and I can help you if you get stuck when I’m back next week. Good luck!

White Bishop Posted October 27, 2018

Hey @bread_man,

I love this program, I’ve used it for years! Thanks so much for making it! I was wondering if you could help me with something. I used to use @bfinleyui plugin as well, and I would display the latest donation and top donation on the stream with it, however it looks to not be updated this year. Is there a way, that your app could write the top donor and recent donors to a text file that we could use to display on stream?

VagrantWolf Posted October 28, 2018

On 10/26/2018 at 9:47 AM, bread_man said:

I am at TwitchCon and slammed until Extra Life so please give that a try and I can help you if you get stuck when I’m back next week. Good luck!

Hey Bread!

I am not running my EL 250 hour stream until Nov 8th, so I have time. If you could look into that and help me out I would be most appreciated. I am not familiar enough with JS to know what I am looking at unfortunately.

bread_man Posted October 28, 2018

On 10/27/2018 at 2:00 PM, White Bishop said:

Hey @bread_man,

Hey White Bishop! Unfortunately, writing to files is something the Extra Life Helper can not do since it is a web application that runs in a browser context.

It looks like @bfinleyui released an update earlier today, however. Hopefully that is what you’re looking for!

VagrantWolf Posted October 29, 2018

Bread,

One of my buddies figured out fixing it for the three digit hour. He also applied a fix and submitted a pull request on github so you can just implement it for other people should they want it.

Thanks!

bread_man Posted October 30, 2018

On 10/29/2018 at 7:42 AM, VagrantWolf said:

One of my buddies figured out fixing it for the three digit hour. He also applied a fix and submitted a pull request on github so you can just implement it for other people should they want it.

I’m pressed for time over the next few weeks because of Extra Life and other personal stuff so I’m really glad you had a friend who could make the minor changes for your custom clock. I probably won’t merge this as an official option until more people request it since the Helper’s list of configuration options is growing, but I will leave the pull request open as a reference and example. Thanks! Community collaboration FTW!

Aery Posted November 2, 2018

Hey! Is there any way to pause the counter once your start date/time has passed? We started a little early, but I would like the counter to only count my actual played time if at all possible?

bread_man Posted November 2, 2018

On 11/2/2018 at 9:04 PM, aery said:

Hey! Is there any way to pause the counter once your start date/time has passed? We started a little early, but I would like the counter to only count my actual played time if at all possible?

Hi! The clock calculates time played by using the start date and time you specify. Unfortunately, it is not a stopwatch that can be paused. You might have luck changing the start time to earlier or later to make it appear as though you played more or less. Good luck!!

Aery Posted November 3, 2018

On 11/2/2018 at 10:56 PM, bread_man said:

I thought that was probably the case, thanks so much!

Griffeth Posted November 3, 2018

Is there any way to control the volume of the alerts?

Tamakun23 Posted November 4, 2018

I just wanted to pop in and thank you for this! I wanted to find a way to automate the process and this just works perfectly for me! I’m keeping this in my wheelhouse for the future

(The donation “kids cheering” sound popped in when I was playing a horror game and I got confused for a moment *laugh*)

bread_man Posted March 7, 2019

Hey everyone!

The Helper has always been offered as a web app that you download and run locally on your computer. Since I created it six years ago, anyone who wanted to use it was required to download the zip file, extract it, and then edit the ExtraLifeHelper.html file with their information and settings preferences. This worked fine for the most part. It actually led to many Extra Lifers modifying the Helper to look different or have additional functionality which was pretty awesome.

With that said, I’m excited to say that version 3.0 of the Helper has been released and now can be used without downloading or editing files! If you don’t have a reason to modify the source code (which applies to most Extra Lifers), adding the Helper to your OBS and XSplit scenes just got a lot easier. Simply visit this page, use the form to customize the Helper, and then copy the link. The page lets you quickly preview the Helper and test donation alerts and sound levels.

http://breadweb.net/extralife-helper.html

For those who have enjoyed modifying the Helper, don’t worry; It will continue to be available for download and both the local and remote versions will be kept in sync.

Feedback and bug reports are appreciated, as always. Thanks! -bread

bread_man Posted March 7, 2019

On 11/3/2018 at 10:41 AM, Griffeth said:

Is there any way to control the volume of the alerts?

There is now in version 3.0 that was just released today! Thank you for the feedback.

MaelstromALPHA Posted April 25, 2019

Hey @bread_man! Once again, thanks for your hard work on the extra-life helper, it helped me and my team out a lot last year and i’m happy to see you’re keeping it up to date! We did have a few teething problems last year however, maybe you could help me out with them

Last year we ran the helper in team-mode on 2 separate PCs and while it did work, the donations often came in staggered.. so I would get a donation alert, and then maybe 2/3 minutes later my team-mate would get the same donation alert and vice versa. Is this a by-product of running in team-mode? Or is that not supposed to happen? Also.. I see that you have now made an online version of the helper, which is great! Would that version possibly fix the de-sync issues we’ve been facing? and if so, is there a way for us host our own remote version with a custom donation mp3?

Thanks again for all your hard work year on year

bread_man Posted April 27, 2019

On 4/25/2019 at 5:17 PM, MaelstromALPHA said:

Hey @MaelstromALPHA! Awesome to hear that the Helper worked out for you and your team last year! Thanks for the kind words. I’ll keep finding ways to improve the Helper for as long as people want to keep using it!

On 4/25/2019 at 5:17 PM, MaelstromALPHA said:

Yes, that makes sense. The Helper polls the Extra Life API for donation information on an interval and not at fixed points in time. So the only way two separate computers running the Helper would be close to being in sync is if they started the Helper at the exact same time. This is the same if the Helper is running in team or participant mode and doesn’t change if you’re using the download or online version.

The online version of the Helper doesn’t support custom alert sounds right now. I’d have to create a way for people to upload these custom files or provide a link to them uploaded somewhere else. The download version will always be available and continue to support custom sound. You trade a little customization power for ease of use when using the online version at the moment. Hope that helps.

Zach Wasylenko Posted July 4, 2019

Thanks for making this, super intuitive, but when I have my start date and time set to

startDate = “11-02-2019”; // Set to your local Extra Life start date.
startTime = “10:00:00”; // Set to your local Extra Life start time.

It continues to say that the date or time is missing/invalid, any help is welcome as I honestly don’t know what is wrong here

bread_man Posted July 5, 2019

On 7/4/2019 at 9:28 PM, Zach Wasylenko said:

Thanks for making this, super intuitive, but when I have my start date and time set to

startDate = “11-02-2019”; // Set to your local Extra Life start date.
startTime = “10:00:00”; // Set to your local Extra Life start time.

It continues to say that the date or time is missing/invalid, any help is welcome as I honestly don’t know what is wrong here

Hey Zach! Are you using the latest download version (https://github.com/breadweb/extralife-helper/releases/tag/3.0) or a link generated using the new form on http://breadweb.net/extralife-helper.html? The default startDate and startTime in the download version are set to those values and appear to be working fine.

Max Delisle Posted October 3, 2019

Hello @bread_man ! Great work you’re doing on those overlays!!

I was wondering though if you could help me out a bit… would it be possible for you to show me how to modify the source code so the overlay would be in french? Everything is in english in OBS and etc so I’m working on changing all that to french to appeal more to people where I’m from but I don’t want to end up with overlays mismatching with the rest.

Also, I’m not really good at this… does this overlay work with streamlabs OBS or just the regular OBS?

Thank you for your time!

-Max

bread_man Posted October 3, 2019

On 10/3/2019 at 7:47 AM, Max Delisle said:

Hello @bread_man ! Great work you’re doing on those overlays!!

Also, I’m not really good at this… does this overlay work with streamlabs OBS or just the regular OBS?

Thank you for your time!

-Max

Hey Max! Changing the language in the download version of the Extra Life Helper is easy. After unzipping the files to your computer, find the “helper.js” file and modify these lines, changing the English values to French:

const TEXT_DAYS_UNTIL = “DAYS UNTIL EXTRA LIFE:”;

const TEXT_HOURS_UNTIL = “HOURS UNTIL EXTRA LIFE:”;

const TEXT_EXTRA_LIFE = “PLAYING GAMES TO HEAL KIDS!”;

const TEXT_MY_AMOUNT_RAISED = “MY AMOUNT RAISED:”

const TEXT_OUR_AMOUNT_RAISED = “OUR AMOUNT RAISED:”

const TEXT_HOURS_PLAYED = “TOTAL TIME PLAYED:”;

const TEXT_ANONYMOUS = “Anonymous”;

Save the file and you’re done!

This is isn’t the first time someone asked for French or Spanish translation so I’d like to add that and make this available to everyone as a new feature, even those using the new remote version. Can you help me by providing me the French translations please?

bread_man Posted October 3, 2019

On 10/3/2019 at 8:08 AM, bread_man said:

Also, I’m not really good at this… does this overlay work with streamlabs OBS or just the regular OBS?

The Helper works in just about any streaming software including regular OBS, Streamlabs OBS, Streamelements OBS, and XSplit.

Max Delisle Posted October 4, 2019

On 10/3/2019 at 8:08 AM, bread_man said:

I downloaded a JS editor and made the changes, only problem is that JS apparently dosen’t care for our weird accents our letters when I translate it word for word (Notre montant récolté) sooo…

I changed the text for both the participant and team boxes so they both say the same thing which translates to Donation’s Total, hope it’s still ok.

Unfortunately I can’t insert a JS file into this forum so do you have an idea how to make the helper.js file available to you?

*** I’ve also realized that Total Hours Played translates to Total d’Heures Jouées which is also messing up so I changed it to Total d’Heures Faites which means Total Hours Done… stupid accents!!

bread_man Posted October 5, 2019

On 10/4/2019 at 10:33 AM, Max Delisle said:

I downloaded a JS editor and made the changes, only problem is that JS apparently dosen’t care for our weird accents our letters when I translate it word for word (Notre montant récolté) sooo…

I changed the text for both the participant and team boxes so they both say the same thing which translates to Donation’s Total, hope it’s still ok.

Unfortunately I can’t insert a JS file into this forum so do you have an idea how to make the helper.js file available to you?

Ah, those characters may not exist in that font set or we may just not be encoding them correctly. I’ll try proper encoding and we can always swap out the font if necessary.

In the meantime, posting the translations here in this thread would be great and I’ll copy them into a format that the Helper can use when somebody changes the new language setting which I’ll be adding. If you don’t mind, could you please provide the most accurate translations even with accents and I’ll get them working? Thank you again!

bread_man Posted October 6, 2019

@Max Delisle I just released a new version of the Helper (both download and remote) that supports a new language option. You can now select English, French or Spanish for the displayed text and there are now French and Spanish text-to-speech voice options available as well. The Helper will swap out the font to something similar which supports accents if the language requires it. Thank you for inspiring me to get this done!

Remote: http://breadweb.net/extralife-helper.html
Download: https://github.com/breadweb/extralife-helper/releases/tag/3.1

Tehjaybo Posted November 5, 2019

This is fantastic!

Is there a way to only use a portion of this? IE Use the donation tracker, but not the timer?

bread_man Posted Wednesday at 07:18 AM

@tehjaybo Sorry for the late reply! One way to turn the timer off is to put the Helper in “year mode” which will remove the timer and just show your total while waiting to show donation alerts.

Don’t forget to sign up for Extra Life to help sick and injured kids in hospitals around the US and Canada by playing games!

Tags:

Why Have a CMN Hospitals Account?

Most Recent Stories

Award-Winning Fundraiser: Dave’s “Putting...

Extra Life Game Day is November 2!

Game Day is two weeks away!

Game Day is almost here! Use Incentives and M...

Featured Stories

What Kind of Extra Lifer Are You?

Platinum Extra Lifers can Unlock Game Control...

Connect Your Extra Life Page to Facebook Fund...

Tabletop Weekend '24 is Almost Upon Us!

Extra Life Helper! Show real-time donation info on your stream!

bread_man Posted October 16, 2014

Airsick Posted October 18, 2014

the_authentic_gamer Posted October 20, 2014

Prorockband Posted October 21, 2014

bread_man Posted October 23, 2014

Zyaldar Posted October 23, 2014

bread_man Posted October 23, 2014

bread_man Posted October 23, 2014

ToraGin Posted October 23, 2014

ToraGin Posted October 23, 2014

Bacchanalian Posted October 23, 2014

Siekobilly Posted October 24, 2014

bread_man Posted October 24, 2014

bread_man Posted October 24, 2014

FoxRacingGurl Posted October 24, 2014

Sapience Posted October 31, 2014

bread_man Posted November 1, 2014

Sapience Posted November 2, 2014

bread_man Posted November 2, 2014

Sapience Posted November 3, 2014

ReviewDad Posted November 3, 2014

Sgoast Posted November 3, 2014

ANHimalx11 Posted January 19, 2015

Guest vttym Posted January 24, 2015

Heavy Rescue 34 Posted January 24, 2015

Maeglin73 Posted February 6, 2015

GRtist Posted February 11, 2015

Jcanulli Posted February 12, 2015

Bacchanalian Posted February 22, 2015

Maeglin73 Posted February 22, 2015

Bacchanalian Posted February 22, 2015

GRtist Posted February 24, 2015

Timay Posted February 24, 2015

GRtist Posted February 24, 2015

Timay Posted February 25, 2015

GRtist Posted February 26, 2015

GRtist Posted February 26, 2015

GRtist Posted March 2, 2015

Maeglin73 Posted March 2, 2015

GRtist Posted March 2, 2015

Maeglin73 Posted March 2, 2015

GRtist Posted March 4, 2015

GRtist Posted March 16, 2015

Troopertk422 Posted March 19, 2015

Gnomedic Posted May 23, 2015

MyrHerder Posted June 9, 2015

Zyaldar Posted June 10, 2015

Rhojin Posted June 17, 2015

Heavy Rescue 34 Posted January 24, 2015

Maeglin73 Posted February 6, 2015

GRtist Posted February 11, 2015

Jcanulli Posted February 12, 2015

Bacchanalian Posted February 22, 2015

Maeglin73 Posted February 22, 2015

Bacchanalian Posted February 22, 2015

GRtist Posted February 24, 2015

timay Posted February 24, 2015

GRtist Posted February 24, 2015

timay Posted February 25, 2015

GRtist Posted February 26, 2015

GRtist Posted February 26, 2015

GRtist Posted March 2, 2015

Maeglin73 Posted March 2, 2015

GRtist Posted March 2, 2015

Maeglin73 Posted March 2, 2015

GRtist Posted March 4, 2015

GRtist Posted March 16, 2015

Troopertk422 Posted March 19, 2015