It is currently 27 Mar 2017, 09:28



Scrolling XML data

Videos, graphics, Flash templates – how to create and play them using CasparCG

Moderators: Macey, Jonas Hummelstrand, didikunz

Scrolling XML data

Postby jfou87 » 11 Aug 2016, 12:02

Hello everybody.

I'm new with caspar CG. I'm working for autosport on race tracks in Belgium. Last years we used cheapest raspberry Pi to display live results on the show. In fact there was an PHP with Json page than we add in the ATEM DSK and crop to fit the shape. You can see the page here www.cmgtv.be/dsk
The php page parses an XML file provided par the time keeper, who actualise the page every minute (or less).

Now, i want to develop the graphic part of our livestream. And adding more informations, more dynamics etc ...
For the future, i'll try to develop our own client with livecode to display flags, name of the pilot etc ...

For our next event at the end of august, i simply want to use the original caspar client. And the only thing i need is the scrolling texte with realtime result (same thing than the webpage showed).

How can i do that ? I already used Flash longtime ago (version 5) but not so far in the action script.
Is flash and actions script will be the best way to do my scroll ? (with different color for the position, team) ?
Or will be a good idea to keep my php/json code (provided by a programer friend) and use it in a HTML template ?

I already designed a new banner with in an out animation to place the scroll.

Here's the PHP page (and also JS scripts) and the XML file provided by the time keeper for example.
https://www.dropbox.com/sh/317pxv24eit3 ... 1ipBa?dl=0

Any good idea ? :-)

Thank you for your precious help.
jfou87
 
Posts: 6
Joined: 02 Aug 2016, 11:35

Re: Scrolling XML data

Postby mcdikki » 11 Aug 2016, 12:21

As you already have the html page, I would adept it to the workflow of casparCG. This should be way less work.

Cheers
mcdikki
sublan.tv - Wir teilen Begeisterung
User avatar
mcdikki
 
Posts: 1051
Joined: 11 Dec 2012, 15:48
Location: Germany

Re: Scrolling XML data

Postby jfou87 » 11 Aug 2016, 12:52

Thanks for your answer mcdikki,

You confirm what i believe. But now, i need to know how adapt that code to Caspar.
I know that Caspar can run Html page, but i want to animate the graphic banner. Is there a way to play a PNG sequence inside an HTML page ? (Html 5 ?) Do you know a way, or tutorial who explain that ?
jfou87
 
Posts: 6
Joined: 02 Aug 2016, 11:35

Re: Scrolling XML data

Postby mcdikki » 11 Aug 2016, 14:20

You can use html in two ways with ccg.
1. Use it as normal webpage (So, this should work out of the box with your current template used with the pi.)
2. Use it as template (recommended)

If you want it as template, you should have a look at viewtopic.php?f=5&t=3028
This is an easy way to inject the template functions from the flash templates.

Mainly, you need to define 4 js functions inside your template:
1. play()
2. next()
3. update()
4. stop()

They will be called from the ccg client. Depending on what you want to do and which client you want to use, it may be useful to implement your own control logic. But if you want to use the default client, I would recommend to use these functions.

One crucial point with html templates and animations is to use the window.RequestionAnimationFrame(callback) function. Every time ccg want's to render a new frame, it calls the callback function which should render (animate) the next frame. Don't use css3 animation or such as they will not run smooth since their fps is unpredictable and won't match ccgs fps.

So, say you want to move a png, you would change the position values of the <img>-Object inside the callback each time its called.
I'm sure there are tween libs or something to make this easier.

cheers
mcdikki
sublan.tv - Wir teilen Begeisterung
User avatar
mcdikki
 
Posts: 1051
Joined: 11 Dec 2012, 15:48
Location: Germany

Re: Scrolling XML data

Postby jfou87 » 11 Aug 2016, 14:23

I'll take a look at this tread, and try to do my own template.
So i dont want to move png. I create a banner in Apple Motion for the background of the roll. This banner has an animation for in, and for out. I can export the animation in png sequence, but is it possible to play this sequence "as a video" inside the template ?
jfou87
 
Posts: 6
Joined: 02 Aug 2016, 11:35

Re: Scrolling XML data

Postby mcdikki » 11 Aug 2016, 16:01

I won't use a png sequence in a html template. Instead, I would render a video file and play it on an other layer inside ccg. You can trigger this from inside the template via an acmp connection or with the client.

cheers
mcdikki
sublan.tv - Wir teilen Begeisterung
User avatar
mcdikki
 
Posts: 1051
Joined: 11 Dec 2012, 15:48
Location: Germany

Re: Scrolling XML data

Postby jfou87 » 17 Aug 2016, 17:00

Hello !

I had a lot of success with the use of my previous PHP page. Everything works fine with Caspar.
But is there a way to use the "transition settings" ? When i select Mix and the duration, nothing work and the html page come and gone in cut. May have you an idea ?

Best regards
JFou
jfou87
 
Posts: 6
Joined: 02 Aug 2016, 11:35

Scrolling XML data

Postby Margaretdione » 17 Mar 2017, 12:40

I am thankful to the Thanks of bblincoe who have give a such great advice. I am worried about my project regarding a scrolling a data. but you are excellent. I think you have interest person in a animation. It would be helpful for in my home-project. you have preset a best concept of how to scroll a XML data.
User avatar
Margaretdione
 
Posts: 1
Joined: 30 Jan 2017, 11:37
Location: Poland

Re: Scrolling XML data

Postby didikunz » 17 Mar 2017, 13:43

jfou87 wrote:I had a lot of success with the use of my previous PHP page. Everything works fine with Caspar.
But is there a way to use the "transition settings" ? When i select Mix and the duration, nothing work and the html page come and gone in cut. May have you an idea ?


You can use the MIXER OPACiTY coomad to animate the videolayer where your html-page is running on, or implement a way to fade in or out inside your html.
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
User avatar
didikunz
 
Posts: 3398
Joined: 10 May 2010, 09:08
Location: Aarau, Switzerland


Return to Content

Who is online

Users browsing this forum: No registered users and 2 guests