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.
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 property value can contain a number of parameters.
Example Bindings
The example below shows how to make a box change it's width in response to a live 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=%"/>
The following makes horizontal bar-chart, consisting of a black outer section,