Loopic - visual tool for creating CasparCG HTML templates

General
, , , ,
139

Thanks, I didn’t explain what I’m trying to do well enough, so this doesn’t solve it. I want to animate a rectangle(with border radius) in and out. Like the video below.
So I want it to animate to the same size as the dynamic text element.

140

server output
server output964×552 41.1 KB

Hi,
while playing loopic template in CasperCG sever 2.3.3 no ouput is visible." no parsed xml data ".Why this appears in console.

141

You’ll need some Javascript to get this working - Loopic currently can not animate the width of auto-sized Text elements.
Once the Text element is updated with the content, you can manually get the text element width using getBoundingClientRect() (you can get the reference to the DOM node of the Text element using findElementByKey method) and then set the width of the background Rectangle element to that value. In this case, you have an animation, which means that you’ll need to change the value of the second keyframe. API for keyframes is not complete yet, so I recommend you check out the Crawler tutorial, which explains how to modify keyframes.

142

Make sure that the XML you are sending to the CasparCG is valid. If the problem still persists, send me a message with your Loopic project file and I can inspect it.

143

Hi, can anyone help me?
I make a Breaking news template using loopic. all everything but masking. In the preview and canvas window masking shows fine, But in CasparCG masking is not working.

Here I have attached the project file.
SCROLL-30-09-23 (issue).loo - Google Drive

144

You need CasparCG version with updated CEF, you can download it from here: Will CEF be updated? - #14 by Julusian

145

I am using CasparCG Server 2.3.3*
what is CEF update, Is it stable or production ready?
is it an official build?

146

Can I make A clock and Date Template on loopic. I can’t find anything on the documentation

147

Thanks imare to your suggestion. The problem is fix now.

But I have another issue Can I Make a Clock and Date template in Loopic?

148

Can you please explain what you mean by a “Clock and Date” template?

149

Hey there, asking there because I think it would be good for everybody. Is there any workaround to show different image if one parsed from xml doesn’t exist?

[UPDATE]

document.addEventListener("DOMContentLoaded", function(event) {
   document.querySelectorAll('img').forEach(function(img){
  	img.onerror = function(){this.src="image source link";};
   })
});
1 Like
151

https://drive.google.com/file/d/1gI_ws4G0yNjRcaC_Xbh9Tm79nHVFSD8c/view

Kindly see the video on the right side there is an example.

In previously I used as3 code in animate cc. To get time and date.

152

I am getting the following error on loopic template

[2023-10-08 01:23:19.780] [info] Sent message to 127.0.0.1:202 CALL OK\r\n
[2023-10-08 01:23:19.780] [info] Sent message to 127.0.0.1:202 CG OK\r\n
[2023-10-08 01:23:19.780] [error] html[file://c:/casparcg\scroll.html] 1920 1080 50.000000
Log: Uncaught ReferenceError: sheet is not defined

Diag-1
Diag-11710×912 278 KB

Diag-2
Diag-21920×822 198 KB

Also getting some late frames in the diagnostics window, Please help me.
( Pc configure is good HP Z4G4 Workstation, very good Intel Xeon 2245, 16GB GFX NVIDIA RTX A4000, 32 GB DDR4 ECC, SSD 512GB)

Late_frame
Late_frame1226×836 151 KB

Late_frame-2
Late_frame-21186×846 166 KB

153

Hi, apologies for the late reply. A hectic week behind. You need to give me permission to access your Google Drive (the request was sent days ago). Regarding the uncaught error, it’s very likely that the error comes from the Action inside Loopic. And to debug the late frames, I would have to see the entire project in order to tell you more info about it.

154

Thanks for your reply.
Sorry I didn’t check my email, Just Now I gave you permission.

Here I am attaching the link of my loopic project kindly find that.

155

hi @imare

I just using loopic for creating html template, inside action script I put this script

var startTime;
var pauseTime;
var stateTimer = 0;

function timer() {
  var diff,
      minutes,
      seconds;
  
  diff = duration - (((Date.now() - start) / 1000) | 0);

  minutes = (diff / 60) | 0;
  seconds = (diff % 60) | 0;

  minutes = minutes < 10 ? "0" + minutes : minutes;
  seconds = seconds < 10 ? "0" + seconds : seconds;

  const el = loopic.findElementByKey("timer");
  el.setContent(minutes + ":" + seconds);
  
  var intervalId = setInterval(timer, 1000);
}

function startTimer() {
  if(stateTimer==0)
  {
    startTime = Date.now();
  }
  else if(stateTimer==2)
  {
    startTime += (Date.now() - pauseTime);
  }
  
  stateTimer = 1;
  timer();
}

function pauseTimer(){
  pauseTime = Date.now();
  stateTimer = 2;
}

function stopTimer(){
  stateTimer = 0;
}

template running well when I call PLAY, but when I call INVOKE, there’s return a message CG INVOKE FAILED
I using Stardust CasparCG library for invoke function inside template

var channel = casparCGServer.Channels.First(x => x.ID == 1);
channel.CG.Invoke(1, "startTimer");

Any idea why this happen?

156

„Invoke“ is not (yet?) supported in loopic.

Knut

1 Like
157

I hope Invoke method soon supported

158

Alright so regarding the date and time, yes, you can have a date and time ticker animation. I recommend you take a look at the looping example and to research how the Date object in Javascript works. I will note that this requires some basic programming knowledge.

159

Thanks for your time.
I have no issue with clock template.
I am getting error on scroll temple kindly check that code.
Again thanks for corporation.