Metadata for Templates

At our improvised Open Source Meetup, that actually only was a Caspar Meetup, we briefly discussed a way to add metadata to templates to allow a client to present an adapted user interface. Flash templates used to have a simple XML based way to do just that. HTML templates currently miss this feature.

One of my clients is AVECO, a company that does studio automations. Back in Flash days we used a slightly modified version of that XML and their software extracted the XML from the Flash template. In HTML we simply use a separate XML file with the same content.

The definition in Flash looked like that:

private const customParameterDescription:XML = 	
<parameters>
	<parameter id="Titel" type="string" info="Titel der Grafik" />
	<parameter id="LastUpdated" type="string" info="Stand, Monat & Jahr" />
	<parameter id="Person" type="string" info="Legende: Personen" />
	<parameter id="Value01" type="string" info="Die Werte als | separierter String" />
	<parameter id="Value02" type="string" info="Die Werte als | separierter String" />
	<parameter id="Value03" type="string" info="Die Werte als | separierter String" />
	<parameter id="Value04" type="string" info="Die Werte als | separierter String" />
	<parameter id="Value05" type="string" info="Die Werte als | separierter String" />
</parameters>;

The problem with this XML was, that it only could have 3 attributes, id, type and info. So everything needed to fit into this. While id is the name of the field and type defines the type of the data (and in Flash was by default string), only info can be used for something descriptive, like a tool-typ or the like.

Going from there we then defined a bunch of types and how they will be displayed in the UI (also noted, what the info attribute is for):

type="string"
Standard dynamic field. Displayed as a textbox. Info attribute: Tooltip.

type="integer"
Displayed as a textbox (or up/down box etc.) with input restricted to whole numbers (integers). Info attribute: Tooltip.

type="real"
Displayed as a textbox with input restricted to numbers with a fractional part. Info attribute: Tooltip.

type="image"
File URL. Displayed as browse for file dialog, restricted to image files (PNG, JPEG, Targa etc.). Info attribute: Tooltip.

type="clip"
Name of a video-clip or image file placed in Caspar’s media folder. Comes as relative path to the media folder (with / as separator) Use the CLS command to obtain a list from the server. Info attribute: Tooltip.

type="list"
A choice of predefined values. Displayed as Combo box. Info attribute: semicolon (:wink: separated list of possible values.

type="color"
Hexadecimal color value (like: #61138e) Displayed as color dialog. Info attribute: Tooltip.

type="filename"
File URL. Displayed as browse for file dialog. Info attribute: Tooltip.

That is more or less what I currently have. There are a lot of extensions to this specification, like support for datetime or timespan values, restricting input (for numbers etc.) and the like. As we can add other attributes to the XML or we could use JSON, many things are possible.

The discussion is open.

2 Likes

Thanks Didi!
I’ll be ironing out my JSON-schema-based proposal within the next week, which I hope we can use as a basis for further discussions :slight_smile:

3 Likes

Great. Does nodecg do anything already that supports this?

No, currently not, but that could also be something worth considering. In older versions we had INFO TEMPLATE, that just returned this metadata. Would be nice to bring that back in a more polished version.

1 Like

You can implement this now by adding a “template” subfolder in the data folder with the same file structure as your templates (but instead of htmls would have the ftd files with json data)
Using DATA LIST “TEMPLATE” and DATA RETRIEVE “TEMPLATE/PATH/TO/TEMPLATE/FILE” you can list fetch and even save the parameters for your templates from your custom clients. I even store thumbnails for the templates within the json.

2 Likes

I was also present at the IBC meeting and there we also discussed the current SPX template definition specification and its potential suitability for the task.

A short example of a dropdown ftype:

// Example dropdown template field

  {
      "field": "f1",
      "ftype": "dropdown",
      "title": "Select logo scaling",
      "value": "0.3",
      "items": [
          {
              "text": "Tiny logo",
              "value": "0.3"
          },
          {
              "text": "Huge logo",
              "value": "1.2"
          }
      ]
  }

Happy to discuss this :+1:

You can try SPX online or download it from spx.graphics or see the project on Github.

2 Likes
Privacy Policy   Terms of Service