MBLogic for an open world in automation

• Home
• Software
• Examples
• Technology
• Demos
• News
• Manuals
• Download

Help Topics

• HMI
• Building Web Pages
• Widget Examples
• Cascadas Protocol
• Browser Gallery

Topic Details for HMI

• Assembling web pages
• HMI web templates
• Editing SVG with Inkscape
• SVG Library
• Using the SVG Library with Inkscape
• Simple Example
• HMI Javascript Client Libraries
• Basic Concepts
• Manual HMI Web Page Construction

Assembling Web Pages

• Select the Templates
• Create the SVG Component
• Configure the Application User Data
• Customise the Web Page (Optional)
• Create Static Graphics
• Modify the (X)HTML Web Page
• Create the Application Specific Javascript
• Copy the Complete Files to the HMI Server Directory
• Test the Application
• Common Terms

4) Customise the Web Page (Optional)

You can customise the web page templates, including changing the appearance or translating the standard pages or standard messages. This step is optional and is not required if you wish to simply use the templates as is.

4.1) Modify the Error Message Texts or Alarm States Description

This step is optional. The texts of the error messages used for Cascadas protocol messages is stored in a file called "standardtexts.js". The data is stored in a manner identical to that used for the alarm and event messages (see the section on alarm and event messages for details). This file contains the standard error messages and can be used as is. However, if you wish to modify the texts of the messages (for example, to translate them to another language), you can edit these with a text editor.

The same file is used to store the alarm states descriptions (e.g. "Fault is active", "Alarm acknowledged", etc.). These may also be changed if necessary.

In either case you may edit the message texts but do not change the tag (key) names or delete entire messages. The system will expect these messages to be present in some form.

4.2) Modify the Standard HMI Push Button CSS

This step is optional and you would not modify this file unless you are familiar with CSS wish to change the styles or effects used for push buttons. The system uses CSS contained in a file called "hmibuttons.css" to provide styling and special effects for the push buttons and selector switches. These effects and styles are only visible in the completed web page, and are not visible in the SVG editor.

This includes the following:

• A black border ("stroke" property) around the push button or selector switch.
• The border widens slightly when you move the mouse over the push button or pilot light ("hover").
• The border turns to white when the push button or selector switch is activated ("active").

If you wish to experiment with different effects, you can modify this file.

4.3) Modify the HTML Page CSS

This step is optional if you are simply using the HTML web page templates as is. If you are familiar with CSS you can modify the template CSS file to change the colours, styles, fonts, and other features in the HTML portion of the HMI web page. For example, by modifying the "background" attributes in the file, the background colours can be changed as desired. This can be experimented with by simply changing attributes and loading the web page into a browser to see the effects.

---

MB-HMI