Help Topics

Template Files

Web Template Customisation

The provided web templates can be customised or replaced by ones of your own design. This section describes how to so this. It is not however a tutorial on web page design.

Changing Background and Menu Colours

The web page templates are provided in a single colour. You will probably wish to change this colour to something more attractive. However, the colours themselves are not set in the web page itself. Rather, they are set in the template specific CSS (see the section titled "CSS").

There are two colours which can be changed here. The location of these colours in the file will be obvious (the files are relatively small). You can use any valid HTML colour code or HTML colour name. A search on the Internet will turn up numerous colour tables and descriptions which can help to select an appropriate colour.

The HTML menu colour is set in the standard common CSS file ("pagelayout.css"). There are two menu definitions provided in this file. One is for horizontal menus, and one is for vertical menus. You are unlikely to need to change these colours, but if you do they can be changed in a way similar to that for the backgrounds.

Custom Web Page Templates

The web page templates provided may be used as is, or you may wish to modify or replace them. Since the HMI system depends entirely on web standards, you can create your own completely custom web pages and integrate them with the other components. However, some components expect certain features to be provided.

If you intend to provide your own custom web templates, then you should know something about HTML and creating web pages. The following will provide some points to keep in mind, but it is not a web development tutorial.

If you wish to provide multiple HTML "screens", you will need to provide appropriate "div" tags and CSS. The web page templates provide this feature by hiding and showing different sections of the same page (each template is actually a single web page). This is accomplished via Javascript and CSS.
If you intend to use alarms, events, and protocol errors and status, you will need to provide appropriate tables for them. The number and order of the columns is fixed in the Javascript libraries, so any tables you provide will need to have the same layout as those provided in the templates.
The alarms, events, and protocol errors and status are animated by Javascript libraries. Documentation on these libraries is provided with each program.
Communications operates on a polling cycle. You will need to initialise the communications library and call the communications object on a regular basis (e.g. via "window.setTimeout").

Using a Custom Web Page Template with the HMIBuilder Program

The HMIBuilder program expects certain features to be present in a web page template so that it can insert the SVG data and the Javscript code. The following must be included.

SVG Target Div - A div must be present to act as a target location for the SVG to be inserted. It must have an id of "MBT_SVGScreen".
Control List Target - A "script" tag must be present with an id of "MBT_ControlLists". It must have string formatting codes to allow the data for the "control lists" (the read list, alarm list, event list, and SVG screen table) to be inserted. See the provided template for details on what this should look like.
Control Scripts Target - A "script" tag must be present with an id of "MBT_ControlScripts". It must have a string formatting code to allow the Javascript which controls the outputs to be inserted into the page. See the provided template for details on what this should look like.

The supplied web page template includes Javascript code to insert the page title into the web page from data in the clientconfigdata.js file. If you wish to use this data, you will need to provide a similar capability in your custom web page. This does not affec the HMIBuilder program however.

Custom SVG Templates

The SVG templates provided are sized to fit the web templates (via CSS), and they also contain certain SVG boilerplate (primarily colour gradient and filter definitions used by the SVG clip art). A customised SVG template would normally be simply a re-sized version of one of the existing templates. This is best done by simply changing the drawing properties using Inkscape and saving the file under a new name.

Logos and Background Images

The logos, icons, and background images provided are intended as examples only. You should be creating your own. See the section above on "Sample PNG Graphics" for details on these.

If you are providing your own logo file ("pagelogo.png"), it will not necessarily be the same size as the sample. The web page will re-size it to fit in the available space (the width is set in the HTML web page).

A logo file which is too far out of proportion (too tall and narrow) as compared to the sample may disrupt the page layout. There is little which can be done to correct this except to customise the web page and CSS to suit.

Communications Errors and Protocol Status Texts

Standard message texts for communications errors and protocol status messages are provided as standard common data. These are located in the "standardtexts.js" file. You can edit these messages to change the wording, or to translate them to another language. However, do not remove or alter any of the tags associated with these messages. These tag names are part of the protocol. The messages are in the format:


		"badtype" : "The data value is of an incompatible type.",

where, "badtype" is a tag, the colon separates the tag from the message, "The data value is of an incompatible type." is a message text, and a comma separates this message from the next message. A set of braces ("{ }") must enclose the each set of data. This format is a standard Javascript notation and must be followed if the system is to work correctly.

Alarm States Texts

The file "standardtexts.js" also contains the message texts which describe the various alarm states ("Fault is active", "Alarm acknowledged", etc.). These text messages may be changed if desired. However, the same restrictions as noted for communications errors and protocol status messages also applies. Do not remove any messages, and do not alter any of the tags. The format of the data structure is significant.

HMI SVG Clip Art Library

An SVG clip-art library is provided as part of the system. Some of the input functions such as push buttons, selectors switches, etc. have Javascript code embedded in them. The embedded code assumes that certain Javascript objects have been created with specific names. The names used are the same as in the web page templates. See the documentation on the clip art library for a list of the functions used.