The Javascript API allows live datapoints to be easily embedded within webpages. The API is designed to perform all of the necessary data requests and formatting. The webpage designer simply needs to add a couple of additional lines to a standard webpage to activate the API. Points are then added to the HTML using simple custom attributes that can be added to any HTML element.

Values can be embedded in tables, forms or standard HTML elements. Embedding the live values involves minor additions to the page HTML. In the example below are live temperatures from the Voytech Demo Site

Values can also be passed to custom Widgets to create more user friendly graphics. Below are the same temperatures being passed to Google Chart objects.

The example below shows live data being formatted to display as a kWh meter.

Using the API

Using the API Involves the following steps

1. Include the API Script

Include the API scripts in the HEAD of the html page.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://jsonlink.com/js/sitelink-api-1.00.js"></script>

2. Initialise the API on Page Load

On page load initialise the API with the target Device ID and Device PIN.

<script type="text/javascript">
    $(document).ready(function(){        
        sitelink_initialise(145103, "6068-1187");
    });
</script>

3. Create Embedded Datapoints

In the following example we create a single datapoint embedded in a table, reading Modbus Input Register 10002 on Modbus address 0. The value is formatted by the API as Degrees C by dividing by 100 and adding a Celcius symbol.

<table class="zebra-table">
    <tr>
        <td data-xjsvalue='modbus/0/input/10002'  data-xjsformat="DEGC_100"/>
    </tr>
</table>

The result is a live value displayed in a table:

4. Create Custom Handlers

In this example we create a hidden input field, and when the data updates the API calls a custom handler to update a Javascript counter object.

We first define a Javascript function handler to process the response:

<script type="text/javascript">
    function rx_packets_callback(xjsPoint, stdResponse)
    {
        if(stdResponse.ERRCODE !== resultCode.OK) return;
        
        update_odometer(packetMeter1, stdResponse.VALUE);
        
        return false;
    } 
</script>

Then a hidden input field is created to read the RX Packet count for the connection, and the point is configured with the Javascript response handler.

<input type="hidden" 
data-xjsvalue='connection/stats/$rx_packets' data-xjshandler="rx_packets_callback"/>

The result is that the datapoint is queried and the response written to the counter below