This is testing environment for checking SVG content and script before importing it into Template. By cloning and
running npm start
will have a result shown in the video. Latest screenshot
is here.
Recommend cloning for contribution only.
To use controllable SVG components in Template of Node-RED Dashboard follow the instructions below.
... WORK IN PROGRESS but already usable ...
Create SVG image in third party software. I used Boxy SVG (not sure if there is a
free version). If using Boxy SVG click Elements tab at the bottom or open the created SVG file with a text
editor (eg. Visual Studio Code). Find element you want to
animate and add id
attribute. See an example below where id
attribute is id="pump_P101A@cx_color"
<path id="pump_P101A@cx_color" d="M 1018 600 C 1018 609.941 Z" style="fill: rgb(216, 216, 216);">
There are two components of the id
attribute. The first one is an unique identifier and
the second one is a set of types which describes element's
animation. Separate types with a comma ,
to add different types of animation. For example
id="pump_P101A@cx_color,cx_hide"
cx_move
is for groups<g>
, lines<line>
and text tags<text>
. It doesn't work with paths<path>
. Wrap paths into a group forcx_move
.cx_color
is for paths<path>
, shapes<rect> <circle> <ellipse> <polygon>
and text tags<text>
. It doesn't work with groups<g>
nor lines<line>
.cx_status
is for texts<text>
and tspan<tspn>
only (without nested tags).cx_hide
is for any tag.
Copy and paste text from ui_template.html
into Dashboard Template node. Add your SVG file content between <!-- SVG FILE CONTENT BELOW -->
and <!-- SVG FILE CONTENT ABOVE -->
. Now by sending payload
with topic
(which equals previously set ID) to
the Template node will animate your SVG content.
Type of Node-RED message payload with the following topics:
unique_id@
+cx_move
payload is an object{x: number, y: number, deg: number, pivot: [number(0 to 1), number(0 to 1)]}
;unique_id@
+cx_color
- payload is a string;unique_id@
+cx_status
- payload is 12 characters string;unique_id@
+cx_hide
- payload is a boolean (true or false).unique_id@
+cx_stroke
- payload is an object{color: string, width: number}
. Both attributes are optional, so stroke can have predefined color and width can be dynamic to create flashing effect. Example.
- Test and document usage of
payload
as an array of payloads; - Add an example of usage in UI Template (Node-RED).