====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.//

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// 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|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.