Markup Examples

Below are some examples of SVG markup.

Simple Text Indicator

A simple piece of text that shows the current value of Machine Temperature. 

<text x="10" y="10" fill="black" arditext="{Machine.Temperature|2} Deg C"/>

Coloured Text Indicator

A text indicator with a coloured background based on a discrete/on-off value that changes colour to indicate status 

<rect x="0" y="0" width="100" height="50" fill="red" ardifill="{Machine.Status|@noanim|@colour}"/>
<text x="10" y="10" fill="black" arditext="{Machine.Status|@noanim|@text}"/>

Warning Indicator

A text indicator with a coloured background that appears based on the machine running too slowly. 

<g  ardiopacity="{Machine.Status|@noanim|@map/0=1/0}">
    <rect x="0" y="0" width="100" height="50" fill="red"/>
    <text x="10" y="10" fill="white">Running Too Slowly</text>
</g>

Vertical Bar Chart

Creates two rectangles - a background solid rectangle that offers a tool-tip, and a foreground rectangle that acts as a bar-graph of the value. It displays Machine Temperature between 0-50 Deg C and is 50 pixels wide and 200 pixels high. 

<g>
   <rect class="barchartbg element" x="0" y="0" rx="5" ry="5" width="50" height="200" name="Temperature" units="Deg C" ardivalue="{Machine.Temperarure|2}"/>
   <rect class="barchartfg" x="2" y="2" width="46" height="46" ardiy="[196-{Machine.Temperarure|@scale/0/14/0/196}]" ardiheight="{Machine.Temperature|@scale/0/50/0/196}" ardifill="{Machine.Temperature|@colour}" rx="5" ry="5" />
</g>

Gauge

A 270-degree gauge display that has a radius of 50 units and a range of 0-60 degrees C

This performs a trick using dash-array to create the gauge. There are two circles - the background (black) circle, and the foreground (yellow) circle that shows the actual measurement. 

<g class="gauge">
   <circle cx="50" cy="50" r="50" class="outer" stroke-dasharray="235.61 314" color="black" transform="rotate(135 50 50)"/>
   <circle cx="50" cy="50" r="50" color="yellow" ardistroke-dasharray="[(50*{{Machine.Temperature|@scale/0/60/0/1}*2*Math.PI * (270/360)) + \' \' + (50*2*Math.PI)]" class="inner" fill="none" transform="rotate(135 50 50)" ardistroke="{Machine.Temperature|@colour}" stroke-weight: "30px"/>
</g>