Skip to content

Commit

Permalink
Revert "Revert "Change: Correct spelling in readme.md""
Browse files Browse the repository at this point in the history
This reverts commit c1c2ba3.
  • Loading branch information
jdoppelp committed Dec 2, 2022
1 parent c1c2ba3 commit 7ac24e7
Showing 1 changed file with 13 additions and 11 deletions.
24 changes: 13 additions & 11 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,31 +1,33 @@
# CasparCG-Lottie-Template
I wanted to create a simple way top use CasparCG as a Realtime-Grafic-Playout for lower-thirds, titles, etc. Since I have low exprerience in HTML/CSS a tried to use LottieFiles animation, exported with AfterEffects. The skript in this template update/replace the textdata in the LottieFile(e.g. name and subtitle) , befor CasparCG plays the template.
I wanted to create a simple way to use CasparCG as a Realtime-Grafic-Playout for lower-thirds, titles, etc. Since I have low exprerience in HTML/CSS I tried to use LottieFiles animation, exported with AfterEffects. The skript in this template update/replace the textdata in the LottieFile (e.g. name and subtitle) , befor CasparCG plays the template.

I'm new in coding and this is my first public repository so let me know what your thinking about this idea and how i can improve the skript.
This solution works for me and my use cases, let me know if you have another idea to improve the code or add further functionality to it.


## How to use
To play this expamle template with CasparCG you only need to copy the "example_lower-third-template.html" and the "lottie.js" (lottie player from Bodymovin-Plugin) into your CasparCG template Folder. It's important to send the Data as JSON!
Add the keys: "_name" and "_subtitle" with your new values. Now you can use the "play" "stop" and "update" commands from CasparCG
To play this expamle template with CasparCG you need to:
1. Copy the "example_lower-third-template.html" and the "lottie.js" (lottie player from Bodymovin-Plugin) into your CasparCG template Folder.
2. Set the checkbox "Data as JSON", small, but important!
3. Add the keys: "_name" and "_subtitle" with your new values. Now you can use the "play" "stop" and "update" commands from CasparCG.


![image](https://user-images.githubusercontent.com/87117653/205102045-e0954b19-9e22-42ae-9f35-8b5b6624d511.png)


## How it works
As you play the template, the js-skript in the template replaces the keys in the animation with your values and plays the lower-thrid. It simply changes the text within your LottieFile code and playes a part of the animation:
As you play the template, the js-skript in the template replaces the keys in the animation with your values and plays the lower-thrid. It simply changes the text within your LottieFile code and plays a part of the animation.




# Getting Started with your own template:

## Creating the LottieFile
To use the templates with your own animation your need to create a LottieFile where the text isn't converted to shapes (in Bodymovin - Disable Glyphs in the Settings) and the textslayer in the animation should have an unique value (e.g. _name, _title, _subtitle, _function, ...).
To use the templates with your own animation you need to create a LottieFile where the text isn't converted to shapes (in Bodymovin - Disable Glyphs in the Settings) and the textslayer in the animation should have an unique value (e.g. _name, _title, _subtitle, _function, ...).
It's about the value of the layer NOT the name of the layer!
Your can have as many textes as you like in your animation.
You can have as many texts as you like in your animation.

Add 3 markers to your animation. They all needs to have a length.
Add 3 markers to your animation. They all need to have a length.
Name the markers:
```
Expand All @@ -35,22 +37,22 @@ Name the markers:
```

Now you can export the Lottiefiles and copy the whole JSON Code.
Now you can export the LottieFiles and copy the whole JSON Code.


## Add your Animation to the template
Open the html file with your code editor and paste and replace the LottieFile JSON code to the varible "lottieTemplate" in Line 24

```javascript
let lottieTemplate = /*past your LottieFile code here */
let lottieTemplate = /*paste your LottieFile code here */
```

This might be way bigger than my example, depending on your animation.



## Try your templates
Now you should be able to playout your own template with CasparCG by adding the key and values in the Client and send it to CasparCG
Now you should be able to playout your own template with CasparCG by adding the key and values in the Client and send it to CasparCG.



Expand Down

0 comments on commit 7ac24e7

Please sign in to comment.