How to deal with stacking/stacked graphics

#1
Hey all

So I am working on a project at the moment that requires some onscreen graphics, so I have been playing around with CasparCG for a while now and I really like it!

I am now getting in to the meat of the graphics on this project and some wanted some advice.

Essentially, there are upto 7 players at anyone time involed in the game, and so I want the ability to show a simple player summary with some key data about their score etc etc as a graphic for each player

They will all stack on the left of the screen as per the mockup below.
Graphics Layout.png
Graphics Layout.png (3.3 KiB) Viewed 903 times
Loading them all up is easy enough. My plan was to make 7 HTML templates (in Edge using the E2C library) in the various positions as noted in the example.

Then each graphic will represent a player. The problem being, they wont leave the game in the order they joined/started. So loading them up 1-7 is easy, but what happens if player 4 leaves, then 6 and so on and so forth.

My basic plan just to get something working is to keep a track of which data is in which graphic and then when a player leaves just move the data into the graphics below as relevant.

For example;
If player 5 leaves, then the data from 5 is removed, player 6 data goes into graphic 5, player 7 data goes into graphic 6 and graphic 7 is removed.

However this feels clunky to me and won't leave the best visual impression.

Can anyone recommend an alternative?

Thanks

Anton

Re: How to deal with stacking/stacked graphics

#3
I would only do one template and give it the whole list of players. The individaual players would be objects (MovieClips in Flash, something else in HTML). Then I would show them and, whenever one needes to be kicked out, I would send a command to animate it out. Code would be added to slide the remaining objects down with a nice animation.

You could also do a similar thing by loading a template for only one player multiple times. But then your client programm must keep track of which ones need to move out or down. Less complex coding in the template, but more complex client.
Didi Kunz
CasparCG Client-Programmer, Template Maker & Live CG-Operator
Media Support, CH-5722 Gränichen, Switzerland http://mediasupport.ch/
Problems? Guide to posting Bug reports & Feature requests

Re: How to deal with stacking/stacked graphics

#6
The template works as a caroussel, where you "play" the first message, and then "update" the template with more messages. Each update generates a new div element and animates the rest. When "n" numbers of elements are already showing on screen, the last just fades off.
This is something that you can program with basic html-javascript-css knowledge.

The animations are based on CSS, using libraries like animate.css (https://daneden.github.io/animate.css/) or magictime (https://minimamente.com/example/magic_animations/). You can also use javascript libraries like GSAP.

The key point is understanding how CasparCG sends the commands to the HTML template, and building functions that will react according to the input commands.

It works more or less like this:
1) Play command:
CG [video_channel:int]{-[layer:int]|-0}
ADD [flash_layer:uint] [template:string] [play-on-load:0,1] [data]

Example: CG 1 ADD 10 myshow/mytemplate/INDEX 1 "<templateData>[...]</templateData>"

2) CasparCG clears the layer, then invokes the function update(string templateData) and then the function play(); (of the file myshow/mytemplate/INDEX.html)

3) Update command:
CG [video_channel:int]{-[layer:int]|-0} UPDATE [flash_layer:uint] [data:string]

CG 1-10 UPDATE "<templateData>[...]</templateData>"

CasparCG invokes the function update(string templateData).

Update command can be launched any number of times.

4) STOP 1-10
CasparCG invokes the function stop();