====Web Data Binding Parameters====

[[webbind:start|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...

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

===Point===

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**.

===Target===

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.

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

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

===Prefix===

Text content added before the value.

===Suffix===

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

===Round===

Rounds a number to the required number of decimal places.

===Bad===

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).

===Scaling===

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...

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

===Convert===

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'...

^Value^Meaning^
|**text**|Numeric values are converted to text (ie. 'Running' or 'Stopped')|
|**colour** or **color**|Numeric values are converted to RGB/HTML colours|

===Map===

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...

<code html>
black,1=red,2=green
</code>

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

<code html>
red,20>green
</code>

===Type===

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...

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

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

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

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

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

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