Color

The Color Control displays colors and makes them adjustable if necessary. It contains various display elements to represent the color values, which, depending on the configuration, can also be used to set the color values. An overview of the components and the structure can be found in the subchapter Display elements. The description of each configuration option can be found under the following categories on this page. For each category there are sub-chapters with further information, details and application examples.

	For all the following attributes, the control has a getter and a setter method. For example, the two methods `getOrientation` and `setOrientation` exist for the attribute `Orientation`. The use of the attributes is explained in more detail in the linked subchapters. All further attributes, events and permissions provided by the base class Controls can be found in the TwinCAT HMI documentation.

Category: Common

The following attributes represent a data interface for the color value of the control. It is used on the one hand to set the displayed color of the control, and on the other hand to retrieve a color value entered by the user.

Attribute	Type	Description
`ColorSymbol`	ColorSymbol	HMI symbol containing the current color value.
`ColorChannels`	ColorChannels	Defines the format of the color. This includes: Number of channels Min/max values of the channels Integer or Float Display colors of the channels
`BoxColorConversion`	`Function`	Function that converts the respective color value into a string that can be interpreted by the browser and vice versa. This is necessary to tell the control the meaning of each color channel if it differs from the default RGB format.
`ColorValue` _(readonly)	ColorValue	Color value. This can be retrieved without a symbol being linked as `ColorSymbol`.

The attribute ColorValue always adapts to the data type of the mapped PLC variable. The default is a 4-channel array (TcVnVector4_LREAL) which is also used without mapping. Other possible PLC data types are INT, REAL, TcVnVector3_LREAL.

Function	Description
`setColorValue(colorValue:` ColorValue`): void`	Sets the color value. Can be called without a symbol being linked as `ColorSymbol`.

Category: Usage

The following attributes specify the behavior of the control.

Attribute	Type	Description
`BoxUsage`	UsageMode	Determines whether the color box is displayed and whether it is editable.
`ValuesUsage`	UsageMode	Determines whether the individual color values are displayed and whether they are editable.
`SliderUsage`	UsageMode	Determines whether the individual color values are displayed as sliders and whether they are editable.
`SliderValueUpdate`	`DataUpdate`	Specifies whether the color symbol should be updated during `onChanged` or at the end of `onConfirmed` of an interaction with the sliders.

Category: Appearance

The following attributes determine the appearance of the control.

Attribute	Type	Description
`Orientation`	Orientation	Orientation of the control; analogous to the orientation of the LinearGauge controls. `Horizontal` or `Vertical`.
`BoxSize`	`Number (px)`	Determines the width or height of the color box depending on the orientation (value of Orientation).
`ValuesSize`	`Number (px)`	Determines the width or height of the displayed color values depending on the orientation (value of Orientation).

Themed Resources

The following attributes can be used to change the appearance of sub-controls (the text boxes for the color values) at the Themes settings. A detailed description of the individual attributes can be found in the standard HMI documentation.

Attribute	Type
`TextFontFamily`	`FontFamily`
`TextFontSize`	`MeasurementValue`
`TextFontSizeUnit`	`MeasurementValue`
`TextFontStyle`	`FontStyle`
`TextFontWeight`	`FontWeight`
`TextPadding`	`Padding`

Further Information