Challonge widget

[ghost]

So I've made a few changes to the existing code to help me in adding the stuff I did. I was tempted to do more to make the code as a whole more maintainable but I didn't want to do too much unnecessary stuff. I've not made a pull request before so I'm not particularly in the know about how it works, but if you're interested in any of the stuff I've done then it's all there, and it also gives me somewhere to explain stuff. I didn't intend on putting so many changes in the request but it kind of... happened.

I tried using my build for a tournament stream at the weekend and it went really well. The changes I made are:

• A big reload layout button. Massively helpful during development, though I did to accidentally hit it once during the tournament, wiping clear all the fields :-( I'm wondering if this is an actual issue or not though.

• A challonge match fetching widget. This fetches matches from challonge and allows you to set the name fields just by picking a match. This thing was awesome. As long as the other organizers kept the bracket up to date, I was able to update the names in seconds. If you want to try it, then you can use the following:

  <challongeMatch id="hi" x="50" y="50" width="300" height="150"
    playerOneWidget="pName1" playerTwoWidget="pName2" />

Make sure to fill out the settings for challonge in the widget settings menu option I also added.

• Settings file Basically all of the contents of the settings file get put in to the settings map, and when the program saves, all of the settings are saved to the file again. I did it to make it more convenient to work with, and also so that it could support nested tags within the settings file itself. It was useful for saving the challonge related settings in its own tag.

[farpenoodle]

Just some comments on the Challonge widget.

Not quite what I had in mind but definitely a useful thing. Plus it gets the API authentication stuff that I was still thinking about how to accomplish out of the way. What I'd like to do is to make a widget that can pull in the tournament data and fill out a bunch of matches as text boxes at once. Probably via some kind of mapping. I think I have a decent idea how I want to accomplish this but I need to study how Challonge outputs different types of brackets before I start doing anything.

Regardless, great job!

[ghost]

I'd be interested in knowing more about what you are trying to do in detail actually - I've played with the challonge API a fair bit so I should be able to help you out with that.

[farpenoodle]

Okay. So here's a layout I use a lot for tournament streams to show brackets

<tab name="Top 8">
  <tabSet x="0" y="0" width="385" height="210">
  <tab name="Winners" scrollable="1">
   <lineEdit id="wm1p1" x="10" y="10" width="80" height="20" dataSet="players.csv" />
   <lineEdit id="wm1p1s" x="90" y="10" width="30" height="20" />
   <lineEdit id="wm1p2" x="10" y="30" width="80" height="20" dataSet="players.csv" />
   <lineEdit id="wm1p2s" x="90" y="30" width="30" height="20" />

   <lineEdit id="wm2p1" x="10" y="70" width="80" height="20" dataSet="players.csv" />
   <lineEdit id="wm2p1s" x="90" y="70" width="30" height="20" />
   <lineEdit id="wm2p2" x="10" y="90" width="80" height="20" dataSet="players.csv" />
   <lineEdit id="wm2p2s" x="90" y="90" width="30" height="20" />

   <lineEdit id="wfp1" x="160" y="40" width="80" height="20" dataSet="players.csv">Winners Final</lineEdit>
   <lineEdit id="wfp1s" x="240" y="40" width="30" height="20" />
   <lineEdit id="wfp2" x="160" y="60" width="80" height="20" dataSet="players.csv">Winners Final</lineEdit>
   <lineEdit id="wfp2s" x="240" y="60" width="30" height="20" />

   <lineEdit id="lfp1" x="160" y="100" width="80" height="20" dataSet="players.csv">Losers Final</lineEdit>
   <lineEdit id="lfp1s" x="240" y="100" width="30" height="20" />
   <lineEdit id="lfp2" x="160" y="120" width="80" height="20" dataSet="players.csv">Losers Final</lineEdit>
   <lineEdit id="lfp2s" x="240" y="120" width="30" height="20" />

   <lineEdit id="gfp1" x="310" y="70" width="80" height="20" dataSet="players.csv">Grand Final</lineEdit>
   <lineEdit id="gfp1s" x="390" y="70" width="30" height="20" />
   <lineEdit id="gfp2" x="310" y="90" width="80" height="20" dataSet="players.csv">Grand Final</lineEdit>
   <lineEdit id="gfp2s" x="390" y="90" width="30" height="20" />

   <lineEdit id="gf2p1" x="460" y="70" width="80" height="20" dataSet="players.csv">GFinal Reset</lineEdit>
   <lineEdit id="gf2p1s" x="540" y="70" width="30" height="20" />
   <lineEdit id="gf2p2" x="460" y="90" width="80" height="20" dataSet="players.csv">GFinal Reset</lineEdit>
   <lineEdit id="gf2p2s" x="540" y="90" width="30" height="20" />

  </tab>

  <tab name="Losers" scrollable="1">
   <lineEdit id="lm1p1" x="10" y="20" width="80" height="20" dataSet="players.csv" />
   <lineEdit id="lm1p1s" x="90" y="20" width="30" height="20" />
   <lineEdit id="lm1p2" x="10" y="40" width="80" height="20" dataSet="players.csv" />
   <lineEdit id="lm1p2s" x="90" y="40" width="30" height="20" />

   <lineEdit id="lm2p1" x="10" y="80" width="80" height="20" dataSet="players.csv" />
   <lineEdit id="lm2p1s" x="90" y="80" width="30" height="20" />
   <lineEdit id="lm2p2" x="10" y="100" width="80" height="20" dataSet="players.csv" />
   <lineEdit id="lm2p2s" x="90" y="100" width="30" height="20" />

   <lineEdit id="lm3p1" x="160" y="10" width="80" height="20" dataSet="players.csv">From Winners</lineEdit>
   <lineEdit id="lm3p1s" x="240" y="10" width="30" height="20" />
   <lineEdit id="lm3p2" x="160" y="30" width="80" height="20" dataSet="players.csv" />
   <lineEdit id="lm3p2s" x="240" y="30" width="30" height="20" />

   <lineEdit id="lm4p1" x="160" y="70" width="80" height="20" dataSet="players.csv">From Winners</lineEdit>
   <lineEdit id="lm4p2" x="160" y="90" width="80" height="20" dataSet="players.csv" />
   <lineEdit id="lm4p2s" x="240" y="90" width="30" height="20" />

   <lineEdit id="lsp1" x="310" y="30" width="80" height="20" dataSet="players.csv">Losers Semi</lineEdit>
   <lineEdit id="lsp1s" x="390" y="30" width="30" height="20" />
   <lineEdit id="lsp2" x="310" y="50" width="80" height="20" dataSet="players.csv">Losers Semi</lineEdit>
   <lineEdit id="lsp2s" x="390" y="50" width="30" height="20" />

  </tab>
  <tab name="Resets">
  <button type="reset" x="10" y="10" width="200" height="40" tooltip="Clear Winners fields" id="clearWinners" reset="wm1p1,wm1p1s,wm1p2,wm1p2s,wm2p1,wm2p1s,wm2p2,wm2p2s,wfp1,wfp1s,wfp2,wfp2s,lfp1,lfp1s,lfp2,lfp2s,gfp1,gfp1s,gfp2,gfp2s,gf2p1,gf2p1s,gf2p2,gf2p2s">Reset Winners</button>
  <button type="reset" x="10" y="70" width="200" height="40" tooltip="Clear Losers fields" id="clearLosers" reset="lm1p1,lm1p1s,lm1p2,lm1p2s,lm2p1,lm2p1s,lm2p2,lm2p2s,lm3p1,lm3p1s,lm3p2,lm3p2s,lm4p1,lm4p1s,lm4p2,lm4p2s,lsp1,lsp1s,lsp2,lsp2s">Reset Losers</button>
  </tab>
  </tabSet>

From what I can tell it should be possible to work backwards from GF in the challonge match JSON to fill this in. Though I forget how it handles a reset in grand finals. What I'm thinking is something along the lines of this:

<challongeBracket id="hi" x="50" y="50" width="300" height="150" >
  <!-- this is basically a list of matches for it to fill in starting from GF --> 
  <match playerOneWidget="gf2p1" playerOneScoreWidget="gf2p1s" playerTwoWidget="gf2p2" playerTwoScoreWidget="gf2p2s" />
  <match playerOneWidget="gfp1" playerOneScoreWidget="gfp1s" playerTwoWidget="gfp2" playerTwoScoreWidget="gfp2s" />
  <match playerOneWidget="lfp1" playerOneScoreWidget="lfp1s" playerTwoWidget="lfp2" playerTwoScoreWidget="lfp2s" />
 <!-- etc etc you can put as many of these in as you need. -->
</challongeBracket>

It would be great if it could also take an arbitrary challonge URL. Since sometimes the brackets for an event aren't all on one account.

[ghost]

Ah, so you are after a view for showing brackets. Yes, that is a more complex beast. Funnily enough I already have a layout that does that - It's a html page that parses the data from the API itself (easy seeing as it's just JSON) and works out where everything goes - at the moment I only have a fixed top 16 layout though. Ideally I want it to scale the display based on the number of participants and the dimensions of the swf/html area. This was before I looked at changing the StreamControl code though, and so it doesn't use StreamControl at all (it gets the tournament from a url parameter).

I'm not really sure at the moment how much of this should be in StreamControl, and how much should be in the html/swf itself (though it's clear the api data fetching process should be in StreamControl). At the moment I'm thinking that the bracket widget should fetch the tournament match data, (match data, number of matches/participants, and desired bracket side (winners, losers, or maybe even both)), then basically dump that to xml/json in a consistent format and have the html/swf do the required positioning of the match boxes and whatever. I don't think all of those fields in your layout will be needed anymore as you won't be filling them out yourself manually.

Actually there were a couple of things I forgot to add to the match widget too - the ability to set the current round (like Winners Round X, Losers Semi-final, etc), and also adding (W) and (L) next to names in Grand Finals. This could also handle different tournament types like single elimination and round robin/swiss (which I also sometimes use). Taking an arbitrary url/tournament id is also a good idea, I can implement that too.

How are you handling documentation by the way? I realize I'll need some for my new stuff.

[farpenoodle]

The reason I want it in Streamcontrol is that it gives me finer control over what actually get's displayed. For example, I could show what team and country a player belongs to on the bracket. This is actually something I do pretty frequently. I guess it'd be possible to have the overlay load the extra information from the same CSV that I load the players information from. But I do think it's easier for the streamer to adjust stuff from within Streamcontrol if needed because as mentioned the challonge bracket is often out of his hands. (In fighting game events there's usually a whole bunch of different tournaments happening at once.) I see this more as a convenience feature rather than something the streamer is to rely on. Which also reminds me that we should probably have a toggle for it to not fill in fields that have already been filled in by the streamer.

Here's two examples of the kinds of stuff I often do with the brackets.

Right now I'm handling documentation pretty badly. Haha. I have yet to document all the features in Streamcontrol past 0.3. Right now as you might have guessed it's just a Wordpress page on my website.

[ghost]

Ahhh, I understand you now. I think we have two different use cases here. I'm going to have to go away and think about this. Maybe could have a widget with two output modes that could be set in the layout xml or something - one that dumps nicely formatted tournament data to disk (which will be simpler to set up and friendlier for newer users as they can use preprovided html/swfs), and one to fill out existing widgets like your method, which will give you more control, like you say. I still need to think about that though.

Also might be worth using the GitHub pages feature for documentation? It would make it easier to contribute to at least.

[farpenoodle]

I have no idea how that works tbh. If you'd like to start on something go ahead though. I'll try to add to it when I have time.