Override SetData in JavaScript

General
,
3

I have and I’m still trying to explain that in my series Introduction to CasparCG’s HTML producer. I will cover the scripting bits in the next part of the series.

If you don’t feel like parsing the string received via update(), have a look at the https://github.com/indr/webcg-framework and the https://indr.github.io/webcg-adobe-animate-adapter/ (for Adobe Animate CC templates). There you also find running examples that handles both JSON and component XML data, for example this lower third template (code).

The important parts are these:

  1. You reference the script like this <script src="webcg-framework.umd.js"></script> (line 7), and then
  2. You can register to data events and set the text of a document element like this (line 123):
webcg.on('data', function (data) {
  document.querySelector('.line-1').innerHTML = data.f0 ? data.f0.text || data.f0 : ''
  document.querySelector('.line-2').innerHTML = data.f1 ? data.f1.text || data.f1 : ''
})

This handles both JSON and component XML data strings.