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();
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.
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”
I’ve got a small issue, any of my templates that I try to load I am just getting ‘Error occured while loading the project’. I can only get one of my previous templates to load on either the new or old version. Any help would be appreciated
Hi, how old are those project files? Are they from the time of the Loopic beta version?
Yes, I went back to the beta version and they now work… It looks like I will have to spend some time upgrading them to the latest version. Thanks
Hey there, did anybody managed to control width, height, x and y of rectangle for text field as background and could share a code?
nevermind… leaving answer for myself and other Dora’s the explorers…
loopic.useOnUpdate("proc1", (key, value, next) => {
const element = this.findElementByKey("proc1");
const rect = element.domNode.getBoundingClientRect();
const el = this.findElementByKey("procbg1");
el.style.width.value = rect.width;
el.style.height.value = rect.height;
el.style.x.value = rect.left;
el.style.y.value = rect.top;
});
Update:
Noob me… 
That code looks good, but I have just one small note: from Loopic 2.0 you don’t need to use the getBoundingClientRect method - you can directly read width and height properties from the auto-sized Text element’s style object.
@imare how to translate existing programs in loopic old into loopic 2.0?
example loopic old (making scale animation (zoom in)):
const BG = loopic.getElement(“BG”);
// animasi background
anime({
targets: BG.domNode,
opacity: [0, 1],
scale: [0, 0.5],
duration: 500,
easing: ‘linear’,
});
i am still learning the programming structure in loopic 2.0.
thank you in advance…
Hey there, maybe somebody have managed to load “external” image-sequence or implement