teapoted Profile Joined August 2012 United Kingdom 13122 Posts Last Edited: 2012-11-15 00:15:38 #1 Demo navigate on buttons below, can bind to keys in future



The demo was thrown together in an hour or so, how it looks and if the transitions lags for some isn't really important, can be changed/fixed if people think the concept is worthwhile. Please view in a webkit browser. (like chrome)



Essentially, I think that it's a bit silly how many tournaments we have around and the only one that's really putting valuable information on the screen is G-1. And even for them, they do it in a very time-consuming way by having to edit images any time a change is to be made.



What I'm talking about is upcoming schedule/time, team line-ups, the brackets/groups. Etc... I figured that this could be quite easily done with just html/js (I believe dreamhack does this all in Flash, which allows you to do more, but it won't be as easy to edit since there's so many people around that can edit css/js/html.)



This also makes it very easy for the stream host to interact with the content. So for example you can click on a match and it will highlight it, if it's the next one, or if it's finished. And of course this can all be bound to a keyboard as well and with some fancy transition effects can be made to look as good as anything the big leagues are doing. (as I said, this was a very quick demo)



~



So, if there's any interest from people who run tournaments for something like this I can expand on it and put together a little CMS with some customization options. And if anyone knows someone who runs tournament passing this post along to them to see if they're interested would be lovely. If not, and this is a dumb idea, feel free to tell me =P (I'm talking about for free by the way, not selling to tourneys)



Cheerio. Essentially, I think that it's a bit silly how many tournaments we have around and the only one that's really putting valuable information on the screen is G-1. And even for them, they do it in a very time-consuming way by having to edit images any time a change is to be made.What I'm talking about is upcoming schedule/time, team line-ups, the brackets/groups. Etc... I figured that this could be quite easily done with just html/js (I believe dreamhack does this all in Flash, which allows you to do more, but it won't be as easy to edit since there's so many people around that can edit css/js/html.)This also makes it very easy for the stream host to interact with the content. So for example you can click on a match and it will highlight it, if it's the next one, or if it's finished. And of course this can all be bound to a keyboard as well and with some fancy transition effects can be made to look as good as anything the big leagues are doing. (as I said, this was a very quick demo)So, if there's any interest from people who run tournaments for something like this I can expand on it and put together a little CMS with some customization options. And if anyone knows someone who runs tournament passing this post along to them to see if they're interested would be lovely. If not, and this is a dumb idea, feel free to tell me =P (I'm talking about for free by the way, not selling to tourneys)Cheerio. Once you Goblak...

greyconnect Profile Joined June 2011 5 Posts #2 Too cool. I'd love to see a slick interface like this be used somewhere.

pap0t Profile Joined August 2012 Philippines 136 Posts #3 That's pretty easy to emulate with just jquery/mootools with a JSON feed from a PHP backend. Ownage, maybe?

teapoted Profile Joined August 2012 United Kingdom 13122 Posts Last Edited: 2012-11-15 01:54:18 #4 That's pretty easy to emulate with just jquery/mootools with a JSON feed from a PHP backend. Obviously.



The point is it can easily be expanded to do more than any tournament is currently doing with their stream production. And doing it in browser means they can find people to edit it. I don't remember saying it's somehow difficult or complex, only that Streams need to start being more than 'overlay picture with giant scrolling line of text' and this is an easy way to do it. Obviously.The point is it can easily be expanded to do more than any tournament is currently doing with their stream production. And doing it in browser means they can find people to edit it. I don't remember saying it's somehow difficult or complex, only that Streams need to start being more than 'overlay picture with giant scrolling line of text' and this is an easy way to do it. Once you Goblak...

Kupon3ss Profile Joined May 2008 時の回廊 4174 Posts #5 That'd be something on twitch's end if you want it to work as demoed, you can probably use the api to create an applet that allows for user specified set overlays from the stream



alternatively, the streams like BTS just have that information in the description, and u can scroll down for it When in doubt, just believe in yourself and press buttons

teapoted Profile Joined August 2012 United Kingdom 13122 Posts Last Edited: 2012-11-15 02:05:28 #6 On November 15 2012 10:55 Kupon3ss wrote:

That'd be something on twitch's end if you want it to work as demoed, you can probably use the api to create an applet that allows for user specified set overlays from the stream



alternatively, the streams like BTS just have that information in the description, and u can scroll down for it I'm not talking about this being used by the viewers. I'm talking about instead of waiting screens or image overlays. So a streamer would just screengrab the browser, and there can be a spot for the webcam or whatever and they can put that ontop.



So for BTS, for example, instead of preparing a bunch of images. You make a layout, and then you can edit the schedule live during the show, easily. It would also make it very easy to have team profiles in the back-end saved, and if you want to bring one up it would be easy. I'm not talking about this being used by the viewers. I'm talking about instead of waiting screens or image overlays. So a streamer would just screengrab the browser, and there can be a spot for the webcam or whatever and they can put that ontop.So for BTS, for example, instead of preparing a bunch of images. You make a layout, and then you can edit the schedule live during the show, easily. It would also make it very easy to have team profiles in the back-end saved, and if you want to bring one up it would be easy. Once you Goblak...

Kupon3ss Profile Joined May 2008 時の回廊 4174 Posts Last Edited: 2012-11-15 02:07:10 #7 oh for the casters, makes quite a bit more sense, could be really good if you just make it an overlay scene applet that can be thrown as a scene on xsplit/ffsplit/obs and be edited in real time, should be reasonably easy to set up When in doubt, just believe in yourself and press buttons

teapoted Profile Joined August 2012 United Kingdom 13122 Posts Last Edited: 2012-11-15 02:10:58 #8 Yeah, and you could even have an admin editing the scores and it'll auto-update.



And if 'a bunch' of people would want to use it you can go even further and hook it into dota-academy or something. And as I said, this was just a demo made in an hour. If people want to use something like it, I can make it much more over Christmas. But I can't really spend the time without knowing people would. Once you Goblak...

Kupon3ss Profile Joined May 2008 時の回廊 4174 Posts Last Edited: 2012-11-15 02:12:38 #9 with that the applet works fine aside from the issue of having to set up a backend, which is still somewhat annoying, and the need to match the scenes in the broadcaster software, which becomes somewhat unwieldy should u attempt to stream in 1080p, but those are somwhat smaller problems as long as u set it up before hand When in doubt, just believe in yourself and press buttons

teapoted Profile Joined August 2012 United Kingdom 13122 Posts Last Edited: 2012-11-15 02:16:14 #10 Well everyone could use the same site. Have one back-end and then just have users set up their own scenes.



That way you can have team profiles which are consistent across all of them and kept up to date (by Elves).. Once you Goblak...

Kupon3ss Profile Joined May 2008 時の回廊 4174 Posts Last Edited: 2012-11-15 02:22:39 #11 you could try linking the team links to something like liquidpedia or dota-academy and then generate a preview of that page inside, though that may break a few things(css formatting wise). The key is obviously convincing casters to try it out, and for that it'd have to have a certain amount of customization in picture and information and the ability to save previous fields, which will require either some sort of backend or a stand-alone applet, which is the annoying part When in doubt, just believe in yourself and press buttons

teapoted Profile Joined August 2012 United Kingdom 13122 Posts Last Edited: 2012-11-15 02:30:01 #12 Well customization shouldn't be a big problem, as long as people say what they want to be able to do. Background images, image/logo modules, notes, colour/themes, should take care of most concerns..



Yeah the key is casters. If I can get 1-2 to say they'd be willing (not like they are legally bound) to try it and what they want to be able to do, then I can make an alpha. Once you Goblak...

Kupon3ss Profile Joined May 2008 時の回廊 4174 Posts #13 On November 15 2012 11:28 teapoted wrote:

Well customization shouldn't be a big problem, as long as people say what they want to be able to do. Background images, image/logo modules, notes, colour/themes, should take care of most concerns..



Yeah the key is casters. If I can get 1-2 to say they'd be willing (not like they are legally bound) to try it and what they want to be able to do, then I can make an alpha.



I'll try talking to LD/Godz about it then I'll try talking to LD/Godz about it then When in doubt, just believe in yourself and press buttons

LDdota Profile Joined March 2011 United States 662 Posts #14 Awesome idea, I'd love to experiment with this a bit.



Currently, I use xsplit, and the only way I feel comfortable showing information on the stream is via media (images/videos) or flash plugins. I refuse to deal with screen capturing since I need to be able to move my mouse freely, check skype/stream chat, etc, and don't want to have to worry about accidentally covering up a window. (I'm actually stuck using it for Godz's webcam since the Skype plugin for xsplit is buggy and unreliable, hence the issues with it occasionally getting covered up). If I was to try something like this, I'd ideally like a flash plugin, or at the very least for the program to automatically generate .PNG files at 720/1080p based on the data plugged into the CMS.



(Before anyone says, but LD, what about FFsplit/OB? I've tried them both. They aren't nearly full-featured or reliable enough at this point to be good alternatives to XSplit; maybe that will change in the next 3-6 months, but right now they don't cut it).



My other main need would be for the images / graphical design / formatting to be very configurable. The stuff you've shown in the example is functional and certainly legible, but not really polished or nice enough looking to replace what we're using right now. If it would be possible to improve the look / feel and also to be able to add things like sponsor / streaming organization / tournament logos to the overlay, change the background, etc, then this becomes something I'd definitely be very interested in using.



Anyway, this is a really cool idea teapoted. If you want to discuss further, feel free to add me on Skype! (PM'd you my name) Caster

teapoted Profile Joined August 2012 United Kingdom 13122 Posts Last Edited: 2012-11-15 10:00:35 #15 Well, as I've said how it looks wasn't really a concern of mine at the moment, it 'can' look like anything.



Yeah the only worry I have is how to set up the scene, and not knowing much about XSplit I'll probably have to experiment. But it pretty much has to be browser-based like this as otherwise it defeats the purpose and is just an image generator instead. =P



Anyway, added you on Skype. Once you Goblak...

teapoted Profile Joined August 2012 United Kingdom 13122 Posts #16 I asked around on the forums and apparently you can use FireFox as a source which would get around having to use screen region. Once you Goblak...