This is an old revision of the document!


Modifiers

When creating marked-up SVGs, you can add modifiers to anywhere where you substitute the value of an ARDI property.

This allows you to transform the value as its injected into your live display.

Each modifier is added with the vertical bar '|' symbol and is applied in order from left-to-right.

Rounding

Simply give a number, such as '0', '1' or '2' to round the number to that many decimal places.

{Machine.Temperature|2} will be the temperature rounded to two places.

No Animations

To prevent animations, use '@noanim'.

{Machine.Status|@noanim} will snap to new values rather than smoothly animating.

Colour

To convert an analogue or discrete value into an associated colour, use '@colour'.

{Machine.Temperature|@colour} will smoothly transition from one analogue colour to another, while {Machine.Status|@noanim|@colour} will instantly snap to the new colour - a better option for statuses and other discrete values.

Text

To convert a discrete numeric value (ie. 0, 1 etc.) to its text representation. This must be a discrete property in ARDI, such as a status or enumeration.

{Machine.Status|@noanim|@text} will convert 0 to 'Stopped' and 1 to 'Running'.

Math

+, -, / and * symbols perform mathematical calculations.

{Machine Temperature|*2} will multiply machine temperature by 2.

Absolute Value

You can find the absolute value of something with '@abs'.

{Machine Temperature|@abs} will always be positive.

Conditional Values

You can create conditional values using '@map'.

This modifier takes parameters - incoming values, and the value they should be converted into. This is in the form <incoming value>=<outgoing value> and separated by slash (/) characters.

Comparisons can be '=', '>' or '<'.

The last value of the sequence should not have a comparison and will be the default value if no other conditions are met.

{Machine Status|@map/0=1/0} will have a value of '1' when the machine status is equal to 0, and a value of '0' the rest of the time. This is particularly useful when controlling opacity to make parts of your SVG visible under certain conditions.

Scaling Values

You can re-scale values using '@scale'.

This takes four parameters - the input min and max, and the output min and max values. Each is separated by a slash (/) character.

{Machine Temperature|@scale/0/20/0/200} will convert a number between 0 and 20 to a size between 0 and 200.