indr / webcg-framework Goto Github PK

Framework for CasparCG templates and WebCG graphic overlays

License: MIT License

JavaScript 100.00%

webcg-framework's Introduction

webcg-framework

webcg-framework is a framework to create and develop HTML templates for CasparCG and WebCG. The framework provides an API to listen for AMCP commands, executes your handlers asynchronously waiting for their completion using Promises, automatically parses the XML or JSON data to a JavaScript object, and provides a lazy-load injection for the webcg-devtools.

Running examples can be found at http://indr.github.io/webcg-framework/ and https://indr.github.io/webcg-adobe-animate-adapter/.

Installation

Download the latest release and extract and copy the files in the same folder as your HTML template. Add a script reference webcg-framework.umd.js in your HTML file like:

<script src="webcg-framework.umd.js"></script>

You must not add a reference to webcg-devtools.umd.js. If you open your template in a browser and add ?debug=true to bring up the DevTools, the framework will lazyingly load webcg-devtools.umd.js from the same directory.

API

Have a look at the example lower-third template to see how to use the API. A live version of this template can be found at https://indr.github.io/webcg-framework/lower-third-css-animations.html?debug=true.

Methods

The webcg-framework exposes a global object webcg with these methods:

addEventListener(type, listener)

type: A case-sensitive string representing the event type, AMCP command and/or invoked function to listen for. For example play, stop, update, data, myfunc1.

listener: The JavaScript function that receives a notification when an event of the specified type occurs. Return a Promise to delay processing until your handler is complete (for example, loading images, waiting for animations to complete).

removeEventListener(type, listener)

Removes an event listener.

on(type, listener)

Alias for addEventListener()

off(type, listener)

Alias for removeEventListener()

Events

Type	Description
`play`	Fired when the template should play the intro animations and become visible.
`stop`	Fired when the template should play the outro animations and become invisible.
`next`	Fired when the template should move the the next step in a multi step template (for example paged lists).
`update`	Fired when the template receives raw data.
`data`	Fired after `update` with the raw data parsed as a JSON object. Handles component XML data, JSON strings and JavaScript objects.

Contributing

npm run build builds the library to dist.
npm run dev builds the library, then keeps rebuilding it whenever the source files change.
npm run test run the unit tests in watch mode.
npm run demo starts a demo at localhost:8080.

Copyright and License

webcg-framework's People

Contributors

Stargazers

Watchers

Forkers

zvukoper markusnygard knmurphy tomswinkels

webcg-framework's Issues

Great Work, but I have a question...

I tested your script "lower-third-css-animations.html" and into caspar preview I see only the grey square with the title of file. But I don't see the f0 and f1 title.
In log caspar window, I see this:

[2019-05-31 19:26:14.728] [13436] [info] html[C:\CASPAR\CasparCG Server\Server\templates\_TEST/LOWER-THIRD-CSS-ANIMATIONS.html] Initialized.
[2019-05-31 19:26:14.738] [13436] [debug] Executed command: CGCommand
[2019-05-31 19:26:14.745] [13436] [info] Sent message to 127.0.0.1: 202 CG OK\r\n
[0531/192614:ERROR:renderer_main.cc(226)] Running without renderer sandbox
[0531/192614:INFO:CONSOLE(220)] "[webcg-framework] version 2.4.0", source: file:///C:/CASPAR/CasparCG%20Server/Server/templates//_TEST/webcg-framework.umd.js (220)
[0531/192614:INFO:CONSOLE(118)] "Uncaught SyntaxError: Unexpected identifier", source: file:///C:/CASPAR/CasparCG%20Server/Server/templates//_TEST/LOWER-THIRD-CSS-ANIMATIONS.html (118)

Can you to help me please?

In the attachment, you see my example (with a background video for to testing the key/fill)

I think that your script is very well!
Thank you.

"<Promise> has no method 'finally'" in CasperCG 2.0.7

Hi There,

I am using CasparCG 2.0.7 and transitioning templates from flash to HTML. I have found that WebCG v2.6.0 does not work with CasparCG 2.0.7

The PLAY command runs but crashes with the error: "Uncaught TypeError: Object #<Promise> has no method 'finally'"

I believe this is as Promise.prototype.finally() has a minimum version of Chrome 63 however CCG 2.0.7 uses Chromium 33. Reverting to WebCG v2.5.0 resolves this issue and WebCG works as expected.

CasparCG log:

cg 1-1 add 1 html-test 1
[2020-10-13 18:08:07.642] [170744] [info]    Received message from Console: CG 1-1 ADD 1 html-test 1\r\n
#202 CG OK
[2020-10-13 18:08:07.651] [175352] [info]    html[...\HTML-TEST.html] Initialized.
[2020-10-13 18:08:07.671] [175352] [debug]   Executed command: CGCommand
[1013/180807:ERROR:renderer_main.cc(226)] Running without renderer sandbox
[1013/180807:INFO:CONSOLE(285)] "[webcg-framework] version 2.6.0", source: file:///C:/Users/.../lib/webcg-framework.umd.js (285)
[1013/180807:INFO:CONSOLE(145)] "Uncaught TypeError: Object #<Promise> has no method 'finally'", source: file:///C:/Users/.../lib/webcg-framework.umd.js (145)

Thanks for this really useful library,
Jon

ERROR on playing a template using a Dataset

When I play a HTML template by sending a list of variables the template plays. When I play the same template with (virtually) the same data but inside a Dataset the template fails with the console log "Invalid or unexpected token".

I would expect no different behavior, as AFAIK the server sends the data from the Dataset without any modification to the template. Or am I wrong?