Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision 		Previous revision
webbind:start [2025/04/04 08:11]
optrix 		webbind:start [2025/04/06 22:18] (current)
optrix
Line 4: Line 4:
  
 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. 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=== ===Adding the Script===
  
-You'll need to add a **script** tag in either your HTML or SVG file. +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.
  
-For web pages/HTML files, you'll use...+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.
  
 <code html> <code html>
 +<!-- Import Script for HTML Pages -->
 <script src="https://demo.optrix.com.au/plugins/optrix/livepage.js"></script> <script src="https://demo.optrix.com.au/plugins/optrix/livepage.js"></script>
-</code> 
  
-And for SVG vector images, you'll use... +<!-- Import Script for SVG Images --> 
- +<script href="https://demo.optrix.com.au/plugins/optrix/livepage.js"></script>
-<code html> +
-<script src="https://demo.optrix.com.au/plugins/optrix/livesvg.js"></script>+
 </code> </code>
  
Line 52: Line 52:
 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. 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|parameters]].+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=== ===Example Bindings===
Line 77: Line 77:
  
 <code html> <code html>
-   <div style="display: block; background-color: green; height: 2em;" ardibindwidth="point=Paint Line.Speed - Actual;mininput=50;maxinput=80;minoutput=0;maxoutput=100;postfix=%"/>+   <div style="display: block; background-color: green; height: 2em;" ardibindwidth="point=Paint Line.Speed - Actual;mininput=50;maxinput=80;minoutput=0;maxoutput=100;suffix=%"/>
 </code> </code>
  

ARDI

Welcome Guides

User Guides

Administrative

Sever
Other

API / SDK

Scripting

Addons / Drivers

Other Media