CasparCG Templates with Flask

General
,
1

I have a template that I built with Python using Flask. It works exactly as I need on my localhost, but I am having a lot of issues converting this to a casparCG template. Specifically my dynamic variables in flash use the double curly brackets ie {{ Name }}.
I am trying to do CG Add link this:
CG 1-10 ADD 1 “LowerThird” 1-1 “Name=Bob”

I know I can rebuilt the template with something else, but I spent considerable time on this complex template and am hoping I can use these Dynamic variables with Flask to easily convert my template for Caspar.

Anyone have any experience with Flask?

2

I’m not a Flask user, so I am unable to offer direct support. However a couple of phrases in your post raise a question. You say your Python/Flask works in localhost. Does this imply you are accessing an address similar to http://127.0.0.1:5000/myHomePage?

Assuming the answer is “Yes” the following hopefully provides an explaination of the potential issues.

CasparCG HTML templates are normally files stored in a folder on the server disk. Part of the server config defines the path to the template store and the data store.

<paths>
  ...
  <data-path>M:/ccg/data/</data-path>
  <template-path>M:/ccg/templates/</template-path>
  ...
</paths>

When you use a CG ADD command referencing Lower-Third the server tries to locate file M:/ccg/templates/Lower-Third.html to load into the html producer.

The format of data included with the CG ADD or CG UPDATE commands has to be one of three formats:

  • An XML formatted set of named key and associated value

  • A JSON formatted set of named key and associated values

  • The name of a file in a folder path defined in the server config tag and that contains the XML or JSON key+value data.

The XML is a string of the format (note no escape characters for quote or similar shown here):

<templateData> <componentData id="Name"><data id="text" value="John Doe"/></componentData></templateData>

The Stringified JSON equivalent, again without escapes for quote characters, is:

{"Name":"John Doe","Designator":"Manager"}

An HTML template requires several defined javascript functions that the template producer calls when the server software gets CG ADD and CG UPDATE commands. The function names are:
play() - initiates input animation
update(myDataString) - stores instance data into the displays
stop() - initiates output animation
next() - advances the timeline to next animation start

The update function unpicks the key+value pairs from the input string and stores the values into fields in the html DOM. If the key name is Name the commonly used DOM segment to receive the data will be a item that has an id such as:

<div id="Name" class="NameProperty">value ges here</div>

It does not have to be a <div> but it must have an id= field.

But CasparCG can display HTML pages from a server using a PLAY command such as:

play 1-10 [HTML] "http://www.google.com"

If you use a local webservice, such as Flask can operate, you can do data updates through a suitably directed GET or POST pointed at the correct route on your server.

If you are using the SVT client there are widgets that allow you to enter the key names and associated values as well as the http address that is the target for the data.