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.

Animation template YAML

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

Template parameter and evaluation

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>

Use it in Divoom Gateway

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: