Hi @imare , the tool looks really promising and I got much further very quickly than in any other tool. Is it possible to use images or png sequences as masks? I would like to use a png sequence as an animated mask that reveals the underlying text layers.This would be a function I would look for under Filter. If I had this function, I could adapt broadcast templates from a German public broadcaster for CasparCG and would almost certainly use Loopic in the future.
Hi! Right now there is no support for any kind of masking, but I am working on that and on a lot of other features and improvements so I suggest you stay tuned 
4 Likes
Can’t believe I haven’t seen this until now. This is incredible and super easy to use for our youth tv station (everything must be simple to use ).
Also I second the idea of making masking possible. This would give a lot of possibilities for text and shape animation!
Really looking forward to the future development. Is there a trello board or so with planned features?
Glad you like it! Right now there is no public Trello board but if there is interest I will make one.
Hi , first of all ,
Amazing job, Congratulations @imare !!!
I wanna ask for dynamic image how can i load a flag from different country if the Dynamic ID is flag1 but the code is coming is for example ESP or USA. where is the place i can define this method ??
thank you very much.
Thanks!
Here is an example of code you need to add if you want the _flag1 image to load the image automatically by the value it receives (add this code to composition action).
loopic.useOnUpdate("_flag1", (dynamicId, value, next) => {
const imgEl = loopic.getElement(`_flag1`);
const imgSrcEl = imgEl.domNode.querySelector(`img`);
const imgSrc = `./images/${value}.png`;
imgSrcEl.src = imgSrc;
});
To sum up, make an image holder and set its id to _flag1. Then just send the country code with the _flag1 key to the template and the template will try to load the png image with that name from the images folder. Let me know if this works for you - feel free to contact me in PM as well.
5 Likes
working perfectly, thanks
i will ask you more thing if you dont mind , cause i am new developer xDD.
1 Like
First, congratulations on creating a really well thought out and easy to use application. Thank you.
I have a question. My caspar CG server is running at 1080i 59.94FPS (NTSC). How can I set the Loopic FPS to match my CasparCG server’s frame rate? I’m not able to set that specific frame rate.
Any help is appreciated.
1 Like
Deselect all the layers and on the right side, you will see composition settings. There you can change the frame rate.
1 Like
OK. Thanks. I will try that.
hello
i try your html script @imare verry good and easy but how can change image from caspar , i try base64 but i get big line can user in caspar not working with caspar
CG 1-20 ADD 1 "ltwi" 1 "<templateData><componentData id=\"_title\"><data id=\"text\" value=\"NEXT : \"/></componentData><componentData id=\"_imagep\"><data id=\"image\" value=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAB5CAYAAACDSRyFAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAALiIAAC4iAari3ZIAAF17SURBVHhe7X11nFRXtvUZS+a9SebNmzf2zbx5yUw8IQoRgtPQuGtwt+Cuwd2CQ+MECxJcEhICQUMgAYI7beUuXdVCfWvt6mqqu6uhLUlD7h/rVy117z2y97p777PPPsp/9WrBcOOGSr51S9mnTVWO+fOUY8li5Zg3RzkXLVT2D2cq25TJyjF3trKNGaWsE8Yr+8yZyj59mrKOGa1skyYqy5DBytCiuXzyHrbx45R13Bhlmz5VWUePUrbJE+V7vI9t3FjlwPX83T7rQ+VYHKPsc3DvKZN+YR7Y/0nzoIGVzAP6dTZ17zre2K7NMkPLZjt0jeof1tWtbdTVquFLjI5yJlYBKkc5dXVq+XT1aifoG9Y7YGjVYquxfdslxo7txph79WxvGTywgm3UyP+VtqJPVjyPfXMuXqysI4Yr+4zpyjJqpLLh04a2WgYPkrbbJ05QtrGjlRX/s+Jn+4cfynfZH+nzB8OVbeoUGR8HxsYxe5ZyrliuHIsWSD+Cz1ik3OvXK+dHqzBWM5T/yiXlu31L+a5dLTT4r11RKYD/Gubu5k2VjHl0rV+nXJs2KnPf3ir+reIqsUqlDMS/+7YyduoQHHe0KfkGro/FtdcuqeQzp1Ty6ZMq5epF5T95XOnr11Hxpd7JdD3GPBMSypVSidEVlf/4CXXHbFdpsYm49pRyLJyvrCNHKOtYzD/nfcoUyM1okSPP9u3K1Kmjcm/coPxnz6ikw4ciwvfdt8q1bo3MiWPpEuXevlXZp0zCHIzF+I9QtpEfKMvAASJfNvxu7d1LWfv3iwhLOjL9rWcPaZN78ULlwjwS7hjMH+/bs2em7xI2yLWlR3f0F32vXFHGI6FsKaWrFo32HlYp0B//mTMRwf85V3+kINuQo5kq6eCXynfmpPJdPKccCxaiH/2VuX9f0Q32zbXhY8jNR6JDlDPKn3XkcMjbAtwrUaVdv6U8.......
how can fix this ?
Just info if anyone else experiences this issue - @samir_assaad and I discussed the issue privately and concluded that there was a problem with the CasparCG play command - it was wrongly formatted by the client application.
1 Like
I have tried this tool and I am really thrilled. I would like to know if it is possible to crawl or roll with this tool. Thank you very much.
1 Like
Currently, the only way to make a crawler is using custom actions and animejs.
Here is an example project file (you can load it into Loopic). Let me know if you have any questions
hi Imare, thanks for share. Can you help me how to crawl with image and text + image and text
Can you please explain a bit more about what you want to achieve? Do you need one or multiple images? Do they need to be loaded dynamically?
1 Like
Thanks, my mean is I use crawling image + text , image + text ….
I think he is talking about text crawl with image separator
2 Likes
Here is the crawler with the image as a separator between text sections.
How to use it? Send a text with the _text key and in the place where you want your image separator, just put #. Image img.png (which should be in the same folder as the .HTML template) will be automatically loaded instead of the # symbol.
All the new code for this example is in the Composition action, and the delimiter symbol can be changed easily from there.
2 Likes
Thansk so much, I tested and I see, this is for 1 image ( Symbol # is image ) if I need more image ( like multi image ( like # text 1, #2 Text 2 , #3 text 3…))
thansk and regards