# Open HMI/Custom Image

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

## How it Works

{{< staticImage "ux/CustomHMI/Widget/CustomHMIWidget.png" "Open HMI widget" >}}

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

{{% ux-widget-configuration %}}

- **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.

{{< staticImage "ux/CustomHMI/Configuration/CustomHMIWidgetConfigGeneral.png" "Open HMI general configuration" >}}

### 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.

{{< staticImage "ux/CustomHMI/Configuration/CustomHMIWidgetConfigCode.png" "Open HMI code configuration" >}}

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.

{{< staticImage "ux/CustomHMI/Configuration/CustomHMIWidgetConfigPreview.png" "Open HMI code preview" >}}

{{% ux-widget-code-utils %}}

**alert** -> javascript alert function

**document** -> javascript *document* object

**domParser** -> javascript *DOMParser* object

**showPopup** -> shows options for the selected entity: *showPopup(entityId[,datastreamId])*

### Function

Depending of the configuration receives the following parameters:

{{% ux-widget-param-entitydata %}}

{{% ux-widget-param-relatedEntities %}}

{{% ux-widget-param-timeseriesdata %}}

{{% ux-widget-param-alarmdata %}}

* *svgDom* DOMElement object that contains the root element of the SVG (this object always will be a clean svg element)

If SVG content not filled in configuration you may consider that default viewPort for svg will be: *0 0 100 100* (upgradable)

Every svg will be setted with width and height to 100% and auto respectively

* *callback* function used to return data when the api/http petitions are promised. Use "return" if not using promises.

Example:
```javascript
callback(svgDom);
```
or
```javascript
return svgDom;
```

##### Final code structure build by the application

```javascript
async function main(entityData,alarmData,relatedEntities,timeserieData,svgDom,callback) {
  // YOUR CODE HERE WITH RETURN OR CALLBACK
}
```



### Examples

{{% children sort="weight" depth="10" %}}


---