Send other values than text (e.g. colors)

FAQ
1

Hi there,

I’m creating a scoreboard frontend in Visual Basic and it works fine. I just moved from Flash to HTML5.

Since a long time I tried not only to send text data to the template but also values for other than DIV-tags.
For example I would like to send colors e.g. for the hometeam background and the guestteam background.
Something like this

<table style=“background-color: {f1};”>

Is this possible? Or is there a workaround like setting the value as a var value like “var c = {f0};”
I thought I’ve already seen an application working with CasparCG and they changed nearly everything via the programs settings.

My Tools:

  • CasparObjects dll
  • Visual Code with REACT and Caspar extension for editing the templates

I have done the setup like nxtedition describes on Github. As I said, everything is working fine.

Maybe someone can help.

2

Hi!
if I understand your post correctly, it is actually quite easy. You just have to assign an id to element you want to change, and then, you can modify it via js.
The following thing is an example where the div which background color we want to change has id “changeMyBackgruond” and json parameter we send is “bgcolor” (the json could be e.g. ‘{“bgcolor”:“rgba(17,17,17,0.5)”}’)
In body section:
<div id="changeMyBackground">This text's background can be changed</div>
In script section:

function update(jsonString) {
  var jsonObj = JSON.parse(jsonString);
  if (jsonObj['bgcolor'] != null) {
    document.getElementById("changeMyBackground").style.backgroundColor = jsonObj['bgcolor'];
  }
}

BTW it is called DOM style, and you can find much more about it on https://www.w3schools.com/jsref/dom_obj_style.asp

3

As Bohoaush says - use JSON for data.

I made for update texts, image paths, css properties and classes a simple universal function that uses jQuery:

 function dataScalarUpdate() {
    //Update texts, images, css properties and classes along incoming JSON data 
    console.log('dataScalarUpdate');
    for (var key in jsonData['scalar']) {
      var obj = jsonData['scalar'][key];
      switch (obj.par) {
        case "text": //Value for text field
          $(obj.id).html(obj.val);
          break;
        case "img": //Path to image
           $(obj.id).attr({"src" : obj.val.replace('.tga','.png'), 'onerror' : "this.style.display='none'", 'style' : 'display:flex'});
          break;
        case "class": //Add class and remove all existing classes
          $(obj.id).attr('class', obj.val);
          break;
        case "+class": //Add class
          if (obj.val != '') {$(obj.id).addClass(obj.val)};
          break;
        default: //Any css property e.g. background-color, height etc...
           $(obj.id).css(obj.par,obj.val);
      }
    }
  }

I will assign an ID to each object whose property I will change in html. I can also assign a class to a group of objects whose properties I will change at once (For instance background color of divs for home or away etc.)
My data object then looks like this:

var jsonData = //This string comes from CG ADD command - data
{"scalar":[
    {"id":":root","par":"--color-home","val":"235, 235, 235 "},
    {"id":":root","par":"--color-away","val":"4, 60, 220"},
    
    {"id":"#home-short","par":"text","val":"CAN"}, 
    {"id":"#away-short","par":"text","val":"SWE"}, 
    {"id":"#home-flag","par":"img","val":"../../Images/Flags/CAN.png"}, 
    {"id":"#away-flag","par":"img","val":"../../Images/Flags/SWE.png"}, 
   
    {"id":"#home-score","par":"text","val":"4"}, 
    {"id":"#away-score","par":"text","val":"1"}, 
    {"id":"#main-time","par":"text","val":"19:48"}, 
    {"id":"#period","par":"text","val":"3rd"}, 
 ]}

Using this simple mechanism I can change any property of any object in any html file which calls the dataScalarUpdate() function from update function.

4

ok, guys.
Thank you for your quick help.
I was on the right way (with getElementByID) but then all the JSON stuff was missing (I have absolutely no experience with that) and so I was lost is space.

Now it’s working. You are my heroes.

But I spend nearly all day to get it run.
The problem ist, when using a new technics followed by new tools and new languages, one have so many points where it could be faulty, that it takes a long time to get something run.

@Bohoaush: currently I will use your solution

@Jarda: great job. I will have a closer look at it. First of all I’m happy it’s working

For all who are interested in the final solution. This is for Visual Code and REACT:

import React from 'react';
import ReactDOM from "react-dom";  

.... React.Component {

update(jsonString) {
    var jsonObj = JSON.parse(jsonString);
    if (jsonObj['bgcolor'] != null) {
     document.getElementById("changeMyBackground").style.backgroundColor =  jsonObj['bgcolor'];
    }
  };

render() {
    const { bgcolor } = this.props.data
    this.update(bgcolor);

return (<div>....
<div id="changeMyBackground" >Some text needs a new background color</div>  
</div>

And in Visual Basic I JSON.SerializeObject the string to get a well formated JSON string. The main things to do:

Dim tStyle As New TemplateStyle
         tStyle.bgcolor = "rgba(17, 17, 17, 0.5)"
Dim homecolor = JsonConvert.SerializeObject(tStyle)

Dim tmpl As Template = New Template
tmpl.Fields.Add(New TemplateField("bgcolor", homecolor, True, False))

 _Caspar.CG_Add(YourCasparChannel, YourLayer, YourTemplate, tmpl, True)
......
.....
Public Class TemplateStyle
    Public Property bgcolor() As String
        Get
            Return m_bgcolor
        End Get
        Set
            m_bgcolor = Value
        End Set
    End Property
    Private m_bgcolor As String
End Class

Looks so easy.:smile: