Tutorials

One page per job. Each shows the finished widget in every state, walks through the bindings that get you there, and ends with the file open in the editor.

10 tutorials

Put alarm state on any equipment symbol
Alarm treatment should be the same on every symbol on the screen, and it should not require redrawing the symbol.
Intermediate · 11 min
Visibility (Number) · Stroke Color · Fill Opacity
Point a gauge needle at a process value
A round gauge reads at a glance in a way a number never does — you see the needle sitting in the green without reading anything.
Beginner · 10 min
Rotation · Cond. Fill (Number) · Text Content
Build a bar graph that recolours at its limits
A bar is the cheapest way to make a number readable across a room, and it costs two bindings: one for how long it is, one for what colour.
Intermediate · 10 min
Custom Attribute · Cond. Fill (Multi-Bool) · Text Content
Show a conveyor running forwards or in reverse
A transport that runs both ways has to say which way it is going, and the usual answer — draw the arrows twice and hide one — is one more thing to keep in step.
Beginner · 9 min
Flip Horizontal · Cond. Fill (Boolean) · Translation X
Show a live value with its colour and quality
A number on a screen is only useful if you can tell whether to believe it.
Beginner · 8 min
Text Content · Fill Color · Visibility (Boolean)
Show machine states from a PLC status word
A machine that publishes its state as one integer — 0 stopped, 1 running, 2 fault, 3 maintenance — should need one binding to display, not one object per state.
Beginner · 9 min
Cond. Fill (Number) · Text Content · Visibility (Number)
Show a motor as running, stopped or faulted
Two bits and a speed value are all a motor symbol needs.
Beginner · 8 min
Cond. Fill (Boolean) · Visibility (Boolean) · Text Content
Colour a pipe by medium and widen it by flow
Piping is usually the static background of a screen, which wastes it.
Beginner · 8 min
Cond. Stroke (Number) · Stroke Width · Stroke Opacity
Drive a tank level from an analog value
A level in percent is one number, and the graphic that shows it should be one binding.
Intermediate · 12 min
Custom Attribute · Cond. Fill (Multi-Bool) · Text Content
Show a valve as open, closed, travelling or faulted
A valve on a screen has to answer one question at a glance: is it where it should be?
Beginner · 10 min
Cond. Fill (Multi-Bool) · Rotation · Text Content

Browse by binding type

Tutorials | DynSVG