Loopic - visual tool for creating CasparCG HTML templates

[markusnygard]

HI
by default Loopic uses //media/images/ so a “images” folder in the CasparCG media-folder.
Now you can stop reading.
I usally uses SPX as a Client so there I have modyfied so that my folder-structure is
SPX installed in D-root, SPX media is in folder D:\ASSETS\media & templates in D:\ASSETS\templates
Then I have put the same folders in the CasparCG:s config-file
then I can have modify the Loopic HTMLtemplate as following

 window.SPXGCTemplateDefinition = {
    "description": "E-urheilu seuraavaksi",
    "playserver": "LOCAL3",
    "playchannel": "1",
    "playlayer": "1",
    "webplayout": "12",
    "steps": "1",
    "out": "manual",
    "uicolor": "2",
    "dataformat": "json",
    "DataFields": [

      {
        "field": "f0",
        "ftype": "textfield",
        "title": "Some title",
        "value": "LÄHETYS JATKUU"
      },
      {
        "field": "f1",
        "ftype": "textfield",
        "title": "Some title",
        "value": "LÄHETYS JATKUU"
      },
      {
        "field": "team1",
        "ftype": "textfield",
        "title": "Some title",
        "value": "TEAM 1"
      },
      {
        "field": "team2",
        "ftype": "textfield",
        "title": "Some title",
        "value": "TEAM 1"
      },
        {
            "field": "logo1",
            "ftype": "filelist",
            "title": "Choose background image from global ASSETS-folder",
            "assetfolder" : "/media/e-urheilu/logos/" ,
            "extension" : "png",
            "value": "/media/e-urheilu/logos/transparent.png",
        },
        {
            "field": "logo2",
            "ftype": "filelist",
            "title": "Choose background image from global ASSETS-folder",
            "assetfolder" : "/media/e-urheilu/logos/" ,
            "extension" : "png",
            "value": "/media/e-urheilu/logos/transparent.png",
        }
		

    ]
  };
</script>

This is a template that has some textfields and 2 Logos. SPX reads the folder I have said and since SPX can also send commands to CasparCG you can use them together or have CasparCG to just play out the SPX playout-URL. SPX is basically a Open Source Singular.live/Flowics using standard HTML (webCG).

[Ralph]

Hi, I can’t figure out how to populate the dropdown for the image loader placeholder graphics with my own images. No matter if it’s one of the examples, new project or loaded project there’s only Demo 1 and Demo 2.

[imare]

Hi, currently, you can’t add new images to the Image Loader element. You can only select Demo 1 or Demo 2 images, and those images will be there just for the purpose of a demonstration - they will not be visible in the exported template.
Adding custom images to the Image Loader element may be added in the future (depending on the requests of users).

[Ralph]

Thanks for the answer

depending on the requests of users

++request

[markusnygard]

Hi
Since Im dont code (= have the knowledge of making own client) I use SPX for image loader.
In the SPX defintions in the HTML-template I just need to set the folder that I would like to have SPX to read. Just first just have to do some formating (row-breaks) in the Loopic generated HTML

	{
            	"field": "img_0",
            	"ftype": "filelist",
            	"title": "Team 1a logo",
            	"assetfolder" : "/media/e-urheilu/logos/" ,
            	"extension" : "png",
            	"value": "/media/e-urheilu/logos/transparent.png",
    	},
	{
              "field": "f0_1",
                "ftype": "dropdown",
                "title": "Result",
                "value": "-",
                "items": [
                    {
                        "text": "0",
                        "value": "0"
                    },
                    {
                        "text": "1",
                        "value": "1"
                    },
                    {
                        "text": "2",
                        "value": "2"
                    },
                    {
                        "text": "3",
                        "value": "3"
                    },
                    {
                        "text": "4",
                        "value": "4"
                    },
                    {
                        "text": "5",
                        "value": "5"
                    }
                ]
	},

You have to have CasparCG to read the ASSETS folder of SPX and then when you in SPX assign a template to as project also verify that it does connect to the right server (and channel/layer) This need to be done for each template but can also be done in the Loopic SPX definitions I use as default a transparent image so that if I dont assign any image to some placeholder then it wont show a missing image-icon.

br markus

[HUDis]

I need the template made in loopic to copy the text data once loaded to another layer. The point is that “STOP & OUTRO” displays the loaded _tile and _subtitle data, and after “STOP & OUTRO” displays the loaded _tile_out and _subtitle_out data which are to be a copy of _tile and _subtitle.
Does anyone know how to do this?

[imare]

Hi, you can do this by using content property and setContent method.
Here is an example code that you can paste to any frame at which you want to execute copying.

const titleIn = this.findElementByKey("_title");
const subtitleIn = this.findElementByKey("_subtitle");
const titleOut = this.findElementByKey("_title_out");
const subtitleOut = this.findElementByKey("_subtitle_out");

titleOut.setContent(titleIn.content);
subtitleOut.setContent(subtitleIn.content);

[HUDis]

Thank you very much Imare
Now the template and my app work together perfectly!

[RegemarkFP]

@imare I hope you are well, I’m looking to create something similar to this where peoples names are formatted differently for their first name than their surname. Is it possible to do this in Loopic? My brain tells me that I’d need to create a parent layer (First Name) and then have a formula that will measure the width of the layer and use it with a set difference, let’s say 20px to start the next layer (Surname).
Could you please assist with this
Here are a few examples

[imare]

Hi,

yes, it is possible, and actually, it’s very simple.

The idea is to write a middleware function that will modify the value of the text before it gets appended to the DOM by adding some extra HTML tags for styling purposes. Middleware should split the received value and figure out what are the first and second words, and then wrap the second word (or first one, depending on how you choose) in HTML tags that will change the font style.

For example, here is a composition middleware that will set the second word to be of font family “Evogria” (that is just an example of the font imported in the Loopic project).

loopic.useOnUpdate("_name", (key, value, next) => {
  const splitted = value.split(" ");
  const firstName = splitted[0];
  const lastName = splitted[1];
  const element = this.findElementByKey(key);
  element.setContent(`${firstName} <span style="font-family: Evogria;">${lastName}</span>`)
});

Now you can play with the split values, and figure out what to do in case there is only one word in someone’s name or if there are more than 2 words. Hope this helps

[RegemarkFP]

Thanks @imare I’ll check it out

[bencius]

This is amazing tool, but dumb question, why it’s not running smoothly on Opera browser using mac?
Also using chrome on the same mac I’m getting this error when I try to select export folder:

[imare]

It’s a good question All I can say now is that Loopic works best in Chrome and it’s recommended to use Chrome on any OS. Support for other browsers may come in the future.

Regarding the popup error you encountered, it is actually a security feature implemented in web browsers. This feature prevents you from selecting folders that may contain crucial system files. Chrome, in particular, aims to safeguard your system by ensuring Loopic doesn’t access sensitive files. To resolve this issue, the simplest approach is to create a new dedicated folder and tell Loopic to export your files to that specific folder. By doing so, you can bypass the security mechanism.

[jons]

Hi, I would like to ask how to do crawl and/or roll on newer version of loopic?

[imare]

Loopic 1.4

The new version of Loopic has been released! Some of the most notable changes are the redesigned “Actions API” and the new documentation site. You can read the full release notes here.

Part of the new documentation is the examples section, where you can find guides on how to dynamically change fonts, create loop effects, change colors, create a crawler, and so on (more to be added in the future).

[imare]

@jons I’ve created the crawler example in the new documentation, let me know if you have any questions!

[Anders]

This might have been asked before, but is there a way to make rounded corners on the rectangles(border-radius)?
Thanks!

[imare]

Hi @Anders, at the moment, no - it is still in the backlog. The only way to make rounded corners now is to use Actions and custom JS/CSS.

[RegemarkFP]

Hi @imare thanks for the update I’ve been this tool for a few days now but can’t seem to create keyframes on custom masks,the moment I set a keyframe my mask points/corners dissappear. It only happens on the custom masks not on rectangular

[imare]

Hi, I sent you a PM to exchange more information about this bug.