Differences

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

Link to this comparison view

Next revision 		Previous revision
webbind:start [2025/04/04 07:20]
optrix created 		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===
  
-The example below shows how to make a box change it's width in response to a live value.+The example below changes the text inside the DIV to the speed of the Paint Line.
  
 <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;" ardibind="point=Paint Line.Speed - Actual"/>
 </code> </code>
  
-The following makes horizontal bar-chart, consisting of a black outer section, +The paint line speed as a **lot** of decimal places. Let's smooth it out by rounding to the nearest 2. 
 + 
 +<code html> 
 +   <div style="display: block; background-color: green; height: 2em;" ardibind="point=Paint Line.Speed - Actual;round=2"/> 
 +</code> 
 + 
 +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... 
 + 
 +<code html> 
 +   <div style="display: block; background-color: green; height: 2em;" ardibind="point=Paint Line.Speed - Actual;round=2;postfix=m/min"/> 
 +</code> 
 + 
 +We're going to create a bar-chart by adjusting the width of a box based on the //scaled// value. 
 + 
 +<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;suffix=%"/> 
 +</code> 
 + 
 +===Full Examples=== 
 + 
 +[[html_barchart|Horizontal Barchart (HTML)]] \\ 
 +[[svg_barchar|Vertical Barchart (SVG)]] 
 + 
 +===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.

ARDI

Welcome Guides

User Guides

Administrative

Sever
Other

API / SDK

Scripting

Addons / Drivers

Other Media