Challonge Stream Helper - Stream information tool


#1

I’ve been coding this tool for the past months and I feel confident enough to make a public release.

What does it do?
It does what Stream Control and XSplit Panel Writer do, but the main difference is it pulls information from Challonge, so you don’t have to manually update the player names. You just select a match, set the scores and send it to the stream.

Limitations
Currently it doesn’t support updating information to Challonge since I find it rather risky due how the API handles concurrence (or how it doesn’t handles it at all), but I don’t discard implementing it in the future with some custom fail-safe measures.

Also, you have to reload the tournament to get changes updated on the main window App. I know this is annoying, but I’m working on it. I’m just trying to figure out what’s the best way to do it because being intrusive.

How does it work?
You control the information you want to be shown from the main app window. After loading a Tournament, you select the match, set the scores, player countries, commentator names and send them to the stream. The layout, which is nothing more than a HTML5 file with some CSS+JS magic, reads the XML file with all the information and shows it with animations and all.

Prerequisites
Java Runtime Environment 1.8_0.91 or higher
A web server (no.js + http-server is recommended since it’s lightweight and super simple to use - more info on the README.txt file)
Your streaming program of choice (must support HTML5 layouts… so XSplit and OBS are good)

How to use it
To load a tournament you need some basic info: the tournament name and the subdomain. For example, for this tournament: http://limasalty3.challonge.com/sfv_top16 the name is sfv_top16 and the subdomain is limasalty3. If you are not using subdomains, just left it blank. Also, the tournament should be in progress.

On the left side of the window, select a green match (red=completed, green=ready,yellow=pending/waiting for another player) and click on “Add Set”; Challonge supports several sets per match, so this was needed. Next up, select the scores for the players and click on “2Stream”. If you want to flip player positions, click on P1<–>P2, and if this is grand finals, you can check on “Is Loser” checkboxes to indicate who’s coming from losers side (I haven’t think of a better, automated way to do this for the time being).

Optionally, you can change player’s countries in the “Players” tab and save them for future use, meaning you don’t have to set this information everytime you load a tournament. This is particularly useful for big tournaments where players compete in multiple games.

http://i.imgur.com/xBQnpCG.png

You can also set Commentators’ names and Phase Name on the “Misc” tab.

http://i.imgur.com/c1y64ga.png

See it in action here

Donwload Links

Hope you enjoy it guys. Suggestions & bug reports are welcome!


#2

This is revolutionary, do we have to use the overlay in the example or could we potentially tie any source of info to any source in OBS/Xsplit/whatever?


#3

In the end your could do whatever you want; the application writes a file called “match data.xml” which is read by the overlay/layout files.

Heck, I could write a simple change in the application and your could use it with Stream Control overlays (thanks for the idea).


#4

So it just pulls names from the current match in Challonge, and doesn’t actually display a stream formatted version of the bracket?


#5

I’ll take that as “It would be interesting if the application could show the bracket in a friendly format for the stream”.

“Just” pulling the names saves a lot of time for a task that is error prone if done manually. The suggestion is interesting, tho. I’m trying to figure out how to create a proper diagram using the match info. If I solve that the rest is easy.


#6

How flexible/customize-able is it?

With Stream Control, I’m controlling alot of other things including sponsor logos, various text labels, tweets, etc. that are specific to our events.


#7

It doesn’t have those features. Are we talking about this Stream Control? Because I didn’t know you could do all that with that tool or I don’t completely understand how it works. I just checked and there’s a menu to enter Challonge credentials, but I don’t really know what It does; I’ll take a deeper look today.

Anyways, I coded this for a very specific need I had, but I could add more functionality.