Designing WebHMI

Introduction

The Aurora Vision Studio, apart from the classic desktop HMI, allows the user to create the interactive webpage version of the HMI which can be displayed in any web browser. The webpage is created within the Aurora Vision Studio IDE in the WYSIWYG-like editor by manipulating the WebHMI controls within the page.

A simple WebHMI example: at the design time (left) and at run time displayed in the browser (right).

The WebHMI page is composed from the WebHMI controls. Some of the controls may contain other controls to build the hierarchy, e.g., the StackPanel, the TablePanel provides specific layout types, whereas the TabControl allows to arrange controls in different tab pages. At the top of the control hierarchy is the Window control which may contain any single control.

The control appearance may be modified with the properties that are listed in the Properties Control when the control is selected and the WebHMI designer tab is active.

The communication with the Aurora Vision Studio application is realized through the connections with the control ports and control events:

From a filter's output to a control's input, e.g. for displaying an image or a text result.
From a control's output to a filter's input, as data sources for setting various parameters in a program with e.g. sliders or check boxes.
With the special kind of macrofilters that are executed in response to some action on the control, e.g., the Button.Click.

Note: The communication between the Aurora Vision Studio and the WebHMI frontend application is unsecured as it is transmitted over HTTP and WebSockets, both of which lack encryption. Therefore, we advise against making WebHMI accessible on public networks. Nonetheless, it is still possible to secure the WebHMI through the use of a proxy server, such as nginx.

Adding the WebHMI to the Project

To add a WebHMI subsystem choose Edit » Add Web HMI... and select a WebHMI template that fits the target layout. The template is just a starting point that can be freely modified. Modifications include:

Adjusting selected control properties in the Properties Control
Content modifications through the action button, e.g., adding content, removing selected control, etc.

In particular, to set a PictureBox content for the Border control:

Select the Border control,
Click the action button
Click the Set Content... command
Select the PictureBox control from the control list

Removing the WebHMI

The WebHMI subsystem can be removed from the project with the Edit » Remove Web HMI command.

Previous: WebHMI

Next: Standard WebHMI Controls