Web Data Binding Parameters

Web Binding attributes connect HTML or SVG elements to ARDI data. Each of these attributes has multiple parameters that describe how to map the data onto the displayed element.

The parameters are given in the same format as CSS styles. Parameter names, a colon character (:) and the property value.

For example, to set the point and postfix parameter, you'd use…

ardibind="point: Paint Line.Speed - Actual;suffix: m/min"

The name of the ARDI point, in the format asset name . property name. For instance, the 'Speed - Actual' property of the 'Paint Line' asset would be Paint Line.Speed - Actual.

Sets the target attribute/css value to set. This is useful when there's a minus-sign or capital letters in the attribute you want to set.

<div ardibind="target:background-color;point:Paint Line.Speed - Actual;map:Black,20>Green"/>

Changes the background colour from black to green when the speed is > 20

Text content added before the value.

Text content added after the value (you can also use 'postfix' here)

Rounds a number to the required number of decimal places.

The value to use when the incoming data is bad (ie. a null or invalid value).

The library will try to find a suitable default value when you don't specify this parameter, but it's not guaranteed to be suitable (ie. if binding attributes such as 'fill' or 'background-color', it will return purple in response to bad data).

Using mininput, maxinput, minoutput and maxoutput allows you to re-scale the figures. This is very useful when making barcharts, converting to percentages or doing other tasks that need you to map between different units or sizes.

For example, if you wanted to convert a value from between 40 and 60 to a percentage between 0-100%, you could use…

   <div ardibind="point:Paint Line.Speed - Actual;mininput:40;maxinput:60;minoutput:0;maxoutput:100"/>

The convert parameter converts numeric values to either colours or text. This is particularly useful for data points that represent discrete values and enumerations, but the colour functions are also useful for any analogue point with a defined colour-map.

The following are valid values for 'convert'…

Mapping allows you to convert incoming values to specific output values. This is often used for statuses or digital readings.

The format of the map is as follows…

default value,threshold comparison result,threshold comparison result

For example, if you wanted to display something that was black by default, red when 1 and green when 2, your map would be…

black,1=red,2=green

Likewise, if you wanted it to be red by default and green if more than 20, you could use…

red,20>green

Chooses a JQuery function to use when setting the property. By default this is css if you've given any attribute name. You can also use attr to set non-CSS attributes, or text or html to set the content of the XML node.

Note that if you don't specify a type and you also don't specify the name of the CSS attribute you want to set, the system asssumes you want to set the text on the element.

For example…

<div ardibindborder="point:Finish Oven Zone 1.Status - Burner;map:2px black,1=2px yellow"/>

Sets the border of the object to yellow when the burner is active, or black when it is not.

<div ardibind="target:background-color;point:Finish Oven Zone 1.Status - Burner;map:2px red,1=green"/>

Sets the background colour of the object to green when the burner is active, or red when it is not.

<div ardibind="point:Finish Oven Zone 1.Temperature"/>

Sets the text inside the DIV to the oven zone temperature.