Differences

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

Link to this comparison view

Next revision 		Previous revision
jsapi:welcome [2025/04/30 02:29]
optrix created 		jsapi:welcome [2025/04/30 03:52] (current)
optrix
Line 1: Line 1:
 ====ARDI Javascript Live Data API==== ====ARDI Javascript Live Data API====
  
-The ARDI Javascript Live Data API is an update to the earlier [[interactivesvg:Welcome|Javascript API]], with a number of quality-of-life improvements and new functionality.+//The ARDI Javascript Live Data API is an update to the earlier [[interactivesvg:Welcome|Javascript API]], with a number of quality-of-life improvements and new functionality.//
  
 Fundamentally, the API allows you to connect your web page or SVG image to a stream of live data from an ARDI server. Fundamentally, the API allows you to connect your web page or SVG image to a stream of live data from an ARDI server.
  
-Note that this API only applies to //live// data. If you want to access historical information or static properties, we suggest using the [[AQL]].+Note that this API only applies to //live// and //momentary// data - for example, when you want to view what is or was happening at a single point in time.
  
 +If you want to access data //over time// (such as how a value changed over the last minutes/hours/days), we suggest using [[aql:welcome|AQL]].
  
 +**For very simple applications, we now also offer the [[webbind:start|Web Data Binding]] library, which allows you to make basic data-driven displays without any code**.
 +
 +===Introduction===
 +
 +ARDI live data works by //subscription//. You 'subscribe' to one or more points of data, and you'll be notified whenever the values change.
 +
 +To do this, you'll need to follow three steps.
 +
 +===Include the Library===
 +
 +You'll need to include the **hmitt.js** file from your ARDI server. For example,
 +
 +<code html>
 +   <script src="https://demo.optrix.com.au/plugins/optrix/hmitt.js"></script>
 +</code>
 +
 +You might also want to include CSS stylesheets if you're planning on using some of the optional visual elements, such as the [[time travel UI]].
 +
 +<code html>
 +   <link rel="stylesheet" href="https://demo.optrix.com.au/plugins/optrix/hmitt.css"/>
 +</code>
 +
 +===Create a Connection===
 +
 +The [[HMITTPanel]] class manages a connection between your SVG file/web page and an ARDI server.
 +
 +The code below shows an example of creating a connection and connecting to a server.
 +
 +<code javascript>
 +var connection = new HMITTPanel();
 +
 +//Add Subscriptions Here
 +
 +connection.Connect("my_ardi_server_url");
 +</code>
 +
 +===Add Subscriptions===
 +
 +To use live data, you'll need to //subscribe// to it. You can do this with the [[HMITTPanel_Sub|Sub]] function, which takes the name of the point, and a callback function to execute when the value changes.
 +
 +<code javascript>
 +connection.Sub("Asset Name.Property Name",function(v) {
 +   console.log("New Value: " + v);
 +});
 +</code>
 +
 +===Putting It Together===
 +
 +[[A Simple Example|Let's see what this looks like]] in a working example.

ARDI

Welcome Guides

User Guides

Administrative

Sever
Other

API / SDK

Scripting

Addons / Drivers

Other Media