Help Topics

Template Files

Other Template Files

Several other types of template files are provided.

Standard common files are provided to control page layout for the web template files, and also to provide standard error messages.
You will need to provide your own application specific graphics files for logos, icons, and backgrounds.
User data files must be customised to define application specific configurations and messages.

Standard Common Files

A number of common files are provided which can be used with any size HMI web page. The following files are normally used as is.

standardtexts.js

This file contains the standard protocol error texts and the alarm state texts. It is normally used as is. However, you may wish to modify it if for example you wish to provide a different language translation.

hmibuttons.css

This file provides CSS (style sheet) definitions for HMI buttons (both SVG and HTML). This file is normally used as is. It can be customised to provide different behaviour if desired.

pagelayout.css

This file contains web page styling and layout configurations which are used by all the web page templates. You may however wish to modify it to change appearances or if you are creating your own custom templates.

Sample PNG Graphics

Some sample PNG files are also provided. These should be considered to be examples only. You need to provide your own application specific files. You should avoid creating excessively large custom graphics files as this can slow down loading of web pages.

pagebackground.png

This provides a background image for the web page as a whole. This could be a company logo, product image, or some other relevant decorate image. This can be any size.

This file is referenced by the "hmipagelayout.css" file. If you wish to eliminate this file altogether, you can remove the reference in the CSS file.

pagelogo.png

This is an image that appears in the top left corner of the web page templates. This could be a company logo, product image, or some other relevant decorate image.

The name, size, and proportions of this image are referenced directly in the web page templates. The top menu web page template sizes this to 170 pixels wide by 75 pixels high. the side menu versions size it to 114 pixels wide by 50 pixels high.

This amounts to an (approximately) 2.25 width to height ratio. The web page will automatically re-size any image you provide, but if you are using an image with different proportions it will be distorted unless you change the dimensions used in the web page. However, if you are using a side menu template, avoid making the dimensions any wider as this will upset the overall page layout.

pageicon.png

This is the icon file that appears in the web browser bookmarks menu and in the page tabs. This could be a company logo, machine station number, or some other relevant image. This must be a PNG file, and it must be exactly 32 by 32 pixels.

User Data Files

The following files must always be customised for each application.

clientconfigdata.js

This data file is used to control various page properties. This allows the same HMI web page to be used in different applications without having to alter the page itself. For example, there may be several similar machines which require similar HMI pages, but need different identifying titles. The parameters include the following:


	// The client ID string. Replace this with your own client id.
	MBT_ClientID = "HMI Demo";

	// HMI scan in milliseconds. The web browser will poll the server at the
	// interval defined here.
	MBT_ScanRate = 1500;

	// This is the title of the page.
	MBT_PageTitle = "Demo Page"

	// This determines whether the page heading is visible or not.
	MBT_HeaderVisible = true;

These parameters are:

MBT_ClientID - This is the string which is reported to the server as the client id.
MBT_ScanRate - This is the time in milli-seconds between polls.
MBT_PageTitle - This string will be used as the web page title, as well as the name which appears in the heading (if visible) and the footer. This is inserted dynamically by the page when it starts up.
MBT_HeaderVisible - If this variable is true, the heading (see the examples for the web page template) will be visible. If it is false, the heading will be hidden. This allows for the same page template to be used to provide different web page layouts.

The data provided here are examples only. You will need to update these examples with your own actual data. All of these items are required. The data in this file should not be language (locale) specific.

messagetexts.js

This translates the alarm and event tags to the message texts which are displayed to the operator. Replace the tags and messages with your own actual data. You can add or remove records as necessary.

The data in this file is normally language (locale) specific and may need multiple versions if you are providing multiple translations.


	MBT_AlarmText = {
	"PB1Alarm" : "PB1 was pressed.",
	"PB2Alarm" : "PB2 was pressed.",
	"PB3Alarm" : "PB3 was pressed.",
	"PB4Alarm" : "PB4 was pressed."
	};

	MBT_EventText = {
	"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."
	};

Data Formats

The data items which must be modified are in plain ASCII text files. These items will have specific formats which must be preserved if they are to be understood. These are:

Strings

Strings must be enclosed by double quotes ".

Example:


		MBT_ClientID = "Default HMI Client ID";

Arrays or Lists

Some items (e.g. the tag read list) consist of arrays or lists of strings. Each array or list must be enclosed with square brackets ("[ ]"). Items in the list must be separated by commas.

Example:


		MBT_ReadList = ["ExamplePL1", "ExamplePL2", "ExamplePL3", 
				"ExampleTank1Level", "ExamplePumpSpeedCmd", 
				"ExampleStripChart1"];

JSON Objects or Dictionaries

Some items (e.g. alarm message texts) are in JSON object notation (also known as "dictionaries"). These consist of key - value pairs, where the key is used by the program to look up the corresponding value. These objects must be enclosed by braces ("{ }"). Keys must be separated from values by colons. Key - value pairs must be separated from other key - value pairs by commas.

Example:


		MBT_AlarmStatesText = {
			"alarm" : "Fault is active",
			"ackalarm" : "Alarm acknowledged",
			"ok" : "Fault cleared",
			"ackok" : "Fault cleared and acknowledged",
			"inactive" : "Alarm inactive"
		}