Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Next revision 		Previous revision
webbind:parameters [2025/04/04 07:59]
optrix created 		webbind:parameters [2025/04/05 03:33] (current)
optrix
Line 1: Line 1:
 ====Web Data Binding Parameters==== ====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. The parameters are given in the same format as CSS styles. Parameter names, a colon character (:) and the property value.
Line 13: Line 15:
 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**. 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**.
  
-===Type===+===Target===
  
-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.+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.
  
-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.+<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=== ===Prefix===
Line 34: Line 40:
  
 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. 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.
 +
 +===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=== ===Map===
Line 54: Line 70:
 red,20>green red,20>green
 </code> </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.//

ARDI

Welcome Guides

User Guides

Administrative

Sever
Other

API / SDK

Scripting

Addons / Drivers

Other Media