Help Topics

Topic Details for HMI Web Pages

Basic Concepts

Help - HMI Javascript

Overview

Javascript is a programming language which is supported by almost all modern web browsers. Despite the name, Javascript has no relationship to the Java programming language. They are two different languages, which both happen to have a syntax that was largely inspired by 'C'.

Javascript belongs to what are sometimes referred to as "scripting" languages. A scripting language is a language which is intended for writing applications, as opposed to "systems" languages, which are intended for writing things like operating systems or compilers. Like most scripting languages, Javascript has many powerful features based on object oriented programming concepts. The details of Javascript programming are not discussed here. There are many books and web sites devoted to Javascript programming which should be consulted for that information.

Javascript and the HMI System

The HMI system makes use of Javascript to create what is often called an "AJAX" application. "AJAX" stands for "Asynchronous Javascript And XML". The history and philopsophy of AJAX applications won't be discussed here, other than to mention that there are many books and web sites devoted to the subject. The web based HMI is not a closed system, in that AJAX components from popular AJAX libraries may be used to provide additional features if desired.

Like other AJAX applications, the HMI system relies on Javascript to provide two things. It provides a communications channel to the server which operates outside of the normal page load mechanism, and it is used to script page features to allow the HMI to be manipulated without having to load a new page from the server. Both of these features provide a more interactive a application which is more like a conventional local application, and less like a traditional web page.

HMI Communications Library

The communications protocol used by the HMI system is implemented in a client version called "libhmiclient.js". This protocol library allows the client (web browser) to communicate with the server without having to reload the web page. This permits the HMI system to poll the server on a regular basis (e.g. once per second) to receive updates about inputs, events, alarms, and other HMI information. This makes the libhmiclient.js library an import part of the HMI client.

The HMI communications library makes use of a third party library called "json2.js" to provide the JSON encoding and decoding. "json2.js" is a standard library from the official JSON website at "www.json.org", and is licensed as public domain.

Details of how to use the HMI communications library may be found in another section.

HMI Javascript Library

The HMI has a standard Javascript library called "libmbhmi.js" intended for helping to build HMI applications. It includes functions for things such as manipulating the SVG, controlling which "screen" is visible, and event and alarm handling.

In-Page Javascript

In addition to the external standard libraries, a typical application may use Javascript embedded directly in the web page. This could be used for code which is uniquely part of the application, as opposed to reusable libraries. This may include things such as initialision code, custom data manipulation, and the main polling loop.

Other Uses for Javascript

In addition to the above, external Javascript files may be used to hold application data, as opposed to normal Javascript code. Some examples of where this may be used are Javascript object literals to hold event and alarm messages, and the messages for text displays. An example of this is shown below.


	/*
		Event message texts for HMI demo.
		24-Oct-2008
	
	*/
	
	event_text = {
	"PumpRunning" : "Tank pump is running.",
	"PumpStopped" : "Tank pump is stopped.",
	"Tank1Empty" : "Tank 1 is empty.",
	"Tank1Full" : "Tank 1 is full.",
	"Tank2Empty" : "Tank 2 is empty.",
	"Tank2Full" : "Tank 2 is full."
	}
	
	alarm_text = {
	"PB1Alarm" : "PB1 was pressed.",
	"PB2Alarm" : "PB2 was pressed.",
	"PB3Alarm" : "PB3 was pressed.",
	"PB4Alarm" : "PB4 was pressed."
	}

	// This is for text indicators.
	Msg_HMIDemoColours = ["red", "orange", "yellow", "green", "blue", "indigo", "violet"]

These text messages can be accessed directly by the Javascript code in the application, and can be passed to the standard libraries for such things as event and alarm handling. Placing the text messages in a separate file is usually more convenient and easier to maintain than placing them directly in the web page itself.