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