-
Notifications
You must be signed in to change notification settings - Fork 6
Animation template
To help build an animation, we are leveraging SVG to help us build each animation frame and using YAML to piece everything together into the final animation.
The YAML config of each template is very simple:
canvas-size: <16|32|64>
speed-in-ms: <time-of-each-frame-in-ms>
frames:
- <path-of-svg-1>
- <path-of-svg-2>
- <path-of-svg-3>
- ...
For example:
canvas-size: 64
speed-in-ms: 100
frames:
- svgs/simple_text.svg
In each SVG, all parameters will be in the form of {parameter_name}
('-' is not supported, pleas use '_'). When invoking the template, we can specify all parameters with a string-to-string dictionary, which will replace all parameters in the SVG.
For example, the parameter of this template below is {text}
, and we can evaluate it by giving it a dictionary: {"text":"foo"}
.
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" font-family="Arial" font-size="8">
<text x="5" y="40" fill="red">{text}</text>
</svg>
In Divoom Gateway, we use ./animation-templates
folder as the default folder for storing all templates. Once launched, we will scan this folder, and use the file name without extension as the template name to create all templates.
Our test folder is one of example to demo how files are organized: https://github.com/r12f/divoom/tree/main/divoom/test_data/animation_template_tests/input. And this will give us 3 templates with names: template_simple
, template_simple_text
and template_image
.
X:.
│ expected_generated_image.png
│ expected_generated_simple.png
│ expected_generated_simple_text.png
│
└─input
│ template_image.yaml
│ template_simple.yaml
│ template_simple_text.yaml
│
├─images
│ logo.png
│
└─svgs
image.svg
simple_frame.svg
simple_text.svg
We can also use -t
parameter to specify which folder to use:
divoom-gateway 192.168.0.123 -t ./animation-templates
Then we can invoke the template via the swagger UI: