Appearance
Animating a Drawing
Last updated
License feature: Symbol FactoryThe Symbol widget can drive parts of a drawing from tags: turn one valve red while the rest of the pipework stays as it is, hide a flow arrow when a pump stops, put a live number inside the vessel it belongs to.
That is the difference between a picture and a mimic.
Name the parts in your drawing tool
Bindings target elements by their id, which is what every drawing tool already writes. Name a shape "valve1" in Illustrator, Figma or Inkscape and it arrives as id="valve1". Elements inside <defs> (gradients, filters) are not offered.
If a drawing has no named elements the editor says "This drawing has no named elements. Name the shapes in your drawing tool (they become id attributes) and re-import it."
Adding a binding
- Put a Symbol widget on the dashboard and choose its Default Symbol. (Element bindings use the default symbol's drawing.)
- In Element Bindings, click Bind an element.
- Pick the element from Choose an element… — the list is read from the actual drawing.
- Choose what to change.
- Add value mappings if needed (below).
- Scroll up to Data Bindings: a binding named
svg:<element>:<property>has been added for you, e.g.svg:valve1:fill. Point it at the tag. The hint "Set the tag under Bindings → …" names it.
Removing an element binding removes its data binding too.
| What to change | Notes |
|---|---|
| Fill color | Needs value mappings — a tag reading 1 is not a color |
| Line color | Same |
| Opacity (0–1) | The value is applied directly |
| Show / hide | 0, false, off, no and empty hide; anything else shows |
| Text content | For <text> elements. The value is shown as-is, unformatted |
| Rotation (degrees) | About the element's own center — for needles and dials. Non-numbers are ignored |
Value mappings
A mapping turns a value into an output: 1 → green, 0 → red. Click Add a value, type the value in When value is…, and set the output (a color picker for fill and line, text otherwise).
- Matching is exact text.
- Without mappings the value is used directly, which is right for text, opacity and rotation and almost never right for a color.
- When mappings exist but none matches, the element is left exactly as drawn, so an unmapped state never looks like a deliberate one.
If you rename an element in the drawing and paste the new SVG into the symbol, the binding keeps the old id and warns that it "is not in this drawing any more". Pick the new id.
Bindings can come from anywhere
Element bindings are ordinary widget bindings, so a value can be a tag, a static value, an expression — or, inside a template, a parameter. One drawing bound to a UDT parameter becomes one mimic that works for every machine of that type.
Example: a tank with an inlet valve
A drawing with inlet_valve, level_text, agitator and high_alarm:
| Element | Change | Binding tag | Mappings |
|---|---|---|---|
| inlet_valve | Fill color | Tank3/InletOpen (bool) | true → #16a34a, false → #9ca3af |
| level_text | Text content | expression Math.round(value1) + ' %' over a tag binding value1 | none |
| agitator | Show / hide | Tank3/AgitatorRun | none |
| high_alarm | Fill color | Tank3/LevelHH | true → #dc2626 |
A boolean tag arrives as true/false, so map those words rather than 1 and 0.
Imported SVGs are sanitized
Any SVG shown by this appliance is cleaned before it is rendered: scripts, event handlers, embedded HTML and references to outside URLs are removed. An imported file that contained them will still draw, but those parts will not run. This cannot be turned off.