nxtedition / create-caspar-graphics Goto Github PK

Currently we read in each template and wrap it with our own Caspar component, which adds the data and state to its props, along with a new life cycle method (componentWillLeave). It's a bit hacky and I think we can do a lot better with hooks.

I'm thinking we instead should export two hooks — useCasparData and useCasparState. We would need a new way to wait for the component to animate off before unmounting, but that shouldn't be too tricky.

Currently when developing, we have one build for the preview, but we also build html templates of all templates (so that you can view them separately using ${template}.html). The builds would be a lot faster if we didn't do this. So I think we should move that into a CLI option instead.

When you've added a few graphics, it takes forever to compile them. I suspect the config I created is really stupid and always re-compiles everything.

We should probably also only create base64 assets in production (and serve the url in dev).

It should be possible to put on more than one template at a time in the preview. This is useful when e.g. aligning templates.

@r01010010 commented on Fri Jan 04 2019

Is your feature request related to a problem? Please describe.
In create-caspar-graphics: If you want to try different behaviours of a graphic component you have to edit the json and then click on update button, it's kind of frustrating and time consuming. Also is difficult to test all possibilities and probably is almost impossible to make a full coverage when human testing.

Describe the solution you'd like
It would be nice if you could load a list of presets instead of having to edit the json every time.
Ideally you could have many presets, included intended error prone ones, and render them all at once and human check them one after the other. That would be neat!

Describe alternatives you've considered

• The data tab could be a selectable with the pressets.
• Or there could be clickable tabs with presets names.

@ronag commented on Fri Jan 04 2019

creating and saving tabs would be nice

@malmgrenola commented on Mon Jan 07 2019

@tobiasandersen Isn't this a part of the intelligent templates sending data back to nxt with UI information?

@tobiasandersen commented on Mon Jan 07 2019

I don't think it's the same, but we should probably do it at the same time. This is more for having presets of data to test with. When you develop it's really helpful to have multiple sets of data to test with, and now it's a bit cumbersome to do.

We should look into supporting e.g:

• Styled Components
• Emotion
• Sass

Currently you can only have one reference image per template. We should allow more, and probably statically assign them to the template.

Hi
I get the following error trying to compile the template:

Failed to compile.

Cannot read property 'tapAsync' of undefined

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: caspar-graphics build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

I can't play the build example-file in Caspar
Debug.log from CasparCG

[0222/193040:ERROR:renderer_main.cc(226)] Running without renderer sandbox
[0222/193040:INFO:CONSOLE(61)] "Uncaught ReferenceError: Map is not defined", source: file:///C:/Program%20Files/CasparCG%20Server/Server/templates//EXAMPLE.html (61)
[0222/193040:INFO:CONSOLE(0)] "Uncaught ReferenceError: update is not defined", source: file:///C:/Program%20Files/CasparCG%20Server/Server/templates//EXAMPLE.html (0)
[0222/193040:INFO:CONSOLE(0)] "Uncaught ReferenceError: play is not defined", source: file:///C:/Program%20Files/CasparCG%20Server/Server/templates//EXAMPLE.html (0)

Hello, I am getting this error when I try to run the example in preview, does anyone have any idea why?

Add an easy way to make the data change to be mounted instead of updated.

When Caspar/Template Guide is finished, It will be a good Idea to add the guide to the templates view so the template developer can access to it quickly while testing/developing.

I was making some tests, an when I insert some png, the template on caspar takes almost 1 min to load, but in the dev page, it loads instantly.

Hi,

i tested the build example template and a simple just h1-tag Template in Caspar as Template itself and with HTML Page none is shown in casparcg.
But if I remove all JS from React and just display plain html with h1-tag text it works. I think the JS is not executed right in caspar html producer. In my browser everything is fine.

I use Caspar server 2.0.7 e9fc25a Stable

Do i need a Higher Server version because the 2.0.7 uses a to old chromium ?

UPDATE:
i testet a simple html file:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <title>test</title>
</head>
<body>
<h1 style="color:#fff">HALLO</h1>
</body>
</html>
<script>
  function play(){
    var element = document.getElementsByTagName("h1")
    element.innerHtml('PLAY');
  }
  function stop(){
    var element = document.getElementsByTagName("h1")
    element.innerHtml('STOP');
  }
  function next(){
    var element = document.getElementsByTagName("h1")
    element.innerHtml('NEXT');
  }
  function update(){
    var element = document.getElementsByTagName("h1")
    element.innerHtml('UPDATE');
  }
</script>

A newer server version 2.2.x works but is there no play/pause or next command ?

Greetings
Dan

I've made a proof of concept for exporting graphics from Adobe After Effects using the bodymovin plugin, and then turning them into graphics using lottie.js. The idea is being able to create simple graphics without any code at all.

This could be built into this library.

We currently only allow 1280x720 or 1920x1080 — we should support any resolution.

I'm not able to get useImage to work.
I use react and gsap.

Can you help with an example on how to get it work?

I'd like to be able to change fonts without recompiling the templates.

Is it possible to add something like this in config/webpack.config.prod.js in caspar-graphics via a parameter in the build script?:

  {
    test: /\.(woff|woff2|eot|ttf|svg)$/,
    exclude: /node_modules/,
    loader: 'url-loader?limit=1024&name=fonts/[name].[ext]'
  }

Add a layer with the example of the graphic, easily activated and deactivated with a key combination, so you can compare both of them while developing:

Example with reference layer not activated:

Example of the reference:

Example with reference activated:

The JSON editor for passing data to the templates is terrible to use. We should create more user friendly input fields and possibly even get rid of the JSON editor.

sorry if I'm asking anything stupid, but can we use Hooks api to create the graphics? I'm trying to do that, but it seems that the props from update function aren't coming

We could expose the Webpack config and allow users to make changes to it, e.g. by exporting a function that takes our config as an argument and returns a new one.

Hello, I was making some tests to use v2, and using the example that comes with it when a stop function it gives me the error of the pic below

It would be nice having an option to easily toggle a safe area.

The build won't play in CasparCG

[2024-01-17 03:58:50.590] [info] Received message from 127.0.0.1: CG 1-20 ADD 1 "EXAMPLE" 1 "<componentData id="name"><data id="text" value="Tue Sandbæk"/>"\r\n
[2024-01-17 03:58:50.591] [info] Sent message to 127.0.0.1:202 CG OK\r\n
[2024-01-17 03:58:50.594] [info] html[file://d:/template/EXAMPLE.html] Destroyed.
[2024-01-17 03:58:50.652] [info] html[file://d:/template/EXAMPLE.html] 1920 1080 50.000000 Log: parse failed:el is not defined
[2024-01-17 03:58:50.652] [info] html[file://d:/template/EXAMPLE.html] 1920 1080 50.000000 Log: Yg.play()

[2024-01-17 03:59:21.798] [info] Received message from 127.0.0.1: CG 1-20 STOP 1\r\n
[2024-01-17 03:59:21.798] [info] Sent message to 127.0.0.1:202 CG OK\r\n
[2024-01-17 03:59:21.799] [info] html[file://d:/template/EXAMPLE.html] 1920 1080 50.000000 Log: Yg.stop()
[2024-01-17 03:59:21.799] [warning] html[file://d:/template/EXAMPLE.html] 1920 1080 50.000000 Log: GSAP target #name not found. https://gsap.com

maybee I'm a newbee.
But if I can't use npm start, why?
Wich software do I need to install on my windows computer to do this?

A Broken dependency prevents from working.

Otherwise I love this.

Read here:
facebook/create-react-app#8680

There is a workaround in the thread, but allso a solution.

/olle

I get these errors in my log, when trying your example template

[2024-01-26 16:22:16.090] [info] Received message from 127.0.0.1: CG 1-20 ADD 0 "EXAMPLE" 1 "<componentData id="name"><data id="text" value="Tue Sandbæk"/>"\r\n
[2024-01-26 16:22:16.090] [info] Sent message to 127.0.0.1:202 CG OK\r\n
[2024-01-26 16:22:16.095] [info] html[file://C:\casparcg-server-v2.3.3-lts-stable\template/EXAMPLE.html] Destroyed.
[2024-01-26 16:22:16.245] [info] html[file://C:\casparcg-server-v2.3.3-lts-stable\template/EXAMPLE.html] 1920 1080 50.000000 Log: Qg.update({
[2024-01-26 16:22:16.245] [info] "name": {
[2024-01-26 16:22:16.245] [info] "text": "Tue Sandbæk"
[2024-01-26 16:22:16.245] [info] }
[2024-01-26 16:22:16.245] [info] })
[2024-01-26 16:22:16.245] [info] html[file://C:\casparcg-server-v2.3.3-lts-stable\template/EXAMPLE.html] 1920 1080 50.000000 Log: Qg.play()
[2024-01-26 16:22:16.252] [error] html[file://C:\casparcg-server-v2.3.3-lts-stable\template/EXAMPLE.html] 1920 1080 50.000000 Log: Error: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20%7Btext%7D for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
[2024-01-26 16:22:16.252] [error] html[file://C:\casparcg-server-v2.3.3-lts-stable\template/EXAMPLE.html] 1920 1080 50.000000 Log: Uncaught Error: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20%7Btext%7D for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

What do i miss?

Whenever I use npm run dev, I just get a green screen and nothing works :

I also am unable to build?

I tried running "npm run build" like the guide says but that does not work. "npm caspar-graphics build" also does nothing.

Currently it's a bit hard developing responsive templates inside the preview (because we scale them using transforms to fit inside the preview). We should probably wrap them in iframes instead.

We should have examples for common things, e.g:

• Animating on enter
• Animating on exit
• Animating on updates
• Animating using different animation libraries (GSAP, react-spring, etc.)
• Waiting for media to render before showing
• Waiting for required data before showing

Currently we have a hard dependency on React. We should look into making it optional.

Hi,
when playing a working template on a server I get the following error in Caspar frontend log:
Failed to load module script: the server responded with a non-Javascript MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.

If I add .js to the end of the module src name I can get rid of this error but I still get "update is not defined" and "play is not defined".

When accessing to a graphic in .html mode, eg: http://localhost:8080/overskrift.html?_fit=true&_bg="#ff0000"&_autoPreview=true&text="Blablabalba", the # at _bg="#ff0000" provokes the browser to think is anchor instead hex color and graphic is not shown.

URL encode for # is %23%0A. Possible solution is to accept HEX without #. Eg: _bg:ff0000

Hi

Is there anyway I can have a sample image in the background when building my template?

/olle

When I do a npm run build, I get a lot errors:

`
PS C:\CasparCG\Templates\my-graphics> npm run build

[email protected] build
caspar-graphics build

Caspar Graphics v1.0.0-beta.28 building 5 templates...
Could not resolve entry module "templates/index.html".
✗ C:\CasparCG\Templates\my-graphics\templates
Error [RollupError]: Could not resolve entry module "templates/index.html".
at error (file:///C:/CasparCG/Templates/my-graphics/node_modules/rollup/dist/es/shared/parseAst.js:337:30)
at ModuleLoader.loadEntryModule (file:///C:/CasparCG/Templates/my-graphics/node_modules/rollup/dist/es/shared/node-entry.js:18021:20)
at async Promise.all (index 0) {
code: 'UNRESOLVED_ENTRY'
}
Could not resolve entry module "index.html".
✗ C:\CasparCG\Templates\my-graphics
Error [RollupError]: Could not resolve entry module "index.html".
at error (file:///C:/CasparCG/Templates/my-graphics/node_modules/rollup/dist/es/shared/parseAst.js:337:30)
at ModuleLoader.loadEntryModule (file:///C:/CasparCG/Templates/my-graphics/node_modules/rollup/dist/es/shared/node-entry.js:18021:20)
at async Promise.all (index 0) {
code: 'UNRESOLVED_ENTRY'
}
Could not resolve entry module "templates//index.html/index.html".
✗ C:\CasparCG\Templates\my-graphics\templates**\index.html
Error [RollupError]: Could not resolve entry module "templates//index.html/index.html".
at error (file:///C:/CasparCG/Templates/my-graphics/node_modules/rollup/dist/es/shared/parseAst.js:337:30)
at ModuleLoader.loadEntryModule (file:///C:/CasparCG/Templates/my-graphics/node_modules/rollup/dist/es/shared/node-entry.js:18021:20)
at async Promise.all (index 0) {
code: 'UNRESOLVED_ENTRY'
}
ENOENT: no such file or directory, mkdir 'C:\CasparCG\Templates\my-graphics\dist\C:\CasparCG\Templates\my-graphics\templates\example'
✗ C:\CasparCG\Templates\my-graphics\templates\example
[Error: ENOENT: no such file or directory, mkdir 'C:\CasparCG\Templates\my-graphics\dist\C:\CasparCG\Templates\my-graphics\templates\example'] {
errno: -4058,
code: 'ENOENT',
syscall: 'mkdir',
path: 'C:\CasparCG\Templates\my-graphics\dist\C:\CasparCG\Templates\my-graphics\templates\example'
}
ENOENT: no such file or directory, mkdir 'C:\CasparCG\Templates\my-graphics\dist\C:\CasparCG\Templates\my-graphics\templates\næste'
✗ C:\CasparCG\Templates\my-graphics\templates\næste
[Error: ENOENT: no such file or directory, mkdir 'C:\CasparCG\Templates\my-graphics\dist\C:\CasparCG\Templates\my-graphics\templates\næste'] {
errno: -4058,
code: 'ENOENT',
syscall: 'mkdir',
path: 'C:\CasparCG\Templates\my-graphics\dist\C:\CasparCG\Templates\my-graphics\templates\næste'
}
PS C:\CasparCG\Templates\my-graphics>
`

I do'nt know what causes that?

I would love

• a table of contents
• having the .html-path quirk under a heading, e.g. "Live debugging with a Caspar"

Currently when adding a new template, you have to kill the dev server and start it again for the template to appear. We should do this automatically.

Our dev environment for gfx development builds all templates when it detect a change even to a single file in one template. It is not a problem when there are a few templates, however when the number grows it slow development quite a bit.

Right now, you can define data previews in dataPreviews.js, however once check the real size render by going to
http://localhost:8080/thetemplate.html?_autoPreview=true
there is not an easy way to jump into any of them, so something like http://localhost:8080/thetemplate.html?_autoPreview=true&dataPreview='ref2'
would be great, also using the keyboard arrows to loop thru them would be perfect

So, i'm making some graphics here, and now I will have some update features, but when I try to test, the update button wasn't making anything...

Is it not enable yet?

This was a request from @axelboberg, but I can't remember why you wanted it. Can you elaborate a bit on why it would be useful? :)

This is great stuff! It would be awesome to have support for TypeScript as well, maybe by passing "--lang" ts or something like that. This will generate a templates->example->index.ts instead and would use the ts compiler instead of babel i guess. If that is not an option maybe this could be: https://blogs.msdn.microsoft.com/typescript/2018/08/27/typescript-and-babel-7/

It'd be great if we could show multiple graphics at the same time (e.g. to see that they align)