Some quick question regarding templates within casparcg

Hi all. With my needs for overlays drastically increasing I’m looking into using casparcg to do my live overlays fed from a json/sql/xml file. I found some helpful guides and getting the necessary dependencies spinned up and into testing/development. I’m by no means a programmer but will struggle my way through. In terms of a template would I be able to have it contain multiple different graphics packs and just transition in and out certain elements with some custom amcp commands via companion for example?

If I wanted to preview stuff before sending them out can I have the preview bus running and preview a template with variables or something to only show the specific graphics I want from the template?

Thanks in advance for any advice/direction.

I have no clue, what you try to ask. To help you, it would make sense, that you give a bit more informations. Sometimes a few graphics help a lot.

A preview is mostly done by adding a separate channel to Caspar and teach the client to output to that channel, when something like a “Preview” button is hit. As most of today’s graphics have animated in’s and out’s using the same channel is not a good workflow.

Hi didi. I haven’t gotten into developing the templates yet so can’t provide images as of yet. Looking for some insight before I spend the time building the different ways I want to visualise data.

Do I do a template for each view or do I combine them into one template and just hide unhide what I need?

I understand having a secondary preview channel out of a decklink card so I’m guessing my question is more down to the custom amcp commands. Would I be able to send a command to ccg to preview a template with certain variables relatively easily?

I see, so you are also the designer of the graphics. I usually only builds templates out of existing designs.

I would do a template for each different view, as that is straight forward, while combining stuff is confusing. But it depends on how you control the templates from your client. Do you always send the data along from the client or is there some mechanism to get the data from somewhere else?

The beauty off casparcg is that you can be flexible in the way you approach this.
If your setup is in away that you use one element at a time (or one composition of elements)
I would make different templates to make maintenance and control easier.

On the other hand if you tend to make different combinations with lots of element’s moving in and out to form every composition you want, it could be benificial to put them in one template (also performance wise). I must say i do both depending on the production needs.

You also mentioned different GFX packs. With clever design you can put all functionality in one “base” template and style the GFX pack’s with different css files. In this way you only have to do the hard part once


I like the idea of styling it with css files (no idea where to begin doing it but I’ll learn).
Came across nodecg as well that looks really interesting so playing around with that. Looking at a fair chunk of data that will be streamed into the template in real time. Scared I’m trying to do too much with casparcg with my programming skills (or lack thereof) on hand.

Reverting back here after some trial and errors. Got some basic html stuff playing nicely, able to change with the key and value setting in the caspar client. Next on my list is to build overlays that just constantly update their values based on json/sql/csv (I’ve got either available so whatever would be more efficient and/or supported in ccg)
Is that something I can do with the caspar client or do I need a different one or something custom? I would also like to have some animations for the templates based on data changes/variables? Is this something I can do natively and relatively easily?

What I usually do is to program the template with everything working as if it’s been shown on screen. Then you do in/out animations to show and hide individual elements and run them with functions: showLowerThird() / hideLowerThird() then in the default client you can easily add them to the Invoke field:

Then you send the commands using the F7 key.

To preview the data, the only option you have here is to play a copy of the template in another channel, I usually add an option to the templates to show a “preview mode” (it strips the animations and shows instantly the final layout with the actual data). If the elements on your templates don’t overlap or cover each other, you can even show everything on screen in the preview so you know in advance how each element will look when you show it.
Bear in mind that if you update the data in real time, things may change when you have the elements on screen.

In JavaScript JSON is the easiest to handle. It is always a bit tricky to make the templates query for data on it’s own. I usually build my stuff the other way around, so that the data is sent to the templates, via UPDATE commands. But to be able to make this work, you must write some software, that does these updates. The good thing is, that you only send data, when they have changed, and not constantly query for updates, what you probably need to do, when you let the template updates itself. But all of this involves quite a bit of programming.