Loopic - visual tool for creating CasparCG HTML templates

Hi,

in the current version of Loopic, imported SVGs do not appear in the Resources panel. You did nothing wrong and I totally agree with your workflow; a solution like that is currently being implemented in the new version, alongside many other new features. And thank you for the report! :slight_smile:

Hi @imare
Could you give a estimate of when the new version of Loopic will be released? pre- or post-IBC
br markus

1 Like

It will be prior to IBC. Fingers crossed. :crossed_fingers:

3 Likes

When using textlayer there is a function with multiline, but when I type multiline in my client, the dynamic field will not work.
How can I get them working?

Had to add
in the client myself…
Anyway that I do’nt have to do that?

Hello @imare

Is there a way to make a mask?

I have a image before my text, and I want to move the image and text position, regarding to the text length. How to do that?

Brg Tue.

Hi,

it is possible that there is a bug with the multiline option. All my focus is now on the development of the new version which has a completely new codebase. Thank you for understanding.

The current version does not have a mask feature, but the new version does. You will be able to draw masks in any shapes, animate them, etc.

Combining text and images is possible but with some custom Javascript code. I recommend you to check out the API docs on the website and take a look at middlewares and the template data object. So you can create a middleware for the text field which reads the image from the template data object and appends it as an img object next to the text.

1 Like

Hi, I’ve used your project for crawl with delimiter, I am very thankfull for it, but now I would like to make 2 things run:

  1. loop the crawl infinitly, now the crawl stops after 1 run
  2. insert more delimiters. I don’t know Javascript so well, tried to insert it into the Action code, but can’t finish it:
loopic.useOnUpdate("_text", (dynamicId, value, next) => {
  const margin = "10px";
  const img = `<img src="./img.png" style="margin: 0 ${margin};" />`;
  // # is delimiter
  const textWithImg = value.replace(/#/g, img);
  
  const img2 = `<img src="./img2.png" style="margin: 0 ${margin};" />`;
  // # is delimiter
  const textWithImg2 = value.replace(/%/g, img2);
  
  const el = loopic.getElement(`_text`);
  el.domNode.innerHTML = (textWithImg);
  el.domNode.style.display = "flex";
  el.domNode.style.alignItems = "center";
     
})

-Now depending on what I insert into el.domNode.innerHTML = (textWithImg); or (textWithImg2) - one of the delimters works, the other not. Please help :slight_smile:

I would say that that infinite loop would be more important for me, because, when I use your project @imare and insert some more text than only 2 sentences (longer than 1920 px), the crawl is stopping after a while and running backwards :no_mouth:
Is there any idea, how to modify it? :slight_smile:

Hi,

apologies for my late reply. As I already mentioned in my previous posts, Loopic is under development and most of my resources are focused on that task. Taking that into consideration, I want to thank you for your understanding.

Please find a new example called crawler-with-multiple-delimiters.
The only “big” issue you had in your code was that you need to call the replace function on the textWithImg variable, instead of the value variable.

In this new example, I also added an interval timer that enables the looping of the crawler.

1 Like

Thank you very much, it works great.
The last thing I want to modify is to crop the crawler right and left, so the text would be visible (in a width of 1920 px) only from i.e. 300 px till 1700 px. - I’ve done it with another color shape layer above the text layer, but I would prefer to crop it, so the rest (in blue) would be transparent


.
Is this a thing @imare we will be able to make with masks you mentioned in your answer to @tue ?
Ones again thank you very much @imare ! :raised_hands:

1 Like

Hello. I successfuly created a template some time ago that I am using that actually works. But I have some issues. For some reason, the template is slow to play. It has about a 2-second delay after the command is given to appear on the screen. I’m wondering if it has something to do with my system, or if anyone has had any similar issue? Interstingly, this only happens the first time the template is played. After that, the template loads faster. It seems as if it is caching the template the firsat time around, and then it plays after. I am first LOADING the template before it is PLAYED.

Any reason this might be happening? Here’s my playout machine build and my configuration file:

  • Lenovo P310 tower
  • Windows 10 Enterprize 64bit build 19042
  • 16GB RAM
  • Intel(R) Core™ i7-6700 CPU @ 3.40GHz, 3408 Mhz, 4 Core(s), 8 Logical Processor(s)
  • NVIDIA Quadro 4000 2GB
  • SanDisk 250GB
  • Samsung SSD 850 EVO 250GB
  • Blackmagic Decklink Duo 2

I’m running a February 2022 Caspar CG master build through the Server Launcher app. Here’s my configuration file:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <log-level>info</log-level>
  <paths>
    <media-path>D:\media</media-path>
    <log-path>D:\Log</log-path>
    <data-path>D:\data</data-path>
    <font-path>C:\Windows\Fonts</font-path>
    <template-path>D:\templates</template-path>
  </paths>
  <lock-clear-phrase>secret</lock-clear-phrase>
  <channels>
    <channel>
      <video-mode>1080i5994</video-mode>
      <consumers>
        <decklink>
          <device>1</device>
          <key-device>0</key-device>
          <embedded-audio>true</embedded-audio>
          <latency>low</latency>
          <keyer>default</keyer>
          <key-only>false</key-only>
          <buffer-depth>6</buffer-depth>
        </decklink>
      </consumers>
    </channel>
    <channel>
      <video-mode>1080i5994</video-mode>
      <consumers>
        <decklink>
          <device>2</device>
          <key-device>0</key-device>
          <embedded-audio>true</embedded-audio>
          <latency>low</latency>
          <keyer>default</keyer>
          <key-only>false</key-only>
          <buffer-depth>6</buffer-depth>
        </decklink>
      </consumers>
    </channel>
    <channel>
      <video-mode>1080i5994</video-mode>
      <consumers>
        <decklink>
          <device>3</device>
          <key-device>0</key-device>
          <embedded-audio>true</embedded-audio>
          <latency>low</latency>
          <keyer>default</keyer>
          <key-only>false</key-only>
          <buffer-depth>6</buffer-depth>
        </decklink>
      </consumers>
    </channel>
    <channel>
      <video-mode>1080i5994</video-mode>
      <consumers>
        <decklink>
          <device>4</device>
          <key-device>0</key-device>
          <embedded-audio>true</embedded-audio>
          <latency>low</latency>
          <keyer>default</keyer>
          <key-only>false</key-only>
          <buffer-depth>6</buffer-depth>
        </decklink>
      </consumers>
    </channel>
    <channel>
      <video-mode>1080i5994</video-mode>
      <consumers>
        <ndi>
          <name>CasparNDI</name>
          <allow-fields>true</allow-fields>
        </ndi>
      </consumers>
    </channel>
  </channels>
  <controllers>
    <tcp>
      <port>5250</port>
      <protocol>AMCP</protocol>
    </tcp>
  </controllers>
  <amcp>
    <media-server>
      <host>(IP address)</host>
      <port>8000</port>
    </media-server>
  </amcp>
  <flash>
    <buffer-depth>6</buffer-depth>
    <enabled>false</enabled>
  </flash>
  <html>
    <remote-debugging-port>0</remote-debugging-port>
    <enable-gpu>true</enable-gpu>
  </html>
  <ffmpeg>
    <producer>
      <auto-deinterlace>none</auto-deinterlace>
      <threads>8</threads>
    </producer>
  </ffmpeg>
  <ndi>
    <auto-load>true</auto-load>
  </ndi>
  <osc>
    <default-port>6250</default-port>
    <disable-send-to-amcp-clients>false</disable-send-to-amcp-clients>
    <predefined-clients>
      <predefined-client>
        <address>(IP address)</address>
        <port>5253</port>
      </predefined-client>
    </predefined-clients>
  </osc>
</configuration>

Yes, that will be super easy to do with the mask feature.

Until then, add this code at the bottom of your Composition action:

const textEl = loopic.getElement("_text");
const layerEl = textEl.domNode.parentNode;

const topPadding = 50;
const bottomPadding = 50;
const leftPadding = 50;
const rightPadding = 50;

const polygonPath = `polygon(${leftPadding}px ${topPadding}px, ${1920 - rightPadding}px ${topPadding}px, ${1920 - rightPadding}px ${1080 - bottomPadding}px, ${leftPadding}px ${1080 - bottomPadding}px)`;

layerEl.style.clipPath = polygonPath;

The code should be self-explanatory. Here is the link to the files.

1 Like

Hi,

there are some known performance issues with the templates that use heavy image sequences, so I can only guess this is the case with you as well.

The issue has been fixed in the new version that will be released soon.

If you think the image sequence is not causing the issue for you, feel free to send me the project file and I can take a look at it.

2 Likes

thank you very much :slight_smile:

1 Like

Is it possible to use the AMCP Invoke method with the Loopic commands? I can’t find anything on the API which notes anything about Invoke. In previous templates we have used this to move to certain parts of the animation. Thanks in advance

Hi, currently, there is no support for invoking commands.

I’ve tried your exapmle but as any other crawler template I tried it is not exactly smooth and sometimes stops for couple miliseconds and then jums a few pixels in front and the faster the speed is the more obvious it becomes. I want to ask do you also have the same problem or is it my server settings or something?

Hi,

where do you notice the crawler not being smooth? On CasparCG’s final output or screen consumer?
I haven’t had any issues with the crawler from above, nor did I get any complaints from others regarding the performance. What are your computer’s specs? Can you share your config file?

Just a quick statement regarding the delay since the community deserves to know the status of the project. Unfortunately, as we have all seen, the prior-to-IBC release goal was not achieved. But, the good thing is that the new version will be released next week (final testings are in progress), so stay tuned and please accept my apologies for the delay!

6 Likes