ARDI Javascript Live Data API

The ARDI Javascript Live Data API is an update to the earlier 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.

For very simple applications, we now also offer the 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,

   <script src="https://demo.optrix.com.au/plugins/optrix/hmitt.js"></script>

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.

   <link rel="stylesheet" href="https://demo.optrix.com.au/plugins/optrix/hmitt.css"/>

Create a Connection

The HMITTPanel Class Reference 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.

var connection = new HMITTPanel();
 
//Add Subscriptions Here
 
connection.Connect("my_ardi_server_url");

Add Subscriptions

To use live data, you'll need to subscribe to it. You can do this with the Sub function, which takes the name of the point, and a callback function to execute when the value changes.

connection.Sub("Asset Name.Property Name",function(v) {
   console.log("New Value: " + v);
});

Putting It Together

Let's see what this looks like in a working example.