Upvote Upvoted 88 Downvote Downvoted
1 2
TF2 Web Spectator
1
#1
87 Frags +

Web Spectator Plugin
This is not ready for use yet. This is still quite early on in development, and is really a call for developers to help

So, a lot of you might know that I've been working on a 'minimap' or overview project along with the client spectator plugin.
Rather than type out what this does in detail, I'll let this demo screenshot do the talking: http://i.imgur.com/QAiJCKS.jpg

What is it?
This is a server plugin which sends player locations, health, ubercharges etc. to clients connected in a web browser. While there is no delay currently, it will soon be added to be in sync with the STV delay.
Casters, when authentication is also added, will have a delay which is a few seconds shorter. This could be open on a second monitor, or laptop, tablet, whatever. They would be able to look at it to see where flanks will happen, when an uber is used or dropped, or to catch someone getting multiple kills.

When can we use this?
There aren't enough features in it yet to be used. The map images I have need to be cleaned up, making the camera follow the action needs to be added, as well as manually controlling the camera.
So why is this thread here? I need help, basically. I'm some 20 year old Irish guy who's busy with classes; as much as I'd love to I can't dedicate massive amounts of time to getting this ready ASAP.

Who can help?
If you know C++ and can work with the Source SDK, you can help with getting all the information we need out of the engine to send to clients. I'm also still new to C++, and likely am doing things wrong.
If you know JavaScript/Canvas, you can help with rewriting the client code, pretty much entirely. The interp/animation code from STV2D isn't great, I don't think my Canvas drawing is optimal, and I have no idea how to do binary WebSockets in JS, which would help with bandwidth.
The code for both parts of the project is available here: http://github.com/sblue/webspec

But I can't code 8(
Give ideas for the UI or something. Even if it's some crazy wild idea, it doesn't hurt to post it.
I just ask that you don't post to Reddit or places like that yet, as the traffic will kill my connection. It has never crashed on me so far, but I don't know how it'll handle traffic. nvm it's crashing D:

Will it be used for ESEA/UGC/ETF2L matches?
When it's 100% stable and feature complete, it will be up to them. Part of the reason it is open source is to allow them to look through the code themselves. Remember, this runs on the same server the players are on, it can not crash under any circumstance.
Help from the various league developers would be very welcome. I think they would agree this would help make a caster's job much easier, and help make the final product on stream much better.

Can I use this for demos?
No, sorry. Something like this may end up in the spectator plugin eventually, but I make no promises.

I plan on working with the TFTV casters to decide on what should be added and what can be put off until a later date, as it is being made with their stream in mind. As I said above though, everyone is encouraged to give feedback, from random TF2 pubbers to casters on any channel.
Eg, should a noticeable message or icon come up when uber is used or dropped? Should the UI be bigger or smaller? Are the floating name tags too distracting, would class icons be a good replacement?

Anyway, that's all I have to say on it for now. Comments & criticism appreciated.
Link again: http://github.com/sblue/webspec
tldr, come help me grow tf2 esports

[b]Web Spectator Plugin[/b]
[i]This is not ready for use yet. This is still quite early on in development, and is really a call for developers to help[/i]

So, a lot of you might know that I've been working on a 'minimap' or overview project along with the client spectator plugin.
Rather than type out what this does in detail, I'll let this [s]demo[/s] screenshot do the talking: http://i.imgur.com/QAiJCKS.jpg

[b]What is it?[/b]
This is a server plugin which sends player locations, health, ubercharges etc. to clients connected in a web browser. While there is no delay currently, it will soon be added to be in sync with the STV delay.
Casters, when authentication is also added, will have a delay which is a few seconds shorter. This could be open on a second monitor, or laptop, tablet, whatever. They would be able to look at it to see where flanks will happen, when an uber is used or dropped, or to catch someone getting multiple kills.

[b]When can we use this?[/b]
There aren't enough features in it yet to be used. The map images I have need to be cleaned up, making the camera follow the action needs to be added, as well as manually controlling the camera.
[i]So why is this thread here?[/i] I need help, basically. I'm some 20 year old Irish guy who's busy with classes; as much as I'd love to I can't dedicate massive amounts of time to getting this ready ASAP.

[b]Who can help?[/b]
If you know C++ and can work with the Source SDK, you can help with getting all the information we need out of the engine to send to clients. I'm also still new to C++, and likely am doing things wrong.
If you know JavaScript/Canvas, you can help with rewriting the client code, pretty much entirely. The interp/animation code from STV2D isn't great, I don't think my Canvas drawing is optimal, and I have no idea how to do binary WebSockets in JS, which would help with bandwidth.
The code for both parts of the project is available here: http://github.com/sblue/webspec

[b]But I can't code 8([/b]
Give ideas for the UI or something. Even if it's some crazy wild idea, it doesn't hurt to post it.
I just ask that you don't post to Reddit or places like that yet, as the traffic [i]will[/i] kill my connection. [s]It has never crashed on me so far, but I don't know how it'll handle traffic.[/s] nvm it's crashing D:

[b]Will it be used for ESEA/UGC/ETF2L matches?[/b]
When it's 100% stable and feature complete, it will be up to them. Part of the reason it is open source is to allow them to look through the code themselves. Remember, this runs on the same server the players are on, [u]it can not crash under any circumstance[/u].
Help from the various league developers would be very welcome. I think they would agree this would help make a caster's job much easier, and help make the final product on stream much better.

[b]Can I use this for demos?[/b]
No, sorry. Something like this may end up in the spectator plugin eventually, but I make no promises.

I plan on working with the TFTV casters to decide on what should be added and what can be put off until a later date, as it is being made with their stream in mind. As I said above though, everyone is encouraged to give feedback, from random TF2 pubbers to casters on any channel.
Eg, should a noticeable message or icon come up when uber is used or dropped? Should the UI be bigger or smaller? Are the floating name tags too distracting, would class icons be a good replacement?

Anyway, that's all I have to say on it for now. Comments & criticism appreciated.
Link again: http://github.com/sblue/webspec
tldr, come help me grow tf2 esports
2
#2
3 Frags +

reserved for public demo link & major changelogs

reserved for public demo link & major changelogs
3
#3
1 Frags +

YOU CAN DO IT BLUEE :D

YOU CAN DO IT BLUEE :D
4
#4
1 Frags +

It's really cute watching the name tags run round the map :3

blueeAre the floating name tags too distracting, would class icons be a good replacement?

Even though they do take up some space, I think being able to see who exactly is where would be better than just class icons.

It's really cute watching the name tags run round the map :3

[quote=bluee]Are the floating name tags too distracting, would class icons be a good replacement?[/quote]
Even though they do take up some space, I think being able to see who exactly is where would be better than just class icons.
5
#5
0 Frags +

This is fucking awesome man, sadly I can't really help with it. Keep up the great work bluee.

This is fucking awesome man, sadly I can't really help with it. Keep up the great work bluee.
6
#6
0 Frags +

Are you gonna have first person spec mode too with webgl?

Are you gonna have first person spec mode too with webgl?
7
#7
24 Frags +

literally carrying esports on your back

literally carrying esports on your back
8
#8
1 Frags +

Maybe you've seen this already but there's a somewhat related project here:

https://github.com/eilgin/tf2-map-overview

This plugin records a JSON file of positions / camera angles which can then be played back in a webpage afterwards. Demo here: http://www.thomas-jouannic.fr/mapoverview/

In any case perhaps there might be something useful in there, or maybe the author would be interested in helping you out.

I would love to help but only if you don't mind teaching someone who knows literally nothing about the source SDK or networking. I know enough C++ to code, but not enough to develop real projects, if that makes any sense.

Maybe you've seen this already but there's a somewhat related project here:

https://github.com/eilgin/tf2-map-overview

This plugin records a JSON file of positions / camera angles which can then be played back in a webpage afterwards. Demo here: http://www.thomas-jouannic.fr/mapoverview/

In any case perhaps there might be something useful in there, or maybe the author would be interested in helping you out.

I would love to help but only if you don't mind teaching someone who knows literally nothing about the source SDK or networking. I know enough C++ to code, but not enough to develop real projects, if that makes any sense.
9
#9
0 Frags +
hpqoeuAre you gonna have first person spec mode too with webgl?

afaik that project died. It was cool when jimbomcb posted his proof of concept, but I think the effort in basically recreating Source in webgl outweighs the benefits of being able to do first person spec in a browser.

[quote=hpqoeu]Are you gonna have first person spec mode too with webgl?[/quote]
afaik that project died. It was cool when jimbomcb posted his proof of concept, but I think the effort in basically recreating Source in webgl outweighs the benefits of being able to do first person spec in a browser.
10
#10
3 Frags +

This is amazing. Thank you so much for your efforts. I wish I knew more C++ so I could help.

This is amazing. Thank you so much for your efforts. I wish I knew more C++ so I could help.
11
#11
2 Frags +

the saviour

the saviour
12
#12
5 Frags +

If the dots could somehow indicate class, that would probably helpful Not sure what the best way to do that without cluttering it up, though. The names are nice but when people are next to each other its counter productive.

If the dots could somehow indicate class, that would probably helpful Not sure what the best way to do that without cluttering it up, though. The names are nice but when people are next to each other its counter productive.
13
#13
0 Frags +

Would be kinda neat if you could click on the minimap and it'd take you there in spec mode, I don't know how feasible this is but would be neat if you saw a bunch of players going towards a choke or something.

Would be kinda neat if you could click on the minimap and it'd take you there in spec mode, I don't know how feasible this is but would be neat if you saw a bunch of players going towards a choke or something.
14
#14
-3 Frags +

Literally saving competitive TF2.

Literally saving competitive TF2.
15
#15
7 Frags +
athermalLiterally saving competitive TF2.

it's not dying, he's just helping it grow bigger

[quote=athermal]Literally saving competitive TF2.[/quote]
it's not dying, he's just helping it grow bigger
16
#16
6 Frags +
frknIf the dots could somehow indicate class, that would probably helpful Not sure what the best way to do that without cluttering it up, though. The names are nice but when people are next to each other its counter productive.

change the dots to the class icons

[quote=frkn]If the dots could somehow indicate class, that would probably helpful Not sure what the best way to do that without cluttering it up, though. The names are nice but when people are next to each other its counter productive.[/quote]

change the dots to the class icons
17
#17
Chief Video Editor
2 Frags +

Wow, you're fucking amazing dude

Wow, you're fucking amazing dude
18
#18
0 Frags +
atmofrknIf the dots could somehow indicate class, that would probably helpful Not sure what the best way to do that without cluttering it up, though. The names are nice but when people are next to each other its counter productive.
change the dots to the class icons

That was the most obvioous but then I thought they might have to be too big for it to be effective. Medic and demo seem like they would work well enough but scout and particularly soldier might be less pretty. Not really sure though.

Also, if class icons were used names would probably be unnecessary if a distinction was made between roamer and pocket (just an R and a P would suffice, but this would be team specific so not at all straightforward). This would probably also make the size of the icon a non issue (as it would be a lot less cluttered).

[quote=atmo][quote=frkn]If the dots could somehow indicate class, that would probably helpful Not sure what the best way to do that without cluttering it up, though. The names are nice but when people are next to each other its counter productive.[/quote]

change the dots to the class icons[/quote]
That was the most obvioous but then I thought they might have to be too big for it to be effective. Medic and demo seem like they would work well enough but scout and particularly soldier might be less pretty. Not really sure though.

Also, if class icons were used names would probably be unnecessary if a distinction was made between roamer and pocket (just an R and a P would suffice, but this would be team specific so not at all straightforward). This would probably also make the size of the icon a non issue (as it would be a lot less cluttered).
19
#19
4 Frags +

Color the dots like Dota 2 does
then you can cut down on battlefield clutter and just use a color coded key on the side to say who/what class/etc

Color the dots like Dota 2 does
then you can cut down on battlefield clutter and just use a color coded key on the side to say who/what class/etc
20
#20
0 Frags +
DewotterblueeAre the floating name tags too distracting, would class icons be a good replacement?Even though they do take up some space, I think being able to see who exactly is where would be better than just class icons.

Why not class icons AND names?

[quote=Dewotter]
[quote=bluee]Are the floating name tags too distracting, would class icons be a good replacement?[/quote]
Even though they do take up some space, I think being able to see who exactly is where would be better than just class icons.[/quote]

Why not class icons AND names?
21
#21
0 Frags +

Maybe just colored class icons if the names make it too cluttered?

Also, you should integrate this (http://teamfortress.tv/forum/thread/1210-huge-status-monitor) into the project. Sigma did a great job on it, and it's just awesome for speccing live matches.

Maybe just colored class icons if the names make it too cluttered?

Also, you should integrate this (http://teamfortress.tv/forum/thread/1210-huge-status-monitor) into the project. Sigma did a great job on it, and it's just awesome for speccing live matches.
22
#22
0 Frags +

#20, too much clutter on screen at once imo. I could make them toggle on with a key, but by default I prefer the class icon method.

#21, thanks for linking that, had a few people talking about it and never got around to looking for it.

#20, too much clutter on screen at once imo. I could make them toggle on with a key, but by default I prefer the class icon method.

#21, thanks for linking that, had a few people talking about it and never got around to looking for it.
23
#23
1 Frags +

i think something interesting would be to make little custom icons for different types of class, because it would be trivial to cut down on how noisy/detailed the icons are that way
you could have one for each of offense/defense/support, or if that's not good, you could have one for the base HP levels of each class, or, or, or...

i think something interesting would be to make little custom icons for different types of class, because it would be trivial to cut down on how noisy/detailed the icons are that way
you could have one for each of offense/defense/support, or if that's not good, you could have one for the base HP levels of each class, or, or, or...
24
#24
1 Frags +
wareyai think something interesting would be to make little custom icons for different types of class, because it would be trivial to cut down on how noisy/detailed the icons are that way
you could have one for each of offense/defense/support, or if that's not good, you could have one for the base HP levels of each class, or, or, or...

To add to this, I don't think it's necessary to really put names above each icon. I feel just class icons is enough, to reduce clutter.

Like, for example, I think this would be must useful for holds, which splits the team in two, combo and flank. Combo classes are all different, so you class icons are enough in telling who is who (so long as you know who the pocket is).

[quote=wareya]i think something interesting would be to make little custom icons for different types of class, because it would be trivial to cut down on how noisy/detailed the icons are that way
you could have one for each of offense/defense/support, or if that's not good, you could have one for the base HP levels of each class, or, or, or...[/quote]

To add to this, I don't think it's necessary to really put names above each icon. I feel just class icons is enough, to reduce clutter.

Like, for example, I think this would be must useful for holds, which splits the team in two, combo and flank. Combo classes are all different, so you class icons are enough in telling who is who (so long as you know who the pocket is).
25
#25
6 Frags +

I wouldn't mind helping out on the server side, although I'm busy for the next week or so trying to push an Android app out the door at my current job...

Looking through the code, I'd bet that your crash probably comes from your very conservative use of memory when it comes to strings. Things like make me nervous:

char *buffer = (char*)malloc(1 + 4*2 + strlen(weapon.ToCStr()));
int length = sprintf(buffer, "%c%d:%d:%s", WSPacket_PlayerDeath, victim, attacker, STRING(weapon));

Don't forget, this plugin is running on a server that's using hundreds of megabytes of memory. Don't hesitate to allocate 1k here in order to prevent a buffer overflow. Better yet, find out if Valve has their own blessed string class that you should be using to prevent this sort of thing, or see if you can use the string class in the standard library (http://www.cplusplus.com/reference/string/string/) and call c_str() whenever needed.

I wouldn't mind helping out on the server side, although I'm busy for the next week or so trying to push an Android app out the door at my current job...

Looking through the code, I'd bet that your crash probably comes from your very conservative use of memory when it comes to strings. Things like make me nervous:

[code]
char *buffer = (char*)malloc(1 + 4*2 + strlen(weapon.ToCStr()));
int length = sprintf(buffer, "%c%d:%d:%s", WSPacket_PlayerDeath, victim, attacker, STRING(weapon));
[/code]

Don't forget, this plugin is running on a server that's using hundreds of megabytes of memory. Don't hesitate to allocate 1k here in order to prevent a buffer overflow. Better yet, find out if Valve has their own blessed string class that you should be using to prevent this sort of thing, or see if you can use the string class in the standard library (http://www.cplusplus.com/reference/string/string/) and call c_str() whenever needed.
26
#26
0 Frags +

changing tf2 spectatoring right here

changing tf2 spectatoring right here
27
#27
0 Frags +
shadowmatterLooking through the code, I'd bet that your crash probably comes from your very conservative use of memory when it comes to strings.

By the logs I got out of it it seems to be me not closing some connections properly, trying to send data to clients who have left.
The strings are using 'string_t' in the Source SDK, which as far as I can tell is Valve's way of doing strings.

You are right about memory though, I am cutting it close with some functions and will probably change it to be safer. I figured using exactly as much memory as needed was best way to go around it, but when the server is using MBs of memory as you say, I probably shouldn't be overly worried about a few wasted bytes here and there, when they all get freed quickly after anyway.

Thanks for having a look through it!

[quote=shadowmatter]Looking through the code, I'd bet that your crash probably comes from your very conservative use of memory when it comes to strings.[/quote]
By the logs I got out of it it seems to be me not closing some connections properly, trying to send data to clients who have left.
The strings are using 'string_t' in the Source SDK, which as far as I can tell is Valve's way of doing strings.

You are right about memory though, I am cutting it close with some functions and will probably change it to be safer. I figured using exactly as much memory as needed was best way to go around it, but when the server is using MBs of memory as you say, I probably shouldn't be overly worried about a few wasted bytes here and there, when they all get freed quickly after anyway.

Thanks for having a look through it!
28
#28
6 Frags +

All good. Looking at https://developer.valvesoftware.com/wiki/String it seems that string_t is just a typedef for char *, so you need to be careful.

Another thought is that you should replace sprintf with snprintf, which takes a size parameter and will avoid buffer overflows. (I'm tellin ya man, ya gotta look out for them.) You could rewrite the code above to:

#define BUFFER_SIZE 1024

char *buffer = (char*)malloc(BUFFER_SIZE);
int length = snprintf(buffer, BUFFER_SIZE, "%c%d:%d:%s", WSPacket_PlayerDeath, victim, attacker, STRING(weapon));

That way if whatever the string format gets expanded to is greater than BUFFER_SIZE, then the end of the text is truncated. The client getting incomplete data is better than the server crashing.

Also, log the hell out of everything. When you get crashes and need to figure out what happened, they're your only resource. You want to be able to trace what happened up to the crash.

Okay, that's all from me... Good job so far, and good luck!

All good. Looking at https://developer.valvesoftware.com/wiki/String it seems that string_t is just a typedef for char *, so you need to be careful.

Another thought is that you should replace sprintf with snprintf, which takes a size parameter and will avoid buffer overflows. (I'm tellin ya man, ya gotta look out for them.) You could rewrite the code above to:

[code]
#define BUFFER_SIZE 1024

char *buffer = (char*)malloc(BUFFER_SIZE);
int length = snprintf(buffer, BUFFER_SIZE, "%c%d:%d:%s", WSPacket_PlayerDeath, victim, attacker, STRING(weapon));
[/code]

That way if whatever the string format gets expanded to is greater than BUFFER_SIZE, then the end of the text is truncated. The client getting incomplete data is better than the server crashing.

Also, log the hell out of everything. When you get crashes and need to figure out what happened, they're your only resource. You want to be able to trace what happened up to the crash.

Okay, that's all from me... Good job so far, and good luck!
29
#29
1 Frags +

Wasn't aware of sprintf vs snprintf. Thanks for the tips, very appreciated

Wasn't aware of sprintf vs snprintf. Thanks for the tips, very appreciated
30
#30
0 Frags +

Amazing work, man! I'm wondering why you're converting the SourceMod plugin to a VSP?

Edit: More specifically, if the reason is performance, why you're not moving to a SM extension.

Amazing work, man! I'm wondering why you're converting the SourceMod plugin to a VSP?

Edit: More specifically, if the reason is performance, why you're not moving to a SM extension.
1 2
Please sign in through STEAM to post a comment.