Loopic - visual tool for creating CasparCG HTML templates

imare · September 2, 2021, 8:38am

Alright, so it’s finally time to show you the project I have been working on this year. Dear CasparCG community, I am proud to announce the release of the Loopic - the tool for creating CasparCG HTML templates!

This year was challenging for all template developers in the community. Flash has been completely removed which caused a lot of stress for all of us. HTML templates were the only way to go, but the workflow was still very painful. To go with bodymovin/Lottie or no, to go with custom JS libraries or no, to go with animated SVGs, canvas, or even pure CSS… Well, you should not worry about this anymore.

This is where Loopic comes - it is the first WYSIWYG HTML templates builder with CasparCG support out of the box. You can now create graphics directly from your web browser and export them as a single-file CasparCG graphic!
No more plugins, no special programming knowledge required, no installation, very easy to use and fast - just a super brief overview of the app.

Loopic has already been used in production and it performed great. It is the first solution that makes it super easy to import existing image sequence background and add text, custom fonts, custom Javascript code, image loaders, and other dynamic elements on top of it - all in HTML!

Due to its complexity, Loopic is officially under the BETA version. If you notice any bugs, or if you have any feature requests - you can find the feedback link at the bottom of the Loopic app. 80% of the features template developers need are already implemented in Loopic, but I am looking forward to making it 100% very soon, as well as on improving user experience and existing features.

I work as a template developer and for me, the Flash era is finally completely over - Loopic is the way to go. Check it out at https://www.loopic.io/ and let me know what you think!

To make the learning curve of Loopic as easy as possible, there are tutorials and API documentation. You can check it all on the docs page - especially this one for the basic CasparCG template.
I highly recommend you to go through the tutorials section, and also to check the basic template project demo from the quick start popup - it will take you few minutes, but you will get a good understanding of how it works.

stemcc · September 2, 2021, 5:24pm

This looks really cool!

Do you have a sense of what the pricing range will be once it’s out of beta?

Can’t wait to try it out

Maurice78 · September 2, 2021, 5:51pm

On firtst glance very nice !
Interface is really intuitive

agatin · September 2, 2021, 6:25pm

While in BETA, Loopic is 100% FREE.

As the application exists BETA mode, Loopic will be available in both free and paid plans.

Can you be more specific about paid plans?

Thx

lzx1995 · September 3, 2021, 1:52am

Wow, it’s fantastic！the UI design is so beautiful. great job!

didikunz · September 3, 2021, 7:04am

HI Ivan, I had just a quick look and also read parts of the documentation. It looks very promising. One thing that is kind of a showstopper for me is the online nature of it. Before COVID I was sometimes out for productions and there it happened quite often, that I had to change something on a template, before we were fully up and running with the installation and so internet access was not always available. Here in Switzerland the coverage with mobile data is quite good, so it would be possible to get some connection somehow, but just go to Germany (manly in the eastern part) and you are lost So to me to make sense Loopic would need to work in a standalone mode (as an Electron app for instance), so that it could be fired up like any other installed tool. Is that an option you consider?

And a little bit of an idea what it will cost, would also be a great help. Because it does not pay off for me to invest time into learning something, when I do not know if I ever will be able to use it in the long run.

imare · September 3, 2021, 9:27am

@stemcc, @agatin, @didikunz - paid plans are not defined 100% yet, but the goal is to keep it very cost effective. The idea is for the price to be in the 50-80 euros price range per month. Please note that this is just an approximation right now.

Free plan will be there for users who do graphics once in a while, and paid plans will be for all advance users who work with templates everyday.

imare · September 3, 2021, 9:37am

Hi Didi, I am aware of the issue and some kind of solution will be implemented. As you said, Electron is one possible solution, and another one is PWA. Which one will I choose - not sure yet, but it must be able to work offline for sure.

ThommiTechnik · September 5, 2021, 7:54am

Real nice Remembers me a lot of Tumults’ Hype So this would be a great alternative for my colleagues on Windows.

ctc · September 6, 2021, 9:33am

That’s amazing!!! Is it possible the image sequence to be dynamic?. For the animated logo in example.

imare · September 6, 2021, 10:23am

I am not sure exactly what do you mean, can you please explain a bit more?
Right now you can import any image sequence and it will play as a video. You can animate size, position, effects and so on.

ctc · September 6, 2021, 11:10am

For dynamic image can change the path to image in client and image will replace with another one. Is it possible the same with image sequence? To change the path to folder in example in Dynamic ID field in client and replace the team logo with another one. Like image loader properties but for image sequence.

imare · September 6, 2021, 12:04pm

Thanks for the explanation. That is not supported out of the box like the image loader, but it can be implemented with custom Javascript code.
I will add this idea to the to-do list and will see what is the best way to make this feature work similar to the image loader.

SteveElk · September 16, 2021, 9:01am

Just trying it out and I cant seem to trigger the animation on from my standard (albeit bespoke) client. Are there special commands needed to do this? Trying your example file, it loads the backing image but not the name bug.

imare · September 16, 2021, 9:56am

Make sure that you are sending some template data to it.
This current version (0.2.2) requires some template data, but the next version I’m working on won’t require it.
If it’s still not working, feel free to copy CasparCG log here.

SteveElk · September 16, 2021, 10:11am

Thanks.
I’ve tried using the Caspar Client incase mine was doing anything funky. Still the same. Log data here

[2021-09-16 11:08:11.484] [info]    ############################################################################
[2021-09-16 11:08:11.485] [info]    CasparCG Server is distributed by the Swedish Broadcasting Corporation (SVT)
[2021-09-16 11:08:11.485] [info]    under the GNU General Public License GPLv3 or higher.
[2021-09-16 11:08:11.485] [info]    Please see LICENSE.TXT for details.
[2021-09-16 11:08:11.485] [info]    http://www.casparcg.com/
[2021-09-16 11:08:11.485] [info]    ############################################################################
[2021-09-16 11:08:11.485] [info]    Starting CasparCG Video and Graphics Playout Server 2.3.0 f4879b8e Dev
[2021-09-16 11:08:12.433] [info]    Initializing OpenGL Device.
[2021-09-16 11:08:12.437] [info]    Initialized OpenGL 4.5.13596 Core Profile Context 20.10.35.02 27.20.1034.6 ATI Technologies Inc.
[2021-09-16 11:08:12.442] [info]    Initialized ffmpeg module.
[2021-09-16 11:08:12.442] [info]    Initialized oal module.
[2021-09-16 11:08:12.442] [info]    Initialized decklink module.
[2021-09-16 11:08:12.442] [info]    Initialized screen module.
[2021-09-16 11:08:12.442] [info]    Initialized newtek module.
[2021-09-16 11:08:12.542] [info]    Initialized html module.
[2021-09-16 11:08:12.542] [warning] Flash is no longer a recommended way of creating dynamic templates. Adobe have declared flash end-of-life at the end of 2020, and we cannot guarantee it will continue to work in any version after that time.
[2021-09-16 11:08:12.542] [warning] All support for flash templates will be removed in a future release of CasparCG
[2021-09-16 11:08:12.623] [info]    Initialized flash module.
[2021-09-16 11:08:12.626] [info]    Initialized bluefish module.
[2021-09-16 11:08:12.626] [info]    Initialized image module.
[2021-09-16 11:08:12.626] [info]    "C:/Caspar2_3\casparcg.config":
[2021-09-16 11:08:12.626] [info]    -----------------------------------------
[2021-09-16 11:08:12.626] [info]    <?xml version="1.0" encoding="utf-8"?>
[2021-09-16 11:08:12.626] [info]    <configuration>
[2021-09-16 11:08:12.626] [info]       <paths>
[2021-09-16 11:08:12.626] [info]          <media-path>media/Loopic/</media-path>
[2021-09-16 11:08:12.626] [info]          <log-path>log/</log-path>
[2021-09-16 11:08:12.626] [info]          <data-path>data/</data-path>
[2021-09-16 11:08:12.626] [info]          <template-path>template/Loopic/</template-path>
[2021-09-16 11:08:12.626] [info]       </paths>
[2021-09-16 11:08:12.626] [info]       <lock-clear-phrase>secret</lock-clear-phrase>
[2021-09-16 11:08:12.626] [info]       <flash>
[2021-09-16 11:08:12.626] [info]          <enabled>true</enabled>
[2021-09-16 11:08:12.626] [info]          <buffer-depth>auto</buffer-depth>
[2021-09-16 11:08:12.626] [info]       </flash>
[2021-09-16 11:08:12.626] [info]       <channels>
[2021-09-16 11:08:12.626] [info]          <channel>
[2021-09-16 11:08:12.626] [info]             <video-mode>720p5000</video-mode>
[2021-09-16 11:08:12.626] [info]             <consumers>
[2021-09-16 11:08:12.626] [info]                <screen/>
[2021-09-16 11:08:12.626] [info]                <system-audio/>
[2021-09-16 11:08:12.626] [info]             </consumers>
[2021-09-16 11:08:12.626] [info]          </channel>
[2021-09-16 11:08:12.626] [info]          <channel>
[2021-09-16 11:08:12.626] [info]             <video-mode>720p5000</video-mode>
[2021-09-16 11:08:12.626] [info]             <consumers>
[2021-09-16 11:08:12.626] [info]                <screen/>
[2021-09-16 11:08:12.626] [info]                <system-audio/>
[2021-09-16 11:08:12.626] [info]             </consumers>
[2021-09-16 11:08:12.626] [info]          </channel>
[2021-09-16 11:08:12.626] [info]       </channels>
[2021-09-16 11:08:12.626] [info]       <controllers>
[2021-09-16 11:08:12.626] [info]          <tcp>
[2021-09-16 11:08:12.626] [info]             <port>5250</port>
[2021-09-16 11:08:12.626] [info]             <protocol>AMCP</protocol>
[2021-09-16 11:08:12.626] [info]          </tcp>
[2021-09-16 11:08:12.626] [info]       </controllers>
[2021-09-16 11:08:12.626] [info]       <amcp>
[2021-09-16 11:08:12.626] [info]          <media-server>
[2021-09-16 11:08:12.626] [info]             <host>localhost</host>
[2021-09-16 11:08:12.626] [info]             <port>8000</port>
[2021-09-16 11:08:12.626] [info]          </media-server>
[2021-09-16 11:08:12.626] [info]       </amcp>
[2021-09-16 11:08:12.626] [info]    </configuration>
[2021-09-16 11:08:12.626] [info]    -----------------------------------------
[2021-09-16 11:08:12.630] [info]    Initialized OpenGL Accelerated GPU Image Mixer for channel 1
[2021-09-16 11:08:12.631] [info]    video_channel[1|720p5000] Successfully Initialized.
[2021-09-16 11:08:12.631] [info]    Initialized OpenGL Accelerated GPU Image Mixer for channel 2
[2021-09-16 11:08:12.632] [info]    video_channel[2|720p5000] Successfully Initialized.
[2021-09-16 11:08:12.634] [info]    Screen consumer [1|720p5000] Initialized.
[2021-09-16 11:08:13.107] [info]    oal[1|720p5000] Initialized.
[2021-09-16 11:08:13.129] [info]    Screen consumer [2|720p5000] Initialized.
[2021-09-16 11:08:13.130] [info]    oal[2|720p5000] Initialized.
[2021-09-16 11:08:13.130] [info]    Initialized channels.
[2021-09-16 11:08:13.133] [info]    Initialized controllers.
[2021-09-16 11:08:13.133] [info]    Initialized osc.
[2021-09-16 11:08:16.430] [info]    async_event_server[:5250] Accepted connection from 127.0.0.1 (1 connections).
[2021-09-16 11:08:16.593] [info]    Received message from 127.0.0.1: VERSION SERVER\r\n
[2021-09-16 11:08:16.593] [info]    Sent message to 127.0.0.1:201 VERSION OK\r\n2.3.0 f4879b8e Dev\r\n
[2021-09-16 11:08:16.594] [info]    Received message from 127.0.0.1: INFO\r\n
[2021-09-16 11:08:16.595] [info]    Sent message to 127.0.0.1:200 INFO OK\r\n1 720p5000 PLAYING\r\n2 720p5000 PLAYING\r\n\r\n
[2021-09-16 11:08:16.596] [info]    Received message from 127.0.0.1: CLS\r\n
[2021-09-16 11:08:16.597] [info]    Received message from 127.0.0.1: TLS\r\n
[2021-09-16 11:08:16.598] [info]    Received message from 127.0.0.1: DATA LIST\r\n
[2021-09-16 11:08:16.599] [info]    Received message from 127.0.0.1: THUMBNAIL LIST\r\n
[2021-09-16 11:08:16.641] [info]    Sent more than 512 bytes to 127.0.0.1
[2021-09-16 11:08:16.650] [info]    Sent message to 127.0.0.1:200 TLS OK\r\nNAMEID\r\nLOWER-THIRD\r\n\r\n
[2021-09-16 11:08:16.651] [info]    Sent message to 127.0.0.1:200 DATA LIST OK\r\n\r\n
[2021-09-16 11:08:16.687] [info]    Sent more than 512 bytes to 127.0.0.1
[2021-09-16 11:08:53.719] [info]    Received message from 127.0.0.1: CG 1-20 NEXT 1\r\n
[2021-09-16 11:08:53.725] [info]    Sent message to 127.0.0.1:403 CG NEXT FAILED\r\n
[2021-09-16 11:08:57.937] [info]    Received message from 127.0.0.1: CG 1-20 ADD 1 "LOWER-THIRD" 1 "<templateData><componentData id=\"_title\"><data id=\"text\" value=\"TITLE HERE\"/></componentData><componentData id=\"_subtitle\"><data id=\"text\" value=\"Subtitle Here\"/></componentData></templateData>"\r\n
[2021-09-16 11:08:57.999] [info]    D3D11: Selected adapter: AMD Radeon (TM) R7 M370
[2021-09-16 11:08:57.999] [info]    D3D11: Selected feature level: 45312
[2021-09-16 11:08:58.000] [info]    Sent message to 127.0.0.1:202 CG OK\r\n
[2021-09-16 11:09:06.571] [info]    Received message from 127.0.0.1: CG 1-20 UPDATE 1 "<templateData><componentData id=\"_title\"><data id=\"text\" value=\"TITLE HERE\"/></componentData><componentData id=\"_subtitle\"><data id=\"text\" value=\"Subtitle Here\"/></componentData></templateData>"\r\n
[2021-09-16 11:09:06.571] [info]    Sent message to 127.0.0.1:202 CG OK\r\n
[2021-09-16 11:09:19.081] [info]    Received message from 127.0.0.1: CG 1-20 STOP 1\r\n
[2021-09-16 11:09:19.081] [info]    Sent message to 127.0.0.1:202 CG OK\r\n
[2021-09-16 11:09:19.400] [info]    html[file://C:\Caspar2_3\template/Loopic/LOWER-THIRD.html] 1280 720 50.000000 Log: Graphic destroyed
[2021-09-16 11:09:21.106] [info]    Received message from 127.0.0.1: CG 1-20 ADD 1 "LOWER-THIRD" 1 "{\"_title\":\"TITLE HERE\",\"_subtitle\":\"Subtitle Here\"}"\r\n
[2021-09-16 11:09:21.109] [info]    Sent message to 127.0.0.1:202 CG OK\r\n
[2021-09-16 11:09:21.117] [info]    html[file://C:\Caspar2_3\template/Loopic/LOWER-THIRD.html] Destroyed.
[2021-09-16 11:09:21.321] [error]   html[file://C:\Caspar2_3\template/Loopic/LOWER-THIRD.html] 1280 720 50.000000 Log: Uncaught TypeError: Cannot read property 'componentData' of undefined
[2021-09-16 11:09:26.474] [info]    Received message from 127.0.0.1: CG 1-20 NEXT 1\r\n
[2021-09-16 11:09:26.475] [info]    Sent message to 127.0.0.1:202 CG OK\r\n
[2021-09-16 11:09:32.953] [info]    Received message from 127.0.0.1: CG 1-20 STOP 1\r\n
[2021-09-16 11:09:32.953] [info]    Sent message to 127.0.0.1:202 CG OK\r\n
[2021-09-16 11:09:33.259] [info]    html[file://C:\Caspar2_3\template/Loopic/LOWER-THIRD.html] 1280 720 50.000000 Log: Graphic destroyed

imare · September 16, 2021, 10:26am

Alright, I two things to notice here:

Resolution - this lower third example is in 1080, and your channel is 720. That should be the reason why you are seeing only the background.
XML and JSON template data - right now Loopic parses only XML and JSON will come in an update. So just keep sending XMLs for now.

Let me know if this helped.

SteveElk · September 17, 2021, 8:02am

Yes, it was just pixel dimensions. I feel stupid now. Thanks for spotting that!

imare · September 17, 2021, 4:40pm

No problem - you are not the only one who forgot about the resolution. Meanwhile, I’ve made an update to Loopic and now the template will automatically warn you if template resolution does not match channel resolution.
Also, templates can now handle JSON template data.

SteveElk · September 18, 2021, 7:20pm

Awesome. Great tool you’ve created!