Loopic - visual tool for creating CasparCG HTML templates

image

I want the boxes to adjust width,according to the text in my f0 and f1 fields.

Then I also want to mask the lower box, as the in movement starts under the top box, and I don’t want to se it before it under the top box.
I need a mask.

How to acheive that.

Best regards Tue.

Hello, after much experimentation, I realized that content is not value. For understanding, I added a 3rd text field “f3” and after the condition is met I assign it text3.setContent(text2.content) and it is always empty even if I add the “f2” field with the value “qwe” to the preview. I went ahead and assigned text2.setContent("qwe") before the condition. And the miracle happened, the condition worked. But the problem is that I seem to need to track the value of the value that I add to the preview, and not the content that I can assign in the code.

Here is the code that works:

const layer1element = this.findElementByKey("Layer1");
const layer2element = this.findElementByKey("Layer2");
const text2 = this.findElementByKey("f2");
const text3 = this.findElementByKey("f3");
text2.setContent("qwe");
if(text2.content == "" || text2.content == null){
  layer2element.layer.isVisible = false;
  text3.setContent(text2.content);
}else{
  layer1element.layer.isVisible = false;
  text3.setContent(text2.content);
}
this.refreshRender();

But I need something like this:

const layer1element = this.findElementByKey("Layer1");
const layer2element = this.findElementByKey("Layer2");
const text2 = this.findElementByKey("f2");
const text3 = this.findElementByKey("f3");
if(text2.value == "" || text2.value == null){
  layer2element.layer.isVisible = false;
  text3.setContent(text2.value);
}else{
  layer1element.layer.isVisible = false;
  text3.setContent(text2.value);
}
this.refreshRender();

I get this error every time I try to load for example this template
image

Hello, I just can’t figure out if I can use dynamic images in the image loader? Or is this feature not available yet? That is, I assign a key to the image loader and add this key to the preview and enter the path to the image in the value, but nothing comes out.

If you want the background element to be the same size as the text, you need to use Javascript. You can easily find out the real dimensions of the text element with getBoundingClientRect() function for example.
I am working on the new update that will do all of this automatically for you, so to achieve these results, you won’t need any code at all. But we will have to wait a bit for that update to be released.

For masking, I suggest you move the elements you want to mask to another nested composition and then mask that nested composition as you want.

About Google Calendar, please be more clear about what exactly you want to achieve. Note that for old beta projects, you need the old beta app as well (beta.app.loopic.io).

Hi, is this code part of the middleware? If so, which one? It could be possible that updating of the fields is not done in the expected order, therefore text2 content is not set at the time of execution.

The Image loader should be working. Are you testing the template in the browser or CasparCG? And make sure that the image URL is the correct format - instructions here.

i have created braking news template with png sequence animation by giving in the go to frame i am able repeat the animation but my text updating from vb is some time is not synchronizing with template . is there any provision through code , template has to update its current data only when starts animation again but not in the middle of animation . how i can control the template from frontend vb. it may be a basic question or lack of my understanding pl explain me with documents to study to execute it

All the logic regarding the template executing has to be implemented in the HTML template itself and your client application only needs to fire only play, stop, update (or other) commands.
In your case, if you want to restart the animation when the text gets updated, you should write a custom middleware in the template that will call goToAndPlay method on the composition object when there is new data. I recommend you check the documentation and examples.

Hello, I’m testing in a web browser and it doesn’t work there.

No, I paste this code into the web of loopic in action. As you can see in the screenshots, when adding “f2”, “Layer1” is still drawn, but there should be “Layer2”