Tabs

Tab: General

The tab contains the general metadata of the open HTML5 control and allows it to be edited. The data should be used to uniquely identify the HTML5 control.

Table 150. Identification

Company	Author or manufacturer of the element Example: `Xyz GmbH` Tip In the installed HTML5 controls, CODESYS can filter by the company names specified here.
Name	Name of the element; displayed as the value of Element Type Example: `Gauge`
Description	Displayed in the Properties view in the field below it. The properties selected above are commented there.
Version	User-defined version number To maintain compatibility, elements which have already been released should be edited only after a new version has been assigned. Example: `0.0.0.1`
Toolbox Category	Category where the HTML5 control is located

Table 151. Files

Image

Name of the image file

For more information, see: Viewing Image Files

Additional Files

Image references
Javascript files which are required for the operation of the HTML5 control
Example: d3.js, jQuery.js, ElementWrapper.js
The order reflects the dependencies. Elements at the top of the list are loaded first. Therefore, it often makes sense to place the ElementWrapper.js entry at the end of the list.

Tab: Control Properties

Function: The interface of the HTML5 control consists of properties and categories. These are listed.

When the HTML5 control opened in the editor is used in a visualization, it brings the properties displayed in the list. Then it behaves like a normal visualization element in the visualization. It has the properties displayed (in the Properties view). These can be combined thematically and arranged hierarchically using categories. Configuring the editor type means that the visualization developer gets support from an editor whose type you configure here when entering values.

Table 152. Control properties and column title

Column	Input Option	Description
Property		This column lists the hierarchically structured properties of the control. These consist of default properties, structuring nodes, and specific configurable properties.
Default Value		This column lists the default values for the respective property. The default value must conform to the editor type set below. For example, if the editor type is a variable, then the default value must be type-compliant with this variable. The value can be specified as a literal or a variable.
Property Type		This column is used to set how the property behaves at runtime.
	Update	The value is transferred only one time at the beginning.
	Initialize	When the value changes, it is transferred to the HTML5 control.
Variable Type		This column lists the variable type configured for the respective property. Valid variable types are the data types available throughout the project (basic data types, custom data types, function blocks, and library blocks). Example: `INT`, `PropertyNames.Colors`
Description ID		This column lists the name of an entry on the "Localization" tab for the respective property.
Editor Type		This column lists the editor type configured for the respective property. This determines the inline editor which opens when the visualization developer clicks in the cell in the"Properties" view when configuring the HTML5 control in order to make an entry in the "Value" column. Note Note that both the default value and the variable type have to be configured type-compliant with the editor type.
	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
	ArrayRange	Editor for the assignment of an array segment In this case, only the scroll area is transferred to the control.
Call Method		The method call for the respective property is configured below this. Using the element wrapper, the properties configured on this tab are transferred to the HTML5 control. Corresponding methods can be defined for this purpose. This column is used to assign the properties. Any number of methods can be defined. The method signature looks like this: `methodName: function(value, type, typeid)`
	`methodName`	Any method name. The method is called to pass the value of the IEC variable to the HTML5 control.
	`value`	Value of the IEC variable or the IEC constant
	`type`	Variable type
	`typeid`	Type ID of the variable

The following default properties are displayed in gray font with a gray background. They cannot be changed or configured.
Element description	Specify the desired text.	Removable default property The text is displayed in the Properties view under the Element Type property when using the HTML5 control.
Position	None	Default property
Center	None	Default property
Absolute movement	None	Default property
State variables	None	Default properties
Input configuration	None	Removable default property

Table 153. Extend the table with specific properties or nodes using the following command icons

	Click the icon to add a new property either below the selected line or at the bottom. The default name is "Property". Change this to a unique, meaningful name. Double-click the property to specify a suitable name.	Add node
	Click the icon to add a new subordinate property either below the selected line or at the bottom. The default name is "Property". Change this to a unique, meaningful name. Double-click the category to specify a suitable name.	Add child node
	Click the icon to add a new category either below the selected line or at the bottom. The default name is "Category Node". Change this to a unique, meaningful name and configure the other columns.	Add category node
	Click the icon to add a new subordinate category either below the selected line or at the bottom. The default name is "Category Node". Change this to a unique, meaningful name. Double-click the category to specify a suitable name.	Add child category node

For more information, see:

HTML5 Control Developer’s Reference

Tab: Localization

The tab makes it possible to translate the names of the properties or categories into other languages.

Name

Name of the property or category as it is defined on the HTML5 Control Editor tab

The name is used as the ID. Depending on the language setting, the corresponding text from the language column is then displayed.

Translation of the name (of the property or category)

The language to be translated into is indicated in the title of the column (as language code according to ISO 639-1).

Example: en

Tabs

Tab: General

Tip

Tab: Control Properties

Note

Note

Note

Note

Tab: Localization