Open HMI

Programmable HMIs allow for the construction and modification of the interface.

How it Works

Once the logic for data retrieval and SVG painting/modification has been entered, it will be displayed on the widget.

What distinguishes this widget from the original HMI is that data sources can be external, and the widget’s content is built/modified through coding.

Configuration

General

• Refresh Frequency: allows configuring the data refresh frequency displayed in the list.

• Title: widget title. It can be configured to remain fixed in the widget or only be displayed when it receives focus.

• About: widget description in Markdown format.

• SVG Content allows you to input the source code of an SVG as a starting point. The SVG content can be manipulated with the svgDom object of the editor. Content can either be entered directly or by selecting a file.

• CSS Content allows you to apply styles to the SVG. Content can be entered directly or by selecting a file.

• Preview shows a live preview resulting from the combination of the previously entered values, without running any code.

Code Tab

This is where you enter the code required for SVG manipulation. It is not necessary to enter code, but you must at least return the svgDom object for it to be able to render.

For SVG manipulation, standard HTML manipulation libraries will be used. Interactions can also be added to the SVG itself to integrate it with the platform’s data, linking it to device data and providing access to it.

Every time the code is updated, it must be evaluated, where a preview of the result will be shown. For this preview, the entered code is indeed evaluated, so the outcome will vary based on its execution.