My Page

====Web Data Binding==== **Web Data Binding** is a easy way to connect ARDI data to web pages or SVG images without needing to write Javascript code. Although its far less flexible than solutions built with the full Javascript API and tools such as D3.js, it provides a minimal-effort way to bring live data to static pages. Fundamentally, it lets you copy a points of ARDI data to attributes on HTML or SVG elements. For example, you can copy a temperature to the text in a DIV, SPAN or TEXT element. Or you can copy a status into a //height//, //fill colour//, //scale//, //rotation// or any other attribute. ===Adding the Script=== You'll need to add a **script** tag in either your HTML or SVG file. We suggest placing the tag at the **end** of the document in SVG files. Note that the syntax is slightly different in SVG files to HTML files - HTML files use the **src** attribute, while SVG files use the **href** attribute.

===Choosing a Server=== Next, you'll need to specify which ARDI server the page/image gets the data from. This is done by adding an **ardiserver** attribute to either the //body// of the HTML page or the //SVG// tag. For web pages, it looks like this...



	
             My Page

And for SVG files, like this...

===Connecting to Data=== Next, it's time to connect to data. On the object that you want to respond to live data, add an attribute named **ardibind** followed by the name of the //property you want to change//. For example, **ardibindheight** will alter the //height// property of the object. The value of the //ardibind// property contains the name of the **point** in ARDI you want to connect to, plus a number of [[parameters|parameters]]. ===Example Bindings=== The example below changes the text inside the DIV to the speed of the Paint Line.

The paint line speed as a **lot** of decimal places. Let's smooth it out by rounding to the nearest 2.

It would be nice to show the measurement units. We can use the 'postfix' and 'prefix' parameters to add text after and before the value...

We're going to create a bar-chart by adjusting the width of a box based on the //scaled// value.

===Full Examples=== [[html_barchart|Horizontal Barchart (HTML)]] \\ [[svg_barchar|Vertical Barchart (SVG)]] \\ [[https://ardi.com.au/downloads/samples/livepagedemo.html|Live Page Demo (Blast Furnace Stove Temperatures)]] ===Special Functions=== There are a couple of special functions designed for particular applications. [[arditextvalue|arditextvalue]] is used with SVG text controls to highlight the dynamic text in a colour different to the prefix and postfix.