Help Topics

Help - Creating and Configuring the HMI

Drag and Drop Graphical HMI Development:

The graphical portion of the HMI can be created using the Inkscape vector graphics editor.

The provided graphical widgets (push buttons, pilot lights, etc.) can be used as is and animated, or you can draw your own custom graphics and animate those, or mix both methods together.

Editing SVG with Inkscape - Using Inkscape as a graphical editor.
SVG Library - The SVG graphical widget library.
Using the SVG Library with Inkscape - Using Inkscape to create HMI web page graphics.
Custom Widgets - Creating custom widgets.

Assembling Pages Using HMIBuilder

You can assemble the web page and create the scripting automatically by using the HMIBuilder program.

HMI web templates - A description of the provided templates.
Assembling web pages - Assembling HMI web pages from templates.

Other Resources

You do not need to read the following unless you wish to create HMI web pages manually, or if you wish to have more background information to help you creating custom widgets.

HMI Javascript Client Libraries - The HMI Javascript client libraries.
Basic Concepts - This section describes the basic concepts behind the operation of a web based HMI. This section is of interest to those interested in understanding the underlying principles of operation.
Manual HMI Web Page Construction - This section describes how to create HMI client web pages manually using traditional web page authoring techniques. This will be of interest to those who are familiar with manual web page creation and who wish to create custom HMI web pages.