Using HTML5 to create portable SCADA applications

After seeing Freddy’s article where he uses Cogent OPC DataHUB and an Android application to perform SCADA tasks on a smartphone, it occurred to me that the same principle should be possible using open standards like HTML, thereby allowing the same solution to work on any mobile device (or desktop computers), and not require any ‘programming’ in the traditional sense of the word (i.e. development environments, compilers, simulators, and so on).

To test my theory, I modified an existing set-up in our office in Dalfsen. The test setup is a data logging solution that uses Advantech ADAM modules to perform voltage measurements. This is an existing system that runs software capable of logging and publishing the last read values to a local web server.

The basics

As a first step, I created a simple HTML page with an input field that displays the last measured value of the ADAM module, in millivolts:

Note that this is all just plain HTML. Now we use a bit of Javascript, combined with XMLHTTPRequest, to retrieve and parse the latest values from the existing data logger software (some connection details redacted):

Using the onload handler, we make sure that this process is started as soon as the page is displayed. Also, we use a standard Javascript timer to make the display automatically update every second after the initial display.

<script type="text/javascript">
window.onload = function () {
Refresh = function() {
// Get the latest value from the data logger
var xhr = new XMLHttpRequest();
xhr.open("GET", "/rpc/get-last-value?node=...", false, "user", "pass");
xhr.send();
// Parse the reply
var replySplit = xhr.responseText.split(';');
var theValue = replySplit[1];
// Show the value in the input element
var inputElem = document.getElementById("dialvalue");
inputElem.value = theValue;
setTimeout(Refresh, 1000);
// call this function again after 1 sec.
}
Refresh();
}
</script>

Well, that wasn’t very complicated!

Making it pretty

Of course, visually this is not very impressive. However, with the emergence of new standards like HTML5 and the <canvas> tag, we can use Javascript to create visually more attractive controls. The below controls are completely rendered client-side and updated every second using the same code as above:

This was a bit more work but also not very complicated. Keep in mind that I am a programmer, not a graphical artist!

Conclusion

With a bit of work it should be possible to create a Javascript library of re-usable, generic controls that can be glued together with very little HTML to create compelling and portable SCADA interfaces that work on all emerging platforms, like the iPad, iPhone and Android-based smartphones, in addition to desktop computers or laptops.

The source code of this project will be made available. Check back with us for a download link.

Judging from this experiment, we think using HTML5 technology for user interfaces is very promising — more articles will surely follow!

Advertisements
This entry was posted in Uncategorized. Bookmark the permalink.

5 Responses to Using HTML5 to create portable SCADA applications

  1. Aditya Kukar says:

    Hi
    I would like to have source code for the above mentioned project. Actually we are trying to show financial data stream from OPC datahub on to mobile devices. Searching on google , I came across your post. Hoping to get some help from you.

    Thanks
    Aditya

  2. luciano says:

    Hola, muy bueno. me podrìas pasar los archivos de ejemplo ? gracias

  3. luciano says:

    very good, you could spend the sample files?
    Escuchar

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s