Tab: Control Properties

Function: Lists the interface of the HTML5 control, which consists of properties and categories

When the HTML5 control opened in the editor is used in a visualization, it brings the properties displayed in the list. In the visualization, it then appears like an ordinary visualization element: with properties displayed in the Properties view, which can be thematically grouped and hierarchically arranged using categories. The editor assigned here provides support when entering values.

Node under Property	Input options	Description
Element description		Optional Unchangeable standard property (highlighted in gray) to which a text can be assigned The assigned text is displayed in the Properties view under the Element Type property when using the HTML5 control.
`<property name>`	Insert with: Command: Add node Command: Add child node	Identifier for a (child) properties node: With configuration in the other columns (normal font without highlight) Example: `Show image`, `Image` Double-click the property to enter a suitable name.
`<property name>`	Insert with: Command: Add category node Command: Add child category node	Identifier for a (child) category node: Without a configuration option (highlighted in gray) Combines properties into one category, similar to a container without being able to store values. This allows for the hierarchical structuring of properties. Example: `Image`, `Label` Double-click the category to enter a suitable name.
Position		Node for unchangeable standard property which each visualization element has Without a configuration option (gray font and highlighted in gray)
Center
Absolute movement
State variables
Input configuration

Description of the other columns
Default Value		Type-compliant with the editor set in Editor Type Displayed by default in the Properties view under Value According to the variable type as literal or variable Example: `250`
Property Type	Update	The value is transferred only one time at the beginning.
Property Type	Initialize	When the value changes, it is transferred to the HTML5 control.
Variable Type		Variable type of the property, selected from the data types available project-wide (basic data types, user-defined data types, function blocks, library POUs) Example: `INT`, `PropertyNames.Colors`
Description ID		ID from a project-wide text list which refers to a description of the property Example: `PropertyNames.Value_Desc`
Editor Type		Type of inline editor (input field) which opens when the application developer uses the HTML5 control and wants to enter a property value in the Value column in the Properties view. NOTE: Note that both the default value and the variable type have to be configured type-compliant with the editor type.
	Text	Input field for text
	Variable	Variable editor for the selection of a variable with the support of the SmartCoding functionality and the Input Assistant
	Color	Color editor for selecting a style color or a custom color NOTE: It is possible to use the color editor like a variable editor when a `DWORD` variable is entered.
	Font	Font editor for selecting a style font or a custom font NOTE: It is possible to use the font editor like a variable editor when a `VisuElems.VisuStructFont` variable is entered.
	Check Box	Check box editor for selecting a Boolean value NOTE: It is possible to switch the check box editor into a variable editor when a Boolean variable is entered.
	Image	Image selection editor for assigning an image
	Array Range	Editor for assigning the scroll range of an array In this case, only the scroll area is transferred to the control.
Call Method	The method signature looks like this: `methodName: function(value, type, typeid)`	The element wrapper can be used to define any number of methods which are called with the data via the framework. `methodName`: Any method name representing the IEC variable configured by the user of the element in the corresponding property `value`: Value of the IEC variable or the IEC constant `type`: Variable type `typeid`: Type ID of the variable For more information see: ICODESYS HTML Control Developer’s Guide