Example: HTML5 API

The sample project contains various configured HTML5 controls. The functionality of the HTML5 controls is easy to recognize in online mode.

The controls are for demonstration purposes only. That is why they have a simple look.

HTML5 Demo Button

This control shows how to evaluate mouse actions via an HTML5 control and forward them to IEC via the input configuration. You can execute the configured input events OnMouseDown, OnMouseUp, and OnMouseMove.

HTML5 Demo Combobox

This control shows how to use an IEC enumeration in a combo box. The example shows how to query type information (getTypeDesc) from a variable. It also shows how you can transfer and use colors and fonts.

HTML5 Demo Image

This control shows how to use images in an HTML5 control.

HTML5 Demo Table

This control shows how to display and modify an IEC array in an HTML5 control. The data is transmitted in an optimized way. Only a specific area is transmitted. This solution is also possible for larger arrays with many rows. You can change the values of the cells in the table and as a result change the values of the array variables.

HTML5 Demo Table No Scroll Range

This control shows how to display and modify an IEC array in an HTML5 control. The entire array is transferred when a value in the array has changed. You can change the values of the cells and as a result change the values of the array variables.

HTML5 Demo Textfield

This control shows how different types of IEC scalar values can be handled in both directions (read/write).

HTML5 Demo Donut Gauge

This control shows how to use an HTML5 element with the d3 library. The changeable size of the frame area is transferred directly via width and height. It consists of a display and a button for dragging.

HTML5 Demo Bar Gauge

This control shows how to use an HTML5 element with the d3 library. The changeable size of the frame area is transferred directly via width and height. An editable bar element is displayed.