Creating HMI Web Pages

Overview

Creating HMI web pages is simple and easy using Inkscape and HMIBuilder. Inkscape is a free, open source vector drawing program which can be downloaded from here: Inkscape . Inkscape's native drawing format is "SVG" (Scalable Vector Graphics), which is the industry standard drawing format which is also used by most web browsers to display high quality graphics.

Once the HMI drawing has been created, you then open the drawing with the HMIBuilder program and select the options you wish to use for each widget (control).

This page will show how to create a simple HMI web page.

Building Web Pages - This page.
Create the Drawing - Assemble the graphical portion of the HMI.
Create the HMI Configuration - Configure the server.
Configure using HMIBuilder - Use HMIBuilder to generate the data and scripting required to drive the web page.
Configure the Data Files - Set the additional configuration files.
Test the Web Page - Run the web page and test the HMI.