This is an old revision of the document!
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 single point of ARDI data to an attribute on an HTML/SVG element. For example, you can copy a temperature to the text in a DIV, SPAN or TEXT element. Or you can copy it into the height, fill colour, scale, rotation or any other web attribute.
Adding the Script
You'll need to add a script tag in either your HTML or SVG file.
For web pages/HTML files, you'll use…
<script src="https://demo.optrix.com.au/plugins/optrix/livepage.js"></script>
And for SVG vector images, you'll use…
<script src="https://demo.optrix.com.au/plugins/optrix/livesvg.js"></script>
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…
<html> <head> <title>My Page</title> </head> <body ardiserver="https://demo.optrix.com.au/s/pl">
And for SVG files, like this…
<svg width="1920" height="1080" viewBox="0 0 1920 1080" version="1.1" ardiserver="https://demo.optrix.com.au/s/pl">
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.
Example Bindings
The example below changes the text inside the DIV to the speed of the Paint Line.
<div style="display: block; background-color: green; height: 2em;" ardibind="point=Paint Line.Speed - Actual"/>
The paint line speed as a lot of decimal places. Let's smooth it out by rounding to the nearest 2.
<div style="display: block; background-color: green; height: 2em;" ardibind="point=Paint Line.Speed - Actual;round=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…
<div style="display: block; background-color: green; height: 2em;" ardibind="point=Paint Line.Speed - Actual;round=2;postfix=m/min"/>
We're going to create a bar-chart by adjusting the width of a box based on the scaled value.
<div style="display: block; background-color: green; height: 2em;" ardibindwidth="point=Paint Line.Speed - Actual;mininput=50;maxinput=80;minoutput=0;maxoutput=100;postfix=%"/>
Full Examples
Special Functions
There are a couple of special functions designed for particular applications.
arditextvalue is used with SVG text controls to highlight the dynamic text in a colour different to the prefix and postfix.