Application Example: Web-based HMI

The following example shows a graphical user interface for controlling a machine (HMI) implemented entirely with web technologies. The system contains a web server hosting a web application that uses JavaScript and Ajax programming techniques to build a rich, dynamic user interface in HTML. The system also runs an embedded web browser based on the open source WebKit engine. The browser is displayed in full-screen on the device's touch screen. Therefore, it is not obvious to the machine operator that the machine's front-panel interface is actually a web page.

The main advantages of this approach are that it allows for building great looking user interfaces optimized for touch screens, and that the user interface is automatically available remotely to any device running a web browser with a network connection to the machine.

Implementation

The system consists of an Embedded Linux system running an application based on the POCO C++ Libraries that implements the web server and web application. The web interface is implemented with the POCO C++ Server Page Compiler, which allows creating HTML files with embedded C++ code, similar to the way web applications are built with PHP, Java Server Pages or ASP.

The realtime control program for the machine runs on a dedicated microcontroller. A serial connection (UART) is used for communication between the microcontroller and the processor running the Embedded Linux system.