Loopic - visual tool for creating CasparCG HTML templates

imare · August 2, 2023, 8:44am

Loopic 1.5

Loopic has been updated with 3 new features:

Custom animation easing functions
Border radius
Support for GDD

KnutB · August 8, 2023, 2:46pm

Hi,
how can I make a mask stick to its original position (like in Flash, where the mask was on a different layer)?

When I use a mask on an image loader element and change the image position using the “style” property, the mask is changing as well.

I thought of a nested comp, but I couldn’t figure out how to address the image loader element inside…

Any hints appreciated,

Knut

imare · August 12, 2023, 2:01pm

Hi, masks currently can not be stuck to a specific position. There are 2 workarounds:

animate mask position
create a nested composition (as you already mentioned)

Referencing any element within the nested composition is possible with the findElementByKey method, just make sure to set keys for both the nested Composition element and the Image loader element. Then, you can reference the Image loader element by calling findElementByKey("_nestedCompKey._imageLoaderElementKey").

You can read more about referencing elements within nested compositions on the new docs page: Finding elements.

KnutB · August 22, 2023, 8:06am

Hi,

whenever I try to set the x,y,width,height of an image loader element using the “style” property i.e.:

loopic.useOnUpdate("Team1PicOffsetY", (key, value, next) => {
const el = this.findElementByKey("Team1Pic");
el.style.y.value = Number(value);
});

It throws an error.

When use the same code with an image element, it works??

Knut

imare · August 22, 2023, 2:22pm

It could be that:

Element with key Team1PicOffsetY does not exist
value variable does not contain a number and the result from the Number function is NaN

Generally, the best way to debug is to check the logs first.

KnutB · August 23, 2023, 3:19pm

Okay, in a “top-level” composition the code works - sorry, my fault. The problem (for me) seems to be the nested composition, which I actually want to use (because of the masks).

Could you please show an example of how to set the position inside a nested comp?

Whenever I try to using this code:

loopic.useOnUpdate("T1OffsetX", (key, value, next) => {
const el = this.findElementByKey("_imageComp._image");
      el.style.x.value = Number(value);
});

It throws me this error:

[2023-08-23 16:41:45.024] [error]   html[file://G:\_CASPAR_TEMPLATES\LOOPIC/GFL-SB2023.html] 1920 1080 50.000000 Log: Uncaught TypeError: Cannot read properties of undefined (reading 'layer')

I triple checked that they key of the comp is “_imageComp” and the key of the image element inside this comp is “_image”. I’ve also used different variable names to no avail.

The code is being executed without error, when I comment the “style” instruction and instead set a Text element in the “_imageComp” to the value via this code:

loopic.useOnUpdate("T1OffsetX", (key, value, next) => {
const el = this.findElementByKey("_imageComp._debugStr");
      // el.style.x.value = Number(value);
     el.setContent( value );
});

The funny thing is: when I stop the Template with an AMCP STOP command, I can see that the image DOES move before it is unloaded???

Knut

PS: I’ve just checked, that the Number(value) does not return NaN.

imare · August 24, 2023, 9:17am

Hi, you are correct. Seems like there was a bug that would crash the template when changing the properties of nested composition elements - my apologies
Your code is perfectly fine and with the latest patch released today (1.5.1), it should work without any issues. Let me know how it goes!

KnutB · August 24, 2023, 9:58am

Hi, thanks so much. It’s working now!!

But I still need to call

this.compute();

after setting the style properties which wasn’t necessary, when in the top composition?

imare · August 24, 2023, 10:21am

In theory, that should not be required. But if for some reason your project does not work without it, send me a PM with more project info (ideally if you could send me your project file) and I’ll inspect it.

KnutB · August 29, 2023, 3:13pm

Hi, is it already possible to control the playback of nested compositions by script? Given that the nested composition has got a key named “_Comp”, if I call something like:

nestedComp = this.findElementByKey("_Comp");
nestedComp.goToAndPlay(10);

it throws an error…

Thanks

imare · August 29, 2023, 10:18pm

Yes, you just made a small mistake. Method findElementByKey returns the Composition element and not the composition itself - a reference to the composition is contained under the composition key.

So your code should look something like this:

nestedCompElement = this.findElementByKey("_Comp");
nestedCompElement.composition.goToAndPlay(10);

Note that there are two helpful composition properties:

Also, in case you haven’t already, I highly recommend you to check out the Looping example.

Anders · September 12, 2023, 7:37am

Is there an easy way to scale a Rectangle element after the length of a dynamic Text element?

imare · September 13, 2023, 1:42pm

You can set the Text element’s autoSize property to true (there is a checkbox in the settings panel on the right) and then set the background color of it. Additionally, you can set text padding.

More control over Text elements is coming in the next versions of Loopic.

Kumoon · September 15, 2023, 4:23pm

How do you mask the image loader in Loopic?

KnutB · September 15, 2023, 6:57pm

I use a nested comp with a mask shape:

select your layers you want to mask and select „move to nested comp“.
Name the new comp and select it.

You now should be able to either draw a path or use the rectangle mask shape.

Knut

Anders · September 16, 2023, 3:14pm

Thanks, I didn’t explain what I’m trying to do well enough, so this doesn’t solve it. I want to animate a rectangle(with border radius) in and out. Like the video below.
So I want it to animate to the same size as the dynamic text element.

AMJITHA · September 20, 2023, 12:34pm

Hi,
while playing loopic template in CasperCG sever 2.3.3 no ouput is visible." no parsed xml data ".Why this appears in console.

imare · September 22, 2023, 4:03pm

You’ll need some Javascript to get this working - Loopic currently can not animate the width of auto-sized Text elements.
Once the Text element is updated with the content, you can manually get the text element width using getBoundingClientRect() (you can get the reference to the DOM node of the Text element using findElementByKey method) and then set the width of the background Rectangle element to that value. In this case, you have an animation, which means that you’ll need to change the value of the second keyframe. API for keyframes is not complete yet, so I recommend you check out the Crawler tutorial, which explains how to modify keyframes.

imare · September 22, 2023, 4:07pm

Make sure that the XML you are sending to the CasparCG is valid. If the problem still persists, send me a message with your Loopic project file and I can inspect it.

rakibhossen · September 30, 2023, 6:31pm

Hi, can anyone help me?
I make a Breaking news template using loopic. all everything but masking. In the preview and canvas window masking shows fine, But in CasparCG masking is not working.

Here I have attached the project file.
SCROLL-30-09-23 (issue).loo - Google Drive