Assembling Web Pages:

Overview

A web based HMI client will consist of several components. These are:

A web page. This provides a container for the other components, as well as menus, links to other resources, and tables for data.
A graphical component. This provides the push buttons, pilot lights, etc. In this HMI system, the graphical component is provided by SVG (Scalable Vector Graphics). Editing of SVG is covered in a separate document.
Javascript libraries. These will be reusable libraries which provide the active features of the web page.
Application specific Javascript. This will be scripting which activates the particular features used in the application. This will be mainly calls to functions provided in the Javascript libraries.

This document describes how to assemble them manually using a text editor.

Select the Templates - Select the web page and SVG templates that are appropriate for the application.
Create the SVG Component - Create the SVG component of the HMI.
Configure the Application User Data - Enter the user configuration data, including messages, SVG menu list, and communications parameters.
Customise the Web Page (Optional) - Customise the appearance of the web page. This step is optional.
Create Static Graphics - Create static pixel graphics such as the background image, logo, and icon.
Modify the (X)HTML Web Page - Modify the (X)HTML web page, including setting the page title, inserting the SVG (created above), and inserting the custom help content.
Create the Application Specific Javascript - Create and insert the application specific Javascript to control the output widgets.
Copy the Complete Files to the HMI Server Directory - Copy the completed HMI application files to the HMI server.
Test the Application - Test the application.