MBHMI - Building HMI Web Pages

HMI

Building HMI Web Pages

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.

Assembling web pages - Assembling HMI web pages from templates.
HMI web templates - A description of the provided templates.
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.
Simple Example - This shows how to create a simple example.

HMI Javascript Client Libraries

HMI Javascript Client Libraries - The HMI Javascript client libraries.

Other Resources

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.