toolbox with the TwinCAT HMI

5 Controls

A predefined set of controls is supplied in the toolbox with the TwinCAT HMI:

Properties

Each control can be equipped with various properties. The properties are set in the Properties under the

icon .

Events

Each control can trigger different actions on the occurrence of various events. These actions are configured

in the Properties under the icon .

Rights

The rights management [} 506] for each control can be found in the Properties under the icon .

5.1 General configuration

Various generally valid configurations or editors are described in this chapter.

5.1.1 Positioning and calculation of the size of controls

The TwinCAT HMI offers various options for the positioning and calculation of the size of controls. In general,

each control is always defined by its position inside its container. In the standard settings these are the

values for Left [} 426] and Top [} 426] combined with Width [} 427] and Height [} 428]. These four values

are specified in the unit [} 2123] pixel (px). If percent (%) is specified as the unit for these values, then the

size of the parent control is used as a reference. A control with 50% width is thus half as wide as its parent

control.

The influence of the different attributes on the size of the control is defined with the aid of the attributes

WidthMode [} 427] or HeightMode [} 428]. All controls have the Value and Parent modes. Many controls

additionally offer the Content mode. The attributes necessary for the modes are listed in the following tables.

The various separators have the following meanings:

· ‚,‘: both attributes can be used.

· ‚&‘: both attributes must be used.

· ‚|‘: one of the two attributes must be used.

Value (Standard) Width, Height Left, Right Top, Bottom

Parent - Left & Right Top & Bottom

Content - Left | Right Top | Bottom

Value

The Value mode is configured as the default together with the aforementioned attributes Left, Top, Width and

Height. However, an arbitrary combination of any two of the three possible attributes in the horizontal and

vertical direction is possible in order to define the position and size of a control:

· Left [} 426] (including LeftUnit [} 426])

· Width [} 427] (including WidthUnit [} 427])

· Right [} 429] (including RightUnit [} 429])

and

· Top [} 426] (including TopUnit [} 426])

· Height [} 428] (including HeightUnit [} 428])

· Bottom [} 429] (including BottomUnit [} 429])

If values are configured for all three variables per direction, the last one in this list (i.e. Right or Bottom

respectively) is discarded. If only one variable is configured per direction for a control, it cannot be

displayed!

Parent

The attributes Width and Height are ignored in the Parent mode. The size of the control depends on the size

of the parent control. In addition, the distances to the edges of the parent control must be defined by the

attribute pairs Left, Right and Top, Bottom. After changing the mode from Value to Parent, therefore, all four

attributes must be configured so that the control is displayed.

Content

Most container controls additionally have the Content mode. The attributes Width and Height are ignored

here too. The size of the control depends on the size of the child control. In this mode, therefore, the control

is just large enough so that every child control is fully visible. Here are some examples of this mode:

· If the only child control is configured with Left = 10 px and Width = 200 px, then the container control is

given the width 210 px.

· If the only child control is configured with Right = 20 px and Width = 200 px, then the container control

is given the width 220 px.

· If the only child control is configured with Left = 30 px and Right = 20 px and no Width, then the

container control is given the width 50 px and the child control has no width.

· If the only child control has Left = 100 px and Width = 50%, then the parent element would only have a

size of 100 px.

· If a child control itself is aligned exclusively to the parent control (e.g. it has Left = 10% and Width =

50%), then it is skipped in the size adjustment of the parent control. If there are otherwise no child

controls, the container control has the width 0 px and thus cannot be displayed!

Minimum / Maximum Width / Height

In addition, a minimum and maximum size can be defined for each control in the horizontal and vertical

directions. The attributes Minimum Width [} 438] (including Minimum Width Unit [} 438]), Maximum Width

[} 437] (including Maximum Width Unit [} 437]) or Minimum Height [} 436] (including Minimum Height Unit

[} 436]) and Maximum Height [} 436] (including Maximum Height Unit [} 437]) respectively are responsible

for this.

Priority: calculated size > calculated maximum value > calculated minimum value

A set maximum value thus overwrites the calculated size, but a set minimum value overwrites the maximum

value.

For example, this allows the height of the View [} 501] to be adapted to the contents (WidthMode=Content),

but at the same time the minimum height can be set to 100% so that, for example, no area is created without

a background image.

Overlapping

If two controls (partly) occupy the same area on the screen, then the order will be observed. This order can

be changed by drag & drop within the Document Outline [} 60] or directly in the HTML source text [} 46].

The Z-Index [} 440] attribute offers additional options. This can assume negative numeric values and has the

default value 0. A control with a higher numerical value in this attribute will be drawn "further forward", i.e. in

case of doubt it conceals a control with a lower numerical value. It must be noted that the Z-index also has

no global meaning, but is valid only inside a container.

Overfilling

A container control [} 451] groups together any child controls. The container must be large enough to accept

all child controls, because any overfilling will be cut off.

5.1.2 Color editor

You can define any desired color using the color editor embedded in the Properties window. To do this, first

select the color to be modified from the Colors category and you can then choose between the four following

definition options:

Theme: The color defined by the theme will be used.

None: No color will be used.

Solid: A uniform color will be used.

Gradient: A color with a color gradient will be used.

The color editor shown in the following picture is used to define a color as "solid". On the right-hand side you

will find the entries R (Red), G (Green), B (Blue) and A (Alpha). Here you can directly enter the color via the

color components and the Alpha factor, which specifies the transparency. Underneath that is a further box in

which you can also define the color by means of its corresponding hexadecimal color code.

A color selection editor is offered on the left-hand side. In the right-hand part of this editor you can select a

color to use as the basis. In the main part you can then adjust this color again. In addition it is possible using

the pipette symbol to select a color, for example from an image opened in an external tool. Underneath the

color selection editor there is a further bar in which the last-used color is offered on the left-hand side and the

currently selected color on the right-hand side.

If the Gradient tab is selected, the editor described above is extended by the setting options for a color

gradient. The color gradient is initially displayed in a bar. By selecting its left or right marker you can change

the color with which the gradient starts or ends. The start and end of the color gradient can be adjusted via

the position of the markers. This information can additionally be defined in percent in the right box

underneath. In addition there is a slider on the left under the color gradient bar which can be used to change

the angle with which the gradient is displayed.

5.1.3 Transformation editor

Six different types of transformation can be defined with this dialog:

· Translate: Translate in X-, Y-, Z-direction

· Rotate: Rotate by an angle around an axis defined by a vector (X, Y, Z) – the default value of the

vector is (0, 0, 1). The vector thus points out of the screen in the Z-axis direction.

· Scale: Zoom in the X, Y, Z direction, in each case by a factor

· Skew: Skewed display of the horizontal and vertical sides, in each case by an angle

· Origin: Set the origin (X, Y, Z) of the transformation relative to the position of the control

· Perspective: Set the perspective of the transformations of all child elements

Items List of all objects added

Delete the selected object

Change the object order (top = left)

Add a new object

Translate

Name Description

X Definition of the distance by which the control is to be

shifted in the X direction

Y Definition of the distance by which the control is to be

shifted in the Y direction

Z Definition of the distance by which the control is to be

shifted in the Z direction

Rotate

Name Description

Angle Definition of an angle by which the control is to be

rotated

Angle Unit Selection of the unit of the angle:

· Deg: Degrees (full circle = 360 deg)

· Rad: Radians (full circle = 2*Pi*Radians)

· Turn: Number of turns (full circle = 1 turn)

· Grad: Gon (full circle = 400 grad)

Vector X Definition of the X component of the vector

Vector Y Definition of the Y component of the vector

Vector Z Definition of the Z component of the vector

Scale

Name Description

X Definition of the zoom factor in the X direction

Y Definition of the zoom factor in the Y direction

Z Definition of the zoom factor in the Z direction

Skew

Name Description

X Angle Definition of the angle by which the vertical sides are

to be skewed

X Angle Unit Selection of the unit of the angle:

· Deg: Degrees (full circle = 360 deg)

· Rad: Radians (full circle = 2*Pi*Radians)

· Turn: Number of turns (full circle = 1 turn)

· Grad: Gon (full circle = 400 grad)

Y Angle Definition of the angle by which the horizontal sides

are to be skewed

Y Angle Unit Selection of the unit of the angle:

· Deg: Degrees (full circle = 360 deg)

· Rad: Radians (full circle = 2*Pi*Radians)

· Turn: Number of turns (full circle = 1 turn)

· Grad: Gon (full circle = 400 grad)

Origin

Name Description

X Definition of the X coordinate of the origin of the

transformations

X Unit Selection of the unit of the coordinate:

· Pixels for an absolute position

· Percent for a relative position

Y Definition of the Y coordinate of the origin of the

transformations

Y Unit Selection of the unit of the coordinate:

· Pixels for an absolute position

· Percent for a relative position

Z Definition of the Z coordinate of the origin of the

transformations

Z Unit Selection of the unit of the coordinate:

· Pixels for an absolute position

· Percent for a relative position

Perspective

Name Description

Distance Definition of the distance of the perspective

Distance Unit Selection of the unit of the coordinate:

· Pixels for an absolute position

· Percent for a relative position

Origin X Definition of the X coordinate of the origin of the

perspective

Origin X Unit Selection of the unit of the coordinate:

· Pixels for an absolute position

· Percent for a relative position

Origin Y Definition of the Y coordinate of the origin of the

perspective

Origin Y Unit Selection of the unit of the coordinate:

· Pixels for an absolute position

· Percent for a relative position

5.1.4 Box Shadow Editor

You can set a shadow for the control with this editor.

Items List of all objects added

Delete the selected object

Change the object order (top = left)

Add a new object

Category: Colors

Name Description

Color Definition of the color of the shadow

Category: General

Name Description

blur Definition of the blur

blur unit Selecting the unit:

· Pixels for absolute blurring

inset Selection of whether the shadow should be drawn at

the top left inside the control instead of at the bottom

right outside the control

offsetX Definition of the offset in the X direction

offsetX unit Selecting the unit:

· Pixel for an absolute offset

offsetY Definition of the offset in the Y direction

offsetY unit Selecting the unit:

· Pixel for an absolute offset

spread Definition of the spread of the shadow

spread unit Selecting the unit:

· Pixel for an absolute spread

5.2 Beckhoff Controls

Some display names of attributes have been renamed from version 1.10.

Name Description

Bar Chart [} 135] Bar chart that can be configured with various

elements.

Button [} 160] Simple button.

Checkbox [} 172] Simple checkbox. A checkbox has a ToggleState

parameter. This parameter has the value "Normal" if

no checkmark is set and "Active" if the checkmark is

set. The .onToggleStateChanged event can be used

to perform actions when the state of the checkbox

changes.

Combobox [} 178] A combo box is a drop-down menu for selecting one

of several options. Each option is defined by its ID

and also has a text that is displayed in the drop-down

menu, and a value.

Datagrid [} 196] Table for generic display of data.

Ellipse [} 216] Ellipse

Event Grid [} 222] Table for displaying events.

IFrame [} 232] Nested browser context. Embeds another HTML

page in the current visualization.

Image [} 237] Image display

Keyboard [} 244] On-screen keyboard

Line [} 258] Straight line

Linear Gauge [} 292] Linear display

Line Chart [} 267] Line chart

Polygon [} 315] Closed shape formed from a set of interconnected

straight lines. The last point is automatically

connected to the first point.

Radial Gauge [} 323] Radial display

Rectangle [} 345] Rectangle

Textblock [} 353] Text block for displaying text

Textbox [} 362] Text box for entering text.

Toggle Button [} 372] Button that can be toggled between two states.

Trend Line Chart [} 379] Line chart for historicized data

Video [} 407] Display area for a video.

5.2.1 Bar Chart

A bar chart represents data with rectangular bars. It can be statically filled with data or dynamically supplied

with data via an array.

A description of the configuration can be found in chapter Configuration [} 143].

Attributes

Category: Colors

Name Description

GridBackgroundColor [} 146] Definition of the background color of the coordinate

system

XAxisColor [} 150] Definition of the color of the x-axis

YAxisColor [} 154] Definition of the color of the y-axis

GridLineColor [} 146] Definition of the color of the coordinate grid

SubgridLineColor [} 150] Definition of the color of the coordinate subgrid

XLabelFontColor [} 151] Definition of the font color of the x-axis labels

YLabelFontColor [} 155] Definition of the font color of the y-axis labels

YAxisNameFontColor [} 157] Definition of the font color of the y-axis name

BackgroundColor [} 433] Definition of the background color

BorderColor [} 432] Definition of the border color of the control

Category: Layout

Name Description

Left [} 426] Definition of the distance from the left side to the left

side of the surrounding control

LeftUnit [} 426] Definition of the unit of the distance to the right side

of the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Top [} 426] Definition of the distance from the top side to the top

side of the surrounding control

TopUnit [} 426] Selection of the unit of the distance to the top side of

the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Right [} 429] Definition of the distance from the right side to the

right side of the surrounding control

RightUnit [} 429] Selection of the unit of the distance to the right side

of the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Bottom [} 429] Definition of the distance from the bottom side to the

bottom side of the surrounding control

BottomUnit [} 429] Selection of the unit of the distance to the bottom

side of the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Width [} 427] Definition of the external width of the control

WidthUnit [} 427] Selection of the unit of the width:

· Pixels for an absolute width

· Percent for a relative width

Height [} 428] Definition of the external height of the control

HeightUnit [} 428] Selection of the unit of the height:

· Pixels for an absolute height

· Percent for a relative height

MaxWidth [} 437] Definition of the maximum width if the control size is

defined as dynamic

MaxWidthUnit [} 437] Selection of the unit of the maximum width:

· Pixels for an absolute value

· Percent for a relative value

MinWidth [} 438] Definition of the minimum width if the control size is

defined as dynamic

MinWidthUnit [} 438] Selection of the unit of the minimum width:

· Pixels for an absolute value

· Percent for a relative value

MaxHeight [} 436] Definition of the maximum height if the control size is

defined as dynamic

MaxHeightUnit [} 437] Selection of the unit of the maximum height:

· Pixels for an absolute value

· Percent for a relative value

MinHeight [} 436] Definition of the minimum height if the control size is

defined as dynamic

Name Description

MinHeightUnit [} 436] Selection of the unit of the minimum height:

· Pixels for an absolute value

· Percent for a relative value

RenderedLeft [} 430] Calculated distance in pixels from the left side to the

left side of the surrounding control

RenderedTop [} 430] Calculated distance in pixels from the top side to the

top side of the surrounding control

RenderedRight [} 431] Calculated distance in pixels from the right side to the

right side of the surrounding control

RenderedBottom [} 430] Calculated distance in pixels from the bottom side to

the bottom side of the surrounding control

RenderedWidth [} 431] Calculated width of the control in pixels

RenderedHeight [} 431] Calculated height of the control in pixels

GridRowIndex [} 432] Definition of the row of a grid in which the control is to

be displayed

GridColumnIndex [} 432] Definition of the column of a grid in which the control

is to be displayed

Opacity [} 438] Definition of the transparency of the entire control

Visibility [} 439] Selection of the visibility of a control:

· Visible: Control is visible

· Hidden: Control is invisible, but is drawn – controls

behind it cannot be operated

· Collapsed: Control is invisible and is not drawn –

controls behind it can be operated

ZIndex [} 440] Definition of the position on the Z-axis

Transform [} 439] Definition of a transformation of a control:

· Translate: Translate in X-, Y-, Z-direction

· Rotate: Rotate by an angle

· Scale: Zoom by a factor

· Skew: Sides shown skewed by an angle

· Origin: Set the origin of the transformation relative

to the position of the control

· Perspective: Set the perspective of the

transformations of all child elements

BoxShadow [} 440] Definition of a shadow

WidthMode [} 427] Selection of the method of calculating the width:

· Value: The width is defined by the width entered.

· Parent: The width is defined by the distance to the

left and right side of the parent element. The

"Width" attribute is ignored in all calculations!

HeightMode [} 428] Selection of the method of calculating the height:

· Value: The height is defined by the height entered.

· Parent: The height is defined by the distance to the

top and bottom side of the parent element. The

"Height" attribute is ignored in all calculations!

Category: Common

Name Description

BarGraphData [} 146] Definition of the data to be displayed as graph using

the 'Bar Graph Data [} 145]' dialog

BarGraphColors [} 145] Definition of the colors of the configured bar graphs

using the 'Bar Graph Color [} 144]' dialog

BarGraphWidth [} 146] Definition of the width of the individual bars.

IsEnabled [} 425] Selection of whether a control should be activated

Id [} 424] Definition of the name of the control

Type [} 439] Type name of the control.

ClassNames [} 425] Definition of control classes

IsAttached [} 425] If a control is logically assigned in the DOM.

ToolTip [} 438] Definition of the tool tip for the control

Category: Border

Name Description

BorderRadius [} 433] Definition of the radius of the four corners to round

them off

BorderStyle [} 433] Selection of the border style of the four sides of the

control

BorderWidth [} 433] Definition of the border width of the four sides of the

control

Category: Background Image

Name Description

BackgroundImage [} 434] Definition of an image that is located above the

background color

BackgroundImageHeight [} 435] Definition of the height of the background image

BackgroundImageHeightUnit [} 435] Selection of the unit of the height of the background

image:

· Pixels for an absolute height

· Percent for a relative height

BackgroundImageWidth [} 434] Definition of the width of the background image

BackgroundImageWidthUnit [} 434] Selection of the unit of the width of the background

image:

· Pixels for an absolute width

· Percent for a relative width

BackgroundImagePadding [} 435] Definition of an additional distance between the

border of the control and background image for the

four sides

BackgroundImageVerticalAlignment [} 436] Definition of the vertical alignment of the background

image within the control

BackgroundImageHorizontalAlignment [} 435] Definition of the horizontal alignment of the

background image within the control

Category: XAxis

Name Description

ShowXAxis [} 148] Selecting whether the x-axis is to be displayed

XShowLabels [} 148] Selecting whether the x-axis labels are to be

displayed

XMainTickSteps [} 153] Definition of the step size of the x-axis main

subdivision

XMainTickMinValue [} 152] Definition of the minimum value of the x-axis main

subdivision

XMainTickMaxValue [} 152] Definition of the maximum value of the x-axis main

subdivision

ShowXSubTicks [} 148] Selecting whether the subcoordinate points are to be

displayed on the x-axis

XSubTickSteps [} 153] Definition of the step size of the x-axis subdivision

XAxisAutoScaling [} 150] Selecting whether the x-axis should be automatically

scaled according to the data sets. 'Maintick Min

Value', 'Maintick Max Value' and 'X-Axis Maintick

Steps' need not be set.

XAxisDecimalPlaces [} 151] Definition of the decimal places displayed for the xaxis

XAxisWidth [} 153] Definition of the x-axis width

XLabelFontFamily [} 151] Definition of the font using the name of the font family

or the keyword

XLabelFontSize [} 151] Definition of the font size for the x-axis labels

XLabelFontSizeUnit [} 152] Selecting the font size unit for the x-axis labels:

· Pixels for an absolute size

· Percent for a relative size

XLabelFontWeight [} 152] Selecting the font weight of the x-axis labels:

· Normal

· Bold: Bold

XAxisFormat [} 153] Definition of the formatting of the x-axis labels

Category: YAxis

Name Description

ShowYAxis [} 149] Selecting whether the y-axis is to be displayed

YPosition [} 159] Selecting the position of the y-axis on the coordinate

system

· Left: Y-axis is displayed on the left side of the

coordinate system.

· Right: Y-axis is displayed on the right side of the

coordinate system.

YAxisAutoScaling [} 154] Selecting whether the y-axis should be automatically

scaled according to the data sets. 'Maintick Min

Value', 'Maintick Max Value' and 'Y-Axis Maintick

Steps' need not be set.

YAxisDecimalPlaces [} 155] Definition of the decimal places displayed for the yaxis

YAxisUnit [} 159] Definition of the unit of the y-axis

YAxisWidth [} 159] Definition of the y-axis width

ShowYAxisName [} 149] Selecting whether the y-axis name is to be displayed

YAxisName [} 157] Definition of the y-axis name

YAxisNameFontFamily [} 157] Definition of the font using the name of the font family

or the keyword

YAxisNameFontSize [} 158] Definition of the font size of the y-axis name

YAxisNameFontSizeUnit [} 158] Selecting the unit of the font size of the y-axis name:

· Pixels for an absolute size

· Percent for a relative size

YAxisNameFontWeight [} 158] Selecting of the font weight of the y-axis name:

· Normal

· Bold: Bold

YShowLabels [} 149] Selecting whether the y-axis labels are to be

displayed

YLabelFontFamily [} 155] Definition of the font using the name of the font family

or the keyword

YLabelFontSize [} 155] Definition of the font size for the y-axis labels

YLabelFontSizeUnit [} 156] Selecting the font size unit for the y-axis labels:

· Pixels for an absolute size

· Percent for a relative size

YLabelFontWeight [} 156] Selecting the font weight of the y-axis labels:

· Normal

· Bold: Bold

YMainTickMinValue [} 156] Definition of the minimum value of the y-axis main

subdivision

YMainTickMaxValue [} 156] Definition of the maximum value of the y-axis main

subdivision

YMainTickSteps [} 157] Definition of the step size of the y-axis main

subdivision

ShowYSubTicks [} 149] Selecting whether the subcoordinate points are to be

displayed on the y-axis

YSubTickSteps [} 158] Definition of the step size of the y-axis subdivision

Category: Grid

Name Description

ShowGrid [} 147] Selecting whether the coordinate grid is to be

displayed

GridShowHorizontalLines [} 147] Selecting whether the horizontal lines of the

coordinate grid are to be displayed

GridShowVerticalLines [} 147] Selecting whether the vertical lines of the coordinate

grid are to be displayed

GridLineWidth [} 147] Definition of the line width of the coordinate grid

SubgridShowHorizontalLines [} 147] Selecting whether the horizontal lines of the

coordinate subgrid are to be displayed

SubgridShowVerticalLines [} 148] Selecting whether the vertical lines of the coordinate

subgrid are to be displayed

SubgridLineWidth [} 150] Definition of the line width of the coordinate subgrid

Events

Category: Framework

Name Description

onAttached [} 440] The control was added to the display.

onDetached [} 440] The control was removed from the display.

onInitialized [} 441] The control was initialized.

onMoved [} 443] The control was moved in relation to the browser

window.

onResized [} 444] The size of the control was changed.

Category: Operator

Name Description

onPressed [} 443] A mouse click was executed or a touch screen was

briefly touched.

onMouseClick [} 441] The left mouse button was clicked over the control

and released.

onMouseDoubleClick [} 441] The left mouse button was clicked twice over the

control and released.

onMouseRightClick [} 442] The right mouse button was clicked over the control

and released.

onMouseDown [} 441] A mouse button was depressed over the control.

onMouseEnter [} 442] The mouse pointer was moved over the control.

onMouseLeave [} 442] The mouse pointer has left the control.

onMouseUp [} 443] A mouse button was released over the control.

onMouseDownLeft [} 441] The left mouse button was depressed over the

control.

onMouseDownRight [} 441] The right mouse button was depressed over the

control.

onMouseMove [} 442] The mouse was moved over the control.

onMouseOver [} 442] The mouse pointer was moved over the control or

one of its children.

onMouseOut [} 442] The mouse pointer has left the control or one of its

child controls.

onMouseUpLeft [} 443] The left mouse button was released over the control.

onMouseUpRight [} 443] The right mouse button was released over the

control.

onMouseWheel [} 443] The mouse wheel was moved over the control.

onTouchStart [} 444] A finger/stylus was placed against a touch screen.

onTouchMove [} 444] A finger/stylus was moved on a touch screen.

onTouchEnd [} 444] A finger/stylus was lifted off a touch screen.

onTouchCancel [} 444] An interaction with a touch screen was aborted.

Access rights

Name Description

observe [} 444] Determines whether the control is generally

observable.

operate [} 445] Determines whether the control is generally operable.

Inheritance hierarchy

Control [} 419]

Bar Chart

Note: Available since version 1.8

See also

API reference [} 1179] for this control

5.2.1.1 Configuration

A bar chart can be configured in different ways:

· Via Engineering [} 144]

◦ Array of numbers

◦ Array of arrays of numbers

· Via an array from the PLC [} 144]

◦ Array of numbers

aVaules : ARRAY [1..10] OF INT;

◦ Array of arrays of numbers

aValues : ARRAY [1..2, 1..10] OF INT;

Definition via Engineering:

1. Add a bar chart to the interface.

2. Define which type of object you want to use.

Array of numbers (Array<number>):

3. Define the number of members of the array and their values for the 'Bar Graph Data' attribute of the

'Common' category using the 'Bar Graph Data [} 145]' dialog.

Array of arrays of numbers (Array<Array<number>>)

3. Define the number of data sets of the array for the 'Bar Graph Data' attribute of the 'Common' category

using the 'Bar Graph Data [} 145]' dialog.

4. Define the number of members of the array and their values using the 'Bar Graph Data [} 145]' dialog.

Definition via an array from the PLC:

1. Add a bar chart to the interface.

2. Link the array to the 'Bar Graph Data' attribute of the 'Common' category.

Advanced Settings:

1. Define the color of the individual data sets for the 'Bar Graph Colors' attribute of the 'Common' category

using the 'Bar Graph Color [} 144]' dialog.

2. Deactivate the 'X-Axis Autoscaling' attribute of the 'X-Axis' category.

3. Define the minimum and maximum value of the x-axis corresponding to your data set in the 'X-Axis

Maintick Min Value' and 'X-Axis Maintick Max Value' attributes of the 'X-Axis' category.

4. Define the step size matching your data set for the 'X-Axis Maintick Steps' attribute of the 'X-Axis'

category.

Example: https://infosys.beckhoff.com/content/1033/TE2000_TC3_HMI_Engineering/Resources/

zip/9007203226236427.zip

5.2.1.2 Dialogs

5.2.1.2.1 Bar Graph Color Dialog

Use this dialog you define the color of the bar graphs. The color objects are assigned to the arrays of the

data sets sequentially in case of data structure 'Array<Array<number>>'.

Items List of all objects added

Delete the selected object

Change the object order (top = left)

Add a new object

Category: Colors

Name Description

Color Definition of the color of the bar graph

5.2.1.2.2 Bar Graph Data Dialog

You can use this dialog to statically define the data that the bar graph is to display in Engineering. To do this,

you can first choose between the structure of the data as 'Array<Array<number>> ' and 'Array<number>'. In

the second step, you can then define the entries.

Items List of all objects added

Delete the selected object

Change the object order (top = left)

Add a new object

If you have selected the data structure 'Array<Array<number>>', you can first define different arrays, each

representing a bar graph.

Name Description

Array Definition of an array of numbers representing a data

set to be displayed as a bar graph

Each of these arrays has entries that you can define using the second version of the dialog. If you use the

data structure 'Array<number>', this dialog is offered directly.

Name Description

Number Definition of a value from a data set to be displayed

as a bar graph

5.2.1.3 Attributes

5.2.1.3.1 BarGraphColors

Scheme: tchmi:framework#/definitions/ChartBarGraphColorList [} 2086]

Origin: Bar Chart [} 135]

See also

Attribute getter: getBarGraphColors [} 1195]

Attribute setter: setBarGraphColors [} 1196]

Note: Available since version 1.8

5.2.1.3.2 BarGraphData

Scheme: tchmi:framework#/definitions/ChartBarGraphDataDefinitionList [} 2087]

Origin: Bar Chart [} 135]

See also

Attribute getter: getBarGraphData [} 1196]

Attribute setter: setBarGraphData [} 1197]

Note: Available since version 1.8

5.2.1.3.3 BarGraphWidth

Scheme: tchmi:general#/definitions/Number [} 2067]

Origin: Bar Chart [} 135]

See also

Attribute getter: getBarGraphWidth [} 1197]

Attribute setter: setBarGraphWidth [} 1198]

Note: Available since version 1.10

5.2.1.3.4 GridBackgroundColor

Scheme: tchmi:framework#/definitions/SolidColor [} 2133]

Origin: Bar Chart [} 135]

See also

Attribute getter: getGridBackgroundColor [} 1188]

Attribute setter: setGridBackgroundColor [} 1188]

Note: Available since version 1.8

5.2.1.3.5 GridLineColor

Scheme: tchmi:framework#/definitions/SolidColor [} 2133]

Origin: Bar Chart [} 135]

See also

Attribute getter: getGridLineColor [} 1191]

Attribute setter: setGridLineColor [} 1191]

Note: Available since version 1.8

5.2.1.3.6 GridLineWidth

Scheme: tchmi:general#/definitions/Number [} 2067]

Origin: Bar Chart [} 135]

See also

Attribute getter: getGridLineWidth [} 1211]

Attribute setter: setGridLineWidth [} 1212]

Note: Available since version 1.8

5.2.1.3.7 ShowGrid

Scheme: tchmi:general#/definitions/Boolean [} 2060]

Origin: Bar Chart [} 135]

See also

Attribute getter: getShowGrid [} 1215]

Attribute setter: setShowGrid [} 1215]

Note: Available since version 1.8

5.2.1.3.8 GridShowHorizontalLines

Scheme: tchmi:general#/definitions/Boolean [} 2060]

Origin: Bar Chart [} 135]

See also

Attribute getter: getGridShowHorizontalLines [} 1214]

Attribute setter: setGridShowHorizontalLines [} 1214]

Note: Available since version 1.8

5.2.1.3.9 GridShowVerticalLines

Scheme: tchmi:general#/definitions/Boolean [} 2060]

Origin: Bar Chart [} 135]

See also

Attribute getter: getGridShowVerticalLines [} 1208]

Attribute setter: setGridShowVerticalLines [} 1209]

Note: Available since version 1.8

5.2.1.3.10 SubgridShowHorizontalLines

Scheme: tchmi:general#/definitions/Boolean [} 2060]

Origin: Bar Chart [} 135]

See also

Attribute getter: getSubgridShowHorizontalLines [} 1237]

Attribute setter: setSubgridShowHorizontalLines [} 1237]

Note: Available since version 1.8

5.2.1.3.11 SubgridShowVerticalLines

Scheme: tchmi:general#/definitions/Boolean [} 2060]

Origin: Bar Chart [} 135]

See also

Attribute getter: getSubgridShowVerticalLines [} 1236]

Attribute setter: setSubgridShowVerticalLines [} 1236]

Note: Available since version 1.8

5.2.1.3.12 ShowXAxis

Scheme: tchmi:general#/definitions/Boolean [} 2060]

Origin: Bar Chart [} 135]

See also

Attribute getter: getShowXAxis [} 1198]

Attribute setter: setShowXAxis [} 1199]

Note: Available since version 1.8

5.2.1.3.13 XShowLabels

Scheme: tchmi:general#/definitions/Boolean [} 2060]

Origin: Bar Chart [} 135]

See also

Attribute getter: getXShowLabels [} 1199]

Attribute setter: setXShowLabels [} 1200]

Note: Available since version 1.8

5.2.1.3.14 ShowXSubTicks

Scheme: tchmi:general#/definitions/Boolean [} 2060]

Origin: Bar Chart [} 135]

See also

Attribute getter: getShowXSubTicks [} 1206]

Attribute setter: setShowXSubTicks [} 1206]

Note: Available since version 1.8

5.2.1.3.15 ShowYAxis

Scheme: tchmi:general#/definitions/Boolean [} 2060]

Origin: Bar Chart [} 135]

See also

Attribute getter: getShowYAxis [} 1216]

Attribute setter: setShowYAxis [} 1216]

Note: Available since version 1.8

5.2.1.3.16 YShowLabels

Scheme: tchmi:general#/definitions/Boolean [} 2060]

Origin: Bar Chart [} 135]

See also

Attribute getter: getYShowLabels [} 1218]

Attribute setter: setYShowLabels [} 1219]

Note: Available since version 1.8

5.2.1.3.17 ShowYAxisName

Scheme: tchmi:general#/definitions/Boolean [} 2060]

Origin: Bar Chart [} 135]

See also

Attribute getter: getShowYAxisName [} 1220]

Attribute setter: setShowYAxisName [} 1221]

Note: Available since version 1.8

5.2.1.3.18 ShowYSubTicks

Scheme: tchmi:general#/definitions/Boolean [} 2060]

Origin: Bar Chart [} 135]

See also

Attribute getter: getShowYSubTicks [} 1218]

Attribute setter: setShowYSubTicks [} 1218]

Note: Available since version 1.8

5.2.1.3.19 SubgridLineColor

Scheme: tchmi:framework#/definitions/SolidColor [} 2133]

Origin: Bar Chart [} 135]

See also

Attribute getter: getSubgridLineColor [} 1192]

Attribute setter: setSubgridLineColor [} 1192]

Note: Available since version 1.8

5.2.1.3.20 SubgridLineWidth

Scheme: tchmi:general#/definitions/Number [} 2067]

Origin: Bar Chart [} 135]

See also

Attribute getter: getSubgridLineWidth [} 1238]

Attribute setter: setSubgridLineWidth [} 1238]

Note: Available since version 1.8

5.2.1.3.21 XAxisAutoScaling

Scheme: tchmi:general#/definitions/Boolean [} 2060]

Origin: Bar Chart [} 135]

See also

Attribute getter: getXAxisAutoScaling [} 1202]

Attribute setter: setXAxisAutoScaling [} 1202]

Note: Available since version 1.8

5.2.1.3.22 XAxisColor

Scheme: tchmi:framework#/definitions/SolidColor [} 2133]

Origin: Bar Chart [} 135]

See also

Attribute getter: getXAxisColor [} 1190]

Attribute setter: setXAxisColor [} 1190]

Note: Available since version 1.8

5.2.1.3.23 XAxisDecimalPlaces

Scheme: tchmi:general#/definitions/Number [} 2067]

Origin: Bar Chart [} 135]

See also

Attribute getter: getXAxisDecimalPlaces [} 1203]

Attribute setter: setXAxisDecimalPlaces [} 1203]

Note: Available since version 1.8

5.2.1.3.24 XLabelFontColor

Scheme: tchmi:framework#/definitions/SolidColor [} 2133]

Origin: Bar Chart [} 135]

See also

Attribute getter: getXLabelFontColor [} 1193]

Attribute setter: setXLabelFontColor [} 1193]

Note: Available since version 1.8

5.2.1.3.25 XLabelFontFamily

Comma-separated list of fonts as font family or keyword: 'serif', 'sans-serif', 'monospace'.

Scheme: tchmi:framework#/definitions/FontFamily [} 2108]

Origin: Bar Chart [} 135]

See also

Attribute getter: getXLabelFontFamily [} 1209]

Attribute setter: setXLabelFontFamily [} 1210]

Note: Available since version 1.8

5.2.1.3.26 XLabelFontSize

The font size. If the percent is specified as the unit, this is relative to the font size of the parent element.

Scheme: tchmi:framework#/definitions/MeasurementValue [} 2123]

Origin: Bar Chart [} 135]

See also

Attribute getter: getXLabelFontSize [} 1210]

Attribute setter: setXLabelFontSize [} 1211]

Note: Available since version 1.8

5.2.1.3.27 XLabelFontSizeUnit

Pixels, or percent for relative sizes.

Scheme: tchmi:framework#/definitions/MeasurementUnit [} 2123]

Origin: Bar Chart [} 135]

See also

Attribute getter: getXLabelFontSizeUnit [} 1206]

Attribute setter: setXLabelFontSizeUnit [} 1207]

Note: Available since version 1.8

5.2.1.3.28 XLabelFontWeight

Font weight (normal, bold).

Scheme: tchmi:framework#/definitions/FontWeight [} 2109]

Origin: Bar Chart [} 135]

See also

Attribute getter: getXLabelFontWeight [} 1212]

Attribute setter: setXLabelFontWeight [} 1212]

Note: Available since version 1.8

5.2.1.3.29 XMainTickMaxValue

Scheme: tchmi:general#/definitions/Number [} 2067]

Origin: Bar Chart [} 135]

See also

Attribute getter: getXMainTickMaxValue [} 1201]

Attribute setter: setXMainTickMaxValue [} 1201]

Note: Available since version 1.8

5.2.1.3.30 XMainTickMinValue

Scheme: tchmi:general#/definitions/Number [} 2067]

Origin: Bar Chart [} 135]

See also

Attribute getter: getXMainTickMinValue [} 1205]

Attribute setter: setXMainTickMinValue [} 1205]

Note: Available since version 1.8

5.2.1.3.31 XMainTickSteps

Scheme: tchmi:general#/definitions/Number [} 2067]

Origin: Bar Chart [} 135]

See also

Attribute getter: getXMainTickSteps [} 1204]

Attribute setter: setXMainTickSteps [} 1204]

Note: Available since version 1.8

5.2.1.3.32 XSubTickSteps

Scheme: tchmi:general#/definitions/Number [} 2067]

Origin: Bar Chart [} 135]

See also

Attribute getter: getXSubTickSteps [} 1200]

Attribute setter: setXSubTickSteps [} 1200]

Note: Available since version 1.8

5.2.1.3.33 XAxisWidth

Scheme: tchmi:general#/definitions/Number [} 2067]

Origin: Bar Chart [} 135]

See also

Attribute getter: getXAxisWidth [} 1207]

Attribute setter: setXAxisWidth [} 1208]

Note: Available since version 1.8

5.2.1.3.34 XAxisFormat

Schema: tchmi:general#/definitions/Number [} 2067]

Definition of the formatting of the X-axis labels.

The selected function defines the X-axis labels. It is called for each displayed value of the main X-axis

subdivision. In addition it contains the respective time stamp, which is specified in milliseconds.

A function must fulfill the following signature in order to be offered in the engineering. The parameters

mentioned here are set by the control. Further parameters are possible and can be specified per instance in

the engineering.

Example: The value for the Linear Gauge is set by the control. The further parameter "maxDecimals" is

specified in Engineering for each instance.

[ Function ]

exampleFunction(value: number): string;

Parameter

Name Type Description

value number [} 1997]

tchmi:general#/definitions/Number

[} 2067]

The current numerical value of the

X-axis in milliseconds since

01/01/1970.

Return value

Type Description

string [} 1997]

tchmi:general#/definitions/String [} 2069]

The new value of the main X-axis subdivision. HTML

is not allowed here.

Origin: Bar Chart [} 135]

See also

Attribute getter: getXAxisWidth [} 1207]

Attribute setter: setXAxisWidth [} 1208]

Note: Available since version 1.10

5.2.1.3.35 YAxisAutoScaling

Scheme: tchmi:general#/definitions/Boolean [} 2060]

Origin: Bar Chart [} 135]

See also

Attribute getter: getYAxisAutoScaling [} 1226]

Attribute setter: setYAxisAutoScaling [} 1226]

Note: Available since version 1.8

5.2.1.3.36 YAxisColor

Scheme: tchmi:framework#/definitions/SolidColor [} 2133]

Origin: Bar Chart [} 135]

See also

Attribute getter: getYAxisColor [} 1189]

Attribute setter: setYAxisColor [} 1189]

Note: Available since version 1.8

5.2.1.3.37 YAxisDecimalPlaces

Scheme: tchmi:general#/definitions/Number [} 2067]

Origin: Bar Chart [} 135]

See also

Attribute getter: getYAxisDecimalPlaces [} 1224]

Attribute setter: setYAxisDecimalPlaces [} 1224]

Note: Available since version 1.8

5.2.1.3.38 YLabelFontColor

Scheme: tchmi:framework#/definitions/SolidColor [} 2133]

Origin: Bar Chart [} 135]

See also

Attribute getter: getYLabelFontColor [} 1194]

Attribute setter: setYLabelFontColor [} 1194]

Note: Available since version 1.8

5.2.1.3.39 YLabelFontFamily

Comma-separated list of fonts as font family or keyword: 'serif', 'sans-serif', 'monospace'.

Scheme: tchmi:framework#/definitions/FontFamily [} 2108]

Origin: Bar Chart [} 135]

See also

Attribute getter: getYLabelFontFamily [} 1234]

Attribute setter: setYLabelFontFamily [} 1235]

Note: Available since version 1.8

5.2.1.3.40 YLabelFontSize

The font size. If the percent is specified as the unit, this is relative to the font size of the parent element.

Scheme: tchmi:framework#/definitions/MeasurementValue [} 2123]

Origin: Bar Chart [} 135]

See also

Attribute getter: getYLabelFontSize [} 1228]

Attribute setter: setYLabelFontSize [} 1228]

Note: Available since version 1.8

5.2.1.3.41 YLabelFontSizeUnit

Pixels, or percent for relative sizes.

Scheme: tchmi:framework#/definitions/MeasurementUnit [} 2123]

Origin: Bar Chart [} 135]

See also

Attribute getter: getYLabelFontSizeUnit [} 1232]

Attribute setter: setYLabelFontSizeUnit [} 1233]

Note: Available since version 1.8

5.2.1.3.42 YLabelFontWeight

Font weight (normal, bold).

Scheme: tchmi:framework#/definitions/FontWeight [} 2109]

Origin: Bar Chart [} 135]

See also

Attribute getter: getYLabelFontWeight [} 1231]

Attribute setter: setYLabelFontWeight [} 1232]

Note: Available since version 1.8

5.2.1.3.43 YLabelFontWeight

Scheme: tchmi:general#/definitions/Number [} 2067]

Origin: Bar Chart [} 135]

See also

Attribute getter: getYMainTickMaxValue [} 1225]

Attribute setter: setYMainTickMaxValue [} 1225]

Note: Available since version 1.8

5.2.1.3.44 YMainTickMinValue

Scheme: tchmi:general#/definitions/Number [} 2067]

Origin: Bar Chart [} 135]

See also

Attribute getter: getYMainTickMinValue [} 1222]

Attribute setter: setYMainTickMinValue [} 1223]

Note: Available since version 1.8

5.2.1.3.45 YMainTickSteps

Scheme: tchmi:general#/definitions/Number [} 2067]

Origin: Bar Chart [} 135]

See also

Attribute getter: getYMainTickSteps [} 1227]

Attribute setter: setYMainTickSteps [} 1227]

Note: Available since version 1.8

5.2.1.3.46 YAxisName

Scheme: tchmi:general#/definitions/String [} 2069]

Origin: Bar Chart [} 135]

See also

Attribute getter: getYAxisName [} 1221]

Attribute setter: setYAxisName [} 1222]

Note: Available since version 1.8

5.2.1.3.47 YAxisNameFontColor

Scheme: tchmi:framework#/definitions/SolidColor [} 2133]

Origin: Bar Chart [} 135]

See also

Attribute getter: getYAxisNameFontColor [} 1194]

Attribute setter: setYAxisNameFontColor [} 1195]

Note: Available since version 1.8

5.2.1.3.48 YAxisNameFontFamily

Comma-separated list of fonts as font family or keyword: 'serif', 'sans-serif', 'monospace'.

Scheme: tchmi:framework#/definitions/FontFamily [} 2108]

Origin: Bar Chart [} 135]

See also

Attribute getter: getYAxisNameFontFamily [} 1235]

Attribute setter: setYAxisNameFontFamily [} 1236]

Note: Available since version 1.8

5.2.1.3.49 YAxisNameFontSize

The font size. If the percent is specified as the unit, this is relative to the font size of the parent element.

Scheme: tchmi:framework#/definitions/MeasurementValue [} 2123]

Origin: Bar Chart [} 135]

See also

Attribute getter: getYAxisNameFontSize [} 1233]

Attribute setter: setYAxisNameFontSize [} 1234]

Note: Available since version 1.8

5.2.1.3.50 YAxisNameFontSizeUnit

Pixels, or percent for relative sizes.

Scheme: tchmi:framework#/definitions/MeasurementUnit [} 2123]

Origin: Bar Chart [} 135]

See also

Attribute getter: getYAxisNameFontSizeUnit [} 1230]

Attribute setter: setYAxisNameFontSizeUnit [} 1230]

Note: Available since version 1.8

5.2.1.3.51 YAxisNameFontWeight

Font weight (normal, bold).

Scheme: tchmi:framework#/definitions/FontWeight [} 2109]

Origin: Bar Chart [} 135]

See also

Attribute getter: getYAxisNameFontWeight [} 1230]

Attribute setter: setYAxisNameFontWeight [} 1231]

Note: Available since version 1.8

5.2.1.3.52 YSubTickSteps

Scheme: tchmi:general#/definitions/Number [} 2067]

Origin: Bar Chart [} 135]

See also

Attribute getter: getYSubTickSteps [} 1219]

Attribute setter: setYSubTickSteps [} 1220]

Note: Available since version 1.8

5.2.1.3.53 YAxisUnit

Scheme: tchmi:general#/definitions/String [} 2069]

Origin: Bar Chart [} 135]

See also

Attribute getter: getYAxisUnit [} 1223]

Attribute setter: setYAxisUnit [} 1224]

Note: Available since version 1.8

5.2.1.3.54 YAxisWidth

Scheme: tchmi:general#/definitions/Number [} 2067]

Origin: Bar Chart [} 135]

See also

Attribute getter: getYAxisWidth [} 1229]

Attribute setter: setYAxisWidth [} 1229]

Note: Available since version 1.8

5.2.1.3.55 YPosition

Scheme: tchmi:framework#/definitions/ChartBarGraphPosition [} 2087]

Origin: Bar Chart [} 135]

See also

Attribute getter: getYPosition [} 1217]

Attribute setter: setYPosition [} 1217]

Note: Available since version 1.8

5.2.1.4 Themed Resources

These resources cannot be defined for each instance but only for several/all bar charts via the theme file. If

you really want to change only one instance, you must create a class for it.

Note: Available since version 1.10

5.2.1.4.1 DefaultGraphColor

This is the default color used for graphs when nothing is defined in the BarGraphColors [} 145] attribute.

Scheme: tchmi:framework#/definitions/SolidColor [} 2133]

Origin: Bar Chart [} 135]

Note: Available since version 1.10

5.2.2 Button

The button is a simple switching element that provides visual feedback when the background is switched. By

querying the various Operator Events [} 165] a logic can be executed in response.

Attributes

Category: Colors

Name Description

BackgroundColor [} 433] Definition of the background color

BorderColor [} 432] Definition of the border color of the control

Category: Layout

Name Description

Left [} 426] Definition of the distance from the left side to the left

side of the surrounding control

LeftUnit [} 426] Definition of the unit of the distance to the right side

of the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Top [} 426] Definition of the distance from the top side to the top

side of the surrounding control

TopUnit [} 426] Selection of the unit of the distance to the top side of

the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Right [} 429] Definition of the distance from the right side to the

right side of the surrounding control

RightUnit [} 429] Selection of the unit of the distance to the right side

of the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Bottom [} 429] Definition of the distance from the bottom side to the

bottom side of the surrounding control

BottomUnit [} 429] Selection of the unit of the distance to the bottom

side of the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Width [} 427] Definition of the external width of the control

WidthUnit [} 427] Selection of the unit of the width:

· Pixels for an absolute width

· Percent for a relative width

Height [} 428] Definition of the external height of the control

HeightUnit [} 428] Selection of the unit of the height:

· Pixels for an absolute height

· Percent for a relative height

MaxWidth [} 437] Definition of the maximum width if the control size is

defined as dynamic

MaxWidthUnit [} 437] Selection of the unit of the maximum width:

· Pixels for an absolute value

· Percent for a relative value

MinWidth [} 438] Definition of the minimum width if the control size is

defined as dynamic

MinWidthUnit [} 438] Selection of the unit of the minimum width:

· Pixels for an absolute value

· Percent for a relative value

MaxHeight [} 436] Definition of the maximum height if the control size is

defined as dynamic

MaxHeightUnit [} 437] Selection of the unit of the maximum height:

· Pixels for an absolute value

· Percent for a relative value

MinHeight [} 436] Definition of the minimum height if the control size is

defined as dynamic

Name Description

MinHeightUnit [} 436] Selection of the unit of the minimum height:

· Pixels for an absolute value

· Percent for a relative value

RenderedLeft [} 430] Calculated distance in pixels from the left side to the

left side of the surrounding control

RenderedTop [} 430] Calculated distance in pixels from the top side to the

top side of the surrounding control

RenderedRight [} 431] Calculated distance in pixels from the right side to the

right side of the surrounding control

RenderedBottom [} 430] Calculated distance in pixels from the bottom side to

the bottom side of the surrounding control

RenderedWidth [} 431] Calculated width of the control in pixels

RenderedHeight [} 431] Calculated height of the control in pixels

GridRowIndex [} 432] Definition of the row of a grid in which the control is to

be displayed

GridColumnIndex [} 432] Definition of the column of a grid in which the control

is to be displayed

Opacity [} 438] Definition of the transparency of the entire control

Visibility [} 439] Selection of the visibility of a control:

· Visible: Control is visible

· Hidden: Control is invisible, but is drawn – controls

behind it cannot be operated

· Collapsed: Control is invisible and is not drawn –

controls behind it can be operated

ZIndex [} 440] Definition of the position on the Z-axis

Transform [} 439] Definition of a transformation of a control:

· Translate: Translate in X-, Y-, Z-direction

· Rotate: Rotate by an angle

· Scale: Zoom by a factor

· Skew: Sides shown skewed by an angle

· Origin: Set the origin of the transformation relative

to the position of the control

· Perspective: Set the perspective of the

transformations of all child elements

BoxShadow [} 440] Definition of a shadow

WidthMode [} 427] Selection of the method of calculating the width:

· Value: The width is defined by the width entered.

· Parent: The width is defined by the distance to the

left and right side of the parent element. The

"Width" attribute is ignored in all calculations!

HeightMode [} 428] Selection of the method of calculating the height:

· Value: The height is defined by the height entered.

· Parent: The height is defined by the distance to the

top and bottom side of the parent element. The

"Height" attribute is ignored in all calculations!

Category: Common

Name Description

Text [} 169] Definition of the text displayed in the button

StateSymbol [} 171] Reflects the pressed state of the button for the

assigned symbol and vice versa.

If the button is pressed, the symbol is set to true.

If the button is released, the symbol is set to false.

If the symbol is set to true independent of the button,

the button is pressed.

If the symbol is set to false independent of the button,

the button is released.

During an active user interaction, no value changes

of the symbol are transferred to the button.

IsEnabled [} 425] Selection of whether a control should be activated

Id [} 424] Definition of the name of the control

Type [} 439] Type name of the control.

ClassNames [} 425] Definition of control classes

IsAttached [} 425] If a control is logically assigned in the DOM.

ToolTip [} 438] Definition of the tool tip for the control

Category: Border

Name Description

BorderRadius [} 433] Definition of the radius of the four corners to round

them off

BorderStyle [} 433] Selection of the border style of the four sides of the

control

BorderWidth [} 433] Definition of the border width of the four sides of the

control

Category: Icon

Name Description

Icon [} 168] Definition of an optional image in the button

IconWidth [} 170] Definition of the width of the icon

IconWidthUnit [} 170] Definition of the unit of the width:

· Pixels for an absolute width

· Percent for a relative width

IconHeight [} 167] Definition of the height of the icon

IconHeightUnit [} 167] Definition of the unit of height:

· Pixels for an absolute height

· Percent for a relative height

IconHorizontalAlignment [} 168] Selecting the horizontal alignment of the icon within

the control

IconVerticalAlignment [} 169] Selecting the vertical alignment of the icon within the

control

IconPadding [} 168] Definition of the distance of the icon to the border

Category: Background Image

Name Description

BackgroundImage [} 434] Definition of an image that is located above the

background color

BackgroundImageHeight [} 435] Definition of the height of the background image

BackgroundImageHeightUnit [} 435] Selection of the unit of the height of the background

image:

· Pixels for an absolute height

· Percent for a relative height

BackgroundImageWidth [} 434] Definition of the width of the background image

BackgroundImageWidthUnit [} 434] Selection of the unit of the width of the background

image:

· Pixels for an absolute width

· Percent for a relative width

BackgroundImagePadding [} 435] Definition of an additional distance between the

border of the control and background image for the

four sides

BackgroundImageVerticalAlignment [} 436] Definition of the vertical alignment of the background

image within the control

BackgroundImageHorizontalAlignment [} 435] Definition of the horizontal alignment of the

background image within the control

Category: Text

Name Description

TextColor [} 169] Definition of the text color

TextFontFamily [} 166] Definition of the font using the name of the font family

or the keyword

TextFontSize [} 166] Definition of the font size

TextFontSizeUnit [} 166] Definition of the font size unit:

· Pixels for an absolute size

· Percent for a relative size

TextFontStyle [} 167] Selecting the font style:

· Normal

· Italic: italic

· Oblique: slanted

TextFontWeight [} 167] Selecting the font weight of the text:

· Normal

· Bold: Bold

TextPadding [} 169] Definition of the distance of the text to the border

TextVerticalAlignment [} 170] Selecting the vertical alignment of the text

TextHorizontalAlignment [} 168] Selecting the horizontal alignment of the text

WordWrap [} 171] Selecting whether the text wraps if it is too long for

one row

Events

Category: Framework

Name Description

onAttached [} 440] The control was added to the display.

onDetached [} 440] The control was removed from the display.

onInitialized [} 441] The control was initialized.

onMoved [} 443] The control was moved in relation to the browser

window.

onResized [} 444] The size of the control was changed.

Category: Operator

Name Description

onStateChanged [} 171] The pressed state has changed.

onStatePressed [} 171] The pressed state has changed from not pressed to

pressed.

onStateReleased [} 172] The pressed state has changed from pressed to not

pressed.

onPressed [} 443] A mouse click was executed or a touch screen was

briefly touched.

onMouseClick [} 441] The left mouse button was clicked over the control

and released.

onMouseDoubleClick [} 441] The left mouse button was clicked twice over the

control and released.

onMouseRightClick [} 442] The right mouse button was clicked over the control

and released.

onMouseDown [} 441] A mouse button was depressed over the control.

onMouseEnter [} 442] The mouse pointer was moved over the control.

onMouseLeave [} 442] The mouse pointer has left the control.

onMouseUp [} 443] A mouse button was released over the control.

onMouseDownLeft [} 441] The left mouse button was depressed over the

control.

onMouseDownRight [} 441] The right mouse button was depressed over the

control.

onMouseMove [} 442] The mouse was moved over the control.

onMouseOver [} 442] The mouse pointer was moved over the control or

one of its children.

onMouseOut [} 442] The mouse pointer has left the control or one of its

child controls.

onMouseUpLeft [} 443] The left mouse button was released over the control.

onMouseUpRight [} 443] The right mouse button was released over the

control.

onMouseWheel [} 443] The mouse wheel was moved over the control.

onTouchStart [} 444] A finger/stylus was placed against a touch screen.

onTouchMove [} 444] A finger/stylus was moved on a touch screen.

onTouchEnd [} 444] A finger/stylus was lifted off a touch screen.

onTouchCancel [} 444] An interaction with a touch screen was aborted.

Access rights

Name Description

observe [} 444] Determines whether the control is generally

observable.

operate [} 445] Determines whether the control is generally operable.

Inheritance hierarchy

Control [} 419]

Button

Note: Available since version 1.8

See also

API reference [} 1239] for this control

5.2.2.1 Attributes

5.2.2.1.1 TextFontFamily

Comma-separated list of fonts as font family or keyword: 'serif', 'sans-serif', 'monospace'.

Scheme: tchmi:framework#/definitions/FontFamily [} 2108]

Origin: Button [} 160]

See also

Attribute getter: getTextFontFamily [} 1262]

Attribute setter: setTextFontFamily [} 1263]

Note: Available since version 1.8

5.2.2.1.2 TextFontSize

The font size. If the percent is specified as the unit, this is relative to the font size of the parent element.

Scheme: tchmi:framework#/definitions/MeasurementValue [} 2123]

Origin: Button [} 160]

See also

Attribute getter: getTextFontSize [} 1256]

Attribute setter: setTextFontSize [} 1256]

Note: Available since version 1.8

5.2.2.1.3 TextFontSizeUnit

Pixels, or percent for relative sizes.

Scheme: tchmi:framework#/definitions/MeasurementUnit [} 2123]

Origin: Button [} 160]

See also

Attribute getter: getTextFontSizeUnit [} 1257]

Attribute setter: setTextFontSizeUnit [} 1257]

Note: Available since version 1.8

5.2.2.1.4 TextFontStyle

Font style (normal, italic: oblique with special characters, oblique)

Scheme: tchmi:framework#/definitions/FontStyle [} 2108]

Origin: Button [} 160]

See also

Attribute getter: getTextFontStyle [} 1260]

Attribute setter: setTextFontStyle [} 1261]

Note: Available since version 1.8

5.2.2.1.5 TextFontWeight

Font weight (normal, bold).

Scheme: tchmi:framework#/definitions/FontWeight [} 2109]

Origin: Button [} 160]

See also

Attribute getter: getTextFontWeight [} 1261]

Attribute setter: setTextFontWeight [} 1262]

Note: Available since version 1.8

5.2.2.1.6 IconHeight

Numerical value of the image height of the icon.

Scheme: tchmi:framework#/definitions/MeasurementValue [} 2123]

Origin: Button [} 160]

See also

Attribute getter: getIconHeight [} 1250]

Attribute setter: setIconHeight [} 1251]

Note: Available since version 1.8

5.2.2.1.7 IconHeightUnit

Pixels, or percent for relative positioning.

Scheme: tchmi:framework#/definitions/MeasurementUnit [} 2123]

Origin: Button [} 160]

See also

Attribute getter: getIconHeightUnit [} 1251]

Attribute setter: setIconHeightUnit [} 1252]

Note: Available since version 1.8

5.2.2.1.8 IconHorizontalAlignment

Horizontal alignment of the icon.

Scheme: tchmi:framework#/definitions/HorizontalAlignment [} 2118]

Origin: Button [} 160]

See also

Attribute getter: getIconHorizontalAlignment [} 1253]

Attribute setter: setIconHorizontalAlignment [} 1253]

Note: Available since version 1.8

5.2.2.1.9 TextHorizontalAlignment

Horizontal alignment of the text.

Scheme: tchmi:framework#/definitions/HorizontalAlignment [} 2118]

Origin: Button [} 160]

See also

Attribute getter: getTextHorizontalAlignment [} 1255]

Attribute setter: setTextHorizontalAlignment [} 1255]

Note: Available since version 1.8

5.2.2.1.10 Icon

Defines an optional image in the button.

Scheme: tchmi:framework#/definitions/Path [} 2128]

Origin: Button [} 160]

See also

Attribute getter: getIcon [} 1247]

Attribute setter: setIcon [} 1248]

Note: Available since version 1.8

5.2.2.1.11 IconPadding

Defines the distance of the icon to the border.

Scheme: tchmi:framework#/definitions/Padding [} 2127]

Origin: Button [} 160]

See also

Attribute getter: getIconPadding [} 1254]

Attribute setter: setIconPadding [} 1254]

Note: Available since version 1.8

5.2.2.1.12 TextPadding

Defines the distance of the text to the border.

Scheme: tchmi:framework#/definitions/Padding [} 2127]

Origin: Button [} 160]

See also

Attribute getter: getTextPadding [} 1258]

Attribute setter: setTextPadding [} 1259]

Note: Available since version 1.8

5.2.2.1.13 Text

Scheme: tchmi:general#/definitions/String [} 2069]

Origin: Button [} 160]

See also

Attribute getter: getText [} 1246]

Attribute setter: setText [} 1247]

Note: Available since version 1.8

5.2.2.1.14 TextColor

Scheme: tchmi:framework#/definitions/SolidColor [} 2133]

Origin: Button [} 160]

See also

Attribute getter: getTextColor [} 1246]

Attribute setter: setTextColor [} 1246]

Note: Available since version 1.8

5.2.2.1.15 IconVerticalAlignment

Vertical alignment of the icon.

Scheme: tchmi:framework#/definitions/VerticalAlignment [} 2147]

Origin: Button [} 160]

See also

Attribute getter: getIconVerticalAlignment [} 1252]

Attribute setter: setIconVerticalAlignment [} 1252]

Note: Available since version 1.8

5.2.2.1.16 TextVerticalAlignment

Vertical alignment of the text.

Scheme: tchmi:framework#/definitions/VerticalAlignment [} 2147]

Origin: Button [} 160]

See also

Attribute getter: getTextVerticalAlignment [} 1258]

Attribute setter: setTextVerticalAlignment [} 1258]

Note: Available since version 1.8

5.2.2.1.17 IconWidth

Numerical value of the image width of the icon.

Scheme: tchmi:framework#/definitions/MeasurementValue [} 2123]

Origin: Button [} 160]

See also

Attribute getter: getIconWidth [} 1248]

Attribute setter: setIconWidth [} 1249]

Note: Available since version 1.8

5.2.2.1.18 IconWidthUnit

Pixels, or percent for relative positioning.

Scheme: tchmi:framework#/definitions/MeasurementUnit [} 2123]

Origin: Button [} 160]

See also

Attribute getter: getIconWidthUnit [} 1249]

Attribute setter: setIconWidthUnit [} 1250]

Note: Available since version 1.8

5.2.2.1.19 WordWrap

Wraps the text if it is too long to fit in one row.

Scheme: tchmi:general#/definitions/Boolean [} 2060]

Origin: Button [} 160]

See also

Attribute getter: getWordWrap [} 1259]

Attribute setter: setWordWrap [} 1260]

Note: Available since version 1.8

5.2.2.1.20 StateSymbol

Reflects the pressed state of the button for the assigned symbol and vice versa.

If the button is pressed, the symbol is set to true.

If the button is released, the symbol is set to false.

If the symbol is set to true independent of the button, the button is pressed.

If the symbol is set to false independent of the button, the button is released.

During an active user interaction, no value changes of the symbol are transferred to the button.

Scheme: tchmi:general#/definitions/TcHmiButtonStateSymbol [} 2134]

Origin: Button [} 160]

See also

Attribute getter: getStateSymbol [} 1263]

Attribute setter: setStateSymbol [} 1264]

Note: Available since version 1.10

5.2.2.2 Events

5.2.2.2.1 onStateChanged

The pressed state has changed.

Origin: Button [} 372]

Note: Available since version 1.10

5.2.2.2.2 onStatePressed

The pressed state has changed from not pressed to pressed.

Origin: Button [} 372]

Note: Available since version 1.10

5.2.2.2.3 onStateReleased

The pressed state has changed from pressed to not pressed.

Origin: Button [} 372]

Note: Available since version 1.10

5.2.3 Checkbox

A checkbox has a ToggleState [} 177] parameter. This parameter has the value "Normal" if no checkmark is

set and "Active" if the checkmark is set.

The .onToggleStateChanged [} 178] event can be used to perform actions when the state of the checkbox

changes.

Attributes

Category: Colors

Name Description

BackgroundColor [} 433] Definition of the background color

BorderColor [} 432] Definition of the border color of the control

ToggleStateIconColor [} 178] Definition of the color of the toggle state icon

Category: Layout

Name Description

Left [} 426] Definition of the distance from the left side to the left

side of the surrounding control

LeftUnit [} 426] Definition of the unit of the distance to the right side

of the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Top [} 426] Definition of the distance from the top side to the top

side of the surrounding control

TopUnit [} 426] Selection of the unit of the distance to the top side of

the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Right [} 429] Definition of the distance from the right side to the

right side of the surrounding control

RightUnit [} 429] Selection of the unit of the distance to the right side

of the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Bottom [} 429] Definition of the distance from the bottom side to the

bottom side of the surrounding control

BottomUnit [} 429] Selection of the unit of the distance to the bottom

side of the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Width [} 427] Definition of the external width of the control

WidthUnit [} 427] Selection of the unit of the width:

· Pixels for an absolute width

· Percent for a relative width

Height [} 428] Definition of the external height of the control

HeightUnit [} 428] Selection of the unit of the height:

· Pixels for an absolute height

· Percent for a relative height

MaxWidth [} 437] Definition of the maximum width if the control size is

defined as dynamic

MaxWidthUnit [} 437] Selection of the unit of the maximum width:

· Pixels for an absolute value

· Percent for a relative value

MinWidth [} 438] Definition of the minimum width if the control size is

defined as dynamic

MinWidthUnit [} 438] Selection of the unit of the minimum width:

· Pixels for an absolute value

· Percent for a relative value

MaxHeight [} 436] Definition of the maximum height if the control size is

defined as dynamic

MaxHeightUnit [} 437] Selection of the unit of the maximum height:

· Pixels for an absolute value

· Percent for a relative value

MinHeight [} 436] Definition of the minimum height if the control size is

defined as dynamic

Name Description

MinHeightUnit [} 436] Selection of the unit of the minimum height:

· Pixels for an absolute value

· Percent for a relative value

RenderedLeft [} 430] Calculated distance in pixels from the left side to the

left side of the surrounding control

RenderedTop [} 430] Calculated distance in pixels from the top side to the

top side of the surrounding control

RenderedRight [} 431] Calculated distance in pixels from the right side to the

right side of the surrounding control

RenderedBottom [} 430] Calculated distance in pixels from the bottom side to

the bottom side of the surrounding control

RenderedWidth [} 431] Calculated width of the control in pixels

RenderedHeight [} 431] Calculated height of the control in pixels

GridRowIndex [} 432] Definition of the row of a grid in which the control is to

be displayed

GridColumnIndex [} 432] Definition of the column of a grid in which the control

is to be displayed

Opacity [} 438] Definition of the transparency of the entire control

Visibility [} 439] Selection of the visibility of a control:

· Visible: Control is visible

· Hidden: Control is invisible, but is drawn – controls

behind it cannot be operated

· Collapsed: Control is invisible and is not drawn –

controls behind it can be operated

ZIndex [} 440] Definition of the position on the Z-axis

Transform [} 439] Definition of a transformation of a control:

· Translate: Translate in X-, Y-, Z-direction

· Rotate: Rotate by an angle

· Scale: Zoom by a factor

· Skew: Sides shown skewed by an angle

· Origin: Set the origin of the transformation relative

to the position of the control

· Perspective: Set the perspective of the

transformations of all child elements

BoxShadow [} 440] Definition of a shadow

WidthMode [} 427] Selection of the method of calculating the width:

· Value: The width is defined by the width entered.

· Parent: The width is defined by the distance to the

left and right side of the parent element. The

"Width" attribute is ignored in all calculations!

HeightMode [} 428] Selection of the method of calculating the height:

· Value: The height is defined by the height entered.

· Parent: The height is defined by the distance to the

top and bottom side of the parent element. The

"Height" attribute is ignored in all calculations!

Category: Common

Name Description

StateSymbol [} 177] Reflects the state of the checkbox to the assigned

symbol and vice versa.

ToggleState [} 177] Definition of the internal switching state of the control

ToggleGroup [} 177] User-defined name for a group. Only one control in

this group can be active.

IsEnabled [} 425] Selection of whether a control should be activated

Id [} 424] Definition of the name of the control

Type [} 439] Type name of the control.

ClassNames [} 425] Definition of control classes

IsAttached [} 425] If a control is logically assigned in the DOM.

ToolTip [} 438] Definition of the tool tip for the control

Category: Border

Name Description

BorderRadius [} 433] Definition of the radius of the four corners to round

them off

BorderStyle [} 433] Selection of the border style of the four sides of the

control

BorderWidth [} 433] Definition of the border width of the four sides of the

control

Category: Background Image

Name Description

BackgroundImage [} 434] Definition of an image that is located above the

background color

BackgroundImageHeight [} 435] Definition of the height of the background image

BackgroundImageHeightUnit [} 435] Selection of the unit of the height of the background

image:

· Pixels for an absolute height

· Percent for a relative height

BackgroundImageWidth [} 434] Definition of the width of the background image

BackgroundImageWidthUnit [} 434] Selection of the unit of the width of the background

image:

· Pixels for an absolute width

· Percent for a relative width

BackgroundImagePadding [} 435] Definition of an additional distance between the

border of the control and background image for the

four sides

BackgroundImageVerticalAlignment [} 436] Definition of the vertical alignment of the background

image within the control

BackgroundImageHorizontalAlignment [} 435] Definition of the horizontal alignment of the

background image within the control

Events

Category: Control

Name Description

onToggleStateChanged [} 178] The ToggleState value of the checkbox has changed.

onStateChanged [} 178] The status of the checkbox has changed.

Category: Framework

Name Description

onAttached [} 440] The control was added to the display.

onDetached [} 440] The control was removed from the display.

onInitialized [} 441] The control was initialized.

onMoved [} 443] The control was moved in relation to the browser

window.

onResized [} 444] The size of the control was changed.

Category: Operator

Name Description

onPressed [} 443] A mouse click was executed or a touch screen was

briefly touched.

onMouseClick [} 441] The left mouse button was clicked over the control

and released.

onMouseDoubleClick [} 441] The left mouse button was clicked twice over the

control and released.

onMouseRightClick [} 442] The right mouse button was clicked over the control

and released.

onMouseDown [} 441] A mouse button was depressed over the control.

onMouseEnter [} 442] The mouse pointer was moved over the control.

onMouseLeave [} 442] The mouse pointer has left the control.

onMouseUp [} 443] A mouse button was released over the control.

onMouseDownLeft [} 441] The left mouse button was depressed over the

control.

onMouseDownRight [} 441] The right mouse button was depressed over the

control.

onMouseMove [} 442] The mouse was moved over the control.

onMouseOver [} 442] The mouse pointer was moved over the control or

one of its children.

onMouseOut [} 442] The mouse pointer has left the control or one of its

child controls.

onMouseUpLeft [} 443] The left mouse button was released over the control.

onMouseUpRight [} 443] The right mouse button was released over the

control.

onMouseWheel [} 443] The mouse wheel was moved over the control.

onTouchStart [} 444] A finger/stylus was placed against a touch screen.

onTouchMove [} 444] A finger/stylus was moved on a touch screen.

onTouchEnd [} 444] A finger/stylus was lifted off a touch screen.

onTouchCancel [} 444] An interaction with a touch screen was aborted.

Access rights

Name Description

observe [} 444] Determines whether the control is generally

observable.

operate [} 445] Determines whether the control is generally operable.

Inheritance hierarchy

Control [} 419]

Checkbox

Note: Available since version 1.8

See also

API reference [} 1264] for this control

5.2.3.1 Attributes

5.2.3.1.1 StateSymbol

Reflects the state of the checkbox to the assigned symbol and vice versa.

Scheme: tchmi:framework#/definitions/TcHmiCheckboxStateSymbol [} 2134]

Origin: Checkbox [} 172]

See also

Attribute getter: getStateSymbol [} 1272]

Attribute setter: setStateSymbol [} 1273]

Note: Available since version 1.10

5.2.3.1.2 ToggleState

Internal state of the control. This can be Normal or Active.

Scheme: tchmi:framework#/definitions/ToggleState [} 2135]

Origin: Checkbox [} 172]

See also

Attribute getter: getToggleState [} 1271]

Attribute setter: setToggleState [} 1272]

Note: Available since version 1.8

5.2.3.1.3 ToggleGroup

User-defined name for a group. Only one control in this group can be active.

From version 1.10 a toggle group can consist of controls of the type Toggle Button and Checkbox.

Scheme: tchmi:general#/definitions/String [} 2069]

Origin: Checkbox [} 172]

See also

Attribute getter: getToggleGroup [} 1270]

Attribute setter: setToggleGroup [} 1271]

Note: Available since version 1.10

5.2.3.1.4 ToggleStateIconColor

Scheme: tchmi:framework#/definitions/SolidColor [} 2133]

Origin: Checkbox [} 172]

See also

Attribute getter: getToggleStateIconColor [} 1269]

Attribute setter: setToggleStateIconColor [} 1270]

Note: Available since version 1.8

5.2.3.2 Events

5.2.3.2.1 onToggleStateChanged

The ToggleState [} 177] value of the checkbox has changed.

Origin: Checkbox [} 172]

Note: Available since version 1.8

5.2.3.2.2 onStateChanged

The state has changed.

Origin: Checkbox [} 172]

Note: Available since version 1.10

5.2.4 Combobox

A combo box is a drop-down menu for selecting an option from several options. Each option is defined by its

ID and also has a text that is displayed in the drop-down menu, and an assigned value.

Note that the dropdown menu for the size of the control will be added to this. This becomes relevant for the

topic Overfill [} 127] with small containers.

A description of the configuration can be found in chapter Configuration [} 186].

Attributes

Category: Colors

Name Description

TextColor [} 195] Definition of the text color

DropDownTextColor [} 190] Definition of the text color in the drop-down list

DropDownBackgroundColor [} 188] Definition of the background color of the drop-down

list

DropDownHighlightColor [} 189] Definition of the highlight color of the background of a

selected entry in the drop-down list

DropDownHighlightTextColor [} 189] Definition of the highlight color of the text of a

selected entry in the drop-down list

DropDownToggleButtonBackgroundColor [} 190] Definition of the color of the button to expand the

drop-down list

DropDownToggleButtonArrowColor [} 190] Definition of the color of the arrow of the button to

expand the drop-down list

BackgroundColor [} 433] Definition of the background color

BorderColor [} 432] Definition of the border color of the control

Category: Layout

Name Description

Left [} 426] Definition of the distance from the left side to the left

side of the surrounding control

LeftUnit [} 426] Definition of the unit of the distance to the right side

of the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Top [} 426] Definition of the distance from the top side to the top

side of the surrounding control

TopUnit [} 426] Selection of the unit of the distance to the top side of

the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Right [} 429] Definition of the distance from the right side to the

right side of the surrounding control

RightUnit [} 429] Selection of the unit of the distance to the right side

of the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Bottom [} 429] Definition of the distance from the bottom side to the

bottom side of the surrounding control

BottomUnit [} 429] Selection of the unit of the distance to the bottom

side of the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Width [} 427] Definition of the external width of the control

WidthUnit [} 427] Selection of the unit of the width:

· Pixels for an absolute width

· Percent for a relative width

Height [} 428] Definition of the external height of the control

HeightUnit [} 428] Selection of the unit of the height:

· Pixels for an absolute height

· Percent for a relative height

MaxWidth [} 437] Definition of the maximum width if the control size is

defined as dynamic

MaxWidthUnit [} 437] Selection of the unit of the maximum width:

· Pixels for an absolute value

· Percent for a relative value

MinWidth [} 438] Definition of the minimum width if the control size is

defined as dynamic

MinWidthUnit [} 438] Selection of the unit of the minimum width:

· Pixels for an absolute value

· Percent for a relative value

MaxHeight [} 436] Definition of the maximum height if the control size is

defined as dynamic

MaxHeightUnit [} 437] Selection of the unit of the maximum height:

· Pixels for an absolute value

· Percent for a relative value

MinHeight [} 436] Definition of the minimum height if the control size is

defined as dynamic

Name Description

MinHeightUnit [} 436] Selection of the unit of the minimum height:

· Pixels for an absolute value

· Percent for a relative value

RenderedLeft [} 430] Calculated distance in pixels from the left side to the

left side of the surrounding control

RenderedTop [} 430] Calculated distance in pixels from the top side to the

top side of the surrounding control

RenderedRight [} 431] Calculated distance in pixels from the right side to the

right side of the surrounding control

RenderedBottom [} 430] Calculated distance in pixels from the bottom side to

the bottom side of the surrounding control

RenderedWidth [} 431] Calculated width of the control in pixels

RenderedHeight [} 431] Calculated height of the control in pixels

GridRowIndex [} 432] Definition of the row of a grid in which the control is to

be displayed

GridColumnIndex [} 432] Definition of the column of a grid in which the control

is to be displayed

Opacity [} 438] Definition of the transparency of the entire control

Visibility [} 439] Selection of the visibility of a control:

· Visible: Control is visible

· Hidden: Control is invisible, but is drawn – controls

behind it cannot be operated

· Collapsed: Control is invisible and is not drawn –

controls behind it can be operated

ZIndex [} 440] Definition of the position on the Z-axis

Transform [} 439] Definition of a transformation of a control:

· Translate: Translate in X-, Y-, Z-direction

· Rotate: Rotate by an angle

· Scale: Zoom by a factor

· Skew: Sides shown skewed by an angle

· Origin: Set the origin of the transformation relative

to the position of the control

· Perspective: Set the perspective of the

transformations of all child elements

BoxShadow [} 440] Definition of a shadow

WidthMode [} 427] Selection of the method of calculating the width:

· Value: The width is defined by the width entered.

· Parent: The width is defined by the distance to the

left and right side of the parent element. The

"Width" attribute is ignored in all calculations!

HeightMode [} 428] Selection of the method of calculating the height:

· Value: The height is defined by the height entered.

· Parent: The height is defined by the distance to the

top and bottom side of the parent element. The

"Height" attribute is ignored in all calculations!

Category: Common

Name Description

IsEnabled [} 425] Selection of whether a control should be activated

Id [} 424] Definition of the name of the control

Type [} 439] Type name of the control.

ClassNames [} 425] Definition of control classes

IsAttached [} 425] If a control is logically assigned in the DOM.

ToolTip [} 438] Definition of the tool tip for the control

Category: Border

Name Description

BorderRadius [} 433] Definition of the radius of the four corners to round

them off

BorderStyle [} 433] Selection of the border style of the four sides of the

control

BorderWidth [} 433] Definition of the border width of the four sides of the

control

Category: Background Image

Name Description

BackgroundImage [} 434] Definition of an image that is located above the

background color

BackgroundImageHeight [} 435] Definition of the height of the background image

BackgroundImageHeightUnit [} 435] Selection of the unit of the height of the background

image:

· Pixels for an absolute height

· Percent for a relative height

BackgroundImageWidth [} 434] Definition of the width of the background image

BackgroundImageWidthUnit [} 434] Selection of the unit of the width of the background

image:

· Pixels for an absolute width

· Percent for a relative width

BackgroundImagePadding [} 435] Definition of an additional distance between the

border of the control and background image for the

four sides

BackgroundImageVerticalAlignment [} 436] Definition of the vertical alignment of the background

image within the control

BackgroundImageHorizontalAlignment [} 435] Definition of the horizontal alignment of the

background image within the control

Category: Data

Name Description

SrcData [} 194] Definition of data for the list entries

Text [} 195] Definition of the text that is displayed if free text entry

is allowed

AllowTextInput [} 195] Definition as to whether free text entry is to be

allowed

ComboboxText [} 187] Definition of the text that is displayed if no entry is

selected

SelectedIndex [} 194] Definition of the selected entry via its index. The first

entry in a drop-down list starts at index 0.

ContentPadding [} 196] Defines the distance of the text to the border.

Category: Text

Name Description

TextFontFamily [} 191] Definition of the font using the name of the font family

or the keyword

TextFontSize [} 191] Definition of the font size

TextFontSizeUnit [} 191] Selecting the font size unit

· Pixels for an absolute size

· Percent for a relative size

TextFontStyle [} 192] Selecting the font style:

· Normal

· Italic: italic

· Oblique: slanted

TextFontWeight [} 192] Selecting the font weight

· Normal

· Bold: Bold

TextHorizontalAlignment [} 192] Selecting the horizontal alignment of the text

TextVerticalAlignment [} 192] Definition of the vertical alignment of the text

Category: DropDown

Name Description

DropDownHorizontalAlignment [} 190] Selecting the horizontal alignment of the text in the

drop-down list

DropDownVerticalAlignment [} 191] Selecting the vertical alignment of the text in the

drop-down list

DataHeight [} 187] Definition of the height of the entries in the drop-down

menu

DataHeightUnit [} 187] Selecting the unit of the height of the list entries

· Pixels for an absolute height

· Percent for a relative height

List Height [} 193] Definition of the maximum height of the drop-down

list

List Height Unit [} 193] Selecting the unit of the drop-down list height

DropDownFontFamily [} 188] Definition of the font of the list entries via the name of

the font family or the keyword

DropDownFontSize [} 188] Definition of the font size of the list entries

DropDownFontSizeUnit [} 188] Selecting the font size unit

· Pixels for an absolute size

· Percent for a relative size

DropDownFontStyle [} 189] Selecting the font style:

· Normal

· Italic: italic

· Oblique: slanted

DropDownFontWeight [} 189] Selecting the font weight of the text entries:

· Normal

· Bold: Bold

DropDownVerticalAlignment [} 191] Selecting the vertical alignment of the text in the

drop-down list

Events

Category: Framework

Name Description

onAttached [} 440] The control was added to the display.

onDetached [} 440] The control was removed from the display.

onInitialized [} 441] The control was initialized.

onMoved [} 443] The control was moved in relation to the browser

window.

onResized [} 444] The size of the control was changed.

Category: Operator

Name Description

onSelectionChanged [} 196] An entry has been selected.

onPressed [} 443] A mouse click was executed or a touch screen was

briefly touched.

onMouseClick [} 441] The left mouse button was clicked over the control

and released.

onMouseDoubleClick [} 441] The left mouse button was clicked twice over the

control and released.

onMouseRightClick [} 442] The right mouse button was clicked over the control

and released.

onMouseDown [} 441] A mouse button was depressed over the control.

onMouseEnter [} 442] The mouse pointer was moved over the control.

onMouseLeave [} 442] The mouse pointer has left the control.

onMouseUp [} 443] A mouse button was released over the control.

onMouseDownLeft [} 441] The left mouse button was depressed over the

control.

onMouseDownRight [} 441] The right mouse button was depressed over the

control.

onMouseMove [} 442] The mouse was moved over the control.

onMouseOver [} 442] The mouse pointer was moved over the control or

one of its children.

onMouseOut [} 442] The mouse pointer has left the control or one of its

child controls.

onMouseUpLeft [} 443] The left mouse button was released over the control.

onMouseUpRight [} 443] The right mouse button was released over the

control.

onMouseWheel [} 443] The mouse wheel was moved over the control.

onTouchStart [} 444] A finger/stylus was placed against a touch screen.

onTouchMove [} 444] A finger/stylus was moved on a touch screen.

onTouchEnd [} 444] A finger/stylus was lifted off a touch screen.

onTouchCancel [} 444] An interaction with a touch screen was aborted.

Access rights

Name Description

observe [} 444] Determines whether the control is generally

observable.

operate [} 445] Determines whether the control is generally operable.

Inheritance hierarchy

Control [} 419]

Combo box

Note: Available since version 1.8

See also

API reference [} 1273] for this control

5.2.4.1 Configuration

The combo box drop-down list can be configured in three different ways:

· Via Engineering [} 186]

· Via an array from the PLC [} 186]

◦ Array of a structure representing the structure of a list entry

The structure elements must be named identically to the attributes defined on the TwinCAT HMI

side. Upper and lower case is taken into account.

aComboboxEntries : ARRAY [1..5] OF ST_ComboboxEntry;

TYPE ST_ComboboxEntry:

STRUCT

id : INT;

text : STRING;

value : INT;

END_STRUCT

END_TYPE

◦ Array of a simple data type

aTexts : ARRAY [1..5] OF STRING;

aValues : ARRAY [1..5] OF INT;

The selected element of the drop-down list can be queried through various Attributes [} 186].

Definition via Engineering:

1. Add a combo box to the interface.

2. Change the drop-down list for the 'Src Data' attribute of the 'Data' category using the 'Combobox Src

Data [} 186]' dialog

1. Define the required number of entries and their sequence.

2. For each of the three entries, assign an ID, a text that is displayed in the drop-down list and the

value behind this entry.

Definition via an array from the PLC:

1. Add a combo box to the interface.

2. Link the array to the 'Src Data' attribute of the 'Data' category

To display the information of the selected element in the drop-down list, you can perform the following steps:

1. Add three text blocks.

2. Link the first text block with the attribute 'TcHmiCombobox::SelectedIndex'.

3. Link the second text block with the attribute 'TcHmiCombobox::SelectedText'.

4. Link the third text block with the attribute 'TcHmiCombobox::SelectedValue'.

Sample project: https://infosys.beckhoff.com/content/1033/TE2000_TC3_HMI_Engineering/Resources/

zip/3922137483.zip

5.2.4.2 Dialogs

5.2.4.2.1 ComboboxSrcData dialog

This dialog can be used to define the entries of a combo box in the Engineering.

Items List of all objects added

Delete the selected object

Change the object order (top = left)

Add a new object

Category: General

Name Description

ID Definition of a freely selectable ID for the list entry.

This ID must be unique within the defined entries.

Text Definition of the text of the list entry

Value Definition of the value of a list entry

5.2.4.3 Attributes

5.2.4.3.1 DataHeight

Scheme: tchmi:framework#/definitions/MeasurementValue [} 2123]

Origin: Combobox [} 178]

See also

Attribute getter: getDataHeight [} 1289]

Attribute setter: setDataHeight [} 1289]

Note: Available since version 1.8

5.2.4.3.2 DataHeightUnit

Only pixel is allowed here.

Scheme: tchmi:framework#/definitions/PixelUnit [} 2128]

Origin: Combo box [} 178]

See also

Attribute getter: getDataHeightUnit [} 1290]

Attribute setter: setDataHeightUnit [} 1290]

Note: Available since version 1.8

5.2.4.3.3 ComboboxText

The text that is displayed if no entry is selected.

Scheme: tchmi:general#/definitions/String [} 2069]

Origin: Combobox [} 178]

See also

Attribute getter: getComboboxText [} 1295]

Attribute setter: setComboboxText [} 1295]

Note: Available since version 1.8

5.2.4.3.4 DropDownBackgroundColor

Scheme: tchmi:framework#/definitions/Color [} 2094]

Origin: Combobox [} 178]

See also

Attribute getter: getDropDownBackgroundColor [} 1282]

Attribute setter: setDropDownBackgroundColor [} 1283]

Note: Available since version 1.8

5.2.4.3.5 DropDownFontFamily

Comma-separated list of fonts as font family or keyword: 'serif', 'sans-serif', 'monospace'.

Scheme: tchmi:framework#/definitions/FontFamily [} 2108]

Origin: Combobox [} 178]

See also

Attribute getter: getDropDownFontFamily [} 1304]

Attribute setter: setDropDownFontFamily [} 1305]

Note: Available since version 1.8

5.2.4.3.6 DropDownFontSize

The font size. If the percent is specified as the unit, this is relative to the font size of the parent element.

Scheme: tchmi:framework#/definitions/MeasurementValue [} 2123]

Origin: Combobox [} 178]

See also

Attribute getter: getDropDownFontSize [} 1305]

Attribute setter: setDropDownFontSize [} 1306]

Note: Available since version 1.8

5.2.4.3.7 DropDownFontSizeUnit

Pixels, or percent for relative sizes.

Scheme: tchmi:framework#/definitions/MeasurementUnit [} 2123]

Origin: Combobox [} 178]

See also

Attribute getter: getDropDownFontSizeUnit [} 1306]

Attribute setter: setDropDownFontSizeUnit [} 1306]

Note: Available since version 1.8

5.2.4.3.8 DropDownFontStyle

Font style (normal, italic: oblique with special characters, oblique)

Scheme: tchmi:framework#/definitions/FontStyle [} 2108]

Origin: Combobox [} 178]

See also

Attribute getter: getDropDownFontStyle [} 1307]

Attribute setter: setDropDownFontStyle [} 1307]

Note: Available since version 1.8

5.2.4.3.9 DropDownFontWeight

Font weight (normal, bold).

Scheme: tchmi:framework#/definitions/FontWeight [} 2109]

Origin: Combobox [} 178]

See also

Attribute getter: getDropDownFontWeight [} 1303]

Attribute setter: setDropDownFontWeight [} 1304]

Note: Available since version 1.8

5.2.4.3.10 DropDownHighlightColor

Scheme: tchmi:framework#/definitions/SolidColor [} 2133]

Origin: Combobox [} 178]

See also

Attribute getter: getDropDownHighlightColor [} 1283]

Attribute setter: setDropDownHighlightColor [} 1284]

Note: Available since version 1.8

5.2.4.3.11 DropDownHighlightTextColor

Scheme: tchmi:framework#/definitions/SolidColor [} 2133]

Origin: Combobox [} 178]

See also

Attribute getter: getDropDownHighlightTextColor [} 1285]

Attribute setter: setDropDownHighlightTextColor [} 1286]

Note: Available since version 1.8

5.2.4.3.12 DropDownHorizontalAlignment

Scheme: tchmi:framework#/definitions/HorizontalAlignment [} 2118]

Origin: Combobox [} 178]

See also

Attribute getter: getDropDownHorizontalAlignment [} 1302]

Attribute setter: setDropDownHorizontalAlignment [} 1303]

Note: Available since version 1.8

5.2.4.3.13 DropDownTextColor

Scheme: tchmi:framework#/definitions/SolidColor [} 2133]

Origin: Combobox [} 178]

See also

Attribute getter: getDropDownTextColor [} 1281]

Attribute setter: setDropDownTextColor [} 1282]

Note: Available since version 1.8

5.2.4.3.14 DropDownToggleButtonArrowColor

Scheme: tchmi:framework#/definitions/SolidColor [} 2133]

Origin: Combobox [} 178]

See also

Attribute getter: getDropDownToggleButtonArrowColor [} 1286]

Attribute setter: setDropDownToggleButtonArrowColor [} 1287]

Note: Available since version 1.8

5.2.4.3.15 DropDownToggleButtonBackgroundColor

Scheme: tchmi:framework#/definitions/Color [} 2094]

Origin: Combobox [} 178]

See also

Attribute getter: getDropDownToggleButtonBackgroundColor [} 1284]

Attribute setter: setDropDownToggleButtonBackgroundColor [} 1285]

Note: Available since version 1.8

5.2.4.3.16 DropDownVerticalAlignment

Scheme: tchmi:framework#/definitions/VerticalAlignment [} 2147]

Origin: Combobox [} 178]

See also

Attribute getter: getDropDownVerticalAlignment [} 1301]

Attribute setter: setDropDownVerticalAlignment [} 1302]

Note: Available since version 1.8

5.2.4.3.17 TextFontFamily

Comma-separated list of fonts as font family or keyword: 'serif', 'sans-serif', 'monospace'.

Scheme: tchmi:framework#/definitions/FontFamily [} 2108]

Origin: Combobox [} 178]

See also

Attribute getter: getTextFontFamily [} 1296]

Attribute setter: setTextFontFamily [} 1296]

Note: Available since version 1.8

5.2.4.3.18 TextFontSize

The font size. If the percent is specified as the unit, this is relative to the font size of the parent element.

Scheme: tchmi:framework#/definitions/MeasurementValue [} 2123]

Origin: Combobox [} 178]

See also

Attribute getter: getTextFontSize [} 1297]

Attribute setter: setTextFontSize [} 1297]

Note: Available since version 1.8

5.2.4.3.19 TextFontSizeUnit

Pixels, or percent for relative sizes.

Scheme: tchmi:framework#/definitions/MeasurementUnit [} 2123]

Origin: Combobox [} 178]

See also

Attribute getter: getTextFontSizeUnit [} 1298]

Attribute setter: setTextFontSizeUnit [} 1298]

Note: Available since version 1.8

5.2.4.3.20 TextFontStyle

Font style (normal, italic: oblique with special characters, oblique)

Scheme: tchmi:framework#/definitions/FontStyle [} 2108]

Origin: Combobox [} 178]

See also

Attribute getter: getTextFontStyle [} 1299]

Attribute setter: setTextFontStyle [} 1299]

Note: Available since version 1.8

5.2.4.3.21 TextFontWeight

Font weight (normal, bold).

Scheme: tchmi:framework#/definitions/FontWeight [} 2109]

Origin: Combobox [} 178]

See also

Attribute getter: getTextFontWeight [} 1291]

Attribute setter: setTextFontWeight [} 1291]

Note: Available since version 1.8

5.2.4.3.22 TextHorizontalAlignment

Horizontal alignment of the text.

Scheme: tchmi:framework#/definitions/HorizontalAlignment [} 2118]

Origin: Combobox [} 178]

See also

Attribute getter: getTextHorizontalAlignment [} 1300]

Attribute setter: setTextHorizontalAlignment [} 1300]

Note: Available since version 1.8

5.2.4.3.23 TextVerticalAlignment

Vertical alignment of the text.

Scheme: tchmi:framework#/definitions/VerticalAlignment [} 2147]

Origin: Combobox [} 178]

See also

Attribute getter: getTextVerticalAlignment [} 1300]

Attribute setter: setTextVerticalAlignment [} 1301]

Note: Available since version 1.8

5.2.4.3.24 MaxListHeight

Defines the height of the combo box.

Scheme: tchmi:framework#/definitions/MeasurementValue [} 2123]

Origin: Combo box [} 178]

See also

Attribute getter: getMaxListHeight [} 1287]

Attribute setter: setMaxListHeight [} 1287]

Note: Available since version 1.10

5.2.4.3.25 MaxListHeightUnit

Only pixel is allowed here.

Scheme: tchmi:framework#/definitions/PixelUnit [} 2128]

Origin: Combo box [} 178]

See also

Attribute getter: getMaxListHeightUnit [} 1288]

Attribute setter: setMaxListHeightUnit [} 1288]

Note: Available since version 1.10

5.2.4.3.26 SelectedId

ID [} 194] of the currently selected entry. This ID must be unique within the defined entries.

Scheme: tchmi:general#/definitions/UDINT [} 2070]

Origin: Combobox [} 178]

See also

Attribute getter: getSelectedId [} 1293]

The attribute can only be read and therefore has no setter.

Note: Available since version 1.8

5.2.4.3.27 SelectedIndex

Index [} 194] of the currently selected entry. The first entry in a drop-down list starts at index 0.

Scheme: tchmi:general#/definitions/UDINT [} 2070]

Origin: Combobox [} 178]

See also

Attribute getter: getSelectedIndex [} 1292]

Attribute setter: setSelectedIndex [} 1293]

Note: Available since version 1.8

5.2.4.3.28 SelectedText

Display text [} 194] of the currently selected entry.

Scheme: tchmi:general#/definitions/String [} 2069]

Origin: Combobox [} 178]

See also

Attribute getter: getSelectedText [} 1292]

The attribute can only be read and therefore has no setter.

Note: Available since version 1.8

5.2.4.3.29 SelectedValue

Value [} 194] of the currently selected entry.

Scheme: tchmi:general#/definitions/String [} 2069]

Origin: Combobox [} 178]

See also

Attribute getter: getSelectedValue [} 1292]

The attribute can only be read and therefore has no setter.

Note: Available since version 1.8

5.2.4.3.30 SrcData

Data for the options menu.

A simple list of options can be compiled in the Engineering. Each option consists of these components:

· ID [} 193]: Custom ID

· Text [} 194]: Display text

· Value [} 194]: Value that can be passed on later within the application.

If you use Binding [} 88] for this parameter, then further, complex data are supported.

· Arrays can be used directly. In this way, a string array or number array can also be linked.

· Objects are supported as a key-value list. The name of the property is interpreted as display text, the

value is interpreted as a value.

Scheme: tchmi:framework#/definitions/ListItemList [} 2122]

Origin: Combobox [} 178]

See also

Attribute getter: getSrcData [} 1294]

Attribute setter: setSrcData [} 1294]

Note: Available since version 1.8

5.2.4.3.31 TextColor

Scheme: tchmi:framework#/definitions/SolidColor [} 2133]

Origin: Combobox [} 178]

See also

Attribute getter: getTextColor [} 1281]

Attribute setter: setTextColor [} 1281]

Note: Available since version 1.8

5.2.4.3.32 Text

The text that is displayed when text input is allowed.

Scheme: tchmi:general#/definitions/String [} 2069]

Origin: Combobox [} 178]

See also

Attribute getter: getText

Attribute setter: setText

Note: Available since version 1.8

5.2.4.3.33 AllowTextInput

Definition of whether free text entries are allowed.

Scheme: tchmi:general#/definitions/Boolean [} 2060]

Origin: Combobox [} 178]

See also

Attribute getter: getAllowTextInput

Attribute setter: setAllowTextInput

Note: Available since version 1.8

5.2.4.3.34 ContentPadding

Defines the distance of the text to the border.

Scheme: tchmi:framework#/definitions/Padding [} 2127]

Origin: Combobox [} 178]

See also

Attribute getter: getContentPadding [} 1310]

Attribute setter: setContentPadding [} 1311]

Note: Available since version 1.10

5.2.4.4 Events

5.2.4.4.1 onSelectionChanged

A new entry has been selected.

Origin: Combobox [} 178]

Note: Available since version 1.8

5.2.5 Datagrid

A data grid is a table. Data sets can be displayed in this table that have been defined via Engineering or

dynamically via an array.

A description of the configuration can be found in chapter Configuration [} 203].

Attributes

Category: Colors

Name Description

HeaderBackgroundColor [} 206] Definition of the background color of the header row

HeaderTextColor [} 209] Definition of the text color of the column headers

RowNumbersBackgroundColor [} 209] Definition of the background color of the column for

row numbering

RowNumbersTextColor [} 212] Definition of the text color of the row numbering

TableBorderColor [} 215] Definition of the grid color

BackgroundColor [} 433] Definition of the background color

BorderColor [} 432] Definition of the border color of the control

Category: Layout

Name Description

Left [} 426] Definition of the distance from the left side to the left

side of the surrounding control

LeftUnit [} 426] Definition of the unit of the distance to the right side

of the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Top [} 426] Definition of the distance from the top side to the top

side of the surrounding control

TopUnit [} 426] Selection of the unit of the distance to the top side of

the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Right [} 429] Definition of the distance from the right side to the

right side of the surrounding control

RightUnit [} 429] Selection of the unit of the distance to the right side

of the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Bottom [} 429] Definition of the distance from the bottom side to the

bottom side of the surrounding control

BottomUnit [} 429] Selection of the unit of the distance to the bottom

side of the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Width [} 427] Definition of the external width of the control

WidthUnit [} 427] Selection of the unit of the width:

· Pixels for an absolute width

· Percent for a relative width

Height [} 428] Definition of the external height of the control

HeightUnit [} 428] Selection of the unit of the height:

· Pixels for an absolute height

· Percent for a relative height

MaxWidth [} 437] Definition of the maximum width if the control size is

defined as dynamic

MaxWidthUnit [} 437] Selection of the unit of the maximum width:

· Pixels for an absolute value

· Percent for a relative value

MinWidth [} 438] Definition of the minimum width if the control size is

defined as dynamic

MinWidthUnit [} 438] Selection of the unit of the minimum width:

· Pixels for an absolute value

· Percent for a relative value

MaxHeight [} 436] Definition of the maximum height if the control size is

defined as dynamic

MaxHeightUnit [} 437] Selection of the unit of the maximum height:

· Pixels for an absolute value

· Percent for a relative value

MinHeight [} 436] Definition of the minimum height if the control size is

defined as dynamic

Name Description

MinHeightUnit [} 436] Selection of the unit of the minimum height:

· Pixels for an absolute value

· Percent for a relative value

RenderedLeft [} 430] Calculated distance in pixels from the left side to the

left side of the surrounding control

RenderedTop [} 430] Calculated distance in pixels from the top side to the

top side of the surrounding control

RenderedRight [} 431] Calculated distance in pixels from the right side to the

right side of the surrounding control

RenderedBottom [} 430] Calculated distance in pixels from the bottom side to

the bottom side of the surrounding control

RenderedWidth [} 431] Calculated width of the control in pixels

RenderedHeight [} 431] Calculated height of the control in pixels

GridRowIndex [} 432] Definition of the row of a grid in which the control is to

be displayed

GridColumnIndex [} 432] Definition of the column of a grid in which the control

is to be displayed

Opacity [} 438] Definition of the transparency of the entire control

Visibility [} 439] Selection of the visibility of a control:

· Visible: Control is visible

· Hidden: Control is invisible, but is drawn – controls

behind it cannot be operated

· Collapsed: Control is invisible and is not drawn –

controls behind it can be operated

ZIndex [} 440] Definition of the position on the Z-axis

Transform [} 439] Definition of a transformation of a control:

· Translate: Translate in X-, Y-, Z-direction

· Rotate: Rotate by an angle

· Scale: Zoom by a factor

· Skew: Sides shown skewed by an angle

· Origin: Set the origin of the transformation relative

to the position of the control

· Perspective: Set the perspective of the

transformations of all child elements

BoxShadow [} 440] Definition of a shadow

WidthMode [} 427] Selection of the method of calculating the width:

· Value: The width is defined by the width entered.

· Parent: The width is defined by the distance to the

left and right side of the parent element. The

"Width" attribute is ignored in all calculations!

HeightMode [} 428] Selection of the method of calculating the height:

· Value: The height is defined by the height entered.

· Parent: The height is defined by the distance to the

top and bottom side of the parent element. The

"Height" attribute is ignored in all calculations!

Category: Common

Name Description

IsEnabled [} 425] Selection of whether a control should be activated

Id [} 424] Definition of the name of the control

Type [} 439] Type name of the control.

ClassNames [} 425] Definition of control classes

IsAttached [} 425] If a control is logically assigned in the DOM.

ToolTip [} 438] Definition of the tool tip for the control

Category: Border

Name Description

BorderRadius [} 433] Definition of the radius of the four corners to round

them off

BorderStyle [} 433] Selection of the border style of the four sides of the

control

BorderWidth [} 433] Definition of the border width of the four sides of the

control

Category: Background Image

Name Description

BackgroundImage [} 434] Definition of an image that is located above the

background color

BackgroundImageHeight [} 435] Definition of the height of the background image

BackgroundImageHeightUnit [} 435] Selection of the unit of the height of the background

image:

· Pixels for an absolute height

· Percent for a relative height

BackgroundImageWidth [} 434] Definition of the width of the background image

BackgroundImageWidthUnit [} 434] Selection of the unit of the width of the background

image:

· Pixels for an absolute width

· Percent for a relative width

BackgroundImagePadding [} 435] Definition of an additional distance between the

border of the control and background image for the

four sides

BackgroundImageVerticalAlignment [} 436] Definition of the vertical alignment of the background

image within the control

BackgroundImageHorizontalAlignment [} 435] Definition of the horizontal alignment of the

background image within the control

Category: Data

Name Description

Columns [} 214] Definition of column options - the assignment of

options to rows is based on the order in the Column

Definitions dialog [} 204]

SrcData [} 214] Definition of the data to be displayed in the DataGrid

SelectedColumnIndex [} 213] Definition of the selected column using the column

index

SelectedRowIndex [} 213] Definition of the selected row using the row index

Category: Grid

Name Description

RowHeight [} 209] Definition of the row height

RowHeightUnit [} 209] Definition of the unit of the row height:

· Pixels for an absolute height

· Percent for a relative height

TableBorderWidth [} 215] Definition of the line width of the grid

TableBorderWidthUnit [} 206] Selecting the unit of the line width:

· Pixels for an absolute width

· Percent for a relative width

TableBorderStyle [} 215] Selecting the style of the grid lines

CellContentPadding [} 204] Definition of the distance of the text to the edge of the

cell

GridFontFamily [} 205] Definition of the font using the name of the font family

or the keyword

GridFontSize [} 205] Definition of the font size of the table contents

GridFontSizeUnit [} 205] Definition of the font size unit:

· Pixels for an absolute size

· Percent for a relative size

GridFontStyle [} 205] Selecting the font style of the table contents:

· Normal

· Italic: italic

· Oblique: slanted

GridFontWeight [} 206] Selecting the font weight of the table contents:

· Normal

· Bold: bold

SrcDataHasChanged [} 214] Indicates whether the user has changed the data.

SelectedRowValue [} 213] The value of the selected row.

SelectedCellValue [} 213] The value of the selected cell.

Category: Header

Name Description

Category: Row Numbers

Name Description

ShowRowNumbers [} 214] Selecting whether the row numbering is to be

displayed

RowNumbersResizable [} 211] Selecting whether the width of the columns can be

changed at runtime using the separators in the

column header row

RowNumbersWidth [} 212] Definition of the width of the row numbering column

RowNumbersWidthUnit [} 212] Selecting the unit of column width:

· Pixels for an absolute width

· Percent for a relative width

RowNumbersCellPadding [} 210] Definition of the distance of the numbering to the

edge of the cell

RowNumbersFontFamily [} 210] Definition of the font using the name of the font family

or the keyword

RowNumbersFontSize [} 210] Definition of the font size of the row numbering

RowNumbersFontSizeUnit [} 210] Definition of the font size unit:

· Pixels for an absolute size

· Percent for a relative size

RowNumbersFontStyle [} 211] Definition of the font style of the row numbering:

· Normal

· Italic: italic

· Oblique: slanted

RowNumbersFontWeight [} 211] Definition of the font weight of the row numbering:

· Normal

· Bold: bold

RowNumbersHorizontalAlignment [} 211] Definition of horizontal alignment of row numbering

RowNumbersVerticalAlignment [} 212] Definition of vertical alignment of row numbering

Category: Table Border

Name Description

Events

Category: Framework

Name Description

onAttached [} 440] The control was added to the display.

onDetached [} 440] The control was removed from the display.

onInitialized [} 441] The control was initialized.

onMoved [} 443] The control was moved in relation to the browser

window.

onResized [} 444] The size of the control was changed.

Category: Operator

Name Description

onDataChanged [} 215] The data has been changed.

onSelectedItemChanged [} 216] Another entry is now selected.

onPressed [} 443] A mouse click was executed or a touch screen was

briefly touched.

onMouseClick [} 441] The left mouse button was clicked over the control

and released.

onMouseDoubleClick [} 441] The left mouse button was clicked twice over the

control and released.

onMouseRightClick [} 442] The right mouse button was clicked over the control

and released.

onMouseDown [} 441] A mouse button was depressed over the control.

onMouseEnter [} 442] The mouse pointer was moved over the control.

onMouseLeave [} 442] The mouse pointer has left the control.

onMouseUp [} 443] A mouse button was released over the control.

onMouseDownLeft [} 441] The left mouse button was depressed over the

control.

onMouseDownRight [} 441] The right mouse button was depressed over the

control.

onMouseMove [} 442] The mouse was moved over the control.

onMouseOver [} 442] The mouse pointer was moved over the control or

one of its children.

onMouseOut [} 442] The mouse pointer has left the control or one of its

child controls.

onMouseUpLeft [} 443] The left mouse button was released over the control.

onMouseUpRight [} 443] The right mouse button was released over the

control.

onMouseWheel [} 443] The mouse wheel was moved over the control.

onTouchStart [} 444] A finger/stylus was placed against a touch screen.

onTouchMove [} 444] A finger/stylus was moved on a touch screen.

onTouchEnd [} 444] A finger/stylus was lifted off a touch screen.

onTouchCancel [} 444] An interaction with a touch screen was aborted.

Access rights

Name Description

observe [} 444] Determines whether the control is generally

observable.

operate [} 445] Determines whether the control is generally operable.

Inheritance hierarchy

Control [} 419]

Datagrid

Note: Available since version 1.8

See also

API reference [} 1311] for this control

5.2.5.1 Configuration

The data grid can be configured as follows to display a one-dimensional array:

1. Add a data grid to the interface.

2. Link the one-dimensional array with the attribute "SrcData [} 214]" of the category "Data".

3. Change the column settings for the "„SrcColumns [} 214]" attribute in the "Data" category using the

Column Definitions dialog [} 204].

4. Define a column option.

5. Adjust the column settings; the "Name" attribute must not be defined.

For an array of a structure, you can proceed as follows:

1. Add a data grid to the interface.

2. Link the desired array with the attribute "SrcData [} 214]" of the category "Data".

3. Change the column settings for the "„SrcColumns [} 214]" attribute in the "Data" category using the

Column Definitions dialog [} 204].

4. Define the required number of columns and their sequence.

5. Adjust the settings of each column; the "Name" attribute must correspond to the name of the structure

element of the array that is to be displayed in this column.

The definition of the "Name" attribute is case-sensitive.

In order for changes in the data grid to be written back to the controller, the following steps must be

performed:

1. Go to the Events page of the Properties window.

2. Configure the ".onDataChanged [} 215]" event.

3. Add a "WriteToSymbol [} 51]" action.

4. Link the first parameter to your array.

5. Link the second parameter with the attribute "TcHmiDatagrid::SrcData".

Example: https://infosys.beckhoff.com/content/1033/TE2000_TC3_HMI_Engineering/Resources/

zip/9007203184343435.zip

5.2.5.2 Dialogs

5.2.5.2.1 Column Definitions dialog

This dialog can be used to customize the data grid column settings.

Items List of all objects added

Delete the selected object

Change the object order (top = left)

Add a new object

Properties Settings of the column object selected under

'Elements'

Name Definition of the name of the structure item to be

displayed in this column.

The value must match the name of the structure

member. Upper and lower case is taken into account.

Label Definition of the column header

Control Selecting the cell control type

· TextBlock [} 353]

· TextBox [} 362]

· CheckBox [} 172]

· ComboBox [} 178]

· Image [} 237]

Width Definition of the column width

Resize Selecting whether the column width should be

customizable by the user

Min width Definition of the minimum column width

Editable Defines whether the column can be edited. This

option has no effect if control is 'TextBlock' or 'Image'.

Horizontal alignment Selecting the horizontal alignment of the column

contents

Vertical alignment Selecting the vertical alignment of the column

contents

Data definitions Definition of the ComboBox / Image content; this

attribute is available once the ComboBox or Image

control type has been selected.

5.2.5.3 Attributes

5.2.5.3.1 CellContentPadding

Defines the distance of the cells to the border.

Scheme: tchmi:framework#/definitions/Padding [} 2127]

Origin: Datagrid [} 196]

See also

Attribute getter: getCellContentPadding [} 1333]

Attribute setter: setCellContentPadding [} 1333]

Note: Available since version 1.8

5.2.5.3.2 GridFontFamily

Comma-separated list of fonts as font family or keyword: 'serif', 'sans-serif', 'monospace'.

Scheme: tchmi:general#/definitions/String [} 2069]

Origin: Datagrid [} 196]

See also

Attribute getter: getGridFontFamily [} 1332]

Attribute setter: setGridFontFamily [} 1332]

Note: Available since version 1.8

5.2.5.3.3 GridFontSize

The font size. If the percent is specified as the unit, this is relative to the font size of the parent element.

Scheme: tchmi:framework#/definitions/MeasurementValue [} 2123]

Origin: Datagrid [} 196]

See also

Attribute getter: getGridFontSize [} 1331]

Attribute setter: setGridFontSize [} 1331]

Note: Available since version 1.8

5.2.5.3.4 GridFontSizeUnit

Pixels, or percent for relative sizes.

Scheme: tchmi:framework#/definitions/MeasurementUnit [} 2123]

Origin: Datagrid [} 196]

See also

Attribute getter: getGridFontSizeUnit [} 1330]

Attribute setter: setGridFontSizeUnit [} 1330]

Note: Available since version 1.8

5.2.5.3.5 GridFontStyle

Font style (normal, italic: oblique with special characters, oblique)

Scheme: tchmi:framework#/definitions/FontStyle [} 2108]

Origin: Datagrid [} 196]

See also

Attribute getter: getGridFontStyle [} 1329]

Attribute setter: setGridFontStyle [} 1329]

Note: Available since version 1.8

5.2.5.3.6 GridFontWeight

Font weight (normal, bold).

Scheme: tchmi:framework#/definitions/FontWeight [} 2109]

Origin: Datagrid [} 196]

See also

Attribute getter: getGridFontWeight [} 1334]

Attribute setter: setGridFontWeight [} 1334]

Note: Available since version 1.8

5.2.5.3.7 GridWidthUnit

Pixels, or percent for relative positioning.

Scheme: tchmi:framework#/definitions/MeasurementUnit [} 2123]

Origin: Datagrid [} 196]

See also

Attribute getter: getGridWidthUnit [} 1354]

Attribute setter: setGridWidthUnit [} 1354]

Note: Available since version 1.8

5.2.5.3.8 HeaderBackgroundColor

Scheme: tchmi:framework#/definitions/Color [} 2094]

Origin: Datagrid [} 196]

See also

Attribute getter: getHeaderBackgroundColor [} 1321]

Attribute setter: setHeaderBackgroundColor [} 1322]

Note: Available since version 1.8

5.2.5.3.9 HeaderCellPadding

Defines the distance between the header and the border.

Scheme: tchmi:framework#/definitions/Padding [} 2127]

Origin: Datagrid [} 196]

See also

Attribute getter: getHeaderCellPadding [} 1340]

Attribute setter: setHeaderCellPadding [} 1340]

Note: Available since version 1.8

5.2.5.3.10 HeaderFontFamily

Comma-separated list of fonts as font family or keyword: 'serif', 'sans-serif', 'monospace'.

Scheme: tchmi:framework#/definitions/FontFamily [} 2108]

Origin: Datagrid [} 196]

See also

Attribute getter: getHeaderFontFamily [} 1339]

Attribute setter: setHeaderFontFamily [} 1340]

Note: Available since version 1.8

5.2.5.3.11 HeaderFontSize

The font size. If the percent is specified as the unit, this is relative to the font size of the parent element.

Scheme: tchmi:framework#/definitions/MeasurementValue [} 2123]

Origin: Datagrid [} 196]

See also

Attribute getter: getHeaderFontSize [} 1338]

Attribute setter: setHeaderFontSize [} 1339]

Note: Available since version 1.8

5.2.5.3.12 HeaderFontSizeUnit

Pixels, or percent for relative sizes.

Scheme: tchmi:framework#/definitions/MeasurementUnit [} 2123]

Origin: Datagrid [} 196]

See also

Attribute getter: getHeaderFontSizeUnit [} 1337]

Attribute setter: setHeaderFontSizeUnit [} 1338]

Note: Available since version 1.8

5.2.5.3.13 HeaderFontStyle

Font style (normal, italic: oblique with special characters, oblique)

Scheme: tchmi:framework#/definitions/FontStyle [} 2108]

Origin: Datagrid [} 196]

See also

Attribute getter: getHeaderFontStyle [} 1341]

Attribute setter: setHeaderFontStyle [} 1341]

Note: Available since version 1.8

5.2.5.3.14 HeaderFontWeight

Font weight (normal, bold).

Scheme: tchmi:framework#/definitions/FontWeight [} 2109]

Origin: Datagrid [} 196]

See also

Attribute getter: getHeaderFontWeight [} 1336]

Attribute setter: setHeaderFontWeight [} 1337]

Note: Available since version 1.8

5.2.5.3.15 HeaderHeight

Definition of the height of the header.

Scheme: tchmi:framework#/definitions/MeasurementValue [} 2123]

Origin: Datagrid [} 196]

See also

Attribute getter: getHeaderHeight [} 1334]

Attribute setter: setHeaderHeight [} 1335]

Note: Available since version 1.8

5.2.5.3.16 HeaderHeightUnit

Defines the unit of the height of the header:

· Pixels for an absolute size

· Percent for a relative size

Scheme: tchmi:framework#/definitions/MeasurementUnit [} 2123]

Origin: Datagrid [} 196]

See also

Attribute getter: getHeaderHeightUnit [} 1335]

Attribute setter: setHeaderHeightUnit [} 1336]

Note: Available since version 1.8

5.2.5.3.17 HeaderTextColor

Scheme: tchmi:framework#/definitions/SolidColor [} 2133]

Origin: Datagrid [} 196]

See also

Attribute getter: getHeaderTextColor [} 1320]

Attribute setter: setHeaderTextColor [} 1321]

Note: Available since version 1.8

5.2.5.3.18 RowHeight

Scheme: tchmi:framework#/definitions/MeasurementValue [} 2123]

Origin: Datagrid [} 196]

See also

Attribute getter: getRowHeight [} 1328]

Attribute setter: setRowHeight [} 1328]

Note: Available since version 1.8

5.2.5.3.19 RowHeightUnit

Pixel unit. At this point, only pixels can be used as a unit.

Scheme: tchmi:framework#/definitions/PixelUnit [} 2128]

Origin: Datagrid [} 196]

See also

Attribute getter: getRowHeightUnit [} 1329]

The attribute can only be read and therefore has no setter.

Note: Available since version 1.8

5.2.5.3.20 RowNumbersBackgroundColor

Background color of the number column.

Scheme: tchmi:framework#/definitions/Color [} 2094]

Origin: Datagrid [} 196]

See also

Attribute getter: getRowNumbersBackgroundColor [} 1319]

Attribute setter: setRowNumbersBackgroundColor [} 1320]

Note: Available since version 1.8

5.2.5.3.21 RowNumbersCellPadding

Defines the distance of the number column to the border.

Scheme: tchmi:framework#/definitions/Padding [} 2127]

Origin: Datagrid [} 196]

See also

Attribute getter: getRowNumbersCellPadding [} 1348]

Attribute setter: setRowNumbersCellPadding [} 1349]

Note: Available since version 1.8

5.2.5.3.22 RowNumbersFontFamily

Comma-separated list of fonts as font family or keyword: 'serif', 'sans-serif', 'monospace'.

Scheme: tchmi:general#/definitions/String [} 2069]

Origin: Datagrid [} 196]

See also

Attribute getter: getRowNumbersFontFamily [} 1349]

Attribute setter: setRowNumbersFontFamily [} 1350]

Note: Available since version 1.8

5.2.5.3.23 RowNumbersFontSize

The font size. If the percent is specified as the unit, this is relative to the font size of the parent element.

Scheme: tchmi:framework#/definitions/MeasurementValue [} 2123]

Origin: Datagrid [} 196]

See also

Attribute getter: getRowNumbersFontSize [} 1350]

Attribute setter: setRowNumbersFontSize [} 1351]

Note: Available since version 1.8

5.2.5.3.24 RowNumbersFontSizeUnit

Pixels, or percent for relative sizes.

Scheme: tchmi:framework#/definitions/MeasurementUnit [} 2123]

Origin: Datagrid [} 196]

See also

Attribute getter: getRowNumbersFontSizeUnit [} 1351]

Attribute setter: setRowNumbersFontSizeUnit [} 1352]

Note: Available since version 1.8

5.2.5.3.25 RowNumbersFontStyle

Font style (normal, italic: oblique with special characters, oblique)

Scheme: tchmi:framework#/definitions/FontStyle [} 2108]

Origin: Datagrid [} 196]

See also

Attribute getter: getRowNumbersFontStyle [} 1352]

Attribute setter: setRowNumbersFontStyle [} 1352]

Note: Available since version 1.8

5.2.5.3.26 RowNumbersFontWeight

Font weight (normal, bold).

Scheme: tchmi:framework#/definitions/FontWeight [} 2109]

Origin: Datagrid [} 196]

See also

Attribute getter: getRowNumbersFontWeight [} 1344]

Attribute setter: setRowNumbersFontWeight [} 1344]

Note: Available since version 1.8

5.2.5.3.27 RowNumbersHorizontalAlignment

Scheme: tchmi:framework#/definitions/HorizontalAlignment [} 2118]

Origin: Datagrid [} 196]

See also

Attribute getter: getRowNumbersHorizontalAlignment [} 1346]

Attribute setter: setRowNumbersHorizontalAlignment [} 1347]

Note: Available since version 1.8

5.2.5.3.28 RowNumbersResizable

Scheme: tchmi:general#/definitions/Boolean [} 2060]

Origin: Datagrid [} 196]

See also

Attribute getter: getRowNumbersResizable [} 1343]

Attribute setter: setRowNumbersResizable [} 1343]

Note: Available since version 1.8

5.2.5.3.29 RowNumbersTextColor

Text color of the number column.

Scheme: tchmi:framework#/definitions/SolidColor [} 2133]

Origin: Datagrid [} 196]

See also

Attribute getter: getRowNumbersTextColor [} 1323]

Attribute setter: setRowNumbersTextColor [} 1323]

Note: Available since version 1.8

5.2.5.3.30 RowNumbersVerticalAlignment

Scheme: tchmi:framework#/definitions/VerticalAlignment [} 2147]

Origin: Datagrid [} 196]

See also

Attribute getter: getRowNumbersVerticalAlignment [} 1347]

Attribute setter: setRowNumbersVerticalAlignment [} 1348]

Note: Available since version 1.8

5.2.5.3.31 RowNumbersWidth

Width of the number column.

Scheme: tchmi:framework#/definitions/MeasurementValue [} 2123]

Origin: Datagrid [} 196]

See also

Attribute getter: getRowNumbersWidth [} 1345]

Attribute setter: setRowNumbersWidth [} 1345]

Note: Available since version 1.8

5.2.5.3.32 RowNumbersWidthUnit

Pixels, or percent for relative positioning.

Scheme: tchmi:framework#/definitions/MeasurementUnit [} 2123]

Origin: Datagrid [} 196]

See also

Attribute getter: getRowNumbersWidthUnit [} 1346]

Attribute setter: setRowNumbersWidthUnit [} 1346]

Note: Available since version 1.8

5.2.5.3.33 SelectedCellValue

Scheme: tchmi:general#/definitions/Any [} 2059]

Origin: Datagrid [} 196]

See also

Attribute getter: getSelectedCellValue [} 1358]

The attribute can only be read and therefore has no setter.

Note: Available since version 1.10

5.2.5.3.34 SelectedColumnIndex

The selected column is addressed by index.

Scheme: tchmi:general#/definitions/UDINT [} 2070]

Origin: Datagrid [} 196]

See also

Attribute getter: getSelectedColumnIndex [} 1327]

Attribute setter: setSelectedColumnIndex [} 1327]

Note: Available since version 1.8

5.2.5.3.35 SelectedRowIndex

The selected row is addressed by index.

Scheme: tchmi:general#/definitions/UDINT [} 2070]

Origin: Datagrid [} 196]

See also

Attribute getter: getSelectedRowIndex [} 1326]

Attribute setter: setSelectedRowIndex [} 1326]

Note: Available since version 1.8

5.2.5.3.36 SelectedRowValue

Scheme: tchmi:general#/definitions/Any [} 2059]

Origin: Datagrid [} 196]

See also

Attribute getter: getSelectedRowValue [} 1357]

The attribute can only be read and therefore has no setter.

Note: Available since version 1.10

5.2.5.3.37 ShowRowNumbers

Scheme: tchmi:general#/definitions/Boolean [} 2060]

Origin: Datagrid [} 196]

See also

Attribute getter: getShowRowNumbers [} 1342]

Attribute setter: setShowRowNumbers [} 1342]

Note: Available since version 1.8

5.2.5.3.38 SrcColumn

Scheme: tchmi:framework#/definitions/DGColumnDefinitionList [} 2098]

Origin: Datagrid [} 196]

See also

Attribute getter: getSrcColumn [} 1324]

Attribute setter: setSrcColumn [} 1324]

Note: Available since version 1.8

5.2.5.3.39 SrcData

Scheme: tchmi:general#/definitions/Array [} 2059]

Origin: Datagrid [} 196]

See also

Attribute getter: getSrcData [} 1325]

Attribute setter: setSrcData [} 1325]

Note: Available since version 1.8

5.2.5.3.40 SrcDataHasChanged

Scheme: tchmi:general#/definitions/Boolean [} 2060]

Origin: Datagrid [} 196]

See also

Attribute getter: getSrcDataHasChanged [} 1357]

The attribute can only be read and therefore has no setter.

Note: Available since version 1.10

5.2.5.3.41 TableBorderColor

Scheme: tchmi:framework#/definitions/SolidColor [} 2133]

Origin: Datagrid [} 196]

See also

Attribute getter: getTableBorderColor [} 1322]

Attribute setter: setTableBorderColor [} 1323]

Note: Available since version 1.8

5.2.5.3.42 TableBorderStyle

Scheme: tchmi:framework#/definitions/BorderStyle [} 2076]

Origin: Datagrid [} 196]

See also

Attribute getter: getGridStyle [} 1355]

Attribute setter: setGridStyle [} 1355]

Note: Available since version 1.8

5.2.5.3.43 TableBorderWidth

Scheme: tchmi:framework#/definitions/MeasurementValue [} 2123]

Origin: Datagrid [} 196]

See also

Attribute getter: getTableBorderWidth [} 1353]

Attribute setter: setTableBorderWidth [} 1353]

Note: Available since version 1.8

5.2.5.4 Events

5.2.5.4.1 onDataChanged

The data [} 214] has been changed.

Origin: Datagrid [} 196]

Note: Available since version 1.8

5.2.5.4.2 onSelectedItemChanged

Another entry is now selected.

Origin: Datagrid [} 196]

Note: Available since version 1.8

5.2.6 Ellipse

An ellipse control is an ellipse object.

Attributes

Category: Colors

Name Description

BackgroundColor [} 433] Definition of the background color

BorderColor [} 432] Definition of the border color of the control

Category: Layout

Name Description

Left [} 426] Definition of the distance from the left side to the left

side of the surrounding control

LeftUnit [} 426] Definition of the unit of the distance to the right side

of the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Top [} 426] Definition of the distance from the top side to the top

side of the surrounding control

TopUnit [} 426] Selection of the unit of the distance to the top side of

the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Right [} 429] Definition of the distance from the right side to the

right side of the surrounding control

RightUnit [} 429] Selection of the unit of the distance to the right side

of the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Bottom [} 429] Definition of the distance from the bottom side to the

bottom side of the surrounding control

BottomUnit [} 429] Selection of the unit of the distance to the bottom

side of the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Width [} 427] Definition of the external width of the control

WidthUnit [} 427] Selection of the unit of the width:

· Pixels for an absolute width

· Percent for a relative width

Height [} 428] Definition of the external height of the control

HeightUnit [} 428] Selection of the unit of the height:

· Pixels for an absolute height

· Percent for a relative height

MaxWidth [} 437] Definition of the maximum width if the control size is

defined as dynamic

MaxWidthUnit [} 437] Selection of the unit of the maximum width:

· Pixels for an absolute value

· Percent for a relative value

MinWidth [} 438] Definition of the minimum width if the control size is

defined as dynamic

MinWidthUnit [} 438] Selection of the unit of the minimum width:

· Pixels for an absolute value

· Percent for a relative value

MaxHeight [} 436] Definition of the maximum height if the control size is

defined as dynamic

MaxHeightUnit [} 437] Selection of the unit of the maximum height:

· Pixels for an absolute value

· Percent for a relative value

MinHeight [} 436] Definition of the minimum height if the control size is

defined as dynamic

Name Description

MinHeightUnit [} 436] Selection of the unit of the minimum height:

· Pixels for an absolute value

· Percent for a relative value

RenderedLeft [} 430] Calculated distance in pixels from the left side to the

left side of the surrounding control

RenderedTop [} 430] Calculated distance in pixels from the top side to the

top side of the surrounding control

RenderedRight [} 431] Calculated distance in pixels from the right side to the

right side of the surrounding control

RenderedBottom [} 430] Calculated distance in pixels from the bottom side to

the bottom side of the surrounding control

RenderedWidth [} 431] Calculated width of the control in pixels

RenderedHeight [} 431] Calculated height of the control in pixels

GridRowIndex [} 432] Definition of the row of a grid in which the control is to

be displayed

GridColumnIndex [} 432] Definition of the column of a grid in which the control

is to be displayed

Opacity [} 438] Definition of the transparency of the entire control

Visibility [} 439] Selection of the visibility of a control:

· Visible: Control is visible

· Hidden: Control is invisible, but is drawn – controls

behind it cannot be operated

· Collapsed: Control is invisible and is not drawn –

controls behind it can be operated

ZIndex [} 440] Definition of the position on the Z-axis

Transform [} 439] Definition of a transformation of a control:

· Translate: Translate in X-, Y-, Z-direction

· Rotate: Rotate by an angle

· Scale: Zoom by a factor

· Skew: Sides shown skewed by an angle

· Origin: Set the origin of the transformation relative

to the position of the control

· Perspective: Set the perspective of the

transformations of all child elements

BoxShadow [} 440] Definition of a shadow

WidthMode [} 427] Selection of the method of calculating the width:

· Value: The width is defined by the width entered.

· Parent: The width is defined by the distance to the

left and right side of the parent element. The

"Width" attribute is ignored in all calculations!

HeightMode [} 428] Selection of the method of calculating the height:

· Value: The height is defined by the height entered.

· Parent: The height is defined by the distance to the

top and bottom side of the parent element. The

"Height" attribute is ignored in all calculations!

Category: Common

Name Description

IsEnabled [} 425] Selection of whether a control should be activated

Id [} 424] Definition of the name of the control

Type [} 439] Type name of the control.

ClassNames [} 425] Definition of control classes

IsAttached [} 425] If a control is logically assigned in the DOM.

ToolTip [} 438] Definition of the tool tip for the control

Category: Border

Name Description

BorderRadius [} 433] Definition of the radius of the four corners to round

them off

BorderStyle [} 433] Selection of the border style of the four sides of the

control

BorderWidth [} 433] Definition of the border width of the four sides of the

control

Category: Background Image

Name Description

BackgroundImage [} 434] Definition of an image that is located above the

background color

BackgroundImageHeight [} 435] Definition of the height of the background image

BackgroundImageHeightUnit [} 435] Selection of the unit of the height of the background

image:

· Pixels for an absolute height

· Percent for a relative height

BackgroundImageWidth [} 434] Definition of the width of the background image

BackgroundImageWidthUnit [} 434] Selection of the unit of the width of the background

image:

· Pixels for an absolute width

· Percent for a relative width

BackgroundImagePadding [} 435] Definition of an additional distance between the

border of the control and background image for the

four sides

BackgroundImageVerticalAlignment [} 436] Definition of the vertical alignment of the background

image within the control

BackgroundImageHorizontalAlignment [} 435] Definition of the horizontal alignment of the

background image within the control

Category: Appearance

Name Description

FillColor [} 221] Definition of the fill color of the control

StrokeColor [} 221] Definition of the line color of the control

StrokeStyle [} 221] Selecting the style of the ellipse line

StrokeThickness [} 222] Definition of the line width of the ellipse

StrokeThicknessUnit [} 222] Selecting the unit of the line width:

· Pixels for an absolute width

Events

Category: Framework

Name Description

onAttached [} 440] The control was added to the display.

onDetached [} 440] The control was removed from the display.

onInitialized [} 441] The control was initialized.

onMoved [} 443] The control was moved in relation to the browser

window.

onResized [} 444] The size of the control was changed.

Category: Operator

Name Description

onPressed [} 443] A mouse click was executed or a touch screen was

briefly touched.

onMouseClick [} 441] The left mouse button was clicked over the control

and released.

onMouseDoubleClick [} 441] The left mouse button was clicked twice over the

control and released.

onMouseRightClick [} 442] The right mouse button was clicked over the control

and released.

onMouseDown [} 441] A mouse button was depressed over the control.

onMouseEnter [} 442] The mouse pointer was moved over the control.

onMouseLeave [} 442] The mouse pointer has left the control.

onMouseUp [} 443] A mouse button was released over the control.

onMouseDownLeft [} 441] The left mouse button was depressed over the

control.

onMouseDownRight [} 441] The right mouse button was depressed over the

control.

onMouseMove [} 442] The mouse was moved over the control.

onMouseOver [} 442] The mouse pointer was moved over the control or

one of its children.

onMouseOut [} 442] The mouse pointer has left the control or one of its

child controls.

onMouseUpLeft [} 443] The left mouse button was released over the control.

onMouseUpRight [} 443] The right mouse button was released over the

control.

onMouseWheel [} 443] The mouse wheel was moved over the control.

onTouchStart [} 444] A finger/stylus was placed against a touch screen.

onTouchMove [} 444] A finger/stylus was moved on a touch screen.

onTouchEnd [} 444] A finger/stylus was lifted off a touch screen.

onTouchCancel [} 444] An interaction with a touch screen was aborted.

Access rights

Name Description

observe [} 444] Determines whether the control is generally

observable.

operate [} 445] Determines whether the control is generally operable.

Inheritance hierarchy

Control [} 419]

Ellipse

Note: Available since version 1.8

See also

API reference [} 1358] for this control

5.2.6.1 Attributes

5.2.6.1.1 FillColor

Defines the fill color of the control.

Scheme: tchmi:framework#/definitions/Color [} 2094]

Origin: Ellipse [} 216]

See also

Attribute getter: getFillColor [} 1363]

Attribute setter: setFillColor [} 1364]

Note: Available since version 1.8

5.2.6.1.2 StrokeColor

Defines the stroke color of the control.

Scheme: tchmi:framework#/definitions/SolidColor [} 2133]

Origin: Ellipse [} 216]

See also

Attribute getter: getStrokeColor [} 1364]

Attribute setter: setStrokeColor [} 1365]

Note: Available since version 1.8

5.2.6.1.3 StrokeStyle

Definition of the stroke style.

Comma or space-separated list of numbers that specify the length of strokes and spaces.

If an odd number is specified, the list is repeated once. Example: "5, 3, 2" is equivalent to "5, 3, 2, 5, 3, 2".

Scheme: tchmi:general#/definitions/String [} 2069]

Origin: Ellipse [} 216]

See also

Attribute getter: getStrokeStyle [} 1367]

Attribute setter: setStrokeStyle [} 1367]

Note: Available since version 1.8

5.2.6.1.4 StrokeThickness

Defines the stroke thickness of the control in pixels.

Scheme: tchmi:framework#/definitions/MeasurementValue [} 2123]

Origin: Ellipse [} 216]

See also

Attribute getter: getStrokeThickness [} 1365]

Attribute setter: setStrokeThickness [} 1366]

Note: Available since version 1.8

5.2.6.1.5 StrokeThicknessUnit

Pixel unit. At this point, only pixels can be used as a unit.

Scheme: tchmi:framework#/definitions/PixelUnit [} 2128]

Origin: Ellipse [} 216]

See also

Attribute getter: getStrokeThicknessUnit [} 1366]

The attribute can only be read and therefore has no setter.

Note: Available since version 1.8

5.2.7 Event Grid

The Event Grid is provided for the tabular display of alarms and messages.

Attributes

Category: Colors

Name Description

BackgroundColor [} 433] Definition of the background color

BorderColor [} 432] Definition of the border color of the control

Category: Layout

Name Description

Left [} 426] Definition of the distance from the left side to the left

side of the surrounding control

LeftUnit [} 426] Definition of the unit of the distance to the right side

of the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Top [} 426] Definition of the distance from the top side to the top

side of the surrounding control

TopUnit [} 426] Selection of the unit of the distance to the top side of

the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Right [} 429] Definition of the distance from the right side to the

right side of the surrounding control

RightUnit [} 429] Selection of the unit of the distance to the right side

of the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Bottom [} 429] Definition of the distance from the bottom side to the

bottom side of the surrounding control

BottomUnit [} 429] Selection of the unit of the distance to the bottom

side of the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Width [} 427] Definition of the external width of the control

WidthUnit [} 427] Selection of the unit of the width:

· Pixels for an absolute width

· Percent for a relative width

Height [} 428] Definition of the external height of the control

HeightUnit [} 428] Selection of the unit of the height:

· Pixels for an absolute height

· Percent for a relative height

MaxWidth [} 437] Definition of the maximum width if the control size is

defined as dynamic

MaxWidthUnit [} 437] Selection of the unit of the maximum width:

· Pixels for an absolute value

· Percent for a relative value

MinWidth [} 438] Definition of the minimum width if the control size is

defined as dynamic

MinWidthUnit [} 438] Selection of the unit of the minimum width:

· Pixels for an absolute value

· Percent for a relative value

MaxHeight [} 436] Definition of the maximum height if the control size is

defined as dynamic

MaxHeightUnit [} 437] Selection of the unit of the maximum height:

· Pixels for an absolute value

· Percent for a relative value

MinHeight [} 436] Definition of the minimum height if the control size is

defined as dynamic

Name Description

MinHeightUnit [} 436] Selection of the unit of the minimum height:

· Pixels for an absolute value

· Percent for a relative value

RenderedLeft [} 430] Calculated distance in pixels from the left side to the

left side of the surrounding control

RenderedTop [} 430] Calculated distance in pixels from the top side to the

top side of the surrounding control

RenderedRight [} 431] Calculated distance in pixels from the right side to the

right side of the surrounding control

RenderedBottom [} 430] Calculated distance in pixels from the bottom side to

the bottom side of the surrounding control

RenderedWidth [} 431] Calculated width of the control in pixels

RenderedHeight [} 431] Calculated height of the control in pixels

GridRowIndex [} 432] Definition of the row of a grid in which the control is to

be displayed

GridColumnIndex [} 432] Definition of the column of a grid in which the control

is to be displayed

Opacity [} 438] Definition of the transparency of the entire control

Visibility [} 439] Selection of the visibility of a control:

· Visible: Control is visible

· Hidden: Control is invisible, but is drawn – controls

behind it cannot be operated

· Collapsed: Control is invisible and is not drawn –

controls behind it can be operated

ZIndex [} 440] Definition of the position on the Z-axis

Transform [} 439] Definition of a transformation of a control:

· Translate: Translate in X-, Y-, Z-direction

· Rotate: Rotate by an angle

· Scale: Zoom by a factor

· Skew: Sides shown skewed by an angle

· Origin: Set the origin of the transformation relative

to the position of the control

· Perspective: Set the perspective of the

transformations of all child elements

BoxShadow [} 440] Definition of a shadow

WidthMode [} 427] Selection of the method of calculating the width:

· Value: The width is defined by the width entered.

· Parent: The width is defined by the distance to the

left and right side of the parent element. The

"Width" attribute is ignored in all calculations!

HeightMode [} 428] Selection of the method of calculating the height:

· Value: The height is defined by the height entered.

· Parent: The height is defined by the distance to the

top and bottom side of the parent element. The

"Height" attribute is ignored in all calculations!

Category: Common

Name Description

Filter [} 229] Defines which events are queried by the server

Columns [} 229] The columns to be displayed in the EventGrid

IsEnabled [} 425] Selection of whether a control should be activated

Id [} 424] Definition of the name of the control

Type [} 439] Type name of the control.

ClassNames [} 425] Definition of control classes

IsAttached [} 425] If a control is logically assigned in the DOM.

ToolTip [} 438] Definition of the tool tip for the control

Category: Border

Name Description

BorderRadius [} 433] Definition of the radius of the four corners to round

them off

BorderStyle [} 433] Selection of the border style of the four sides of the

control

BorderWidth [} 433] Definition of the border width of the four sides of the

control

Category: Background Image

Name Description

BackgroundImage [} 434] Definition of an image that is located above the

background color

BackgroundImageHeight [} 435] Definition of the height of the background image

BackgroundImageHeightUnit [} 435] Selection of the unit of the height of the background

image:

· Pixels for an absolute height

· Percent for a relative height

BackgroundImageWidth [} 434] Definition of the width of the background image

BackgroundImageWidthUnit [} 434] Selection of the unit of the width of the background

image:

· Pixels for an absolute width

· Percent for a relative width

BackgroundImagePadding [} 435] Definition of an additional distance between the

border of the control and background image for the

four sides

BackgroundImageVerticalAlignment [} 436] Definition of the vertical alignment of the background

image within the control

BackgroundImageHorizontalAlignment [} 435] Definition of the horizontal alignment of the

background image within the control

Category: Menubar

Name Description

MenuBarPosition [} 229] Position of the menu bar

ShowMenuBar [} 230] Whether the menu bar is to be displayed

Events

Category: Framework

Name Description

onAttached [} 440] The control was added to the display.

onDetached [} 440] The control was removed from the display.

onInitialized [} 441] The control was initialized.

onMoved [} 443] The control was moved in relation to the browser

window.

onResized [} 444] The size of the control was changed.

Category: Operator

Name Description

onPressed [} 443] A mouse click was executed or a touch screen was

briefly touched.

onMouseClick [} 441] The left mouse button was clicked over the control

and released.

onMouseDoubleClick [} 441] The left mouse button was clicked twice over the

control and released.

onMouseRightClick [} 442] The right mouse button was clicked over the control

and released.

onMouseDown [} 441] A mouse button was depressed over the control.

onMouseEnter [} 442] The mouse pointer was moved over the control.

onMouseLeave [} 442] The mouse pointer has left the control.

onMouseUp [} 443] A mouse button was released over the control.

onMouseDownLeft [} 441] The left mouse button was depressed over the

control.

onMouseDownRight [} 441] The right mouse button was depressed over the

control.

onMouseMove [} 442] The mouse was moved over the control.

onMouseOver [} 442] The mouse pointer was moved over the control or

one of its children.

onMouseOut [} 442] The mouse pointer has left the control or one of its

child controls.

onMouseUpLeft [} 443] The left mouse button was released over the control.

onMouseUpRight [} 443] The right mouse button was released over the

control.

onMouseWheel [} 443] The mouse wheel was moved over the control.

onTouchStart [} 444] A finger/stylus was placed against a touch screen.

onTouchMove [} 444] A finger/stylus was moved on a touch screen.

onTouchEnd [} 444] A finger/stylus was lifted off a touch screen.

onTouchCancel [} 444] An interaction with a touch screen was aborted.

Access rights

Name Description

observe [} 444] Determines whether the control is generally

observable.

operate [} 445] Determines whether the control is generally operable.

configure [} 230] Determines whether the column configuration in the

event grid is customizable.

viewDetails [} 230] Determines whether the display of event details can

be enabled in the event grid.

Inheritance hierarchy

Control [} 419]

Event Grid

Note: Available since version 1.10

See also

API reference [} 1367] for this control

5.2.7.1 Configuration

The TwinCAT 3 EventLogger can be used to send events. The display of the events can be defined via the

filters [} 227]. The columns [} 228] can be configured via the Properties.

Example: https://infosys.beckhoff.com/content/1033/TE2000_TC3_HMI_Engineering/Resources/

zip/5239743115.zip

5.2.7.2 Dialogs

5.2.7.2.1 Filter

You can configure which events are to be displayed via the filter editor. The filters are defined via the

properties of the Event Grid.

1. Add clause: Add a condition

2. Delete clause: Delete a condition

3. And/Or: Logical combination of conditions

4. Path: Filter options:

◦ Domain: Server Extension (e.g. TcHmiEventLogger)

◦ Name: Event Name

◦ Text: Event Text

◦ Id: Event Id

◦ Time raised: Time of the event

◦ Time cleared: Time of resetting an alarm

◦ Time confirmed: Time of confirming an alarm

◦ Type: Alarm or message

◦ Severity: Severity level: Verbose, Info, Warning, Error, Critical

◦ Confirmation state: Alarm status

5. Operator: Comparison operator of the condition

6. Value: Value of the condition

Several conditions can be grouped and linked if more than one condition is selected.

1. Group clause: Grouping of several conditions. The brackets link them optically.

2. Ungroup clause: Cancel existing groupings.

5.2.7.2.2 Columns

The columns to be displayed in the Event Grid can be configured in the columns editor.

An entry is added for each column. The column name is specified via the combobox, where you can select a

column from all available columns [} 229].

Items List of all objects added

Delete the selected object

Change the object order (top = left)

Add a new object

5.2.7.3 Attributes

5.2.7.3.1 Filter

Defines which events are queried by the server.

Scheme: tchmi:server#/definitions/eventFilter [} 2154]

Origin: Event Grid [} 222]

See also

Attribute getter: getFilter [} 1372]

Attribute setter: setFilter [} 1373]

Note: Available since version 1.10

5.2.7.3.2 Columns

The columns to be displayed in the Event Grid.

Scheme: tchmi:framework#/definitions/EventGridColumnList [} 2106]

Origin: Event Grid [} 222]

See also

Attribute getter: getColumns [} 1373]

Attribute setter: setColumns [} 1374]

Note: Available since version 1.10

5.2.7.3.3 MenuBarPosition

The position of the menu bar.

Scheme: tchmi:framework#/definitions/EventGridMenuBarPosition [} 2107]

Origin: Event Grid [} 222]

See also

Attribute getter: getMenuBarPosition [} 1374]

Attribute setter: setMenuBarPosition [} 1375]

Note: Available since version 1.10

5.2.7.3.4 ShowMenuBar

Whether the menu bar is to be displayed.

Scheme: tchmi:general#/definitions/Boolean [} 2060]

Origin: Event Grid [} 222]

See also

Attribute getter: getShowMenuBar [} 1375]

Attribute setter: setShowMenuBar [} 1376]

Note: Available since version 1.10

5.2.7.4 Permissions

5.2.7.4.1 configure

Determines whether the column configuration in the event grid is customizable.

Origin: Event Grid [} 222]

See also

See also User management at control level [} 511].

Note: Available since version 1.10

5.2.7.4.2 viewDetails

Determines whether the display of event details can be enabled in the event grid.

Origin: Event Grid [} 222]

See also

See also User management at control level [} 511].

Note: Available since version 1.10

5.2.7.5 Menu bar

The Event Grid has a menu bar that provides filter and configuration options at runtime in the client. The

menu bar can be shown and hidden and placed at the edge of the Event Grid:

1. ShowMenuBar: Show or hide menu bar.

2. MenuBarPosition: Position of the menu bar.

The menu bar has the following buttons:

1. Show or hide all alarms.

2. Show or hide all messages.

3. Show or hide verbose events.

4. Show or hide information events.

5. Show or hide warnings.

6. Show or hide errors.

7. Show or hide critical errors.

8. Call the column configuration. The column configuration only applies to the client.

9. Confirm alarm.

10. Confirm all unconfirmed alarms.

5.2.8 IFrame

An IFrame is a nested browser context. It can be used to include another HTML page in the visualization or

to display a PDF document. The attribute 'Src [} 235]' is used to define the HTML page or the PDF.

Attributes

Category: Colors

Name Description

BackgroundColor [} 433] Definition of the background color

BorderColor [} 432] Definition of the border color of the control

Category: Layout

Name Description

Left [} 426] Definition of the distance from the left side to the left

side of the surrounding control

LeftUnit [} 426] Definition of the unit of the distance to the right side

of the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Top [} 426] Definition of the distance from the top side to the top

side of the surrounding control

TopUnit [} 426] Selection of the unit of the distance to the top side of

the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Right [} 429] Definition of the distance from the right side to the

right side of the surrounding control

RightUnit [} 429] Selection of the unit of the distance to the right side

of the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Bottom [} 429] Definition of the distance from the bottom side to the

bottom side of the surrounding control

BottomUnit [} 429] Selection of the unit of the distance to the bottom

side of the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Width [} 427] Definition of the external width of the control

WidthUnit [} 427] Selection of the unit of the width:

· Pixels for an absolute width

· Percent for a relative width

Height [} 428] Definition of the external height of the control

HeightUnit [} 428] Selection of the unit of the height:

· Pixels for an absolute height

· Percent for a relative height

MaxWidth [} 437] Definition of the maximum width if the control size is

defined as dynamic

MaxWidthUnit [} 437] Selection of the unit of the maximum width:

· Pixels for an absolute value

· Percent for a relative value

MinWidth [} 438] Definition of the minimum width if the control size is

defined as dynamic

MinWidthUnit [} 438] Selection of the unit of the minimum width:

· Pixels for an absolute value

· Percent for a relative value

MaxHeight [} 436] Definition of the maximum height if the control size is

defined as dynamic

MaxHeightUnit [} 437] Selection of the unit of the maximum height:

· Pixels for an absolute value

· Percent for a relative value

MinHeight [} 436] Definition of the minimum height if the control size is

defined as dynamic

Name Description

MinHeightUnit [} 436] Selection of the unit of the minimum height:

· Pixels for an absolute value

· Percent for a relative value

RenderedLeft [} 430] Calculated distance in pixels from the left side to the

left side of the surrounding control

RenderedTop [} 430] Calculated distance in pixels from the top side to the

top side of the surrounding control

RenderedRight [} 431] Calculated distance in pixels from the right side to the

right side of the surrounding control

RenderedBottom [} 430] Calculated distance in pixels from the bottom side to

the bottom side of the surrounding control

RenderedWidth [} 431] Calculated width of the control in pixels

RenderedHeight [} 431] Calculated height of the control in pixels

GridRowIndex [} 432] Definition of the row of a grid in which the control is to

be displayed

GridColumnIndex [} 432] Definition of the column of a grid in which the control

is to be displayed

Opacity [} 438] Definition of the transparency of the entire control

Visibility [} 439] Selection of the visibility of a control:

· Visible: Control is visible

· Hidden: Control is invisible, but is drawn – controls

behind it cannot be operated

· Collapsed: Control is invisible and is not drawn –

controls behind it can be operated

ZIndex [} 440] Definition of the position on the Z-axis

Transform [} 439] Definition of a transformation of a control:

· Translate: Translate in X-, Y-, Z-direction

· Rotate: Rotate by an angle

· Scale: Zoom by a factor

· Skew: Sides shown skewed by an angle

· Origin: Set the origin of the transformation relative

to the position of the control

· Perspective: Set the perspective of the

transformations of all child elements

BoxShadow [} 440] Definition of a shadow

WidthMode [} 427] Selection of the method of calculating the width:

· Value: The width is defined by the width entered.

· Parent: The width is defined by the distance to the

left and right side of the parent element. The

"Width" attribute is ignored in all calculations!

HeightMode [} 428] Selection of the method of calculating the height:

· Value: The height is defined by the height entered.

· Parent: The height is defined by the distance to the

top and bottom side of the parent element. The

"Height" attribute is ignored in all calculations!

Category: Common

Name Description

Src [} 237] Definition of the URL of the web page to be

embedded or the path of a PDF to be displayed

Example of URL: https://www.beckhoff.com

Example of PDF: <Path within the TC HMI project>/

Test.pdf#page=10

IsEnabled [} 425] Selection of whether a control should be activated

Id [} 424] Definition of the name of the control

Type [} 439] Type name of the control.

ClassNames [} 425] Definition of control classes

IsAttached [} 425] If a control is logically assigned in the DOM.

ToolTip [} 438] Definition of the tool tip for the control

Category: Border

Name Description

BorderRadius [} 433] Definition of the radius of the four corners to round

them off

BorderStyle [} 433] Selection of the border style of the four sides of the

control

BorderWidth [} 433] Definition of the border width of the four sides of the

control

BackgroundImage [} 434] Definition of an image that is located above the

background color

BackgroundImageHeight [} 435] Definition of the height of the background image

BackgroundImageHeightUnit [} 435] Selection of the unit of the height of the background

image:

· Pixels for an absolute height

· Percent for a relative height

BackgroundImageWidth [} 434] Definition of the width of the background image

BackgroundImageWidthUnit [} 434] Selection of the unit of the width of the background

image:

· Pixels for an absolute width

· Percent for a relative width

BackgroundImagePadding [} 435] Definition of an additional distance between the

border of the control and background image for the

four sides

BackgroundImageVerticalAlignment [} 436] Definition of the vertical alignment of the background

image within the control

BackgroundImageHorizontalAlignment [} 435] Definition of the horizontal alignment of the

background image within the control

Events

Category: Control

Name Description

onLoad [} 237] The IFrame was loaded successfully.

onError [} 237] The IFrame was not loaded successfully.

Category: Framework

Name Description

onAttached [} 440] The control was added to the display.

onDetached [} 440] The control was removed from the display.

onInitialized [} 441] The control was initialized.

onMoved [} 443] The control was moved in relation to the browser

window.

onResized [} 444] The size of the control was changed.

Category: Operator

Name Description

onPressed [} 443] A mouse click was executed or a touch screen was

briefly touched.

onMouseClick [} 441] The left mouse button was clicked over the control

and released.

onMouseDoubleClick [} 441] The left mouse button was clicked twice over the

control and released.

onMouseRightClick [} 442] The right mouse button was clicked over the control

and released.

onMouseDown [} 441] A mouse button was depressed over the control.

onMouseEnter [} 442] The mouse pointer was moved over the control.

onMouseLeave [} 442] The mouse pointer has left the control.

onMouseUp [} 443] A mouse button was released over the control.

onMouseDownLeft [} 441] The left mouse button was depressed over the

control.

onMouseDownRight [} 441] The right mouse button was depressed over the

control.

onMouseMove [} 442] The mouse was moved over the control.

onMouseOver [} 442] The mouse pointer was moved over the control or

one of its children.

onMouseOut [} 442] The mouse pointer has left the control or one of its

child controls.

onMouseUpLeft [} 443] The left mouse button was released over the control.

onMouseUpRight [} 443] The right mouse button was released over the

control.

onMouseWheel [} 443] The mouse wheel was moved over the control.

onTouchStart [} 444] A finger/stylus was placed against a touch screen.

onTouchMove [} 444] A finger/stylus was moved on a touch screen.

onTouchEnd [} 444] A finger/stylus was lifted off a touch screen.

onTouchCancel [} 444] An interaction with a touch screen was aborted.

Access rights

Name Description

observe [} 444] Determines whether the control is generally

observable.

operate [} 445] Determines whether the control is generally operable.

Inheritance hierarchy

Control [} 419]

IFrame

Note: Available since version 1.8

See also

API reference [} 1376] for this control

5.2.8.1 Attributes

5.2.8.1.1 Src

The URL of the website to embed.

Scheme: tchmi:general#/definitions/String [} 2069]

Origin: IFrame [} 232]

See also

Attribute getter: getSrc [} 1381]

Attribute setter: setSrc [} 1382]

Note: Available since version 1.8

5.2.8.2 Events

5.2.8.2.1 onError

The IFrame was not loaded successfully.

Origin: IFrame [} 232]

Note: Available since version 1.8

5.2.8.2.2 onLoad

The IFrame was loaded successfully.

Origin: IFrame [} 232]

Note: Available since version 1.8

5.2.9 Image

An image is an image display in which image files from the project path can be displayed. The supported

image formats are defined by the browser used.

Attributes

Category: Colors

Name Description

BackgroundColor [} 433] Definition of the background color

BorderColor [} 432] Definition of the border color of the control

Category: Layout

Name Description

Left [} 426] Definition of the distance from the left side to the left

side of the surrounding control

LeftUnit [} 426] Definition of the unit of the distance to the right side

of the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Top [} 426] Definition of the distance from the top side to the top

side of the surrounding control

TopUnit [} 426] Selection of the unit of the distance to the top side of

the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Right [} 429] Definition of the distance from the right side to the

right side of the surrounding control

RightUnit [} 429] Selection of the unit of the distance to the right side

of the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Bottom [} 429] Definition of the distance from the bottom side to the

bottom side of the surrounding control

BottomUnit [} 429] Selection of the unit of the distance to the bottom

side of the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Width [} 427] Definition of the external width of the control

WidthUnit [} 427] Selection of the unit of the width:

· Pixels for an absolute width

· Percent for a relative width

Height [} 428] Definition of the external height of the control

HeightUnit [} 428] Selection of the unit of the height:

· Pixels for an absolute height

· Percent for a relative height

MaxWidth [} 437] Definition of the maximum width if the control size is

defined as dynamic

MaxWidthUnit [} 437] Selection of the unit of the maximum width:

· Pixels for an absolute value

· Percent for a relative value

MinWidth [} 438] Definition of the minimum width if the control size is

defined as dynamic

MinWidthUnit [} 438] Selection of the unit of the minimum width:

· Pixels for an absolute value

· Percent for a relative value

MaxHeight [} 436] Definition of the maximum height if the control size is

defined as dynamic

MaxHeightUnit [} 437] Selection of the unit of the maximum height:

· Pixels for an absolute value

· Percent for a relative value

MinHeight [} 436] Definition of the minimum height if the control size is

defined as dynamic

Name Description

MinHeightUnit [} 436] Selection of the unit of the minimum height:

· Pixels for an absolute value

· Percent for a relative value

RenderedLeft [} 430] Calculated distance in pixels from the left side to the

left side of the surrounding control

RenderedTop [} 430] Calculated distance in pixels from the top side to the

top side of the surrounding control

RenderedRight [} 431] Calculated distance in pixels from the right side to the

right side of the surrounding control

RenderedBottom [} 430] Calculated distance in pixels from the bottom side to

the bottom side of the surrounding control

RenderedWidth [} 431] Calculated width of the control in pixels

RenderedHeight [} 431] Calculated height of the control in pixels

GridRowIndex [} 432] Definition of the row of a grid in which the control is to

be displayed

GridColumnIndex [} 432] Definition of the column of a grid in which the control

is to be displayed

Opacity [} 438] Definition of the transparency of the entire control

Visibility [} 439] Selection of the visibility of a control:

· Visible: Control is visible

· Hidden: Control is invisible, but is drawn – controls

behind it cannot be operated

· Collapsed: Control is invisible and is not drawn –

controls behind it can be operated

ZIndex [} 440] Definition of the position on the Z-axis

Transform [} 439] Definition of a transformation of a control:

· Translate: Translate in X-, Y-, Z-direction

· Rotate: Rotate by an angle

· Scale: Zoom by a factor

· Skew: Sides shown skewed by an angle

· Origin: Set the origin of the transformation relative

to the position of the control

· Perspective: Set the perspective of the

transformations of all child elements

BoxShadow [} 440] Definition of a shadow

WidthMode [} 243] Selection of the method of calculating the width:

· Value: The width is defined by the width entered.

· Parent: The width is defined by the distance to the

left and right side. The 'Width' attribute is ignored

in all calculations!

· Content: The width is calculated from the height.

The aspect ratio of the image is maintained. If

'Width Mode' and 'Height Mode' are set to Content,

the image is drawn in its original size.

HeightMode [} 242] Selection of the method of calculating the height:

· Value: The height is defined by the height entered.

· Parent: The height is defined by the distance to the

top and bottom side. The 'Height' attribute is

ignored in all calculations!

Name Description

· Content: The height is calculated from the width

while maintaining the aspect ratio of the image. If

'Width Mode' and 'Height Mode' are set to Content,

the image is drawn in its original size.

OriginalWidth [} 244] Original width of the image file.

OriginalHeight [} 243] Original height of the image file.

Category: Common

Name Description

Src [} 242] Definition of the image path within the TC HMI project

Alt [} 242] Definition of an alternative text that is displayed if the

image cannot or should not be loaded

IsEnabled [} 425] Selection of whether a control should be activated

Id [} 424] Definition of the name of the control

Type [} 439] Type name of the control.

ClassNames [} 425] Definition of control classes

IsAttached [} 425] If a control is logically assigned in the DOM.

ToolTip [} 438] Definition of the tool tip for the control

Category: Border

Name Description

BorderRadius [} 433] Definition of the radius of the four corners to round

them off

BorderStyle [} 433] Selection of the border style of the four sides of the

control

BorderWidth [} 433] Definition of the border width of the four sides of the

control

Category: Background Image

Name Description

BackgroundImage [} 434] Definition of an image that is located above the

background color

BackgroundImageHeight [} 435] Definition of the height of the background image

BackgroundImageHeightUnit [} 435] Selection of the unit of the height of the background

image:

· Pixels for an absolute height

· Percent for a relative height

BackgroundImageWidth [} 434] Definition of the width of the background image

BackgroundImageWidthUnit [} 434] Selection of the unit of the width of the background

image:

· Pixels for an absolute width

· Percent for a relative width

BackgroundImagePadding [} 435] Definition of an additional distance between the

border of the control and background image for the

four sides

BackgroundImageVerticalAlignment [} 436] Definition of the vertical alignment of the background

image within the control

BackgroundImageHorizontalAlignment [} 435] Definition of the horizontal alignment of the

background image within the control

Events

Category: Control

Name Description

onLoad [} 244] The image was loaded successfully.

onError [} 244] The image was not loaded successfully.

Category: Framework

Name Description

onAttached [} 440] The control was added to the display.

onDetached [} 440] The control was removed from the display.

onInitialized [} 441] The control was initialized.

onMoved [} 443] The control was moved in relation to the browser

window.

onResized [} 444] The size of the control was changed.

Category: Operator

Name Description

onPressed [} 443] A mouse click was executed or a touch screen was

briefly touched.

onMouseClick [} 441] The left mouse button was clicked over the control

and released.

onMouseDoubleClick [} 441] The left mouse button was clicked twice over the

control and released.

onMouseRightClick [} 442] The right mouse button was clicked over the control

and released.

onMouseDown [} 441] A mouse button was depressed over the control.

onMouseEnter [} 442] The mouse pointer was moved over the control.

onMouseLeave [} 442] The mouse pointer has left the control.

onMouseUp [} 443] A mouse button was released over the control.

onMouseDownLeft [} 441] The left mouse button was depressed over the

control.

onMouseDownRight [} 441] The right mouse button was depressed over the

control.

onMouseMove [} 442] The mouse was moved over the control.

onMouseOver [} 442] The mouse pointer was moved over the control or

one of its children.

onMouseOut [} 442] The mouse pointer has left the control or one of its

child controls.

onMouseUpLeft [} 443] The left mouse button was released over the control.

onMouseUpRight [} 443] The right mouse button was released over the

control.

onMouseWheel [} 443] The mouse wheel was moved over the control.

onTouchStart [} 444] A finger/stylus was placed against a touch screen.

onTouchMove [} 444] A finger/stylus was moved on a touch screen.

onTouchEnd [} 444] A finger/stylus was lifted off a touch screen.

onTouchCancel [} 444] An interaction with a touch screen was aborted.

Access rights

Name Description

observe [} 444] Determines whether the control is generally

observable.

operate [} 445] Determines whether the control is generally operable.

Inheritance hierarchy

Control [} 419]

Image

Note: Available since version 1.8

See also

API reference [} 1382] for this control

5.2.9.1 Attributes

5.2.9.1.1 Src

The address of the image. Images on other servers are also possible.

Scheme: tchmi:framework#/definitions/Path [} 2128]

Origin: Image [} 237]

See also

Attribute getter: getSrc [} 1389]

Attribute setter: setSrc [} 1390]

Note: Available since version 1.8

5.2.9.1.2 Alt

Alternative text that is displayed if the image cannot or should not be loaded.

Scheme: tchmi:general#/definitions/String [} 2069]

Origin: Image [} 237]

See also

Attribute getter: getAlt [} 1390]

Attribute setter: setAlt [} 1391]

Note: Available since version 1.8

5.2.9.1.3 HeightMode

Selection of the method of calculating the height. The available options are:

· Value: The height is defined by the height entered.

· Parent: The height is defined by the distance to the top and bottom side. The Height attribute is

ignored in all calculations!

· Content: The height is calculated from the width while maintaining the aspect ratio of the image. If

Width Mode [} 243] and Height Mode are set to Content, the image is drawn in its original size.

Note: Learn how controls can be positioned and their size defined [} 127].

Scheme: tchmi:framework#/definitions/SizeModeWithContent [} 2133]

Origin: Image [} 237]

See also

Attribute getter: getHeightMode [} 1387]

Attribute setter: setHeightMode [} 1388]

Note: Available since version 1.8

5.2.9.1.4 WidthMode

Selection of the method of calculating the width. The available options are:

· Value: The width is defined by the width entered.

· Parent: The width is defined by the distance to the left and right side. The Width attribute is ignored in

all calculations!

· Content: The width is calculated from the height while maintaining the aspect ratio of the image. If

Width Mode and Height Mode [} 242] are set to Content, the image is drawn in its original size.

Note: Learn how controls can be positioned and their size defined [} 127].

Scheme: tchmi:framework#/definitions/SizeModeWithContent [} 2133]

Origin: Image [} 237]

See also

Attribute getter: getWidthMode [} 1388]

Attribute setter: setWidthMode [} 1389]

Note: Available since version 1.8

5.2.9.1.5 OriginalHeight

Original height of the image file.

Returns 0 if no image is available.

Scheme: tchmi:general#/definitions/Number [} 2067]

Origin: Image [} 237]

See also

Attribute getter: getOriginalHeight [} 1391]

The attribute can only be read and therefore has no setter.

Note: Available since version 1.8

5.2.9.1.6 OriginalWidth

Original width of the image file.

Returns 0 if no image is available.

Scheme: tchmi:general#/definitions/Number [} 2067]

Origin: Image [} 237]

See also

Attribute getter: getOriginalWidth [} 1391]

The attribute can only be read and therefore has no setter.

Note: Available since version 1.8

5.2.9.2 Events

5.2.9.2.1 onError

The image was not loaded successfully.

Origin: Image [} 237]

Note: Available since version 1.8

5.2.9.2.2 onLoad

The image was loaded successfully.

Origin: Image [} 237]

Note: Available since version 1.8

5.2.10 Keyboard

A keyboard is an on-screen keyboard that can be used for input without a hardware keyboard. The 'Layout

[} 248]' attribute can be used to select different layouts. Various German and American layouts are available,

as well as a numpad and a calculator.

In the layouts whose names end with '_compact', a window in which additional keys are offered can be called

up by pressing a few keys for a prolonged period. Example: Prolonged pressing of the 's' key opens a

window with the additional key 'ß'.

Attributes

Category: Colors

Name Description

LabelColor [} 255] Definition of the text color of the keys

LabelStrokeColor [} 255] Definition of the outline color of the graphic key

characters

LabelFillColor [} 255] Definition of the fill color of the graphic key characters

KeyBackgroundColor [} 254] Definition of the background color of the keys

AdditionalKeyBackdropColor [} 252] Definition of the background color of the window in

which the additional characters for the compact

layouts are displayed

BackgroundColor [} 433] Definition of the background color

BorderColor [} 432] Definition of the border color of the control

Category: Layout

Name Description

Left [} 426] Definition of the distance from the left side to the left

side of the surrounding control

LeftUnit [} 426] Definition of the unit of the distance to the right side

of the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Top [} 426] Definition of the distance from the top side to the top

side of the surrounding control

TopUnit [} 426] Selection of the unit of the distance to the top side of

the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Right [} 429] Definition of the distance from the right side to the

right side of the surrounding control

RightUnit [} 429] Selection of the unit of the distance to the right side

of the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Bottom [} 429] Definition of the distance from the bottom side to the

bottom side of the surrounding control

BottomUnit [} 429] Selection of the unit of the distance to the bottom

side of the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Width [} 427] Definition of the external width of the control

WidthUnit [} 427] Selection of the unit of the width:

· Pixels for an absolute width

· Percent for a relative width

Height [} 428] Definition of the external height of the control

HeightUnit [} 428] Selection of the unit of the height:

· Pixels for an absolute height

· Percent for a relative height

MaxWidth [} 437] Definition of the maximum width if the control size is

defined as dynamic

MaxWidthUnit [} 437] Selection of the unit of the maximum width:

· Pixels for an absolute value

· Percent for a relative value

MinWidth [} 438] Definition of the minimum width if the control size is

defined as dynamic

MinWidthUnit [} 438] Selection of the unit of the minimum width:

· Pixels for an absolute value

· Percent for a relative value

MaxHeight [} 436] Definition of the maximum height if the control size is

defined as dynamic

MaxHeightUnit [} 437] Selection of the unit of the maximum height:

· Pixels for an absolute value

· Percent for a relative value

MinHeight [} 436] Definition of the minimum height if the control size is

defined as dynamic

Name Description

MinHeightUnit [} 436] Selection of the unit of the minimum height:

· Pixels for an absolute value

· Percent for a relative value

RenderedLeft [} 430] Calculated distance in pixels from the left side to the

left side of the surrounding control

RenderedTop [} 430] Calculated distance in pixels from the top side to the

top side of the surrounding control

RenderedRight [} 431] Calculated distance in pixels from the right side to the

right side of the surrounding control

RenderedBottom [} 430] Calculated distance in pixels from the bottom side to

the bottom side of the surrounding control

RenderedWidth [} 431] Calculated width of the control in pixels

RenderedHeight [} 431] Calculated height of the control in pixels

GridRowIndex [} 432] Definition of the row of a grid in which the control is to

be displayed

GridColumnIndex [} 432] Definition of the column of a grid in which the control

is to be displayed

Opacity [} 438] Definition of the transparency of the entire control

Visibility [} 439] Selection of the visibility of a control:

· Visible: Control is visible

· Hidden: Control is invisible, but is drawn – controls

behind it cannot be operated

· Collapsed: Control is invisible and is not drawn –

controls behind it can be operated

ZIndex [} 440] Definition of the position on the Z-axis

Transform [} 439] Definition of a transformation of a control:

· Translate: Translate in X-, Y-, Z-direction

· Rotate: Rotate by an angle

· Scale: Zoom by a factor

· Skew: Sides shown skewed by an angle

· Origin: Set the origin of the transformation relative

to the position of the control

· Perspective: Set the perspective of the

transformations of all child elements

BoxShadow [} 440] Definition of a shadow

KeyboardPadding [} 255] Definition of the inner distance of the keypad to the

outer sides of the keyboard

AdditionalKeyBackdropPadding [} 252] Definition of the inner distance of the additional keys

to the outer sides of the window in which they are

displayed

WidthMode [} 427] Selection of the method of calculating the width:

· Value: The width is defined by the width entered.

· Parent: The width is defined by the distance to the

left and right side of the parent element. The

"Width" attribute is ignored in all calculations!

HeightMode [} 428] Selection of the method of calculating the height:

· Value: The height is defined by the height entered.

· Parent: The height is defined by the distance to the

top and bottom side of the parent element. The

"Height" attribute is ignored in all calculations!

Category: Common

Name Description

Layout [} 256] Selection of the keyboard layout:

· EN_US-QWERTY_standard: American layout

· EN_US-QWERTY_full: American layout with

numpad

· EN_US-QWERTY_compact: Compact American

layout

· DE_DE-QWERTZ_standard: German layout

· DE_DE-QWERTZ_full: German layout with

numpad

· DE_DE-QWERTZ_compact: Compact German

layout

· PINpad: Layout of a PIN entry

· Numpad: Layout of a numpad

· Calculator: Layout of a calculator

ScaleMode [} 257] Selecting the scaling of the keys

IsEnabled [} 425] Selection of whether a control should be activated

Id [} 424] Definition of the name of the control

Type [} 439] Type name of the control.

ClassNames [} 425] Definition of control classes

IsAttached [} 425] If a control is logically assigned in the DOM.

ToolTip [} 438] Definition of the tool tip for the control

Category: Border

Name Description

BorderRadius [} 433] Definition of the radius of the four corners to round

them off

BorderStyle [} 433] Selection of the border style of the four sides of the

control

BorderWidth [} 433] Definition of the border width of the four sides of the

control

Category: Background Image

Name Description

BackgroundImage [} 434] Definition of an image that is located above the

background color

BackgroundImageHeight [} 435] Definition of the height of the background image

BackgroundImageHeightUnit [} 435] Selection of the unit of the height of the background

image:

· Pixels for an absolute height

· Percent for a relative height

BackgroundImageWidth [} 434] Definition of the width of the background image

BackgroundImageWidthUnit [} 434] Selection of the unit of the width of the background

image:

· Pixels for an absolute width

· Percent for a relative width

BackgroundImagePadding [} 435] Definition of an additional distance between the

border of the control and background image for the

four sides

BackgroundImageVerticalAlignment [} 436] Definition of the vertical alignment of the background

image within the control

BackgroundImageHorizontalAlignment [} 435] Definition of the horizontal alignment of the

background image within the control

Category: Behavior

Name Description

FixedTarget [} 252] Definition of a control using its name, to which all

input is sent regardless of the focus

The name of the control must be entered as a simple

string. The control must not be linked directly.

ReleaseStickyKeysManually [} 256] Selecting whether the Shift key must be deactivated

manually after it has been used together with another

key

LongpressDelay [} 256] Definition of the time in milliseconds that a key must

be pressed for a long keystroke to be detected.

RepetitionDelay [} 256] Definition of the time in milliseconds that a key must

be pressed for the input to be repeated.

PressedKeys [} 257]

Category: Labels

Name Description

LabelStrokeThickness [} 254] Definition of the stroke thickness of the graphic key

characters

LabelFontFamily [} 252] Definition of the font using the name of the font family

or the keyword

LabelFontSize [} 253] Definition of the font size of the key text

LabelFontSizeUnit [} 253] Selecting the unit of the text size:

· Pixels for an absolute size

· Percent for a relative size

LabelFontStyle [} 253] Selecting the font style:

· Normal

· Italic: italic

· Oblique: slanted

LabelFontWeight [} 253] Selecting the font weight:

· Normal

· Bold: bold

Events

Category: Control

Name Description

onKeyPressStarted [} 257] Interaction with a key was started.

onKeyPressFinished [} 258] Interaction with a key was finished.

onKeyPressCanceled [} 258] Interaction with a key was cancelled.

onKeyPressEnded [} 258] Interaction with a key was canceled or finished.

Category: Framework

Name Description

onAttached [} 440] The control was added to the display.

onDetached [} 440] The control was removed from the display.

onInitialized [} 441] The control was initialized.

onMoved [} 443] The control was moved in relation to the browser

window.

onResized [} 444] The size of the control was changed.

Category: Operator

Name Description

onPressed [} 443] A mouse click was executed or a touch screen was

briefly touched.

onMouseClick [} 441] The left mouse button was clicked over the control

and released.

onMouseDoubleClick [} 441] The left mouse button was clicked twice over the

control and released.

onMouseRightClick [} 442] The right mouse button was clicked over the control

and released.

onMouseDown [} 441] A mouse button was depressed over the control.

onMouseEnter [} 442] The mouse pointer was moved over the control.

onMouseLeave [} 442] The mouse pointer has left the control.

onMouseUp [} 443] A mouse button was released over the control.

onMouseDownLeft [} 441] The left mouse button was depressed over the

control.

onMouseDownRight [} 441] The right mouse button was depressed over the

control.

onMouseMove [} 442] The mouse was moved over the control.

onMouseOver [} 442] The mouse pointer was moved over the control or

one of its children.

onMouseOut [} 442] The mouse pointer has left the control or one of its

child controls.

onMouseUpLeft [} 443] The left mouse button was released over the control.

onMouseUpRight [} 443] The right mouse button was released over the

control.

onMouseWheel [} 443] The mouse wheel was moved over the control.

onTouchStart [} 444] A finger/stylus was placed against a touch screen.

onTouchMove [} 444] A finger/stylus was moved on a touch screen.

onTouchEnd [} 444] A finger/stylus was lifted off a touch screen.

onTouchCancel [} 444] An interaction with a touch screen was aborted.

Access rights

Name Description

observe [} 444] Determines whether the control is generally

observable.

operate [} 445] Determines whether the control is generally operable.

Inheritance hierarchy

Control [} 419]

Keyboard

Note: Available since version 1.8

See also

API reference [} 1392] for this control

5.2.10.1 Attributes

5.2.10.1.1 AdditionalKeyBackdropColor

The background color of the additional characters.

Scheme: tchmi:framework#/definitions/Color [} 2094]

Origin: Keyboard [} 244]

See also

Attribute getter: getAdditionalKeyBackdropColor [} 1401]

Attribute setter: setAdditionalKeyBackdropColor [} 1402]

Note: Available since version 1.8

5.2.10.1.2 AdditionalKeyBackdropPadding

Inner distance of the additional keys.

Scheme: tchmi:framework#/definitions/Padding [} 2127]

Origin: Keyboard [} 244]

See also

Attribute getter: getAdditionalKeyBackdropPadding [} 1405]

Attribute setter: setAdditionalKeyBackdropPadding [} 1406]

Note: Available since version 1.8

5.2.10.1.3 FixedTarget

The name of the control to which the characters are sent, regardless of the focus.

Scheme: tchmi:general#/definitions/String [} 2069]

Origin: Keyboard [} 244]

See also

Attribute getter: getFixedTarget [} 1408]

Attribute setter: setFixedTarget [} 1408]

Note: Available since version 1.8

5.2.10.1.4 LabelFontFamily

Comma-separated list of fonts as font family or keyword: 'serif', 'sans-serif', 'monospace'.

Scheme: tchmi:framework#/definitions/FontFamily [} 2108]

Origin: Keyboard [} 244]

See also

Attribute getter: getLabelFontFamily [} 1415]

Attribute setter: setLabelFontFamily [} 1416]

Note: Available since version 1.8

5.2.10.1.5 LabelFontSize

The font size. If the percent is specified as the unit, this is relative to the font size of the parent element.

Scheme: tchmi:framework#/definitions/MeasurementValue [} 2123]

Origin: Keyboard [} 244]

See also

Attribute getter: getLabelFontSize [} 1413]

Attribute setter: setLabelFontSize [} 1414]

Note: Available since version 1.8

5.2.10.1.6 LabelFontSizeUnit

Pixels, or percent for relative sizes.

Scheme: tchmi:framework#/definitions/MeasurementUnit [} 2123]

Origin: Keyboard [} 244]

See also

Attribute getter: getLabelFontSizeUnit [} 1414]

Attribute setter: setLabelFontSizeUnit [} 1415]

Note: Available since version 1.8

5.2.10.1.7 LabelFontStyle

Font style (normal, italic: oblique with special characters, oblique)

Scheme: tchmi:framework#/definitions/FontStyle [} 2108]

Origin: Keyboard [} 244]

See also

Attribute getter: getLabelFontStyle [} 1416]

Attribute setter: setLabelFontStyle [} 1417]

Note: Available since version 1.8

5.2.10.1.8 LabelFontWeight

Font weight (normal, bold).

Scheme: tchmi:framework#/definitions/FontWeight [} 2109]

Origin: Keyboard [} 244]

See also

Attribute getter: getLabelFontWeight [} 1412]

Attribute setter: setLabelFontWeight [} 1413]

Note: Available since version 1.8

5.2.10.1.9 LabelStrokeThickness

Definition of the stroke thickness of the graphic key characters

Scheme: tchmi:general#/definitions/Number [} 2067]

Origin: Keyboard [} 244]

See also

Attribute getter: getLabelStrokeThickness [} 1412]

Attribute setter: setLabelStrokeThickness [} 1412]

Note: Available since version 1.8

5.2.10.1.10 KeyBackgroundColor

The background color of the keys.

Scheme: tchmi:framework#/definitions/Color [} 2094]

Origin: Keyboard [} 244]

See also

Attribute getter: getKeyBackgroundColor [} 1400]

Attribute setter: setKeyBackgroundColor [} 1401]

Note: Available since version 1.8

5.2.10.1.11 KeyPadding

Inner distance in the individual keys.

Scheme: tchmi:framework#/definitions/Padding [} 2127]

Origin: Keyboard [} 244]

See also

Attribute getter: getKeyPadding [} 1404]

Attribute setter: setKeyPadding [} 1405]

Note: Available since version 1.8

5.2.10.1.12 KeyboardPadding

Inner distance of the whole keyboard.

Scheme: tchmi:framework#/definitions/Padding [} 2127]

Origin: Keyboard [} 244]

See also

Attribute getter: getKeyboardPadding [} 1403]

Attribute setter: setKeyboardPadding [} 1404]

Note: Available since version 1.8

5.2.10.1.13 LabelColor

The color of the texts.

Scheme: tchmi:framework#/definitions/SolidColor [} 2133]

Origin: Keyboard [} 244]

See also

Attribute getter: getLabelColor [} 1400]

Attribute setter: setLabelColor [} 1400]

Note: Available since version 1.8

5.2.10.1.14 LabelFillColor

Definition of the fill color of the graphic key characters

Scheme: tchmi:framework#/definitions/Color [} 2094]

Origin: Keyboard [} 244]

See also

Attribute getter: getLabelFillColor [} 1402]

Attribute setter: setLabelFillColor [} 1403]

Note: Available since version 1.8

5.2.10.1.15 LabelStrokeColor

Definition of the outline color of the graphic key characters.

Scheme: tchmi:framework#/definitions/SolidColor [} 2133]

Origin: Keyboard [} 244]

See also

Attribute getter: getLabelStrokeColor [} 1399]

Attribute setter: setLabelStrokeColor [} 1399]

Note: Available since version 1.8

5.2.10.1.16 LayoutPath

Path to the JSON layout.

Scheme: tchmi:framework#/definitions/ExistingLayoutPath [} 2107]

Origin: Keyboard [} 244]

See also

Attribute getter: getLayoutPath [} 1406]

Attribute setter: setLayoutPath [} 1406]

Note: Available since version 1.8

5.2.10.1.17 LongpressDelay

Definition of the time in milliseconds that a key must be pressed in order for a long keystroke to be detected

and a window with the additional keys to be displayed. This function is only available in the '_compact'

layouts and for certain keys.

Scheme: tchmi:general#/definitions/Number [} 2067]

Origin: Keyboard [} 244]

See also

Attribute getter: getLongpressDelay [} 1410]

Attribute setter: setLongpressDelay [} 1410]

Note: Available since version 1.8

5.2.10.1.18 ReleaseStickyKeysManually

Selecting whether the Shift key must be deactivated manually after it has been used together with another

key.

Scheme: tchmi:general#/definitions/Boolean [} 2060]

Origin: Keyboard [} 244]

See also

Attribute getter: getReleaseStickyKeysManually [} 1409]

Attribute setter: setReleaseStickyKeysManually [} 1409]

Note: Available since version 1.8

5.2.10.1.19 RepetitionDelay

Definition of the time in milliseconds that a key must be pressed for the input to be repeated. This function is

only available for certain keys, e.g. the Delete key.

Scheme: tchmi:general#/definitions/Number [} 2067]

Origin: Keyboard [} 244]

See also

Attribute getter: getRepetitionDelay [} 1411]

Attribute setter: setRepetitionDelay [} 1411]

Note: Available since version 1.8

5.2.10.1.20 ScaleMode

Selecting the scaling of the keys:

· None: No scaling of the keys

· ScaleToFill: The entire control is completely filled in. The proportions of the keys are not taken into

account.

· ScaleToFit: The keys are displayed as large as possible without exceeding the edges of the control.

The proportions of the keys are maintained.

· ScaleToFitWidth: The keys are displayed across the entire width of the control, regardless of whether

they exceed the limits of the control.

The proportions of the keys are maintained.

· ScaletoFitHeight: The keys are displayed across the entire height of the control, regardless of whether

they exceed the limits of the control.

The proportions of the keys are maintained.

Scheme: tchmi:framework#/definitions/ScaleMode [} 2132]

Origin: Keyboard [} 244]

See also

Attribute getter: getScaleMode [} 1407]

Attribute setter: setScaleMode [} 1407]

Note: Available since version 1.8

5.2.10.1.21 PressedKeys

Scheme: tchmi:framework#/definitions/KeyList [} 2119]

Origin: Keyboard [} 244]

See also

Attribute getter: getPressedKeys [} 1417]

Note: Available since version 1.8

5.2.10.2 Events

5.2.10.2.1 onKeyPressStarted

The user has pressed any key on the keyboard.

Origin: Keyboard [} 244]

Note: Available since version 1.8

5.2.10.2.2 onKeyPressCanceled

The user has canceled the interaction with any key on the keyboard. This can be triggered, for example, by

moving to the side.

Origin: Keyboard [} 244]

Note: Available since version 1.8

5.2.10.2.3 onKeyPressFinished

The user has completed the interaction with any key on the keyboard. In other words, the user has released

a key that was previously pressed.

Origin: Keyboard [} 244]

Note: Available since version 1.8

5.2.10.2.4 onKeyPressEnded

The user has canceled or finished the interaction with any key on the keyboard.

Origin: Keyboard [} 244]

Note: Available since version 1.8

5.2.11 Line

A line control represents a straight line.

Attributes

Category: Colors

Name Description

BackgroundColor [} 433] Definition of the background color

BorderColor [} 432] Definition of the border color of the control

Category: Layout

Name Description

Left [} 426] Definition of the distance from the left side to the left

side of the surrounding control

LeftUnit [} 426] Definition of the unit of the distance to the right side

of the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Top [} 426] Definition of the distance from the top side to the top

side of the surrounding control

TopUnit [} 426] Selection of the unit of the distance to the top side of

the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Right [} 429] Definition of the distance from the right side to the

right side of the surrounding control

RightUnit [} 429] Selection of the unit of the distance to the right side

of the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Bottom [} 429] Definition of the distance from the bottom side to the

bottom side of the surrounding control

BottomUnit [} 429] Selection of the unit of the distance to the bottom

side of the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Width [} 427] Definition of the external width of the control

WidthUnit [} 427] Selection of the unit of the width:

· Pixels for an absolute width

· Percent for a relative width

Height [} 428] Definition of the external height of the control

HeightUnit [} 428] Selection of the unit of the height:

· Pixels for an absolute height

· Percent for a relative height

MaxWidth [} 437] Definition of the maximum width if the control size is

defined as dynamic

MaxWidthUnit [} 437] Selection of the unit of the maximum width:

· Pixels for an absolute value

· Percent for a relative value

MinWidth [} 438] Definition of the minimum width if the control size is

defined as dynamic

MinWidthUnit [} 438] Selection of the unit of the minimum width:

· Pixels for an absolute value

· Percent for a relative value

MaxHeight [} 436] Definition of the maximum height if the control size is

defined as dynamic

MaxHeightUnit [} 437] Selection of the unit of the maximum height:

· Pixels for an absolute value

· Percent for a relative value

MinHeight [} 436] Definition of the minimum height if the control size is

defined as dynamic

Name Description

MinHeightUnit [} 436] Selection of the unit of the minimum height:

· Pixels for an absolute value

· Percent for a relative value

RenderedLeft [} 430] Calculated distance in pixels from the left side to the

left side of the surrounding control

RenderedTop [} 430] Calculated distance in pixels from the top side to the

top side of the surrounding control

RenderedRight [} 431] Calculated distance in pixels from the right side to the

right side of the surrounding control

RenderedBottom [} 430] Calculated distance in pixels from the bottom side to

the bottom side of the surrounding control

RenderedWidth [} 431] Calculated width of the control in pixels

RenderedHeight [} 431] Calculated height of the control in pixels

GridRowIndex [} 432] Definition of the row of a grid in which the control is to

be displayed

GridColumnIndex [} 432] Definition of the column of a grid in which the control

is to be displayed

Opacity [} 438] Definition of the transparency of the entire control

Visibility [} 439] Selection of the visibility of a control:

· Visible: Control is visible

· Hidden: Control is invisible, but is drawn – controls

behind it cannot be operated

· Collapsed: Control is invisible and is not drawn –

controls behind it can be operated

ZIndex [} 440] Definition of the position on the Z-axis

Transform [} 439] Definition of a transformation of a control:

· Translate: Translate in X-, Y-, Z-direction

· Rotate: Rotate by an angle

· Scale: Zoom by a factor

· Skew: Sides shown skewed by an angle

· Origin: Set the origin of the transformation relative

to the position of the control

· Perspective: Set the perspective of the

transformations of all child elements

BoxShadow [} 440] Definition of a shadow

WidthMode [} 427] Selection of the method of calculating the width:

· Value: The width is defined by the width entered.

· Parent: The width is defined by the distance to the

left and right side of the parent element. The

"Width" attribute is ignored in all calculations!

HeightMode [} 428] Selection of the method of calculating the height:

· Value: The height is defined by the height entered.

· Parent: The height is defined by the distance to the

top and bottom side of the parent element. The

"Height" attribute is ignored in all calculations!

Category: Common

Name Description

X1 [} 265] Definition of the x-axis coordinate of the starting point

of the line

X1Unit [} 265] Selecting the unit of the x-axis coordinate of the

starting point:

· Pixels for absolute positioning

X2 [} 266] Definition of the x-axis coordinate of the end point of

the line

X2Unit [} 266] Selecting the unit of the x-axis coordinate of the end

point:

· Pixels for absolute positioning

Y1 [} 266] Definition of the y-axis coordinate of the starting point

of the line

Y1Unit [} 266] Selecting the unit of the y-axis coordinate of the

starting point:

· Pixels for absolute positioning

Y2 [} 267] Definition of the y-axis coordinate of the end point of

the line

Y2Unit [} 267] Selecting the unit of the y-axis coordinate of the end

point:

· Pixels for absolute positioning

ScaleMode [} 264] Selecting the scaling of the line:

· None: No scaling of the line

· ScaleToFill: The line is displayed on the entire size

of the control. The proportions of the line are not

taken into account.

· ScaleToFit: The line is displayed as large as

possible without exceeding the edges of the

control.

The proportions of the line are maintained.

· ScaleToFitWidth: The line is displayed over the

entire width of the control, regardless of whether it

exceeds the limits of the control.

The proportions of the line are maintained.

· ScaleToFitHeight: The line is displayed over the

entire height of the control, regardless of whether it

exceeds the limits of the control.

The proportions of the line are maintained.

StrokeColor [} 264] Definition of the line color

StrokeStyle [} 264] Line style definition – comma and space separated

list of numbers, which specify the length of the line

and distances.

Example: 10, 5, 20, 30 corresponds to a sequence of

line length 10, distance 5, line length 20, distance 30.

This sequence is repeated over the entire length of

the line.

If an odd number is specified, the list is repeated

once.

Example: 20, 5, 10 becomes 20, 5, 10, 20, 5, 10

StrokeThickness [} 265] Definition of the line width

StrokeThicknessUnit [} 265] Selecting the unit of the line width:

· Pixels for an absolute width

IsEnabled [} 425] Selection of whether a control should be activated

Name Description

Id [} 424] Definition of the name of the control

Type [} 439] Type name of the control.

ClassNames [} 425] Definition of control classes

IsAttached [} 425] If a control is logically assigned in the DOM.

ToolTip [} 438] Definition of the tool tip for the control

Category: Border

Name Description

BorderRadius [} 433] Definition of the radius of the four corners to round

them off

BorderStyle [} 433] Selection of the border style of the four sides of the

control

BorderWidth [} 433] Definition of the border width of the four sides of the

control

Category: Background Image

Name Description

BackgroundImage [} 434] Definition of an image that is located above the

background color

BackgroundImageHeight [} 435] Definition of the height of the background image

BackgroundImageHeightUnit [} 435] Selection of the unit of the height of the background

image:

· Pixels for an absolute height

· Percent for a relative height

BackgroundImageWidth [} 434] Definition of the width of the background image

BackgroundImageWidthUnit [} 434] Selection of the unit of the width of the background

image:

· Pixels for an absolute width

· Percent for a relative width

BackgroundImagePadding [} 435] Definition of an additional distance between the

border of the control and background image for the

four sides

BackgroundImageVerticalAlignment [} 436] Definition of the vertical alignment of the background

image within the control

BackgroundImageHorizontalAlignment [} 435] Definition of the horizontal alignment of the

background image within the control

Category: Shape

Name Description

Events

Category: Framework

Name Description

onAttached [} 440] The control was added to the display.

onDetached [} 440] The control was removed from the display.

onInitialized [} 441] The control was initialized.

onMoved [} 443] The control was moved in relation to the browser

window.

onResized [} 444] The size of the control was changed.

Category: Operator

Name Description

onPressed [} 443] A mouse click was executed or a touch screen was

briefly touched.

onMouseClick [} 441] The left mouse button was clicked over the control

and released.

onMouseDoubleClick [} 441] The left mouse button was clicked twice over the

control and released.

onMouseRightClick [} 442] The right mouse button was clicked over the control

and released.

onMouseDown [} 441] A mouse button was depressed over the control.

onMouseEnter [} 442] The mouse pointer was moved over the control.

onMouseLeave [} 442] The mouse pointer has left the control.

onMouseUp [} 443] A mouse button was released over the control.

onMouseDownLeft [} 441] The left mouse button was depressed over the

control.

onMouseDownRight [} 441] The right mouse button was depressed over the

control.

onMouseMove [} 442] The mouse was moved over the control.

onMouseOver [} 442] The mouse pointer was moved over the control or

one of its children.

onMouseOut [} 442] The mouse pointer has left the control or one of its

child controls.

onMouseUpLeft [} 443] The left mouse button was released over the control.

onMouseUpRight [} 443] The right mouse button was released over the

control.

onMouseWheel [} 443] The mouse wheel was moved over the control.

onTouchStart [} 444] A finger/stylus was placed against a touch screen.

onTouchMove [} 444] A finger/stylus was moved on a touch screen.

onTouchEnd [} 444] A finger/stylus was lifted off a touch screen.

onTouchCancel [} 444] An interaction with a touch screen was aborted.

Access rights

Name Description

observe [} 444] Determines whether the control is generally

observable.

operate [} 445] Determines whether the control is generally operable.

Inheritance hierarchy

Control [} 419]

Line

Note: Available since version 1.8

See also

API reference [} 1418] for this control

5.2.11.1 Attributes

5.2.11.1.1 ScaleMode

Scales the content to the control size.

Scheme: tchmi:framework#/definitions/ScaleMode [} 2132]

Origin: Line [} 258]

See also

Attribute getter: getScaleMode [} 1430]

Attribute setter: setScaleMode [} 1430]

Note: Available since version 1.8

5.2.11.1.2 StrokeColor

Defines the stroke color of the control.

Scheme: tchmi:framework#/definitions/SolidColor [} 2133]

Origin: Line [} 258]

See also

Attribute getter: getStrokeColor [} 1424]

Attribute setter: setStrokeColor [} 1424]

Note: Available since version 1.8

5.2.11.1.3 StrokeStyle

Definition of the stroke style. Comma or space-separated list of numbers that specify the length of strokes

and spaces. If an odd number is specified, the list is repeated once. Example: "5, 3, 2" is equivalent to "5, 3,

2, 5, 3, 2".

Scheme: tchmi:general#/definitions/String [} 2069]

Origin: Line [} 258]

See also

Attribute getter: getStrokeStyle [} 1432]

Attribute setter: setStrokeStyle [} 1433]

Note: Available since version 1.8

5.2.11.1.4 StrokeThickness

Defines the stroke thickness of the control in pixels.

Scheme: tchmi:framework#/definitions/MeasurementValue [} 2123]

Origin: Line [} 258]

See also

Attribute getter: getStrokeThickness [} 1431]

Attribute setter: setStrokeThickness [} 1431]

Note: Available since version 1.8

5.2.11.1.5 StrokeThicknessUnit

Pixel unit. At this point, only pixels can be used as a unit.

Scheme: tchmi:framework#/definitions/PixelUnit [} 2128]

Origin: Line [} 258]

See also

Attribute getter: getStrokeThicknessUnit [} 1432]

The attribute can only be read and therefore has no setter.

Note: Available since version 1.8

5.2.11.1.6 X1

x-coordinate of the first point.

Scheme: tchmi:framework#/definitions/MeasurementValue [} 2123]

Origin: Line [} 258]

See also

Attribute getter: getX1 [} 1426]

Attribute setter: setX1 [} 1426]

Note: Available since version 1.8

5.2.11.1.7 X1Unit

Pixel unit. At this point, only pixels can be used as a unit.

Scheme: tchmi:framework#/definitions/PixelUnit [} 2128]

Origin: Line [} 258]

See also

Attribute getter: getX1Unit [} 1427]

The attribute can only be read and therefore has no setter.

Note: Available since version 1.8

5.2.11.1.8 X2

x-coordinate of the second point.

Scheme: tchmi:framework#/definitions/MeasurementValue [} 2123]

Origin: Line [} 258]

See also

Attribute getter: getX2 [} 1427]

Attribute setter: setX2 [} 1428]

Note: Available since version 1.8

5.2.11.1.9 X2Unit

Pixel unit. At this point, only pixels can be used as a unit.

Scheme: tchmi:framework#/definitions/PixelUnit [} 2128]

Origin: Line [} 258]

See also

Attribute getter: getX2Unit [} 1428]

The attribute can only be read and therefore has no setter.

Note: Available since version 1.8

5.2.11.1.10 Y1

y-coordinate of the first point.

Scheme: tchmi:framework#/definitions/MeasurementValue [} 2123]

Origin: Line [} 258]

See also

Attribute getter: getY1 [} 1425]

Attribute setter: setY1 [} 1425]

Note: Available since version 1.8

5.2.11.1.11 Y1Unit

Pixel unit. At this point, only pixels can be used as a unit.

Scheme: tchmi:framework#/definitions/PixelUnit [} 2128]

Origin: Line [} 258]

See also

Attribute getter: getY1Unit [} 1426]

The attribute can only be read and therefore has no setter.

Note: Available since version 1.8

5.2.11.1.12 Y2

y-coordinate of the second point.

Scheme: tchmi:framework#/definitions/MeasurementValue [} 2123]

Origin: Line [} 258]

See also

Attribute getter: getY2 [} 1429]

Attribute setter: setY2 [} 1429]

Note: Available since version 1.8

5.2.11.1.13 Y2Unit

Pixel unit. At this point, only pixels can be used as a unit.

Scheme: tchmi:framework#/definitions/PixelUnit [} 2128]

Origin: Line [} 258]

See also

Attribute getter: getY2Unit [} 1430]

The attribute can only be read and therefore has no setter.

Note: Available since version 1.8

5.2.12 Line Chart

A LineChart is a diagram in which curves can be displayed. It can be statically filled with data or dynamically

supplied with data via an array.

A description of the configuration can be found in chapter Configuration [} 275].

Attributes

Category: Colors

Name Description

XAxisColor [} 284] Definition of the color of the x-axis

GridBackgroundColor [} 277] Definition of the background color of the coordinate

system

GridLineColor [} 277] Definition of the color of the coordinate grid

SubgridLineColor [} 280] Definition of the color of the coordinate subgrid

SectionsBackgroundColor [} 278] Definition of the background color of the control

XLabelFontColor [} 287] Definition of the font color of the x-axis labels

XAxisNameFontColor [} 285] Definition of the font color of the x-axis name

TooltipFontColor [} 281] Definition of the font color of the tooltip

TooltipBackgroundColor [} 281] Definition of the background color of the tooltip

BackgroundColor [} 433] Definition of the background color

BorderColor [} 432] Definition of the border color of the control

Category: Layout

Name Description

Left [} 426] Definition of the distance from the left side to the left

side of the surrounding control

LeftUnit [} 426] Definition of the unit of the distance to the right side

of the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Top [} 426] Definition of the distance from the top side to the top

side of the surrounding control

TopUnit [} 426] Selection of the unit of the distance to the top side of

the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Right [} 429] Definition of the distance from the right side to the

right side of the surrounding control

RightUnit [} 429] Selection of the unit of the distance to the right side

of the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Bottom [} 429] Definition of the distance from the bottom side to the

bottom side of the surrounding control

BottomUnit [} 429] Selection of the unit of the distance to the bottom

side of the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Width [} 427] Definition of the external width of the control

WidthUnit [} 427] Selection of the unit of the width:

· Pixels for an absolute width

· Percent for a relative width

Height [} 428] Definition of the external height of the control

HeightUnit [} 428] Selection of the unit of the height:

· Pixels for an absolute height

· Percent for a relative height

MaxWidth [} 437] Definition of the maximum width if the control size is

defined as dynamic

MaxWidthUnit [} 437] Selection of the unit of the maximum width:

· Pixels for an absolute value

· Percent for a relative value

MinWidth [} 438] Definition of the minimum width if the control size is

defined as dynamic

MinWidthUnit [} 438] Selection of the unit of the minimum width:

· Pixels for an absolute value

· Percent for a relative value

MaxHeight [} 436] Definition of the maximum height if the control size is

defined as dynamic

MaxHeightUnit [} 437] Selection of the unit of the maximum height:

· Pixels for an absolute value

· Percent for a relative value

MinHeight [} 436] Definition of the minimum height if the control size is

defined as dynamic

Name Description

MinHeightUnit [} 436] Selection of the unit of the minimum height:

· Pixels for an absolute value

· Percent for a relative value

RenderedLeft [} 430] Calculated distance in pixels from the left side to the

left side of the surrounding control

RenderedTop [} 430] Calculated distance in pixels from the top side to the

top side of the surrounding control

RenderedRight [} 431] Calculated distance in pixels from the right side to the

right side of the surrounding control

RenderedBottom [} 430] Calculated distance in pixels from the bottom side to

the bottom side of the surrounding control

RenderedWidth [} 431] Calculated width of the control in pixels

RenderedHeight [} 431] Calculated height of the control in pixels

GridRowIndex [} 432] Definition of the row of a grid in which the control is to

be displayed

GridColumnIndex [} 432] Definition of the column of a grid in which the control

is to be displayed

Opacity [} 438] Definition of the transparency of the entire control

Visibility [} 439] Selection of the visibility of a control:

· Visible: Control is visible

· Hidden: Control is invisible, but is drawn – controls

behind it cannot be operated

· Collapsed: Control is invisible and is not drawn –

controls behind it can be operated

ZIndex [} 440] Definition of the position on the Z-axis

Transform [} 439] Definition of a transformation of a control:

· Translate: Translate in X-, Y-, Z-direction

· Rotate: Rotate by an angle

· Scale: Zoom by a factor

· Skew: Sides shown skewed by an angle

· Origin: Set the origin of the transformation relative

to the position of the control

· Perspective: Set the perspective of the

transformations of all child elements

BoxShadow [} 440] Definition of a shadow

WidthMode [} 427] Selection of the method of calculating the width:

· Value: The width is defined by the width entered.

· Parent: The width is defined by the distance to the

left and right side of the parent element. The

"Width" attribute is ignored in all calculations!

HeightMode [} 428] Selection of the method of calculating the height:

· Value: The height is defined by the height entered.

· Parent: The height is defined by the distance to the

top and bottom side of the parent element. The

"Height" attribute is ignored in all calculations!

Category: Common

Name Description

LineGraphData [} 278] Definition of the data to be displayed as graph(s)

LineGraphDescriptions [} 278] Definition of graph descriptions for each of the graphs

defined by the array

IsEnabled [} 425] Selection of whether a control should be activated

Id [} 424] Definition of the name of the control

Type [} 439] Type name of the control.

ClassNames [} 425] Definition of control classes

IsAttached [} 425] If a control is logically assigned in the DOM.

ToolTip [} 438] Definition of the tool tip for the control

Category: Border

Name Description

BorderRadius [} 433] Definition of the radius of the four corners to round

them off

BorderStyle [} 433] Selection of the border style of the four sides of the

control

BorderWidth [} 433] Definition of the border width of the four sides of the

control

Category: Background Image

Name Description

BackgroundImage [} 434] Definition of an image that is located above the

background color

BackgroundImageHeight [} 435] Definition of the height of the background image

BackgroundImageHeightUnit [} 435] Selection of the unit of the height of the background

image:

· Pixels for an absolute height

· Percent for a relative height

BackgroundImageWidth [} 434] Definition of the width of the background image

BackgroundImageWidthUnit [} 434] Selection of the unit of the width of the background

image:

· Pixels for an absolute width

· Percent for a relative width

BackgroundImagePadding [} 435] Definition of an additional distance between the

border of the control and background image for the

four sides

BackgroundImageVerticalAlignment [} 436] Definition of the vertical alignment of the background

image within the control

BackgroundImageHorizontalAlignment [} 435] Definition of the horizontal alignment of the

background image within the control

Category: XAxis

Name Description

ShowXAxis [} 279] Selecting whether the x-axis is to be displayed

ShowXAxisLabels [} 289] Selecting whether the x-axis labels are to be

displayed

ShowXAxisName [} 279] Selecting whether the x-axis name is to be displayed

ShowXSubTicks [} 279] Selecting whether the subcoordinate points are to be

displayed on the x-axis

XAxisAutoScaling [} 283] Selecting whether the x-axis should be automatically

scaled according to the data sets. 'Maintick Min

Value', 'Maintick Max Value' and 'X-Axis Maintick

Steps' need not be set.

XAxisDecimalPlaces [} 284] Definition of the decimal places displayed for the xaxis

XAxisName [} 285] Definition of the x-axis name

XAxisNameFontFamily [} 286] Definition of the font using the name of the font family

or the keyword

XAxisNameFontSize [} 286] Definition of the font size of the x-axis name

XAxisNameFontSizeUnit [} 286] Selecting the unit of the font size of the x-axis name:

· Pixels for an absolute size

· Percent for a relative size

XAxisNameFontWeight [} 287] Selecting of the font weight of the x-axis name:

· Normal

· Bold: bold

XAxisUnit [} 287] Definition of the unit of the x-axis

XAxisWidth [} 287] Definition of the x-axis width

XLabelFontFamily [} 288] Definition of the font using the name of the font family

or the keyword

XLabelFontSize [} 288] Definition of the font size for the x-axis labels

XLabelFontSizeUnit [} 288] Selecting the font size unit for the x-axis labels:

· Pixels for an absolute size

· Percent for a relative size

XLabelFontWeight [} 288] Selecting the font weight of the x-axis labels:

· Normal

· Bold: bold

XMainTickMaxValue [} 289] Definition of the maximum value of the x-axis main

subdivision

XMainTickMinValue [} 289] Definition of the minimum value of the x-axis main

subdivision

XMainTickSteps [} 289] Definition of the step size of the x-axis main

subdivision

XSubTickSteps [} 290] Definition of the step size of the x-axis subdivision

XAxisFormat [} 284] Definition of the formatting of the x-axis labels

Category: Grid

Name Description

ShowGrid [} 278] Selecting whether the coordinate grid is to be

displayed

GridLineWidth [} 277] Definition of the line width of the coordinate grid

GridShowHorizontalLines [} 277] Selecting whether the horizontal lines of the

coordinate grid are to be displayed

GridShowVerticalLines [} 278] Selecting whether the vertical lines of the coordinate

grid are to be displayed

Category: YAxis

Name Description

YAxis [} 290] Definition of one or more y-axes

ShowYSubTicks [} 280] Selecting whether the subcoordinate points are to be

displayed on the y-axis

YAxisWidth [} 290] Definition of the y-axis width

YLabelFontFamily [} 290] Definition of the font using the name of the font family

or the keyword

YLabelFontSize [} 291] Definition of the font size for the y-axis labels

YLabelFontSizeUnit [} 291] Selecting the font size unit for the y-axis labels:

· Pixels for an absolute size

· Percent for a relative size

YLabelFontWeight [} 291] Selecting the font weight of the y-axis labels:

· Normal

· Bold: bold

YMainTickSteps [} 291] Definition of the step size of the y-axis main

subdivision

YSubTickSteps [} 292] Definition of the step size of the y-axis subdivision

Category: Subgrid

Name Description

SubgridLineWidth [} 280] Definition of the line width of the coordinate subgrid

SubgridShowHorizontalLines [} 280] Selecting whether the horizontal lines of the

coordinate subgrid are to be displayed

SubgridShowVerticalLines [} 281] Selecting whether the vertical lines of the coordinate

subgrid are to be displayed

ShowTooltip [} 394] Selecting whether the tooltips are to be displayed

TooltipFormat [} 398] · Definition of the formatting of the tooltips.

TooltipFontFamily [} 397] Definition of the font using the name of the font family

or the keyword

TooltipFontSize [} 397] Definition of the font size

TooltipFontWeight [} 398] Selecting the font weight:

· Normal

· Bold: Bold

Events

Category: Framework

Name Description

onAttached [} 440] The control was added to the display.

onDetached [} 440] The control was removed from the display.

onInitialized [} 441] The control was initialized.

onMoved [} 443] The control was moved in relation to the browser

window.

onResized [} 444] The size of the control was changed.

Category: Operator

Name Description

onPressed [} 443] A mouse click was executed or a touch screen was

briefly touched.

onMouseClick [} 441] The left mouse button was clicked over the control

and released.

onMouseDoubleClick [} 441] The left mouse button was clicked twice over the

control and released.

onMouseRightClick [} 442] The right mouse button was clicked over the control

and released.

onMouseDown [} 441] A mouse button was depressed over the control.

onMouseEnter [} 442] The mouse pointer was moved over the control.

onMouseLeave [} 442] The mouse pointer has left the control.

onMouseUp [} 443] A mouse button was released over the control.

onMouseDownLeft [} 441] The left mouse button was depressed over the

control.

onMouseDownRight [} 441] The right mouse button was depressed over the

control.

onMouseMove [} 442] The mouse was moved over the control.

onMouseOver [} 442] The mouse pointer was moved over the control or

one of its children.

onMouseOut [} 442] The mouse pointer has left the control or one of its

child controls.

onMouseUpLeft [} 443] The left mouse button was released over the control.

onMouseUpRight [} 443] The right mouse button was released over the

control.

onMouseWheel [} 443] The mouse wheel was moved over the control.

onTouchStart [} 444] A finger/stylus was placed against a touch screen.

onTouchMove [} 444] A finger/stylus was moved on a touch screen.

onTouchEnd [} 444] A finger/stylus was lifted off a touch screen.

onTouchCancel [} 444] An interaction with a touch screen was aborted.

Access rights

Name Description

observe [} 444] Determines whether the control is generally

observable.

operate [} 445] Determines whether the control is generally operable.

Inheritance hierarchy

Control [} 419]

Line Chart

Note: Available since version 1.8

See also

API reference [} 1482] for this control

5.2.12.1 Configuration

A LineChart can be configured as follows:

1. Define the y-axes of the coordinate system using the"YAxis Definitions [} 276]" dialog

1.1. Define the desired number of y-axes and their sequence.

1.2. Adjust the settings of the y-axis/axes if necessary.

2. Link the array containing the data points to the attribute "Line Graph Data" of the category "Common".

The array must have two dimensions. This also applies if only one graph is stored in this array. In

the latter case the array should be declared as array[1..1, 1..100] OF ST_Point.

aPoints : ARRAY[1..2, 1..100] OF ST_Point;

TYPE ST_Point :

STRUCT

x : INT;

y : INT;

END_STRUCT

END_TYPE

The structure elements must be named identically to the attributes defined on the TwinCAT HMI

side. Upper and lower case is taken into account.

3. Add a graph description for each of the graphs contained in the array to the "Line Graph Descriptions"

attribute of the "Common" category using the "LineGraphDescription Definition [} 275]" editor.

Example: https://infosys.beckhoff.com/content/1033/TE2000_TC3_HMI_Engineering/Resources/

zip/9007203177442059.zip

5.2.12.2 Dialogs

5.2.12.2.1 LineGraphDescription definition dialog

This dialog can be used to change the settings of the graphs for the individual subarrays to be displayed in

the LineChart.

Items List of all objects added

Delete the selected object

Change the object order (top = left)

Add a new object

Properties Settings for the y-axis assignment selected under

"Elements"

Y-axis Id Selecting the y-axis to which the data set is to be

connected

Line width Definition of the line width of the graph

Point dot Selecting whether the individual data points are to be

marked

Point dot radius Definition of the radius of the data points

Point dot stroke width Definition of the width of the dotted line

5.2.12.2.2 YAxis definition dialog

This dialog can be used to add and parameterize the different y-axes.

Items List of all objects added

Delete the selected object

Change the object order (top = left)

Add a new object

Properties Settings of the y-axis definition selected under

"Elements"

ID Definition of a unique ID of the y-axis

Position Position of the y-axis on the graph

· Left side of the graph

· Right side of the graph

Main-tick-min-value Definition of the beginning of the displayed value

range

Main-tick-max-value Definition of the end of the displayed value range

Auto scaling Selecting whether the value range should be

automatically adjusted according to the values to be

displayed in the array

Decimal places Definition of decimal places

Show labels Selecting whether the label of the y-axis is to be

displayed

Show axis name Selecting whether the axis name should be displayed

next to the axis in the graph

Axis name Definition of the axis name, which can optionally be

displayed next to the axis

Axis name font-family Definition of the font

Axis name font-size Definition of the font size

Axis name font-weight Selecting the font weight

· Bold

· Normal

Unit Definition of the unit

5.2.12.3 Attributes

5.2.12.3.1 GridBackgroundColor

Scheme: tchmi:framework#/definitions/SolidColor [} 2133]

Origin: Line Chart [} 267]

See also

Attribute getter: getGridBackgroundColor [} 1492]

Attribute setter: setGridBackgroundColor [} 1492]

Note: Available since version 1.8

5.2.12.3.2 GridLineColor

Scheme: tchmi:framework#/definitions/SolidColor [} 2133]

Origin: Line Chart [} 267]

See also

Attribute getter: getGridLineColor [} 1494]

Attribute setter: setGridLineColor [} 1494]

Note: Available since version 1.8

5.2.12.3.3 GridLineWidth

Scheme: tchmi:general#/definitions/Number [} 2067]

Origin: Line Chart [} 267]

See also

Attribute getter: getGridLineWidth [} 1516]

Attribute setter: setGridLineWidth [} 1517]

Note: Available since version 1.8

5.2.12.3.4 GridShowHorizontalLines

Scheme: tchmi:general#/definitions/Boolean [} 2060]

Origin: Line Chart [} 267]

See also

Attribute getter: getGridShowHorizontalLines [} 1514]

Attribute setter: setGridShowHorizontalLines [} 1515]

Note: Available since version 1.8

5.2.12.3.5 GridShowVerticalLines

Scheme: tchmi:general#/definitions/Boolean [} 2060]

Origin: Line Chart [} 267]

See also

Attribute getter: getGridShowVerticalLines [} 1512]

Attribute setter: setGridShowVerticalLines [} 1513]

Note: Available since version 1.8

5.2.12.3.6 LineGraphData

Scheme: tchmi:framework#/definitions/ChartLineGraphDataDefinitionList [} 2087]

Origin: Line Chart [} 267]

See also

Attribute getter: getLineGraphData [} 1499]

Attribute setter: setLineGraphData [} 1500]

Note: Available since version 1.8

5.2.12.3.7 LineGraphDescriptions

Scheme: tchmi:framework#/definitions/ChartLineGraphDescriptionDefinitionList [} 2088]

Origin: Line Chart [} 267]

See also

Attribute getter: getLineGraphDescriptions [} 1500]

Attribute setter: setLineGraphDescriptions [} 1501]

Note: Available since version 1.8

5.2.12.3.8 SectionsBackgroundColor

Scheme: tchmi:framework#/definitions/SolidColor [} 2133]

Origin: Line Chart [} 267]

See also

Attribute getter: getGridBackgroundColor [} 1492]

Attribute setter: setGridBackgroundColor [} 1492]

Note: Available since version 1.10

5.2.12.3.9 ShowGrid

Scheme: tchmi:general#/definitions/Boolean [} 2060]

Origin: Line Chart [} 267]

See also

Attribute getter: getShowGrid [} 1524]

Attribute setter: setShowGrid [} 1525]

Note: Available since version 1.8

5.2.12.3.10 ShowTooltip

Selecting whether the tooltips should be displayed in stop mode.

Scheme: tchmi:general#/definitions/Boolean [} 2060]

Origin: Line Chart [} 267]

See also

Attribute getter: getShowTooltip [} 1538]

Attribute setter: setShowTooltip [} 1538]

Note: Available since version 1.10

5.2.12.3.11 ShowXAxis

Scheme: tchmi:general#/definitions/Boolean [} 2060]

Origin: Line Chart [} 267]

See also

Attribute getter: getShowXAxis [} 1501]

Attribute setter: setShowXAxis [} 1502]

Note: Available since version 1.8

5.2.12.3.12 ShowXAxisName

Scheme: tchmi:general#/definitions/Boolean [} 2060]

Origin: Line Chart [} 267]

See also

Attribute getter: getShowXAxisName [} 1507]

Attribute setter: setShowXAxisName [} 1507]

Note: Available since version 1.8

5.2.12.3.13 ShowXSubTicks

Scheme: tchmi:general#/definitions/Boolean [} 2060]

Origin: Line Chart [} 267]

See also

Attribute getter: getShowXSubTicks [} 1503]

Attribute setter: setShowXSubTicks [} 1504]

Note: Available since version 1.8

5.2.12.3.14 ShowYSubTicks

Scheme: tchmi:general#/definitions/Boolean [} 2060]

Origin: Line Chart [} 267]

See also

Attribute getter: getShowYSubTicks [} 1528]

Attribute setter: setShowYSubTicks [} 1529]

Note: Available since version 1.8

5.2.12.3.15 SubgridLineColor

Scheme: tchmi:framework#/definitions/SolidColor [} 2133]

Origin: Line Chart [} 267]

See also

Attribute getter: getSubgridLineColor [} 1495]

Attribute setter: setSubgridLineColor [} 1495]

Note: Available since version 1.8

5.2.12.3.16 SubgridLineWidth

Scheme: tchmi:general#/definitions/Number [} 2067]

Origin: Line Chart [} 267]

See also

Attribute getter: getSubgridLineWidth [} 1535]

Attribute setter: setSubgridLineWidth [} 1536]

Note: Available since version 1.8

5.2.12.3.17 SubgridShowHorizontalLines

Scheme: tchmi:general#/definitions/Boolean [} 2060]

Origin: Line Chart [} 267]

See also

Attribute getter: getSubgridShowHorizontalLines [} 1535]

Attribute setter: setSubgridShowHorizontalLines [} 1535]

Note: Available since version 1.8

5.2.12.3.18 SubgridShowVerticalLines

Scheme: tchmi:general#/definitions/Boolean [} 2060]

Origin: Line Chart [} 267]

See also

Attribute getter: getSubgridShowVerticalLines [} 1534]

Attribute setter: setSubgridShowVerticalLines [} 1534]

Note: Available since version 1.8

5.2.12.3.19 TooltipBackgroundColor

Definition of the background color of the coordinate system.

Scheme: tchmi:framework#/definitions/Color [} 2094]

Origin: Line Chart [} 267]

See also

Attribute getter: getTooltipBackgroundColor [} 1498]

Attribute setter: setTooltipBackgroundColor [} 1499]

Note: Available since version 1.8

5.2.12.3.20 TooltipFontColor

Definition of the font color of the tooltip.

Scheme: tchmi:framework#/definitions/SolidColor [} 2133]

Origin: Line Chart [} 267]

See also

Attribute getter: getTooltipFontColor [} 1498]

Attribute setter: setTooltipFontColor [} 1498]

Note: Available since version 1.8

5.2.12.3.21 TooltipFontFamily

Definition of the font using the name of the font family or the keyword.

Scheme: tchmi:framework#/definitions/FontFamily [} 2108]

Origin: Line Chart [} 267]

See also

Attribute getter: getTooltipFontFamily [} 1540]

Attribute setter: setTooltipFontFamily [} 1540]

Note: Available since version 1.10

5.2.12.3.22 TooltipFontSize

Definition of the font size.

Scheme: tchmi:framework#/definitions/MeasurementValue [} 2123]

Origin: Line Chart [} 267]

See also

Attribute getter: getTooltipFontSize [} 1541]

Attribute setter: setTooltipFontSize [} 1541]

Note: Available since version 1.10

5.2.12.3.23 TooltipFontSizeUnit

Selecting the unit of the font size in the tooltips (pixel or percent).

Scheme: tchmi:framework#/definitions/MeasurementUnit [} 2123]

Origin: Line Chart [} 267]

See also

Attribute getter: getTooltipFontSizeUnit [} 1542]

Attribute setter: setTooltipFontSizeUnit [} 1542]

Note: Available since version 1.10

5.2.12.3.24 TooltipFontWeight

Selecting the font weight for the tooltips (normal, bold).

Scheme: tchmi:framework#/definitions/FontWeight [} 2109]

Origin: Line Chart [} 267]

See also

Attribute getter: getTooltipFontWeight [} 1543]

Attribute setter: setTooltipFontWeight [} 1543]

Note: Available since version 1.10

5.2.12.3.25 TooltipFormat

Schema: tchmi:framework#/definitions/Function [} 2109]

Definition of the formatting of the tooltips.

This is called when the tooltip is displayed.

A function must fulfill the following signature in order to be offered in the engineering. The parameters

mentioned here are set by the control. Further parameters are possible and can be specified per instance in

the engineering.

Example: The value for the Linear Gauge is set by the control. The further parameter "maxDecimals" is

specified in Engineering for each instance.

[ Function ]

exampleFunction(valueX: number, valueY: number): string;

Parameter

Name Type Description

valueX number [} 1997]

tchmi:general#/definitions/Number

[} 2067]

The numerical value for the xcoordinate.

valueY number [} 1997]

tchmi:general#/definitions/Number

[} 2067]

The numerical value for the ycoordinate.

Return value

Type Description

string [} 1997]

tchmi:general#/definitions/String [} 2069]

The tooltip to be displayed. HTML is allowed here.

Origin: Line Chart [} 267]

See also

Attribute getter: getTooltipFormat [} 1539]

Attribute setter: setTooltipFormat [} 1539]

Note: Available since version 1.10

5.2.12.3.26 XAxisAutoScaling

Scheme: tchmi:general#/definitions/Boolean [} 2060]

Origin: Line Chart [} 267]

See also

Attribute getter: getXAxisAutoScaling [} 1509]

Attribute setter: setXAxisAutoScaling [} 1509]

Note: Available since version 1.8

5.2.12.3.27 XAxisColor

Scheme: tchmi:framework#/definitions/SolidColor [} 2133]

Origin: Line Chart [} 267]

See also

Attribute getter: getXAxisColor [} 1493]

Attribute setter: setXAxisColor [} 1493]

Note: Available since version 1.8

5.2.12.3.28 XAxisDecimalPlaces

Scheme: tchmi:general#/definitions/Number [} 2067]

Origin: Line Chart [} 267]

See also

Attribute getter: getXAxisDecimalPlaces [} 1511]

Attribute setter: setXAxisDecimalPlaces [} 1511]

Note: Available since version 1.8

5.2.12.3.29 XAxisFormat

Schema: tchmi:framework#/definitions/Function [} 2109]

The formatting function for the labelling texts of the x-axis.

The selected function defines the X-axis labels. It is called for each displayed value of the main X-axis

subdivision. It is assigned the respective numerical value.

A function must fulfill the following signature in order to be offered in the engineering. The parameters

mentioned here are set by the control. Further parameters are possible and can be specified per instance in

the engineering.

Example: The value for the Linear Gauge is set by the control. The further parameter "maxDecimals" is

specified in Engineering for each instance.

[ Function ]

exampleFunction(value: number): string;

Parameter

Name Type Description

value number [} 1997]

tchmi:general#/definitions/Number

[} 2067]

The current numerical value of the

x-axis.

Return value

Type Description

string [} 1997]

tchmi:general#/definitions/String [} 2069]

The new value of the main X-axis subdivision. HTML

is not allowed here.

Origin: Line Chart [} 267]

See also

Attribute getter: getXAxisFormat [} 1523]

Attribute setter: setXAxisFormat [} 1524]

Note: Available since version 1.10

5.2.12.3.30 XAxisName

Scheme: tchmi:general#/definitions/String [} 2069]

Origin: Line Chart [} 267]

See also

Attribute getter: getXAxisName [} 1508]

Attribute setter: setXAxisName [} 1508]

Note: Available since version 1.8

5.2.12.3.31 XAxisNameFontColor

Scheme: tchmi:framework#/definitions/SolidColor [} 2133]

Origin: Line Chart [} 267]

See also

Attribute getter: getXAxisNameFontColor [} 1496]

Attribute setter: setXAxisNameFontColor [} 1496]

Note: Available since version 1.8

5.2.12.3.32 XAxisNameFontFamily

Comma-separated list of fonts as font family or keyword: 'serif', 'sans-serif', 'monospace'.

Scheme: tchmi:framework#/definitions/FontFamily [} 2108]

Origin: Line Chart [} 267]

See also

Attribute getter: getXAxisNameFontFamily [} 1515]

Attribute setter: setXAxisNameFontFamily [} 1516]

Note: Available since version 1.8

5.2.12.3.33 XAxisNameFontSize

The font size. If the percent is specified as the unit, this is relative to the font size of the parent element.

Scheme: tchmi:framework#/definitions/MeasurementValue [} 2123]

Origin: Line Chart [} 267]

See also

Attribute getter: getXAxisNameFontSize [} 1518]

Attribute setter: setXAxisNameFontSize [} 1518]

Note: Available since version 1.8

5.2.12.3.34 XAxisNameFontSizeUnit

Pixels, or percent for relative sizes.

Scheme: tchmi:framework#/definitions/MeasurementUnit [} 2123]

Origin: Line Chart [} 267]

See also

Attribute getter: getXAxisNameFontSizeUnit [} 1519]

Attribute setter: setXAxisNameFontSizeUnit [} 1519]

Note: Available since version 1.8

5.2.12.3.35 XAxisNameFontWeight

Font weight (normal, bold).

Scheme: tchmi:framework#/definitions/FontWeight [} 2109]

Origin: Line Chart [} 267]

See also

Attribute getter: getXAxisNameFontWeight [} 1520]

Attribute setter: setXAxisNameFontWeight [} 1520]

Note: Available since version 1.8

5.2.12.3.36 XAxisUnit

Scheme: tchmi:general#/definitions/String [} 2069]

Origin: Line Chart [} 267]

See also

Attribute getter: getXAxisUnit [} 1510]

Attribute setter: setXAxisUnit [} 1510]

Note: Available since version 1.8

5.2.12.3.37 XAxisWidth

Scheme: tchmi:general#/definitions/Number [} 2067]

Origin: Line Chart [} 267]

See also

Attribute getter: getXAxisWidth [} 1513]

Attribute setter: setXAxisWidth [} 1514]

Note: Available since version 1.8

5.2.12.3.38 XLabelFontColor

Scheme: tchmi:framework#/definitions/SolidColor [} 2133]

Origin: Line Chart [} 267]

See also

Attribute getter: getXLabelFontColor [} 1497]

Attribute setter: setXLabelFontColor [} 1497]

Note: Available since version 1.8

5.2.12.3.39 XLabelFontFamily

Comma-separated list of fonts as font family or keyword: 'serif', 'sans-serif', 'monospace'.

Scheme: tchmi:framework#/definitions/FontFamily [} 2108]

Origin: Line Chart [} 267]

See also

Attribute getter: getXLabelFontFamily [} 1517]

Attribute setter: setXLabelFontFamily [} 1517]

Note: Available since version 1.8

5.2.12.3.40 XLabelFontSize

The font size. If the percent is specified as the unit, this is relative to the font size of the parent element.

Scheme: tchmi:framework#/definitions/MeasurementValue [} 2123]

Origin: Line Chart [} 267]

See also

Attribute getter: getXLabelFontSize [} 1521]

Attribute setter: setXLabelFontSize [} 1521]

Note: Available since version 1.8

5.2.12.3.41 XLabelFontSizeUnit

Pixels, or percent for relative sizes.

Scheme: tchmi:framework#/definitions/MeasurementUnit [} 2123]

Origin: Line Chart [} 267]

See also

Attribute getter: getXLabelFontSizeUnit [} 1522]

Attribute setter: setXLabelFontSizeUnit [} 1522]

Note: Available since version 1.8

5.2.12.3.42 XLabelFontWeight

Font weight (normal, bold).

Scheme: tchmi:framework#/definitions/FontWeight [} 2109]

Origin: Line Chart [} 267]

See also

Attribute getter: getXLabelFontWeight [} 1523]

Attribute setter: setXLabelFontWeight [} 1523]

Note: Available since version 1.8

5.2.12.3.43 XMainTickMaxValue

Scheme: tchmi:general#/definitions/Number [} 2067]

Origin: Line Chart [} 267]

See also

Attribute getter: getXMainTickMaxValue [} 1506]

Attribute setter: setXMainTickMaxValue [} 1506]

Note: Available since version 1.8

5.2.12.3.44 XMainTickMinValue

Scheme: tchmi:general#/definitions/Number [} 2067]

Origin: Line Chart [} 267]

See also

Attribute getter: getXMainTickMinValue [} 1505]

Attribute setter: setXMainTickMinValue [} 1505]

Note: Available since version 1.8

5.2.12.3.45 XMainTickSteps

Scheme: tchmi:general#/definitions/Number [} 2067]

Origin: Line Chart [} 267]

See also

Attribute getter: getXMainTickSteps [} 1511]

Attribute setter: setXMainTickSteps [} 1512]

Note: Available since version 1.8

5.2.12.3.46 XShowLabels

Scheme: tchmi:general#/definitions/Boolean [} 2060]

Origin: Line Chart [} 267]

See also

Attribute getter: getXShowLabels [} 1502]

Attribute setter: setXShowLabels [} 1503]

Note: Available since version 1.8

5.2.12.3.47 XSubTickSteps

Scheme: tchmi:general#/definitions/Number [} 2067]

Origin: Line Chart [} 267]

See also

Attribute getter: getXSubTickSteps [} 1504]

Attribute setter: setXSubTickSteps [} 1505]

Note: Available since version 1.8

5.2.12.3.48 YAxis

Scheme: tchmi:framework#/definitions/ChartYAxisDefinitionList [} 2093]

Origin: Line Chart [} 267]

See also

Attribute getter: getYAxis [} 1525]

Attribute setter: setYAxis [} 1526]

Note: Available since version 1.8

5.2.12.3.49 YAxisWidth

Scheme: tchmi:general#/definitions/Number [} 2067]

Origin: Line Chart [} 267]

See also

Attribute getter: getYAxisWidth [} 1532]

Attribute setter: setYAxisWidth [} 1532]

Note: Available since version 1.8

5.2.12.3.50 YLabelFontFamily

Comma-separated list of fonts as font family or keyword: 'serif', 'sans-serif', 'monospace'.

Scheme: tchmi:framework#/definitions/FontFamily [} 2108]

Origin: Line Chart [} 267]

See also

Attribute getter: getYLabelFontFamily [} 1533]

Attribute setter: setYLabelFontFamily [} 1533]

Note: Available since version 1.8

5.2.12.3.51 YLabelFontSize

The font size. If the percent is specified as the unit, this is relative to the font size of the parent element.

Scheme: tchmi:framework#/definitions/MeasurementValue [} 2123]

Origin: Line Chart [} 267]

See also

Attribute getter: getYLabelFontSize [} 1529]

Attribute setter: setYLabelFontSize [} 1529]

Note: Available since version 1.8

5.2.12.3.52 YLabelFontSizeUnit

Pixels, or percent for relative sizes.

Scheme: tchmi:framework#/definitions/MeasurementUnit [} 2123]

Origin: Line Chart [} 267]

See also

Attribute getter: getYLabelFontSizeUnit [} 1530]

Attribute setter: setYLabelFontSizeUnit [} 1530]

Note: Available since version 1.8

5.2.12.3.53 YLabelFontWeight

Font weight (normal, bold).

Scheme: tchmi:framework#/definitions/FontWeight [} 2109]

Origin: Line Chart [} 267]

See also

Attribute getter: getYLabelFontWeight [} 1531]

Attribute setter: setYLabelFontWeight [} 1531]

Note: Available since version 1.8

5.2.12.3.54 YMainTickSteps

Scheme: tchmi:general#/definitions/Number [} 2067]

Origin: Line Chart [} 267]

See also

Attribute getter: getYMainTickSteps [} 1526]

Attribute setter: setYMainTickSteps [} 1527]

Note: Available since version 1.8

5.2.12.3.55 YSubTickSteps

Scheme: tchmi:general#/definitions/Number [} 2067]

Origin: Line Chart [} 267]

See also

Attribute getter: getYSubTickSteps [} 1527]

Attribute setter: setYSubTickSteps [} 1528]

Note: Available since version 1.8

5.2.13 Linear Gauge

A linear gauge is a linear display in which a value can be displayed by filling in a bar. A start and end value

can be defined for this bar. The attribute 'Editable [} 300]' can be used to display a slider through which the

operator can change the display.

Attributes

Category: Colors

Name Description

ProgressBackgroundColor [} 306] Definition of the background color of the bar

ProgressForegroundColor [} 306] Definition of the bar color

ValueColor [} 310] Definition of the text color of the display of the current

value

UnitColor [} 308] Definition of the unit color

TickColor [} 308] Definition of the color of the bar division

LabelColor [} 301] Definition of the text color of the scaling values

Knob Color [} 301] Definition of the fill color of the slider

KnobArrowsColor [} 301] Definition of the outline and arrow color of the slider

BackgroundColor [} 433] Definition of the background color

BorderColor [} 432] Definition of the border color of the control

Category: Layout

Name Description

Orientation [} 305] Selecting the orientation:

· Horizontal: The linear display with the scaling is

aligned horizontally.

· Vertical: The linear display with the scaling is

aligned vertically.

Padding [} 305] Definition of an additional distance between the

control border and the bar for the four sides

Left [} 426] Definition of the distance from the left side to the left

side of the surrounding control

LeftUnit [} 426] Definition of the unit of the distance to the right side

of the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Top [} 426] Definition of the distance from the top side to the top

side of the surrounding control

TopUnit [} 426] Selection of the unit of the distance to the top side of

the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Right [} 429] Definition of the distance from the right side to the

right side of the surrounding control

RightUnit [} 429] Selection of the unit of the distance to the right side

of the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Bottom [} 429] Definition of the distance from the bottom side to the

bottom side of the surrounding control

BottomUnit [} 429] Selection of the unit of the distance to the bottom

side of the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Width [} 427] Definition of the external width of the control

WidthUnit [} 427] Selection of the unit of the width:

· Pixels for an absolute width

· Percent for a relative width

Height [} 428] Definition of the external height of the control

HeightUnit [} 428] Selection of the unit of the height:

· Pixels for an absolute height

· Percent for a relative height

MaxWidth [} 437] Definition of the maximum width if the control size is

defined as dynamic

MaxWidthUnit [} 437] Selection of the unit of the maximum width:

· Pixels for an absolute value

· Percent for a relative value

MinWidth [} 438] Definition of the minimum width if the control size is

defined as dynamic

MinWidthUnit [} 438] Selection of the unit of the minimum width:

· Pixels for an absolute value

· Percent for a relative value

Name Description

MaxHeight [} 436] Definition of the maximum height if the control size is

defined as dynamic

MaxHeightUnit [} 437] Selection of the unit of the maximum height:

· Pixels for an absolute value

· Percent for a relative value

MinHeight [} 436] Definition of the minimum height if the control size is

defined as dynamic

MinHeightUnit [} 436] Selection of the unit of the minimum height:

· Pixels for an absolute value

· Percent for a relative value

RenderedLeft [} 430] Calculated distance in pixels from the left side to the

left side of the surrounding control

RenderedTop [} 430] Calculated distance in pixels from the top side to the

top side of the surrounding control

RenderedRight [} 431] Calculated distance in pixels from the right side to the

right side of the surrounding control

RenderedBottom [} 430] Calculated distance in pixels from the bottom side to

the bottom side of the surrounding control

RenderedWidth [} 431] Calculated width of the control in pixels

RenderedHeight [} 431] Calculated height of the control in pixels

GridRowIndex [} 432] Definition of the row of a grid in which the control is to

be displayed

GridColumnIndex [} 432] Definition of the column of a grid in which the control

is to be displayed

Opacity [} 438] Definition of the transparency of the entire control

Visibility [} 439] Selection of the visibility of a control:

· Visible: Control is visible

· Hidden: Control is invisible, but is drawn – controls

behind it cannot be operated

· Collapsed: Control is invisible and is not drawn –

controls behind it can be operated

ZIndex [} 440] Definition of the position on the Z-axis

Transform [} 439] Definition of a transformation of a control:

· Translate: Translate in X-, Y-, Z-direction

· Rotate: Rotate by an angle

· Scale: Zoom by a factor

· Skew: Sides shown skewed by an angle

· Origin: Set the origin of the transformation relative

to the position of the control

· Perspective: Set the perspective of the

transformations of all child elements

BoxShadow [} 440] Definition of a shadow

WidthMode [} 427] Selection of the method of calculating the width:

· Value: The width is defined by the width entered.

· Parent: The width is defined by the distance to the

left and right side of the parent element. The

"Width" attribute is ignored in all calculations!

HeightMode [} 428] Selection of the method of calculating the height:

· Value: The height is defined by the height entered.

Name Description

· Parent: The height is defined by the distance to the

top and bottom side of the parent element. The

"Height" attribute is ignored in all calculations!

Category: Common

Name Description

Value [} 310] Definition of the value to be displayed

Editable [} 300] Selecting whether the slider should be displayed and

therefore whether the linear gauge is editable

BaseAnimationTime [} 300] Definition of the basic animation time in milliseconds.

It describes the time of the animation from minimum

to maximum value.

IsEnabled [} 425] Selection of whether a control should be activated

Id [} 424] Definition of the name of the control

Type [} 439] Type name of the control.

ClassNames [} 425] Definition of control classes

IsAttached [} 425] If a control is logically assigned in the DOM.

ToolTip [} 438] Definition of the tool tip for the control

Category: Border

Name Description

BorderRadius [} 433] Definition of the radius of the four corners to round

them off

BorderStyle [} 433] Selection of the border style of the four sides of the

control

BorderWidth [} 433] Definition of the border width of the four sides of the

control

Category: Background Image

Name Description

BackgroundImage [} 434] Definition of an image that is located above the

background color

BackgroundImageHeight [} 435] Definition of the height of the background image

BackgroundImageHeightUnit [} 435] Selection of the unit of the height of the background

image:

· Pixels for an absolute height

· Percent for a relative height

BackgroundImageWidth [} 434] Definition of the width of the background image

BackgroundImageWidthUnit [} 434] Selection of the unit of the width of the background

image:

· Pixels for an absolute width

· Percent for a relative width

BackgroundImagePadding [} 435] Definition of an additional distance between the

border of the control and background image for the

four sides

BackgroundImageVerticalAlignment [} 436] Definition of the vertical alignment of the background

image within the control

BackgroundImageHorizontalAlignment [} 435] Definition of the horizontal alignment of the

background image within the control

Category: Value

Name Description

MinValue [} 305] Defines the smallest value that the control element

should graphically display

MaxValue [} 304] Defines the largest value that the control element

should graphically display

Step [} 307] Definition of the increment for changing the value via

the slider

ShowValueText [} 307] Selecting whether the current value is to be displayed

Range [} 306] Definition of the value range of the color scales

StartFromZero [} 307] Selecting whether the minimum value should be zero

regardless of the 'Minimum Value' attribute. This

setting has no effect if the set minimum value is equal

to or greater than zero.

ValueFontFamily [} 310] Definition of the font using the name of the font family

or the keyword

ValueFontSize [} 311] Definition of the font size

ValueFontSizeUnit [} 311] Selecting the font size unit:

· Pixels for an absolute size

· Percent for a relative size

ValueFontStyle [} 311] Selecting the font style:

· Normal

· Italic: italic

· Oblique: slanted

ValueFontWeight [} 311] Selecting the font weight:

· Normal

· Bold: bold

ValueFormat [} 312] Definition of a formatting function for the value

ClickAnywheretoEdit [} 300] Selecting whether the value can be changed by

clicking anywhere in the control

Category: Labels

Name Description

ShowLabels [} 306] Selecting whether the scaling values are to be

displayed

Label Range [} 304] Definition of the jump distance between the individual

scaling values

Label Position [} 304] Selecting the position of the scaling to the bar:

The following options are available for horizontal

alignment:

· Top

· Bottom

The following options are available for vertical

alignment:

· Left

· Right

LabelFontFamily [} 301] Definition of the font using the name of the font family

or the keyword

LabelFontSize [} 302] Definition of the font size of the scaling

LabelFontSizeUnit [} 302] Selecting the font size unit:

· Pixels for an absolute size

· Percent for a relative size

LabelFontStyle [} 302] Selecting the font style of the scaling:

· Normal

· Italic: italic

· Oblique: slanted

LabelFontWeight [} 303] Selecting the font weight of the scaling:

· Normal

· Bold: bold

LabelFormat [} 303] Definition of a formatting function for the scaling

Category: Ticks

Name Description

ShowTicks [} 307] Selecting whether the scaling subdivision is to be

displayed

TickDefinition [} 308] Definition of scale division

Category: Unit

Name Description

Unit [} 300] Definition of the unit or description of the value

UnitOrientation [} 305] Selecting the unit orientation:

· Theme

· Horizontal

· Vertical

UnitFontSize [} 309] Definition of the font size of the unit

UnitFontSizeUnit [} 309] Selecting the font size unit:

· Pixels for an absolute size

· Percent for a relative size

UnitFontStyle [} 309] Selecting the font style of the unit:

· Normal

· Italic: italic

· Oblique: slanted

UnitFontWeight [} 309] Selecting the font weight of the unit:

· Normal

· Bold: bold

Events

Category: Control

Name Description

onValueChanged [} 313] The value has been changed.

Category: Framework

Name Description

onAttached [} 440] The control was added to the display.

onDetached [} 440] The control was removed from the display.

onInitialized [} 441] The control was initialized.

onMoved [} 443] The control was moved in relation to the browser

window.

onResized [} 444] The size of the control was changed.

Category: Operator

Name Description

onUserInteractionFinished [} 313] The user has finished the interaction with the control.

onPressed [} 443] A mouse click was executed or a touch screen was

briefly touched.

onMouseClick [} 441] The left mouse button was clicked over the control

and released.

onMouseDoubleClick [} 441] The left mouse button was clicked twice over the

control and released.

onMouseRightClick [} 442] The right mouse button was clicked over the control

and released.

onMouseDown [} 441] A mouse button was depressed over the control.

onMouseEnter [} 442] The mouse pointer was moved over the control.

onMouseLeave [} 442] The mouse pointer has left the control.

onMouseUp [} 443] A mouse button was released over the control.

onMouseDownLeft [} 441] The left mouse button was depressed over the

control.

onMouseDownRight [} 441] The right mouse button was depressed over the

control.

onMouseMove [} 442] The mouse was moved over the control.

onMouseOver [} 442] The mouse pointer was moved over the control or

one of its children.

onMouseOut [} 442] The mouse pointer has left the control or one of its

child controls.

onMouseUpLeft [} 443] The left mouse button was released over the control.

onMouseUpRight [} 443] The right mouse button was released over the

control.

onMouseWheel [} 443] The mouse wheel was moved over the control.

onTouchStart [} 444] A finger/stylus was placed against a touch screen.

onTouchMove [} 444] A finger/stylus was moved on a touch screen.

onTouchEnd [} 444] A finger/stylus was lifted off a touch screen.

onTouchCancel [} 444] An interaction with a touch screen was aborted.

Access rights

Name Description

observe [} 444] Determines whether the control is generally

observable.

operate [} 445] Determines whether the control is generally operable.

Inheritance hierarchy

Control [} 419]

Linear Gauge

Note: Available since version 1.8

See also

API reference [} 1433] for this control

5.2.13.1 Attributes

5.2.13.1.1 BaseAnimationTime

The basic animation time in milliseconds. It describes the time of the animation from minimum to maximum

value.

Scheme: tchmi:general#/definitions/UDINT [} 2070]

Origin: Linear Gauge [} 292]

See also

Attribute getter: getBaseAnimationTime [} 1481]

Attribute setter: setBaseAnimationTime [} 1481]

Note: Available since version 1.8

5.2.13.1.2 ClickAnywhereToEdit

To change the value, you can click anywhere in the control.

Scheme: tchmi:general#/definitions/Boolean [} 2060]

Origin: Linear Gauge [} 292]

See also

Attribute getter: getClickAnywhereToEdit [} 1462]

Attribute setter: setClickAnywhereToEdit [} 1463]

Note: Available since version 1.8

5.2.13.1.3 Unit

The unit or description of the display value.

Scheme: tchmi:general#/definitions/String [} 2069]

Origin: Linear Gauge [} 292]

See also

Attribute getter: getUnit [} 1474]

Attribute setter: setUnit [} 1475]

Note: Available since version 1.8

5.2.13.1.4 Editable

Determines whether the slider should be displayed.

The appearance of the slider can be changed via Themed Resource [} 313] of the control.

Scheme: tchmi:general#/definitions/Boolean [} 2060]

Origin: Linear Gauge [} 292]

See also

Attribute getter: getEditable [} 1451]

Attribute setter: setEditable [} 1452]

Note: Available since version 1.8

5.2.13.1.5 KnobArrowsColor

Outline and arrow color of the slider.

Scheme: tchmi:framework#/definitions/SolidColor [} 2133]

Origin: Linear Gauge [} 292]

See also

Attribute getter: getKnobArrowsColor [} 1443]

Attribute setter: setKnobArrowsColor [} 1443]

Note: Available since version 1.8

5.2.13.1.6 KnobColor

Fill color of the slider.

Scheme: tchmi:framework#/definitions/Color [} 2094]

Origin: Linear Gauge [} 292]

See also

Attribute getter: getKnobColor [} 1446]

Attribute setter: setKnobColor [} 1446]

Note: Available since version 1.8

5.2.13.1.7 LabelColor

The color of the texts for the scale divisions.

Scheme: tchmi:framework#/definitions/SolidColor [} 2133]

Origin: Linear Gauge [} 292]

See also

Attribute getter: getLabelColor [} 1447]

Attribute setter: setLabelColor [} 1447]

Note: Available since version 1.8

5.2.13.1.8 LabelFontFamily

Comma-separated list of fonts as font family or keyword: 'serif', 'sans-serif', 'monospace'.

Scheme: tchmi:general#/definitions/String [} 2069]

Origin: Linear Gauge [} 292]

See also

Attribute getter: getLabelFontFamily [} 1468]

Attribute setter: setLabelFontFamily [} 1468]

Note: Available since version 1.8

5.2.13.1.9 LabelFontSize

The font size.

Scheme: tchmi:framework#/definitions/MeasurementValue [} 2123]

Origin: Linear Gauge [} 292]

See also

Attribute getter: getLabelFontSize [} 1469]

Attribute setter: setLabelFontSize [} 1469]

Note: Available since version 1.8

5.2.13.1.10 LabelFontSizeUnit

Pixels, or percent for relative sizes.

Scheme: tchmi:framework#/definitions/MeasurementUnit [} 2123]

Origin: Linear Gauge [} 292]

See also

Attribute getter: getLabelFontSizeUnit [} 1470]

Attribute setter: setLabelFontSizeUnit [} 1470]

Note: Available since version 1.8

5.2.13.1.11 LabelFontStyle

Font style (normal, italic: oblique with special characters, oblique)

Scheme: tchmi:framework#/definitions/FontStyle [} 2108]

Origin: Linear Gauge [} 292]

See also

Attribute getter: getLabelFontStyle [} 1471]

Attribute setter: setLabelFontStyle [} 1471]

Note: Available since version 1.8

5.2.13.1.12 LabelFontWeight

Font weight (normal, bold).

Scheme: tchmi:framework#/definitions/FontWeight [} 2109]

Origin: Linear Gauge [} 292]

See also

Attribute getter: getLabelFontWeight [} 1467]

Attribute setter: setLabelFontWeight [} 1467]

Note: Available since version 1.8

5.2.13.1.13 LabelFormat

Schema: tchmi:framework#/definitions/Function [} 2109]

The formatting function for the label texts.

It is called for each value in the label.

A function must fulfill the following signature in order to be offered in the engineering. The parameters

mentioned here are set by the control. Further parameters are possible and can be specified per instance in

the engineering.

Example: The value for the Linear Gauge is set by the control. The further parameter "maxDecimals" is

specified in Engineering for each instance.

[ Function ]

exampleFunction(value: number): string;

Parameter

Name Type Description

value number [} 1997]

tchmi:general#/definitions/Number

[} 2067]

The numerical value for the label.

Return value

Type Description

string [} 1997]

tchmi:general#/definitions/String [} 2069]

The text to be displayed. HTML is not allowed here.

Origin: Linear Gauge [} 292]

See also

Attribute getter: getLabelFormat [} 1471]

Attribute setter: setLabelFormat [} 1472]

Note: Available since version 1.8

5.2.13.1.14 LabelPosition

The position of the label texts and scale division relative to the display.

Scheme: tchmi:framework#/definitions/LinearGaugeLabelPosition [} 2120]

Origin: Linear Gauge [} 292]

See also

Attribute getter: getLabelPosition [} 1466]

Attribute setter: setLabelPosition [} 1466]

Note: Available since version 1.8

5.2.13.1.15 LabelRange

The value range between the label texts.

Scheme: tchmi:general#/definitions/Number [} 2067]

Origin: Linear Gauge [} 292]

See also

Attribute getter: getLabelRange [} 1465]

Attribute setter: setLabelRange [} 1465]

Note: Available since version 1.8

5.2.13.1.16 MaxValue

The largest value that the control element should display graphically.

Scheme: tchmi:general#/definitions/Number [} 2067]

Origin: Linear Gauge [} 292]

See also

Attribute getter: getMaxValue [} 1452]

Attribute setter: setMaxValue [} 1453]

Note: Available since version 1.8

5.2.13.1.17 MinValue

The smallest value that the control should display graphically.

Scheme: tchmi:general#/definitions/Number [} 2067]

Origin: Linear Gauge [} 292]

See also

Attribute getter: getMinValue [} 1453]

Attribute setter: setMinValue [} 1453]

Note: Available since version 1.8

5.2.13.1.18 Orientation

The orientation of the display. Horizontal and vertical orientation are supported.

Scheme: tchmi:framework#/definitions/LinearGaugeOrientation [} 2120]

Origin: Linear Gauge [} 292]

See also

Attribute getter: getOrientation [} 1448]

Attribute setter: setOrientation [} 1449]

Note: Available since version 1.8

5.2.13.1.19 UnitOrientatin

The orientation of unit.

Scheme: tchmi:framework#/definitions/LinearGaugeUnitOrientation [} 2120]

Origin: Linear Gauge [} 292]

See also

Attribute getter: getUnitOrientation [} 1475]

Attribute setter: setUnitOrientation [} 1476]

Note: Available since version 1.8

5.2.13.1.20 Padding

Scheme: tchmi:framework#/definitions/Padding [} 2127]

Origin: Linear Gauge [} 292]

See also

Attribute getter: getPadding [} 1449]

Attribute setter: setPadding [} 1450]

Note: Available since version 1.8

5.2.13.1.21 ProgressBackgroundColor

The color to the right of the value.

Scheme: tchmi:framework#/definitions/Color [} 2094]

Origin: Linear Gauge [} 292]

See also

Attribute getter: getProgressBackgroundColor [} 1441]

Attribute setter: setProgressBackgroundColor [} 1441]

Note: Available since version 1.8

5.2.13.1.22 ProgressForegroundColor

The color to the left of the value.

Scheme: tchmi:framework#/definitions/Color [} 2094]

Origin: Linear Gauge [} 292]

See also

Attribute getter: getProgressForegroundColor [} 1442]

Attribute setter: setProgressForegroundColor [} 1442]

Note: Available since version 1.8

5.2.13.1.23 Range

The value range of the color scales.

Scheme: tchmi:framework#/definitions/GaugeRangeDefinitionList [} 2117]

Origin: Linear Gauge [} 292]

See also

Attribute getter: getRange [} 1456]

Attribute setter: setRange [} 1456]

Note: Available since version 1.8

5.2.13.1.24 ShowLabels

Label texts are either displayed or not.

Scheme: tchmi:general#/definitions/Boolean [} 2060]

Origin: Linear Gauge [} 292]

See also

Attribute getter: getShowLabels [} 1464]

Attribute setter: setShowLabels [} 1465]

Note: Available since version 1.8

5.2.13.1.25 ShowTicks

Defines whether main axis markers are to be drawn.

Scheme: tchmi:general#/definitions/Boolean [} 2060]

Origin: Linear Gauge [} 292]

See also

Attribute getter: getShowTicks [} 1472]

Attribute setter: setShowTicks [} 1473]

Note: Available since version 1.8

5.2.13.1.26 ShowValueText

Either displays the value or not.

Scheme: tchmi:general#/definitions/Boolean [} 2060]

Origin: Linear Gauge [} 292]

See also

Attribute getter: getShowValueText [} 1455]

Attribute setter: setShowValueText [} 1455]

Note: Available since version 1.8

5.2.13.1.27 StartFromZero

Starts from zero or at the minimum value. This has no effect if the minimum value is equal to or greater than

zero.

Scheme: tchmi:general#/definitions/Boolean [} 2060]

Origin: Linear Gauge [} 292]

See also

Attribute getter: getStartFromZero [} 1457]

Attribute setter: setStartFromZero [} 1457]

Note: Available since version 1.8

5.2.13.1.28 Step

Defines the increment with which the value can be incremented/decremented.

Scheme: tchmi:framework#/definitions/PositiveNumber [} 2129]

Origin: Linear Gauge [} 292]

See also

Attribute getter: getStep [} 1454]

Attribute setter: setStep [} 1454]

Note: Available since version 1.8

5.2.13.1.29 TickColor

Scheme: tchmi:framework#/definitions/Color [} 2094]

Origin: Linear Gauge [} 292]

See also

Attribute getter: getTickColor [} 1444]

Attribute setter: setTickColor [} 1444]

Note: Available since version 1.8

5.2.13.1.30 TickDefinition

Describes the scale divisions.

Scheme: tchmi:framework#/definitions/GaugeTickDefinition [} 2118]

Origin: Linear Gauge [} 292]

See also

Attribute getter: getTickDefinition [} 1473]

Attribute setter: setTickDefinition [} 1474]

Note: Available since version 1.8

5.2.13.1.31 UnitColor

Scheme: tchmi:framework#/definitions/SolidColor [} 2133]

Origin: Linear Gauge [} 292]

See also

Attribute getter: getUnitColor [} 1447]

Attribute setter: setUnitColor [} 1448]

Note: Available since version 1.8

5.2.13.1.32 UnitFontFamily

Comma-separated list of fonts as font family or keyword: 'serif', 'sans-serif', 'monospace'.

Scheme: tchmi:general#/definitions/String [} 2069]

Origin: Linear Gauge [} 292]

See also

Attribute getter: getUnitFontFamily [} 1479]

Attribute setter: setUnitFontFamily [} 1479]

Note: Available since version 1.8

5.2.13.1.33 UnitFontSize

The font size. If the percent is specified as the unit, this is relative to the font size of the parent element.

Scheme: tchmi:framework#/definitions/MeasurementValue [} 2123]

Origin: Linear Gauge [} 292]

See also

Attribute getter: getUnitFontSize [} 1476]

Attribute setter: setUnitFontSize [} 1477]

Note: Available since version 1.8

5.2.13.1.34 UnitFontSizeUnit

Pixels, or percent for relative sizes.

Scheme: tchmi:framework#/definitions/MeasurementUnit [} 2123]

Origin: Linear Gauge [} 292]

See also

Attribute getter: getUnitFontSizeUnit [} 1480]

Attribute setter: setUnitFontSizeUnit [} 1480]

Note: Available since version 1.8

5.2.13.1.35 UnitFontStyle

Font style (normal, italic: oblique with special characters, oblique)

Scheme: tchmi:framework#/definitions/FontStyle [} 2108]

Origin: Linear Gauge [} 292]

See also

Attribute getter: getUnitFontStyle [} 1477]

Attribute setter: setUnitFontStyle [} 1478]

Note: Available since version 1.8

5.2.13.1.36 UnitFontWeight

Font weight (normal, bold).

Scheme: tchmi:framework#/definitions/FontWeight [} 2109]

Origin: Linear Gauge [} 292]

See also

Attribute getter: getUnitFontWeight [} 1478]

Attribute setter: setUnitFontWeight [} 1478]

Note: Available since version 1.8

5.2.13.1.37 Value

The value of the display.

Scheme: tchmi:general#/definitions/Number [} 2067]

Origin: Linear Gauge [} 292]

See also

Attribute getter: getValue [} 1450]

Attribute setter: setValue [} 1451]

Note: Available since version 1.8

5.2.13.1.38 ValueColor

The color of the display value.

Scheme: tchmi:framework#/definitions/SolidColor [} 2133]

Origin: Linear Gauge [} 292]

See also

Attribute getter: getValueColor [} 1445]

Attribute setter: setValueColor [} 1445]

Note: Available since version 1.8

5.2.13.1.39 ValueFontFamily

Comma-separated list of fonts as font family or keyword: 'serif', 'sans-serif', 'monospace'.

Scheme: tchmi:general#/definitions/String [} 2069]

Origin: Linear Gauge [} 292]

See also

Attribute getter: getValueFontFamily [} 1461]

Attribute setter: setValueFontFamily [} 1462]

Note: Available since version 1.8

5.2.13.1.40 ValueFontSize

The font size. If the percent is specified as the unit, this is relative to the font size of the parent element.

Scheme: tchmi:framework#/definitions/MeasurementValue [} 2123]

Origin: Linear Gauge [} 292]

See also

Attribute getter: getValueFontSize [} 1460]

Attribute setter: setValueFontSize [} 1461]

Note: Available since version 1.8

5.2.13.1.41 ValueFontSizeUnit

Pixels, or percent for relative sizes.

Scheme: tchmi:framework#/definitions/MeasurementUnit [} 2123]

Origin: Linear Gauge [} 292]

See also

Attribute getter: getValueFontSizeUnit [} 1459]

Attribute setter: setValueFontSizeUnit [} 1460]

Note: Available since version 1.8

5.2.13.1.42 ValueFontStyle

Font style (normal, italic: oblique with special characters, oblique)

Scheme: tchmi:framework#/definitions/FontStyle [} 2108]

Origin: Linear Gauge [} 292]

See also

Attribute getter: getValueFontStyle [} 1463]

Attribute setter: setValueFontStyle [} 1464]

Note: Available since version 1.8

5.2.13.1.43 ValueFontWeight

Font weight (normal, bold).

Scheme: tchmi:framework#/definitions/FontWeight [} 2109]

Origin: Linear Gauge [} 292]

See also

Attribute getter: getValueFontWeight [} 1458]

Attribute setter: setValueFontWeight [} 1458]

Note: Available since version 1.8

5.2.13.1.44 ValueFormat

Schema: tchmi:framework#/definitions/Function [} 2109]

The formatting function for the display value.

It is called for each displayed value.

A function must fulfill the following signature in order to be offered in the engineering. The parameters

mentioned here are set by the control. Further parameters are possible and can be specified per instance in

the engineering.

Example: The value for the Linear Gauge is set by the control. The further parameter "maxDecimals" is

specified in Engineering for each instance.

[ Function ]

exampleFunction(value: number): string;

Parameter

Name Type Description

value number [} 1997]

tchmi:general#/definitions/Number

[} 2067]

The current numerical value.

Return value

Type Description

string [} 1997]

tchmi:general#/definitions/String [} 2069]

The text to be displayed. HTML is not allowed here.

Origin: Linear Gauge [} 292]

See also

Attribute getter: getValueFormat [} 1459]

Attribute setter: setValueFormat [} 1459]

Note: Available since version 1.8

5.2.13.2 Events

5.2.13.2.1 onUserInteractionFinished

The user has finished the interaction [} 300] with the control.

Origin: Linear Gauge [} 292]

Note: Available since version 1.8

5.2.13.2.2 onValueChanged

The value [} 310] has been changed.

Origin: Linear Gauge [} 292]

Note: Available since version 1.8

5.2.13.3 Themed Resources

These resources cannot be defined per instance but only for several/all linear gauges via the theme file. If

you really want to change only one instance, you must create a class for it.

Note: Available since version 1.10

5.2.13.3.1 KnobConfigHorizontal

A different graphic can be selected for the display of the slider.

This definition only applies to gauges that are horizontally aligned via the attribute Orientation [} 305]. If the

control is positioned vertically, the resource KnobConfigVertical [} 314] is used.

The path of the image file and the display size of the image must be specified. Furthermore, the offset of the

"anchor point" can be defined. This allows the image to be positioned correctly with respect to the value bar.

Note that an SVG file opens its own viewport and therefore the aspect ratio cannot normally be changed.

Partially transparent images in PNG and SVG format are also supported. For pixel graphics (PNG, JPG)

please note that the attributes KnobColor [} 301] and KnobArrowsColor [} 301] have no effect. If an SVG is

used, the color definition can take effect if the SVG is prepared accordingly.

When loading, the following character substitution is performed in the SVG:

· {KnobColorStroke} is replaced by "stroke:" followed by KnobColor [} 301] as CSS color if

KnobColor [} 301] is set, otherwise removed

· {KnobColorFill} is replaced by "fill:" followed by KnobColor [} 301] as CSS color if KnobColor

[} 301] is set, otherwise removed

· {KnobColorGradientDefinition} is replaced by a matching SVG <linearGradient> element

as string if KnobColor [} 301] is a LinearGradientColor [} 1974], otherwise removed

· {KnobArrowsColorStroke} is replaced by "stroke:" followed by KnobArrowsColor [} 301] as

CSS color if KnobArrowsColor [} 301] is set, otherwise removed

· {KnobArrowsColorFill} is replaced by "fill:" followed by KnobArrowsColor [} 301] as CSS

color if KnobArrowsColor [} 301] is set, otherwise removed

· {KnobArrowsColorGradientDefinition} is replaced by a matching SVG <linearGradient>

element as string if KnobArrowsColor [} 301] is a LinearGradientColor [} 1974], otherwise removed

Example SVG

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="40" height="40">

<defs>{KnobColorGradientDefinition}</defs>

<circle r="18px" cx="20px" cy="20px"

style="stroke-width:3px;{KnobColorFill}{KnobArrowsColorStroke}"></circle>

<path d="M 18 11 L 16 11 L 7 20 L 16 29 L 18 29 L 18 27 L 11 20 L 18 13 Z"

style="stroke:none;{KnobArrowsColorFill}"></path>

<path d="M 22 13 L 24 11 L 33 20 L 24 29 L 22 29 L 22 27 L 29 20 L 22 13 Z"

style="stroke:none;{KnobArrowsColorFill}"></path>

</svg>

Scheme: tchmi:framework#/definitions/KnobDefinition [} 2119]

Origin: Linear Gauge [} 292]

Note: Available since version 1.10

5.2.13.3.2 KnobConfigVertical

A different graphic can be selected for the display of the slider.

This definition only applies to gauges that are vertically aligned via the attribute Orientation [} 305]. If the

control element is positioned horizontally, the resource KnobConfigHorizontal [} 313] is used.

The path of the image file and the display size of the image must be specified. Furthermore, the offset of the

"anchor point" can be defined. This allows the image to be positioned correctly with respect to the value bar.

Note that an SVG file opens its own viewport and therefore the aspect ratio cannot normally be changed.

Partially transparent images in PNG and SVG format are also supported. For pixel graphics (PNG, JPG)

please note that the attributes KnobColor [} 301] and KnobArrowsColor [} 301] have no effect. If an SVG is

used, the color definition can take effect if the SVG is prepared accordingly.

When loading, the following character substitution is performed in the SVG:

· {KnobColorStroke} is replaced by "stroke:" followed by KnobColor [} 301] as CSS color if

KnobColor [} 301] is set, otherwise removed

· {KnobColorFill} is replaced by "fill:" followed by KnobColor [} 301] as CSS color if KnobColor

[} 301] is set, otherwise removed

· {KnobColorGradientDefinition} is replaced by a matching SVG <linearGradient> element

as string if KnobColor [} 301] is a LinearGradientColor [} 1974], otherwise removed

· {KnobArrowsColorStroke} is replaced by "stroke:" followed by KnobArrowsColor [} 301] as

CSS color if KnobArrowsColor [} 301] is set, otherwise removed

· {KnobArrowsColorFill} is replaced by "fill:" followed by KnobArrowsColor [} 301] as CSS

color if KnobArrowsColor [} 301] is set, otherwise removed

· {KnobArrowsColorGradientDefinition} is replaced by a matching SVG <linearGradient>

element as string if KnobArrowsColor [} 301] is a LinearGradientColor [} 1974], otherwise removed

Example SVG

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="40" height="40">

<defs>{KnobColorGradientDefinition}</defs>

<circle r="18px" cx="20px" cy="20px"

style="stroke-width:3px;{KnobColorFill}{KnobArrowsColorStroke}"></circle>

<path d="M 18 11 L 16 11 L 7 20 L 16 29 L 18 29 L 18 27 L 11 20 L 18 13 Z"

style="stroke:none;{KnobArrowsColorFill}"></path>

<path d="M 22 13 L 24 11 L 33 20 L 24 29 L 22 29 L 22 27 L 29 20 L 22 13 Z"

style="stroke:none;{KnobArrowsColorFill}"></path>

</svg>

Scheme: tchmi:framework#/definitions/KnobDefinition [} 2119]

Origin: Linear Gauge [} 292]

Note: Available since version 1.10

5.2.14 Polygon

Closed shape formed from a set of interconnected points. The last point is automatically connected to the

first point.

Attributes

Category: Colors

Name Description

FillColor [} 321] Definition of the fill color of the control

StrokeColor [} 322] Definition of the line color of the control

BackgroundColor [} 433] Definition of the background color

BorderColor [} 432] Definition of the border color of the control

Category: Layout

Name Description

Left [} 426] Definition of the distance from the left side to the left

side of the surrounding control

LeftUnit [} 426] Definition of the unit of the distance to the right side

of the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Top [} 426] Definition of the distance from the top side to the top

side of the surrounding control

TopUnit [} 426] Selection of the unit of the distance to the top side of

the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Right [} 429] Definition of the distance from the right side to the

right side of the surrounding control

RightUnit [} 429] Selection of the unit of the distance to the right side

of the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Bottom [} 429] Definition of the distance from the bottom side to the

bottom side of the surrounding control

BottomUnit [} 429] Selection of the unit of the distance to the bottom

side of the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Width [} 427] Definition of the external width of the control

WidthUnit [} 427] Selection of the unit of the width:

· Pixels for an absolute width

· Percent for a relative width

Height [} 428] Definition of the external height of the control

HeightUnit [} 428] Selection of the unit of the height:

· Pixels for an absolute height

· Percent for a relative height

MaxWidth [} 437] Definition of the maximum width if the control size is

defined as dynamic

MaxWidthUnit [} 437] Selection of the unit of the maximum width:

· Pixels for an absolute value

· Percent for a relative value

MinWidth [} 438] Definition of the minimum width if the control size is

defined as dynamic

MinWidthUnit [} 438] Selection of the unit of the minimum width:

· Pixels for an absolute value

· Percent for a relative value

MaxHeight [} 436] Definition of the maximum height if the control size is

defined as dynamic

MaxHeightUnit [} 437] Selection of the unit of the maximum height:

· Pixels for an absolute value

· Percent for a relative value

MinHeight [} 436] Definition of the minimum height if the control size is

defined as dynamic

Name Description

MinHeightUnit [} 436] Selection of the unit of the minimum height:

· Pixels for an absolute value

· Percent for a relative value

RenderedLeft [} 430] Calculated distance in pixels from the left side to the

left side of the surrounding control

RenderedTop [} 430] Calculated distance in pixels from the top side to the

top side of the surrounding control

RenderedRight [} 431] Calculated distance in pixels from the right side to the

right side of the surrounding control

RenderedBottom [} 430] Calculated distance in pixels from the bottom side to

the bottom side of the surrounding control

RenderedWidth [} 431] Calculated width of the control in pixels

RenderedHeight [} 431] Calculated height of the control in pixels

GridRowIndex [} 432] Definition of the row of a grid in which the control is to

be displayed

GridColumnIndex [} 432] Definition of the column of a grid in which the control

is to be displayed

Opacity [} 438] Definition of the transparency of the entire control

Visibility [} 439] Selection of the visibility of a control:

· Visible: Control is visible

· Hidden: Control is invisible, but is drawn – controls

behind it cannot be operated

· Collapsed: Control is invisible and is not drawn –

controls behind it can be operated

ZIndex [} 440] Definition of the position on the Z-axis

Transform [} 439] Definition of a transformation of a control:

· Translate: Translate in X-, Y-, Z-direction

· Rotate: Rotate by an angle

· Scale: Zoom by a factor

· Skew: Sides shown skewed by an angle

· Origin: Set the origin of the transformation relative

to the position of the control

· Perspective: Set the perspective of the

transformations of all child elements

BoxShadow [} 440] Definition of a shadow

WidthMode [} 427] Selection of the method of calculating the width:

· Value: The width is defined by the width entered.

· Parent: The width is defined by the distance to the

left and right side of the parent element. The

"Width" attribute is ignored in all calculations!

HeightMode [} 428] Selection of the method of calculating the height:

· Value: The height is defined by the height entered.

· Parent: The height is defined by the distance to the

top and bottom side of the parent element. The

"Height" attribute is ignored in all calculations!

Category: Common

Name Description

Points [} 321] Definition of the points that describe the polygon.

Each point is defined by an x-coordinate and a ycoordinate.

IsEnabled [} 425] Selection of whether a control should be activated

Id [} 424] Definition of the name of the control

Type [} 439] Type name of the control.

ClassNames [} 425] Definition of control classes

IsAttached [} 425] If a control is logically assigned in the DOM.

ToolTip [} 438] Definition of the tool tip for the control

Category: Border

Name Description

BorderRadius [} 433] Definition of the radius of the four corners to round

them off

BorderStyle [} 433] Selection of the border style of the four sides of the

control

BorderWidth [} 433] Definition of the border width of the four sides of the

control

Category: Background Image

Name Description

BackgroundImage [} 434] Definition of an image that is located above the

background color

BackgroundImageHeight [} 435] Definition of the height of the background image

BackgroundImageHeightUnit [} 435] Selection of the unit of the height of the background

image:

· Pixels for an absolute height

· Percent for a relative height

BackgroundImageWidth [} 434] Definition of the width of the background image

BackgroundImageWidthUnit [} 434] Selection of the unit of the width of the background

image:

· Pixels for an absolute width

· Percent for a relative width

BackgroundImagePadding [} 435] Definition of an additional distance between the

border of the control and background image for the

four sides

BackgroundImageVerticalAlignment [} 436] Definition of the vertical alignment of the background

image within the control

BackgroundImageHorizontalAlignment [} 435] Definition of the horizontal alignment of the

background image within the control

Category: Shape

Name Description

StrokeThickness [} 322] Definition of the line width

StrokeThicknessUnit [} 323] Selecting the unit of the line width:

· Pixels for an absolute width

StrokeStyle [} 322] Definition of the line style

FillMode [} 321] Selecting the fill areas:

· NonZero: All areas that lie within the connecting

lines are filled in.

· EvenOdd: If a polygon is drawn so that the

resulting surfaces overlap, this section is filled in

for an odd number of overlapping surfaces and not

filled in for an even number.

ScaleMode [} 321] Selecting the polygon scaling:

· None: The polygon is not scaled. The points that

do not lie within the control are truncated.

· ScaleToFill: The polygon is displayed on the entire

size of the control. The proportions of the polygon

are not taken into account.

· ScaleToFit: The polygon is displayed as large as

possible without exceeding the edges of the

control. The proportions of the polygon are

maintained.

· ScaleToFitWidth: The polygon is displayed over

the entire width of the control, regardless of

whether it exceeds the limits of the control. The

proportions of the polygon are maintained.

· ScaleToFitHeight: The polygon is displayed over

the entire height of the control, regardless of

whether it exceeds the limits of the control. The

proportions of the polygon are maintained.

Events

Category: Framework

Name Description

onAttached [} 440] The control was added to the display.

onDetached [} 440] The control was removed from the display.

onInitialized [} 441] The control was initialized.

onMoved [} 443] The control was moved in relation to the browser

window.

onResized [} 444] The size of the control was changed.

Category: Operator

Name Description

onPressed [} 443] A mouse click was executed or a touch screen was

briefly touched.

onMouseClick [} 441] The left mouse button was clicked over the control

and released.

onMouseDoubleClick [} 441] The left mouse button was clicked twice over the

control and released.

onMouseRightClick [} 442] The right mouse button was clicked over the control

and released.

onMouseDown [} 441] A mouse button was depressed over the control.

onMouseEnter [} 442] The mouse pointer was moved over the control.

onMouseLeave [} 442] The mouse pointer has left the control.

onMouseUp [} 443] A mouse button was released over the control.

onMouseDownLeft [} 441] The left mouse button was depressed over the

control.

onMouseDownRight [} 441] The right mouse button was depressed over the

control.

onMouseMove [} 442] The mouse was moved over the control.

onMouseOver [} 442] The mouse pointer was moved over the control or

one of its children.

onMouseOut [} 442] The mouse pointer has left the control or one of its

child controls.

onMouseUpLeft [} 443] The left mouse button was released over the control.

onMouseUpRight [} 443] The right mouse button was released over the

control.

onMouseWheel [} 443] The mouse wheel was moved over the control.

onTouchStart [} 444] A finger/stylus was placed against a touch screen.

onTouchMove [} 444] A finger/stylus was moved on a touch screen.

onTouchEnd [} 444] A finger/stylus was lifted off a touch screen.

onTouchCancel [} 444] An interaction with a touch screen was aborted.

Access rights

Name Description

observe [} 444] Determines whether the control is generally

observable.

operate [} 445] Determines whether the control is generally operable.

Inheritance hierarchy

Control [} 419]

Polygon

Note: Available since version 1.8

See also

API reference [} 1543] for this control

5.2.14.1 Attributes

5.2.14.1.1 FillColor

Defines the fill color of the control.

Scheme: tchmi:framework#/definitions/Color [} 2094]

Origin: Polygon [} 315]

See also

Attribute getter: getFillColor [} 1550]

Attribute setter: setFillColor [} 1550]

Note: Available since version 1.8

5.2.14.1.2 FillMode

Defines which areas are inside or outside. This is only required for self-overlapping polygons.

Scheme: tchmi:framework#/definitions/FillMode [} 2107]

Origin: Polygon [} 315]

See also

Attribute getter: getFillMode [} 1555]

Attribute setter: setFillMode [} 1556]

Note: Available since version 1.8

5.2.14.1.3 Points

Each point is defined by an x-coordinate and a y-coordinate.

It is common practice (but not necessary) to put a comma between the x- and y-coordinates and a space

between the points, as in this example: 100,10 250,150 200,110

Scheme: tchmi:general#/definitions/String [} 2069]

Origin: Polygon [} 315]

See also

Attribute getter: getPoints [} 1551]

Attribute setter: setPoints [} 1552]

Note: Available since version 1.8

5.2.14.1.4 ScaleMode

Scales the content to the control size.

Scheme: tchmi:framework#/definitions/ScaleMode [} 2132]

Origin: Polygon [} 315]

See also

Attribute getter: getScaleMode [} 1555]

Attribute setter: setScaleMode [} 1555]

Note: Available since version 1.8

5.2.14.1.5 StrokeColor

Defines the stroke color of the control.

Scheme: tchmi:framework#/definitions/SolidColor [} 2133]

Origin: Polygon [} 315]

See also

Attribute getter: getStrokeColor [} 1550]

Attribute setter: setStrokeColor [} 1551]

Note: Available since version 1.8

5.2.14.1.6 StrokeStyle

Definition of the stroke style.

Comma or space-separated list of numbers that specify the length of strokes and spaces.

If an odd number is specified, the list is repeated once. Example: "5, 3, 2" is equivalent to "5, 3, 2, 5,

3, 2".

Scheme: tchmi:general#/definitions/String [} 2069]

Origin: Polygon [} 315]

See also

Attribute getter: getStrokeStyle [} 1552]

Attribute setter: setStrokeStyle [} 1553]

Note: Available since version 1.8

5.2.14.1.7 StrokeThickness

Defines the border width of the control in pixels.

Scheme: tchmi:framework#/definitions/MeasurementValue [} 2123]

Origin: Polygon [} 315]

See also

Attribute getter: getStrokeThickness [} 1553]

Attribute setter: setStrokeThickness [} 1554]

Note: Available since version 1.8

5.2.14.1.8 StrokeThicknessUnit

Pixel unit. At this point, only pixels can be used as a unit.

Scheme: tchmi:framework#/definitions/PixelUnit [} 2128]

Origin: Polygon [} 315]

See also

Attribute getter: getStrokeThicknessUnit [} 1554]

The attribute can only be read and therefore has no setter.

Note: Available since version 1.8

5.2.15 Radial Gauge

A radial gauge is a radial display in which a value can be displayed by filling in a bar. A start and end value

can be defined for this bar. The attribute 'Editable [} 331]' can be used to display a slider through which the

operator can change the display.

Attributes

Category: Colors

Name Description

ProgressBackgroundColor [} 336] Definition of the background color of the bar

ProgressForegroundColor [} 337] Definition of the bar color

GaugeBackground [} 332] Definition of the color of the round background

ValueColor [} 341] Definition of the text color of the display of the current

value

LabelColor [} 333] Definition of the text color of the scaling values

UnitColor [} 340] Definition of the unit color

TickColor [} 339] Definition of the scaling color

KnobColor [} 332] Definition of the fill color of the slider

KnobArrowsColor [} 332] Definition of the outline and arrow color of the slider

BackgroundColor [} 433] Definition of the background color

BorderColor [} 432] Definition of the border color of the control

Category: Layout

Name Description

StartPosition [} 338] Definition of the start angle of the display

EndPosition [} 332] Definition of the end angle of the display

Left [} 426] Definition of the distance from the left side to the left

side of the surrounding control

LeftUnit [} 426] Definition of the unit of the distance to the right side

of the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Top [} 426] Definition of the distance from the top side to the top

side of the surrounding control

TopUnit [} 426] Selection of the unit of the distance to the top side of

the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Right [} 429] Definition of the distance from the right side to the

right side of the surrounding control

RightUnit [} 429] Selection of the unit of the distance to the right side

of the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Bottom [} 429] Definition of the distance from the bottom side to the

bottom side of the surrounding control

BottomUnit [} 429] Selection of the unit of the distance to the bottom

side of the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Width [} 427] Definition of the external width of the control

WidthUnit [} 427] Selection of the unit of the width:

· Pixels for an absolute width

· Percent for a relative width

Height [} 428] Definition of the external height of the control

HeightUnit [} 428] Selection of the unit of the height:

· Pixels for an absolute height

· Percent for a relative height

MaxWidth [} 437] Definition of the maximum width if the control size is

defined as dynamic

MaxWidthUnit [} 437] Selection of the unit of the maximum width:

· Pixels for an absolute value

· Percent for a relative value

MinWidth [} 438] Definition of the minimum width if the control size is

defined as dynamic

MinWidthUnit [} 438] Selection of the unit of the minimum width:

· Pixels for an absolute value

· Percent for a relative value

MaxHeight [} 436] Definition of the maximum height if the control size is

defined as dynamic

MaxHeightUnit [} 437] Selection of the unit of the maximum height:

· Pixels for an absolute value

· Percent for a relative value

Name Description

MinHeight [} 436] Definition of the minimum height if the control size is

defined as dynamic

MinHeightUnit [} 436] Selection of the unit of the minimum height:

· Pixels for an absolute value

· Percent for a relative value

RenderedLeft [} 430] Calculated distance in pixels from the left side to the

left side of the surrounding control

RenderedTop [} 430] Calculated distance in pixels from the top side to the

top side of the surrounding control

RenderedRight [} 431] Calculated distance in pixels from the right side to the

right side of the surrounding control

RenderedBottom [} 430] Calculated distance in pixels from the bottom side to

the bottom side of the surrounding control

RenderedWidth [} 431] Calculated width of the control in pixels

RenderedHeight [} 431] Calculated height of the control in pixels

GridRowIndex [} 432] Definition of the row of a grid in which the control is to

be displayed

GridColumnIndex [} 432] Definition of the column of a grid in which the control

is to be displayed

Opacity [} 438] Definition of the transparency of the entire control

Visibility [} 439] Selection of the visibility of a control:

· Visible: Control is visible

· Hidden: Control is invisible, but is drawn – controls

behind it cannot be operated

· Collapsed: Control is invisible and is not drawn –

controls behind it can be operated

ZIndex [} 440] Definition of the position on the Z-axis

Transform [} 439] Definition of a transformation of a control:

· Translate: Translate in X-, Y-, Z-direction

· Rotate: Rotate by an angle

· Scale: Zoom by a factor

· Skew: Sides shown skewed by an angle

· Origin: Set the origin of the transformation relative

to the position of the control

· Perspective: Set the perspective of the

transformations of all child elements

BoxShadow [} 440] Definition of a shadow

WidthMode [} 427] Selection of the method of calculating the width:

· Value: The width is defined by the width entered.

· Parent: The width is defined by the distance to the

left and right side of the parent element. The

"Width" attribute is ignored in all calculations!

HeightMode [} 428] Selection of the method of calculating the height:

· Value: The height is defined by the height entered.

· Parent: The height is defined by the distance to the

top and bottom side of the parent element. The

"Height" attribute is ignored in all calculations!

Category: Common

Name Description

Value [} 341] Definition of the value to be displayed

Editable [} 331] Selecting whether the slider should be displayed and

therefore whether the linear gauge is editable

BaseAnimationTime [} 331] Definition of the basic animation time in milliseconds.

It describes the time of the animation from minimum

to maximum value.

IsEnabled [} 425] Selection of whether a control should be activated

Id [} 424] Definition of the name of the control

Type [} 439] Type name of the control.

ClassNames [} 425] Definition of control classes

IsAttached [} 425] If a control is logically assigned in the DOM.

ToolTip [} 438] Definition of the tool tip for the control

Category: Border

Name Description

BorderRadius [} 433] Definition of the radius of the four corners to round

them off

BorderStyle [} 433] Selection of the border style of the four sides of the

control

BorderWidth [} 433] Definition of the border width of the four sides of the

control

Category: Background Image

Name Description

BackgroundImage [} 434] Definition of an image that is located above the

background color

BackgroundImageHeight [} 435] Definition of the height of the background image

BackgroundImageHeightUnit [} 435] Selection of the unit of the height of the background

image:

· Pixels for an absolute height

· Percent for a relative height

BackgroundImageWidth [} 434] Definition of the width of the background image

BackgroundImageWidthUnit [} 434] Selection of the unit of the width of the background

image:

· Pixels for an absolute width

· Percent for a relative width

BackgroundImagePadding [} 435] Definition of an additional distance between the

border of the control and background image for the

four sides

BackgroundImageVerticalAlignment [} 436] Definition of the vertical alignment of the background

image within the control

BackgroundImageHorizontalAlignment [} 435] Definition of the horizontal alignment of the

background image within the control

Category: Value

Name Description

MinValue [} 336] Defines the smallest value that the control element

should graphically display

MaxValue [} 336] Defines the largest value that the control element

should graphically display

Step [} 338] Definition of the increment for changing the value via

the slider

Range [} 337] Definition of the value range of the color scales

ShowValueText [} 338] Selecting whether the current value is to be displayed

StartFromZero [} 338] Selecting whether the minimum value is to be zero

irrespective of the 'Minimum Value' attribute.

ValueFontFamily [} 342] Definition of the font using the name of the font family

or the keyword

ValueFontSize [} 342] Definition of the font size

ValueFontSizeUnit [} 342] Selecting the font size unit:

· Pixels for an absolute size

· Percent for a relative size

ValueFontStyle [} 342] Selecting the font style:

· Normal

· Italic: italic

· Oblique: slanted

ValueFontWeight [} 343] Selecting the font weight:

· Normal

· Bold: bold

ValueFormat [} 343] Definition of a formatting function for the value

ClickAnywhereToEdit [} 331] Selecting whether the value can be changed by

clicking anywhere in the control

Category: Labels

Name Description

ShowLabels [} 337] Selecting whether the scaling values are to be

displayed

LabelPosition [} 335] Selecting the position of the scaling to the bar:

· Inside

· Outside

LabelRange [} 336] Definition of the jump distance between the individual

scaling values

LabelFormat [} 334] Definition of a formatting function for the scaling

LabelFontFamily [} 333] Definition of the font using the name of the font family

or the keyword

LabelFontSize [} 333] Definition of the font size of the scaling

LabelFontSizeUnit [} 334] Selecting the unit:

· Pixels for an absolute size

· Percent for a relative size

LabelFontStyle [} 334] Selecting the font style of the scaling:

· Normal

· Italic: italic

· Oblique: slanted

LabelFontWeight [} 334] Selecting the font weight of the scaling:

· Normal

· Bold: bold

Category: Ticks

Name Description

ShowTicks [} 337] Selecting whether the scaling subdivision is to be

displayed

TickDefinition [} 339] Definition of scale divisions

SubTickPosition [} 339] Selecting the position of the auxiliary scaling to the

bar:

· Inside

· Outside

Category: Unit

Name Description

Unit [} 331] Definition of the unit or description of the value

UnitFontFamily [} 340] Definition of the font using the name of the font family

or the keyword

UnitFontSize [} 340] Definition of the font size of the unit

UnitFontSizeUnit [} 340] Selecting the font size unit:

· Pixels for an absolute size

· Percent for a relative size

UnitFontStyle [} 341] Selecting the font style of the label:

· Normal

· Italic: italic

· Oblique: slanted

UnitFontWeight [} 341] Selecting the font weight:

· Normal

· Bold: bold

Events

Category: Control

Name Description

onValueChanged [} 344] The value has been changed.

Category: Framework

Name Description

onAttached [} 440] The control was added to the display.

onDetached [} 440] The control was removed from the display.

onInitialized [} 441] The control was initialized.

onMoved [} 443] The control was moved in relation to the browser

window.

onResized [} 444] The size of the control was changed.

Category: Operator

Name Description

onUserInteractionFinished [} 344] The user has finished the interaction with the control.

onPressed [} 443] A mouse click was executed or a touch screen was

briefly touched.

onMouseClick [} 441] The left mouse button was clicked over the control

and released.

onMouseDoubleClick [} 441] The left mouse button was clicked twice over the

control and released.

onMouseRightClick [} 442] The right mouse button was clicked over the control

and released.

onMouseDown [} 441] A mouse button was depressed over the control.

onMouseEnter [} 442] The mouse pointer was moved over the control.

onMouseLeave [} 442] The mouse pointer has left the control.

onMouseUp [} 443] A mouse button was released over the control.

onMouseDownLeft [} 441] The left mouse button was depressed over the

control.

onMouseDownRight [} 441] The right mouse button was depressed over the

control.

onMouseMove [} 442] The mouse was moved over the control.

onMouseOver [} 442] The mouse pointer was moved over the control or

one of its children.

onMouseOut [} 442] The mouse pointer has left the control or one of its

child controls.

onMouseUpLeft [} 443] The left mouse button was released over the control.

onMouseUpRight [} 443] The right mouse button was released over the

control.

onMouseWheel [} 443] The mouse wheel was moved over the control.

onTouchStart [} 444] A finger/stylus was placed against a touch screen.

onTouchMove [} 444] A finger/stylus was moved on a touch screen.

onTouchEnd [} 444] A finger/stylus was lifted off a touch screen.

onTouchCancel [} 444] An interaction with a touch screen was aborted.

Access rights

Name Description

observe [} 444] Determines whether the control is generally

observable.

operate [} 445] Determines whether the control is generally operable.

Inheritance hierarchy

Control [} 419]

Radial Gauge

Note: Available since version 1.8

See also

API reference [} 1556] for this control

5.2.15.1 Attributes

5.2.15.1.1 BaseAnimationTime

The basic animation time in milliseconds. It describes the time of the animation from minimum to maximum

value.

Scheme: tchmi:general#/definitions/UDINT [} 2070]

Origin: Radial Gauge [} 323]

See also

Attribute getter: getBaseAnimationTime [} 1604]

Attribute setter: setBaseAnimationTime [} 1604]

Note: Available since version 1.8

5.2.15.1.2 ClickAnywhereToEdit

To change the value, you can click anywhere in the control.

Scheme: tchmi:general#/definitions/Boolean [} 2060]

Origin: Radial Gauge [} 323]

See also

Attribute getter: getClickAnywhereToEdit [} 1582]

Attribute setter: setClickAnywhereToEdit [} 1582]

Note: Available since version 1.8

5.2.15.1.3 Unit

The unit or description of the display value.

Scheme: tchmi:general#/definitions/String [} 2069]

Origin: Radial Gauge [} 323]

See also

Attribute getter: getUnit [} 1598]

Attribute setter: setUnit [} 1599]

Note: Available since version 1.8

5.2.15.1.4 Editable

Determines whether the slider should be displayed.

The appearance of the slider can be changed via Themed Resource of the control.

Scheme: tchmi:general#/definitions/Boolean [} 2060]

Origin: Radial Gauge [} 323]

See also

Attribute getter: getEditable [} 1574]

Attribute setter: setEditable [} 1575]

Note: Available since version 1.8

5.2.15.1.5 EndPosition

The end angle of the display.

Scheme: tchmi:general#/definitions/Number [} 2067]

Origin: Radial Gauge [} 323]

See also

Attribute getter: getEndPosition [} 1572]

Attribute setter: setEndPosition [} 1572]

Note: Available since version 1.8

5.2.15.1.6 GaugeBackgroundColor

The color of the round background.

Scheme: tchmi:framework#/definitions/Color [} 2094]

Origin: Radial Gauge [} 323]

See also

Attribute getter: getGaugeBackgroundColor [} 1565]

Attribute setter: setGaugeBackgroundColor [} 1566]

Note: Available since version 1.8

5.2.15.1.7 KnobArrowsColor

Outline and arrow color of the slider.

Scheme: tchmi:framework#/definitions/SolidColor [} 2133]

Origin: Radial Gauge [} 323]

See also

Attribute getter: getKnobArrowsColor [} 1566]

Attribute setter: setKnobArrowsColor [} 1566]

Note: Available since version 1.8

5.2.15.1.8 KnobColor

Fill color of the slider.

Scheme: tchmi:framework#/definitions/Color [} 2094]

Origin: Radial Gauge [} 323]

See also

Attribute getter: getKnobColor [} 1567]

Attribute setter: setKnobColor [} 1567]

Note: Available since version 1.8

5.2.15.1.9 LabelColor

The color of the texts for the scale divisions.

Scheme: tchmi:framework#/definitions/SolidColor [} 2133]

Origin: Radial Gauge [} 323]

See also

Attribute getter: getLabelColor [} 1569]

Attribute setter: setLabelColor [} 1569]

Note: Available since version 1.8

5.2.15.1.10 LabelFontFamily

Comma-separated list of fonts as font family or keyword: 'serif', 'sans-serif', 'monospace'.

Scheme: tchmi:general#/definitions/String [} 2069]

Origin: Radial Gauge [} 323]

See also

Attribute getter: getLabelFontFamily [} 1591]

Attribute setter: setLabelFontFamily [} 1591]

Note: Available since version 1.8

5.2.15.1.11 LabelFontSize

The font size. If the percent is specified as the unit, this is relative to the font size of the parent element.

Scheme: tchmi:framework#/definitions/MeasurementValue [} 2123]

Origin: Radial Gauge [} 323]

See also

Attribute getter: getLabelFontSize [} 1592]

Attribute setter: setLabelFontSize [} 1592]

Note: Available since version 1.8

5.2.15.1.12 LabelFontSizeUnit

Pixels, or percent for relative sizes.

Scheme: tchmi:framework#/definitions/MeasurementUnit [} 2123]

Origin: Radial Gauge [} 323]

See also

Attribute getter: getLabelFontSizeUnit [} 1593]

Attribute setter: setLabelFontSizeUnit [} 1593]

Note: Available since version 1.8

5.2.15.1.13 LabelFontStyle

Font style (normal, italic: oblique with special characters, oblique)

Scheme: tchmi:framework#/definitions/FontStyle [} 2108]

Origin: Radial Gauge [} 323]

See also

Attribute getter: getLabelFontStyle [} 1594]

Attribute setter: setLabelFontStyle [} 1594]

Note: Available since version 1.8

5.2.15.1.14 LabelFontWeight

Font weight (normal, bold).

Scheme: tchmi:framework#/definitions/FontWeight [} 2109]

Origin: Radial Gauge [} 323]

See also

Attribute getter: getLabelFontWeight [} 1595]

Attribute setter: setLabelFontWeight [} 1595]

Note: Available since version 1.8

5.2.15.1.15 LabelFormat

Schema: tchmi:framework#/definitions/Function [} 2109]

The formatting function for the label texts.

It is called for each value in the label.

A function must fulfill the following signature in order to be offered in the engineering. The parameters

mentioned here are set by the control. Further parameters are possible and can be specified per instance in

the engineering.

Example: The value for the Linear Gauge is set by the control. The further parameter "maxDecimals" is

specified in Engineering for each instance.

[ Function ]

exampleFunction(value: number): string;

Parameter

Name Type Description

value number [} 1997]

tchmi:general#/definitions/Number

[} 2067]

The numerical value for the label.

Return value

Type Description

string [} 1997]

tchmi:general#/definitions/String [} 2069]

The text to be displayed. HTML is not allowed here.

Origin: Radial Gauge [} 323]

See also

Attribute getter: getLabelFormat [} 1590]

Attribute setter: setLabelFormat [} 1590]

Note: Available since version 1.8

5.2.15.1.16 LabelPosition

The position of the label texts (inside or outside).

Scheme: tchmi:framework#/definitions/RadialGaugeLabelPosition [} 2129]

Origin: Radial Gauge [} 323]

See also

Attribute getter: getLabelPosition [} 1588]

Attribute setter: setLabelPosition [} 1589]

Note: Available since version 1.8

5.2.15.1.17 LabelRange

The value range between the label texts.

Scheme: tchmi:general#/definitions/Number [} 2067]

Origin: Radial Gauge [} 323]

See also

Attribute getter: getLabelRange [} 1589]

Attribute setter: setLabelRange [} 1590]

Note: Available since version 1.8

5.2.15.1.18 MaxValue

The largest value that the control element should display graphically.

Scheme: tchmi:general#/definitions/Number [} 2067]

Origin: Radial Gauge [} 323]

See also

Attribute getter: getMaxValue [} 1576]

Attribute setter: setMaxValue [} 1577]

Note: Available since version 1.8

5.2.15.1.19 MinValue

The smallest value that the control should display graphically.

Scheme: tchmi:general#/definitions/Number [} 2067]

Origin: Radial Gauge [} 323]

See also

Attribute getter: getMinValue [} 1575]

Attribute setter: setMinValue [} 1576]

Note: Available since version 1.8

5.2.15.1.20 ProgressBackgroundColor

The color to the right of the value.

Scheme: tchmi:framework#/definitions/SolidColor [} 2133]

Origin: Radial Gauge [} 323]

See also

Attribute getter: getProgressBackgroundColor [} 1564]

Attribute setter: setProgressBackgroundColor [} 1565]

Note: Available since version 1.8

5.2.15.1.21 ProgressForegroundColor

The color to the left of the value.

Scheme: tchmi:framework#/definitions/SolidColor [} 2133]

Origin: Radial Gauge [} 323]

See also

Attribute getter: getProgressForegroundColor [} 1563]

Attribute setter: setProgressForegroundColor [} 1564]

Note: Available since version 1.8

5.2.15.1.22 Range

The value range of the color scales.

Scheme: tchmi:framework#/definitions/GaugeRangeDefinitionList [} 2117]

Origin: Radial Gauge [} 323]

See also

Attribute getter: getRange [} 1578]

Attribute setter: setRange [} 1578]

Note: Available since version 1.8

5.2.15.1.23 ShowLabels

Label texts are either displayed or not.

Scheme: tchmi:general#/definitions/Boolean [} 2060]

Origin: Radial Gauge [} 323]

See also

Attribute getter: getShowLabels [} 1587]

Attribute setter: setShowLabels [} 1588]

Note: Available since version 1.8

5.2.15.1.24 ShowTicks

Defines whether main axis markers are to be drawn.

Scheme: tchmi:general#/definitions/Boolean [} 2060]

Origin: Radial Gauge [} 323]

See also

Attribute getter: getShowTicks [} 1596]

Attribute setter: setShowTicks [} 1596]

Note: Available since version 1.8

5.2.15.1.25 ShowValueText

Either displays the number value or not.

Scheme: tchmi:general#/definitions/Boolean [} 2060]

Origin: Radial Gauge [} 323]

See also

Attribute getter: getShowValueText [} 1579]

Attribute setter: setShowValueText [} 1579]

Note: Available since version 1.8

5.2.15.1.26 StartPosition

The start angle of the display.

Scheme: tchmi:general#/definitions/Number [} 2067]

Origin: Radial Gauge [} 323]

See also

Attribute getter: getStartPosition [} 1572]

Attribute setter: setStartPosition [} 1573]

Note: Available since version 1.8

5.2.15.1.27 StartFromZero

Starts from zero or at the minimum value. This has no effect if the minimum value is equal to or greater than

zero.

Scheme: tchmi:general#/definitions/Boolean [} 2060]

Origin: Radial Gauge [} 323]

See also

Attribute getter: getStartFromZero [} 1580]

Attribute setter: setStartFromZero [} 1580]

Note: Available since version 1.8

5.2.15.1.28 Step

Defines the increment with which the value can be incremented/decremented.

Scheme: tchmi:framework#/definitions/PositiveNumber [} 2129]

Origin: Radial Gauge [} 323]

See also

Attribute getter: getStep [} 1577]

Attribute setter: setStep [} 1578]

Note: Available since version 1.8

5.2.15.1.29 SubTickPosition

The position (inside or outside) of the secondary to the primary scale divisions.

Scheme: tchmi:framework#/definitions/RadialGaugeLabelPosition [} 2129]

Origin: Radial Gauge [} 323]

See also

Attribute getter: getSubTickPosition [} 1596]

Attribute setter: setSubTickPosition [} 1597]

Note: Available since version 1.8

5.2.15.1.30 TickColor

Scheme: tchmi:framework#/definitions/SolidColor [} 2133]

Origin: Radial Gauge [} 323]

See also

Attribute getter: getTickColor [} 1571]

Attribute setter: setTickColor [} 1571]

Note: Available since version 1.8

5.2.15.1.31 TickDefinition

Describes the scale divisions.

Scheme: tchmi:framework#/definitions/GaugeTickDefinition [} 2118]

Origin: Radial Gauge [} 323]

See also

Attribute getter: getTickDefinition [} 1597]

Attribute setter: setTickDefinition [} 1598]

Note: Available since version 1.8

5.2.15.1.32 UnitColor

Scheme: tchmi:framework#/definitions/SolidColor [} 2133]

Origin: Radial Gauge [} 323]

See also

Attribute getter: getUnitColor [} 1570]

Attribute setter: setUnitColor [} 1570]

Note: Available since version 1.8

5.2.15.1.33 UnitFontFamily

Comma-separated list of fonts as font family or keyword: 'serif', 'sans-serif', 'monospace'.

Scheme: tchmi:general#/definitions/String [} 2069]

Origin: Radial Gauge [} 323]

See also

Attribute getter: getUnitFontFamily [} 1600]

Attribute setter: setUnitFontFamily [} 1601]

Note: Available since version 1.8

5.2.15.1.34 UnitFontSize

The font size. If the percent is specified as the unit, this is relative to the font size of the parent element.

Scheme: tchmi:framework#/definitions/MeasurementValue [} 2123]

Origin: Radial Gauge [} 323]

See also

Attribute getter: getUnitFontSize [} 1599]

Attribute setter: setUnitFontSize [} 1600]

Note: Available since version 1.8

5.2.15.1.35 UnitFontSizeUnit

Pixels, or percent for relative sizes.

Scheme: tchmi:framework#/definitions/MeasurementUnit [} 2123]

Origin: Radial Gauge [} 323]

See also

Attribute getter: getUnitFontSizeUnit [} 1603]

Attribute setter: setUnitFontSizeUnit [} 1603]

Note: Available since version 1.8

5.2.15.1.36 UnitFontStyle

Font style (normal, italic: oblique with special characters, oblique)

Scheme: tchmi:framework#/definitions/FontStyle [} 2108]

Origin: Radial Gauge [} 323]

See also

Attribute getter: getUnitFontStyle [} 1601]

Attribute setter: setUnitFontStyle [} 1602]

Note: Available since version 1.8

5.2.15.1.37 UnitFontWeight

Font weight (normal, bold).

Scheme: tchmi:framework#/definitions/FontWeight [} 2109]

Origin: Radial Gauge [} 323]

See also

Attribute getter: getUnitFontWeight [} 1602]

Attribute setter: setUnitFontWeight [} 1602]

Note: Available since version 1.8

5.2.15.1.38 Value

The value of the display.

Scheme: tchmi:general#/definitions/Number [} 2067]

Origin: Radial Gauge [} 323]

See also

Attribute getter: getValue [} 1573]

Attribute setter: setValue [} 1574]

Note: Available since version 1.8

5.2.15.1.39 ValueColor

The color of the display value.

Scheme: tchmi:framework#/definitions/SolidColor [} 2133]

Origin: Radial Gauge [} 323]

See also

Attribute getter: getValueColor [} 1568]

Attribute setter: setValueColor [} 1568]

Note: Available since version 1.8

5.2.15.1.40 ValueFontFamily

Comma-separated list of fonts as font family or keyword: 'serif', 'sans-serif', 'monospace'.

Scheme: tchmi:general#/definitions/String [} 2069]

Origin: Radial Gauge [} 323]

See also

Attribute getter: getValueFontFamily [} 1583]

Attribute setter: setValueFontFamily [} 1583]

Note: Available since version 1.8

5.2.15.1.41 ValueFontSize

The font size. If the percent is specified as the unit, this is relative to the font size of the parent element.

Scheme: tchmi:framework#/definitions/MeasurementValue [} 2123]

Origin: Radial Gauge [} 323]

See also

Attribute getter: getValueFontSize [} 1584]

Attribute setter: setValueFontSize [} 1584]

Note: Available since version 1.8

5.2.15.1.42 ValueFontSizeUnit

Pixels, or percent for relative sizes.

Scheme: tchmi:framework#/definitions/MeasurementUnit [} 2123]

Origin: Radial Gauge [} 323]

See also

Attribute getter: getValueFontSizeUnit [} 1584]

Attribute setter: setValueFontSizeUnit [} 1585]

Note: Available since version 1.8

5.2.15.1.43 ValueFontStyle

Font style (normal, italic: oblique with special characters, oblique)

Scheme: tchmi:framework#/definitions/FontStyle [} 2108]

Origin: Radial Gauge [} 323]

See also

Attribute getter: getValueFontStyle [} 1581]

Attribute setter: setValueFontStyle [} 1581]

Note: Available since version 1.8

5.2.15.1.44 ValueFontWeight

Font weight (normal, bold).

Scheme: tchmi:framework#/definitions/FontWeight [} 2109]

Origin: Radial Gauge [} 323]

See also

Attribute getter: getValueFontWeight [} 1585]

Attribute setter: setValueFontWeight [} 1586]

Note: Available since version 1.8

5.2.15.1.45 ValueFormat

Schema: tchmi:framework#/definitions/Function [} 2109]

The formatting function for the display value.

It is called for each displayed value.

A function must fulfill the following signature in order to be offered in the engineering. The parameters

mentioned here are set by the control. Further parameters are possible and can be specified per instance in

the engineering.

Example: The value for the Linear Gauge is set by the control. The further parameter "maxDecimals" is

specified in Engineering for each instance.

[ Function ]

exampleFunction(value: number): string;

Parameter

Name Type Description

value number [} 1997]

tchmi:general#/definitions/Number

[} 2067]

The current numerical value.

Return value

Type Description

string [} 1997]

tchmi:general#/definitions/String [} 2069]

The text to be displayed. HTML is not allowed here.

Origin: Radial Gauge [} 323]

See also

Attribute getter: getValueFormat [} 1586]

Attribute setter: setValueFormat [} 1587]

Note: Available since version 1.8

5.2.15.2 Events

5.2.15.2.1 onUserInteractionFinished

The user has finished the interaction [} 331] with the control.

Origin: Radial Gauge [} 323]

Note: Available since version 1.8

5.2.15.2.2 onValueChanged

The value [} 341] has been changed.

Origin: Radial Gauge [} 323]

Note: Available since version 1.8

5.2.15.3 Themed Resources

These resources cannot be defined per instance but only for several/all radial gauges via the theme file. If

you really want to change only one instance, you must create a class for it.

Note: Available since version 1.10

5.2.15.3.1 KnobConfig

A different graphic can be selected for the display of the slider.

The path of the image file and the display size of the image must be specified. Furthermore, the offset of the

"anchor point" can be defined. This allows the image to be positioned correctly with respect to the value bar.

Note that an SVG file opens its own viewport and therefore the aspect ratio cannot normally be changed.

Partially transparent images in PNG and SVG format are also supported. For pixel graphics (PNG, JPG)

please note that the attributes KnobColor [} 332] and KnobArrowsColor [} 332] have no effect. If an SVG is

used, the color definition can take effect if the SVG is prepared accordingly.

When loading, the following character substitution is performed in the SVG:

· {KnobColorStroke} is replaced by "stroke:" followed by KnobColor [} 332] as CSS color if

KnobColor [} 332] is set, otherwise removed

· {KnobColorFill} is replaced by "fill:" followed by KnobColor [} 332] as CSS color if KnobColor

[} 332] is set, otherwise removed

· {KnobColorGradientDefinition} is replaced by a matching SVG <linearGradient> element

as string if KnobColor [} 332] is a LinearGradientColor [} 1974], otherwise removed

· {KnobArrowsColorStroke} is replaced by "stroke:" followed by KnobArrowsColor [} 301] as

CSS color if KnobArrowsColor [} 332] is set, otherwise removed

· {KnobArrowsColorFill} is replaced by "fill:" followed by KnobArrowsColor [} 301] as CSS

color if KnobArrowsColor [} 332] is set, otherwise removed

· {KnobArrowsColorGradientDefinition} is replaced by a matching SVG <linearGradient>

element as string if KnobArrowsColor [} 332] is a LinearGradientColor [} 1974], otherwise removed

Example SVG

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="40" height="40">

<defs>{KnobColorGradientDefinition}</defs>

<circle r="18px" cx="20px" cy="20px"

style="stroke-width:3px;{KnobColorFill}{KnobArrowsColorStroke}"></circle>

<path d="M 18 11 L 16 11 L 7 20 L 16 29 L 18 29 L 18 27 L 11 20 L 18 13 Z"

style="stroke:none;{KnobArrowsColorFill}"></path>

<path d="M 22 13 L 24 11 L 33 20 L 24 29 L 22 29 L 22 27 L 29 20 L 22 13 Z"

style="stroke:none;{KnobArrowsColorFill}"></path>

</svg>

Scheme: tchmi:framework#/definitions/KnobDefinition [} 2119]

Origin: Radial Gauge [} 323]

Note: Available since version 1.10

5.2.16 Rectangle

A rectangle is a rectangular object.

Attributes

Category: Colors

Name Description

FillColor [} 352] Definition of the fill color of the control

StrokeColor [} 352] Definition of the line color

BackgroundColor [} 433] Definition of the background color

BorderColor [} 432] Definition of the border color of the control

Category: Layout

Name Description

Left [} 426] Definition of the distance from the left side to the left

side of the surrounding control

LeftUnit [} 426] Definition of the unit of the distance to the right side

of the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Top [} 426] Definition of the distance from the top side to the top

side of the surrounding control

TopUnit [} 426] Selection of the unit of the distance to the top side of

the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Right [} 429] Definition of the distance from the right side to the

right side of the surrounding control

RightUnit [} 429] Selection of the unit of the distance to the right side

of the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Bottom [} 429] Definition of the distance from the bottom side to the

bottom side of the surrounding control

BottomUnit [} 429] Selection of the unit of the distance to the bottom

side of the surrounding control:

· Pixels for absolute positioning

· Percent for relative positioning

Width [} 427] Definition of the external width of the control

WidthUnit [} 427] Selection of the unit of the width:

· Pixels for an absolute width

· Percent for a relative width

Height [} 428] Definition of the external height of the control

HeightUnit [} 428] Selection of the unit of the height:

· Pixels for an absolute height

· Percent for a relative height

MaxWidth [} 437] Definition of the maximum width if the control size is

defined as dynamic

MaxWidthUnit [} 437] Selection of the unit of the maximum width:

· Pixels for an absolute value

· Percent for a relative value

MinWidth [} 438] Definition of the minimum width if the control size is

defined as dynamic

MinWidthUnit [} 438] Selection of the unit of the minimum width:

· Pixels for an absolute value

· Percent for a relative value

MaxHeight [} 436] Definition of the maximum height if the control size is

defined as dynamic

MaxHeightUnit [} 437] Selection of the unit of the maximum height:

· Pixels for an absolute value

· Percent for a relative value

MinHeight [} 436] Definition of the minimum height if the control size is

defined as dynamic

Name Description

MinHeightUnit [} 436] Selection of the unit of the minimum height:

· Pixels for an absolute value

· Percent for a relative value

RenderedLeft [} 430] Calculated distance in pixels from the left side to the

left side of the surrounding control

RenderedTop [} 430] Calculated distance in pixels from the top side to the

top side of the surrounding control

RenderedRight [} 431] Calculated distance in pixels from the right side to the

right side of the surrounding control

RenderedBottom [} 430] Calculated distance in pixels from the bottom side to

the bottom side of the surrounding control

RenderedWidth [} 431] Calculated width of the control in pixels

RenderedHeight [} 431] Calculated height of the control in pixels

GridRowIndex [} 432] Definition of the row of a grid in which the control is to

be displayed

GridColumnIndex [} 432] Definition of the column of a grid in which the control

is to be displayed

Opacity [} 438] Definition of the transparency of the entire control

Visibility [} 439] Selection of the visibility of a control:

· Visible: Control is visible

· Hidden: Control is invisible, but is drawn – controls

behind it cannot be operated

· Collapsed: Control is invisible and is not drawn –

controls behind it can be operated

ZIndex [} 440] Definition of the position on the Z-axis

Transform [} 439] Definition of a transformation of a control:

· Translate: Translate in X-, Y-, Z-direction

· Rotate: Rotate by an angle

· Scale: Zoom by a factor

· Skew: Sides shown skewed by an angle

· Origin: Set the origin of the transformation relative

to the position of the control

· Perspective: Set the perspective of the

transformations of all child elements

BoxShadow [} 440] Definition of a shadow

WidthMode [} 427] Selection of the method of calculating the width:

· Value: The width is defined by the width entered.

· Parent: The width is defined by the distance to the

left and right side of the parent element. The

"Width" attribute is ignored in all calculations!

HeightMode [} 428] Selection of the method of calculating the height:

· Value: The height is defined by the height entered.

· Parent: The height is defined by the distance to the

top and bottom side of the parent element. The

"Height" attribute is ignored in all calculations!

Category: Common

Name Description

IsEnabled [} 425] Selection of whether a control should be activated

Id [} 424] Definition of the name of the control

Type [} 439] Type name of the control.

ClassNames [} 425] Definition of control classes

IsAttached [} 425] If a control is logically assigned in the DOM.

ToolTip [} 438] Definition of the tool tip for the control

Category: Border

Name Description

BorderRadius [} 433] Definition of the radius of the four corners to round

them off

BorderStyle [} 433] Selection of the border style of the four sides of the

control

BorderWidth [} 433] Definition of the border width of the four sides of the

control

Category: Background Image

Name Description

BackgroundImage [} 434] Definition of an image that is located above the

background color

BackgroundImageHeight [} 435] Definition of the height of the background image

BackgroundImageHeightUnit [} 435] Selection of the unit of the height of the background

image:

· Pixels for an absolute height

· Percent for a relative height

BackgroundImageWidth [} 434] Definition of the width of the background image

BackgroundImageWidthUnit [} 434] Selection of the unit of the width of the background

image:

· Pixels for an absolute width

· Percent for a relative width

BackgroundImagePadding [} 435] Definition of an additional distance between the

border of the control and background image for the

four sides

BackgroundImageVerticalAlignment [} 436] Definition of the vertical alignment of the background

image within the control

BackgroundImageHorizontalAlignment [} 435] Definition of the horizontal alignment of the

background image within the control

Category: Shape

Name Description

StrokeThickness [} 353] Definition of the line width

StrokeThicknessUnit [} 353] Selecting the unit of the line width:

· Pixels for an absolute width

StrokeStyle [} 352] Definition of the line style

RadiusX [} 351] Definition of the x-axis radius of the ellipse used to

round the corners of the rectangle

RadiusXUnit [} 351] Selecting the unit of the x-axis radius:

· Pixel for an absolute radius

RadiusY [} 351] Definition of the y-axis radius of the ellipse used to

round the corners of the rectangle

RadiusYUnit [} 351] Selecting the unit of the y-axis radius:

· Pixel for an absolute radius

Events

Category: Framework

Name Description

onAttached [} 440] The control was added to the display.

onDetached [} 440] The control was removed from the display.

onInitialized [} 441] The control was initialized.

onMoved [} 443] The control was moved in relation to the browser

window.

onResized [} 444] The size of the control was changed.

Category: Operator

Name Description

onPressed [} 443] A mouse click was executed or a touch screen was

briefly touched.

onMouseClick [} 441] The left mouse button was clicked over the control

and released.

onMouseDoubleClick [} 441] The left mouse button was clicked twice over the

control and released.

onMouseRightClick [} 442] The right mouse button was clicked over the control

and released.

onMouseDown [} 441] A mouse button was depressed over the control.

onMouseEnter [} 442] The mouse pointer was moved over the control.

onMouseLeave [} 442] The mouse pointer has left the control.

onMouseUp [} 443] A mouse button was released over the control.

onMouseDownLeft [} 441] The left mouse button was depressed over the

control.

onMouseDownRight [} 441] The right mouse button was depressed over the

control.

onMouseMove [} 442] The mouse was moved over the control.

onMouseOver [} 442] The mouse pointer was moved over the control or

one of its children.

onMouseOut [} 442] The mouse pointer has left the control or one of its

child controls.

onMouseUpLeft [} 443] The left mouse button was released over the control.

onMouseUpRight [} 443] The right mouse button was released over the

control.

onMouseWheel [} 443] The mouse wheel was moved over the control.

onTouchStart [} 444] A finger/stylus was placed against a touch screen.

onTouchMove [} 444] A finger/stylus was moved on a touch screen.

onTouchEnd [} 444] A finger/stylus was lifted off a touch screen.

onTouchCancel [} 444] An interaction with a touch screen was aborted.

Access rights

Name Description

observe [} 444] Determines whether the control is generally

observable.

operate [} 445] Determines whether the control is generally operable.

Inheritance hierarchy

Control [} 419]

Rectangle

Note: Available since version 1.8

See also

API reference [} 1606] for this control