Configuring the Data Files

Select the Data Files

The HMI web page we have just created requires several additional files in order to function.

Page Layout CSS

The first file we need to select is the CSS style page which handles page dimension issues. This must match the horizontal dimensions used by the SVG drawing. If you created a custom SVG drawing size, you may need to alter the values in this file. Make a copy of this file and rename it to pagelayout_template.css. You must use that exact name, as the web page will attempt to import a file of that name. The supplied files are in the CSS template directory.

In our example, we will use the pagelayout_top0850.css css file.

Standard Common Files

Make a copy of all the files in the Standard_Common directory. We will use these files in unmodified form. You can change these files if you wish to customise the appearance of your web page.

Make a copy of all the files in the UserData directory. You would normally supply your own image files for icons, page backgrounds, and logos. For this example however, we will use the supplied samples.

You would also normally edit the clientconfigdata.js file. This file is where you set the title which appears on the browse window bar, the polling rate, and several other factors. For this simple example however, we will leave these all at their default values.

Edit the Message Texts

One file that we will change is the messagetexts.js file. This file contains the definitions for the alarm and event messages that we defines earlier. The hmi mbhmi.config file contains just the alarm and event "tags", not the actual messages. Separating the alarm and event tag definitions from the actual text messages allows us to support multiple hmi languages with the same configuration.

Save this file.