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”

Table 836: 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: I HTML Control Developer’s Guide