Continuous Updates to Web Services with JavaScript Timers

[James_McN]

For my second (hopefully of 3) project using JavaScript I wanted to create a live interface to a Web Service.

Implementation

Firstly, if you haven't done already you can find some details on the google charts and JS web service interface on my first project at Using JavaScript and Google Charts with LabVIEW Web Services.

The gauges are actually a google chart creation.  I created a web service to return the relevant information. Each time we get an update we send the new data to the chart, the animations are then taken care of by Google Charts itself.  I also update the HTML itself using the document references.

In my initialise function, I get the references to the tags that I want to edit:

CPU_text = document.getElementById('CPU_txt');

Then we can simply write the text we want to the element in the JavaScript using the innerHTML property. In this case I generate the text from a custom function:

CPU_text.innerHTML = FormatCPUText(WebServiceData.CPU);
function FormatCPUText(CPU) {
     var string_data;
     string_data = "Total: " + CPU.Total.toFixed(2) + "%<br>";
     string_data += "Time Critical: " + CPU.TimeCritical.toFixed(2) + "%<br>";
     string_data += "Timed Structures: " + CPU.TimedStructures.toFixed(2) + "%<br>";
     return string_data;
}

What I needed to do now is invoke a timer to repeatedly poll the web service.  This is done using just a few lines and JavaScript timers.

Timers

JavaScript timers can call functions after a given timeout, or at a given interval. Firstly, I initialise the timer to call the RequestData function after a certain timeout:

timeout = setTimeout(RequestData,timeout_input.value);

Then in request data, I clear the timeout and then initialise a new one again to repeated the process:

clearTimeout(timeout);
timeout = setTimeout(RequestData,timeout_input.value)

So why not use an interval? This will ensure that if the script is busy, or you set the interval too short that a whole series of function calls isn't queued in the script engine, a new one can only be queued once the intial one has been serviced. Think of it like an event structure in LabVIEW being bombarded by events.

Next Steps

Attached you will find the code for this. It has been written and hosted on a compactRIO but should run on any RT target. If you point the project at your cRIO and deploy the web service you will find the page at http://crioaddress:8080/RTDemo/Static/index.html.

I hope to add one more demo in the near future showing:

• How to have a proper homepage.
• How to take your trend data and decimate it for display in the web service. This minimises the data sent over the network, but if done wrong could miss features.
• amCharts: They appear to be an alternative to Google Charts that I believe can work without a web connection.

[jiangliang]

I noticed there is a Josn2.js been called, but this file is not in your demo, seems the webpage can refresh itself, but is there any reason you had this in the "index.html"?

<script type="text/javascript" src="json2.js"></script>

Line 11

Thanks!

[James_McN]

Json2.js is available from https://github.com/douglascrockford/JSON-js it is required for some older browsers that don't have a built in parser but it seems many modern browsers don't require it.

[Alexandre2bmobi]

Hello James, I'm here again.

Do you think that its possible to test this example in myRio??

[James_McN]

Hi Alexandre,

There's no reason it shouldn't work as JavaScript all executes on the client but I don't have access to one to test it out.

Just set up a new project and move the web service files over and it should work just like that from memory.

[Alexandre2bmobi]

Thank you for answering.

Should be easy if the student version of labview 2014 generates web service as build.

I´m thinking about how to solve it.