WebCG HTML template only play() works

Hello all!
I’m trying to build a simple HTML template using WebCG with Lottie. For some reason, only webcg play() works and other doesn’t. Here’s my script.

        var g_animation;
        var g_animationLoaded = false;

        function setData(data){
            var t = (data.f0?data.f0.text||data.f0:'');
            g_animation.renderer.elements[2].updateDocumentData({t:t},0);
        }

        webcg.on('data', function (data) {
            return new Promise(function(resolve, reject) {
                if(g_animationLoaded){
                    setData(data);
                    return resolve();
                }else{
                    g_animation.addEventListener(
                        'segmentStart',
                        function(event){
                            if(event.firstFrame == 0){
                                setData(data);
                                return resolve();
                            }else{
                                return reject('no start segment');
                            }
                            g_animation.removeEventListener('data_failed');
                            return resolve();
                        },
                        {once:true}
                    )
                    g_animation.addEventListener(
                        'data_failed',
                        function(event){
                            g_animation.removeEventListener('segmentStart');
                            return reject('data failed');
                        },
                        {once:true}
                    )
                }
            }).catch(function(e) {console.error(e)});
        })

        webcg.on('play', function () {
            g_animation.playSegments([3,12], true);
            console.log('play');
        })

        webcg.on('stop', function () {
            g_animation.playSegments([12,3], true);
        })

        webcg.on('next', function () {
            
        })

        webcg.on('remove', function () {
            lottie.destroy();
        })

        webcg.on('update', function () {
            g_animation.playSegments([13,14], true);
        })

        document.addEventListener("DOMContentLoaded", function(event) {
            g_animation = lottie.loadAnimation({
                container: animcontainer, // the dom element that will contain the animation
                renderer: 'svg',
                loop: false,
                autoplay: false,
                path: 'http://localhost/CasparCG HTML Test/test.json' // the path to the animation json
            });
            g_animation.addEventListener("DOMLoaded", function(event){
                g_animation.playSegments([0,2], true);
                g_animationLoaded = true;
            });
        });

I’m trying to figure out the reason but couldn’t and would appreciate if anyone could help me out with this. Much thanks.

I changed your code:

  1. listener with {once:true} don’t work in caspars chromium. So you have to kill the listener extra by removeEventListener

  2. webcg.on('data') is the callback for an update command. You don’t need to define an extra function update for this

  3. to make the segment [13, 14] play as a loop after your animation just place it as this: playSegments([3, 12], [13,14], true)
    Then lottie plays the first segment and loops the second segment
    But it does this only if you define ‘loop: true’ when loading the animation

Try this:

		var g_animation;
		var g_animationLoaded = false;

		function setData(data){
			var t = (data.f0?data.f0.text||data.f0:'');
			g_animation.renderer.elements[2].updateDocumentData({t:t},0);
		}
		webcg.on('data', function (data) {
			return new Promise(function(resolve, reject) {
				if(g_animationLoaded){
					setData(data);
					return resolve();
				}else{
					g_animation.addEventListener(
						'segmentStart',
						function(event){
							g_animation.removeEventListener('data_failed');
							g_animation.removeEventListener('segmentStart');
							if(event.firstFrame == 0){
								setData(data);
								return resolve();
							}else{
								return reject('no start segment');
							}
						}
					)
					g_animation.addEventListener(
						'data_failed',
						function(event){
							g_animation.removeEventListener('segmentStart');
							g_animation.removeEventListener('data_failed');
							return reject('data failed');
						}
					)
				}
			}).catch(function(e) {console.error(e)});
		})
		
		webcg.on('play', function () {
			g_animation.playSegments([[3, 12],[13,14]], true);
		})

		webcg.on('stop', function () {
			g_animation.playSegments([[12,3],[2, 0]], true);
		})

		webcg.on('next', function () {
		
		})
		
		//killt lottie vor dem Template Remove
		webcg.on('remove', function () {
			lottie.destroy();
		})
		document.addEventListener("DOMContentLoaded", function(event) {
			g_animation = lottie.loadAnimation({
				container: Bericht, // the dom element that will contain the animation
				renderer: 'svg',
				loop: true,
				autoplay: false,
				path: 'http://localhost/CasparCG HTML Test/test.json' // the path to the animation json
			});
			g_animation.addEventListener("DOMLoaded", function(event){
				g_animation.playSegments([0,2],true);
				g_animationLoaded = true;
			});
		});

Hope this helps a bit

Oh, I changed your container. You have to change it back:

container: animcontainer,

Hi, thank you for the help,
however im still not getting the stop() function to work.
I’m only getting the following lines in the console and nothing from the html producer.

[2020-09-14 13:30:08.088] [8728]  [info]    Received message from 127.0.0.1: CG 1-20 STOP 1\r\n
[2020-09-14 13:30:08.102] [2948]  [debug]   Executed command: CGCommand
[2020-09-14 13:30:08.107] [2948]  [info]    Sent message to 127.0.0.1: 202 CG OK\r\n

In comparison, this is what i would get when issued the play() command.

[2020-09-14 13:33:02.890] [8728]  [info]    Received message from 127.0.0.1: CG 1-20 ADD 1 "CasparCG HTML Test/TEST" 1 "<templateData><componentData id=\"f0\"><data id=\"text\" value=\"Hello\"/></componentData></templateData>"\r\n
[2020-09-14 13:33:02.902] [2948]  [info]    html[C:\Users\USER\Desktop\CasparCG Server\Server\template/\\CASPARCG HTML TEST/TEST.html] Initialized.
[2020-09-14 13:33:02.913] [8412]  [info]    html[C:\Users\USER\Desktop\CasparCG Server\Server\template/\\CASPARCG HTML TEST/TEST.html] Uninitialized.
[2020-09-14 13:33:02.920] [2948]  [debug]   Executed command: CGCommand
[2020-09-14 13:33:02.924] [2948]  [info]    Sent message to 127.0.0.1: 202 CG OK\r\n
[0914/133303:ERROR:renderer_main.cc(226)] Running without renderer sandbox
[0914/133303:INFO:CONSOLE(285)] "[webcg-framework] version 2.6.0", source: file:///C:/Users/USER/Desktop/CasparCG%20Server/Server/template///CASPARCG%20HTML%20TEST/webcg-framework.umd.js (285)
Privacy Policy   Terms of Service