Jump to content
bread_man

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

Recommended Posts

21 hours ago, 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.

Share this post


Link to post
Share on other sites
On 11/2/2016 at 6: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.

 

7 hours ago, sneaK said:

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.

 

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 

 

 

 

  • Like 3

Share this post


Link to post
Share on other sites

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

 

 

  • Like 3
  • Thanks 2

Share this post


Link to post
Share on other sites

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

lotrostream.jpg

  • Like 2

Share this post


Link to post
Share on other sites

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

https://clips.twitch.tv/PeppyVibrantNuggets4Head

Share this post


Link to post
Share on other sites
3 hours ago, cptjecht said:

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

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.

  • Like 1

Share this post


Link to post
Share on other sites

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"?

Share this post


Link to post
Share on other sites
18 hours ago, Sumsum5513 said:

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"?

 

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. 

Share this post


Link to post
Share on other sites
15 minutes ago, 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.

Share this post


Link to post
Share on other sites
7 minutes ago, 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. :)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
2 hours ago, Sumsum5513 said:

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.

 

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.

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites
1 hour ago, Birdperson said:

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!

 

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!

Share this post


Link to post
Share on other sites

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.  

  • Thanks 1

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
9 minutes ago, Bacchanalian said:

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.

 

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!

  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
On 10/25/2017 at 11:56 AM, bread_man 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!

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!

  • Like 1

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
3 hours ago, 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. 

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...