bread_man

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

Recommended Posts

bread_man    41

helper4.jpg   helper1.jpg   helper2.jpg 

 

helper3.jpg   helper5.jpg   helper6.jpg

 

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.
  • Shows your total amount raised in real time.
  • Shows new donations as they arrive in real time and plays a happy kids sound effect.
  • Allows specifying a custom donation alert sound.
  • Occasionally shows the Extra Life and Children's Miracle Network Hospital logos.
  • Works in "participant" mode or "team" mode. You can show totals for yourself or your team.
  • Supports four color themes and different border styles to compliment your stream setup.
  • Works in XSplit and OBS Studio (Windows and OSX)
  • Runs completely locally on your machine. There is no dependency on any remote website service that may become unavailable. 
  • Provides a hook to run your own JavaScript code when a new donation comes in.

 

To download the Helper and view instructions on setting it up, click here: http://breadweb.net/files/extralife/

 

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
  • OSX Sierra

Streaming Software: 

 

Changelog:

 

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.

 

  • Like 9

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
Prorockband    10

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!

Share this post


Link to post
Share on other sites
bread_man    41

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.

Share this post


Link to post
Share on other sites
ToraGin    10

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!

Share this post


Link to post
Share on other sites
ToraGin    10

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!

Share this post


Link to post
Share on other sites
Bacchanalian    150

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.

Share this post


Link to post
Share on other sites
Siekobilly    12

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!

OBS_ExtraLifeHelper_zpsa57e9107.jpg

Share this post


Link to post
Share on other sites
bread_man    41
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!

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!

Share this post


Link to post
Share on other sites
bread_man    41

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. :P 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!

  • Like 1

Share this post


Link to post
Share on other sites
Sapience    458

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.

Share this post


Link to post
Share on other sites
bread_man    41
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?

Share this post


Link to post
Share on other sites
Sapience    458

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.

  1. Donation notifications will occasionally repeat. Sometimes within a few minutes.
  2. 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).

Edited by Sapience

Share this post


Link to post
Share on other sites
bread_man    41
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.

  1. Donation notifications will occasionally repeat. Sometimes within a few minutes.
  2. 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).

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.

Share this post


Link to post
Share on other sites
Sapience    458
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.

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

Share this post


Link to post
Share on other sites
Sgoast    58

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.

Share this post


Link to post
Share on other sites
Guest vttym   
Guest vttym

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 :)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now