Bodymovin?

General
, ,
22

Sorry, but I asked for help and stated a problem regarding dynamic image replacement the way I tried in the code. I asked why it is dynamically replaced only once and not more and that on the WebCG command Update when I put the path of some other image. Is this Bodymovin, Lottie, JS, or Caspar thing ? I’m trying to do this from a Caspar client.

23

Sorry, I regarded it as a question to the answer above it. As I am also a beginner, I can not help you.

24

I think your problem is that you change the path to “logoA1” - and that will work first time- - but next time you run the update - you will search again for element with the path: images/img_0.png - and now that have changed to the logoA1 path.

So it is in the template, you will need a bit of javascript logic to make the next update search for the current
(in your example “logoA1”) path

heine

25

Add ID’s to your images and do something like this:

var img0 = document.getElementById('img0');
var img1 = document.getElementById('img1');

if (g_animation.currentFrame !== 0 && g_animation.isPaused) {
  var logoA1 = (data.logotimaa ? data.logotimaa.text || data.logotimaa : '');
  var logoB1 = (data.logotimab ? data.logotimab.text || data.logotimab : '');

  img0.setAttribute("href", logoA1);
  img1.setAttribute("href", logoB1);

  g_animation.playSegments([animSettings.update.in, animSettings.update.out], true);
};
26

UPDATE! This is the template

I have uploaded another template* - use link in update -* where I have tried to do the logic.
Maybe there is better way to do it. You know it works if the casparcg logo get red eyes… the key:value in the client is:
image: images/img_0.png
or
image :images/img_1.png

hope it helps/works
heine

2 Likes
27

It’s working fine.You helped me understand how this works. Obviously I need to go through html and javascript from the beginning. I have one more question, why you using setTimeout(function () }, 250); ?

28

It gives the update animation a few frames to move and fade out, before the text is updated, so its just for the graphic to look smooth…
heine

1 Like
29

Hi
I’ve tried using the template you’ve made, it ran perfectly however, sometimes the animation does a full loop, ignoring the assigned in&out frames before executing the actual animation.
Is this normal, how should i fix this?

Thanks

30

Do you load it first, and then play it or direct play(I know play will load it first) but thats where I have seen it?

31

When loading it first then play it, it does not loop the animation first but the image is set to the default png, until the second time i hit play.
If I play it without loading it first, it loops, then updates on the second time i hit play.

This is also shown on the log, not sure if this is related
data event listener threw ReferenceError: newPath is not defined

32

Do you have a key in the client called: image and a value: images/img_0.png or images/img_0.png?

33

Yes, images/img_1.png
It sometimes does a full loop and sometimes doesn’t, I’m sorry if this is very vague but I’m not too sure what is causing this

34

Okay - I will have to look at the code again. When I load it first, and then play its very solid, but if I hit play first its sometimes becomes unstable. But the text fields and the correct images are updated even if its playing all the way without stopping.

35

This also might be a dumb question, since I’m no expert in coding, how would you add another dynamic image you want to control in the template?

36

Hi Heine,
you wrote

Load before play, the first time you use it. Stop will not remove the template, so if you hit play again after stop, it will play again

…but thats not the case for me. After i stop it and i play it once again without loading, it just runs without pausing in between the keyframes.

Can someone help me?

37

I think you can add:
lottie.destroy()
to the stop function, maybe in a setTimeout so it can animate out before it get’s destroyed.
That will kill it, but do you want it to play again?

38

I dont want to kill it. I just dont want to load it everytime before i press start in the client.

Since i use the client, i dont want to push f3, then f2 everytime. I just want to press f2 and the template plays till the given keyframe :frowning:

39

Okay - try this index.js - Play(f2) works everytime in my setup, with this. Maybe update the the lottie.js (get it from the bodymovin plugin)

hope that helps!

40

Hey Heine,
your index.js does work for this Template: Working Template

Sadly it doesn’t for this one: BROKEN Template

Maybe you can have a look? I am running server v. 2.3.3

41

Is the error that it´s not stopping but plays to the end? Are there any other dynamic fields then “name” & “rolle”?
I will have a look tomorrow.

Heine