Te2000 TC3 Hmi en

Manual | EN
TE2000
TwinCAT 3 | HMI Engineering
2023-02-09 | Version: 2.5.1

Table of contents
Table of contents
1 Foreword .................................................................................................................................................... 9
1.1 Notes on the documentation ............................................................................................................. 9
1.2 Safety instructions ........................................................................................................................... 10
1.3 Notes on information security.......................................................................................................... 11
2 Overview .................................................................................................................................................. 12
2.1 Product description ......................................................................................................................... 12
2.2 Scenarios ........................................................................................................................................ 12
2.3 Architecture ..................................................................................................................................... 16
2.3.1 Engineering ...................................................................................................................... 16
2.3.2 Client/Server .................................................................................................................... 16
2.4 Business model ............................................................................................................................... 17
3 Installation ............................................................................................................................................... 18
3.1 System requirements ...................................................................................................................... 18
3.2 Version overview ............................................................................................................................. 19
3.2.1 Modifications .................................................................................................................... 20
3.3 Installation ....................................................................................................................................... 20
3.4 Licensing ......................................................................................................................................... 23
4 Quick start ............................................................................................................................................... 29

4.1 Creating a new project .................................................................................................................... 29
4.2 HMI Engineering interface............................................................................................................... 34
4.3 Adding controls ............................................................................................................................... 36
4.4 Adding events ................................................................................................................................. 37
4.5 Adding an internal variable.............................................................................................................. 38
4.6 Creating a data binding ................................................................................................................... 38
4.7 Navigation concept.......................................................................................................................... 41
4.7.1 Creating navigation .......................................................................................................... 41
4.8 Change the language ...................................................................................................................... 41
4.8.1 Adding a new language.................................................................................................... 41
4.8.2 Doing translations in the Localization editor..................................................................... 43
4.8.3 Switching the language .................................................................................................... 44
4.9 User Control .................................................................................................................................... 44
4.9.1 Creating a User Control ................................................................................................... 44
4.10 Installing packages.......................................................................................................................... 48
5 Development environment ..................................................................................................................... 49

5.1 Solution Explorer ............................................................................................................................. 51
5.1.1 Project properties ............................................................................................................. 51
5.2 Designer .......................................................................................................................................... 54
5.2.1 Graphic editor:.................................................................................................................. 55
5.2.2 HTML editor ..................................................................................................................... 56
5.2.3 Changing default settings................................................................................................. 57
5.3 Properties ........................................................................................................................................ 58
5.4 Actions and Conditions Editor ......................................................................................................... 59
5.4.1 General ............................................................................................................................ 61
TE2000 Version: 2.5.1 3

Table of contents
5.4.2 Controls............................................................................................................................ 67
5.4.3 Functions.......................................................................................................................... 68
5.4.4 Action Templates ............................................................................................................. 69
5.5 Document Outline ........................................................................................................................... 72
5.6 LiveView .......................................................................................................................................... 72
5.7 TwinCAT HMI Configuration ........................................................................................................... 75
5.7.1 Server symbols ................................................................................................................ 77
5.7.2 Internal symbols ............................................................................................................... 85
5.7.3 Localizations .................................................................................................................... 86
5.7.4 Data types ........................................................................................................................ 87
5.7.5 Parameter ........................................................................................................................ 95
5.7.6 Controls............................................................................................................................ 96
5.7.7 Global Events................................................................................................................... 97
5.7.8 Functions.......................................................................................................................... 98
5.7.9 Files.................................................................................................................................. 99
5.7.10 Users and user groups................................................................................................... 100
5.7.11 Client certificates............................................................................................................ 100
5.7.12 Action Templates ........................................................................................................... 101
5.7.13 Recipe management ...................................................................................................... 101
5.7.14 Permissions Management.............................................................................................. 102
5.8 Localization editor ......................................................................................................................... 102
5.9 Symbols and Bindings................................................................................................................... 103
5.9.1 Create binding................................................................................................................ 104
5.9.2 Create function binding .................................................................................................. 106
5.9.3 Configure binding ........................................................................................................... 107
5.10 Controls ......................................................................................................................................... 109
5.10.1 General configuration..................................................................................................... 111
5.10.2 Beckhoff ......................................................................................................................... 119
5.10.3 System ........................................................................................................................... 690
5.10.4 User controls .................................................................................................................. 780
5.10.5 Framework controls........................................................................................................ 780
5.10.6 Control rights.................................................................................................................. 780
5.10.7 BaseTemplate ................................................................................................................ 780
5.10.8 Responsive navigation ................................................................................................... 809
5.11 Functions....................................................................................................................................... 850
5.11.1 Binding ........................................................................................................................... 850
5.11.2 Data Conversion ............................................................................................................ 852
5.11.3 Diagnostics..................................................................................................................... 860
5.11.4 Formatting ...................................................................................................................... 861
5.11.5 Locale............................................................................................................................. 863
5.11.6 Recipe ............................................................................................................................ 865
5.11.7 Theme ............................................................................................................................ 868
5.11.8 UserManagement........................................................................................................... 869
5.12 Publishing...................................................................................................................................... 874
5.12.1 Autostart Server ............................................................................................................. 877
5.12.2 Autostart Client............................................................................................................... 878
4 Version: 2.5.1 TE2000

Table of contents
5.13 Server configuration ...................................................................................................................... 880

5.14 Gallery Explorer ............................................................................................................................ 881
5.15 TwinCAT HMI Toolbar................................................................................................................... 882
5.16 TwinCAT HMI Items ...................................................................................................................... 884
6 User management ................................................................................................................................. 887

6.1 Users and user groups .................................................................................................................. 887
6.1.1 Create new user............................................................................................................. 887
6.1.2 Changing user properties............................................................................................... 889
6.1.3 Activate auto-login user.................................................................................................. 889
6.1.4 Deleting a user ............................................................................................................... 890
6.1.5 Creating a new user group............................................................................................. 890
6.1.6 Changing user group properties..................................................................................... 891
6.1.7 Deleting a user group..................................................................................................... 892
6.1.8 System users and system user groups .......................................................................... 892
6.2 Permissions system ...................................................................................................................... 893
6.2.1 Control level ................................................................................................................... 893
6.2.2 Symbol level................................................................................................................... 897
6.2.3 File level ......................................................................................................................... 899
6.3 Access management in the client ................................................................................................. 900
6.4 Login page .................................................................................................................................... 901
6.4.1 Add login page ............................................................................................................... 902
6.4.2 Switch login page ........................................................................................................... 903
6.4.3 Edit login page ............................................................................................................... 904
6.5 User administration in LiveView .................................................................................................... 907
6.6 User management in the client ..................................................................................................... 910
6.7 Client certificates ........................................................................................................................... 910
6.7.1 Creating a Client Certificate ........................................................................................... 911
6.7.2 Assigning a Client Certificate ......................................................................................... 912
6.7.3 Activating Client Certificates .......................................................................................... 913
6.7.4 Installing the Client certificate ........................................................................................ 914
7 Event system ......................................................................................................................................... 922

7.1 TcHmiEventlogger extension ........................................................................................................ 922
7.2 Event Grid Control......................................................................................................................... 924
8 Internationalization ............................................................................................................................... 928

8.1 Change the language .................................................................................................................... 928
8.2 Unit conversion ............................................................................................................................. 928
8.3 Localization ................................................................................................................................... 929
8.4 Keyboard layouts .......................................................................................................................... 929
9 Themes................................................................................................................................................... 934
9.1 Introduction ................................................................................................................................... 934
9.2 Theme editor ................................................................................................................................. 936
9.2.1 Class theme ................................................................................................................... 937
9.2.2 Control theme................................................................................................................. 940
9.2.3 CSS theme..................................................................................................................... 941
9.3 Theme switching ........................................................................................................................... 943
TE2000 Version: 2.5.1 5

Table of contents
9.4 Concept ......................................................................................................................................... 945

9.4.1 Attribute levels................................................................................................................ 947
9.4.2 Element levels................................................................................................................ 947
10 Historical data ....................................................................................................................................... 949

10.1 TcHmiSqliteHistorize extension .................................................................................................... 949
10.2 Trend Line Chart Control............................................................................................................... 951
11 Package management .......................................................................................................................... 956

11.1 Versions 1.8 and 1.10 ................................................................................................................... 956
11.1.1 Creating a package ........................................................................................................ 957
11.1.2 Installing a package ....................................................................................................... 961
11.1.3 Uninstalling a package ................................................................................................... 963
11.1.4 Updating a package ....................................................................................................... 965
11.2 Version 1.12 .................................................................................................................................. 965
11.2.1 Installing a NuGet package ............................................................................................ 966
11.2.2 Uninstalling a NuGet package........................................................................................ 969
11.2.3 Updating a NuGet package............................................................................................ 970
11.2.4 Creating a NuGet package............................................................................................. 972
11.2.5 Support for TwinCAT HMI packages.............................................................................. 975
12 Recipe management ............................................................................................................................. 977

12.1 Recipe Management Extension .................................................................................................... 978
12.2 Management in the engineering.................................................................................................... 978
12.2.1 Create folder .................................................................................................................. 978
12.2.2 Create new recipe type .................................................................................................. 979
12.2.3 Changing the recipe type ............................................................................................... 980
12.2.4 Recipe Type Editor......................................................................................................... 980
12.2.5 Deleting a recipe type .................................................................................................... 985
12.2.6 Creating a new recipe .................................................................................................... 986
12.2.7 Changing the recipe ....................................................................................................... 987
12.2.8 Recipe Editor.................................................................................................................. 987
12.2.9 Delete recipe .................................................................................................................. 989
12.3 Management in the client .............................................................................................................. 989
12.3.1 Example ......................................................................................................................... 990
13 Project Generator .................................................................................................................................. 996

13.1 Base Application Template ........................................................................................................... 996
13.2 Web Navigation Template ........................................................................................................... 1001
13.3 Quick start ................................................................................................................................... 1004
13.3.1 Base Application Template .......................................................................................... 1005
13.3.2 Web Navigation Template............................................................................................ 1008
14 Extensions ........................................................................................................................................... 1011

14.1 Protocols ..................................................................................................................................... 1011
14.1.1 ADS.............................................................................................................................. 1011
14.1.2 OPC UA Client ............................................................................................................. 1017
14.2 TwinCAT Scope .......................................................................................................................... 1021
14.3 TwinCAT Speech ........................................................................................................................ 1027
14.4 TwinCAT Vision........................................................................................................................... 1029
6 Version: 2.5.1 TE2000

Table of contents
15 Server ................................................................................................................................................... 1031

15.1 Configuration side ....................................................................................................................... 1031
15.1.1 TcHmiSrv ..................................................................................................................... 1031
15.1.2 ADS.............................................................................................................................. 1133
15.1.3 TcHmiAlarm ................................................................................................................. 1144
15.1.4 TcHmiEventLogger ...................................................................................................... 1148
15.1.5 TcHmiLua..................................................................................................................... 1150
15.1.6 TcHmiOpcUa................................................................................................................ 1151
15.1.7 TcHmiRecipeManagement........................................................................................... 1161
15.1.8 TcHmiSqliteHistorize.................................................................................................... 1164
15.1.9 TcHmiSqliteLogger....................................................................................................... 1170
15.1.10 TcHmiUserManagement .............................................................................................. 1174
15.1.11 TcHmiEcDiagnostics .................................................................................................... 1176
15.1.12 TcHmiLdap................................................................................................................... 1184
15.2 Server-to-server communication ................................................................................................. 1197
15.2.1 Configure connection ................................................................................................... 1198
15.2.2 Use data points ............................................................................................................ 1201
15.3 Extensions................................................................................................................................... 1202
15.3.1 First steps..................................................................................................................... 1202
15.4 Appendix ..................................................................................................................................... 1205
15.4.1 TcHmiAds return codes................................................................................................ 1205
16 Framework ........................................................................................................................................... 1209

16.1 Script languages in the HMI project ............................................................................................ 1209
16.1.1 Action ........................................................................................................................... 1209
16.1.2 Function ....................................................................................................................... 1213
16.1.3 Code-behind................................................................................................................. 1220
16.2 Extensions................................................................................................................................... 1223
16.2.1 Versions 1.8 and 1.10 .................................................................................................. 1223
16.2.2 Version 1.12 ................................................................................................................. 1269
17 Samples ............................................................................................................................................... 1328

17.1 Controls ....................................................................................................................................... 1328
17.1.1 Barchart........................................................................................................................ 1328
17.1.2 Combobox.................................................................................................................... 1328
17.1.3 Datagrid........................................................................................................................ 1328
17.1.4 Event Grid .................................................................................................................... 1328
17.1.5 Grid .............................................................................................................................. 1329
17.1.6 Linechart ...................................................................................................................... 1329
17.1.7 Scope ........................................................................................................................... 1329
17.1.8 Trend Line Chart .......................................................................................................... 1329
17.2 Recipe management ................................................................................................................... 1329
17.2.1 Version 1.10 ................................................................................................................. 1329
17.2.2 Version 1.12 ................................................................................................................. 1330
18 FAQ....................................................................................................................................................... 1331
18.1 General ....................................................................................................................................... 1331
18.2 Server.......................................................................................................................................... 1331
TE2000 Version: 2.5.1 7

Table of contents
18.3 Client ........................................................................................................................................... 1336

18.4 Communication ........................................................................................................................... 1337
18.5 Framework .................................................................................................................................. 1338
19 Appendix .............................................................................................................................................. 1339

19.1 Return Codes .............................................................................................................................. 1339
19.1.1 ADS Return Codes....................................................................................................... 1339
19.2 Troubleshooting .......................................................................................................................... 1343
19.2.1 Windows error reporting............................................................................................... 1343
19.2.2 Client Console.............................................................................................................. 1343
19.2.3 Engineering server ....................................................................................................... 1343
8 Version: 2.5.1 TE2000

Foreword
1 Foreword
1.1 Notes on the documentation

This description is only intended for the use of trained specialists in control and automation engineering who
are familiar with applicable national standards.
It is essential that the documentation and the following notes and explanations are followed when installing
and commissioning the components.
It is the duty of the technical personnel to use the documentation published at the respective time of each
installation and commissioning.
The responsible staff must ensure that the application or use of the products described satisfy all the
requirements for safety, including all the relevant laws, regulations, guidelines and standards.
Disclaimer
The documentation has been prepared with care. The products described are, however, constantly under
development.
We reserve the right to revise and change the documentation at any time and without prior announcement.
No claims for the modification of products that have already been supplied may be made on the basis of the
data, diagrams and descriptions in this documentation.
Trademarks
Beckhoff®, TwinCAT®, TwinCAT/BSD®, TC/BSD®, EtherCAT®, EtherCAT G®, EtherCAT G10®, EtherCAT P®,
Safety over EtherCAT®, TwinSAFE®, XFC®, XTS® and XPlanar® are registered trademarks of and licensed by
Beckhoff Automation GmbH.
Other designations used in this publication may be trademarks whose use by third parties for their own
purposes could violate the rights of the owners.
Patent Pending
The EtherCAT Technology is covered, including but not limited to the following patent applications and
patents:
EP1590927, EP1789857, EP1456722, EP2137893, DE102015105702
with corresponding applications or registrations in various other countries.
EtherCAT® is a registered trademark and patented technology, licensed by Beckhoff Automation GmbH,
Germany
Copyright
© Beckhoff Automation GmbH & Co. KG, Germany.

The reproduction, distribution and utilization of this document as well as the communication of its contents to
others without express authorization are prohibited.
Offenders will be held liable for the payment of damages. All rights reserved in the event of the grant of a
patent, utility model or design.
TE2000 Version: 2.5.1 9

Foreword
1.2 Safety instructions

Safety regulations
Please note the following safety instructions and explanations!

Product-specific safety instructions can be found on following pages or in the areas mounting, wiring,
commissioning etc.
Exclusion of liability
All the components are supplied in particular hardware and software configurations appropriate for the
application. Modifications to hardware or software configurations other than those described in the
documentation are not permitted, and nullify the liability of Beckhoff Automation GmbH & Co. KG.
Personnel qualification
This description is only intended for trained specialists in control, automation and drive engineering who are
familiar with the applicable national standards.
Description of symbols
In this documentation the following symbols are used with an accompanying safety instruction or note. The
safety instructions must be read carefully and followed without fail!
DANGER
Serious risk of injury!
Failure to follow the safety instructions associated with this symbol directly endangers the life and health of
persons.
WARNING
Risk of injury!
Failure to follow the safety instructions associated with this symbol endangers the life and health of per-
sons.
CAUTION
Personal injuries!
Failure to follow the safety instructions associated with this symbol can lead to injuries to persons.
NOTE
Damage to the environment or devices
Failure to follow the instructions associated with this symbol can lead to damage to the environment or
equipment.
Tip or pointer
This symbol indicates information that contributes to better understanding.
10 Version: 2.5.1 TE2000

Foreword
1.3 Notes on information security

The products of Beckhoff Automation GmbH & Co. KG (Beckhoff), insofar as they can be accessed online,
are equipped with security functions that support the secure operation of plants, systems, machines and
networks. Despite the security functions, the creation, implementation and constant updating of a holistic
security concept for the operation are necessary to protect the respective plant, system, machine and
networks against cyber threats. The products sold by Beckhoff are only part of the overall security concept.
The customer is responsible for preventing unauthorized access by third parties to its equipment, systems,
machines and networks. The latter should be connected to the corporate network or the Internet only if
appropriate protective measures have been set up.
In addition, the recommendations from Beckhoff regarding appropriate protective measures should be
observed. Further information regarding information security and industrial security can be found in our
https://www.beckhoff.com/secguide.
Beckhoff products and solutions undergo continuous further development. This also applies to security
functions. In light of this continuous further development, Beckhoff expressly recommends that the products
are kept up to date at all times and that updates are installed for the products once they have been made
available. Using outdated or unsupported product versions can increase the risk of cyber threats.
To stay informed about information security for Beckhoff products, subscribe to the RSS feed at https://
www.beckhoff.com/secinfo.
TE2000 Version: 2.5.1 11

Overview
2 Overview
2.1 Product description

TwinCAT HMI is a tool for creating HMIs (Human Machine Interfaces). Like TwinCAT, it is integrated directly
into Visual Studio. A graphical WYSIWYG editor is used for the configuration, i.e. no programming is
required.
Controls from the toolbox can be arranged on the user interface and linked with real-time variables, e.g. from
the PLC or from a C++ module. User Controls can be used to graphically create and configure specific
controls. JavaScript developers can develop their own controls. During development, the functionality can be
tested with live data from the real-time system. Modifications are also possible in this live mode.
The logic of the HMI can either be implemented on the client side in JavaScript or as a server extension. A
server extension allows you to develop extensions in C#.
Because the HMI is web-based and responsive - based on HTML5 and JavaScript - the resolution and
orientation adapt automatically. This allows the same page to be used for different display sizes, aspect
ratios and orientations.
2.2 Scenarios
The HMI can be integrated into a wide range of scenarios.
In a network, different controllers can exchange their data with one or more clients. The clients can run on
local PCs or Panel PCs, or on mobile devices such as tablets or smartphones.
12 Version: 2.5.1 TE2000

Overview
Local-Client
Multi-client
An HMI can be configured for different resolutions and can be called up by several devices simultaneously.
TE2000 Version: 2.5.1 13

Overview
Multi-runtime
The TwinCAT HMI can connect several real-time systems. TwinCAT runtimes can be programmed in PLC
languages, C/C++ or MATLAB®/Simulink®.
14 Version: 2.5.1 TE2000

Overview
Multi-protocol
The TwinCAT HMI server can communicate with all TwinCAT runtimes via the ADS extension. Third-party
controllers can be connected via the OPC UA extension. Additional protocols can also be integrated via the
Server Extensions SDK.
Multi-server
The TwinCAT HMI server can communicate with other TwinCAT HMI servers. This enables so-called server-
to-server communication. Server-to-server communication offers the possibility of exchanging any data
points among the servers. This enables, for example, higher-level systems to be created.
TE2000 Version: 2.5.1 15

Overview
2.3 Architecture
2.3.1 Engineering
The TwinCAT HMI integrates into the Visual Studio® development environment from Microsoft. TwinCAT3
provides the free Visual Shell, which can also be used with the TwinCAT HMI. This allows you to develop the
PLC and the HMI in one tool. TwinCAT HMI Creator is an editor for graphical development of the HMI. The
TwinCAT HMI framework comes with predefined controls. Communication with the TwinCAT HMI Server
takes place via secure network connections. The TwinCAT HMI Server has a modular structure. HMI Server
Extensions provide additional functions. Furthermore, you can develop your own customer extensions to
execute non-real-time-relevant business logics centrally in the server. The TwinCAT ADS protocol
(Automation Device Specification) is supported, which enables communication with all TwinCAT devices.
2.3.2 Client/Server
The TwinCAT HMI is essentially based on a client-server architecture. No additional software installation is
required for the TwinCAT HMI Client. It is an HTML5-capable web browser that does not require any
additional extensions. The browser connects to the TwinCAT HMI server, which provides the HMI in a virtual
directory (WWW root). The HMI is passed to the client via HTTP(S) protocol. The HMI project consists of
content such as pages and images and the TwinCAT HMI framework, which is based on JavaScript and
dynamizes the web-based HMI. Among other things, the framework provides the controls and establishes a
secure web socket connection (WS(S)) to the server in order to be able to communicate with it.
16 Version: 2.5.1 TE2000

Overview
The TwinCAT HMI server has a modular structure. Additional functionalities can be provided via server
extensions, such as the messaging system or other protocols. The server supports the TwinCAT ADS
protocol and can therefore communicate with all TwinCAT devices. Third-party systems can be connected
via OPC UA extensions.
2.4 Business model

The business model of the TwinCAT HMI is based on that of TwinCAT 3 XAE. All products can be unlocked
via a 7-day trial license, which can be renewed at any time. Only the TwinCAT HMI server is licensed. No
data points are counted. Only the simultaneous client connections (e.g. browser) and the number of active
targets (controllers) are taken into account. The TwinCAT HMI Server includes a client and a target
connection as standard. Additional TF20x0 packages are available for further connections. Further TF2x00
server extensions can also be licensed optionally.
TE2000 Version: 2.5.1 17

Installation
3 Installation
3.1 System requirements

TE2000 TC3 HMI Engineering:
Technical data Version 1.12

Min. TwinCAT version 3.1.4024.0
Min. TwinCAT level TC1000 TC3 | ADS
Supported Visual Studio® versions 2017 Version >= 15.9 (Community, Professional) with
ASP.NET**
2019 Version >= 16.4 (Community, Professional)
TwinCAT XAE Shell (TcXaeShell)
Operating system Windows 10 (32-/64-bit)
.NET Framework SDK version >= 4.8

Min. TwinCAT version 3.1.4022.0
Min. TwinCAT level TC1000 TC3 | ADS
Supported Visual Studio® versions 2013 Version >= 12.0.40629 with Update 5* (Shell,
Community, Professional)
2015 Version >= 14.0.25431 with Update 3*
(Community, Professional)
2017 Version >= 15.0 (Community, Professional) with
ASP.NET**
TwinCAT XAE Shell (TcXaeShell)
Operating system Windows 7/8/10 (32-/64-bit)
.NET Framework version >= 4.7.2
* Visual Studio® updates can be found via the menu item "Extras/Extensions and Updates".
**ASP.NET can be added through the Visual Studio® Setup process.
TwinCAT HMI Client:

Supported browser versions >= Google Chrome™ 85
>= Mozilla Firefox 80
>= Microsoft Edge 85
>= Apple® Safari® 14

Supported browser versions >= Google Chrome™ 58
>= Mozilla Firefox 53
>= Microsoft Edge 40
Supported mobile browsers >= Google Chrome™ for Android 58
>= Apple® Safari® for iOS 9
18 Version: 2.5.1 TE2000

Installation
Framework control development:

ASP.NET
TwinCAT XAE Shell (TcXaeShell) (JavaScript)

Supported Visual Studio® versions 2013 Version >= 12.0.40629 with Update 5
2015 Version >= 14.0.25431 with Update 3
ASP.NET
Server extension development

ASP.NET
.NET Framework version >= 4.8
.NET (Core) Desktop Runtime >= 3.1

Supported Visual Studio® versions 2013 Version >= 12.0.40629 with Update 5
2015 Version >= 14.0.25431 with Update 3
ASP.NET
.NET Framework version >= 4.7.2
A full version of Visual Studio® is required for developing server extensions. The TwinCAT XAE
Shell is not sufficient.
3.2 Version overview

Version 1.12
Version number Designation

1.12.752.x Version 1.12 Release 6
TE2000 Version: 2.5.1 19

Installation
Version 1.10

Version 1.8

1.8.861.0 Version 1.8 Release 4
3.2.1 Modifications
Note that there may be small differences in behavior between different versions. If this requires a
change when using the newer version, this is documented below.
Differences between version 1.10 and version 1.12

• Due to performance optimizations, the time behavior when loading Content [} 728] pages has
changed.
• From version 1.12, multiple control classes can exist with the same type name. In rare cases, custom
code must be adapted. The details [} 1269] are documented separately.
3.3 Installation
The TwinCAT 3 function for Windows-based operating systems is installed step-by-step.
1. Close all running Visual Studio instances so that the setup can integrate into the installed Visual Studio
environments.
2. Double-click the downloaded file TE2000-HMI-Engineering.
Start the installation under Windows with "Run As Admin" by right-clicking the setup files and selecting
the corresponding option in the context menu.
3. Select the language to guide you through the installation.
20 Version: 2.5.1 TE2000

Installation
4. Click on Next and then accept the end user agreement.
5. Enter your user data.
TE2000 Version: 2.5.1 21

Installation
6. Start the installation and click Install.
7. If not all Visual Studio instances are closed, the setup will pause.
8. Please close all Visual Studio instances and click Retry.
22 Version: 2.5.1 TE2000

Installation
9. Select Finish to exit the setup.
ð The installation is complete and the TE2000 HMI Engineering is integrated into the Visual Studio
environment with its own project templates.
3.4 Licensing
If no TF2000 HMI server license is available on the Engineering system when a TwinCAT HMI project is first
created, a 7-day test license can be generated. The suggested character string must be typed and confirmed
with OK.
TE2000 Version: 2.5.1 23

Installation
The trial license can be renewed at any time after it has expired.
Licensing a full version

1. Start TwinCAT XAE
2. Open an existing TwinCAT 3 project or create a new project
3. In the Solution Explorer, navigate to the entry SYSTEM/License
24 Version: 2.5.1 TE2000

Installation
4. Open the Manage Licenses tab and add a Runtime License for your product (in this screenshot
TF2000: TC3 HMI Server).
5. Optional: If you wish to add the license for a remote device, you must first connect to this device via the
TwinCAT XAE toolbar
6. Open the Order Information

tab. The System ID and HW Platform fields cannot be changed. They describe the platform to be
licensed. In general, a TwinCAT 3 license is bound to two key figures:
The System ID uniquely identifies your device.
The HW platform is a key figure for the performance of the device.
TE2000 Version: 2.5.1 25

Installation
7. Optionally, you can enter your own order number and a comment for your own needs
8. On the Order Information tab, click the Generate License Request File... button to generate a license
request file that is validated by a Beckhoff license server (if you do not know your Beckhoff License ID ,
contact your Beckhoff sales representative).
9. After you have saved the License Request File, the system asks whether the file should be sent to the
Beckhoff license server by email:
10. If you confirm the dialog with Yes, your default email client opens and creates a new email for
[email protected] containing the license request file.
11. Send this activation request to Beckhoff
The License Response File is sent to the same email address that sent the License Request File.
26 Version: 2.5.1 TE2000

Installation
12. Shortly afterwards, you will receive a license file from the Beckhoff license server.
Import the file via the Activate License Response File... button to activate the product
13. Select the License Response File you received in your folder system
14. The License Response File is imported and all licenses contained in it are activated (all affected demo
licenses are removed)
TE2000 Version: 2.5.1 27

Installation
15. Restart TwinCAT to activate the license
ð The license file is automatically copied to your local hard disk under ...\TwinCAT\3.1\Target\License.
28 Version: 2.5.1 TE2000

Quick start
4 Quick start
4.1 Creating a new project

VS2017 / VS2019 / TwinCAT XAE Shell (menu)
ü Start Visual Studio® or the TwinCAT XAE Shell.
1. Click File > New > Project.
TE2000 Version: 2.5.1 29

Quick start
2. Select a project template.
3. Confirm your selection with OK.

ð With this you have created a new project.
VS2017 / VS2019 / TwinCAT XAE Shell (start page)

30 Version: 2.5.1 TE2000

Quick start
1. Select a project template
2. Confirm your selection with OK.

ð With this you have created a new project.
TE2000 Version: 2.5.1 31

Quick start
VS2019 (dialog)
32 Version: 2.5.1 TE2000

Quick start
1. Select a project template.
The following project templates are available for selection:
HMI:
• TwinCAT HMI Project
• TwinCAT HMI Project Generator [} 996] (Quick Start [} 1004])
HMI Framework:
• TwinCAT HMI Framework Project [} 1269]
• TwinCAT HMI Framework Project Empty [} 1269]
HMI Server Extension:

• TwinCAT HMI Empty Server Extension (CSharp / .NET Core) [} 1202]
• TwinCAT HMI Empty Server Extension (CSharp) [} 1202]
• TwinCAT HMI Server Extension Reflection (CSharp) [} 1202]
TE2000 Version: 2.5.1 33

Quick start
4.2 HMI Engineering interface
1 Solution Explorer
The Solution Explorer displays the HMI project tree. It is possible to add and manage various project types in
one Solution. For example, it is possible to add a TwinCAT 3 project to the same Solution as a TwinCAT HMI
project.
2 Toolbox
The Toolbox contains all the available visualization elements, known as controls. These can be added to the
graphic editor of the designer ⑤ by drag-and-drop. A predefined set of controls is supplied with the TwinCAT
HMI.
3 Properties
The Properties window displays various properties depending on the object that is selected. The selected
object could be a visualization control in the graphic editor of the Designer ⑤ or the Document Outline
respectively, or it could be an object in the Solution Explorer ①.
If you have selected a visualization control there are three different views between which you can switch
using the following buttons:
The left button (wrench) displays the general view with the various properties of this control. The central
button (lightning bolt) displays all available events and the right button (lock) is for viewing the access rights
to this control.
34 Version: 2.5.1 TE2000

Quick start
4 Document Outline (Standard VS tool window)
The Document Outline displays an overview of all the controls that have been added to the Designer ⑤. As
in the graphic editor, individual elements can be selected directly in the Document Outline, for example in
order to change their properties in the Properties window. Controls can also be moved in the Document
Outline, for example into or out of a container.
5 Designer
The Designer is the front-end development tool and is divided into two editors – a graphic editor in which
controls can be added from the Toolbox ② by drag-and-drop and then changed in the Properties window ③,
and a code editor. The code is generated automatically in the background and can be directly and
synchronously edited. In the top right-hand corner there are two buttons ⑨ for switching between these two
editors. The three buttons in the bottom right-hand corner ⑪ are used to display both editors at the same
time and to select the arrangement of the windows.
There are various quick-access buttons ⑩ on the right-hand side. With these buttons you can open the
Document Outline ④, the TwinCAT HMI Configuration ⑥, the TwinCAT HMI Gallery Explorer ⑦ and the
TwinCAT HMI LiveView ⑧.
6 TwinCAT HMI Configuration
The configuration is the central TwinCAT HMI tool window, where you can access all available types of
symbols (e.g. server symbols, internal symbols and localizations) and the User Management settings.
7 TwinCAT HMI Gallery Explorer
The Gallery Explorer contains predefined graphics that can be added directly to the graphic editor or to the
Solution tree by drag-and drop.
TE2000 Version: 2.5.1 35

Quick start
8 TwinCAT HMI LiveView
In the LiveView the visualization can be tested directly online without having to download the changes first. It
can be started as an additional tool window inside Visual Studio (left-hand tab) or in a web browser by URL
link (right-hand tab).
4.3 Adding controls

1. Open the Designer.
2. Switch to the Toolbox.
3. Drag and drop a control into the graphic editor.
36 Version: 2.5.1 TE2000

Quick start
4.4 Adding events

All available events can be found in the Event view of the Properties window ③, divided into four categories.
• All user-specific events (e.g. change of a symbol) are listed in the "Custom" category.
• All events generated by the system are listed in the "Framework" category.
• All events that interact with the operator are listed in the "Operator" category.
• All events that only this control has at its disposal are listed in the "Control" category.
You can add a logical operation to each event that will be executed automatically if the event occurs. To add
a logical operation, select one of the events and click on the pencil button:
The "Actions and Conditions [} 59]" dialog opens, a graphic editor for implementing your logical operation.
You can also double-click on the control to implement a standard event. In the case of a button, for example,
the standard event would be "is pressed".
The editor consists of a left-hand and a right-hand part. In the left-hand part, all predefined actions are
available in a tree view. The right-hand part is a graphic editor into which the actions and functions can be
dragged and dropped.
There are four different categories in the Toolbox:

• General: General actions and conditions that are not directly assigned to a control
• Controls: All controls that are available within the scope. All properties are listed underneath each
control.
• Controls (Out of scope): These controls are not in the current scope.
• Functions: Various functions that can also be used within the editor
In case a special logical operation is to be used several times you can build your own templates, which can
then be found later in the Toolbox under the category "Action templates [} 69]". You can manipulate the
Action Templates with the menu bar of the Toolbox, e.g. add, edit, delete, copy and paste. The Action
Templates dialog has the same base functions as the "Actions and Conditions" editor, plus a name box and
an area for editing the template parameters.
TE2000 Version: 2.5.1 37

Quick start
4.5 Adding an internal variable

1. Open the configuration window [} 75].
2. Switch to the "Internal Symbols [} 85]" tab.
3. Click on the New Symbol button , double-click on create new internal symbol or drag create
new internal symbol onto the desired destination.
4. Enter the data type, a symbol name and a default value.
4.6 Creating a data binding

There are three different ways to create a data binding, i.e. mapping a symbol to an entry in the Properties.
Create a data binding via "Select Binding Source"

1. Select the control whose property you wish to map.
2. Open the Properties and select the correct entry.
38 Version: 2.5.1 TE2000

Quick start
3. The first way is to use the dialog Select Binding Source. To do this, click on the button to the right of
the property of the entry.
4. then select Create data binding
ð The window Select Binding Source opens.
TE2000 Version: 2.5.1 39

Quick start
5. In the dialog Select Binding Source you will find all types of available symbols on the various tabs:
Server symbols: all symbols that are available on the server under the ADS entry, e.g. the PLC variables.
Internal symbols: all internal symbols that have been created in the Configuration [} 77] (see: Adding an
internal variable [} 38])
Localizations: Localization symbols, i.e. the localized text entries that you have created in the Localization
editor [} 86].
Mapped symbols: Server symbols that are already mapped and are available in the engineering (e.g. Data
Binding).
Controls: Each control has different properties whose values can be set or read.
Creating a data binding by drag-and-drop.
You can drag and drop a symbol from the Configuration ⑥ into the Properties input box:
40 Version: 2.5.1 TE2000

Quick start
Creating a data binding for already mapped symbols
If the symbol is already mapped, you can enter the name of the symbol directly in the Properties field. In this
case an autocomplete function is available.
4.7 Navigation concept

The desktop view is the start page for the application on which you can create your visualization. A good
method of increasing the tidiness is to split the visualization into various parts. To do this, divide it into
various content objects. These content objects can be displayed in different areas of the desktop view. For
example, the visualization could be divided into three areas in the desktop view: a status bar ⑬, a content
area ⑭ and a navigation bar area ⑮. Various content objects can be displayed in the content area during
the runtime. The contents of the status bar area and the contents of the navigation bar area can also be
changed.
4.7.1 Creating navigation

1. Switch to the Solution Explorer.
2. Add the desired number of content objects:
2.1 Right-click on the TwinCAT HMI project entry or on one of the folders.
2.2 Select Add and New Item and select Content.
3. Open the view or the content where you wish to add the navigation.
4. Add a region and buttons in order to switch between the contents.
5. Set the Target Content attribute in order to define the start content.
6. Add a SetTargetContent action to the .onPressed event of all buttons and set the corresponding content.
4.8 Change the language

Localized texts are defined in the TwinCAT HMI by key/value pairs. Several translations can be added for
each key. Each language can be edited in the Localization editor.
4.8.1 Adding a new language

To add a new language, create a new localization object.
1. Right-click on the Localization folder.
TE2000 Version: 2.5.1 41

Quick start
2. Select Add / New Item
3. Select Localization and click on Add
ð The TwinCAT HMI Wizard starts
42 Version: 2.5.1 TE2000

Quick start
4. Select a language and click on Create
ð The Localization editor starts
4.8.2 Doing translations in the Localization editor

The Localization editor has a column for the key and another for the translation. You can display all available
languages in the same editor. To do this, right-click on the column header and select one of the languages in
the drop-down menu.
In the upper area of the editor there is a toolbar that offers the following options:
TE2000 Version: 2.5.1 43

Quick start
• Export or import data to or from an Excel file
• Delete entry
• Drop-down menu default language
• Search or delete search
You can create a new entry in the red and gray shaded row with a double click.
4.8.3 Switching the language

For language switching there is a special control called Localization Select [} 423].
Alternatively, you can use the SetLocaleEx [} 864]-action in the dialog "Actions and Condition [} 59]" to
switch between different languages.
For example, you could use two buttons to switch between two languages. The ".onPressed" event of the
buttons would be used to call the SetLocalEx action and to change the corresponding language.
4.9 User Control

It is possible in a User Control to swap out part of the visualization to a new control in order to be able to
reuse it more easily. This control can be designed as a general module with the help of parameter values.
4.9.1 Creating a User Control

A User Control is an object type of its own.
1. Right-click on the TwinCAT HMI project or on a folder
44 Version: 2.5.1 TE2000

Quick start
2. Select Add / New Item and UserControl.
3. The User Control editor appears. It is very similar to the Designer, except that there is additionally a
parameter editor (P button) on the right-hand side for quick access.
4. Drag a control out of the toolbox into the User Control editor
5. Click on P to open the Parameter editor.
6. Enter the name of the parameter in the dialog Edit/Define Parameters. The "Display Name" is
generated automatically after the parameter name has been entered.
7. In the Data type column, select the data type from a drop-down menu. If the data type is a structure,
select the corresponding structure type in the Options column.
TE2000 Version: 2.5.1 45

Quick start
8. In the Bindable column, define whether the parameter may be mapped to a symbol later on.
ð You can now use the newly created parameters inside the User Control with their mapping properties
(see Creating a data binding [} 38]).
As a simple example, the illustration below shows the properties of an added User Control whose size is 100
x 130 pixels.
Two text blocks have been added to this User Control, each bound to a parameter of the type String (see
⑯).
46 Version: 2.5.1 TE2000

Quick start
The User Controls that were added to the project are now available via the Toolbox; you can add them to the
Designer by drag-and-drop. The parameters have been added to the properties of the User Control and are
displayed in the Properties window ⑱. If they were created as bindable it is also possible to map them to a
symbol.
TE2000 Version: 2.5.1 47

Quick start
4.10 Installing packages

In versions 1.8 and 1.10, most server extensions or TwinCAT HMI controls were already included in a new
HMI project. In version 1.12, the new package management based on NuGet allows you to install only those
extensions that you actually need. This allows a more flexible and modular structure of the HMI project. If, for
example, you want to use recipe management or the historization of data, you have to install the
corresponding NuGet package in the project. For further details please refer to "Installing a NuGet package
[} 966]".
48 Version: 2.5.1 TE2000

Development environment
5 Development environment
The development environment of the TwinCAT HMI consists of the following windows:
• Solution Explorer [} 51]
• Document Outline [} 72]
• Designer [} 54]
• HMI LiveView [} 72]
• Toolbox [} 109]
• Properties [} 58]
• HMI Configuration [} 75]
• Gallery Explorer [} 881]
• Server Configuration [} 880]
The development environment can be configured via global settings. To do this, click on the tab Tools in the
menu and select the entry Options.
TE2000 Version: 2.5.1 49

Then navigate to the category TwinCAT - HMI Environment. There you can change the default settings of
the HMI development environment.
50 Version: 2.5.1 TE2000

Changing the default settings of the development environment applies globally to all instances of
the development environment and cannot be saved on a project-by-project basis.
5.1 Solution Explorer

The Solution Explorer manages all available projects in a Solution. After creating a new TwinCAT HMI
project the following project structure is constructed:
1. TcHmiProject: The project node offers access to the Project Settings [} 51].
2. Server: The server node contains the Server Settings [} 880] and lists the loaded server extensions.
3. Framework: The framework node enables the referencing of Framework Controls [} 1223].
4. Properties: Lists the internal configuration files of the project.
◦ Default.tpl: Template file used for the generation of the HTML code.
◦ tchmi.framework.Schema.tpl.json: Contains the type information for the framework.
◦ tchmi.project.Schema.tpl.json: Contains the type information for the project.
◦ tchmiconfig.tpl.json: Contains the configuration of the project.
◦ tchmimanifest.json: Manifest file of the project.
◦ tchmipublish.config.json: Contains the publish profile [} 874] of the project.
5. References: Offers the option to reference TwinCAT HMI packages.
6. Imports: Folder for contents such as images or videos that are added dynamically (e.g. by drag-and-
drop via the Gallery Explorer).
7. Themes: The folder contains all themes [} 934] that have been added to the project.
8. Fonts: This folder contains fonts that apply irrespective of the theme.
9. Images: Folder for images.
10. Localization: This folder contains the language files required for the project.
11. Desktop.view: The start page that is displayed when starting the HMI.
12. FavIcon.ico: The icon displayed in the title bar of the browser.
5.1.1 Project properties

Following the selection of the HMI project node the properties of the HMI project are displayed in the
Properties window.
TE2000 Version: 2.5.1 51

Explanations:
• Creation: Date and time when the setup of the TwinCAT HMI was created.
• Product Version: Version no. of the TwinCAT HMI.
• Device IP: Local IP address.
• TcHmiSrv's Port: Port number of the server on which a client can reach the server via HTTP(S).
52 Version: 2.5.1 TE2000

• WebSocket Router's Port: WebSocket port number required for the WebSocket connection between
an HMI client and the server instance.
• Default Viewport Height: Default value for the height of a Viewport when a new HMI page is added.
Various resolutions of the HMI can be simulated via the Viewport.
• Default Viewport Width: Default value for the width of a Viewport when a new HMI page is added.
Various resolutions of the HMI can be simulated via the Viewport.
• Interval: Global update rate [ms] for refreshing the HMI server symbols.
• Subscription Mode: Update mode between server and client.
◦ Change: The client is only informed of changes to the symbol values.
◦ Poll: The client receives the symbol value cyclically, even if no change has taken place.
• Theme Name: Name of the active theme (in engineering and of the initially active theme in the client).
• Timeout: WebSocket timeout for communication between server and client.
• Title: Title of the HMI, which is displayed in the browser (tab).
• Verbose Level:
◦ 0 = no messages
◦ 1 = error messages only
◦ 2 = error messages and warnings
◦ 3 = error messages, warnings and infos
◦ 4 = error messages, warnings, infos and debug messages
• Version: Version number of this project.
• Company Name: Optional name of the company providing or using the HMI.
• Company's Website: URL of the company providing or using the HMI.
• Login Page: Login page of the HMI, which is displayed when authentication is active.
• Scale Mode: Scaling mode of the HMI. This setting only applies if the Viewport is configured with
absolute values (pixel specifications).
◦ ScaleToFit: The width or height of the HMI is scaled to the current size of the browser window
without a scrollbar appearing.
◦ ScaleToWidth: The height is scaled accordingly to the width (while maintaining the aspect ratio
with scrollbar).
◦ ScaleToHeight: The width is scaled accordingly to the height (while maintaining the aspect ratio
with scrollbar).
◦ ScaleToFill: The height and width are stretched to the maximum width and height of the browser
window (the aspect ratio is not maintained).
• Startup View: The start page (View) of the HMI, which is loaded when opening the HMI in the browser.
• Framework Binaries: Local directory from which the components of the framework are provided.
• Server Binaries: Local directory from which the components of the server are provided.
• LOG_DESIGNER_MODE_COM_MESSAGES: Defines whether the communication between Visual
Studio and the Designer is to be displayed.
• LOG_TCHMISERVER_MESSAGES: Defines whether the communication of the TcHmi server is to be
displayed.
• Project File: The name of the project file.
• Project Folder: Absolute storage location of the project.
• Default Language: Default language that is loaded for the HMI project. This setting can be overwritten
by the settings per user or switched in the client.
• Time Format Locale: Time format of the currently set time zone that is loaded for the HMI project.
This setting can be overwritten by the setting per user.
• Time Zone: Time zone that is loaded for the HMI project. This setting can be overwritten by the setting
per user.
• Viewport (meta attribute): Meta attributes that define the scaling behavior and adaptability of the HMI.
TE2000 Version: 2.5.1 53

5.2 Designer
The Designer is the front-end development tool of the HMI. It is divided into two editors – a graphic editor
and a code editor. The code is generated automatically behind the graphic editor and can be directly edited.
In the top right-hand corner there are three buttons for switching between these two editors or - if both
are displayed - swapping the views.
The three buttons in the bottom right-hand corner are used to display both editors at the same time and
to select the arrangement of the windows (horizontal or vertical).
There are various quick-access buttons on the right-hand side. With these buttons you can open the
Document Outline window, the TwinCAT HMI Configuration window, the TwinCAT HMI Gallery Explorer G
and the TwinCAT HMI LiveView L.
54 Version: 2.5.1 TE2000

5.2.1 Graphic editor:
You can design your interface in the graphic editor of the Designer. To do this, drag controls from the
Toolbox and drop them into the editor. The automatically assigned names and sizes of the controls are
displayed. You can set all properties in the Properties window.
If controls overlap in the editor, you can define which should be in the foreground and which in the
background with a right mouse click. (Note: this changes the attribute Z-Index [} 711])
Control selection
A control can be selected by mouse click. This control is additionally selected if the Ctrl key on the keyboard
is pressed simultaneously.
It is also possible to mark several controls with a selection frame. You can draw this frame by left-clicking
next to all the controls and then moving the mouse. If the Ctrl key is pressed, the frame is also drawn within
a container, otherwise the container would be moved.
TE2000 Version: 2.5.1 55

All controls that touch the rectangular frame are selected after releasing the mouse button. If the Alt key is
pressed, then only those controls that are completely enclosed are selected. Here too, it is possible to select
additional controls using the Ctrl key.
Positioning aid
With the control trap you can align controls alongside others and lock them in position.
This function can be deactivated with the Alt key.
If you hold the Shift key down when moving a control, it will only be moved horizontally or vertically.
If you hold the Shift key down when enlarging a control at the corner, the aspect ratio will be kept constant.
If you press the Ctrl key you can copy one or more controls – even into another container.
5.2.2 HTML editor
In the HTML editor you can edit directly and check the code generated. Designer and HTML editor work
synchronously.
56 Version: 2.5.1 TE2000

5.2.3 Changing default settings

In the global settings of the development environments, you can change the default settings of the Designer
(e.g. highlight colors). To do this, click on the tab Tools in the menu and select the entry Options.
Then navigate to the category TwinCAT - HMI Environment - Designer. There you can change the default
settings of the Designer.
TE2000 Version: 2.5.1 57

Changing the default settings of the Designer applies globally to all instances of the development
environment and cannot be saved on a project-by-project basis.
Available from version 1.12.742.0
5.3 Properties
The Properties window displays various properties depending on the object that is selected. The selected
object can be a control in the graphic editor or an object in the Solution Explorer.
The name and symbol of the control are displayed in the Identifier field. If you have selected a control there
are three different views between which you can switch with the following buttons:
The left-hand button (wrench) displays the general view with the various properties of this control:
58 Version: 2.5.1 TE2000

The central button (lightning bolt) displays all available events:
The right-hand button (lock) displays the access rights [} 780] to this control:
5.4 Actions and Conditions Editor

The Actions and Conditions Editor allows you to configure control events. To open the Actions and
Conditions Editor, select a control and click on the events in the Properties window.
TE2000 Version: 2.5.1 59

There are several areas here in which various events of the control can be configured:
• Framework: This covers events that are triggered from the system and concerns the life cycle of the
control (init, attach, detach, destroy) as well as changes of size (resize) or movements (moved).
• Operator: These are events that are triggered by the operator, for example click, double-click.
• Control: Many controls trigger events. These are, for example, a change in a state symbol of a button
or the time at which the loading of an image was completed.
• Custom: Further events are possible here. Here, any icon can be entered or selected from the context
menu. If its value changes, an action is executed. The configuration of TwinCAT Speech [} 1027] events
is also possible here.
Clicking the Edit icon (pen) opens the Actions and Conditions Editor for the event associated with the
selected control.
60 Version: 2.5.1 TE2000

The actions are listed in the left part of the editor. The right part is a graphic editor into which the actions can
be moved by dragging and dropping.
The toolbox is divided into different categories:

• General [} 61]: General actions and conditions that are not directly assigned to a control.
• Selected Control: Properties of the selected control that can be changed during runtime.
• Controls [} 67] (in scope): All available controls on the same HMI side as the control. The properties
of the control that can be changed during runtime are listed below the control.
• Controls (Out of scope): The controls that are not on the same HMI side as the control.
• Functions [} 68]: Various functions that can also be used within the editor.
• Action Templates [} 69]: Defined templates for actions that can be reused.
You can perform the following actions in the Actions and Conditions Editor:
Add an Action Template
Edit an Action Template
Delete an Action Template
Copy an Action Template
Expand/collapse folder
5.4.1 General
The general actions can be used independently of a control.
TE2000 Version: 2.5.1 61

5.4.1.1 Condition
A condition is an If statement within the Actions and Conditions Editor.
Explanations:
1 Condition: Condition of the If statement. A Binding [} 104] to a symbol can be created.
2 Comparison operator: Comparison operator of the If statement. The selection is made via the combo box
(==, !=, >=, >, <=, <).
3 Comparison value: Comparison value of the If statement. A Binding [} 104] to a symbol can be created.
4 Add a condition: Click the button to add another condition to the If statement.
5 Logical operator: Logical operator between the conditions. The selection is made via a combo box (AND,
OR).
6 Remove condition: Click the button to remove a previously added condition.
7 Then branch: Then branch of the If statement that is executed if the condition is met.
62 Version: 2.5.1 TE2000

8 Or branch: Or branch of the If statement that is executed if the condition is not met.
5.4.1.2 SwitchCase
A SwitchCase statement refers to a case distinction within the Actions and Conditions Editor.
Explanations:
1 Condition: Condition of the case distinction. A Binding [} 104] to a symbol can be created.
2 Add case: Click the button to add another case to the case distinction.
3 Case: Individual case that is compared with the condition. A Binding [} 104] to a symbol can be created.
4 Then branch: This branch is executed if the case meets the condition.
5 Remove case: Click the button to remove a previously added case.
6 Default branch: This branch is executed if no case meets the condition.
5.4.1.3 WriteToSymbol
The WriteToSymbol action writes any value to a symbol (server symbol [} 77], internal symbol [} 85]) or to
a control [} 109] property.
TE2000 Version: 2.5.1 63

Explanations:
1 Symbol: Symbol or control property to be written to. A binding [} 104] is required.
2 Value: Value to be written to the symbol. A binding to another symbol or a control property can be created.
5.4.1.4 JavaScript
A JavaScript action consists of JavaScript code and enables the execution of simple JavaScript functions.
5.4.1.5 CreateBinding
The CreateBinding action creates a binding [} 104] to a control property at runtime.
Explanations:
64 Version: 2.5.1 TE2000

1 Target: The control property for which the binding is to be created.
2 Expression: Expression (symbol [} 77], control property [} 109] or localized text [} 86]) to be bound to
the target.
As of version 1.10.1336.0, this functionality is taken over by the createBinding [} 851] function.
5.4.1.6 RemoveBinding
The RemoveBinding action removes a binding from a control property at runtime.
Explanations:
1 Target: Control property from which the binding [} 104] is to be removed.
From version 1.10.1336.0, this functionality is taken over by the removeBinding [} 851] function.
5.4.1.7 Comment
The comment action inserts a comment in the Actions and Conditions Editor. The comment is used for
information or as a structuring aid with more complex logics and is not interpreted during runtime.
TE2000 Version: 2.5.1 65

5.4.1.8 Feedback from actions

All actions in the Actions and Conditions Editor can provide feedback on the success of the action. A
"Success" and an "Error" branch can be displayed for each action by right-clicking on it.
Explanations:
• The "Success" branch is called if the action was executed without errors. For JavaScript code
containing a context object [} 1212], the context object must return "Success".
• The "Error" branch is called if an exception occurs during execution of the action. For JavaScript code
that contains a context object, the "Error" branch is called if an exception or an "Error" message of the
context object occurs.
66 Version: 2.5.1 TE2000

• With an asynchronous logic, the function "Wait for completion [} 1211]" waits for the action to be
executed. With a synchronous logic, this function has no effect.
5.4.2 Controls
The Actions and Conditions Editor allows you to change all control properties at runtime (similar to the static
configuration in the Properties window [} 58]). In addition to the properties of the selected control, the
properties of all controls instantiated within all HMI pages can be changed.
The control properties of the instantiated controls are listed in the left column of the Actions and Conditions
Editor. Drag & drop can be used to add the properties to the right part of the editor. Drag & drop
automatically adds the control property to a WriteToSymbol action.
The following example shows setting the maximum value of a linear gauge [} 400] by pressing a button
(onPressed event [} 715]).
TE2000 Version: 2.5.1 67

5.4.3 Functions
Various functions are available graphically in the Actions and Conditions Editor. In addition, user-specific
functions [} 1213] are listed there according to their category. The functions can also be used in the
Properties window [} 58].
68 Version: 2.5.1 TE2000

The functions are listed in the left column of the Actions and Conditions Editor. Drag & drop can be used to
add the functions to the right part of the editor. Not all functions are useful in all contexts.
5.4.4 Action Templates

Action Templates allow you to reuse multiple actions that are often used together in the project. Reuse is
made possible by passing on so-called template parameters. Action Templates are used like an action in the
Actions and Conditions Editor. The template parameters are also transferred to the Action Template there.
All the functions of the Actions and Conditions Editor are available within the Action Template.
5.4.4.1 Editor
The Action Template Editor can be opened via the Actions and Conditions Editor or the Configuration
window [} 75]. The editor allows you to create and edit Action Templates. The editor is structured like the
Actions and Conditions Editor and contains the following extensions:
Explanations:
1 Explorer: The Explorer offers the same categories as the Actions and Conditions Editor.
2 Template name: Name of the Actions Template displayed under Action Templates in the Actions and
Conditions Editor.
3 Template description: Description of the Action Template that is displayed during mouseover over the
Action Template in the Actions and Conditions Editor.
4 Action editor: Graphic editor that records the Actions and Conditions using drag & drop. The functionality
is the same as the Actions and Conditions Editor.
5 Parameter name: Name of a Template Parameter that is passed to the Action Template.
6 Parameter data type: Data type of the Template Parameter.
7 Parameter description: Description of the Template Parameter that is displayed during mouseover over
the parameter in the Actions and Conditions Editor.
8 Parameter buttons:
• New: Adds a new Template Parameter.
TE2000 Version: 2.5.1 69

• Edit: Edits an existing Template Parameter.

• Remove: Removes an existing Template Parameter.
• Up: Moves an existing Template Parameter up one position.
• Down: Moves an existing Template Parameter down one position.
5.4.4.2 Example
The following description shows the creation of an Action Template as an example. The example describes
an Action Template for switching any Boolean value.
1. In the Action and Conditions Editor, click "Add Action Template". The Action Template Editor [} 69]
opens.
2. Enter a name and a description for the Action Template.
3. Add a Template Parameter of type "Boolean" to the Action Template.
70 Version: 2.5.1 TE2000

4. Drag a condition [} 62] into the editor area and implement the logic for switching the Boolean value using
WriteToSymbol actions [} 63]. You can insert the Template Parameter into the editor area using drag &
drop.
5. The Action Template can now be used as a normal action. In the Actions and Conditions Editor, drag the
Action Template into the editor area and link an icon of type "Boolean" to the template parameter.
TE2000 Version: 2.5.1 71

5.5 Document Outline

The Document Outline shows an overview of all controls that are located on the view or content page
currently open in the Designer. Individual elements can be selected directly in the Document Outline, for
example in order to change their properties in the Properties window.
• By clicking on you can hide individual controls so that they are no longer displayed in the
Designer. The controls are still displayed in the LiveView or in the browser. The controls are made
visible again by clicking on .
• You can lock controls to prevent them being shifted by clicking on . Clicking on
unlocks the controls so that they can be shifted again.
• The lightning bolt icon indicates that events are configured for this control. A click on the
icon opens the Properties window and displays the events.
• If controls are superimposed on one another in the Designer, thus making them inaccessible via the
graphic editor, they can be selected directly via the Document Outline.
• It is also possible to influence the order of the controls by drag-and-drop. (See detail page Positioning
of controls [} 111]). In addition, you can shift the controls into containers or grids or remove them from
a container or grid.
5.6 LiveView
In the LiveView the current configuration of the HMI can be tested directly online with values from the PLC
without the changes first having to be published on a server. The LiveView can be opened directly as a tool
window in Visual Studio. The LiveView synchronizes itself directly with the Designer without you first having
to save the changes. If, for example, you shift a control in the Designer, it will be shifted automatically in the
LiveView.
72 Version: 2.5.1 TE2000

The LiveView toolbar offers various options:
1. HMI project for which the LiveView is displayed. If there are several HMI projects in the Solution, you
can switch between the various projects.
2. Refresh button: Refreshes the LiveView when changes have been made in the Designer that couldn't
be automatically refreshed.
3. Developer Tools button: Opens the Developer Tools [} 1343] of the browser engine. These can be used
for debugging purposes:
TE2000 Version: 2.5.1 73

4. Full-screen mode: This button opens the LiveView in full-screen mode. The full-screen mode can be
exited again by pressing the Esc key.
5. Zoom-Out: Zooms out of the LiveView.
6. Zoom In: Zooms into the LiveView.
7. Reset Zoom: Resets the zoom to the normal view.
8. QR code display: Displays a QR code for the LiveView in order to open the LiveView on another de-
vice (e.g. a Smartphone). So that the LiveView can be opened via an external device you have to set
the binding to a network card in the Visual Studio settings. The settings can be found under:
Menu bar/Tools/Options/TwinCAT/HMI Environment/Binding Device
74 Version: 2.5.1 TE2000

9. Opens the LiveView in an available browser. If several browsers are installed on the operating system
you can choose between the browsers.
5.7 TwinCAT HMI Configuration

The Configuration window is the central configuration window in the TwinCAT HMI. It offers an overview of
all elements in the project and enables the configuration of these elements. Furthermore, the user
management and all data types can be configured via the window.
TE2000 Version: 2.5.1 75

The Configuration window contains a toolbar (1), a search bar (2), a project element explorer (3) and a
display area (4).
Depending on the node selected, various buttons are available in the toolbar in the right-hand explorer:
Refresh: This button refreshes the Configuration window.
Create Internal Symbol: This button adds a new internal symbol to the project.
Create Localized Symbol: This button adds a new localized key to the language tables in the project.
Create Server Symbol: This button adds a new symbol to the server.
Map Symbol: This button maps a server symbol.
Unmap Symbol: This button removes a mapping from a symbol.
Add User: This button adds a new user to the user management.
Add Group: This button adds a new user group to the user management.
Collapse All: This button collapses all expanded folders.
Automap Symbols: This button activates the automatic mapping of symbols. If the button is activated
the symbol is automatically mapped in the background. If the button is deactivated the Dialog Map symbol
appears; a mapping for the symbol can be assigned in this dialog.
Show advanced Items: This button shows all configuration options and is intended for power users.
76 Version: 2.5.1 TE2000

Toggle all On-/Offline: This button switches the state of all symbols between online and offline. No
communication takes place with the server in the offline state.
Show live values for mapped symbols: This button shows live values from the PLC for mapped
symbols in the Configuration window.
Edit permissions: This button opens the permissions management for the project elements.
The Configuration window can interact with the Properties window [} 58] by drag-and-drop.
5.7.1 Server symbols

Server Symbols lists all symbols that are saved in the TwinCAT HMI server.
5.7.1.1 All Symbols

All Symbols lists all symbols of the extensions available in the server. The user-specific server extensions
are also listed here.
Map Symbol: This button maps a server symbol.
TE2000 Version: 2.5.1 77

Show advanced Items: This button shows all configuration options and is intended for power users.
Show Advance Properties
If Show Advanced Items is activated, symbols and further extensions are available to power users.
78 Version: 2.5.1 TE2000

Create Mapping
Server symbols can be mapped with a right-click on the symbol or by clicking on the Map Symbol button.
A name can be assigned for the mapping in the dialog Map new Symbol.
5.7.1.2 Mapped symbols

Mapped symbols lists all symbols that have been mapped in the server.
Create Server Symbol: This button adds a new symbol to the server.
Unmap Symbol: This button removes a mapping from a symbol.
Toggle all On-/Offline: This button switches the state of all symbols between online and offline. No
communication takes place with the server in the offline state.
Show live values for mapped symbols: This button shows live values from the PLC for mapped
symbols in the Configuration window.
TE2000 Version: 2.5.1 79

Create Server Symbol
Server symbols can be created centrally in the server under Mapped Symbols. They can also be used
offline without a PLC. Clicking on the button Create Server Symbol opens a dialog for adding server
symbols.
1. Data type: Data type of the new symbol.

2. Symbol Name: Name of the new symbol.
3. Default Value: Default value of the symbol that is assigned when starting the server.
Server symbols that were created offline can be bound with a different symbol (e.g. from the PLC) later on.
To do this, click on Map to other symbol in the context menu and select the symbol via the window Select
Binding Source.
80 Version: 2.5.1 TE2000

5.7.1.3 Historized Symbols

Historized Symbols lists all symbols that are historized by the server.
Create Historized Symbol
A historized symbol is created via the mapped symbols. To do this, click on Historize Settings in the context
menu for a mapped symbol:
TE2000 Version: 2.5.1 81

The configuration for the historization of the symbol takes place in the dialog Historize Settings:
1. Recording Enabled: This setting activates the historization of the symbol.

2. Max Entries: Maximum number of entries in the ring buffer of the historized symbol.
3. Interval: Interval at which the data records are written to the ring buffer.
A historized symbol is identified by the following icon after the symbol name:
82 Version: 2.5.1 TE2000

5.7.1.4 Offline symbols (TMC)

If there is no connection to the target systems during the engineering stage, the TMC file of a TwinCAT PLC
can be imported. This gives the user offline access to all PLC symbols. Once a connection to the target
system is available, the symbols can be switched to the online connection.
Integrating a TMC file

1. Open the TwinCAT HMI Configuration window
2. Click to add a TMC file:
3. Enter a meaningful name for the PLC in the dialog that appears. This name is used for the any mappings
that are created and is retained when switching to the PLC connection. Confirm with OK.
4. Select the TMC file from the file system by clicking Browse Files or integrate it via Browse Solution if
the TwinCAT project is in the same Solution.
TE2000 Version: 2.5.1 83

5. Confirm both dialogs by clicking OK.

6. The entry TMC now appears under All Symbols, where you will find the offline PLC that was added.
ð You can create mappings for the symbols as usual.
Switching from offline to online connection

1. Once a connection to the PLC is available, you can switch the mappings to the online connection. To do
this, open the TwinCAT HMI Configuration window and navigate to the Mapped Symbols:
2. Select a symbol, right-click Switch Mapping to PLC and select the corresponding PLC (in this case
PLC1). This step requires the symbol to be available in the PLC.
84 Version: 2.5.1 TE2000

ð The mapping is removed from the TMC symbols and listed below the online connections. You now
have access to the live data of the PLC.
3. You may switch several mappings to an online connection at the same time if they are available in the
same PLC. To do this, select several mappings, right-click Switch Mapping to PLC and select the PLC:
ð The connection of the selected symbols was switched to the online connection.
5.7.2 Internal symbols

Internal symbols are independent of the server and are valid within a browser instance. The internal symbols
thus enable variables to be saved individually for each client.
Create Internal Symbol: This button adds a new internal symbol to the project.
TE2000 Version: 2.5.1 85

Create Internal Symbol
Clicking on the button Create Internal Symbol or double-clicking on <create new internal symbol> opens
a dialog for adding internal symbols:
1. Data type: Data type of the internal symbol. The selection is made via the combobox.
2. Symbol Name: Name of the internal symbol.
3. Default Value: Default value of the internal symbol that is set when loading the client.
4. Persist: Defines whether the symbol is saved persistently in the client. A persistent internal symbol is
available at the next start of the HMI.
5. Read-only: Defines whether the symbol may only be read or whether read and write access is al-
lowed.
5.7.3 Localizations
Localizations list all available localization texts [} 928]. You can bind the entries with the control properties by
drag-and-drop.
Create Localized Symbol: This button adds a new localized key to the language tables in the project.
86 Version: 2.5.1 TE2000

Create Localized Symbol
The dialog Create new localized symbol is opened by clicking on the button Create Localized Symbol,
double-clicking on <create new localized symbol> and dragging and dropping the entry <create new
localized symbol> onto a control property.
1. Key: Key of the localized text. The key may only be assigned once.
2. Language: All available languages.
3. Value: Text of the key in the respective language.
5.7.4 Data types

Data types list all available data types of the TwinCAT HMI and the current project.
TE2000 Version: 2.5.1 87

• Server: All server data types.

• Project: User-specific project data types that were created by the Scheme Generator [} 88].
• Framework: All framework data types (including data types from framework controls).
• General: Base data types.
5.7.4.1 Creating a data type

A new user-specific project data type can be created on the Data types tab. To do this, right-click inside the
window and select Create new project datatype… from the context menu.
In the subsequent dialog you select the basis on which the new data type is to be created.
88 Version: 2.5.1 TE2000

5.7.4.1.1 Array
Create an array-based type creates a new project data type based on an array. The subsequent dialog
configures the array:
TE2000 Version: 2.5.1 89

1. Choose Base Type: Base data type on which the array is based.
2. Array Size: Size of the array. A dynamic array is generated by entering no value.
Clicking on Create Type opens the Scheme Generator [} 93].
5.7.4.1.2 Object
Create a new object type creates a new project data type based on an object. Properties can be added to
the object in the subsequent dialog:
90 Version: 2.5.1 TE2000

1. Name: Name of the object property.

2. Data type: Data type of the property.
5.7.4.1.3 Remote data type

Create a new datatype based on a remote type creates a new project data type on the basis of an existing
data type on the server or a PLC. In the subsequent dialog the remote data type can be selected on whose
basis the new data type is to be created:
TE2000 Version: 2.5.1 91

For example, function blocks from a PLC can be selected in the dialog. The data type can be created on this
basis.
5.7.4.1.4 Expand data type

Create new datatype based on an existing one creates a new project data type based on any data type.
This function is used to expand an existing data type. The subsequent dialog enables the selection of the
data type via a combobox:
92 Version: 2.5.1 TE2000

All data types including the project data types are available in the combobox.
5.7.4.1.5 Schema Generator

The Schema Generator is called at the completion of every process of creating a data type. In addition, it is
possible to start directly with the Schema Generator if Start from scratch is selected.
TE2000 Version: 2.5.1 93

1. Data Type Explorer: The Data Type Explorer displays the structure of the data type in a tree view.
2. Name: Name of the data type.
3. Title: Title of the data type.
4. Description: Description of the data type.
5. Base Type: Base data type of the data type.
◦ Scheme Type: JSON base data types.
◦ Existing Type: Arbitrary TwinCAT HMI data type.
◦ Multiple: Arbitrary data types with restrictions [} 95]: AnyOf, AllOf or OneOf (see JSON
documentation).
◦ Not Set: Do not set a data type. This necessitates a manual restriction [} 95] of the data type.
6. Define Subtypes: Enables the definition of subtypes within the schema. A subtype is a user-specific
data type within the user-specific data type.
7. Additional Properties: Adds optional properties to the data type. Optional properties enable the addi-
tion of further properties that are not required, but are validated (see JSON documentation).
8. Required Properties: Defines all properties that are required. One property is entered per row. The
data type is not valid if it is lacking a required property.
9. Subschema Preview: Provides a preview of the generated schema of the selected node in the Data
Type Explorer.
94 Version: 2.5.1 TE2000

Restricting a data type

If "Multiple" or "Not Set" is selected as the base data type, additional fields are shown in the Properties area
of the Schema Editor. The additional fields enable the restriction of the data type.
1. Array Limits: Defines a minimum and maximum array length.

2. Number Limits: Defines minimum and maximum limits for a numerical value.
3. String Limits: Defines a minimum and maximum length for a string.
4. String Format: Defines the format of a string.
5. Enum Options: Defines an enumeration and its entries. One entry is made per row.
5.7.5 Parameter
Parameter lists all the parameter values of a User Control. The Parameter category is visible only if a User
Control has the focus.
TE2000 Version: 2.5.1 95

5.7.6 Controls
Controls lists all available controls (instanced controls) and offers the option of inserting the properties of the
controls into other editors by drag-and-drop.
96 Version: 2.5.1 TE2000

5.7.7 Global Events

Global Events lists all events of the TwinCAT HMI that can neither be assigned to any control nor to any HMI
page.
TE2000 Version: 2.5.1 97

Global Events:
• onInitialized: The event is triggered as soon as the system has been initialized and the main control
(View) is loaded. Other controls may not be loaded or visible at this time.
• onLocaleChanged: The event is triggered as soon as a language has been loaded.
• onThemeDataChanged: The event is triggered as soon as all JSON and CSS files have been loaded
following a change of theme. Furthermore the event is triggered as soon as a new font has been
loaded.
• onUserInGroupChanged: The event is triggered if the group membership of the current user is now
known to the system or has changed.
5.7.8 Functions
The functions list all functions available in the project. These include the functions provided by [} 850]
TwinCAT HMI and the user-specific functions [} 1213].
98 Version: 2.5.1 TE2000

5.7.9 Files
Files lists the files used in the project, categorized according to the project folders.
5.7.9.1 All Files

Lists all available files of the TwinCAT HMI project.
5.7.9.2 Content Files

Lists all content files (pages) of the project.
TE2000 Version: 2.5.1 99

5.7.9.3 Views
Lists all views of the project. A view is the parent element of an HMI. The StartView can be set in the Project
properties [} 51].
5.7.9.4 User Controls

Lists all User Controls in the project.
5.7.10 Users and user groups

Lists all available users and user groups. Explanations of the configuration can be found in User
Management [} 887].
5.7.11 Client certificates

The client certificates list all client certificates that are stored in the project. The creation and use of the client
certificates are described in the user management [} 910].
100 Version: 2.5.1 TE2000

5.7.12 Action Templates

Action Templates lists all Action Templates [} 69] used in the project.
5.7.13 Recipe management

The recipe management [} 977] contains all recipes and recipe types that have been configured for the
project. With a double click on a recipe or a recipe type the corresponding editors [} 980] of the recipe
management are opened.
TE2000 Version: 2.5.1 101

5.7.14 Permissions Management

The permissions management enables the configuration of the rights [} 887] for all project elements.
Edit permissions: This button opens the permissions management for the project elements.
Further information on rights can be found in the chapter Rights system [} 893].
5.8 Localization editor

You can open the Localization editor in the Solution Explorer by double-clicking on the respective language
file.
The Localization editor enables the editing of language files.
1. Removes a selected entry (key and language entry) from the language table.
102 Version: 2.5.1 TE2000

2. Export or import the Excel table or CSV.

3. Defines the default language in the HMI project.
4. Search for keys or language entries.
5. The key must be unique and is linked with a control in the Designer at a later date. The language entry
of the currently active language is then automatically displayed.
6. The language entry contains the text for the key.
Adding a new language entry
To create a new localization entry, click in the last row of the table on create new localized symbol. A
unique key must exist for each entry.
Further languages can be displayed via the context menu of the table.
It is not possible to edit the additionally displayed language in this table. To do that you have to open the
respective table for the language.
In the Designer you can link the language key directly to the property of a control as a symbol. The language
symbols are marked by an "L". When hovering with the mouse pointer over a language symbol, the
corresponding language entries are displayed.
5.9 Symbols and Bindings

A binding links any symbol to a property [} 58] of a control. A binding automatically updates the property of
the control when the value of the symbol changes.
TE2000 Version: 2.5.1 103

5.9.1 Create binding
Under Properties [} 58] you can configure a binding by clicking the symbol.
The Select Binding Source dialog displays all available symbols, categorized by symbol type. Server
symbols must be mapped before they are bound to a control property. The mapping is created by clicking
the Map Symbol or automatically by clicking OK.
The mapped server symbols are available under Mapped symbols after the mapping has been created.
104 Version: 2.5.1 TE2000

Besides internal variables and localization symbols, properties of other controls can also be bound (e.g. the
current text of a text box [} 580]).
Alternatively, the symbols in input fields can be bound directly to a property of a control using auto-
completion.
TE2000 Version: 2.5.1 105

Available from version 1.10.
5.9.2 Create function binding

In addition to variable bindings, a function binding can be created. A function binding can be created for all
control properties, if the JavaScript functions return a suitable value for the property of the control. A function
binding can be used for conversions [} 1216], for example.
A function binding is created with the Create function binding command.
An active function binding is identified by fx highlighted in blue.
106 Version: 2.5.1 TE2000

The parameter values of the function are transferred directly in the Properties window.
In addition, it is possible to implement custom JavaScript functions and create a function binding for them.
Further information can be found here [} 1213].
5.9.3 Configure binding

A binding created for a property of a control can be configured via the Edit Binding dialog. The dialog can be
opened by right-clicking or double-clicking on the bound symbol.
The Edit Binding dialog offers various configuration options, depending on the symbol type:
TE2000 Version: 2.5.1 107

1 Binding mode: Binding mode determines whether the binding acts in one direction or in both directions.
• One-way binding (read-only): The value of the symbol is read.
• Two-way binding (read and write access): The value of the symbol is read and the symbol is written
when a specific event is triggered.
2 Binding event: The binding event can only be optionally configured for TwoWay bindings. It determines at
which event the symbol is written to (e.g. onValueChanged [} 421] for a linear gauge [} 400]). If no event is
selected for a TwoWay binding, the value is automatically written back if the value changes.
• Event: An event of the current control for which the symbol is to be written to.
3 Interval: The interval specifies the time within which the binding is to be queried or updated. The interval
can only be set for server symbols.
• Time (ms): Time in milliseconds.
4 Timeout: The timeout defines the time after which a read or write access to the symbol leads to an error if
no response is sent from the server. The timeout can only be set for server symbols.
• Time (ms): Time in milliseconds.
5 Subscription Mode: Update mode between server and client.

• Use project default: The global setting is used, which is defined in the project properties. [} 51]
• Change: The client is only informed of changes to the symbol value.
• Poll: The client receives the symbol value cyclically, even if no value change has taken place.
6 Parallel: This property defines whether a command is to be executed by the server in parallel or in a
queue. The decision whether processing is to take place in parallel or in a queue depends on the respective
application. By default, all commands are executed in a queue. This property can only be set for server
symbols.
• Parallel (disabled): All commands to the server are queued and processed one after the other.
Execution may take a little longer if there are several commands in the queue.
• Parallel (enabled): The commands are sent directly to the server without being queued. The
commands are executed directly. With this option, it can happen that the execution order of commands
sent in short succession is switched.
108 Version: 2.5.1 TE2000

5.10 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 .
TE2000 Version: 2.5.1 109

Events
Each control can trigger different actions on the occurrence of various events. These actions are configured
in the Properties under the icon .
110 Version: 2.5.1 TE2000

Rights
The rights management [} 780] for each control can be found in the Properties under the icon .
5.10.1 General configuration

Various generally valid configurations or editors are described in this chapter.
5.10.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 [} 697] and Top [} 697] combined with Width [} 698] and Height [} 699]. These four values
are specified in the unit 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 [} 698] or HeightMode [} 699]. 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 [} 697] (including LeftUnit [} 697])
• Width [} 698] (including WidthUnit [} 698])
TE2000 Version: 2.5.1 111

• Right [} 700] (including RightUnit [} 700])
and
• Top [} 697] (including TopUnit [} 698])
• Height [} 699] (including HeightUnit [} 699])
• Bottom [} 700] (including BottomUnit [} 700])
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 [} 709] (including Minimum Width Unit [} 709]), Maximum Width
[} 708] (including Maximum Width Unit [} 708]) or Minimum Height [} 707] (including Minimum Height Unit
[} 707]) and Maximum Height [} 708] (including Maximum Height Unit [} 708]) 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 [} 775] 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 [} 72] or directly in the HTML source code [} 56].
112 Version: 2.5.1 TE2000

The Z-Index [} 711] 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 [} 723] groups together any child controls. The container must be large enough to accept
all child controls, because any overfilling will be cut off.
5.10.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.
TE2000 Version: 2.5.1 113

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.
114 Version: 2.5.1 TE2000

5.10.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
TE2000 Version: 2.5.1 115

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:
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:
Origin
116 Version: 2.5.1 TE2000

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:
Z Definition of the Z coordinate of the origin of the
transformations
Z Unit Selection of the unit of the coordinate:
Perspective
Name Description
Distance Definition of the distance of the perspective
Distance Unit Selection of the unit of the coordinate:
Origin X Definition of the X coordinate of the origin of the
perspective
Origin X Unit Selection of the unit of the coordinate:
Origin Y Definition of the Y coordinate of the origin of the
perspective
Origin Y Unit Selection of the unit of the coordinate:
5.10.1.4 Box Shadow Editor

You can set a shadow for the control with this editor.
Add a new object
Category: Colors
Name Description
Color Definition of the color of the shadow
TE2000 Version: 2.5.1 117

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
118 Version: 2.5.1 TE2000

5.10.2 Beckhoff
TE2000 Version: 2.5.1 119

Name Description
Audio [} 127] Audio files can be played with the Audio Control. The
supported audio formats are defined by the browser
used.
Bar Chart [} 139] A BarChart represents data with rectangular bars. It
can be statically filled with data or dynamically
supplied with data via an array.
Button [} 168] The button is a simple switching element that
provides visual feedback when the background is
switched.
Checkbox [} 180] A checkbox has a ToggleState parameter. This
parameter has the value "Normal" if no checkmark is
set and "Active" if the checkmark is set.
Combobox [} 190] 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
dropdown menu, and an assigned value.
Datagrid [} 207] 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.
Date Time Display [} 235] A control for displaying the date and time.
Ellipse [} 263] An elliptical object.
Event Grid [} 270] The Event Grid is provided for the tabular display of
alarms and messages.
IFrame [} 328] 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.
Image [} 333] 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.
Input [} 340] A single-line text input element.
Keyboard [} 350] A keyboard is an on-screen keyboard that can be
used for input without a hardware keyboard.
Line [} 365] A line object.
Line Chart [} 375] A LineChart is a diagram in which curves can be
displayed.
Linear Gauge [} 400] 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.
Localization Select [} 423] A combo box to select the localization.
Numeric Input [} 436] An input element for numeric values.
Password Input [} 449] An input element for passwords.
PDF Viewer [} 455] The PDF Viewer control enables embedded display
of PDF files in TwinCAT HMI applications.
Polygon [} 461] Closed shape formed from a set of interconnected
straight lines. The last point is automatically
connected to the first point.
Radial Gauge [} 476] 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.
Radio Button [} 498] A radio button has a RadioState parameter. This
parameter has the value "Normal" if the radio button
is not selected and "Active" if the radio button is
selected.
120 Version: 2.5.1 TE2000

Name Description
Only one radio button from a RadioGroup can be
selected at a time.
Recipe Select [} 509] The Recipe Select control allows you to browse,
select, activate and teach recipes from the Recipe
Management Extension on the server.
Rectangle [} 516] A rectangular object.
Spinbox Input [} 538] An input element for numerical values with buttons
for increasing and decreasing the value.
State Image [} 545] A state control is an image display in which different
image files from the project path can be displayed
depending on the state of an assigned variable.
Tachometer [} 551] A tachometer is a radial indicator that displays a
value on a scale using a tachometer needle.
Textblock [} 571] A text block is a control in which text can be
displayed.
Textbox [} 580] A text box is a control in which text can be displayed
and entered.
Theme Select [} 590] A combo box to select the theme.
Toggle Button [} 621] The toggle button is a switching element that can be
switched between two states.
Toggle switch [} 629] A toggle switch is a switching element that can be
switched between two states. A ToggleSwitch has a
ToggleState parameter, which can have the value
"Normal" or "Active".
Trend Line Chart [} 635] A TrendLineChart is a trend element in which curves
of historicized symbols can be displayed.
Video [} 677] Video can be played with the video control. The
supported video formats are defined by the browser
used.
5.10.2.1 ADS State

Shows the state of the defined TwinCAT Runtime.
Attributes
Category: Colors
Name Description
BackgroundColor [} 705] Definition of the background color
BorderColor [} 703] Definition of the border color of the control
Category: Layout
TE2000 Version: 2.5.1 121

Name Description
Left [} 697] Definition of the distance from the left side to the left
side of the surrounding control
LeftUnit [} 697] Definition of the unit of the distance to the right side
of the surrounding control:
• Pixels for absolute positioning
• Percent for relative positioning
Top [} 697] Definition of the distance from the top side to the top
TopUnit [} 698] Selection of the unit of the distance to the top side of
the surrounding control:
Right [} 700] Definition of the distance from the right side to the
right side of the surrounding control
RightUnit [} 700] Selection of the unit of the distance to the right side
Bottom [} 700] Definition of the distance from the bottom side to the
bottom side of the surrounding control
BottomUnit [} 700] Selection of the unit of the distance to the bottom
side of the surrounding control:
Width [} 698] Definition of the external width of the control
WidthUnit [} 698] Selection of the unit of the width:
• Pixels for an absolute width
• Percent for a relative width
Height [} 699] Definition of the external height of the control
HeightUnit [} 699] Selection of the unit of the height:
• Pixels for an absolute height
• Percent for a relative height
MaxWidth [} 708] Definition of the maximum width if the control size is
defined as dynamic
MaxWidthUnit [} 708] Selection of the unit of the maximum width:
• Pixels for an absolute value
• Percent for a relative value
MinWidth [} 709] Definition of the minimum width if the control size is
defined as dynamic
MinWidthUnit [} 709] Selection of the unit of the minimum width:
MaxHeight [} 708] Definition of the maximum height if the control size is
defined as dynamic
MaxHeightUnit [} 708] Selection of the unit of the maximum height:
MinHeight [} 707] Definition of the minimum height if the control size is
defined as dynamic
122 Version: 2.5.1 TE2000

Name Description
MinHeightUnit [} 707] Selection of the unit of the minimum height:
RenderedLeft [} 701] Calculated distance in pixels from the left side to the
left side of the surrounding control
RenderedTop [} 701] Calculated distance in pixels from the top side to the
top side of the surrounding control
RenderedRight [} 702] Calculated distance in pixels from the right side to the
RenderedBottom [} 701] Calculated distance in pixels from the bottom side to
the bottom side of the surrounding control
RenderedWidth [} 702] Calculated width of the control in pixels
RenderedHeight [} 702] Calculated height of the control in pixels
GridRowIndex [} 703] Definition of the row of a grid in which the control is to
be displayed
GridColumnIndex [} 703] Definition of the column of a grid in which the control
is to be displayed
Opacity [} 709] Definition of the transparency of the entire control
Visibility [} 711] 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 [} 711] Definition of the position on the Z-axis
Transform [} 710] Definition of a transformation of a control:
• 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 [} 711] Definition of a shadow
WidthMode [} 698] 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 [} 699] 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
TE2000 Version: 2.5.1 123

Name Description
AdsRuntime [} 126] The ADS extension whose state is displayed.
ServerDomain [} 126] The domain of ADS extension. The default domain is
"ADS".
ServerInterval [} 126] Defines the interval for server subscriptions in
milliseconds.
StateImages [} 127] A structure that defines an image for each state that
an ADS extension may have and a fallback image.
IsEnabled [} 696] Selection of whether a control should be activated
Id [} 696] Definition of the name of the control
Type [} 710] Type name of the control
ClassNames [} 696] Definition of control classes
IsAttached [} 696] If a control is logically assigned in the DOM.
Tooltip [} 710] Definition of the tooltip for the control
Category: Border
Name Description
BorderRadius [} 704] Definition of the radius of the four corners to round
them off
BorderStyle [} 704] Selection of the border style of the four sides of the
control
BorderWidth [} 704] Definition of the border width of the four sides of the
control
Category: Background Image

Name Description
BackgroundImage [} 705] Definition of an image that is located above the
background color
BackgroundImageHeight [} 706] Definition of the height of the background image
BackgroundImageHeightUnit [} 706] Selection of the unit of the height of the background
image:
BackgroundImageWidth [} 705] Definition of the width of the background image
BackgroundImageWidthUnit [} 705] Selection of the unit of the width of the background
image:
BackgroundImagePadding [} 706] Definition of an additional distance between the
border of the control and background image for the
four sides
BackgroundImageVerticalAlignment [} 707] Definition of the vertical alignment of the background
image within the control
BackgroundImageHorizontalAlignment [} 706] Definition of the horizontal alignment of the
background image within the control
Events
Category: Framework
124 Version: 2.5.1 TE2000

Name Description
onAttached [} 712] The control was added to the display.
onDetached [} 712] The control was removed from the display.
onInitialized [} 712] The control was initialized.
onDestroyed [} 712] The control was destroyed.
onMoved [} 715] The control was moved in relation to the browser
window.
onResized [} 715] The size of the control was changed.
Category: Operator
Name Description
onPressed [} 715] A mouse click was executed or a touch screen was
briefly touched.
onMouseClick [} 712] The left mouse button was clicked over the control
and released.
onMouseDoubleClick [} 713] The left mouse button was clicked twice over the
control and released.
onMouseRightClick [} 714] The right mouse button was clicked over the control
and released.
onMouseDown [} 713] A mouse button was pressed down over the control.
onMouseEnter [} 713] The mouse pointer was moved over the control.
onMouseLeave [} 713] The mouse pointer has left the control.
onMouseUp [} 714] A mouse button was released over the control.
onMouseDownLeft [} 713] The left mouse button was pressed down over the
control.
onMouseDownRight [} 713] The right mouse button was pressed down over the
control.
onMouseMove [} 714] The mouse was moved over the control.
onMouseOver [} 714] The mouse pointer was moved over the control or
one of its children.
onMouseOut [} 714] The mouse pointer has left the control or one of its
child controls.
onMouseUpLeft [} 714] The left mouse button was released over the control.
onMouseUpRight [} 715] The right mouse button was released over the
control.
onMouseWheel [} 715] The mouse wheel was moved over the control.
onTouchStart [} 716] A finger/stylus was placed against a touch screen.
onTouchMove [} 716] A finger/stylus was moved on a touch screen.
onTouchEnd [} 716] A finger/stylus was lifted off a touch screen.
onTouchCancel [} 715] An interaction with a touch screen was aborted.
Access rights
Name Description
observe [} 716] Determines whether the control is generally
observable.
operate [} 716] Determines whether the control is generally operable.
Inheritance hierarchy
Control [} 690]
TE2000 Version: 2.5.1 125

AdsState
NuGet package: Beckhoff.TwinCAT.HMI.Controls
Note: NuGet packages are available from version 1.12.
Available from version 1.12.748
See also
API reference for this control
5.10.2.1.1 Attributes
AdsRuntime
The ADS extension whose state is displayed.
Schema: tchmi:general#/definitions/String
Origin: ADS State [} 121]
See also
Attribute getter: getAdsRuntime
Attribute setter: setAdsRuntime
ServerInterval
Defines the interval for server subscriptions in milliseconds.
Schema: tchmi:general#/definitions/Number
See also
Attribute getter: getServerInterval
Attribute setter:setServerInterval
ServerDomain
The domain of ADS extension. The default domain is "ADS".
126 Version: 2.5.1 TE2000

See also
Attribute getter: getServerDomain
Attribute setter: setServerDomain
StateImages
A structure that defines an image for each state that an ADS extension may have and a fallback image.
Schema: tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.TcHmiAdsState.StateImages
See also
Attribute getter: getStateImages
Attribute setter: setStateImages
5.10.2.2 Audio
Audio files can be played with the Audio Control. The supported audio formats are defined by the browser
used.
Attributes
Category: Colors
Name Description
Category: Layout
TE2000 Version: 2.5.1 127

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
128 Version: 2.5.1 TE2000

Name Description
be displayed
is to be displayed
Category: Common
TE2000 Version: 2.5.1 129

Name Description
SrcList [} 133] Definition of a list of audio files that can be played
back
Category: Border
Name Description
them off
control
control

Name Description
background color
image:
image:
four sides
Category: Audio
130 Version: 2.5.1 TE2000

Name Description
Volume [} 133] Definition of the volume of the audio file
Mute [} 134] Selecting whether the sound is to be switched off
Playback rate [} 134] Definition of a playback rate. The normal playback
speed is multiplied by this value to obtain the current
rate.
CurrentTime [} 135] Definition of the current playback time of the audio
file
Duration [} 135] Plays the length of the audio file in seconds or 0 if it
is not available.
isEnded [} 134] Returns a Boolean value indicating whether playback
has finished or not.
isPlaying [} 134] Returns a Boolean value indicating whether the audio
file is currently playing or not.
Category: Player
Name Description
Controls [} 135] Selecting whether the integrated operating elements
are to be displayed
Autoplay [} 136] Selecting whether the audio file should be started
automatically
Loop [} 136] Selecting whether the audio file is to be repeated
automatically on a permanent basis
Events
Category: Control
Name Description
onLoadedData [} 137] The audio file was loaded successfully.
onError [} 137] The audio file was not loaded successfully.
onVolumeChange [} 137] The volume of the audio file has been changed.
onDurationChange [} 137] The duration of the audio file has changed.
onIsEndedChange [} 137] The audio file has been terminated.
onIsPlayingChange [} 138] The audio file has changed its playback status.
onTimeUpdate [} 138] The playback position has been changed.
Category: Framework
Name Description
window.
Category: Operator
TE2000 Version: 2.5.1 131

Name Description
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
Functions
Name Origin Description
play TcHmiAudio Start video
pause TcHmiAudio Pause video
stop TcHmiAudio End video
skipBackward TcHmiAudio Rewind video
skipForward TcHmiAudio Fast forward video
Access rights
Name Description
observable.
Control
Audio
132 Version: 2.5.1 TE2000

See also
SrcList
A list of audio files that the browser should play back.
The audio files are not played one after the other, but the browser tries to play each audio file until it finds a
format that it supports.
If the format type is not set, the browser tries to detect the code itself.
You can check the current status of browser support on the external website http://caniuse.com/.
Schema: tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.TcHmiAudio.AudioSourceList
Origin: Audio [} 127]
See also
Attribute getter: getSrcList
Attribute setter: setSrcList
Volume
Volume of the audio file. The number 0 sets the audio file to mute, while 1 means full volume.
Schema: tchmi:framework#/definitions/Fraction
See also
Attribute getter: getVolume
Attribute setter: setVolume
TE2000 Version: 2.5.1 133

Mute
Determines whether the sound is switched off.
Schema: tchmi:general#/definitions/Boolean
See also
Attribute getter: getMute
Attribute setter: setMute
Playback rate
The normal playback speed is multiplied by this value to obtain the current rate. Thus, the value 1.0
represents the normal speed.
See also
Attribute getter: getPlaybackrate
Attribute setter: setPlaybackrate
isEnded
Returns a Boolean value indicating whether playback has finished or not.
See also
Attribute getter: getIsEnded
The attribute can only be read and therefore has no setter.
isPlaying
Returns a Boolean value indicating whether the audio file is currently playing or not.
134 Version: 2.5.1 TE2000

See also
Attribute getter: getIsPlaying
CurrentTime
The current playback time of the audio file.
See also
Attribute getter: getCurrentTime
Attribute setter: setCurrentTime
Duration
Plays the length of the audio file in seconds or 0 if it is not available.
See also
Attribute getter: getDuration
Controls
Determines whether operating elements are to be displayed. The user can control playback, adjust the
volume and pause/resume the audio file.
TE2000 Version: 2.5.1 135

Some browsers do not allow automatic [} 136] or application-based start of an audio file. You
should therefore carry out intensive tests to determine whether it makes sense to deactivate the op-
erating elements.
See also
Attribute getter: getControls
Attribute setter: setControls
Autoplay
Specifies whether the audio file is to be started directly.
In some browsers this is not allowed by default. In part this is possible again when the sound is
switched off.
See also
Attribute getter: getAutoplay
Attribute setter: setAutoplay
Loop
When the audio file is finished, it starts again from the beginning.
See also
Attribute getter: getLoop
Attribute setter: setLoop
136 Version: 2.5.1 TE2000

5.10.2.2.2 Events
onError
The audio file was not loaded successfully.
onLoadedData
The audio file was loaded successfully.
onVolumeChange
The volume [} 685] of the audio file has been changed.
onDurationChange
The duration of the audio file has changed.
onIsEndedChange
The audio file has been terminated [} 686].
TE2000 Version: 2.5.1 137

onIsPlayingChange
The audio file has changed its playback status [} 686].
onTimeUpdate
The playback position [} 135] has been changed.
5.10.2.2.3 Functions
play
Starts playing the audio file.
Return value: null
pause
Pauses the play back of the audio file.
Return value: null
stop
Stops playing the audio file. The audio file is then played back from the beginning.
Return value: null
138 Version: 2.5.1 TE2000

skipBackward
Rewinds the audio file with a specified timespan.
Parameter:
• valueNew: Timespan in seconds
Return value: null
skipForward
Fast forwards the audio file with a specified timespan.
Parameter:
• valueNew: Timespan in seconds
Return value: null
5.10.2.3 Bar Chart

A BarChart 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 [} 148].
Attributes
Category: Colors
TE2000 Version: 2.5.1 139

Name Description
GridBackgroundColor [} 151] Definition of the background color of the coordinate
system
XAxisColor [} 156] Definition of the color of the X-axis
YAxisColor [} 159] Definition of the color of the Y-axis
GridLineColor [} 151] Definition of the color of the coordinate grid
SectionsBackgroundColor [} 164] Definition of the color of the sections
SubgridLineColor [} 155] Definition of the color of the coordinate subgrid
XLabelFontColor [} 156] Definition of the font color of the X-axis labels
XAxisNameFontColor [} 165] Definition of the font color of the Y-axis name
YLabelFontColor [} 160] Definition of the font color of the Y-axis labels
YAxisNameFontColor [} 162] Definition of the font color of the Y-axis name
Category: Layout
140 Version: 2.5.1 TE2000

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
TE2000 Version: 2.5.1 141

Name Description
be displayed
is to be displayed
Category: Common
142 Version: 2.5.1 TE2000

Name Description
BarGraphData [} 150] Definition of the data to be displayed as graph using
the 'Bar Graph Data [} 149]' dialog
BarGraphDescription [} 165] Definition of the display mode of the configured bar
graphs using the 'Bar Graph Description [} 149]'
dialog
BarGraphColors [} 150] Definition of the colors of the configured bar graphs
using the 'Bar Graph Color [} 148]' dialog
ShowLegend [} 165] Selecting whether the legend is to be displayed
BarGraphArrangement [} 166] Selection of the display mode of the bar chart:
• Overlapped: Bars are drawn on top of each other
• Clustered: Bars are drawn next to each other
BarGraphWidth [} 150] Definition of the width of the individual bars.
Category: Border
Name Description
them off
control
control

Name Description
background color
image:
image:
four sides
TE2000 Version: 2.5.1 143

Category: XAxis
Name Description
ShowXAxis [} 153] Selecting whether the X-axis is to be displayed
XShowLabels [} 153] Selecting whether the X-axis labels are to be
displayed
XMainTickSteps [} 158] Definition of the step size of the X-axis main
subdivision
XMainTickMinValue [} 158] Definition of the minimum value of the X-axis main
subdivision
XMainTickMaxValue [} 157] Definition of the maximum value of the X-axis main
subdivision
ShowXAxisName [} 166] Selecting whether the X-axis name is to be displayed
XAxisName [} 166] Definition of the X-axis name
XAxisAutoScaling [} 155] 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 [} 156] Definition of the decimal places displayed for the X-
axis
XAxisUnit [} 166] Definition of the X-axis unit
XAxisWidth [} 158] Definition of the X-axis width
XLabelFontFamily [} 156] Definition of the font using the name of the font family
or the keyword
XLabelFontSize [} 157] Definition of the font size for the X-axis labels
XLabelFontSizeUnit [} 157] Selecting the font size unit for the X-axis labels:
• Pixels for an absolute size
• Percent for a relative size
XLabelFontWeight [} 157] Selecting the font weight of the X-axis labels:
• Normal
• Bold
XAxisFormat [} 159] Definition of the formatting of the X-axis labels
XNameFontFamily [} 167] Definition of the font using the name of the font family
or the keyword
XNameFontSize [} 167] Definition of the font size of the X-axis name
XNameFontSizeUnit [} 167] Selecting the unit of the font size of the X axis name:
XNameFontWeight [} 168] Selecting of the font weight of the X-axis name:
• Normal
• Bold
ShowXSubTicks [} 153] Selecting whether the subcoordinate points are to be
displayed on the X-axis
XSubTickSteps [} 158] Definition of the step size of the X-axis subdivision
Category: YAxis
144 Version: 2.5.1 TE2000

Name Description
ShowYAxis [} 154] Selecting whether the y-axis is to be displayed
YPosition [} 164] 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 [} 159] Selecting whether the y-axis should be automatically
Value', 'Maintick Max Value' and 'Y-Axis Maintick
YAxisDecimalPlaces [} 160] Definition of the decimal places displayed for the y-
axis
YAxisUnit [} 164] Definition of the unit of the y-axis
YAxisWidth [} 164] Definition of the y-axis width
ShowYAxisName [} 154] Selecting whether the y-axis name is to be displayed
YAxisName [} 162] Definition of the y-axis name
YAxisNameFontFamily [} 162] Definition of the font using the name of the font family
or the keyword
YAxisNameFontSize [} 163] Definition of the font size of the y-axis name
YAxisNameFontSizeUnit [} 163] Selecting the unit of the font size of the y-axis name:
YAxisNameFontWeight [} 163] Selecting of the font weight of the y-axis name:
• Normal
• Bold: Bold
YShowLabels [} 154] Selecting whether the y-axis labels are to be
displayed
YLabelFontFamily [} 160] Definition of the font using the name of the font family
or the keyword
YLabelFontSize [} 160] Definition of the font size for the y-axis labels
YLabelFontSizeUnit [} 161] Selecting the font size unit for the y-axis labels:
YLabelFontWeight [} 161] Selecting the font weight of the y-axis labels:
• Normal
• Bold: Bold
YMainTickMinValue [} 161] Definition of the minimum value of the y-axis main
subdivision
YMainTickMaxValue [} 161] Definition of the maximum value of the y-axis main
subdivision
YMainTickSteps [} 162] Definition of the step size of the y-axis main
subdivision
ShowYSubTicks [} 154] Selecting whether the subcoordinate points are to be
displayed on the y-axis
YSubTickSteps [} 163] Definition of the step size of the y-axis subdivision
Category: Grid
TE2000 Version: 2.5.1 145

Name Description
ShowGrid [} 152] Selecting whether the coordinate grid is to be
displayed.
GridShowHorizontalLines [} 152] Selecting whether the horizontal lines of the
coordinate grid are to be displayed.
GridShowVerticalLines [} 152] Selecting whether the vertical lines of the coordinate
grid are to be displayed.
GridLineStyle [} 151] Definition of the line style for the coordinate grid.
GridLineWidth [} 151] Definition of the line width of the coordinate grid.
SubgridShowHorizontalLines [} 152] Selecting whether the horizontal lines of the subgrid
are to be displayed.
SubgridShowVerticalLines [} 152] Selecting whether the vertical lines of the subgrid are
to be displayed.
SubgridLineStyle [} 155] Definition of the line style of the subgrid.
SubgridLineWidth [} 155] Definition of the line width of the subgrid.
Events
Category: Framework
Name Description
window.
Category: Operator
146 Version: 2.5.1 TE2000

Name Description
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
Access rights
Name Description
observable.
Control [} 690]
Bar Chart
Note: NuGet packages are available from version 1.12
Note: Available since version 1.8
See also
TE2000 Version: 2.5.1 147

5.10.2.3.1 Configuration
A bar chart can be configured in different ways:
• Via Engineering [} 148]
◦ Array of numbers
◦ Array of arrays of numbers
• Via an array from the PLC [} 148]
aVaules : ARRAY [1..10] OF INT;
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 [} 149]' 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 [} 149]' dialog.
4. Define the number of members of the array and their values using the 'Bar Graph Data [} 149]' dialog.
Definition via an array from the PLC:
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 [} 148]' 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: Barchart [} 1328]
5.10.2.3.2 Dialogs
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>>'.
148 Version: 2.5.1 TE2000


Add a new object
Category: Colors
Name Description
Bar color Definition of the color of the bar graph
Legend name Definition of the legend name
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.
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
Bar Graph Description Dialog

Use this dialog you define the color of the bar graphs and their legend name. The objects are assigned to the
arrays of the data sets sequentially in case of data structure 'Array<Array<number>>'.
Add a new object
TE2000 Version: 2.5.1 149

Category: Colors
Name Description
BarGraphColors
Defines the colors of the graphs. Can be overwritten using the attribute BarGraphDescription.
Schema (version 1.8): tchmi:framework#/definitions/ChartBarGraphColorList
Schema (version 1.12): tchmi:framework#/definitions/

TcHmi.Controls.Beckhoff.TcHmiBarChart.ChartBarGraphColorList
Origin: Bar Chart [} 139]
See also
Attribute getter: getBarGraphColors
Attribute setter: setBarGraphColors
Note: Available from version 1.8
Note: Version 1.12
This attribute is considered obsolete. Please use the attribute BarGraphDescription instead.
BarGraphData
Schema (version 1.8): tchmi:framework#/definitions/ChartBarGraphDataDefinitionList

TcHmi.Controls.Beckhoff.TcHmiBarChart.ChartBarGraphDataDefinitionList
See also
Attribute getter: getBarGraphData
Attribute setter: setBarGraphData
BarGraphWidth
See also
Attribute getter: getBarGraphWidth
150 Version: 2.5.1 TE2000

Attribute setter: setBarGraphWidth
GridBackgroundColor
Schema: tchmi:framework#/definitions/SolidColor
See also
Attribute getter: getGridBackgroundColor
Attribute setter: setGridBackgroundColor
GridLineColor
See also
Attribute getter: getGridLineColor
Attribute setter: setGridLineColor
GridLineStyle
Schema (version 1.10): tchmi:framework#/definitions/ChartLineStyle
Schema (version 1.12): tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.ChartLineStyle
See also
Attribute getter: setGridLineStyle
Attribute setter: getGridLineStyle
GridLineWidth
See also
Attribute getter: getGridLineWidth
Attribute setter: setGridLineWidth
TE2000 Version: 2.5.1 151

ShowGrid
See also
Attribute getter: getShowGrid
Attribute setter: setShowGrid
GridShowHorizontalLines
See also
Attribute getter: getGridShowHorizontalLines
Attribute setter: setGridShowHorizontalLines
GridShowVerticalLines
See also
Attribute getter: getGridShowVerticalLines
Attribute setter: setGridShowVerticalLines
SubgridShowHorizontalLines
See also
Attribute getter: getSubgridShowHorizontalLines
Attribute setter: setSubgridShowHorizontalLines
SubgridShowVerticalLines
152 Version: 2.5.1 TE2000

See also
Attribute getter: getSubgridShowVerticalLines
Attribute setter: setSubgridShowVerticalLines
Note: From version 1.12
This attribute is no longer available.
ShowXAxis
See also
Attribute getter: getShowXAxis
Attribute setter: setShowXAxis
XShowLabels
See also
Attribute getter: getXShowLabels
Attribute setter: setXShowLabels
ShowXSubTicks
See also
Attribute getter: getShowXSubTicks
Attribute setter: setShowXSubTicks
TE2000 Version: 2.5.1 153

This attribute is no longer available. Removed in version 1.12.744.2.
ShowYAxis
See also
Attribute getter: getShowYAxis
Attribute setter: setShowYAxis
YShowLabels
See also
Attribute getter: getYShowLabels
Attribute setter: setYShowLabels
ShowYAxisName
See also
Attribute getter: getShowYAxisName
Attribute setter: setShowYAxisName
ShowYSubTicks
See also
Attribute getter: getShowYSubTicks
Attribute setter: setShowYSubTicks
154 Version: 2.5.1 TE2000

SubgridLineColor
See also
Attribute getter: getSubgridLineColor
Attribute setter: setSubgridLineColor
SubgridLineStyle
Schema (Note: version 1.10): tchmi:framework#/definitions/ChartLineStyle
Schema (Note: version 1.12): tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.ChartLineStyle
See also
Attribute getter: setSubGridLineStyle
Attribute setter: getSubGridLineStyle
SubgridLineWidth
See also
Attribute getter: getSubgridLineWidth
Attribute setter: setSubgridLineWidth
XAxisAutoScaling
See also
Attribute getter: getXAxisAutoScaling
Attribute setter: setXAxisAutoScaling
TE2000 Version: 2.5.1 155

XAxisColor
See also
Attribute getter: getXAxisColor
Attribute setter: setXAxisColor
XAxisDecimalPlaces
See also
Attribute getter: getXAxisDecimalPlaces
Attribute setter: setXAxisDecimalPlaces
XLabelFontColor
See also
Attribute getter: getXLabelFontColor
Attribute setter: setXLabelFontColor
XLabelFontFamily
Comma-separated list of fonts as font family or keyword: 'serif', 'sans-serif', 'monospace'.
Schema: tchmi:framework#/definitions/FontFamily
See also
Attribute getter: getXLabelFontFamily
Attribute setter: setXLabelFontFamily
156 Version: 2.5.1 TE2000

XLabelFontSize
The font size. If the percent is specified as the unit, this is relative to the font size of the parent element.
Schema: tchmi:framework#/definitions/MeasurementValue
See also
Attribute getter: getXLabelFontSize
Attribute setter: setXLabelFontSize
XLabelFontSizeUnit
Pixels, or percent for relative sizes.
Schema: tchmi:framework#/definitions/MeasurementUnit
See also
Attribute getter: getXLabelFontSizeUnit
Attribute setter: setXLabelFontSizeUnit
XLabelFontWeight
Font weight (normal, bold).
Schema: tchmi:framework#/definitions/FontWeight
See also
Attribute getter: getXLabelFontWeight
Attribute setter: setXLabelFontWeight
XMainTickMaxValue
See also
Attribute getter: getXMainTickMaxValue
Attribute setter: setXMainTickMaxValue
TE2000 Version: 2.5.1 157

XMainTickMinValue
See also
Attribute getter: getXMainTickMinValue
Attribute setter: setXMainTickMinValue
XMainTickSteps
See also
Attribute getter: getXMainTickSteps
Attribute setter: setXMainTickSteps
XSubTickSteps
See also
Attribute getter: getXSubTickSteps
Attribute setter: setXSubTickSteps
This attribute is no longer available. Removed in version 1.12.744.2.
XAxisWidth
See also
Attribute getter: getXAxisWidth
Attribute setter: setXAxisWidth
158 Version: 2.5.1 TE2000

XAxisFormat
Schema:tchmi:framework#/definitions/Function
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. To do this, it receives the index of the BarGraphData [} 150] attribute.
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.
[ Function ]
XAxisFormat(value: number): string;
Parameter
Name Type Description
value number The current index of the value on
the X-axis.
Return value
Type Description
string The new value of the main X-axis subdivision. HTML
is not allowed here.
See also
Available from version 1.10
YAxisAutoScaling
See also
Attribute getter: getYAxisAutoScaling
Attribute setter: setYAxisAutoScaling
YAxisColor
TE2000 Version: 2.5.1 159

See also
Attribute getter: getYAxisColor
Attribute setter: setYAxisColor
YAxisDecimalPlaces
See also
Attribute getter: getYAxisDecimalPlaces
Attribute setter: setYAxisDecimalPlaces
YLabelFontColor
See also
Attribute getter: getYLabelFontColor
Attribute setter: setYLabelFontColor
YLabelFontFamily
See also
Attribute getter: getYLabelFontFamily
Attribute setter: setYLabelFontFamily
YLabelFontSize
160 Version: 2.5.1 TE2000

See also
Attribute getter: getYLabelFontSize
Attribute setter: setYLabelFontSize
YLabelFontSizeUnit
See also
Attribute getter: getYLabelFontSizeUnit
Attribute setter: setYLabelFontSizeUnit
YLabelFontWeight
See also
Attribute getter: getYLabelFontWeight
Attribute setter: setYLabelFontWeight
YLabelFontWeight
See also
Attribute getter: getYMainTickMaxValue
Attribute setter: setYMainTickMaxValue
YMainTickMinValue
TE2000 Version: 2.5.1 161

See also
Attribute getter: getYMainTickMinValue
Attribute setter: setYMainTickMinValue
YMainTickSteps
See also
Attribute getter: getYMainTickSteps
Attribute setter: setYMainTickSteps
YAxisName
See also
Attribute getter: getYAxisName
Attribute setter: setYAxisName
YAxisNameFontColor
See also
Attribute getter: getYAxisNameFontColor
Attribute setter: setYAxisNameFontColor
YAxisNameFontFamily
See also
Attribute getter: getYAxisNameFontFamily
162 Version: 2.5.1 TE2000

Attribute setter: setYAxisNameFontFamily
YAxisNameFontSize
See also
Attribute getter: getYAxisNameFontSize
Attribute setter: setYAxisNameFontSize
YAxisNameFontSizeUnit
See also
Attribute getter: getYAxisNameFontSizeUnit
Attribute setter: setYAxisNameFontSizeUnit
YAxisNameFontWeight
See also
Attribute getter: getYAxisNameFontWeight
Attribute setter: setYAxisNameFontWeight
YSubTickSteps
See also
Attribute getter: getYSubTickSteps
TE2000 Version: 2.5.1 163

Attribute setter: setYSubTickSteps
YAxisUnit
See also
Attribute getter: getYAxisUnit
Attribute setter: setYAxisUnit
YAxisWidth
See also
Attribute getter: getYAxisWidth
Attribute setter: setYAxisWidth
YPosition
Schema (version 1.8): tchmi:framework#/definitions/ChartBarGraphPosition

TcHmi.Controls.Beckhoff.TcHmiBarChart.ChartBarGraphPosition
See also
Attribute getter: getYPosition
Attribute setter: setYPosition
SectionsBackgroundColor
See also
Attribute getter: getSectionsBackgroundColor
Attribute setter: setSectionsBackgroundColor
164 Version: 2.5.1 TE2000

XAxisNameFontColor
See also
Attribute getter: getXAxisNameFontColor
Attribute setter: setXAxisNameFontColor
BarGraphDescription
Defines the colors of the graphs. Replaces the attribute BarGraphColors [} 150].
Schema: tchmi:framework#/definitions/
TcHmi.Controls.Beckhoff.TcHmiBarChart.ChartBarGraphDescriptionDefinitionList
See also
Attribute getter: getBarGraphDescription
Attribute setter: setBarGraphDescription
This attribute replaces the attribute BarGraphColors [} 150].
ShowLegend
See also
Attribute getter: getShowLegend
Attribute setter: setShowLegend
TE2000 Version: 2.5.1 165

BarGraphArrangement
TcHmi.Controls.Beckhoff.TcHmiBarChart.ChartBarGraphArrangement
See also
Attribute getter: getBarGraphArrangement
Attribute setter: setBarGraphArrangement
ShowXAxisName
See also
Attribute getter: getShowXAxisName
Attribute setter: setShowXAxisName
XAxisName
See also
Attribute getter: getXAxisName
Attribute setter: setXAxisName
XAxisUnit
166 Version: 2.5.1 TE2000

See also
Attribute getter: getXAxisUnit
Attribute setter: setXAxisUnit
XAxisNameFontFamily
See also
Attribute getter: getXAxisNameFontFamily
Attribute setter: setXAxisNameFontFamily
XAxisNameFontSize
See also
Attribute getter: getXAxisNameFontSize
Attribute setter: setXAxisNameFontSize
XAxisNameFontSizeUnit
See also
Attribute getter: getXAxisNameFontSizeUnit
TE2000 Version: 2.5.1 167

Attribute setter: setXAxisNameFontSizeUnit
XAxisNameFontWeight
See also
Attribute getter: getXAxisNameFontWeight
Attribute setter: setXAxisNameFontWeight
5.10.2.3.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.
DefaultGraphColor
This is the default color used for graphs when nothing is defined in the BarGraphColors [} 150] attribute.
5.10.2.4 Button
The button is a simple switching element that provides visual feedback when the background is switched.
Attributes
Category: Colors
Name Description
Category: Layout
168 Version: 2.5.1 TE2000

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
TE2000 Version: 2.5.1 169

Name Description
be displayed
is to be displayed
Category: Common
170 Version: 2.5.1 TE2000

Name Description
Text [} 177] Definition of the text displayed in the button
StateSymbol [} 179] 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.

Category: Border
Name Description
them off
control
control
Category: Icon
Name Description
Icon [} 176] Definition of an optional image in the button
IconWidth [} 178] Definition of the width of the icon
IconWidthUnit [} 178] Definition of the unit of the width:
IconHeight [} 175] Definition of the height of the icon
IconHeightUnit [} 176] Definition of the unit of height:
IconHorizontalAlignment [} 176] Selecting the horizontal alignment of the icon within
the control
IconVerticalAlignment [} 178] Selecting the vertical alignment of the icon within the
control
IconPadding [} 177] Definition of the distance of the icon to the border
TE2000 Version: 2.5.1 171

Name Description
background color
image:
image:
four sides
Category: Text
Name Description
TextColor [} 177] Definition of the text color
TextFontFamily [} 174] Definition of the font using the name of the font family
or the keyword
TextFontSize [} 174] Definition of the font size
TextFontSizeUnit [} 175] Definition of the font size unit:
TextFontStyle [} 175] Selecting the font style:
• Normal
• Italic: italic
• Oblique: slanted
TextFontWeight [} 175] Selecting the font weight of the text:
• Normal
• Bold: Bold
TextPadding [} 177] Definition of the distance of the text to the border
TextVerticalAlignment [} 178] Selecting the vertical alignment of the text
TextHorizontalAlignment [} 176] Selecting the horizontal alignment of the text
WordWrap [} 179] Selecting whether the text wraps if it is too long for
one row
Events
Category: Framework
172 Version: 2.5.1 TE2000

Name Description
window.
Category: Operator
Name Description
onStateChanged [} 179] The pressed state has changed.
onStatePressed [} 179] The pressed state has changed from not pressed to
pressed.
onStateReleased [} 180] The pressed state has changed from pressed to not
pressed.
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
TE2000 Version: 2.5.1 173

Access rights
Name Description
observable.
Control [} 690]
Button
See also
TextFontFamily
Origin: Button [} 168]
See also
Attribute getter: getTextFontFamily
Attribute setter: setTextFontFamily
TextFontSize
See also
Attribute getter: getTextFontSize
Attribute setter: setTextFontSize
174 Version: 2.5.1 TE2000

TextFontSizeUnit
See also
Attribute getter: getTextFontSizeUnit
Attribute setter: setTextFontSizeUnit
TextFontStyle
Font style (normal, italic: oblique with special characters, oblique)
Schema: tchmi:framework#/definitions/FontStyle
See also
Attribute getter: getTextFontStyle
Attribute setter: setTextFontStyle
TextFontWeight
See also
Attribute getter: getTextFontWeight
Attribute setter: setTextFontWeight
IconHeight
Numerical value of the image height of the icon.
See also
Attribute getter: getIconHeight
Attribute setter: setIconHeight
TE2000 Version: 2.5.1 175

IconHeightUnit
Pixels, or percent for relative positioning.
See also
Attribute getter: getIconHeightUnit
Attribute setter: setIconHeightUnit
IconHorizontalAlignment
Horizontal alignment of the icon.
Schema: tchmi:framework#/definitions/HorizontalAlignment
See also
Attribute getter: getIconHorizontalAlignment
Attribute setter: setIconHorizontalAlignment
TextHorizontalAlignment
Horizontal alignment of the text.
See also
Attribute getter: getTextHorizontalAlignment
Attribute setter: setTextHorizontalAlignment
Icon
Defines an optional image in the button.
Schema: tchmi:framework#/definitions/Path
See also
Attribute getter: getIcon
176 Version: 2.5.1 TE2000

Attribute setter: setIcon
IconPadding
Defines the distance of the icon to the border.
Schema: tchmi:framework#/definitions/Padding
See also
Attribute getter: getIconPadding
Attribute setter: setIconPadding
TextPadding
Defines the distance of the text to the border.
See also
Attribute getter: getTextPadding
Attribute setter: setTextPadding
Text
See also
Attribute getter: getText
Attribute setter: setText
TextColor
See also
Attribute getter: getTextColor
Attribute setter: setTextColor
TE2000 Version: 2.5.1 177

IconVerticalAlignment
Vertical alignment of the icon.
Schema: tchmi:framework#/definitions/VerticalAlignment
See also
Attribute getter: getIconVerticalAlignment
Attribute setter: setIconVerticalAlignment
TextVerticalAlignment
Vertical alignment of the text.
See also
Attribute getter: getTextVerticalAlignment
Attribute setter: setTextVerticalAlignment
IconWidth
Numerical value of the image width of the icon.
See also
Attribute getter: getIconWidth
Attribute setter: setIconWidth
IconWidthUnit
See also
Attribute getter: getIconWidthUnit
178 Version: 2.5.1 TE2000

Attribute setter: setIconWidthUnit
WordWrap
Text wrapping if the content is too long to fit in a single row.
See also
Attribute getter: getWordWrap
Attribute setter: setWordWrap
StateSymbol
Reflects the pressed state of the button for the assigned symbol and vice versa.
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.
Schema (Version 1.10): tchmi:framework#/definitions/TcHmiButtonStateSymbol
Schema (version 1.12): tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.TcHmiButton.StateSymbol
See also
Attribute getter: getStateSymbol
Attribute setter: setStateSymbol
5.10.2.4.2 Events
onStateChanged
The pressed state has changed.
onStatePressed
The pressed state has changed from not pressed to pressed.
TE2000 Version: 2.5.1 179

onStateReleased
The pressed state has changed from pressed to not pressed.
5.10.2.5 Checkbox
A checkbox has a ToggleState [} 186] parameter. This parameter has the value "Normal" if no checkmark is
set and "Active" if the checkmark is set.
The .onToggleStateChanged [} 190] event can be used to perform actions when the state of the checkbox
changes.
Attributes
Category: Colors
Name Description
ToggleStateIconColor [} 187] Definition of the color of the toggle state icon.
TextColor [} 189] Definition of the text color.
TextBackgroundColor [} 189] Definition of the text background color.
Category: Layout
180 Version: 2.5.1 TE2000

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
TE2000 Version: 2.5.1 181

Name Description
be displayed
is to be displayed
Category: Common
182 Version: 2.5.1 TE2000

Name Description
StateSymbol [} 186] Reflects the state of the checkbox to the assigned
symbol and vice versa.
ToggleState [} 186] Definition of the internal switching state of the control
ToggleGroup [} 186] User-defined name for a group. Only one control in
this group can be active.
Text [} 187] The text to be displayed next to the checkbox.
Category: Border
Name Description
them off
control
control

Name Description
background color
image:
image:
four sides
Category: Text
TE2000 Version: 2.5.1 183

Name Description
TextPosition [} 187] The text position.
TextHorizontalAlignment [} 187] The horizontal alignment of the text.
TextVerticalAlignment [} 188] The vertical alignment of the text.
TextFontFamily [} 188] Comma-separated list of fonts as font family or
keyword: 'serif', 'sans-serif', 'monospace'.
TextFontSize [} 188] The font size. If the percent is specified as the unit,
this is relative to the font size of the parent element.
TextFontSizeUnit [} 188] Pixels, or percent for relative sizes.
TextFontStyle [} 189] Font style (normal, italic: oblique with special
characters, oblique)
TextFontWeight [} 189] The font weight (normal, bold)
Events
Category: Control
Name Description
onToggleStateChanged [} 190] The ToggleState value of the checkbox has changed.
onStateChanged [} 190] The status of the checkbox has changed.
Category: Framework
Name Description
window.
Category: Operator
184 Version: 2.5.1 TE2000

Name Description
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
Access rights
Name Description
observable.
Control [} 690]
Checkbox
See also
TE2000 Version: 2.5.1 185

StateSymbol
Reflects the state of the checkbox to the assigned symbol and vice versa.
Schema (version 1.10): tchmi:framework#/definitions/TcHmiCheckboxStateSymbol

TcHmi.Controls.Beckhoff.TcHmiCheckbox.StateSymbol
Origin: Checkbox [} 180]
See also
ToggleState
Internal state of the control. This can be Normal or Active.
Schema: tchmi:framework#/definitions/ToggleState
See also
Attribute getter: getToggleState
Attribute setter: setToggleState
ToggleGroup
User-defined name for a group.
A ToggleGroup can consist of controls of the type Toggle Button [} 621] and Checkbox. [} 180]
For a more detailed description of the functionality, see the documentation at the ToggleGroup attribute of
the ToggleButton [} 628].
See also
Attribute getter: getToggleGroup
Attribute setter: setToggleGroup
186 Version: 2.5.1 TE2000

ToggleStateIconColor
See also
Attribute getter: getToggleStateIconColor
Attribute setter: setToggleStateIconColor
Text
The text to be displayed next to the checkbox.
See also
TextPosition
The text position.
Schema: tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.TcHmiCheckbox.TextPosition
See also
Attribute getter: getTextPosition
Attribute setter: setTextPosition
The horizontal alignment of the text.
See also
TE2000 Version: 2.5.1 187

The vertical alignment of the text.
See also
TextFontFamily
See also
TextFontSize
See also
TextFontSizeUnit
See also
188 Version: 2.5.1 TE2000

TextFontStyle
See also
TextFontWeight
The font weight (normal, bold)
See also
TextColor
Definition of the text color.
See also
TextBackgroundColor
Definition of the text background color.
Schema: tchmi:framework#/definitions/Color
See also
Attribute getter: getTextBackgroundColor
TE2000 Version: 2.5.1 189

Attribute setter: setTextBackgroundColor
5.10.2.5.2 Events
onToggleStateChanged
The ToggleState [} 186] value of the checkbox has changed.
onStateChanged
The state has changed.
5.10.2.6 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 [} 111] with small containers.
Attributes
Category: Colors
Name Description
DropDownTextColor [} 201] Definition of the text color in the drop-down list
DropDownBackgroundColor [} 199] Definition of the background color of the drop-down
list
DropDownHighlightColor [} 200] Definition of the highlight color of the background of a
selected entry in the drop-down list
DropDownHighlightTextColor [} 200] Definition of the highlight color of the text of a
DropDownToggleButtonBackgroundColor [} 201] Definition of the color of the button to expand the
drop-down list
DropDownToggleButtonArrowColor [} 201] Definition of the color of the arrow of the button to
expand the drop-down list
Category: Layout
190 Version: 2.5.1 TE2000

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
TE2000 Version: 2.5.1 191

Name Description
be displayed
is to be displayed

Category: Common
192 Version: 2.5.1 TE2000

Name Description
Category: Border
Name Description
them off
control
control

Name Description
background color
image:
image:
four sides
Category: Data
TE2000 Version: 2.5.1 193

Name Description
SrcData [} 206] Definition of data for the list entries
Text [} 206] Definition of the text that is displayed if free text entry
is allowed
AllowTextInput [} 207] Definition as to whether free text entry is to be
allowed
ComboboxText [} 198] Definition of the text that is displayed if no entry is
selected
SelectedIndex [} 205] Definition of the selected entry via its index. The first
entry in a drop-down list starts at index 0.
ContentPadding [} 207] Defines the distance of the text to the border.
Category: Text
Name Description
or the keyword
TextFontSizeUnit [} 203] Selecting the font size unit
• Normal
• Italic: italic
TextFontWeight [} 203] Selecting the font weight
• Normal
• Bold: Bold
TextVerticalAlignment [} 204] Definition of the vertical alignment of the text
Category: DropDown
194 Version: 2.5.1 TE2000

Name Description
DropDownHorizontalAlignment [} 201] Selecting the horizontal alignment of the text in the
drop-down list
DropDownVerticalAlignment [} 202] Selecting the vertical alignment of the text in the
drop-down list
DataHeight [} 198] Definition of the height of the entries in the drop-down
menu
DataHeightUnit [} 198] Selecting the unit of the height of the list items
List Height [} 204] Definition of the maximum height of the drop-down
list
List Height Unit [} 204] Selecting the unit of the drop-down list height
DropDownFontFamily [} 199] Definition of the font of the list items via the name of
the font family or the keyword
DropDownFontSize [} 199] Definition of the font size of the list items
DropDownFontSizeUnit [} 199] Selecting the font size unit
DropDownFontStyle [} 200] Selecting the font style:
• Normal
• Italic: italic
DropDownFontWeight [} 200] Selecting the font weight of the text entries:
• Normal
• Bold: Bold
drop-down list
DropDownStyle [} 202] Defines the position of the drop-down menu
Events
Category: Framework
Name Description
window.
Category: Operator
TE2000 Version: 2.5.1 195

Name Description
onSelectionChanged [} 207] An entry has been selected.
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
Access rights
Name Description
observable.
Control [} 690]
Combo box
See also
196 Version: 2.5.1 TE2000

The combo box drop-down list can be configured in three different ways:
◦ 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 [} 197].
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 [} 197]' 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.
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: Combobox [} 1328]
5.10.2.6.2 Dialogs
ComboboxSrcData dialog
This dialog can be used to define the entries of a combo box in the Engineering.
TE2000 Version: 2.5.1 197


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
DataHeight
Origin: Combo box [} 190]
See also
Attribute getter: getDataHeight
Attribute setter: setDataHeight
DataHeightUnit
Only pixel is allowed here.
Schema: tchmi:framework#/definitions/PixelUnit
See also
Attribute getter: getDataHeightUnit
Attribute setter: setDataHeightUnit
ComboboxText
The text that is displayed if no entry is selected.
198 Version: 2.5.1 TE2000

See also
Attribute getter: getComboboxText
Attribute setter: setComboboxText
DropDownBackgroundColor
See also
Attribute getter: getDropDownBackgroundColor
Attribute setter: setDropDownBackgroundColor
DropDownFontFamily
See also
Attribute getter: getDropDownFontFamily
Attribute setter: setDropDownFontFamily
DropDownFontSize
See also
Attribute getter: getDropDownFontSize
Attribute setter: setDropDownFontSize
DropDownFontSizeUnit
TE2000 Version: 2.5.1 199

See also
Attribute getter: getDropDownFontSizeUnit
Attribute setter: setDropDownFontSizeUnit
DropDownFontStyle
See also
Attribute getter: getDropDownFontStyle
Attribute setter: setDropDownFontStyle
DropDownFontWeight
See also
Attribute getter: getDropDownFontWeight
Attribute setter: setDropDownFontWeight
DropDownHighlightColor
See also
Attribute getter: getDropDownHighlightColor
Attribute setter: setDropDownHighlightColor
DropDownHighlightTextColor
200 Version: 2.5.1 TE2000

See also
Attribute getter: getDropDownHighlightTextColor
Attribute setter: setDropDownHighlightTextColor
DropDownHorizontalAlignment
See also
Attribute getter: getDropDownHorizontalAlignment
Attribute setter: setDropDownHorizontalAlignment
DropDownTextColor
See also
Attribute getter: getDropDownTextColor
Attribute setter: setDropDownTextColor
DropDownToggleButtonArrowColor
See also
Attribute getter: getDropDownToggleButtonArrowColor
Attribute setter: setDropDownToggleButtonArrowColor
DropDownToggleButtonBackgroundColor
See also
Attribute getter: getDropDownToggleButtonBackgroundColor
Attribute setter: setDropDownToggleButtonBackgroundColor
TE2000 Version: 2.5.1 201

DropDownVerticalAlignment
See also
Attribute getter: getDropDownVerticalAlignment
Attribute setter: setDropDownVerticalAlignment
DropDownStyle
Defines the position of the drop-down menu.
• "Desktop" is the classic representation at the position of the control.
• "Mobile" is the representation in the middle of an overlay in the screen, which is separated from the
background.
Schema (version 1.10): tchmi:framework#/definitions/DropDownStyle

TcHmi.Controls.Beckhoff.TcHmiCombobox.DropDownStyle
See also
Attribute getter: getDropDownStyle
Attribute setter: setDropDownStyle
TextFontFamily
See also
TextFontSize
202 Version: 2.5.1 TE2000

See also
TextFontSizeUnit
See also
TextFontStyle
See also
TextFontWeight
See also
TE2000 Version: 2.5.1 203

See also
See also
MaxListHeight
Defines the height of the combo box.
See also
Attribute getter: getMaxListHeight
Attribute setter: setMaxListHeight
MaxListHeightUnit
Only pixel is allowed here.
See also
Attribute getter: getMaxListHeightUnit
Attribute setter: setMaxListHeightUnit
204 Version: 2.5.1 TE2000

SelectedId
ID [} 206] of the currently selected entry. This ID must be unique within the defined entries.
Schema: tchmi:general#/definitions/UDINT
Origin: Combobox [} 190]
See also
Attribute getter: getSelectedId
Attribute setter: setSelectedId
SelectedIndex
Index [} 206] of the currently selected entry. The first entry in a drop-down list starts at index 0.
See also
Attribute getter: getSelectedIndex
Attribute setter: setSelectedIndex
SelectedText
Display text [} 206] of the currently selected entry.
See also
Attribute getter: getSelectedText
SelectedValue
Value [} 206] of the currently selected entry.
See also
Attribute getter: getSelectedValue
TE2000 Version: 2.5.1 205

SrcData
Data for the options menu.
A simple list of options can be compiled in the Engineering. Each option consists of these components:
• ID [} 205]: Custom ID
• Text [} 205]: Display text
• Value [} 205]: Value that can be passed on later within the application.
• Category (version 1.12.744): An optional category of the value, which is displayed in the DropDown of
the control.
Further, complex data are supported by using Binding [} 103] for this parameter.
• 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.
Schema (version 1.8): tchmi:framework#/definitions/ListItemList
Schema (version 1.12): tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.TcHmiCombobox.ListItemList
See also
Attribute getter: getSrcData
Attribute setter: setSrcData
TextColor
See also
Text
The text that is displayed when text input is allowed.
See also
206 Version: 2.5.1 TE2000

AllowTextInput
Definition of whether free text entries are allowed.
See also
Attribute getter: getAllowTextInput
Attribute setter: setAllowTextInput
ContentPadding
See also
Attribute getter: getContentPadding
Attribute setter: setContentPadding
5.10.2.6.4 Events
onSelectionChanged
A new entry has been selected.
5.10.2.7 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.
Attributes
Category: Colors
TE2000 Version: 2.5.1 207

Name Description
HeaderBackgroundColor [} 225] Definition of the background color of the header row
HeaderTextColor [} 227] Definition of the text color of the column headers
RowNumbersBackgroundColor [} 228] Definition of the background color of the column for
row numbering
RowNumbersTextColor [} 230] Definition of the text color of the row numbering
TableBorderColor [} 233] Definition of the grid color
Category: Layout
208 Version: 2.5.1 TE2000

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
TE2000 Version: 2.5.1 209

Name Description
be displayed
is to be displayed
Category: Common
210 Version: 2.5.1 TE2000

Name Description
DataSymbol [} 223] Defines a symbol as data source.
Category: Border
Name Description
them off
control
control

Name Description
background color
image:
image:
four sides
Category: Data
TE2000 Version: 2.5.1 211

Name Description
SrcColumn [} 232] Definition of column options - the assignment of
options to rows is based on the order in the Column
Definitions dialog [} 216]
SrcData [} 233] Definition of the data to be displayed in the DataGrid
SelectedColumnIndex [} 231] Definition of the selected column using the column
index
SelectedRowIndex [} 232] Definition of the selected row using the row index
Sorting [} 233] Defines sorting rules for sorting the displayed data.
Filter [} 234] Defines filter rules that are applied to read access to
the DataSymbol when using DataSymbol.
Category: Grid
Name Description
RowHeight [} 227] Definition of the row height
RowHeightUnit [} 228] Definition of the unit of the row height:
TableBorderWidth [} 234] Definition of the line width of the grid
TableBorderWidthUnit [} 225] Selecting the unit of the line width:
TableBorderStyle [} 234] Selecting the style of the grid lines
CellContentPadding [} 223] Definition of the distance of the text to the edge of the
cell
GridFontFamily [} 223] Definition of the font using the name of the font family
or the keyword
GridFontSize [} 224] Definition of the font size of the table contents
GridFontSizeUnit [} 224] Definition of the font size unit:
GridFontStyle [} 224] Selecting the font style of the table contents:
• Normal
• Italic: italic
GridFontWeight [} 224] Selecting the font weight of the table contents:
• Normal
• Bold: bold
SrcDataHasChanged [} 233] Indicates whether the user has changed the data.
SelectedRowValue [} 232] The value of the selected row.
SelectedCellValue [} 231] The value of the selected cell.
Category: Header
Name Description
Category: Row Numbers
212 Version: 2.5.1 TE2000

Name Description
ShowRowNumbers [} 232] Selecting whether the row numbering is to be
displayed
RowNumbersResizable [} 230] Selecting whether the width of the columns can be
changed at runtime using the separators in the
column header row
RowNumbersWidth [} 231] Definition of the width of the row numbering column
RowNumbersWidthUnit [} 231] Selecting the unit of column width:
RowNumbersCellPadding [} 228] Definition of the distance of the numbering to the
edge of the cell
RowNumbersFontFamily [} 228] Definition of the font using the name of the font family
or the keyword
RowNumbersFontSize [} 229] Definition of the font size of the row numbering
RowNumbersFontSizeUnit [} 229] Definition of the font size unit:
RowNumbersFontStyle [} 229] Definition of the font style of the row numbering:
• Normal
• Italic
• Oblique
RowNumbersFontWeight [} 229] Definition of the font weight of the row numbering:
• Normal
• Bold
RowNumbersHorizontalAlignment [} 230] Definition of horizontal alignment of row numbering
RowNumbersVerticalAlignment [} 230] Definition of vertical alignment of row numbering
RowNumbersStartNumber [} 235] Start value of the series numbering.
Category: Table Border

Name Description
Events
Category: Framework
Name Description
window.
Category: Operator
TE2000 Version: 2.5.1 213

Name Description
onDataChanged [} 235] The data has been changed.
onSelectedItemChanged [} 235] Another entry is now selected.
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
Access rights
Name Description
observable.
Control [} 690]
Datagrid
See also
214 Version: 2.5.1 TE2000

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 [} 233]" of the category "Data".
3. Change the column settings for the "SrcColumns [} 232]" attribute in the "Data" category using the Col-
umn Definitions dialog [} 216].
4. Remove the default columns.
5. Add a new column of type "SimpleColumnDefinition".
6. The column can then be configured.
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 [} 233]" of the category "Data".
3. Change the column settings for the "SrcColumns [} 232]" attribute in the "Data" category using the Col-
umn Definitions dialog [} 216].
4. Define the desired number of columns of type "ColumnDefinitnion" and their order.
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.
For nested structures, you can use "::" as a separator to access the sub-elements of the structure, for
example, "myStruct::myStructMember".
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 [} 235]" event.
3. Add a "WriteToSymbol [} 63]" action.
4. Link the first parameter to your array.
5. Link the second parameter with the attribute "TcHmiDatagrid::SrcData".
TE2000 Version: 2.5.1 215

Sample: Datagrid [} 1328]
5.10.2.7.2 Dialogs
Column Definitions dialog

This dialog can be used to customize the data grid column settings.
216 Version: 2.5.1 TE2000

TE2000 Version: 2.5.1 217

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 Selection of controls to be displayed for the cell:
• TextBlock [} 571]
• TextBox [} 580]
• CheckBox [} 180]
• ComboBox [} 190]
• Image [} 333]
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.
Format Formatting function [} 850] that can convert the
displayed value.

Add a new object
Show combo box

The data grid offers the possibility to display a column as a combo box.
218 Version: 2.5.1 TE2000

1. Select the Combobox control type.

2. Open the Data definitions dialog by clicking the ... button.
In the Data definitions dialog you can add as many entries as you like.
TE2000 Version: 2.5.1 219

1. Text: Text that is displayed for the combo box entry.

2. Value: Value used to select the combo box entry.
3. Add: Adds a new combo box entry.
After configuration, the combobox automatically displays the text stored for the respective value. The data
structure specifies from the outside the value used to select the entry in the combo box.
The following sample is based on the default configuration of the data grid. The code can be copied under
the attribute SrcData: [} 233]
[
{
"Test1": "Example Data",
"Test2": 42,
"Test3": true,
"Test4": "42"
},
{
"Test2": 3.1415,
"Test3": false,
"Test4": "43"
}
]
This results in the following view:
220 Version: 2.5.1 TE2000

Show image
The data grid offers the possibility to display a column as an image.
1. Select the "Image" control type.

2. Open the "Data definitions" dialog by clicking the "..." button.
In the "Data definitions" dialog you can add as many entries as you like.
TE2000 Version: 2.5.1 221

1. Text: Name of the image. This property is used for clarity and is not displayed in the data grid.
2. Value: Value that controls which image is displayed.
3. Source: Path to the image to be displayed.
4. Width / Height: Width and height at which the image is to be displayed in the column.
5. Add: Adds a new image entry.
After configuration, the column automatically displays the image that is stored for the respective value. The
data structure specifies from the outside the value used to load the different images.
The following sample is based on the default configuration of the data grid. The code can be copied under
the attribute SrcData: [} 233]
[
{
"Test2": 42,
"Test3": true,
"Test4": "42"
},
{
"Test2": 3.1415,
"Test3": false,
"Test4": "43"
}
]
This results in the following view:
222 Version: 2.5.1 TE2000

CellContentPadding
Defines the distance of the cells to the border.
Origin: Datagrid [} 207]
See also
Attribute getter: getCellContentPadding
Attribute setter: setCellContentPadding
DataSymbol
Defines a symbol as data source.
Schema: tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.TcHmiDatagrid.DataSymbol
See also
Attribute getter: getDataSymbol
Attribute setter: setDataSymbol
GridFontFamily
See also
Attribute getter: getGridFontFamily
Attribute setter: setGridFontFamily
TE2000 Version: 2.5.1 223

GridFontSize
See also
Attribute getter: getGridFontSize
Attribute setter: setGridFontSize
GridFontSizeUnit
See also
Attribute getter: getGridFontSizeUnit
Attribute setter: setGridFontSizeUnit
GridFontStyle
See also
Attribute getter: getGridFontStyle
Attribute setter: setGridFontStyle
GridFontWeight
See also
Attribute getter: getGridFontWeight
Attribute setter: setGridFontWeight
224 Version: 2.5.1 TE2000

GridWidthUnit
See also
Attribute getter: getGridWidthUnit
Attribute setter: setGridWidthUnit
HeaderBackgroundColor
See also
Attribute getter: getHeaderBackgroundColor
Attribute setter: setHeaderBackgroundColor
HeaderCellPadding
Defines the distance between the header and the border.
See also
Attribute getter: getHeaderCellPadding
Attribute setter: setHeaderCellPadding
HeaderFontFamily
See also
Attribute getter: getHeaderFontFamily
Attribute setter: setHeaderFontFamily
TE2000 Version: 2.5.1 225

HeaderFontSize
See also
Attribute getter: getHeaderFontSize
Attribute setter: setHeaderFontSize
HeaderFontSizeUnit
See also
Attribute getter: getHeaderFontSizeUnit
Attribute setter: setHeaderFontSizeUnit
HeaderFontStyle
See also
Attribute getter: getHeaderFontStyle
Attribute setter: setHeaderFontStyle
HeaderFontWeight
See also
Attribute getter: getHeaderFontWeight
226 Version: 2.5.1 TE2000

Attribute setter: setHeaderFontWeight
HeaderHeight
Definition of the height of the header.
See also
Attribute getter: getHeaderHeight
Attribute setter: setHeaderHeight
HeaderHeightUnit
Defines the unit of the height of the header:
See also
Attribute getter: getHeaderHeightUnit
Attribute setter: setHeaderHeightUnit
HeaderTextColor
See also
Attribute getter: getHeaderTextColor
Attribute setter: setHeaderTextColor
RowHeight
TE2000 Version: 2.5.1 227

See also
Attribute getter: getRowHeight
Attribute setter: setRowHeight
RowHeightUnit
Pixel unit. At this point, only pixels can be used as a unit.
See also
Attribute getter: getRowHeightUnit
RowNumbersBackgroundColor
Background color of the number column.
See also
Attribute getter: getRowNumbersBackgroundColor
Attribute setter: setRowNumbersBackgroundColor
RowNumbersCellPadding
Defines the distance of the number column to the border.
See also
Attribute getter: getRowNumbersCellPadding
Attribute setter: setRowNumbersCellPadding
RowNumbersFontFamily
228 Version: 2.5.1 TE2000

See also
Attribute getter: getRowNumbersFontFamily
Attribute setter: setRowNumbersFontFamily
RowNumbersFontSize
See also
Attribute getter: getRowNumbersFontSize
Attribute setter: setRowNumbersFontSize
RowNumbersFontSizeUnit
See also
Attribute getter: getRowNumbersFontSizeUnit
Attribute setter: setRowNumbersFontSizeUnit
RowNumbersFontStyle
See also
Attribute getter: getRowNumbersFontStyle
Attribute setter: setRowNumbersFontStyle
RowNumbersFontWeight
TE2000 Version: 2.5.1 229

See also
Attribute getter: getRowNumbersFontWeight
Attribute setter: setRowNumbersFontWeight
RowNumbersHorizontalAlignment
See also
Attribute getter: getRowNumbersHorizontalAlignment
Attribute setter: setRowNumbersHorizontalAlignment
RowNumbersResizable
See also
Attribute getter: getRowNumbersResizable
Attribute setter: setRowNumbersResizable
RowNumbersTextColor
Text color of the number column.
See also
Attribute getter: getRowNumbersTextColor
Attribute setter: setRowNumbersTextColor
RowNumbersVerticalAlignment
230 Version: 2.5.1 TE2000

See also
Attribute getter: getRowNumbersVerticalAlignment
Attribute setter: setRowNumbersVerticalAlignment
RowNumbersWidth
Width of the number column.
See also
Attribute getter: getRowNumbersWidth
Attribute setter: setRowNumbersWidth
RowNumbersWidthUnit
See also
Attribute getter: getRowNumbersWidthUnit
Attribute setter: setRowNumbersWidthUnit
SelectedCellValue
Schema: tchmi:general#/definitions/Any
See also
Attribute getter: getSelectedCellValue
SelectedColumnIndex
The selected column is addressed by index.
TE2000 Version: 2.5.1 231

See also
Attribute getter: getSelectedColumnIndex
Attribute setter: setSelectedColumnIndex
SelectedRowIndex
The selected row is addressed by index.
See also
Attribute getter: getSelectedRowIndex
Attribute setter: setSelectedRowIndex
SelectedRowValue
See also
Attribute getter: getSelectedRowValue
ShowRowNumbers
See also
Attribute getter: getShowRowNumbers
Attribute setter: setShowRowNumbers
SrcColumn
Schema (version 1.8): tchmi:framework#/definitions/DGColumnDefinitionList

TcHmi.Controls.Beckhoff.TcHmiDatagrid.ColumnDefinitionList
232 Version: 2.5.1 TE2000

See also
Attribute getter: getSrcColumn
Attribute setter: setSrcColumn
SrcData
Schema: tchmi:general#/definitions/Array
See also
Attribute getter: getSrcData
Attribute setter: setSrcData
SrcDataHasChanged
See also
Attribute getter: getSrcDataHasChanged
Sorting
Defines sorting rules for sorting the displayed data.
Schema (version 1.10): tchmi:framework#/definitions/DGSorting
Schema (version 1.12): tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.TcHmiDatagrid.Sorting
See also
Attribute getter: getSorting
Attribute setter: setSorting
TableBorderColor
TE2000 Version: 2.5.1 233

See also
Attribute getter: getTableBorderColor
Attribute setter: setTableBorderColor
TableBorderStyle
Schema: tchmi:framework#/definitions/BorderStyle
See also
Attribute getter: getGridStyle
Attribute setter: setGridStyle
TableBorderWidth
See also
Attribute getter: getTableBorderWidth
Attribute setter: setTableBorderWidth
Filter
Defines filter rules that are applied to read access to the DataSymbol when using DataSymbol.
Schema: tchmi:server#/definitions/filter
See also
Attribute getter: getFilter
Attribute setter: setFilter
RowClassesProvider
Can be used to change the display of table rows or cells depending on the data. To do this, the attribute is
configured with a user-defined function that takes the contents of a single table row and returns an array of
strings that are set as CSS classes on the respective row element. Using a custom CSS file or theme, these
classes can be used to customize the look of the table.
Schema: tchmi:framework#/definitions/Function
234 Version: 2.5.1 TE2000

See also
Attribute getter: getRowClassesProvider
Attribute setter: setRowClassesProvider
RowNumbersStartNumber
Start value of the series numbering.
See also
Attribute getter: getRowNumbersStartNumber
Attribute setter: setRowNumbersStartNumber
5.10.2.7.4 Events
onDataChanged
The data [} 233] has been changed.
onSelectedItemChanged
Another entry is now selected.
5.10.2.8 Date Time Display

A control for displaying the date and time.
Attributes
Category: Colors
Name Description
TE2000 Version: 2.5.1 235

Category: Layout
236 Version: 2.5.1 TE2000

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
TE2000 Version: 2.5.1 237

Name Description
be displayed
is to be displayed
238 Version: 2.5.1 TE2000

Category: Common
Name Description
TimeDisplayLayout [} 244] Defines the display of time and date.
• Time: Only the time is displayed.
• Date: Only the date is displayed
• TimeDateSingleLine: Time and date are displayed
in a single line.
• TimeDateMultiLine: Time and date are displayed
one below the other.
• DateTimeSingleLine: Date and time are displayed
in a single line.
• DateTimeMultiLine: Date and time are displayed
one below the other.
Category: Border
Name Description
them off
control
control
TE2000 Version: 2.5.1 239

Name Description
background color
image:
image:
four sides
Category: Text
Name Description
or the keyword
• Normal
• Italic
• Oblique
• Normal
• Bold
Events
Category: Framework
240 Version: 2.5.1 TE2000

Name Description
window.
Category: Operator
Name Description
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
Access rights
Name Description
observable.
TE2000 Version: 2.5.1 241

Control [} 690]
DateTimeDisplay
See also
5.10.2.8.1 Attribute
TextFontFamily
Origin: Date Time Display [} 235]
See also
TextFontSize
See also
242 Version: 2.5.1 TE2000

TextFontSizeUnit
See also
TextFontStyle
See also
TextFontWeight
See also
TextColor
TE2000 Version: 2.5.1 243

See also
See also
See also
TimeDisplayLayout
Display of the date and time.
Schema: tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.TcHmiDateTimeDisplay.TimeDisplayLayout
See also
Attribute getter: getTimeDisplayLayout
Attribute setter: setTimeDisplayLayout
244 Version: 2.5.1 TE2000

5.10.2.9 Date Time Input

An input element for date and time.
Attributes
Category: Colors
Name Description
ValueColor [} 251] Definition of the text color
Category: Layout
TE2000 Version: 2.5.1 245

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
246 Version: 2.5.1 TE2000

Name Description
be displayed
is to be displayed
Category: Common
TE2000 Version: 2.5.1 247

Name Description
Value [} 251] Definition of the value
AutoFocusOut [} 254] Determines whether the control automatically loses
focus when the user confirms or ends his input by
pressing Enter or Escape.
AutoSelectText [} 254] Determines whether the Control automatically selects
the entire text when it is focused.
ResetToLastValidValue [} 254] Determines whether the value is reset to the last valid
value when focus is lost.
ButtonPosition [} 255] The position of the button relative to the display.
Category: Border
Name Description
them off
control
control

Name Description
background color
image:
image:
four sides
248 Version: 2.5.1 TE2000

Category: Value
Name Description
ValueFontFamily [} 251] Definition of the font using the name of the font family
or the keyword
ValueFontSize [} 252] Definition of the font size
ValueFontSizeUnit [} 252] Definition of the font size unit:
ValueFontStyle [} 252] Selecting the font style:
• Normal
• Italic
• Oblique
ValueFontWeight [} 253] Selecting the font weight of the text:
• Normal
• Bold
ContentPadding [} 253] Definition of the distance of the text to the border
ValueHorizontalAlignment [} 253] Selecting the horizontal alignment of the text
Placeholder [} 253] Definition of the placeholder, which is displayed if no
value is entered.
Events
Category: Control
Name Description
onValueChanged [} 255] The value has been changed.
Category: Framework
Name Description
window.
Category: Operator
TE2000 Version: 2.5.1 249

Name Description
onUserInteractionFinished [} 256] The user has finished the interaction with the control.
onFocusIn [} 255] The control now has the focus.
onFocusOut [} 255] The control has lost focus.
onUserInteractionCanceled [} 256] The user has terminated the interaction with the
control element.
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
Access rights
Name Description
observable.
Control [} 690]
Date Time Input
250 Version: 2.5.1 TE2000

See also
ValueColor
Color of the value.
Origin: Date Time Input [} 245]
See also
Attribute getter: getValueColor
Attribute setter: setValueColor
Value
Value of the control.
Schema: tchmi:general#/definitions/DateTime
See also
Attribute getter: getValue
Attribute setter: setValue
ValueFontFamily
See also
Attribute getter: getValueFontFamily
TE2000 Version: 2.5.1 251

Attribute setter: setValueFontFamily
ValueFontSize
See also
Attribute getter: getValueFontSize
Attribute setter: setValueFontSize
ValueFontSizeUnit
See also
Attribute getter: getValueFontSizeUnit
Attribute setter: setValueFontSizeUnit
ValueFontStyle
See also
Attribute getter: getValueFontStyle
Attribute setter: setValueFontStyle
252 Version: 2.5.1 TE2000

ValueFontWeight
See also
Attribute getter: getValueFontWeight
Attribute setter: setValueFontWeight
ValueHorizontalAlignment
See also
Attribute getter: getValueHorizontalAlignment
Attribute setter: setValueHorizontalAlignment
ContentPadding
See also
Placeholder
Placeholder which is displayed if no text is entered.
TE2000 Version: 2.5.1 253

See also
Attribute getter: getPlaceholder
Attribute setter: setPlaceholder
AutoFocusOut
Determines whether the control automatically loses focus when the user confirms or ends his input by
See also
Attribute getter: getAutoFocusOut
Attribute setter: setAutoFocusOut
AutoSelectText
Determines whether the Control automatically selects the entire text when it is focused.
See also
Attribute getter: getAutoSelectText
Attribute setter: setAutoSelectText
ResetToLastValidValue
Determines whether the value is reset to the last valid value when focus is lost.
254 Version: 2.5.1 TE2000

See also
Attribute getter: getResetToLastValidValue
Attribute setter: setResetToLastValidValue
ButtonPosition
The position of the button relative to the display.
Schema: tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.TcHmiDateTimeInput.ButtonPosition
See also
Attribute getter: getButtonPosition
Attribute setter: setButtonPosition
5.10.2.9.2 Events
onFocusIn
The control now has the focus.
onFocusOut
The control has lost focus.
onValueChanged
The value has been changed.
TE2000 Version: 2.5.1 255

onUserInteractionFinished
The user has finished the interaction with the control.
onUserInteractionCanceled
The user has terminated the interaction with the control element.
5.10.2.10 Date Time Picker

A control for selecting the date and time.
Attributes
Category: Colors
Name Description
Category: Layout
256 Version: 2.5.1 TE2000

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
TE2000 Version: 2.5.1 257

Name Description
be displayed
is to be displayed
Category: Common
258 Version: 2.5.1 TE2000

Name Description
Value [} 261] Value of the control as ISO timestring.
DirectDisplay [} 262] Determines whether the control is displayed directly
in the View or used as a pop-up. The pop-up opens
by the function openDateTimePicker [} 263] and
closes by the function closeDateTimePicker [} 263].
ShowConfirmationButtons [} 262] Determines whether the input into the control must be
confirmed.
Category: Border
Name Description
them off
control
control

Name Description
background color
image:
image:
four sides
TE2000 Version: 2.5.1 259

Events
Category: Framework
Name Description
window.
Category: Operator
Name Description
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
Category: Control
260 Version: 2.5.1 TE2000

Name Description
onCancel [} 262] The input was canceled.
onConfirmed [} 263] The input was confirmed.
Functions
openDateTimePicker [} 263] TcHmiDateTimePicker Opens the Date Time Picker
closeDateTimePicker [} 263] TcHmiDateTimePicker Closes the Date Time Picker
Access rights
Name Description
observable.
Control [} 690]
Date Time Picker
See also
Value
Value of the control as ISO timestring.
Origin: Date Time Picker [} 256]
See also
TE2000 Version: 2.5.1 261

DirectDisplay
Determines whether the control is displayed directly in the View or used as a pop-up. The pop-up opens by
the function openDateTimePicker [} 263] and closes by the function closeDateTimePicker [} 263].
See also
Attribute getter: getDirectDisplay
Attribute setter: setDirectDisplay
ShowConfirmationButtons
Determines whether the input into the control must be confirmed.
See also
Attribute getter: getShowConfirmationButtons
Attribute setter: setShowConfirmationButtons
5.10.2.10.2 Events
onValueChanged
onCancel
The input was canceled.
262 Version: 2.5.1 TE2000

onConfirmed
The input was confirmed.
openDateTimePicker
Opens the Date Time Picker.
Return value: null
closeDateTimePicker
Closes the Date Time Picker.
Return value: null
5.10.2.11 Ellipse
An elliptical object.
TE2000 Version: 2.5.1 263

Attributes
Category: Colors
Name Description
Category: Layout
264 Version: 2.5.1 TE2000

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
TE2000 Version: 2.5.1 265

Name Description
be displayed
is to be displayed
Category: Common
266 Version: 2.5.1 TE2000

Name Description
Category: Border
Name Description
them off
control
control

Name Description
background color
image:
image:
four sides
Category: Appearance
Name Description
FillColor [} 269] Definition of the fill color of the control
StrokeColor [} 269] Definition of the line color of the control
StrokeStyle [} 269] Selecting the style of the ellipse line
StrokeThickness [} 270] Definition of the line width of the ellipse
StrokeThicknessUnit [} 270] Selecting the unit of the line width:
TE2000 Version: 2.5.1 267

Events
Category: Framework
Name Description
window.
Category: Operator
Name Description
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
Access rights
Name Description
observable.
268 Version: 2.5.1 TE2000

Control [} 690]
Ellipse
See also
FillColor
Defines the fill color of the control.
Origin: Ellipse [} 263]
See also
Attribute getter: getFillColor
Attribute setter: setFillColor
StrokeColor
Defines the stroke color of the control.
See also
Attribute getter: getStrokeColor
Attribute setter: setStrokeColor
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".
TE2000 Version: 2.5.1 269

See also
Attribute getter: getStrokeStyle
Attribute setter: setStrokeStyle
StrokeThickness
Defines the stroke thickness of the control in pixels.
See also
Attribute getter: getStrokeThickness
Attribute setter: setStrokeThickness
StrokeThicknessUnit
See also
Attribute getter: getStrokeThicknessUnit
5.10.2.12 Event Grid

The Event Grid is provided for the tabular display of alarms and messages.
Attributes
Category: Colors
Name Description
Category: Layout
270 Version: 2.5.1 TE2000

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
TE2000 Version: 2.5.1 271

Name Description
be displayed
is to be displayed
Category: Common
272 Version: 2.5.1 TE2000

Name Description
Filter [} 279] Defines which events are queried by the server
Columns [} 279] The columns to be displayed in the EventGrid
AllowDetailsPopup [} 280] Defines whether a dialog with detailed information is
automatically displayed when interacting with an
event entry.
Activated by default.
Can be disabled to implement a customized display
of the detailed information.
SelectedEvent [} 280] Returns the selected event or zero if no event is
selected.
Category: Border
Name Description
them off
control
control

Name Description
background color
image:
image:
four sides
Category: Menu Bar
TE2000 Version: 2.5.1 273

Name Description
MenuBarPosition [} 279] Defines the position of the menu bar.
ShowMenuBar [} 280] Defines whether the menu bar is displayed.
ButtonFontFamily [} 284] Defines the font of the button text.
ButtonFontSize [} 285] Defines the font size of the button text.
ButtonFontSizeUnit [} 285] Defines the unit of the button text font size.
ButtonFontStyle [} 285] Defines the font style of the button text.
ButtonFontWeight [} 285] Defines the font weight (normal, bold) of the button
text.
ButtonHeight [} 286] Defines the height of the buttons.
ButtonHeightUnit [} 286] Defines the unit of button height.
Category: Grid
Name Description
HeaderFontFamily [} 281] Defines the font of the text in the header bar.
HeaderFontSize [} 281] Defines the font size of the text in the header bar.
HeaderFontSizeUnit [} 281] Defines the font size unit of the text in the header bar.
HeaderFontStyle [} 282] Defines the font style of the text in the header bar.
HeaderFontWeight [} 282] Defines the font weight (normal, bold) of the text in
the header bar.
GridFontFamily [} 282] Defines the font of the text in the table.
GridFontSize [} 282] Defines the font size of the text in the table.
GridFontSizeUnit [} 283] Defines the font size unit of the text in the table.
GridFontStyle [} 283] Defines the font style of the text in the table.
GridFontWeight [} 283] Defines the font weight (normal, bold) of the text in
the table.
HeaderHeight [} 283] Defines the height of the header bar.
HeaderHeightUnit [} 284] Defines the height unit of the header bar.
RowHeight [} 284] Defines the height of the table rows.
RowHeightUnit [} 284] Defines the height unit of the table rows.
Events
Category: Framework
Name Description
window.
Category: Operator
274 Version: 2.5.1 TE2000

Name Description
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
Access rights
Name Description
observable.
configure [} 286] Determines whether the column configuration in the
event grid is customizable.
viewDetails [} 286] Determines whether the display of event details can
be enabled in the event grid.
Functions
confirmSelectedAlarm TcHmiEventGrid Acknowledges all selected alarms
confirmAllAlarms TcHmiEventGrid Acknowledges all alarms
Control [} 690]
Event Grid
TE2000 Version: 2.5.1 275

See also
The TwinCAT 3 EventLogger can be used to send events. The display of the events can be defined via the
filters [} 276]. The columns [} 277] can be configured via the Properties. Further information about the
EventGrid can be found in the section Event System [} 922].
Sample: Event Grid [} 1328]
5.10.2.12.2 Dialogs
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.
Structure of the Filter Editor
1. Add clause: add a clause

2. Delete clause: delete a clause
3. And/Or: logical combination of clauses
4. Path: filter options:
◦ domain: server extension which delivered the alarm (e.g. TcHmiEventLogger).
◦ sourceDomain: server extension that triggered the alarm. The sourceDomain may differ from the
domain if a server extension forwards the alarms (e.g. TcHmiSqliteLogger).
◦ name: name of the event.
◦ text: text of the event.
◦ Id: ID of the event.
◦ timeRaised: time at which the event was triggered.
◦ timeCleared: time at which an alarm was reset.
◦ timeConfirmed: time at which the alarm was confirmed.
◦ type: type of event (alarm or message).
◦ severity: severity of the event (prohibitions, info, warning, error, critical error).
◦ alarmState: state of an alarm (triggered, confirmed, deleted, confirmed and deleted).
276 Version: 2.5.1 TE2000

◦ confirmationState: state of acknowledgement of an alarm (not required, not supported, waiting

for acknowledgement, acknowledged, reset).
◦ „params::“: the parameter object of an event can be accessed in the text field of the path via the
keyword "params::" (without quotation marks). The parameter object contains optional parameters
that can differ depending on the event source. For example, the TwinCAT Eventlogger provides
additional information about the event origin in the PLC. The parameters are accessed in
camelCase, e.g.: params::sourceName
5. Operator: comparison operator of the clause
6. Value: value of the clause
Grouping of conditions
Several conditions can be grouped and linked if more than one condition is selected. The conditions are
selected by clicking the rows with the CTRL key pressed.
1. Group clause: grouping of several clauses. The brackets link them optically.
2. Ungroup clause: ungrouping.
Columns
The columns to be displayed in the Event Grid can be configured in the columns editor. The columns can
also be configured in the client at runtime.
An entry is added for each column. The column name is specified via the combo box, where you can select a
column from all available columns [} 279].
TE2000 Version: 2.5.1 277

The Columns Editor consists of the following areas:
1. Type: The type of column indicates whether it is a normal "Column" or a "CustomColumn". The selec-
tion of the column type can be made via the lower combo box (1). The parameters of the parameter
object of an event can be displayed in a custom column.
2. ColumnName: The name of the column to be displayed.
For a column of type "Column", the names can be selected via the combo box.
For a column of type "CustomColumn" the parameters are displayed with the keyword "params::"
(without quotation marks) and the name of the parameter in camelCase.
Using the example of the EventLogger, the "SourceName" can be displayed in a column, for example:
The parameter object can differ for different event sources. If an event does not have the parameter in
the parameter object configured in the column, an empty entry is displayed in the corresponding cell.
3. Width: The width of the column. If no value is specified, the width is set automatically.
278 Version: 2.5.1 TE2000


Add a new object
Filter
Defines which events are queried by the server.
Schema: tchmi:server#/definitions/eventFilter
Origin: Event Grid [} 270]
See also
Columns
The columns to be displayed in the Event Grid.
Schema (Version .1.10): tchmi:framework#/definitions/EventGridColumnList
Schema (Version .1.12): tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.TcHmiEventGrid.ColumnList
See also
Attribute getter: getColumns
Attribute setter: setColumns
MenuBarPosition
Defines the position of the menu bar.
Schema (version 1.10): tchmi:framework#/definitions/EventGridMenuBarPosition

TcHmi.Controls.Beckhoff.TcHmiEventGrid.EventGridMenuBarPosition
See also
Attribute getter: getMenuBarPosition
TE2000 Version: 2.5.1 279

Attribute setter: setMenuBarPosition
ShowMenuBar
Defines whether the menu bar is displayed.
See also
Attribute getter: getShowMenuBar
Attribute setter: setShowMenuBar
Sorting
Schema (version 1.10): tchmi:framework#/definitions/DGSorting
Schema (version 1.12): tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.TcHmiDatagrid.Sorting
See also
AllowDetailsPopup
Defines whether a dialog with detailed information is automatically displayed when interacting with an event
entry.
Activated by default.
Can be disabled to implement a customized display of the detailed information.
See also
Attribute getter: getAllowDetailsPopup
Attribute setter: setAllowDetailsPopup
Note: Available since version 1.10.1336.404
SelectedEvent
Returns the selected event or zero if no event is selected.
280 Version: 2.5.1 TE2000

Schema (version 1.10): tchmi:framework#/definitions/ServerEvent

TcHmi.Controls.Beckhoff.TcHmiEventGrid.ServerEvent
See also
Attribute getter: getSelectedEvent
HeaderFontFamily
Defines the font of the text in the header bar.
See also
Attribute getter: getHeaderFontFamily
Attribute setter: setHeaderFontFamily
HeaderFontSize
Defines the font size of the text in the header bar.
See also
Attribute getter: getHeaderFontSize
Attribute setter: setHeaderFontSize
HeaderFontSizeUnit
Defines the font size unit of the text in the header bar.
See also
Attribute getter: getHeaderFontSizeUnit
Attribute setter: setHeaderFontSizeUnit
TE2000 Version: 2.5.1 281

HeaderFontStyle
Defines the font style of the text in the header bar.
See also
Attribute getter: getHeaderFontStyle
Attribute setter: setHeaderFontStyle
HeaderFontWeight
Defines the font weight (normal, bold) of the text in the header bar.
See also
Attribute getter: getHeaderFontWeight
Attribute setter: setHeaderFontWeight
GridFontFamily
Defines the font of the text in the table.
See also
Attribute getter: getGridFontFamily
Attribute setter: setGridFontFamily
GridFontSize
Defines the font size of the text in the table.
See also
Attribute getter: getGridFontSize
Attribute setter: setGridFontSize
282 Version: 2.5.1 TE2000

GridFontSizeUnit
Defines the font size unit of the text in the table.
See also
Attribute getter: getGridFontSizeUnit
Attribute setter: setGridFontSizeUnit
GridFontStyle
Defines the font style of the text in the table.
See also
Attribute getter: getGridFontStyle
Attribute setter: setGridFontStyle
GridFontWeight
Defines the font weight (normal, bold) of the text in the table.
See also
Attribute getter: getGridFontWeight
Attribute setter: setGridFontWeight
HeaderHeight
Defines the height of the header bar.
See also
Attribute getter: getHeaderHeight
TE2000 Version: 2.5.1 283

Attribute setter: setHeaderHeight
HeaderHeightUnit
Defines the height unit of the header bar.
See also
Attribute getter: getHeaderHeightUnit
Attribute setter: setHeaderHeightUnit
RowHeight
Defines the height of the table rows.
See also
Attribute getter: getRowHeight
Attribute setter: setRowHeight
RowHeightUnit
Defines the height unit of the table rows.
See also
Attribute getter: getRowHeightUnit
ButtonFontFamily
Defines the font of the button text.
284 Version: 2.5.1 TE2000

See also
Attribute getter: getButtonFontFamily
Attribute setter: setButtonFontFamily
ButtonFontSize
Defines the font size of the button text.
See also
Attribute getter: getButtonFontSize
Attribute setter: setButtonFontSize
ButtonFontSizeUnit
Defines the unit of the button text font size.
See also
Attribute getter: getButtonFontSizeUnit
Attribute setter: setButtonFontSizeUnit
ButtonFontStyle
Defines the font style of the button text.
See also
Attribute getter: getButtonFontStyle
Attribute setter: setButtonFontStyle
ButtonFontWeight
Defines the font weight (normal, bold) of the button text.
TE2000 Version: 2.5.1 285

See also
Attribute getter: getButtonFontWeight
Attribute setter: setButtonFontWeight
ButtonHeight
Defines the height of the buttons.
See also
Attribute getter: getButtonHeight
Attribute setter: setButtonHeight
ButtonHeightUnit
Defines the unit of button height.
See also
Attribute getter: getButtonHeightUnit
Attribute setter: setButtonHeightUnit
5.10.2.12.4 Permissions
configure
Determines whether the column configuration in the event grid is customizable.
See also
See also User management at control level [} 893].
viewDetails
Determines whether the display of event details can be enabled in the event grid.
286 Version: 2.5.1 TE2000

See also
5.10.2.12.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.
TE2000 Version: 2.5.1 287

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.10.2.13 Event Line

The Event Line is provided for the display of alarms and messages.
Attributes
Category: Colors
Name Description
TextColor [} 296] Defines the font color of the control.
Category: Layout
288 Version: 2.5.1 TE2000

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
TE2000 Version: 2.5.1 289

Name Description
be displayed
is to be displayed
Category: Common
290 Version: 2.5.1 TE2000

Name Description
Filter [} 295] Defines which events are queried by the server.
ServerInterval [} 298] Defines the interval for the server subscription in
milliseconds.
TargetRegion [} 298] The TcHmiRegion control instance in which the
content page defined in the TargetContent attribute is
loaded when the control is clicked.
TargetContent [} 298] The content page that is loaded when the control is
clicked in the defined TcHmiRegion.
Category: Text
Name Description
TextFontFamily [} 296] Defines the font of the control.
TextFontSize [} 297] Defines the font size of the control.
TextFontSizeUnit [} 297] Defines the unit of the control's font size.
TextFontStyle [} 297] Defines the style of the control's font.
TextFontWeight [} 298] Defines the font weight (normal, bold) of the control's
font.
Category: Border
Name Description
them off
control
control
TE2000 Version: 2.5.1 291

Name Description
background color
image:
image:
four sides
Events
Category: Framework
Name Description
window.
Category: Operator
292 Version: 2.5.1 TE2000

Name Description
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
Access rights
Name Description
observable.
configure [} 286] Determines whether the column configuration in the
event grid is customizable.
viewDetails [} 286] Determines whether the display of event details can
be enabled in the event grid.
Control [} 690]
Event Line
TE2000 Version: 2.5.1 293

See also
The TwinCAT 3 EventLogger can be used to send events. The display of the events can be defined via the
filters [} 294]. The columns can be configured via the Properties. Further information about the EventLine
can be found in the section Event System [} 922].
Example: Event Grid [} 1328]
5.10.2.13.2 Dialogs
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.
Structure of the Filter Editor
1. Add clause: add a clause

2. Delete clause: delete a clause
3. And/Or: logical combination of clauses
4. Path: filter options:
◦ domain: server extension which delivered the alarm (e.g. TcHmiEventLogger).
◦ sourceDomain: server extension that triggered the alarm. The sourceDomain may differ from the
domain if a server extension forwards the alarms (e.g. TcHmiSqliteLogger).
◦ name: name of the event.
◦ text: text of the event.
◦ Id: ID of the event.
◦ timeRaised: time at which the event was triggered.
◦ timeCleared: time at which an alarm was reset.
◦ timeConfirmed: time at which the alarm was confirmed.
◦ type: type of event (alarm or message).
◦ severity: severity of the event (prohibitions, info, warning, error, critical error).
◦ alarmState: state of an alarm (triggered, confirmed, deleted, confirmed and deleted).
294 Version: 2.5.1 TE2000

◦ confirmationState: state of acknowledgement of an alarm (not required, not supported, waiting

for acknowledgement, acknowledged, reset).
◦ „params::“: the parameter object of an event can be accessed in the text field of the path via the
keyword "params::" (without quotation marks). The parameter object contains optional parameters
that can differ depending on the event source. For example, the TwinCAT Eventlogger provides
additional information about the event origin in the PLC. The parameters are accessed in
camelCase, e.g.: params::sourceName
5. Operator: comparison operator of the clause
6. Value: value of the clause
Grouping of conditions
Several conditions can be grouped and linked if more than one condition is selected. The conditions are
selected by clicking the rows with the CTRL key pressed.
1. Group clause: grouping of several clauses. The brackets link them optically.
2. Ungroup clause: ungrouping.
Filter
Defines which events are queried by the server.
Schema: tchmi:server#/definitions/eventFilter
Origin: Event Line [} 288]
TE2000 Version: 2.5.1 295

See also
Sorting
Schema: tchmi:framework#/definitions/Sorting
See also
TextColor
Defines the color of the font.
See also
TextFontFamily
Defines the font.
See also
296 Version: 2.5.1 TE2000

TextFontSize
Defines the font size.
See also
TextFontSizeUnit
Defines the unit of the font size.
See also
TextFontStyle
Defines the style of the font.
See also
TE2000 Version: 2.5.1 297

TextFontWeight
Defines the font weight (normal, bold).
See also
TargetRegion
Defines the TcHmiRegion control which displays the defined TargetContent [} 298] after a click on the button
of the control. The button is displayed only if the TargetRegion and TargetContent attributes are defined.
Schema: tchmi:framework#/definitions/TcHmi.Controls.System.TcHmiRegion
See also
Attribute getter: getTargetRegion
Attribute setter: setTargetRegion
TargetContent
Defines the content page which is displayed in the defined TargetRegion [} 298] after a click on the button of
the control. The button is displayed only if the TargetContent and TargetRegion attributes are defined.
Schema: tchmi:framework#/definitions/ContentPath
See also
Attribute getter: getTargetContent
Attribute setter: setTargetContent
ServerInterval
Defines the interval for the server subscription in milliseconds.
298 Version: 2.5.1 TE2000

See also
Attribute setter: setServerInterval
5.10.2.14 Horizontal Bar Chart

A HorizontalBarChart is a horizontal bar chart. It can be statically filled with data or dynamically supplied with
data via an array.
Attributes
Category: Colors
Name Description
XAxisColor [} 309] Definition of the color of the X-axis
YAxisColor [} 309] Definition of the color of the Y-axis
system
SectionsBackgroundColor [} 310] Definition of the color of the sections
XLabelFontColor [} 311] Definition of the font color of the X-axis labels
XAxisNameFontColor [} 311] Definition of the font color of the Y-axis name
YLabelFontColor [} 311] Definition of the font color of the Y-axis labels
YAxisNameFontColor [} 311] Definition of the font color of the Y-axis name
Category: Layout
TE2000 Version: 2.5.1 299

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
300 Version: 2.5.1 TE2000

Name Description
be displayed
is to be displayed
Category: Common
TE2000 Version: 2.5.1 301

Name Description
BarGraphData [} 312] Definition of the data to be displayed as graph using
the 'Bar Graph Data [} 308]' dialog.
BarGraphDescription [} 312] Definition of the display mode of the configured bar
graphs using the Bar Graph Description [} 308]
dialog.
ShowLegend [} 312] Selecting whether the legend is to be displayed.
BarGraphArrangement [} 313] Selection of the display mode of the bar chart:
• Overlapped: Bars are drawn on top of each other
• Clustered: Bars are drawn next to each other
BarGraphWidth [} 313] Definition of the width of the individual bars.
Category: Border
Name Description
them off
control
control

Name Description
background color
image:
image:
four sides
Category: XAxis
302 Version: 2.5.1 TE2000

Name Description
ShowXAxis [} 313] Selecting whether the X-axis is to be displayed.
XPosition [} 313] Selecting the position of the X-axis on the coordinate
system.
• Left: X-axis is displayed on the left side of the
coordinate system.
Right: X-axis is displayed on the right side of the
coordinate system.
displayed.
XMainTickMinValue [} 314] Definition of the minimum value of the X-axis main
subdivision.
XMainTickMaxValue [} 314] Definition of the maximum value of the X-axis main
subdivision.
XAxisAutoScaling [} 314] Selecting whether the X-axis should be automatically
XMainTickSteps [} 315] Definition of the step size of the X-axis main
subdivision.
ShowXAxisName [} 315] Selecting whether the X-axis name is to be displayed.
XAxisName [} 315] Definition of the X-axis name.
XAxisDecimalPlaces [} 316] Definition of the decimal places displayed for the X-
axis.
XAxisUnit [} 316] Definition of the X-axis unit.
or the keyword.
XLabelFontSize [} 316] Definition of the font size for the X-axis labels.
• Normal
• Bold
XAxisWidth [} 317] Definition of the X-axis width.
XNameFontFamily [} 318] Definition of the font using the name of the font family
or the keyword.
XNameFontSize [} 318] Definition of the font size of the X axis name.
XNameFontSizeUnit [} 318] Selecting the unit of the font size of the X axis name:
XNameFontWeight [} 319] Selecting of the font weight of the X-axis name:
• Normal
• Bold
XAxisFormat [} 319] Definition of the formatting of the X-axis labels.
Category: YAxis
TE2000 Version: 2.5.1 303

Name Description
ShowYAxis [} 320] Selecting whether the Y-axis is to be displayed.
YShowLabels [} 320] Selecting whether the Y-axis labels are to be
displayed.
YMainTickMinValue [} 320] Definition of the minimum value of the Y-axis main
subdivision.
YMainTickMaxValue [} 320] Definition of the maximum value of the Y-axis main
subdivision.
YAxisAutoScaling [} 321] Selecting whether the Y-axis should be automatically
Value', 'Maintick Max Value' and 'Y-Axis Maintick
YMainTickSteps [} 321] Definition of the step size of the Y-axis main
subdivision.
displayed on the Y-axis.
YSubTickSteps [} 321] Definition of the step size of the Y-axis subdivision.
ShowYAxisName [} 322] Selecting whether the Y-axis name is to be displayed.
YAxisName [} 322] Definition of the Y-axis name.
YAxisDecimalPlaces [} 322] Definition of the decimal places displayed for the Y-
axis.
YAxisUnit [} 323] Definition of the unit of the Y-axis.
or the keyword.
YLabelFontSize [} 323] Definition of the font size for the Y-axis labels.
YLabelFontSizeUnit [} 323] Selecting the font size unit for the Y-axis labels:
YLabelFontWeight [} 324] Selecting the font weight of the Y-axis labels:
• Normal
• Bold
YAxisWidth [} 324] Definition of the Y-axis width.
YAxisNameFontFamily [} 324] Definition of the font using the name of the font family
or the keyword.
YAxisNameFontSize [} 325] Definition of the font size of the Y-axis name.
YAxisNameFontSizeUnit [} 325] Selecting the unit of the font size of the Y-axis name:
YAxisNameFontWeight [} 325] Selecting of the font weight of the Y-axis name:
• Normal
• Bold
Category: Grid
304 Version: 2.5.1 TE2000

Name Description
displayed.
to be displayed.
SubgridLineStyle [} 327] Definition of the line style of the subgrid.
SubgridLineWidth [} 327] Definition of the line width of the subgrid.
Events
Category: Framework
Name Description
window.
Category: Operator
TE2000 Version: 2.5.1 305

Name Description
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
Access rights
Name Description
observable.
Control [} 690]
Horizontal Bar Chart
306 Version: 2.5.1 TE2000

See also
A bar chart can be configured in different ways:
aVaules : ARRAY [1..10] OF INT;
aValues : ARRAY [1..2, 1..10] OF INT;
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 [} 308]' 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 [} 308]' dialog.
4. Define the number of members of the array and their values using the 'Bar Graph Data [} 308]' dialog.
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 [} 308]' 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: Barchart [} 1328]
TE2000 Version: 2.5.1 307

5.10.2.14.2 Dialogs
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>>'.
Add a new object
Category: Colors
Name Description
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.
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
Bar Graph Description Dialog

Use this dialog you define the color of the bar graphs and their legend name. The objects are assigned to the
arrays of the data sets sequentially in case of data structure 'Array<Array<number>>'.
308 Version: 2.5.1 TE2000


Add a new object
Category: Colors
Name Description
XAxisColor
Origin: Horizontal Bar Chart [} 299]
See also
YAxisColor
See also
Attribute getter: getYAxisColor
Attribute setter: setYAxisColor
GridBackgroundColor
TE2000 Version: 2.5.1 309

See also
GridLineColor
See also
SubgridLineColor
See also
See also
310 Version: 2.5.1 TE2000

XLabelFontColor
See also
XAxisNameFontColor
See also
YLabelFontColor
See also
Attribute getter: getYLabelFontColor
Attribute setter: setYLabelFontColor
YAxisNameFontColor
See also
Attribute getter: getYAxisNameFontColor
Attribute setter: setYAxisNameFontColor
TE2000 Version: 2.5.1 311

BarGraphData
TcHmi.Controls.Beckhoff.TcHmiBarChart.ChartBarGraphDataDefinitionList
See also
Attribute getter: getBarGraphData
Attribute setter: setBarGraphData
BarGraphDescription
TcHmi.Controls.Beckhoff.TcHmiBarChart.ChartBarGraphDescriptionDefinitionList
See also
Attribute getter: getBarGraphDescription
Attribute setter: setBarGraphDescription
ShowLegend
See also
312 Version: 2.5.1 TE2000

BarGraphArrangement
TcHmi.Controls.Beckhoff.TcHmiBarChart.ChartBarGraphArrangement
See also
Attribute getter: getBarGraphArrangement
Attribute setter: setBarGraphArrangement
BarGraphWidth
See also
Attribute getter: getBarGraphWidth
Attribute setter: setBarGraphWidth
ShowXAxis
See also
XPosition
TcHmi.Controls.Beckhoff.TcHmiHorizontalBarChart.ChartBarGraphPosition
See also
Attribute getter: getXPosition
TE2000 Version: 2.5.1 313

Attribute setter: setXPosition
XShowLabels
See also
XMainTickMinValue
See also
XMainTickMaxValue
See also
XAxisAutoScaling
314 Version: 2.5.1 TE2000

See also
XMainTickSteps
See also
ShowXAxisName
See also
XAxisName
See also
TE2000 Version: 2.5.1 315

XAxisDecimalPlaces
See also
XAxisUnit
See also
XLabelFontFamily
See also
XLabelFontSize
316 Version: 2.5.1 TE2000

See also
XLabelFontSizeUnit
See also
XLabelFontWeight
See also
XAxisWidth
See also
TE2000 Version: 2.5.1 317

XAxisNameFontFamily
See also
XAxisNameFontSize
See also
See also
318 Version: 2.5.1 TE2000

XAxisNameFontWeight
See also
XAxisFormat
Schema:tchmi:framework#/definitions/Function
subdivision. To do this, it receives the index of the BarGraphData [} 312] attribute.
the engineering.
[ Function ]
Parameter
value number The current index of the value on
the X-axis.
Return value
Type Description
See also
Attribute getter: getXAxisFormat
Attribute setter: setXAxisFormat
TE2000 Version: 2.5.1 319

ShowYAxis
See also
Attribute getter: getShowYAxis
Attribute setter: setShowYAxis
YShowLabels
See also
Attribute getter: getYShowLabels
Attribute setter: setYShowLabels
YMainTickMinValue
See also
Attribute getter: getYMainTickMinValue
Attribute setter: setYMainTickMinValue
YMainTickMaxValue
See also
Attribute getter: getYMainTickMaxValue
Attribute setter: setYMainTickMaxValue
320 Version: 2.5.1 TE2000

YAxisAutoScaling
See also
Attribute getter: getYAxisAutoScaling
Attribute setter: setYAxisAutoScaling
YMainTickSteps
See also
ShowYSubTicks
See also
YSubTickSteps
TE2000 Version: 2.5.1 321

See also
ShowYAxisName
See also
Attribute getter: getShowYAxisName
Attribute setter: setShowYAxisName
YAxisName
See also
Attribute getter: getYAxisName
Attribute setter: setYAxisName
YAxisDecimalPlaces
See also
Attribute getter: getYAxisDecimalPlaces
Attribute setter: setYAxisDecimalPlaces
322 Version: 2.5.1 TE2000

YAxisUnit
See also
Attribute getter: getYAxisUnit
Attribute setter: setYAxisUnit
YLabelFontFamily
See also
YLabelFontSize
See also
YLabelFontSizeUnit
TE2000 Version: 2.5.1 323

See also
YLabelFontWeight
See also
YAxisWidth
See also
YAxisNameFontFamily
See also
Attribute getter: getYAxisNameFontFamily
Attribute setter: setYAxisNameFontFamily
324 Version: 2.5.1 TE2000

YAxisNameFontSize
See also
Attribute getter: getYAxisNameFontSize
Attribute setter: setYAxisNameFontSize
YAxisNameFontSizeUnit
See also
Attribute getter: getYAxisNameFontSizeUnit
Attribute setter: setYAxisNameFontSizeUnit
YAxisNameFontWeight
See also
Attribute getter: getYAxisNameFontWeight
Attribute setter: setYAxisNameFontWeight
TE2000 Version: 2.5.1 325

ShowGrid
See also
See also
See also
GridLineWidth
See also
326 Version: 2.5.1 TE2000

GridLineStyle
Schema: tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.ChartLineStyle
See also
Attribute getter: getGridLineStyle
Attribute setter: setGridLineStyle
See also
SubgridLineWidth
See also
SubgridLineStyle
TE2000 Version: 2.5.1 327

See also
Attribute getter: setSubgridLineStyle
Attribute setter: getSubgridLineStyle

These resources cannot be defined for each instance but only for several/all bar charts via the theme file. If
you want to change only one instance, you must create a class for it.
DefaultGraphColor
This is the default color used for graphs when nothing is defined in the BarGraphDescription [} 312] attribute.
5.10.2.15 IFrame
An IFrame is a nested browser context. It can be used to implement another web page in the visualization.
Attributes
Category: Colors
Name Description
Category: Layout
328 Version: 2.5.1 TE2000

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
TE2000 Version: 2.5.1 329

Name Description
be displayed
is to be displayed
Category: Common
330 Version: 2.5.1 TE2000

Name Description
Src [} 332] 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
Category: Border
Name Description
them off
control
control
background color
image:
image:
four sides
Events
Category: Control
Name Description
onLoad [} 333] The IFrame was loaded successfully.
onError [} 333] The IFrame was not loaded successfully.
Category: Framework
TE2000 Version: 2.5.1 331

Name Description
window.
Category: Operator
Keyboard, mouse or touch screen interaction events are not available in this control because the content is
displayed in a separate sandbox within the browsers.
Access rights
Name Description
observable.
Control [} 690]
IFrame
See also
Src
The URL of the website to embed.
Origin: IFrame [} 328]
See also
Attribute getter: getSrc
Attribute setter: setSrc
332 Version: 2.5.1 TE2000

5.10.2.15.2 Events
onError
The IFrame was not loaded successfully.
onLoad
The IFrame was loaded successfully.
5.10.2.16 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
Category: Layout
TE2000 Version: 2.5.1 333

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
334 Version: 2.5.1 TE2000

Name Description
be displayed
is to be displayed
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.
top and bottom side. The 'Height' attribute is
ignored in all calculations!
TE2000 Version: 2.5.1 335

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 [} 340] Original width of the image file.
OriginalHeight [} 339] Original height of the image file.
Category: Common
Name Description
Src [} 338] Definition of the image path within the TC HMI project
Alt [} 338] Definition of an alternative text that is displayed if the
image cannot or should not be loaded
Category: Border
Name Description
them off
control
control

Name Description
background color
image:
image:
four sides
336 Version: 2.5.1 TE2000

Events
Category: Control
Name Description
onLoad [} 340] The image was loaded successfully.
onError [} 340] The image was not loaded successfully.
Category: Framework
Name Description
window.
Category: Operator
Name Description
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
TE2000 Version: 2.5.1 337

Access rights
Name Description
observable.
Control [} 690]
Image
See also
Src
The address of the image. Images on other servers are also possible.
Origin: Image [} 333]
See also
Attribute getter: getSrc
Attribute setter: setSrc
Alt
Alternative text that is displayed if the image cannot or should not be loaded.
See also
Attribute getter: getAlt
Attribute setter: setAlt
338 Version: 2.5.1 TE2000

HeightMode
Selection of the method of calculating the height. The available options are:
• Parent: The height is defined by the distance to the top and bottom side. The Height attribute is
• Content: The height is calculated from the width while maintaining the aspect ratio of the image. If
Width Mode [} 339] 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 [} 111].
Schema: tchmi:framework#/definitions/SizeModeWithContent
See also
Attribute getter: getHeightMode
Attribute setter: setHeightMode
WidthMode
Selection of the method of calculating the width. The available options are:
• 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 [} 339] are set to Content, the image is drawn in its original size.
See also
Attribute getter: getWidthMode
Attribute setter: setWidthMode
OriginalHeight
Original height of the image file.
Returns 0 if no image is available.
See also
Attribute getter: getOriginalHeight
TE2000 Version: 2.5.1 339

OriginalWidth
Original width of the image file.
Returns 0 if no image is available.
See also
Attribute getter: getOriginalWidth
5.10.2.16.2 Events
onError
The image was not loaded successfully.
onLoad
The image was loaded successfully.
5.10.2.17 Input
A single-line text input element.
Attributes
Category: Colors
Name Description
Category: Layout
340 Version: 2.5.1 TE2000

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
TE2000 Version: 2.5.1 341

Name Description
be displayed
is to be displayed
Category: Common
342 Version: 2.5.1 TE2000

Name Description
Text [} 349] Definition of the text
AutoSelectText [} 349] Determines whether the entire text is automatically
selected when it is focused.
Category: Border
Name Description
them off
control
control

Name Description
background color
image:
image:
four sides
Category: Text
TE2000 Version: 2.5.1 343

Name Description
or the keyword
• Normal
• Italic
• Oblique
• Normal
• Bold
text is entered.
Events
Category: Control
Name Description
onTextChanged [} 350] The text has been changed.
Category: Framework
Name Description
window.
Category: Operator
344 Version: 2.5.1 TE2000

Name Description
control element.
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
Access rights
Name Description
observable.
Control [} 690]
Input
TE2000 Version: 2.5.1 345

See also
TextFontFamily
Origin: Input [} 340]
See also
TextFontSize
See also
TextFontSizeUnit
See also
346 Version: 2.5.1 TE2000

TextFontStyle
See also
TextFontWeight
See also
TextColor
See also
TE2000 Version: 2.5.1 347

See also
ContentPadding
See also
Placeholder
See also
AutoFocusOut
348 Version: 2.5.1 TE2000

See also
AutoSelectText
See also
Text
Content of the control.
See also
5.10.2.17.2 Events
onFocusIn
TE2000 Version: 2.5.1 349

onFocusOut
onTextChanged
The text has been changed.
5.10.2.18 Keyboard
A keyboard is an on-screen keyboard that can be used for input without a hardware keyboard.
The Layout [} 354] attribute can be used to select different layouts.
Note: Version 1.12
From version 1.12 keyboard layouts are added to the TwinCAT HMI project via a wizard and can then be
used via the attribute LayoutFile [} 361].
350 Version: 2.5.1 TE2000

The attribute Layout [} 361] is considered obsolete and should no longer be used.
See also: Configuration guide [} 929]
Attributes
Category: Colors
Name Description
LabelColor [} 360] Definition of the text color of the keys
LabelStrokeColor [} 361] Definition of the outline color of the graphic key
characters
LabelFillColor [} 360] Definition of the fill color of the graphic key characters
KeyBackgroundColor [} 359] Definition of the background color of the keys
AdditionalKeyBackdropColor [} 357] Definition of the background color of the window in
which the additional characters for the compact
layouts are displayed
Category: Layout
TE2000 Version: 2.5.1 351

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
352 Version: 2.5.1 TE2000

Name Description
be displayed
is to be displayed
KeyboardPadding [} 360] Definition of the inner distance of the keypad to the
outer sides of the keyboard
AdditionalKeyBackdropPadding [} 357] Definition of the inner distance of the additional keys
to the outer sides of the window in which they are
displayed
TE2000 Version: 2.5.1 353

Category: Common
Name Description
LayoutFile [} 361] Activates a layout from the project.
Layout [} 361] Selection of the keyboard layout
ScaleMode [} 363] Selecting the scaling of the keys
Category: Border
Name Description
them off
control
control

Name Description
background color
image:
image:
four sides
Category: Behavior
354 Version: 2.5.1 TE2000

Name Description
FixedTarget [} 358] 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 [} 362] Selecting whether the Shift key must be deactivated
manually after it has been used together with another
key
LongpressDelay [} 362] Definition of the time in milliseconds that a key must
be pressed for a long keystroke to be detected.
RepetitionDelay [} 362] Definition of the time in milliseconds that a key must
be pressed for the input to be repeated.
PressedKeys [} 363]
Category: Labels
Name Description
LabelStrokeThickness [} 359] Definition of the stroke thickness of the graphic key
characters
LabelFontFamily [} 358] Definition of the font using the name of the font family
or the keyword
LabelFontSize [} 358] Definition of the font size of the key text
LabelFontSizeUnit [} 358] Selecting the unit of the text size:
LabelFontStyle [} 359] Selecting the font style:
• Normal
• Italic: italic
LabelFontWeight [} 359] Selecting the font weight:
• Normal
• Bold: bold
Category: Indirect Input

Name Description
IndirectInputHorizontalAlignment [} 363] Defines the horizontal alignment of the text in the
preview field for indirect input.
IndirectInputFontSize [} 364] Defines the font size of the text in the preview field for
indirect input.
IndirectInputFonzSIzeUnit [} 364] Defines the font size unit of the text in the preview
field for indirect input.
IndirectInputPadding [} 364] Defines the padding of the text in the preview field for
indirect input.
Events
Category: Control
TE2000 Version: 2.5.1 355

Name Description
onKeyPressStarted [} 365] Interaction with a key was started.
onKeyPressFinished [} 365] Interaction with a key was finished.
onKeyPressCanceled [} 365] Interaction with a key was cancelled.
onKeyPressEnded [} 365] Interaction with a key was canceled or finished.
onIndirectInputAccepted [} 365] The user has confirmed the indirect entry.
onIndirectInputCanceled [} 365] The user has canceled the indirect input.
Category: Framework
Name Description
window.
Category: Operator
Name Description
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
356 Version: 2.5.1 TE2000

Access rights
Name Description
observable.
Control [} 690]
Keyboard
See also
AdditionalKeyBackdropColor
The background color of the additional characters.
Origin: Keyboard [} 350]
See also
Attribute getter: getAdditionalKeyBackdropColor
Attribute setter: setAdditionalKeyBackdropColor
AdditionalKeyBackdropPadding
Padding of the additional keys.
See also
Attribute getter: getAdditionalKeyBackdropPadding
Attribute setter: setAdditionalKeyBackdropPadding
TE2000 Version: 2.5.1 357

FixedTarget
The name of the control to which the characters are sent, regardless of the focus.
See also
Attribute getter: getFixedTarget
Attribute setter: setFixedTarget
LabelFontFamily
See also
Attribute getter: getLabelFontFamily
Attribute setter: setLabelFontFamily
LabelFontSize
See also
Attribute getter: getLabelFontSize
Attribute setter: setLabelFontSize
LabelFontSizeUnit
See also
Attribute getter: getLabelFontSizeUnit
Attribute setter: setLabelFontSizeUnit
358 Version: 2.5.1 TE2000

LabelFontStyle
See also
Attribute getter: getLabelFontStyle
Attribute setter: setLabelFontStyle
LabelFontWeight
See also
Attribute getter: getLabelFontWeight
Attribute setter: setLabelFontWeight
LabelStrokeThickness
Definition of the stroke thickness of the graphic key characters
See also
Attribute getter: getLabelStrokeThickness
Attribute setter: setLabelStrokeThickness
KeyBackgroundColor
The background color of the keys.
See also
Attribute getter: getKeyBackgroundColor
TE2000 Version: 2.5.1 359

Attribute setter: setKeyBackgroundColor
KeyPadding
Padding in the individual keys.
See also
Attribute getter: getKeyPadding
Attribute setter: setKeyPadding
KeyboardPadding
Padding of the whole keyboard.
See also
Attribute getter: getKeyboardPadding
Attribute setter: setKeyboardPadding
LabelColor
The color of the texts.
See also
Attribute getter: getLabelColor
Attribute setter: setLabelColor
LabelFillColor
Definition of the fill color of the graphic key characters
360 Version: 2.5.1 TE2000

See also
Attribute getter: getLabelFillColor
Attribute setter: setLabelFillColor
LabelStrokeColor
Definition of the outline color of the graphic key characters.
See also
Attribute getter: getLabelStrokeColor
Attribute setter: setLabelStrokeColor
LayoutFile
Activates a layout from the project. Overwrites the setting in the Layout [} 361] attribute.
Schema (version 1.10): tchmi:framework#/definitions/Path

TcHmi.Controls.Beckhoff.TcHmiKeyboard.ProjectKeyboardLayouts
See also
Attribute getter: getLayoutFile
Attribute setter: setLayoutFile
Layout
Defines the layout of the keyboard. Can be overwritten using the attribute LayoutFile [} 361].
• 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
Schema: tchmi:framework#/definitions/ControlKeyboardLayouts
TE2000 Version: 2.5.1 361

See also
Attribute getter: getLayout
Attribute setter: setLayout
Note: Version 1.10
Replaces the LayoutPath attribute.
Note: Version 1.12
This attribute is considered obsolete. Please use the attribute LayoutFile [} 361] instead.
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.
See also
Attribute getter: getLongpressDelay
Attribute setter: setLongpressDelay
ReleaseStickyKeysManually
Selecting whether the Shift key must be deactivated manually after it has been used together with another
key.
See also
Attribute getter: getReleaseStickyKeysManually
Attribute setter: setReleaseStickyKeysManually
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.
362 Version: 2.5.1 TE2000

See also
Attribute getter: getRepetitionDelay
Attribute setter: setRepetitionDelay
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.
• ScaletoFitHeight: The keys are displayed across the entire height of the control, regardless of whether
they exceed the limits of the control.
Schema: tchmi:framework#/definitions/ScaleMode
See also
Attribute getter: getScaleMode
Attribute setter: setScaleMode
PressedKeys
Schema (Note: version 1.8): tchmi:framework#/definitions/KeyList
Schema (Note: version 1.12): tchmi:framework#/definitions/

TcHmi.Controls.Beckhoff.TcHmiKeyboard.KeyList
See also
Attribute getter: getPressedKeys
IndirectInputHorizontalAlignment
Defines the horizontal alignment of the text in the preview field for indirect input.
TE2000 Version: 2.5.1 363

See also
Attribute getter: getIndirectInputHorizontalAlignment
Attribute setter: setIndirectInputHorizontalAlignment
IndirectInputFontSize
Defines the font size of the text in the preview field for indirect input.
See also
Attribute getter: getIndirectInputFontSize
Attribute setter: setIndirectInputFontSize
IndirectInputFontSizeUnit
Defines the font size unit of the text in the preview field for indirect input.
See also
Attribute getter: getIndirectInputFontSizeUnit
Attribute setter: setIndirectInputFontSizeUnit
IndirectInputPadding
Defines the padding of the text in the preview field for indirect input.
See also
Attribute getter: getIndirectInputPadding
Attribute setter: setIndirectInputPadding
364 Version: 2.5.1 TE2000

5.10.2.18.2 Events
onKeyPressStarted
The user has pressed any key on the keyboard.
onKeyPressCanceled
The user has canceled the interaction with any key on the keyboard. This can be triggered, for example, by
moving to the side.
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.
onKeyPressEnded
The user has canceled or finished the interaction with any key on the keyboard.
onIndirectInputAccepted
The user has confirmed the indirect entry.
onIndirectInputCanceled
The user has canceled the indirect input.
5.10.2.19 Line
A line object.
TE2000 Version: 2.5.1 365

Attributes
Category: Colors
Name Description
Category: Layout
366 Version: 2.5.1 TE2000

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
TE2000 Version: 2.5.1 367

Name Description
be displayed
is to be displayed
Category: Common
368 Version: 2.5.1 TE2000

Name Description
X1 [} 373] Definition of the x-axis coordinate of the starting point
of the line
X1Unit [} 373] Selecting the unit of the x-axis coordinate of the
starting point:
X2 [} 374] Definition of the x-axis coordinate of the end point of
the line
X2Unit [} 374] Selecting the unit of the x-axis coordinate of the end
point:
Y1 [} 374] Definition of the y-axis coordinate of the starting point
of the line
Y1Unit [} 374] Selecting the unit of the y-axis coordinate of the
starting point:
Y2 [} 375] Definition of the y-axis coordinate of the end point of
the line
Y2Unit [} 375] Selecting the unit of the y-axis coordinate of the end
point:
ScaleMode [} 372] 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.
• ScaleToFitHeight: The line is displayed over the
entire height of the control, regardless of whether it
exceeds the limits of the control.
StrokeColor [} 372] Definition of the line color
StrokeStyle [} 372] 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 [} 373] Definition of the line width
TE2000 Version: 2.5.1 369

Name Description
Category: Border
Name Description
them off
control
control

Name Description
background color
image:
image:
four sides
Category: Shape
Name Description
Events
Category: Framework
370 Version: 2.5.1 TE2000

Name Description
window.
Category: Operator
Name Description
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
Access rights
Name Description
observable.
Control [} 690]
TE2000 Version: 2.5.1 371

Line
See also
ScaleMode
Scales the content to the control size.
Origin: Line [} 365]
See also
StrokeColor
See also
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".
See also
372 Version: 2.5.1 TE2000

StrokeThickness
See also
StrokeThicknessUnit
See also
X1
x-coordinate of the first point.
See also
Attribute getter: getX1
Attribute setter: setX1
X1Unit
TE2000 Version: 2.5.1 373

See also
Attribute getter: getX1Unit
X2
x-coordinate of the second point.
See also
Attribute getter: getX2
Attribute setter: setX2
X2Unit
See also
Attribute getter: getX2Unit
Y1
y-coordinate of the first point.
See also
Attribute getter: getY1
Attribute setter: setY1
Y1Unit
374 Version: 2.5.1 TE2000

See also
Attribute getter: getY1Unit
Y2
y-coordinate of the second point.
See also
Attribute getter: getY2
Attribute setter: setY2
Y2Unit
See also
Attribute getter: getY2Unit
5.10.2.20 Line Chart

A LineChart is a diagram in which curves can be displayed.
Attributes
Category: Colors
TE2000 Version: 2.5.1 375

Name Description
XAxisColor [} 392] Definition of the color of the x-axis
system
SectionsBackgroundColor [} 386] Definition of the background color of the control
XLabelFontColor [} 395] Definition of the font color of the x-axis labels
XAxisNameFontColor [} 393] Definition of the font color of the x-axis name
TooltipFontColor [} 390] Definition of the font color of the tooltip
TooltipBackgroundColor [} 389] Definition of the background color of the tooltip
Category: Layout
376 Version: 2.5.1 TE2000

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
TE2000 Version: 2.5.1 377

Name Description
be displayed
is to be displayed
Category: Common
378 Version: 2.5.1 TE2000

Name Description
LineGraphData [} 386] Definition of the data to be displayed as graph(s)
LineGraphDescriptions [} 386] Definition of graph descriptions for each of the graphs
defined by the array
Category: Border
Name Description
them off
control
control

Name Description
background color
image:
image:
four sides
Category: XAxis
TE2000 Version: 2.5.1 379

Name Description
ShowXAxis [} 387] Selecting whether the x-axis is to be displayed
ShowXAxisLabels [} 397] Selecting whether the x-axis labels are to be
displayed
ShowXAxisName [} 387] Selecting whether the x-axis name is to be displayed
ShowXSubTicks [} 388] Selecting whether the subcoordinate points are to be
displayed on the x-axis
XAxisAutoScaling [} 391] Selecting whether the x-axis should be automatically
XAxisDecimalPlaces [} 392] Definition of the decimal places displayed for the x-
axis
XAxisName [} 393] Definition of the x-axis name
XAxisNameFontFamily [} 393] Definition of the font using the name of the font family
or the keyword
XAxisNameFontSize [} 394] Definition of the font size of the x-axis name
XAxisNameFontSizeUnit [} 394] Selecting the unit of the font size of the x-axis name:
XAxisNameFontWeight [} 394] Selecting of the font weight of the x-axis name:
• Normal
• Bold: bold
XAxisUnit [} 394] Definition of the unit of the x-axis
XAxisWidth [} 395] Definition of the x-axis width
or the keyword
XLabelFontSize [} 395] Definition of the font size for the x-axis labels
XLabelFontSizeUnit [} 396] Selecting the font size unit for the x-axis labels:
XLabelFontWeight [} 396] Selecting the font weight of the x-axis labels:
• Normal
• Bold: bold
XMainTickMaxValue [} 396] Definition of the maximum value of the x-axis main
subdivision
XMainTickMinValue [} 396] Definition of the minimum value of the x-axis main
subdivision
XMainTickSteps [} 397] Definition of the step size of the x-axis main
subdivision
XSubTickSteps [} 397] Definition of the step size of the x-axis subdivision
XAxisFormat [} 392] Definition of the formatting of the x-axis labels
Category: Grid
380 Version: 2.5.1 TE2000

Name Description
displayed
GridLineWidth [} 385] Definition of the line width of the coordinate grid
GridLineStyle [} 385] Definition of the line style of the coordinate grid
coordinate grid are to be displayed
grid are to be displayed
Category: YAxis
Name Description
YAxis [} 397] Definition of one or more y-axes
displayed on the y-axis
YAxisWidth [} 397] Definition of the y-axis width
or the keyword
YLabelFontSize [} 398] Definition of the font size for the y-axis labels
YLabelFontSizeUnit [} 398] Selecting the font size unit for the y-axis labels:
YLabelFontWeight [} 398] Selecting the font weight of the y-axis labels:
• Normal
• Bold: bold
YMainTickSteps [} 399] Definition of the step size of the y-axis main
subdivision
YSubTickSteps [} 399] Definition of the step size of the y-axis subdivision
Category: Subgrid
Name Description
SubgridLineWidth [} 388] Definition of the line width of the coordinate subgrid
SubGridLineStyle [} 389] Definition of the line style of the subgrid
SubgridShowHorizontalLines [} 389] Selecting whether the horizontal lines of the
coordinate subgrid are to be displayed
SubgridShowVerticalLines [} 389] Selecting whether the vertical lines of the coordinate
subgrid are to be displayed
ShowTooltip [} 652] Selecting whether the tooltips are to be displayed
TooltipFormat [} 657] • Definition of the formatting of the tooltips.
TooltipFontFamily [} 656] Definition of the font using the name of the font family
or the keyword
TooltipFontSize [} 656] Definition of the font size
TooltipFontWeight [} 657] Selecting the font weight:
• Normal
• Bold: Bold
Events
Category: Framework
TE2000 Version: 2.5.1 381

Name Description
window.
Category: Operator
Name Description
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
Access rights
Name Description
observable.
Control [} 690]
382 Version: 2.5.1 TE2000

Line Chart
See also
A LineChart can be configured as follows:
1. Define the y-axes of the coordinate system using the"YAxis Definitions [} 384]" 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 [} 383]" editor.
Example: Linechart [} 1329]
5.10.2.20.2 Dialogs
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.
Add a new object
TE2000 Version: 2.5.1 383

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
Legend name Definition of the legend name.
YAxis definition dialog

This dialog can be used to add and parameterize the different y-axes.
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
384 Version: 2.5.1 TE2000

GridBackgroundColor
Origin: Line Chart [} 375]
See also
GridLineColor
See also
GridLineWidth
See also
GridLineStyle
See also
TE2000 Version: 2.5.1 385

See also
See also
LineGraphData
Schema: tchmi:framework#/definitions/ChartLineGraphDataDefinitionList
See also
Attribute getter: getLineGraphData
Attribute setter: setLineGraphData
LineGraphDescriptions
Schema: tchmi:framework#/definitions/ChartLineGraphDescriptionDefinitionList
See also
Attribute getter: getLineGraphDescriptions
Attribute setter: setLineGraphDescriptions
386 Version: 2.5.1 TE2000

See also
ShowGrid
See also
ShowTooltip
Selecting whether the tooltips should be displayed in stop mode.
See also
Attribute getter: getShowTooltip
Attribute setter: setShowTooltip
ShowXAxis
See also
ShowXAxisName
TE2000 Version: 2.5.1 387

See also
ShowXSubTicks
See also
ShowYSubTicks
See also
SubgridLineColor
See also
SubgridLineWidth
See also
388 Version: 2.5.1 TE2000

SubGridLineStyle
See also
Attribute getter: getSubGridLineStyle
Attribute setter: setSubGridLineStyle
See also
See also
TooltipBackgroundColor
Definition of the background color of the coordinate system.
See also
Attribute getter: getTooltipBackgroundColor
Attribute setter: setTooltipBackgroundColor
TE2000 Version: 2.5.1 389

TooltipFontColor
Definition of the font color of the tooltip.
See also
Attribute getter: getTooltipFontColor
Attribute setter: setTooltipFontColor
TooltipFontFamily
Definition of the font using the name of the font family or the keyword.
See also
Attribute getter: getTooltipFontFamily
Attribute setter: setTooltipFontFamily
TooltipFontSize
Definition of the font size.
See also
Attribute getter: getTooltipFontSize
Attribute setter: setTooltipFontSize
TooltipFontSizeUnit
Selecting the unit of the font size in the tooltips (pixel or percent).
See also
Attribute getter: getTooltipFontSizeUnit
Attribute setter: setTooltipFontSizeUnit
390 Version: 2.5.1 TE2000

TooltipFontWeight
Selecting the font weight for the tooltips (normal, bold).
See also
Attribute getter: getTooltipFontWeight
Attribute setter: setTooltipFontWeight
TooltipFormat
Definition of the formatting of the tooltips.
This is called when the tooltip is displayed.
the engineering.
[ Function ]
TooltipFormat(valueX: number, valueY: number): string;
Parameter
valueX number The numerical value for the x-
coordinate.
valueY number The numerical value for the y-
coordinate.
Return value
Type Description
string The tooltip to be displayed. HTML is allowed here.
See also
Attribute getter: getTooltipFormat
Attribute setter: setTooltipFormat
XAxisAutoScaling
TE2000 Version: 2.5.1 391

See also
XAxisColor
See also
XAxisDecimalPlaces
See also
XAxisFormat
The formatting function for the labelling texts of the X-axis.
subdivision. It is assigned the respective numerical value.
the engineering.
[ Function ]
Parameter
value number The current numerical value of the
x-axis.
392 Version: 2.5.1 TE2000

Return value
Type Description
See also
XAxisName
See also
XAxisNameFontColor
See also
XAxisNameFontFamily
See also
TE2000 Version: 2.5.1 393

XAxisNameFontSize
See also
See also
XAxisNameFontWeight
See also
XAxisUnit
See also
394 Version: 2.5.1 TE2000

XAxisWidth
See also
XLabelFontColor
See also
XLabelFontFamily
See also
XLabelFontSize
See also
TE2000 Version: 2.5.1 395

XLabelFontSizeUnit
See also
XLabelFontWeight
See also
XMainTickMaxValue
See also
XMainTickMinValue
See also
396 Version: 2.5.1 TE2000

XMainTickSteps
See also
XShowLabels
See also
XSubTickSteps
See also
YAxis
Schema: tchmi:framework#/definitions/ChartYAxisDefinitionList
See also
Attribute getter: getYAxis
Attribute setter: setYAxis
YAxisWidth
TE2000 Version: 2.5.1 397

See also
YLabelFontFamily
See also
YLabelFontSize
See also
YLabelFontSizeUnit
See also
YLabelFontWeight
398 Version: 2.5.1 TE2000

See also
YMainTickSteps
See also
YSubTickSteps
See also
ShowLegend
See also
TE2000 Version: 2.5.1 399

5.10.2.21 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 [} 408]' can be used to display a slider through which the
operator can change the linked value.
Attributes
Category: Colors
Name Description
ProgressBackgroundColor [} 413] Definition of the background color of the bar
ProgressForegroundColor [} 413] Definition of the bar color
ValueColor [} 418] Definition of the text color of the display of the current
value
UnitColor [} 416] Definition of the unit color
TickColor [} 415] Definition of the color of the bar division
LabelColor [} 409] Definition of the text color of the scaling values
Knob Color [} 409] Definition of the fill color of the slider
KnobArrowsColor [} 409] Definition of the outline and arrow color of the slider
Category: Layout
400 Version: 2.5.1 TE2000

Name Description
Orientation [} 412] Selecting the orientation:
• Horizontal: The linear display with the scaling is
aligned horizontally.
• Vertical: The linear display with the scaling is
aligned vertically.
Padding [} 413] Definition of an additional distance between the
control border and the bar for the four sides
defined as dynamic
defined as dynamic
TE2000 Version: 2.5.1 401

Name Description
defined as dynamic
defined as dynamic
be displayed
is to be displayed
402 Version: 2.5.1 TE2000

Name Description
Category: Common
Name Description
Value [} 417] Definition of the value to be displayed
Editable [} 408] Selecting whether the slider should be displayed and
therefore whether the linear gauge is editable
BaseAnimationTime [} 408] Definition of the base animation time in milliseconds.
It describes the time of the animation from minimum
to maximum value.
Category: Border
Name Description
them off
control
control

Name Description
background color
image:
image:
four sides
TE2000 Version: 2.5.1 403

Category: Value
Name Description
MinValue [} 412] Defines the smallest value that the control element
should graphically display
MaxValue [} 412] Defines the largest value that the control element
Step [} 415] Definition of the increment for changing the value via
the slider
ShowValueText [} 414] Selecting whether the current value is to be displayed
Range [} 414] Definition of the value range of the color scales
StartFromZero [} 415] 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.
or the keyword
ValueFontSizeUnit [} 418] Selecting the font size unit:
• Normal
• Italic: italic
ValueFontWeight [} 419] Selecting the font weight:
• Normal
• Bold: bold
ValueFormat [} 419] Definition of a formatting function for the value
ClickAnywheretoEdit [} 408] Selecting whether the value can be changed by
clicking anywhere in the control
Category: Labels
404 Version: 2.5.1 TE2000

Name Description
ShowLabels [} 414] Selecting whether the scaling values are to be
displayed
Label Range [} 412] Definition of the jump distance between the individual
scaling values
Label Position [} 411] 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
or the keyword
LabelFontSize [} 410] Definition of the font size of the scaling
LabelFontSizeUnit [} 410] Selecting the font size unit:
LabelFontStyle [} 410] Selecting the font style of the scaling:
• Normal
• Italic: italic
LabelFontWeight [} 410] Selecting the font weight of the scaling:
• Normal
• Bold: bold
LabelFormat [} 411] Definition of a formatting function for the scaling
Category: Ticks
Name Description
ShowTicks [} 414] Selecting whether the scaling subdivision is to be
displayed
TickDefinition [} 415] Definition of scale division
Category: Unit
TE2000 Version: 2.5.1 405

Name Description
Unit [} 408] Definition of the unit or description of the value
UnitOrientation [} 413] Selecting the unit orientation:
• Theme
• Horizontal
• Vertical
UnitFontSize [} 416] Definition of the font size of the unit
UnitFontSizeUnit [} 416] Selecting the font size unit:
UnitFontStyle [} 417] Selecting the font style of the unit:
• Normal
• Italic: italic
UnitFontWeight [} 417] Selecting the font weight of the unit:
• Normal
• Bold: bold
Events
Category: Control
Name Description
Category: Framework
Name Description
window.
Category: Operator
406 Version: 2.5.1 TE2000

Name Description
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
Access rights
Name Description
observable.
Control [} 690]
Linear Gauge
See also
TE2000 Version: 2.5.1 407

BaseAnimationTime
The base animation time in milliseconds. It describes the time of the animation from minimum to maximum
value.
Origin: Linear Gauge [} 400]
See also
Attribute getter: getBaseAnimationTime
Attribute setter: setBaseAnimationTime
ClickAnywhereToEdit
Click anywhere in the control to change the value.
See also
Attribute getter: getClickAnywhereToEdit
Attribute setter: setClickAnywhereToEdit
Unit
The unit or description of the display value.
See also
Attribute getter: getUnit
Attribute setter: setUnit
Editable
Determines whether the slider should be displayed.
The appearance of the slider can be changed via Themed Resource [} 421] of the control.
408 Version: 2.5.1 TE2000

See also
Attribute getter: getEditable
Attribute setter: setEditable
KnobArrowsColor
Outline and arrow color of the slider.
See also
Attribute getter: getKnobArrowsColor
Attribute setter: setKnobArrowsColor
KnobColor
Fill color of the slider.
See also
Attribute getter: getKnobColor
Attribute setter: setKnobColor
LabelColor
The color of the texts for the scale divisions.
See also
LabelFontFamily
TE2000 Version: 2.5.1 409

See also
LabelFontSize
The font size.
See also
LabelFontSizeUnit
See also
LabelFontStyle
See also
LabelFontWeight
410 Version: 2.5.1 TE2000

See also
LabelFormat
The formatting function for the label texts.
It is called for each value in the label.
the engineering.
[ Function ]
LabelFormat(value: number): string;
Parameter
value number The numerical value for the label.
Return value
Type Description
string The text to be displayed. HTML is not allowed here.
See also
Attribute getter: getLabelFormat
Attribute setter:setLabelFormat
LabelPosition
The position of the label texts and scale division relative to the display.
Schema: tchmi:framework#/definitions/LinearGaugeLabelPosition
See also
Attribute getter: getLabelPosition
TE2000 Version: 2.5.1 411

Attribute setter: setLabelPosition
LabelRange
The value range between the label texts.
See also
Attribute getter: getLabelRange
Attribute setter: setLabelRange
MaxValue
The largest value that the control should display graphically.
See also
Attribute getter: getMaxValue
Attribute setter: setMaxValue
MinValue
The smallest value that the control should display graphically.
See also
Attribute getter: getMinValue
Attribute setter: setMinValue
Orientation
The orientation of the display. Horizontal and vertical orientation are supported.
Schema: tchmi:framework#/definitions/LinearGaugeOrientation
412 Version: 2.5.1 TE2000

See also
Attribute getter: getOrientation
Attribute setter: setOrientation
UnitOrientatin
The orientation of unit.
Schema: tchmi:framework#/definitions/LinearGaugeUnitOrientation
See also
Attribute getter: getUnitOrientation
Attribute setter: setUnitOrientation
Padding
See also
Attribute getter: getPadding
Attribute setter: setPadding
ProgressBackgroundColor
The color to the right of the value.
See also
Attribute getter: getProgressBackgroundColor
Attribute setter: setProgressBackgroundColor
ProgressForegroundColor
The color to the left of the value.
TE2000 Version: 2.5.1 413

See also
Attribute getter: getProgressForegroundColor
Attribute setter: setProgressForegroundColor
Range
The value range of the color scales.
Schema: tchmi:framework#/definitions/GaugeRangeDefinitionList
See also
Attribute getter: getRange
Attribute setter: setRange
ShowLabels
Label texts are either displayed or not.
See also
Attribute getter: getShowLabels
Attribute setter: setShowLabels
ShowTicks
Defines whether main axis markers are to be drawn.
See also
Attribute getter: getShowTicks
Attribute setter: setShowTicks
ShowValueText
Either displays the value or not.
414 Version: 2.5.1 TE2000

See also
Attribute getter: getShowValueText
Attribute setter: setShowValueText
StartFromZero
Starts from zero or at the minimum value. This has no effect if the minimum value is equal to or greater than
zero.
See also
Attribute getter: getStartFromZero
Attribute setter: setStartFromZero
Step
Defines the increment with which the value can be incremented/decremented.
Schema: tchmi:framework#/definitions/PositiveNumber
See also
Attribute getter: getStep
Attribute setter: setStep
TickColor
See also
Attribute getter: getTickColor
Attribute setter: setTickColor
TickDefinition
Describes the scale divisions.
TE2000 Version: 2.5.1 415

Schema: tchmi:framework#/definitions/GaugeTickDefinition
See also
Attribute getter: getTickDefinition
Attribute setter: setTickDefinition
UnitColor
See also
Attribute getter: getUnitColor
Attribute setter: setUnitColor
UnitFontFamily
See also
Attribute getter: getUnitFontFamily
Attribute setter: setUnitFontFamily
UnitFontSize
See also
Attribute getter: getUnitFontSize
Attribute setter: setUnitFontSize
UnitFontSizeUnit
416 Version: 2.5.1 TE2000

See also
Attribute getter: getUnitFontSizeUnit
Attribute setter: setUnitFontSizeUnit
UnitFontStyle
See also
Attribute getter: getUnitFontStyle
Attribute setter: setUnitFontStyle
UnitFontWeight
See also
Attribute getter: getUnitFontWeight
Attribute setter: setUnitFontWeight
Value
The value of the display.
See also
TE2000 Version: 2.5.1 417

ValueColor
The color of the display value.
See also
ValueFontFamily
See also
ValueFontSize
See also
ValueFontSizeUnit
See also
418 Version: 2.5.1 TE2000

ValueFontStyle
See also
ValueFontWeight
See also
ValueFormat
The formatting function for the display value.
It is called for each displayed value.
the engineering.
[ Function ]
ValueFormat(value: number): string;
Parameter
value number The current numerical value.
Return value
Type Description
TE2000 Version: 2.5.1 419

See also
Attribute getter: getValueFormat
Attribute setter: setValueFormat
SetPoint
The setpoint of the display.
Origin: Linear Gauge
See also
Attribute getter: getSetPoint
Attribute setter: setSetPoint
ValueSpace
The size of the displayed value.
See also
Attribute getter: getValueSpace
Attribute setter: setValueSpace
ValueSpaceUnit
See also
Attribute getter: getValueSpaceUnit
Attribute setter: setValueSpaceUnit
420 Version: 2.5.1 TE2000

SetPointMarkerColor
Color of the setpoint marker.
See also
Attribute getter: getSetPointMarkerColor
Attribute setter: setSetPointMarkerColor
5.10.2.21.2 Events
The user has finished the interaction [} 408] with the control.
onValueChanged
The value [} 417] has been changed.

These resources cannot be defined per instance but only for several/all linear gauges via the theme file. If
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 [} 412]. If the
control is positioned vertically, the resource KnobConfigVertical [} 422] 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.
TE2000 Version: 2.5.1 421

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 [} 409] and KnobArrowsColor [} 409] 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 [} 409] as CSS color if
KnobColor [} 409] is set, otherwise removed
• {KnobColorFill} is replaced by "fill:" followed by KnobColor [} 409] as CSS color if KnobColor
[} 409] is set, otherwise removed
• {KnobColorGradientDefinition} is replaced by a matching SVG <linearGradient> element
as string if KnobColor [} 409] is a LinearGradientColor, otherwise removed
• {KnobArrowsColorStroke} is replaced by "stroke:" followed by KnobArrowsColor [} 409] as
CSS color if KnobArrowsColor [} 409] is set, otherwise removed
• {KnobArrowsColorFill} is replaced by "fill:" followed by KnobArrowsColor [} 409] as CSS
color if KnobArrowsColor [} 409] is set, otherwise removed
• {KnobArrowsColorGradientDefinition} is replaced by a matching SVG <linearGradient>
element as string if KnobArrowsColor [} 409] is a LinearGradientColor, 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"
</svg>
Schema: tchmi:framework#/definitions/KnobDefinition
KnobConfigVertical
This definition only applies to gauges that are vertically aligned via the attribute Orientation [} 412]. If the
control is positioned horizontally, the resource KnobConfigHorizontal [} 421] is used.

422 Version: 2.5.1 TE2000


Example SVG
<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"
<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"
</svg>
5.10.2.22 Localization Select

A combo box to select the localization.
Attributes
Category: Colors
Name Description
list
drop-down list
Category: Layout
TE2000 Version: 2.5.1 423

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
424 Version: 2.5.1 TE2000

Name Description
be displayed
is to be displayed
Category: Common
TE2000 Version: 2.5.1 425

Name Description
LocalizationMapping [} 436] Changes the designation for each localization
identifier.
A simple list of options can be compiled in the
Engineering. Each option consists of these
components:
▪ Code: Localization identifier (e.g.: de-DE)
▪ Text: Display text

Category: Border
Name Description
them off
control
control

Name Description
background color
image:
image:
four sides
Category: Text
426 Version: 2.5.1 TE2000

Name Description
or the keyword
• Normal
• Italic
• Oblique
• Normal
• Bold
Category: DropDown
Name Description
drop-down list
drop-down list
menu
MaxListHeight [} 435] Definition of the maximum height of the drop-down
list
• Normal
• Italic
• Oblique
• Normal
• Bold
Events
Category: Framework
TE2000 Version: 2.5.1 427

Name Description
window.
Category: Operator
Name Description
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
Access rights
Name Description
observable.
Control [} 690]
428 Version: 2.5.1 TE2000

LocalizationSelect
See also
DataHeight
Origin: Localization Select [} 423]
See also
See also
DropDownFontFamily
TE2000 Version: 2.5.1 429

See also
DropDownFontSize
See also
See also
DropDownFontStyle
See also
430 Version: 2.5.1 TE2000

DropDownFontWeight
See also
See also
See also
TE2000 Version: 2.5.1 431

See also
DropDownTextColor
See also
See also
See also
432 Version: 2.5.1 TE2000

See also
DropDownStyle
background.

See also
TextFontFamily
See also
TE2000 Version: 2.5.1 433

TextFontSize
See also
TextFontSizeUnit
See also
TextFontStyle
See also
434 Version: 2.5.1 TE2000

TextFontWeight
See also
See also
MaxListHeight
See also
TextColor
TE2000 Version: 2.5.1 435

See also
ContentPadding
See also
LocalizationMapping
Changes the designation for each localization identifier.
A simple list of options can be compiled in the Engineering. Each option consists of these components:
• Code: Localization identifier (e.g.: de-DE)
• Text: Display text
Schema: tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.TcHmiLocalizationSelect.ListItemList
See also
Attribute getter: getLocalizationMapping
Attribute setter: setLocalizationMapping
5.10.2.23 Numeric Input

An input element for numeric values.
Attributes
Category: Colors
436 Version: 2.5.1 TE2000

Name Description
Category: Layout
TE2000 Version: 2.5.1 437

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
438 Version: 2.5.1 TE2000

Name Description
be displayed
is to be displayed
Category: Common
TE2000 Version: 2.5.1 439

Name Description
MinValue [} 444] Definition of the minimum value
MaxValue [} 444] Definition of the maximum value
DecimalDigits [} 444] Number of decimal places
Category: Border
Name Description
them off
control
control
440 Version: 2.5.1 TE2000

Name Description
background color
image:
image:
four sides
Category: Value
Name Description
or the keyword
• Normal
• Italic
• Oblique
• Normal
• Bold
value is entered.
Events
Category: Control
Name Description
Category: Framework
TE2000 Version: 2.5.1 441

Name Description
window.
Category: Operator
Name Description
control element.
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
442 Version: 2.5.1 TE2000

Access rights
Name Description
observable.
Control [} 690]
NumericInput
See also
ValueColor
Color of the value.
Origin: Numeric Input [} 436]
See also
Value
See also
TE2000 Version: 2.5.1 443

MinValue
Minimum value of the control.
See also
MaxValue
Maximum value of the control.
See also
DecimalDigits
The decimal places of the value.
See also
Attribute getter: getDecimalDigits
Attribute setter: setDecimalDigits
444 Version: 2.5.1 TE2000

ValueFontFamily
See also
ValueFontSize
See also
ValueFontSizeUnit
See also
ValueFontStyle
TE2000 Version: 2.5.1 445

See also
ValueFontWeight
See also
See also
ContentPadding
See also
446 Version: 2.5.1 TE2000

Placeholder
See also
AutoFocusOut
See also
AutoSelectText
See also
TE2000 Version: 2.5.1 447

See also
5.10.2.23.2 Events
onFocusIn
onFocusOut
onValueChanged
448 Version: 2.5.1 TE2000

5.10.2.24 Password Input

An operating element for entering a password.
Attributes
Category: Colors
Name Description
Category: Layout
TE2000 Version: 2.5.1 449

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
450 Version: 2.5.1 TE2000

Name Description
be displayed
is to be displayed
Category: Common
TE2000 Version: 2.5.1 451

Name Description
Category: Border
Name Description
them off
control
control

Name Description
background color
image:
image:
four sides
Category: Text
452 Version: 2.5.1 TE2000

Name Description
or the keyword
• Normal
• Italic
• Oblique
• Normal
• Bold
text is entered.
Events
Category: Control
Name Description
Category: Framework
Name Description
window.
Category: Operator
TE2000 Version: 2.5.1 453

Name Description
control element.
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
Access rights
Name Description
observable.
Control [} 690]
Input [} 340]
PasswordInput
454 Version: 2.5.1 TE2000

See also
5.10.2.25 PDF Viewer

The PDF Viewer control enables embedded display of PDF files in TwinCAT HMI applications.
Attributes
Category: Colors
Name Description
Category: Layout
TE2000 Version: 2.5.1 455

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
456 Version: 2.5.1 TE2000

Name Description
be displayed
is to be displayed
Category: Common
TE2000 Version: 2.5.1 457

Name Description
File [} 460] The path to the PDF file to be displayed.
Page [} 460] The number of the page to be displayed initially.
NamedDestination [} 461] The label to be displayed initially.
Zoom [} 461] Zoom level to be used initially.
Accepted formats: [zoom], [left offset], [top offset],
page-width, page-height, page-fit, auto\nExample:
zoom=200
PageMode [} 461] Page mode (state of the sidebar).
Accepted values: none, thumbs, bookmarks,
attachments\nExample: pagemode=none
Category: Border
Name Description
them off
control
control

Name Description
background color
image:
image:
four sides
458 Version: 2.5.1 TE2000

Events
Category: Control
Name Description
Category: Framework
Name Description
window.
Category: Operator
Name Description
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
TE2000 Version: 2.5.1 459

Access rights
Name Description
observable.
Control [} 690]
PDF Viewer
NuGet package: Beckhoff.TwinCAT.HMI.PDFViewer
See also
File
The path to the PDF file to be displayed.
Origin: PDF Viewer [} 455]
See also
Attribute getter: getFile
Attribute setter: setFile
Page
The number of the page to be displayed initially.
Schema: tchmi:general#/definitions/Integer
See also
Attribute getter: getPage
Attribute setter: setPage
460 Version: 2.5.1 TE2000

NamedDestination
The label to be displayed initially.
See also
Attribute getter: getNamedDestination
Attribute setter: setNamedDestination
Zoom
Zoom level to be used initially.
Accepted formats: [zoom], [left offset], [top offset], page-width, page-height, page-fit, auto\nExample:
zoom=200
See also
Attribute getter: getZoom
Attribute setter: setZoom
PageMode
Page mode (state of the sidebar).
Accepted values: none, thumbs, bookmarks, attachments\nExample: pagemode=none
See also
Attribute getter: getPageMode
Attribute setter: setPageMode
5.10.2.26 Polygon
Closed shape formed from a set of interconnected points. The last point is automatically connected to the
first point.
Attributes
Category: Colors
TE2000 Version: 2.5.1 461

Name Description
Category: Layout
462 Version: 2.5.1 TE2000

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
TE2000 Version: 2.5.1 463

Name Description
be displayed
is to be displayed
Category: Common
464 Version: 2.5.1 TE2000

Name Description
Points [} 468] Definition of the points that describe the polygon.
Each point is defined by an x-coordinate and a y-
coordinate.
Category: Border
Name Description
them off
control
control

Name Description
background color
image:
image:
four sides
Category: Shape
TE2000 Version: 2.5.1 465

Name Description
StrokeStyle [} 469] Definition of the line style
FillMode [} 468] 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 [} 468] 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
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
Events
Category: Framework
Name Description
window.
Category: Operator
466 Version: 2.5.1 TE2000

Name Description
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
Access rights
Name Description
observable.
Control [} 690]
Polygon
See also
TE2000 Version: 2.5.1 467

FillColor
Origin: Polygon [} 461]
See also
FillMode
Defines which areas are inside or outside. This is only required for self-overlapping polygons.
Schema: tchmi:framework#/definitions/FillMode
See also
Attribute getter: getFillMode
Attribute setter: setFillMode
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
See also
Attribute getter: getPoints
Attribute setter: setPoints
ScaleMode
Scales the content to the control size.
468 Version: 2.5.1 TE2000

See also
StrokeColor
See also
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".
See also
StrokeThickness
Defines the border width of the control in pixels.
See also
TE2000 Version: 2.5.1 469

StrokeThicknessUnit
See also
5.10.2.27 Polyline
Open shape formed from a set of interconnected points.
Attributes
Category: Colors
Name Description
Category: Layout
470 Version: 2.5.1 TE2000

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
TE2000 Version: 2.5.1 471

Name Description
be displayed
is to be displayed
Category: Common
472 Version: 2.5.1 TE2000

Name Description
Points [} 468] Definition of the points that describe the polygon.
Each point is defined by an x-coordinate and a y-
coordinate.
Category: Border
Name Description
them off
control
control

Name Description
background color
image:
image:
four sides
Category: Shape
TE2000 Version: 2.5.1 473

Name Description
FillMode [} 468] 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 [} 468] 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
control. The proportions of the polygon are
maintained.
• ScaleToFitWidth: The polygon is displayed over
the entire width of the control, regardless of
• ScaleToFitHeight: The polygon is displayed over
the entire height of the control, regardless of
Events
Category: Framework
Name Description
window.
Category: Operator
474 Version: 2.5.1 TE2000

Name Description
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
Access rights
Name Description
observable.
Control [} 690]
Polygon [} 461]
Polyline
TE2000 Version: 2.5.1 475

See also
5.10.2.28 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 [} 484]' can be used to display a slider through which the
operator can change the linked value.
Attributes
Category: Colors
Name Description
ProgressBackgroundColor [} 489] Definition of the background color of the bar
ProgressForegroundColor [} 489] Definition of the bar color
GaugeBackground [} 485] Definition of the color of the round background
value
TickColor [} 492] Definition of the scaling color
KnobColor [} 485] Definition of the fill color of the slider
KnobArrowsColor [} 485] Definition of the outline and arrow color of the slider
Category: Layout
476 Version: 2.5.1 TE2000

Name Description
StartPosition [} 490] Definition of the start angle of the display
EndPosition [} 485] Definition of the end angle of the display
defined as dynamic
defined as dynamic
defined as dynamic
TE2000 Version: 2.5.1 477

Name Description
defined as dynamic
be displayed
is to be displayed
Category: Common
478 Version: 2.5.1 TE2000

Name Description
Editable [} 484] Selecting whether the slider should be displayed and
therefore whether the linear gauge is editable
BaseAnimationTime [} 484] Definition of the base animation time in milliseconds.
to maximum value.
Category: Border
Name Description
them off
control
control

Name Description
background color
image:
image:
four sides
Category: Value
TE2000 Version: 2.5.1 479

Name Description
Step [} 491] Definition of the increment for changing the value via
the slider
StartFromZero [} 491] Selecting whether the minimum value is to be zero
irrespective of the 'Minimum Value' attribute.
or the keyword
• Normal
• Italic: italic
• Normal
• Bold: bold
ClickAnywhereToEdit [} 484] Selecting whether the value can be changed by
clicking anywhere in the control
Category: Labels
480 Version: 2.5.1 TE2000

Name Description
displayed
LabelPosition [} 488] Selecting the position of the scaling to the bar:
• Inside
• Outside
LabelRange [} 488] Definition of the jump distance between the individual
scaling values
or the keyword
LabelFontSizeUnit [} 487] Selecting the unit:
• Normal
• Italic: italic
• Normal
• Bold: bold
Category: Ticks
Name Description
displayed
TickDefinition [} 492] Definition of scale divisions
SubTickPosition [} 491] Selecting the position of the auxiliary scaling to the
bar:
• Inside
• Outside
Category: Unit
TE2000 Version: 2.5.1 481

Name Description
UnitFontFamily [} 492] Definition of the font using the name of the font family
or the keyword
UnitFontStyle [} 493] Selecting the font style of the label:
• Normal
• Italic: italic
UnitFontWeight [} 493] Selecting the font weight:
• Normal
• Bold: bold
Events
Category: Control
Name Description
Category: Framework
Name Description
window.
Category: Operator
482 Version: 2.5.1 TE2000

Name Description
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
Access rights
Name Description
observable.
Control [} 690]
Radial Gauge
See also
TE2000 Version: 2.5.1 483

BaseAnimationTime
The base animation time in milliseconds. It describes the time of the animation from minimum to maximum
value.
Origin: Radial Gauge [} 476]
See also
ClickAnywhereToEdit
Click anywhere in the control to change the value.
See also
Attribute getter: getClickAnywhereToEdit
Attribute setter: setClickAnywhereToEdit
Unit
See also
Editable
Determines whether the slider should be displayed.
The appearance of the slider can be changed via Themed Resource of the control.
484 Version: 2.5.1 TE2000

See also
Attribute getter: getEditable
Attribute setter: setEditable
EndPosition
The end angle of the display. The value 0 points to the right and 90 points upwards.
See also
Attribute getter: getEndPosition
Attribute setter: setEndPosition
Also observe the corresponding attribute StartPosition [} 490].
GaugeBackgroundColor
The color of the round background.
See also
Attribute getter: getGaugeBackgroundColor
Attribute setter: setGaugeBackgroundColor
KnobArrowsColor
Outline and arrow color of the slider.
See also
Attribute getter: getKnobArrowsColor
Attribute setter: setKnobArrowsColor
KnobColor
Fill color of the slider.
TE2000 Version: 2.5.1 485

See also
Attribute getter: getKnobColor
Attribute setter: setKnobColor
LabelColor
See also
LabelFontFamily
See also
LabelFontSize
See also
486 Version: 2.5.1 TE2000

LabelFontSizeUnit
See also
LabelFontStyle
See also
LabelFontWeight
See also
LabelFormat
the engineering.
[ Function ]
TE2000 Version: 2.5.1 487

Parameter
Return value
Type Description
See also
Attribute setter:setLabelFormat
LabelPosition
The position of the label texts (inside or outside).
Schema: tchmi:framework#/definitions/RadialGaugeLabelPosition
See also
LabelRange
See also
MaxValue
488 Version: 2.5.1 TE2000

See also
MinValue
See also
ProgressBackgroundColor
The color to the right of the value.
See also
Attribute getter: getProgressBackgroundColor
Attribute setter: setProgressBackgroundColor
ProgressForegroundColor
The color to the left of the value.
See also
Attribute getter: getProgressForegroundColor
Attribute setter: setProgressForegroundColor
Range
TE2000 Version: 2.5.1 489

See also
ShowLabels
See also
ShowTicks
See also
ShowValueText
Either displays the number value or not.
See also
StartPosition
The start angle of the display. The value 0 points to the right and 90 points upwards.
490 Version: 2.5.1 TE2000

See also
Attribute getter: getStartPosition
Attribute setter: setStartPosition
Also observe the corresponding attribute EndPosition [} 485].
StartFromZero
Starts from zero or at the minimum value. This has no effect if the minimum value is equal to or greater than
zero.
See also
Attribute getter: getStartFromZero
Attribute setter: setStartFromZero
Step
Schema: tchmi:framework#/definitions/PositiveNumber
See also
SubTickPosition
The position (inside or outside) of the secondary to the primary scale divisions.
See also
Attribute getter: getSubTickPosition
Attribute setter: setSubTickPosition
TE2000 Version: 2.5.1 491

TickColor
See also
TickDefinition
See also
UnitColor
See also
UnitFontFamily
See also
492 Version: 2.5.1 TE2000

UnitFontSize
See also
UnitFontSizeUnit
See also
UnitFontStyle
See also
UnitFontWeight
See also
TE2000 Version: 2.5.1 493

Value
See also
ValueColor
See also
ValueFontFamily
See also
ValueFontSize
See also
494 Version: 2.5.1 TE2000

ValueFontSizeUnit
See also
ValueFontStyle
See also
ValueFontWeight
See also
ValueFormat
TE2000 Version: 2.5.1 495

the engineering.
[ Function ]
Parameter
Return value
Type Description
See also
SetPoint
The setpoint of the display.
See also
Attribute getter: getSetPoint
Attribute setter: setSetPoint
SetPointMarkerColor
Color of the setpoint marker.
See also
Attribute getter: getSetPointMarkerColor
Attribute setter: setSetPointMarkerColor
496 Version: 2.5.1 TE2000

GaugeAlignment
The position of the control.
Schema: tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.TcHmiRadialGauge.GaugeAlignment
See also
Attribute getter: getGaugeAlignment
Attribute setter: setGaugeAlignment
5.10.2.28.2 Events
The user has finished the interaction [} 484] with the control.
onValueChanged

These resources cannot be defined per instance but only for several/all radial gauges via the theme file. If
KnobConfig
TE2000 Version: 2.5.1 497


Example SVG
<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"
<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"
</svg>
5.10.2.29 Radio button

A radio button has a RadioState [} 505] parameter. This parameter has the value "Normal" if the radio button
is not selected and "Active" if the radio button is selected.
Only one radio button from a RadioGroup [} 505] can be selected at a time. If you select another radio button
from RadioGroup [} 505], the last button that was selected will be deselected.
The .onRadioStateChanged [} 509] event can be used to perform actions when the state of the radio button
changes.
Attributes
Category: Colors
Name Description
RadioStateIconColor [} 505] Definition of the color of the state marker.
498 Version: 2.5.1 TE2000

Category: Layout
TE2000 Version: 2.5.1 499

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
500 Version: 2.5.1 TE2000

Name Description
be displayed
is to be displayed
Category: Common
TE2000 Version: 2.5.1 501

Name Description
StateSymbol [} 505] Reflects the state of the RadioButton for the assigned
RadioState [} 505] Definition of the internal switching state of the control
RadioGroup [} 505] User-defined name for a group. Only one radio button
in this group can be active.
Text [} 506] The text to be displayed next to the radio button.

Category: Border
Name Description
them off
control
control

Name Description
background color
image:
image:
four sides
Category: Text
502 Version: 2.5.1 TE2000

Name Description
Events
Category: Control
Name Description
Category: Framework
Name Description
window.
Category: Operator
TE2000 Version: 2.5.1 503

Name Description
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
Access rights
Name Description
observable.
Control [} 690]
Radio button
See also
504 Version: 2.5.1 TE2000

StateSymbol
Reflects the state of the radio button for the assigned symbol and vice versa.
Schema: tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.TcHmiRadioButton.StateSymbol
Origin: Radio Button [} 498]
See also
RadioState
See also
Attribute getter: getRadioState
Attribute setter: setRadioState
RadioGroup
User-defined name for a group. Only one control in this group can be active.
A RadioGroup can only consist of controls of type Radio Button [} 498].
See also
Attribute getter: getRadioGroup
Attribute setter: setRadioGroup
RadioStateIconColor
TE2000 Version: 2.5.1 505

See also
Attribute getter: getRadioStateIconColor
Attribute setter: setRadioStateIconColor
Text
The text to be displayed next to the radio button.
See also
TextPosition
The text position.
Schema: tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.TcHmiRadioButton.TextPosition
See also
Attribute getter: getTextPosition
Attribute setter: setTextPosition
The horizontal alignment of the text.
See also
The vertical alignment of the text.
506 Version: 2.5.1 TE2000

See also
TextFontFamily
See also
TextFontSize
See also
TextFontSizeUnit
See also
TextFontStyle
TE2000 Version: 2.5.1 507

See also
TextFontWeight
The font weight (normal, bold)
See also
TextColor
Definition of the text color.
See also
TextBackgroundColor
Definition of the text background color.
See also
Attribute getter: getTextBackgroundColor
Attribute setter: setTextBackgroundColor
508 Version: 2.5.1 TE2000

5.10.2.29.2 Events
onRadioStateChanged
The RadioState [} 505] value of the radio button has changed.
onStateChanged
The state has changed.
5.10.2.30 Recipe Select

The Recipe Select control allows you to browse, select, activate and teach recipes from the Recipe
Management Extension on the server.
Attributes
Category: Colors
Name Description
Category: Layout
TE2000 Version: 2.5.1 509

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
510 Version: 2.5.1 TE2000

Name Description
be displayed
is to be displayed
Category: Common
TE2000 Version: 2.5.1 511

Name Description
ServerDomain [} 514] The domain of the recipe management extension on
the server.
Standard setting: TcHmiRecipeManagement
ServerInterval [} 514] Interval time to be used for server subscriptions.
Standard setting: 1000
SelectedRecipeFullName [} 515] The complete name including the path of the
currently selected recipe.
SelectedRecipeName [} 515] The name of the currently selected recipe.
SelectedRecipePath [} 515] The path of the currently selected recipe.
Category: Border
Name Description
them off
control
control

Name Description
background color
image:
image:
four sides
Events
Category: Control
512 Version: 2.5.1 TE2000

Name Description
Category: Framework
Name Description
window.
Category: Operator
Name Description
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
TE2000 Version: 2.5.1 513

Access rights
Name Description
observable.
activateRecipe [} 515] Specifies whether the current user can activate a
selected recipe.
teachRecipe [} 516] Specifies whether the current user can teach a
selected recipe.
Control [} 690]
Recipe Select
See also
ServerDomain
The domain of the recipe management extension on the server.
Standard setting: TcHmiRecipeManagement
Origin: Recipe Select [} 509]
See also
ServerInterval
Interval time to be used for server subscriptions.
Standard setting: 1000
See also
514 Version: 2.5.1 TE2000

SelectedRecipeFullName
The complete name including the path of the currently selected recipe.
See also
Attribute getter: getSelectedRecipeFullName
This attribute is read-only, so it has no setter.
SelectedRecipeName
The name of the currently selected recipe.
See also
Attribute getter: getSelectedRecipeName
SelectedRecipePath
The path of the currently selected recipe.
See also
Attribute getter: getSelectedRecipePath
activateRecipe
Specifies whether the current user can activate a selected recipe.
If this right is missing, the Activate button is disabled.
TE2000 Version: 2.5.1 515

See also
teachRecipe
Specifies whether the current user can teach a selected recipe.
If this right is missing, the Teach button is disabled.
See also
5.10.2.31 Rectangle
A rectangular object.
Attributes
Category: Colors
Name Description
StrokeColor [} 523] Definition of the line color
Category: Layout
516 Version: 2.5.1 TE2000

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
TE2000 Version: 2.5.1 517

Name Description
be displayed
is to be displayed
Category: Common
518 Version: 2.5.1 TE2000

Name Description
Category: Border
Name Description
them off
control
control

Name Description
background color
image:
image:
four sides
Category: Shape
TE2000 Version: 2.5.1 519

Name Description
RadiusX [} 522] Definition of the x-axis radius of the ellipse used to
round the corners of the rectangle
RadiusXUnit [} 522] Selecting the unit of the x-axis radius:
• Pixel for an absolute radius
RadiusY [} 522] Definition of the y-axis radius of the ellipse used to
round the corners of the rectangle
RadiusYUnit [} 522] Selecting the unit of the y-axis radius:
• Pixel for an absolute radius
Events
Category: Framework
Name Description
window.
Category: Operator
520 Version: 2.5.1 TE2000

Name Description
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
Access rights
Name Description
observable.
Control [} 690]
Rectangle
See also
TE2000 Version: 2.5.1 521

RadiusX
Definition of the x-axis radius of the ellipse used to round the corners of the rectangle.
If a value is given for radius X but not for radius Y (or vice versa), this value applies to radius X and radius Y.
Origin: Rectangle [} 516]
See also
Attribute getter: getRadiusX
Attribute setter: setRadiusX
RadiusXUnit
See also
Attribute getter: getRadiusXUnit
RadiusY
Definition of the y-axis radius of the ellipse used to round the corners of the rectangle.
If a value is given for radius X but not for radius Y (or vice versa), this value applies to radius X and radius Y.
See also
Attribute getter: getRadiusY
Attribute setter: setRadiusY
RadiusYUnit
522 Version: 2.5.1 TE2000

See also
Attribute getter: getRadiusYUnit
FillColor
See also
StrokeColor
See also
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".
See also
StrokeThickness
TE2000 Version: 2.5.1 523

See also
StrokeThicknessUnit
See also
5.10.2.32 ScopeControl
Scope recordings can be started, stopped and analyzed with the Scope control.
Attributes
Category: Colors
Name Description
Category: Layout
524 Version: 2.5.1 TE2000

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
TE2000 Version: 2.5.1 525

Name Description
be displayed
is to be displayed
Category: Common
526 Version: 2.5.1 TE2000

Name Description
ScopeConfig [} 531] Definition of the Scopeconfig with the config name
and the chart name.
ServerInterval [} 531] Definition of the update rate of the data from the
scope extension.
EnabledRecordControls [} 532] Selecting whether the start/stop record buttons
should be displayed.
ChartColorSource [} 532] Selection of the display mode of the scope diagram:
• ScopeConfig: Uses the colors from the scope
config.
• Theme: uses the theme colors.
ServerDomain [} 531] Definition of the server extension name.
ShowTriggerWindow [} 533] Definition of whether the trigger window should be
displayed.
TriggerWindowPosition [} 532] Definition of where the trigger window should be
displayed.
• Top
• Bottom
• Right
• Left
Category: Border
Name Description
them off
control
control
TE2000 Version: 2.5.1 527

Name Description
background color
image:
image:
four sides
Events
Category: Control
Name Description
onLoadedData [} 137] The audio file was loaded successfully.
onError [} 137] The audio file was not loaded successfully.
onVolumeChange [} 137] The volume of the audio file has been changed.
onDurationChange [} 137] The duration of the audio file has changed.
onIsEndedChange [} 137] The audio file has been terminated.
onIsPlayingChange [} 138] The audio file has changed its playback status.
Category: Framework
Name Description
window.
Category: Operator
528 Version: 2.5.1 TE2000

Name Description
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
Functions
Name Description
TE2000 Version: 2.5.1 529

startRecord [} 533] TcHmiScopeControl Starting a scope recording

stopRecord [} 533] TcHmiScopeControl Stopping a scope recording
startDisplay [} 533] TcHmiScopeControl Starts calling up the live data from
the scope recording.
stopDisplay [} 534] TcHmiScopeControl Stops calling up the live data from
the scope recording.
zoomToDefault [} 534] TcHmiScopeControl Sets the image region to the
default value.
zoomOutMax [} 534] TcHmiScopeControl Sets the image region to the
largest possible.
goTo [} 534] TcHmiScopeControl Sets the image region start time to
the selected timespan from the
recording start time.
setDisplayWidth [} 535] TcHmiScopeControl Sets the image region to the
desired section.
scroll [} 535] TcHmiScopeControl Scrolls the image region forward or
backward.
scrollBig [} 535] TcHmiScopeControl Scrolls the image region forward or
backward by one full page.
undo [} 535] TcHmiScopeControl Undoes the last action.
redo [} 536] TcHmiScopeControl Restores the last action.
setOverviewMode [} 536] TcHmiScopeControl Switches the overview on/off.
setMouseMode [} 536] TcHmiScopeControl Sets the mouse mode for the
interactions.
getMouseMode [} 536] TcHmiScopeControl Queries the mouse mode.
Access rights
Name Description
observable.
Control
Scope Control
See also
530 Version: 2.5.1 TE2000

ScopeConfig
Defines the chart in a configuration that is displayed and for which a recording is to be started.
Schema: tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.TcHmiScopeControl.Config
Origin: ScopeControl [} 524]
See also
Attribute getter: getScopeConfig
Attribute setter: setScopeConfig
ServerInterval
Definition of the interval at which the data is updated with the scope extension.
See also
ServerDomain
Definition of the server extension name.
See also
TE2000 Version: 2.5.1 531

EnabledRecordControls
Selecting whether the Start/StopRecord buttons should be displayed.
See also
Attribute getter: getEnableRecordControls
Attribute setter: setEnableRecordControls
ChartColorSource
Defines whether the colors from ScopeConfig or the theme colors are to be used.
• ScopeConfig: Uses the specified colors from the ScopeConfig.
• Theme: Uses the theme colors.
Schema: tchmi:framework#/TcHmi.Controls.Beckhoff.TcHmiScopeControl.ChartColorSource
See also
Attribute getter: getChartColorSource
Attribute setter: setChartColorSource
TriggerWindowPosition
Defines where the trigger window should be displayed.
• Top
• Botton
• Right
• Left
Schema: tchmi:framework#/TcHmi.Controls.Beckhoff.TcHmiScopeControl.TriggerWindowPosition
See also
Attribute getter: getTriggerWindowPosition
Attribute setter: setTriggerWindowPosition
532 Version: 2.5.1 TE2000

ShowTriggerWindow
Selection whether the trigger window should be displayed.
See also
Attribute getter: getShowTriggerWindow
Attribute setter: setShowTriggerWindow
startRecord
Starts a scope recording.
Return value: null
stopRecord
Stops a scope recording.
Return value: null
startDisplay
Starts calling up the live data from the scope recording.
Return value: null
TE2000 Version: 2.5.1 533

stopDisplay
Stops calling up the live data from the scope recording.
Return value: null
zoomToDefault
Sets the image region to the default value.
Return value: null
zoomOutMax
Sets the image region to the largest possible.
Return value: null
goTo
Sets the image region start time to the selected timespan from the recording start time.
Parameter:
• valueNew: Timespan in scope format.
Return value: null
534 Version: 2.5.1 TE2000

setDisplayWidth
Sets the image region to the desired section.
Parameter:
• valueNew: Timespan in scope format.
Return value: null
scroll
Scrolls the image region forward or backward.
Parameter:
• valueNew: Direction (Forward, Reserve) as string.
Return value: null
scrollBig
Scrolls the image region forward or backward by one full page.
Parameter:
• valueNew: Direction (Forward, Reserve) as string.
Return value: null
undo
Undoes the last action.
Return value: null
TE2000 Version: 2.5.1 535

redo
Restores the last action.
Return value: null
setOverviewMode
Switches the overview on/off.
Return value: null
getMouseMode
Sets the mouse mode for the interactions.
Return value: MouseMode (ZoomX, ZoomXY, PanX, PanXY) as string
setMouseMode
Sets the mouse mode for the interactions.
Parameter:
• valueNew: Mousemode (ZoomX, ZoomXY, PanX, PanXY) as string.
Return value: null

These resources cannot be defined per instance, but only for several/all scope controls via the theme file
[} 940]. If you really want to change only one instance, you must create a class [} 937] for it.
536 Version: 2.5.1 TE2000

ChartBackgroundColor
This is the color used for the chart background if theme is defined in the attribute ChartColorSource [} 532].
Origin: Scope Control [} 524]
ChartForegroundColor
This is the color used for the chart foreground (e.g. the chart heading) if theme is defined in the attribute
ChartColorSource [} 532].
OverviewBackgroundColor
This is the color used for the overview background if theme is defined in the attribute ChartColorSource
[} 532].
OverviewForegroundColor
This is the color used for the overview foreground (lines, font color, etc.) if theme is defined in the attribute
CanvasBackgroundColor
This is the color used for the canvas background if theme is defined in the attribute ChartColorSource [} 532].
TE2000 Version: 2.5.1 537

AxisColor
This is the color used for the axes including the axis labels and axis name if theme is defined in the attribute
GridColor
This is the color used for the gridlines if theme is defined in the attribute ChartColorSource [} 532].
5.10.2.33 Spinbox Input

An input element for numerical values with buttons for increasing and decreasing the value.
Attributes
Category: Colors
Name Description
Category: Layout
538 Version: 2.5.1 TE2000

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
TE2000 Version: 2.5.1 539

Name Description
be displayed
is to be displayed
Category: Common
540 Version: 2.5.1 TE2000

Name Description
MinValue [} 444] Definition of the minimum value
MaxValue [} 444] Definition of the maximum value
DecimalDigits [} 444] Number of decimal places
Step [} 544] Defines the increment with which the value can be
incremented/decremented.
ButtonPosition [} 544] The position of the spinbox buttons relative to the
display.
Category: Border
Name Description
them off
control
control
TE2000 Version: 2.5.1 541

Name Description
background color
image:
image:
four sides
Category: Value
Name Description
or the keyword
• Normal
• Italic
• Oblique
• Normal
• Bold
value is entered.
Events
Category: Control
Name Description
Category: Framework
542 Version: 2.5.1 TE2000

Name Description
window.
Category: Operator
Name Description
control element.
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
TE2000 Version: 2.5.1 543

Access rights
Name Description
observable.
Control [} 690]
NumericInput [} 436]
SpinboxInput
See also
Step
Origin: Spinbox Input [} 538]
See also
ButtonPosition
The position of the spinbox buttons relative to the display.
Schema: tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.TcHmiSpinboxInput.ButtonPosition
Origin: Spinbox Input [} 538]
See also
544 Version: 2.5.1 TE2000

5.10.2.34 State Image

A state control is an image display in which different image files from the project path can be displayed
depending on the state of an assigned variable.
The supported image formats are defined by the browser used.
Attributes
Category: Colors
Name Description
Category: Layout
TE2000 Version: 2.5.1 545

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
546 Version: 2.5.1 TE2000

Name Description
be displayed
is to be displayed
Category: Common
TE2000 Version: 2.5.1 547

Name Description
State [} 550] Definition of the symbol that is queried
StateList [} 550] List of assignments of images to values of the state
symbol
FallbackImage [} 551] Image that is accessed if the state is not defined in
the StateList or if no image is assigned to the current
value of the state symbol in the StateList
Category: Border
Name Description
them off
control
control

Name Description
background color
image:
image:
four sides
Events
Category: Framework
548 Version: 2.5.1 TE2000

Name Description
window.
Category: Operator
Name Description
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
Access rights
Name Description
observable.
Control [} 690]
TE2000 Version: 2.5.1 549

StateImage
See also
State
Definition of the state symbol that is queried.
Origin: State Image [} 545]
See also
Attribute getter: getState
Attribute setter: setState
StateList
List of assignments of images to values of the state symbol.
By engineering, a list of assignments can be created so that a certain image is displayed for a certain value
of the state symbol.
Each element of the StateList consists of these components:

• Value: Value that the state symbol can assume.
• Icon: The address of the image displayed in the StateImage control. Images on other servers are also
possible.
Schema: tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.TcHmiStateImage.StateList
See also
Attribute getter: getStateList
Attribute setter: setStateList
550 Version: 2.5.1 TE2000

FallbackImage
Image that is accessed if the state is not defined in the StateList or if no image is assigned to the current
value of the state symbol in the StateList.
See also
Attribute getter: getFallbackImage
Attribute setter: setFallbackImage
5.10.2.35 Tachometer
A tachometer is a radial indicator that displays a value on a scale using a tachometer needle.
Attributes
Category: Colors
Name Description
GaugeBackgroundColor [} 559] Definition of the color of the round background
value
TickColor [} 565] Definition of the scaling color
NeedleColor [} 559] Definition of the color of the tachometer needle
Category: Layout
TE2000 Version: 2.5.1 551

Name Description
StartPosition [} 564] Definition of the start angle of the display
EndPosition [} 558] Definition of the end angle of the display
defined as dynamic
defined as dynamic
defined as dynamic
552 Version: 2.5.1 TE2000

Name Description
defined as dynamic
be displayed
is to be displayed
Category: Common
TE2000 Version: 2.5.1 553

Name Description
NeedleLength [} 559] The length of the tachometer needle as a percentage
of the radius of the control.
BaseAnimationTime [} 558] Definition of the basic animation time in milliseconds.
to maximum value.
Category: Border
Name Description
them off
control
control

Name Description
background color
image:
image:
four sides
Category: Value
554 Version: 2.5.1 TE2000

Name Description
or the keyword
• Normal
• Italic
• Oblique
• Normal
• Bold
Category: Labels
Name Description
displayed
LabelPosition [} 562] Selecting the position of the scaling to the bar:
• Inside
• Outside
LabelRange [} 562] Definition of the jump distance between the individual
scaling values
or the keyword
LabelFontSizeUnit [} 560] Selecting the unit:
• Normal
• Italic
• Oblique
• Normal
• Bold
Category: Ticks
TE2000 Version: 2.5.1 555

Name Description
displayed
TickDefinition [} 565] Definition of scale divisions
SubTickPosition [} 565] Selecting the position of the auxiliary scaling to the
bar:
• Inside
• Outside
Category: Unit
Name Description
UnitFontFamily [} 566] Definition of the font using the name of the font family
or the keyword
UnitFontStyle [} 567] Selecting the font style of the label:
• Normal
• Italic
• Oblique
UnitFontWeight [} 567] Selecting the font weight:
• Normal
• Bold
Events
Category: Control
Name Description
Category: Framework
Name Description
window.
Category: Operator
556 Version: 2.5.1 TE2000

Name Description
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
Access rights
Name Description
observable.
Control [} 690]
Tachometer
TE2000 Version: 2.5.1 557

See also
BaseAnimationTime
The basic animation time in milliseconds. It describes the time of the animation from minimum to maximum
value.
Origin: Tachometer [} 551]
See also
Unit
See also
EndPosition
The end angle of the display. The value 0 points to the right and 90 points upwards.
See also
Attribute getter: getEndPosition
Attribute setter: setEndPosition
Also observe the corresponding attribute StartPosition [} 564].
558 Version: 2.5.1 TE2000

GaugeBackgroundColor
The color of the round background.
See also
Attribute getter: getGaugeBackgroundColor
Attribute setter: setGaugeBackgroundColor
NeedleColor
Color of the tachometer needle.
See also
Attribute getter: getNeedleColor
Attribute setter: setNeedleColor
NeedleLength
The length of the tachometer needle as a percentage of the radius of the control.
See also
Attribute getter: getNeedleLength
Attribute setter: setNeedleLength
TE2000 Version: 2.5.1 559

LabelColor
See also
LabelFontFamily
See also
LabelFontSize
See also
LabelFontSizeUnit
560 Version: 2.5.1 TE2000

See also
LabelFontStyle
See also
LabelFontWeight
See also
LabelFormat
the engineering.
TE2000 Version: 2.5.1 561

[ Function ]
Parameter
Return value
Type Description
See also
Attribute setter: setLabelFormat
LabelPosition
The position of the label texts (inside or outside).
See also
LabelRange
See also
562 Version: 2.5.1 TE2000

MaxValue
See also
MinValue
See also
Range
See also
TE2000 Version: 2.5.1 563

ShowLabels
See also
ShowTicks
See also
ShowValueText
Either displays the number value or not.
See also
StartPosition
The start angle of the display. The value 0 points to the right and 90 points upwards.
564 Version: 2.5.1 TE2000

See also
Attribute getter: getStartPosition
Attribute setter: setStartPosition
Also observe the corresponding attribute EndPosition [} 558].
SubTickPosition
The position (inside or outside) of the secondary to the primary scale divisions.
See also
Attribute getter: getSubTickPosition
Attribute setter: setSubTickPosition
TickColor
See also
TickDefinition
See also
TE2000 Version: 2.5.1 565

UnitColor
See also
UnitFontFamily
See also
UnitFontSize
See also
566 Version: 2.5.1 TE2000

UnitFontSizeUnit
See also
UnitFontStyle
See also
UnitFontWeight
See also
Value
TE2000 Version: 2.5.1 567

See also
ValueColor
See also
ValueFontFamily
See also
ValueFontSize
See also
568 Version: 2.5.1 TE2000

ValueFontSizeUnit
See also
ValueFontStyle
See also
ValueFontWeight
See also
TE2000 Version: 2.5.1 569

ValueFormat
the engineering.
[ Function ]
Parameter
Return value
Type Description
See also
GaugeAlignment
The position of the control.
Schema: tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.TcHmiRadialGauge.GaugeAlignment
See also
Attribute getter: getGaugeAlignment
Attribute setter: setGaugeAlignment
570 Version: 2.5.1 TE2000

5.10.2.35.2 Events
onValueChanged
5.10.2.36 Textblock
A text block is a control in which text can be displayed.
Attributes
Category: Colors
Name Description
Category: Layout
TE2000 Version: 2.5.1 571

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
572 Version: 2.5.1 TE2000

Name Description
be displayed
is to be displayed
'Width' attribute is ignored in all calculations!
upper and lower side of the parent element. The
'Height' attribute is ignored in all calculations!
• Content: The height is defined by the length of the
text. The 'Height' attribute is ignored in all
calculations!
Category: Common
TE2000 Version: 2.5.1 573

Name Description
Category: Border
Name Description
them off
control
control

Name Description
background color
image:
image:
four sides
Category: Text
574 Version: 2.5.1 TE2000

Name Description
ContentPadding [} 577] Definition of the distance between the text and the
control border
WordWrap [} 580] Selecting whether the text should be wrapped if it is
too long to fit in one row
or the keyword
TextFontSizeUnit [} 577] Selecting the font size unit:
• Normal
• Italic: italic
TextFontWeight [} 578] Selecting the font weight:
• Normal
• Bold: bold
Events
Category: Framework
Name Description
window.
Category: Operator
TE2000 Version: 2.5.1 575

Name Description
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
Access rights
Name Description
observable.
Control [} 690]
Text block
See also
576 Version: 2.5.1 TE2000

ContentPadding
Origin: Text block [} 571]
See also
TextFontFamily
See also
TextFontSize
See also
TextFontSizeUnit
Origin: Textblock [} 571]
TE2000 Version: 2.5.1 577

See also
TextFontStyle
Font style (normal, italic: oblique with special characters, oblique).
See also
TextFontWeight
See also
HeightMode
• Content: The height is defined by the text length of the control.
See also
578 Version: 2.5.1 TE2000

See also
See also
Text
Contents of the text block.
See also
TextColor
See also
TE2000 Version: 2.5.1 579

WordWrap
See also
5.10.2.37 Textbox
A text box is a control in which text can be displayed and entered. If only single-line texts are to be used, the
Input [} 340] control is preferable.
Attributes
Category: Colors
Name Description
Category: Layout
580 Version: 2.5.1 TE2000

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
TE2000 Version: 2.5.1 581

Name Description
be displayed
is to be displayed
Category: Common
582 Version: 2.5.1 TE2000

Name Description
AutoFocusOut [} 589] Determines whether the control element
automatically loses focus when the user confirms or
ends his input by pressing Enter or Escape.
Category: Border
Name Description
them off
control
control

Name Description
background color
image:
image:
four sides
Category: Text
TE2000 Version: 2.5.1 583

Name Description
TextHorizontalAlignment [} 587] Selecting the alignment of the text
or the keyword
• Normal
• Italic: italic
TextFontWeight [} 587] Selecting the font weight:
• Normal
• Bold: bold
WordWrap [} 589] Selecting whether the text should wrap if it is too long
to fit in one row
ContentPadding [} 586] Definition of the distance between the text and the
control border
Multiline [} 588] Selecting whether a multi-line text should be allowed
Placeholder [} 588] Definition of a placeholder, which is displayed if no
text is entered
Events
Category: Control
Name Description
Category: Framework
Name Description
window.
Category: Operator
584 Version: 2.5.1 TE2000

Name Description
control element.
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
Access rights
Name Description
observable.
Control [} 690]
Textbox
TE2000 Version: 2.5.1 585

See also
ContentPadding
Origin: Textbox [} 580]
See also
TextFontFamily
See also
TextFontSize
See also
TextFontSizeUnit
586 Version: 2.5.1 TE2000

See also
TextFontStyle
See also
TextFontWeight
See also
See also
TE2000 Version: 2.5.1 587

See also
Not applicable from version 1.10.1018.48
Multiline
Determines whether multi-line text should be allowed.
See also
Attribute getter: getMultiline
Attribute setter: setMultiline
Placeholder
See also
Text
Contents of the text box.
See also
TextColor
588 Version: 2.5.1 TE2000

See also
WordWrap
See also
AutoFocusOut
See also
5.10.2.37.2 Events
onFocusIn
onFocusOut
TE2000 Version: 2.5.1 589

onTextChanged
The text has been changed.
5.10.2.38 Theme Select

A combo box to select the theme.
Attributes
Category: Colors
Name Description
list
drop-down list
Category: Layout
590 Version: 2.5.1 TE2000

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
TE2000 Version: 2.5.1 591

Name Description
be displayed
is to be displayed
Category: Common
592 Version: 2.5.1 TE2000

Name Description
Category: Border
Name Description
them off
control
control

Name Description
background color
image:
image:
four sides
Category: Text
TE2000 Version: 2.5.1 593

Name Description
or the keyword
• Normal
• Italic
• Oblique
• Normal
• Bold
Category: DropDown
Name Description
drop-down list
drop-down list
menu
MaxListHeight [} 602] Definition of the maximum height of the drop-down
list
• Normal
• Italic
• Oblique
• Normal
• Bold
Events
Category: Framework
594 Version: 2.5.1 TE2000

Name Description
window.
Category: Operator
Name Description
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
Access rights
Name Description
observable.
Control [} 690]
TE2000 Version: 2.5.1 595

ThemeSelect
See also
DataHeight
Origin: Theme Select [} 590]
See also
See also
DropDownFontFamily
596 Version: 2.5.1 TE2000

See also
DropDownFontSize
See also
See also
DropDownFontStyle
See also
TE2000 Version: 2.5.1 597

DropDownFontWeight
See also
See also
See also
598 Version: 2.5.1 TE2000

See also
DropDownTextColor
See also
See also
See also
TE2000 Version: 2.5.1 599

See also
DropDownStyle
background.

See also
TextFontFamily
See also
600 Version: 2.5.1 TE2000

TextFontSize
See also
TextFontSizeUnit
See also
TextFontStyle
See also
TE2000 Version: 2.5.1 601

TextFontWeight
See also
See also
MaxListHeight
See also
TextColor
602 Version: 2.5.1 TE2000

See also
ContentPadding
See also
5.10.2.39 Timespan Input

An input element for a timespan.
Attributes
Category: Colors
Name Description
Category: Layout
TE2000 Version: 2.5.1 603

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
604 Version: 2.5.1 TE2000

Name Description
be displayed
is to be displayed
Category: Common
TE2000 Version: 2.5.1 605

Name Description
AutoSelectText [} 612] Determines whether the Control automatically selects
the entire text when it is focused.
ButtonPosition [} 613] The position of the button relative to the display.
Category: Border
Name Description
them off
control
control

Name Description
background color
image:
image:
four sides
606 Version: 2.5.1 TE2000

Category: Value
Name Description
or the keyword
• Normal
• Italic
• Oblique
• Normal
• Bold
value is entered.
Events
Category: Control
Name Description
Category: Framework
Name Description
window.
Category: Operator
TE2000 Version: 2.5.1 607

Name Description
control element.
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
Access rights
Name Description
observable.
Control [} 690]
Timespan Input
608 Version: 2.5.1 TE2000

See also
ValueColor
Color of the value.
Origin: Timespan Input [} 603]
See also
Value
Schema: tchmi:general#/definitions/Timespan
See also
ValueFontFamily
See also
TE2000 Version: 2.5.1 609

ValueFontSize
See also
ValueFontSizeUnit
See also
ValueFontStyle
See also
610 Version: 2.5.1 TE2000

ValueFontWeight
See also
See also
ContentPadding
See also
Placeholder
TE2000 Version: 2.5.1 611

See also
AutoFocusOut
See also
AutoSelectText
See also
612 Version: 2.5.1 TE2000

See also
ButtonPosition
The position of the button relative to the display.
Schema: tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.TcHmiTimespanInput.ButtonPosition
See also
5.10.2.39.2 Events
onFocusIn
onFocusOut
onValueChanged
TE2000 Version: 2.5.1 613

5.10.2.40 Timespan Picker

A control for selecting a timespan.
Attributes
Category: Colors
Name Description
Category: Layout
614 Version: 2.5.1 TE2000

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
TE2000 Version: 2.5.1 615

Name Description
be displayed
is to be displayed
Category: Common
616 Version: 2.5.1 TE2000

Name Description
Value [} 619] Value of the control defined as ISO timespan.
DirectDisplay [} 619] Determines whether the control is displayed directly
in the View or used as a pop-up. The pop-up opens
by the function openTimespanPicker [} 621] and
closes by the function closeTimespanPicker [} 621].
ShowConfirmationButtons [} 620] Determines whether the input into the control must be
confirmed.
Category: Border
Name Description
them off
control
control

Name Description
background color
image:
image:
four sides
Events
Category: Framework
TE2000 Version: 2.5.1 617

Name Description
window.
Category: Operator
Name Description
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
Category: Control
Name Description
onCancel [} 620] The input was canceled.
onConfirmed [} 620] The input was confirmed.
618 Version: 2.5.1 TE2000

Functions
openTimespanPicker [} 621] TcHmiTimespanPicker Opens the Timespan Picker
closeTimespanPicker [} 621] TcHmiTimespanPicker Closes the Timespan Picker
Access rights
Name Description
observable.
Control [} 690]
Timespan Picker
See also
Value
Value of the control defined as ISO timespan.
Schema: tchmi:general#/definitions/TimeSpan
Origin: Timespan Picker [} 614]
See also
DirectDisplay
Determines whether the control is displayed directly in the View or used as a pop-up. The pop-up opens by
the function openTimespanPicker [} 621] and closes by the function closeTimespanPicker [} 621].
TE2000 Version: 2.5.1 619

See also
Attribute getter: getDirectDisplay
Attribute setter: setDirectDisplay
ShowConfirmationButtons
Determines whether the input into the control must be confirmed.
See also
Attribute getter: getShowConfirmationButtons
Attribute setter: setShowConfirmationButtons
5.10.2.40.2 Events
onValueChanged
onCancel
The input was canceled.
onConfirmed
The input was confirmed.
620 Version: 2.5.1 TE2000

openTimespanPicker
Opens the Timespan Picker.
Return value: null
closeTimespanPicker
Closes the Timespan Picker.
Return value: null
5.10.2.41 Toggle Button

The toggle button is a switching element that can be switched between two states. The 'Toggle Group'
attribute can be used to interconnect different toggle buttons. When a new toggle button is activated, the
previously activated button is automatically deactivated.
Attributes
Category: Colors
Name Description
TE2000 Version: 2.5.1 621

Category: Layout
622 Version: 2.5.1 TE2000

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
TE2000 Version: 2.5.1 623

Name Description
be displayed
is to be displayed
Category: Common
624 Version: 2.5.1 TE2000

Name Description
Text [} 177] Definition of the text displayed in the button
StateSymbol [} 179] Reflects the pressed state of the button for the
assigned symbol and vice versa.
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.

ToggleState [} 628] Internal state of the control. This can be Normal or
Active.
Category: Border
Name Description
them off
control
control
Category: Icon
Name Description
Icon [} 176] Definition of an optional image in the button
IconWidth [} 178] Definition of the width of the icon
IconWidthUnit [} 178] Definition of the unit of the width:
IconHeight [} 175] Definition of the height of the icon
IconHeightUnit [} 176] Definition of the unit of height:
IconHorizontalAlignment [} 176] Selecting the horizontal alignment of the icon within
the control
IconVerticalAlignment [} 178] Selecting the vertical alignment of the icon within the
control
IconPadding [} 177] Definition of the distance of the icon to the border
TE2000 Version: 2.5.1 625


Name Description
background color
image:
image:
four sides
Category: Text
Name Description
or the keyword
• Normal
• Italic: italic
• Normal
• Bold: Bold
TextPadding [} 177] Definition of the distance of the text to the border
WordWrap [} 179] Selecting whether the text wraps if it is too long for
one row
Events
Category: Control
Name Description
onToggleStateChanged [} 629] The ToggleState value of the button has changed.
626 Version: 2.5.1 TE2000

Category: Framework
Name Description
window.
Category: Operator
Name Description
onToggleStateChanged [} 629] The ToggleState value of the button has changed.
pressed.
pressed.
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
TE2000 Version: 2.5.1 627

Access rights
Name Description
observable.
Control [} 690]
Button [} 168]
Toggle Button
See also
ToggleGroup
User-defined name for a group. Only one control in this group can be active. If another button is pressed with
this ToggleGroup, all other buttons are deactivated.
From version 1.10 a ToggleGroup can consist of controls of the type Toggle Button [} 621] and Checkbox.
[} 180]
Please note that this ToggleGroup is global. So if several ToggleButtons are used in one UserControl [} 780]
and this UserControl is used several times, only one ToggleButton is active. If one ToggleButton should be
active per UserControl in this constellation, the attribute of the buttons can be set via one UserControl
parameter [} 44] per instance of the UserControl. A binding from the UserControlParameter to all
ToggleButtons must then be set manually within the UserControl.
Origin: Toggle Button [} 621]
See also
Attribute getter: getToggleGroup
Attribute setter: setToggleGroup
ToggleState
628 Version: 2.5.1 TE2000

See also
Attribute getter: getToggleState
Attribute setter: setToggleState
5.10.2.41.2 Events
onToggleStateChanged
The ToggleState [} 628] value of the button has changed.
5.10.2.42 Toggle switch

A toggle switch is a switching element that can be switched between two states. A ToggleSwitch has a
ToggleState parameter, which can have the value "Normal" or "Active".
The .onToggleStateChanged event can be used to perform actions when the state of the checkbox changes.
Attributes
Category: Colors
Name Description
ToggleStateIconColor [} 187] Definition of the color of the toggle state icon.
Category: Layout
TE2000 Version: 2.5.1 629

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
630 Version: 2.5.1 TE2000

Name Description
be displayed
is to be displayed
Category: Common
TE2000 Version: 2.5.1 631

Name Description
StateSymbol [} 186] Reflects the state of the checkbox to the assigned
ToggleState [} 186] Definition of the internal switching state of the control
Text [} 187] The text to be displayed next to the checkbox.
Category: Border
Name Description
them off
control
control

Name Description
background color
image:
image:
four sides
Category: Text
632 Version: 2.5.1 TE2000

Name Description
Events
Category: Control
Name Description
Category: Framework
Name Description
window.
Category: Operator
TE2000 Version: 2.5.1 633

Name Description
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
Access rights
Name Description
observable.
Control [} 690]
Checkbox [} 180]
ToggleSwitch
634 Version: 2.5.1 TE2000

See also
5.10.2.43 Trend Line Chart

A TrendLineChart is a trend element in which curves of historicized symbols can be displayed.
Attributes
Category: Colors
Name Description
system
XLabelFontColor [} 661] Definition of the font color of the x-axis labels
XAxisColor [} 658] Definition of the color of the x-axis
XAxisNameFontColor [} 659] Definition of the font color of the X-axis name
MenuBarLabelFontColor [} 649] Definition of the font color of the menu bar
SectionsBackgroundColor [} 652] Definition of the background color of the control
TooltipFontColor [} 656] Definition of the color of the tooltip
TooltipBackgroundColor [} 656] Definition of the background color of the tooltip
Category: Layout
TE2000 Version: 2.5.1 635

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
636 Version: 2.5.1 TE2000

Name Description
be displayed
is to be displayed
Category: Common
TE2000 Version: 2.5.1 637

Name Description
Start [} 654] Definition of the start time at which the display should
begin
End [} 647] Definition of the end time at which the display should
end
LineGraphDescriptions [} 649] Definition of the historicized variables to be displayed
in the graph and their method of display
Interval [} 649] Definition of the interval at which the data are
updated
MouseMode [} 651] Selection of the mouse mode that is active after
stopping:
• ZoomX: By drawing a rectangle, an area can be
defined in the X direction which is to be zoomed in
on.
• ZoomXY: By drawing a rectangle, an area can be
defined in the X and Y direction which is to be
zoomed in on.
• PanX: The observed area can be shifted in the X
direction in the display area of the graph by drag-
and-drop.
• PanXY: The observed area can be shifted in the X
and Y direction in the display area of the graph by
drag-and-drop.
ServerDomain [} 665] Definition of the server extension name.
Category: Border
Name Description
them off
control
control
638 Version: 2.5.1 TE2000

Name Description
background color
image:
image:
four sides
Category: XAxis
TE2000 Version: 2.5.1 639

Name Description
ShowXAxis [} 653] Selecting whether the X-axis is to be displayed
displayed
XMainTickSteps [} 662] Definition of the number of main X-axis subdivisions
ShowXSubTicks [} 653] Selecting whether the auxiliary X-axis subdivisions
are to be displayed
XSubTickSteps [} 663] Definition of the number of auxiliary X-axis
subdivisions
ShowXAxisName [} 653] Selecting whether the X-axis name is to be displayed
XAxisName [} 659] Definition of the X-axis name
or the keyword
XLabelFontSize [} 661] Definition of the font size for the X-axis labels
Percent for a relative size
• Normal
• Bold
XAxisWidth [} 660] Definition of the X-axis width
XAxisNameFontFamily [} 659] Definition of the font using the name of the font family
or the keyword
XAxisNameFontSize [} 660] Definition of the font size of the X-axis name
XAxisNameFontSizeUnit [} 660] Selecting the font size unit for the X-axis labels:
XAxisNameFontWeight [} 660] Selecting of the font weight of the X-axis name:
• Normal
• Bold
XAxisFormat [} 658] Definition of the formatting of the X-axis labels
Category: YAxis
640 Version: 2.5.1 TE2000

Name Description
YAxis [} 663] Definition of one or more Y-axes
ShowYSubTicks [} 653] Selecting whether the auxiliary subdivisions on the Y-
axis are to be displayed
YAxisWidth [} 663] Definition of the Y-axis width
or the keyword
YLabelFontSize [} 664] Definition of the font size for the Y-axis labels
YLabelFontSizeUnit [} 664] Selecting the font size unit for the Y-axis labels:
YLabelFontWeight [} 664] Selecting the font weight of the Y-axis labels:
• Normal
• Bold: bold
YMainTickSteps [} 664] Definition of the number of main Y-axis subdivisions
YSubTickSteps [} 665] Definition of the number of auxiliary Y-axis
subdivisions
Category: Grid
Name Description
displayed.
Category: Subgrid
Name Description
SubgridLineStyle [} 654] Definition of the line style for the subgrid.
SubridLineWidth [} 655] Definition of the line width of the subgrid.
SubgridShowHorizontalLines [} 655] Selecting whether the horizontal lines of the subgrid
are to be displayed.
to be displayed.
Category: Menubar
TE2000 Version: 2.5.1 641

Name Description
ShowMenuBar [} 652] Selection of whether the menu bar is to be displayed
MenuBarPosition [} 651] Selection of the position of the menu bar:
• Bottom: Underside
• Top: Top side
MenuBarLabelFontFamily [} 650] Definition of the font using the name of the font family
or the keyword
MenuBarLabelFontSize [} 650] Definition of the font size
MenuBarLabelFontStyle [} 650] Selecting the font style:
• Normal
• Italic: italic
MenuBarLabelFontWeight [} 651] Selecting the font weight:
• Normal
• Bold: Bold
Category: Tooltip
Name Description
ShowTooltip [} 652] Selecting whether the tooltips should be displayed in
stop mode
TooltipFormat [} 657] • Definition of the formatting of the tooltips.
TooltipFontFamily [} 656] Definition of the font using the name of the font family
or the keyword
TooltipFontSize [} 656] Definition of the font size
TooltipFontWeight [} 657] Selecting the font weight:
• Normal
• Bold: Bold
Events
Category: Framework
Name Description
window.
Category: Operator
642 Version: 2.5.1 TE2000

Name Description
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
Functions
Name Description
pause [} 666] TcHmiTrendLineChart Stops the view.

resetZoom [} 666] TcHmiTrendLineChart Resets all interactions.
play [} 666] TcHmiTrendLineChart Resets the zoom and displays live
data again.
stop TcHmiTrendLineChart Fixes the view.
resetZoom TcHmiTrendLineChart Resets zooming and panning.
reset TcHmiTrendLineChart Starts the view.
Access rights
Name Description
observable.
TE2000 Version: 2.5.1 643

Control [} 690]
Trend Line Chart
See also
A TrendLineChart can be configured as follows:
1. Define the Y-axes of the coordinate system with the help of the dialog "YAxis Definitions" of the attribute
"YAxis [} 663]".
1.1. Define the desired number of Y-axes to which the symbols in the following are to be assigned.
1.2. Adjust the settings of the Y-axis/axes if necessary.
2. Define the variables to be displayed in the trend element using the attribute "LineGraphDescriptions
[} 649]" from the "Common" category.
2.1. Add a Line Graph Description for each of the variables.
2.2. Select the appropriate variable in each description under "Symbol".
It is only possible to select variables for which historization has been activated beforehand.
2.3. Under "Y-Axis ID", select the Y-axis to which the symbol is to be assigned. If you don't select a Y-axis,
an automatically scaling Y-axis bearing the name of the symbol will be generated.
3. Adapt the start [} 654] and end [} 647] point of the period to be observed.
Example: Last ten minutes in the past:
3.1. Set the value of the attribute "Start [} 654]" of the category "Common" to "PT10M".
4. Adapt the X-axis scaling by setting the attribute "XMainTickSteps [} 662]" of the category "X-Axis" to "5".
5. Activate the attribute "ShowMenubar [} 652]" of the category "Menubar".
Example: Trend Line Chart [} 1329]
5.10.2.43.2 Dialogs
LineGraphDescription dialog
The settings of the graphs and their assignment to the individual symbols that are to be displayed in the
TrendLineChart can be changed with this dialog.
644 Version: 2.5.1 TE2000


Add a new object
Properties Settings for the Y-axis assignment selected under

"Elements"
Symbol Selection of the historicized symbol
Y-Axis Id Selection of the Y-axis with which the symbol 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
Point dot in stopmode Selection of whether the individual data points are to
be drawn when the display is stopped in the trend
element.
YAxis Definition Dialog

This dialog can be used to add and parameterize the different Y-axes.
Add a new object
TE2000 Version: 2.5.1 645

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
ActualEndTime
Actual end time (read-only).
Origin: Trend Line Chart [} 635]
See also
Attribute getter: getActualEndTime
ActualStartTime
Actual start point (read-only).
See also
Attribute getter: getActualStartTime
646 Version: 2.5.1 TE2000

End
Definition of the end time at which the display should end.
Several options are available as values:

• The keyword Latest: The last available value is used as the end value of the display.
• An ISO8601 timespan such as PT1H1M (one hour and one minute). The corresponding specification is:
P[JY][MM][WW][TD][T[hH][mM][s[.f]S]]. Values that are not set (e.g. year) do not have to be
entered. Example: PT1M0.5S refers to one minute and half a second. This timespan describes the
"distance" at the Start [} 654] time of the control. Therefore only one of the two attributes should be
configured with a timespan.
• An ISO8601 time. Please note that the time must be specified in UTC. In the control itself the time is
displayed in the time zone of the current user and can be manipulated. On a system with the time zone
Europe/Berlin 2019-08-21T11:35:21.576 is displayed, for example, but the control uses the UTC
specification 2019-08-21T09:35:21.576Z (the letter Z indicates this).
Schema (version 1.10): tchmi:framework#/definitions/TrendLineChartEnd

TcHmi.Controls.Beckhoff.TcHmiTrendLineChart.ChartEnd
See also
Attribute getter: getEnd
Attribute setter: setEnd
GridBackgroundColor
See also
GridLineColor
Definition of the color of the coordinate grid.
See also
TE2000 Version: 2.5.1 647

GridLineStyle
See also
GridLineWidth
Definition of the line width of the coordinate grid.
See also
Selecting whether the horizontal lines of the coordinate grid are to be displayed. The number of horizontal
grid lines is defined by the attribute YMainTickSteps [} 664].
See also
Selecting whether the vertical lines of the coordinate grid are to be displayed. The number of vertical grid
lines is defined by the attribute XMainTickSteps [} 662].
648 Version: 2.5.1 TE2000

See also
Interval
Definition of the interval at which the data are updated.
See also
Attribute getter: getInterval
Attribute setter: setInterval
LineGraphDescription
Definition of the historicized variables to be displayed in the graph and their method of display.
Schema (version 1.10): tchmi:framework#/definitions/TrendLineChartLineGraphDescriptionDefinitionList

TcHmi.Controls.Beckhoff.TcHmiTrendLineChart.ChartLineGraphDescriptionDefinitionList
See also
Attribute getter: getLineGraphDescription
Attribute setter: setLineGraphDescription
MenuBarLabelFontColor
Definition of the font color of the menu bar.
See also
Attribute getter: getMenuBarLabelFontColor
Attribute setter: setMenuBarLabelFontColor
TE2000 Version: 2.5.1 649

MenuBarLabelFontFamily
Origin: Trend line chart [} 635]
See also
Attribute getter: getMenuBarLabelFontFamily
Attribute setter: setMenuBarLabelFontFamily
MenuBarLabelFontSize
See also
Attribute getter: getMenuBarLabelFontSize
Attribute setter: setMenuBarLabelFontSize
MenuBarLabelFontSizeUnit
Selection of the unit of the font size in the menu bar (pixel or percent).
See also
Attribute getter: getMenuBarLabelFontSizeUnit
Attribute setter: setMenuBarLabelFontSizeUnit
MenuBarLabelFontStyle
See also
Attribute getter: getMenuBarLabelFontStyle
Attribute setter: setMenuBarLabelFontStyle
650 Version: 2.5.1 TE2000

MenuBarLabelFontWeight
Selection of the font weight for the menu bar (normal, bold).
See also
Attribute getter: getMenuBarLabelFontWeight
Attribute setter: setMenuBarLabelFontWeight
MenuBarPosition
Selection of the position of the menu bar (Bottom, Top).
Schema (version 1.10): tchmi:framework#/definitions/ChartMenuBarPosition

TcHmi.Controls.Beckhoff.TcHmiTrendLineChart.ChartMenuBarPosition
See also
Attribute getter: getMenuBarPosition
Attribute setter: setMenuBarPosition
MouseMode
Selection of the mouse mode that is active after stopping.
• ZoomX: By drawing a rectangle, an area can be defined in the X direction which is to be zoomed in on.
• ZoomXY: By drawing a rectangle, an area can be defined in the X and Y direction which is to be
zoomed in on.
• PanX: The observed area can be shifted in the X direction in the display area of the graph by drag-and-
drop.
• PanXY: The observed area can be shifted in the X and Y direction in the display area of the graph by
drag-and-drop.
Schema (version 1.10): tchmi:framework#/definitions/ChartMouseMode
Schema (version 1.12): tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.TcHmiTrendLineChart.

ChartMouseMode
See also
Attribute getter: getMouseMode
Attribute setter: setMouseMode
TE2000 Version: 2.5.1 651

Definition of the background color of the control.
See also
ShowGrid
Selecting whether the coordinate grid is to be displayed.
See also
ShowMenubar
Selection of whether the menu bar is to be displayed.
See also
Attribute getter: getShowMenubar
Attribute setter: setShowMenubar
ShowTooltip
Selecting whether the tooltips should be displayed in stop mode.
See also
Attribute getter: getShowTooltip
652 Version: 2.5.1 TE2000

Attribute setter: setShowTooltip
ShowXAxis
Selecting whether the X-axis is to be displayed.
See also
ShowXAxisName
Selecting whether the X-axis name is to be displayed.
See also
ShowXSubTicks
Selecting whether the auxiliary X-axis subdivisions are to be displayed.
See also
ShowYSubTicks
Selecting whether the auxiliary subdivisions on the Y-axis are to be displayed.
TE2000 Version: 2.5.1 653

See also
Start
Definition of the start time at which the display should begin.
Several options are available as values:

• The keyword First: The first available value is used as the starting value of the display.
• An ISO8601 timespan such as PT1H1M (one hour and one minute). The corresponding specification is:
P[JY][MM][WW][TD][T[hH][mM][s[.f]S]]. Values that are not set (e.g. year) do not have to be
entered. Example: PT1M0.5S refers to one minute and half a second. This timespan describes the
"distance" at the End [} 647] time of the control. Therefore only one of the two attributes should be
configured with a timespan.
• An ISO8601 time. Please note that the time must be specified in UTC. In the control itself the time is
displayed in the time zone of the current user and can be manipulated. On a system with the time zone
Europe/Berlin 2019-08-21T11:35:21.576 is displayed, for example, but the control uses the UTC
specification 2019-08-21T09:35:21,576Z (the letter Z indicates this).
Schema (version 1.10): tchmi:framework#/definitions/TrendLineChartStart

TcHmi.Controls.Beckhoff.TcHmiTrendLineChart.ChartStart
See also
Attribute getter: getStart
Attribute setter: setStart
SubgridLineColor
Definition of the color of the coordinate subgrid.
See also
Attribute setter: setSubgridlineColor
SubgridLineStyle
654 Version: 2.5.1 TE2000

See also
Attribute getter: getSubgridLineStyle
Attribute setter: setSubgridLineStyle
SubgridLineWidth
Definition of the line width of the subgrid.
See also
Selecting whether the horizontal lines of the subgrid are to be displayed. The number of horizontal auxiliary
coordinate lines is defined by the attribute YSubTickSteps.
See also
Selecting whether the vertical lines of the subgrid are to be displayed. The number of vertical auxiliary
coordinate lines is defined by the attribute XSubTickSteps [} 663].
See also
TE2000 Version: 2.5.1 655

TooltipBackgroundColor
See also
Attribute getter: getTooltipBackgroundColor
Attribute setter: setTooltipBackgroundColor
TooltipFontColor
Definition of the font color of the tooltip.
See also
Attribute getter: getTooltipFontColor
Attribute setter: setTooltipFontColor
TooltipFontFamily
See also
Attribute getter: getTooltipFontFamily
Attribute setter: setTooltipFontFamily
TooltipFontSize
See also
Attribute getter: getTooltipFontSize
Attribute setter: setTooltipFontSize
656 Version: 2.5.1 TE2000

TooltipFontSizeUnit
Selecting the unit of the font size in the tooltips (pixel or percent).
See also
Attribute getter: getTooltipFontSizeUnit
Attribute setter: setTooltipFontSizeUnit
TooltipFontWeight
Selecting the font weight for the tooltips (normal, bold).
See also
Attribute getter: getTooltipFontWeight
Attribute setter: setTooltipFontWeight
TooltipFormat
Definition of the formatting of the tooltips.
The selected function defines the tooltip display. It is called as soon as the mouse cursor is positioned on a
point and/or an error. In addition, it contains the current time stamp of the mouse, which is specified in
milliseconds, a list of points and a list of errors. The respective list is empty if there are no points or errors at
this position.
the engineering.
[ Function ]
TooltipFormat(actTime: number, points: TcHmiTrendLineChart.TooltipInformationObject[], errors:
TcHmiTrendLineChart.TooltipErrorInformationObject[]): string;
TE2000 Version: 2.5.1 657

Parameter
actTime number The current time stamp of the
mouse position in milliseconds
since 01/01/1970.
points TcHmiTrendLineChart.TooltipInfor The recorded points located at the
mationObject[] mouse position (within the point
radius).
errors TcHmiTrendLineChart.TooltipErrorI The recorded errors located at the
nformationObject[] mouse position.
Return value
Type Description
string The tooltip to be displayed. HTML is allowed here.
See also
Attribute getter:getTooltipFormat
Attribute setter:setTooltipFormat
XAxisColor
Definition of the color of the X-axis.
See also
XAxisFormat
subdivision. In addition, it contains the respective time stamp, which is specified in milliseconds.
the engineering.
[ Function ]
658 Version: 2.5.1 TE2000

Parameter
value number The current numerical value of the
X-axis in milliseconds since
01/01/1970.
Return value
Type Description
See also
XAxisName
Definition of the X-axis name.
See also
XAxisNameFontColor
Definition of the font color of the X-axis name.
See also
XAxisNameFontFamily
TE2000 Version: 2.5.1 659

See also
XAxisNameFontSize
Definition of the font size of the X-axis name.
See also
See also
XAxisNameFontWeight
Selection of the font weight of the X-axis name (normal, bold).
See also
XAxisWidth
Definition of the axis width.
660 Version: 2.5.1 TE2000

See also
XLabelFontColor
Definition of the color of the X-axis labels.
See also
XLabelFontFamily
See also
XLabelFontSize
Definition of the font size for the X-axis labels.
See also
TE2000 Version: 2.5.1 661

XLabelFontSizeUnit
See also
XLabelFontWeight
Selection of the font weight of the X-axis labels (normal, bold).
See also
XMainTickSteps
Definition of the number of main X-axis subdivisions.
See also
XShowLabels
Selecting whether the X-axis labels are to be displayed
See also
662 Version: 2.5.1 TE2000

XSubTickSteps
Definition of the number of auxiliary X-axis subdivisions.
See also
YAxis
Definition of one or more Y-axes.
Schema (version 1.10): tchmi:framework#/definitions/ChartYAxisDefinitionList

TcHmi.Controls.Beckhoff.TcHmiTrendLineChart.ChartYAxisDefinitionList
See also
Attribute getter: getYAxis
Attribute setter: setYAxis
YAxisWidth
Definition of the Y-axis width.
See also
YLabelFontFamily
TE2000 Version: 2.5.1 663

See also
YLabelFontSize
Definition of the font size for the Y-axis labels.
See also
YLabelFontSizeUnit
Selection of the unit of the font size of the Y-axis labels (pixel or percent).
See also
YLabelFontWeight
Selection of the font weight of the Y-axis labels (normal, bold).
See also
YMainTickSteps
Definition of the number of main Y-axis subdivisions.
664 Version: 2.5.1 TE2000

See also
YSubTickSteps
Definition of the number of auxiliary Y-axis subdivisions.
See also
ShowLegend
Selecting whether the legend is to be displayed.
See also
Note: Available from version 1.12.746
ServerDomain
Definition of the server extension name.
See also
TE2000 Version: 2.5.1 665


These resources cannot be defined per instance, but only for several/all trend line charts via the theme file
[} 940]. If you really want to change only one instance, you must create a class [} 937] for it.
YAxisGenerated
This is the axis definition that is used for Y-axes if nothing is defined in the attribute YAxis [} 663].
Schema: tchmi:framework#/definitions/ChartYAxisDefinition
pause
Stops the view.
Return value: null
Origin: TcHmiTrendLineChart [} 635]
resetZoom
Resets all interactions.
Return value: null
play
Resets the zoom and displays live data again.
Return value: null
5.10.2.44 User Management

A control for managing users.
Attributes
Category: Colors
666 Version: 2.5.1 TE2000

Name Description
TextColor [} 673] Definition the text color of the control
Category: Layout
TE2000 Version: 2.5.1 667

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
668 Version: 2.5.1 TE2000

Name Description
be displayed
is to be displayed
Category: Common
TE2000 Version: 2.5.1 669

Name Description
AllowLogout [} 676] Activates the logout button in the drop-down menu of
the control.
AllowSwitchUser [} 676] Activates the switch user button in the drop-down
menu of the control.
Category: Border
Name Description
them off
control
control

Name Description
background color
image:
image:
four sides
Category: Text
670 Version: 2.5.1 TE2000

Name Description
UserNameFontSize [} 674] Definition of the font size
UserNameFontSizeUnit [} 674] Selecting the font size unit:
DropDownFontSize [} 674] Definition of the font size
DropDownFontSizeUnit [} 675] Selecting the font size unit:
HeadlineFontSize [} 675] Definition of the font size
HeadlineFontSizeUnit [} 675] Selecting the font size unit:
SubHeadlineFontSize [} 675] Definition of the font size
SubHeadlineFontSizeUnit [} 676] Selecting the font size unit:
Events
Category: Framework
Name Description
window.
Category: Operator
TE2000 Version: 2.5.1 671

Name Description
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
Access rights
Name Description
observable.
Control [} 690]
UserManagement
672 Version: 2.5.1 TE2000

See also
TextColor
Origin: User Management [} 666]
See also
TextFontSize
See also
TextFontSizeUnit
See also
TE2000 Version: 2.5.1 673

UserNameFontSize
See also
Attribute getter: getUserNameFontSize
Attribute setter: setUserNameFontSize
UserNameFontSizeUnit
See also
Attribute getter: getUserNameFontSizeUnit
Attribute setter: setUserNameFontSizeUnit
DropDownFontSize
See also
674 Version: 2.5.1 TE2000

See also
HeadlineFontSize
See also
Attribute getter: getHeadlineFontSize
Attribute setter: setHeadlineFontSize
HeadlineFontSizeUnit
See also
Attribute getter: getHeadlineFontSizeUnit
Attribute setter: setHeadlineFontSizeUnit
SubHeadlineFontSize
TE2000 Version: 2.5.1 675

See also
Attribute getter: getSubHeadlineFontSize
Attribute setter: setSubHeadlineFontSize
SubHeadlineFontSizeUnit
See also
Attribute getter: getSubHeadlineFontSizeUnit
Attribute setter: setSubHeadlineFontSizeUnit
AllowLogout
Activates the logout button in the drop-down menu of the control.
See also
Attribute getter: getAllowLogout
Attribute setter: setAllowLogout
AllowSwitchUser
Activates the switch user button in the drop-down menu of the control.
See also
Attribute getter: getAllowSwitchUser
676 Version: 2.5.1 TE2000

Attribute setter: setAllowSwitchUser
5.10.2.45 Video
Video can be played with the video control. The supported video formats are defined by the browser used.
Attributes
Category: Colors
Name Description
Category: Layout
TE2000 Version: 2.5.1 677

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
678 Version: 2.5.1 TE2000

Name Description
be displayed
is to be displayed
upper and lower sides of the parent element. The
'Width' attribute is ignored in all calculations!
• Content: The width is calculated from the height
while maintaining the aspect ratio of the video. If
the attributes 'Width Mode' and 'Height Mode' are
set to Content, the video is drawn in its original
size. The 'Width' attribute is ignored in all
calculations!
TE2000 Version: 2.5.1 679

Name Description
• Content: The height is calculated from the width
while maintaining the aspect ratio of the video. If
the attributes 'Width Mode [} 679]' and 'Height
Mode' are set to Content, the video is drawn in its
original size. The 'Height' attribute is ignored in all
calculations!
OriginalWidth [} 687] Plays back the original width of the video or 0 if it is
not available.
OriginalHeight [} 687] Plays back the original height of the video or 0 if it is
not available.
Category: Common
Name Description
SrcList [} 685] Definition of a list of videos that can be played back
Category: Border
Name Description
them off
control
control
680 Version: 2.5.1 TE2000

Name Description
background color
image:
image:
four sides
Category: Video
Name Description
Volume [} 685] Definition of the volume of the video
Mute [} 685] Selecting whether the sound is to be switched off
Playbackrate [} 685] Definition of a playback rate. The normal playback
speed is multiplied by this value to obtain the current
rate.
CurrentTime [} 686] Definition of the current playback time of the video
Duration [} 686] Plays the length of the video in seconds or 0 if it is
not available.
isEnded [} 686] Returns a Boolean value indicating whether playback
has finished or not.
isPlaying [} 686] Returns a Boolean value indicating whether the video
is currently playing or not.
Category: Player
Name Description
Controls [} 687] Selecting whether the integrated control elements are
to be displayed
Autoplay [} 688] Selecting whether the video should be started
automatically
Loop [} 688] Selecting whether the video is to be repeated
automatically on a permanent basis
Poster [} 688] Definition of a startup image to be displayed until the
operator starts or rewinds the video. If nothing is
specified here, nothing is displayed until the first
image of the video has been loaded.
Events
Category: Control
TE2000 Version: 2.5.1 681

Name Description
onLoadedData [} 689] The video was loaded successfully.
onError [} 689] The video was not loaded successfully.
onVolumeChange [} 689] The volume of the video has been changed.
onDurationChange [} 689] The duration of the video has changed.
onIsEndedChange [} 689] The video was terminated.
onIsPlayingChange [} 689] The video has changed its playback status.
Category: Framework
Name Description
window.
Category: Operator
682 Version: 2.5.1 TE2000

Name Description
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
Access rights
Name Description
observable.
Functions
play TcHmiVideo Start video
pause TcHmiVideo Pause video
stop TcHmiVideo End video
skipBackward TcHmiVideo Rewind video
skipForward TcHmiVideo Fast forward video
Control [} 690]
Video
TE2000 Version: 2.5.1 683

See also
HeightMode
• Content: The height is calculated from the width while maintaining the aspect ratio of the video. If
Width Mode [} 684] and Height Mode are set to Content, the video is drawn in its original size.
Scheme: tchmi:framework#/definitions/SizeModeWithContent
Origin: Video [} 677]
See also
WidthMode
all calculations!
• Content: The width is calculated from the height while maintaining the aspect ratio of the video. If
Width Mode and Height Mode [} 684] are set to Content, the video is drawn in its original size.
Scheme: tchmi:framework#/definitions/SizeModeWithContent
See also
684 Version: 2.5.1 TE2000

SrcList
A list of videos that the browser should play.
The videos are not played one after the other, but the browser tries to play each video until it finds a format
that it supports.
If the format type is not set, the browser tries to detect the code itself.
You can check the current status of browser support on the external website http://caniuse.com/.
Scheme: tchmi:framework#/definitions/VideoSourceList
See also
Attribute getter: getSrcList
Attribute setter: setSrcList
Volume
Volume of the video. The number 0 sets the video to mute while 1 means full volume.
Scheme: tchmi:framework#/definitions/Fraction
See also
Attribute getter: getVolume
Attribute setter: setVolume
Mute
Determines whether the sound is switched off.
Scheme: tchmi:general#/definitions/Boolean
See also
Attribute getter: getMute
Attribute setter: setMute
Playbackrate
The normal playback speed is multiplied by this value to obtain the current rate. Thus, the value 1.0
represents the normal speed.
Scheme: tchmi:general#/definitions/Number
TE2000 Version: 2.5.1 685

See also
Attribute getter: getPlaybackrate
Attribute setter: setPlaybackrate
isEnded
Returns a Boolean value indicating whether playback has finished or not.
See also
Attribute getter: getIsEnded
isPlaying
Returns a Boolean value indicating whether the video is currently playing or not.
See also
Attribute getter: getIsPlaying
CurrentTime
The current playback time of the video.
See also
Attribute getter: getCurrentTime
Attribute setter: setCurrentTime
Duration
Plays the length of the video in seconds or 0 if it is not available.
686 Version: 2.5.1 TE2000

See also
Attribute getter: getDuration
OriginalWidth
Plays back the original width of the video or 0 if it is not available.
See also
Attribute getter: getOriginalWidth
OriginalHeight
Plays back the original height of the video or 0 if it is not available.
See also
Attribute getter: getOriginalHeight
Controls
Determines whether control elements are to be displayed. The user can control playback, adjust the volume
and pause/resume the video.
Some browsers do not allow automatic [} 688] or application-based start of a video. You should
therefore carry out intensive tests to determine whether it makes sense to deactivate the control el-
ements.
See also
Attribute getter: getControls
TE2000 Version: 2.5.1 687

Attribute setter: setControls
Autoplay
Specifies whether the video is to be started directly.
Caution: In some browsers this is not allowed by default. In part this is possible again when the sound is
switched off [} 685].
See also
Attribute getter: getAutoplay
Attribute setter: setAutoplay
Loop
When the video is finished, it starts again from the beginning.
See also
Attribute getter: getLoop
Attribute setter: setLoop
Poster
A URL representing an individual image that is displayed until the user plays or winds the video.
If this attribute is not set, nothing is displayed until the first video frame is available. From this point in time,
this first frame is used.
See also
Attribute getter: getPoster
Attribute setter: setPoster
688 Version: 2.5.1 TE2000

5.10.2.45.2 Events
onError
The video was not loaded successfully.
onLoadedData
The video was loaded successfully.
onVolumeChange
The volume [} 685] of the video has been changed.
onDurationChange
The duration of the video [} 686] has changed.
onIsEndedChange
The video was terminated [} 686].
onIsPlayingChange
The video has changed its playback status [} 686].
onTimeUpdate
The playback position [} 686] has been changed.
TE2000 Version: 2.5.1 689

5.10.3 System
Name Description
Control [} 690] No instance of this class can be created. This page
serves only as a list of the attributes that this class
provides.
Base class of all controls.
Container Control [} 717] No instance of this class can be created. This page
provides.
Base class for all controls that can contain further
controls.
Container [} 723] The container offers the option of grouping other child
controls. All child controls that are added to a
container are defined relative to the position of the
container and are shifted automatically with the
container.
Content [} 728] No instance of this class can be created. This page
provides.
A content is an independent container object that can
be loaded in a region [} 755].
Grid [} 733] Layout grid for controls that can react fluidly and
responsively.
HTML Host [} 744] Container for HTML content. Can be edited in the
HTML editor of the Designer.
Partial [} 750] No instance of this class can be created. This page
provides.
Region [} 755] The region allows you to display a Content control
(and thus a subpage of any complexity).
User Control [} 763] No instance of this class can be created. This page
provides.
A reusable collection of controls.
User Control Host [} 768] No instance of this class can be created. This page
provides.
The user control host is an administration container
for user controls.
View [} 775] No instance of this class can be created. This page
provides.
Top-level control for a TcHmi visualization.
5.10.3.1 Control
No instance of this class can be created. This page serves only as a list of the attributes that this class
provides. It is the base class of all controls.
Attributes
Category: Colors
690 Version: 2.5.1 TE2000

Name Description
Category: Layout
TE2000 Version: 2.5.1 691

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
692 Version: 2.5.1 TE2000

Name Description
be displayed
is to be displayed
Category: Common
TE2000 Version: 2.5.1 693

Name Description
Category: Border
Name Description
them off
control
control

Name Description
background color
image:
image:
four sides
Events
Category: Framework
Name Description
window.
694 Version: 2.5.1 TE2000

Category: Operator
Name Description
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
Access rights
Name Description
observable.
Control
NuGet package: Beckhoff.TwinCAT.HMI.Framework
See also
TE2000 Version: 2.5.1 695

Id
Name of the control.
Schema: tchmi:framework#/definitions/Id
Origin: Control [} 690]
See also
Attribute getter: getId
IsEnabled
Activation status of a control. Only active controls react to mouse and touch.
See also
Attribute getter: getIsEnabled
Attribute setter: setIsEnabled
ClassNames
Definition of the class(es) of the control. These classes can be addressed within the theme.
Schema: tchmi:framework#/definitions/ClassNameList
See also
Attribute getter: getClassNames
Attribute setter: setClassNames
IsAttached
Indicates the status regarding whether the control is currently logically integrated inside the DOM.
696 Version: 2.5.1 TE2000

See also
Attribute getter: getIsAttached
Left
Definition of the distance from the left side to the left side of the surrounding control. This value may be
empty if Width [} 698] and Right [} 700] are filled out.
See also
Attribute getter: getLeft
Attribute setter: setLeft
LeftUnit
See also
Attribute getter: getLeftUnit
Attribute setter: setLeftUnit
Top
Definition of the distance from the top side to the top side of the surrounding control. This value may be
empty if Height [} 699] and Bottom [} 700] are filled out.
See also
Attribute getter: getTop
Attribute setter: setTop
TE2000 Version: 2.5.1 697

TopUnit
See also
Attribute getter: getTopUnit
Attribute setter: setTopUnit
Width
External width of the control. Left [} 697] and Right [} 700]are used to calculate the size if this value is
empty. This value is only interpreted if the attribute Width Mode [} 698] has the value Value.
See also
Attribute getter: getWidth
Attribute setter: setWidth
WidthUnit
See also
Attribute getter: getWidthUnit
Attribute setter: setWidthUnit
WidthMode
all calculations!
Schema: tchmi:framework#/definitions/SizeMode
698 Version: 2.5.1 TE2000

See also
Height
External height of the control. Top [} 697] and Bottom [} 700] attributes are used to calculate the size if this
value is empty. This value is only interpreted if the attribute Height Mode [} 699] has the value Value.
See also
Attribute getter: getHeight
Attribute setter: setHeight
HeightUnit
See also
Attribute getter: getHeightUnit
Attribute setter: setHeightUnit
HeightMode
Schema: tchmi:framework#/definitions/SizeMode
See also
TE2000 Version: 2.5.1 699

Right
Definition of the distance from the right side to the right side of the surrounding control. This value is only
used if one of the two attributes Left [} 697] and Width [} 698]is not used.
See also
Attribute getter: getRight
Attribute setter: setRight
RightUnit
See also
Attribute getter: getRightUnit
Attribute setter: setRightUnit
Bottom
Definition of the distance from the bottom side to the bottom side of the surrounding control. This value is
only used if one of the two attributes Top [} 697] and Height [} 699] is not used.
See also
Attribute getter: getBottom
Attribute setter: setBottom
BottomUnit
700 Version: 2.5.1 TE2000

See also
Attribute getter: getBottomUnit
Attribute setter: setBottomUnit
RenderedLeft
Returns the calculated distance in pixels between the left side and the left side of the higher-level control.
This value always returns a value, irrespective of the positioning of a control.
This value very probably has rounding inaccuracies.
See also
Attribute getter: getRenderedLeft
RenderedTop
Returns the calculated distance in pixels between the top side and the top side of the higher-level control.
See also
Attribute getter: getRenderedTop
RenderedBottom
Returns the calculated distance in pixels between the bottom side and the bottom side of the higher-level
control. This value always returns a value, irrespective of the positioning of a control.
TE2000 Version: 2.5.1 701

See also
Attribute getter: getRenderedBottom
RenderedRight
Returns the calculated distance in pixels between the right side and the right side of the higher-level control.
See also
Attribute getter: getRenderedRight
RenderedWidth
Returns the calculated width of the control in pixels. This value always returns a value, irrespective of the
positioning of a control.
See also
Attribute getter: getRenderedWidth
RenderedHeight
Returns the calculated height of the control in pixels. This value always returns a value, irrespective of the
positioning of a control.
702 Version: 2.5.1 TE2000

See also
Attribute getter: getRenderedHeight
GridColumnIndex
Definition of the column of a grid [} 733] in which the control is to be displayed.
The attribute has no effect if the control is not in such a container.
See also
Attribute getter: getGridColumnIndex
Attribute setter: setGridColumnIndex
GridRowIndex
Definition of the row of a grid [} 733] in which the control is to be displayed.
The attribute has no effect if the control is not in such a container.
See also
Attribute getter: getGridRowIndex
Attribute setter: setGridRowIndex
BorderColor
Border color
A border is only displayed if Border Color, Border Width [} 704] and Border Style [} 704] have been set.
See also
Attribute getter: getBorderColor
TE2000 Version: 2.5.1 703

Attribute setter: setBorderColor
Note: Only SolidColor is possible before TcHmi version 1.10.
BorderWidth
Definition of the border width of the four sides of the control.
A border is only displayed if Border Color [} 703], Border Width and Border Style [} 704] have been set.
Schema: tchmi:framework#/definitions/BorderWidth
See also
Attribute getter: getBorderWidth
Attribute setter: setBorderWidth
BorderStyle
Selection of the border style of the four sides of the control. The possible settings are none, solid line, dotted
line or dashed line
A border is only displayed if Border Color, Border Width [} 704] and Border Style have been set.
Schema: tchmi:framework#/definitions/BorderStyle
See also
Attribute getter: getBorderStyle
Attribute setter: setBorderStyle
BorderRadius
Definition of the radius of the four corners of a border to round them off.
Schema: tchmi:framework#/definitions/BorderRadius
See also
Attribute getter: getBorderRadius
Attribute setter: setBorderRadius
704 Version: 2.5.1 TE2000

BackgroundColor
Definition of the background color. This is displayed if no background image or a transparent background
image is set.
See also
Attribute getter: getBackgroundColor
Attribute setter: setBackgroundColor
BackgroundImage
An image that is above the background color.
See also
Attribute getter: getBackgroundImage
Attribute setter: setBackgroundImage
BackgroundImageWidth
Numerical value of the width of the background image.
See also
Attribute getter: getBackgroundImageWidth
Attribute setter: setBackgroundImageWidth
BackgroundImageWidthUnit
See also
Attribute getter: getBackgroundImageWidthUnit
Attribute setter: setBackgroundImageWidthUnit
TE2000 Version: 2.5.1 705

BackgroundImageHeight
Numerical value of the height of the background image.
See also
Attribute getter: getBackgroundImageHeight
Attribute setter: setBackgroundImageHeight
BackgroundImageHeightUnit
See also
Attribute getter: getBackgroundImageHeightUnit
Attribute setter: setBackgroundImageHeightUnit
BackgroundImagePadding
Definition of an additional distance between the border of the control and background image for the four
sides.
See also
Attribute getter: getBackgroundImagePadding
Attribute setter: setBackgroundImagePadding
BackgroundImageHorizontalAlignment
Definition of the alignment of the background image within the control
706 Version: 2.5.1 TE2000

See also
Attribute getter: getBackgroundImageHorizontalAlignment
Attribute setter: setBackgroundImageHorizontalAlignment
BackgroundImageVerticalAlignment
Definition of the alignment of the background image within the control
See also
Attribute getter: getBackgroundImageVerticalAlignment
Attribute setter: setBackgroundImageVerticalAlignment
MinHeight
Definition of the minimum height if the control size is defined as dynamic.
Maximum Height [} 708] overwrites the calculated height, but Minimum Height overwrites Maximum Height.
See also
Attribute getter: getMinHeight
Attribute setter: setMinHeight
MinHeightUnit
See also
Attribute getter: getMinHeightUnit
Attribute setter: setMinHeightUnit
TE2000 Version: 2.5.1 707

MaxHeight
Definition of the maximum height if the control size is defined as dynamic.
Maximum Height overwrites the calculated height, but Minimum Height [} 707] overwrites Maximum Height.
See also
Attribute getter: getMaxHeight
Attribute setter: setMaxHeight
MaxHeightUnit
See also
Attribute getter: getMaxHeightUnit
Attribute setter: setMaxHeightUnit
MaxWidth
Definition of the maximum width if the control size is defined as dynamic.
Maximum Width overwrites the calculated width, but Minimum Width [} 709] overwrites Maximum Width.
See also
Attribute getter: getMaxWidth
Attribute setter: setMaxWidth
MaxWidthUnit
708 Version: 2.5.1 TE2000

See also
Attribute getter: getMaxWidthUnit
Attribute setter: setMaxWidthUnit
MinWidth
Definition of the minimum width if the control size is defined as dynamic.
Maximum Width overwrites the calculated width, but Minimum Width [} 708] overwrites Maximum Width.
See also
Attribute getter: getMinWidth
Attribute setter: setMinWidth
MinWidthUnit
See also
Attribute getter: getMinWidthUnit
Attribute setter: setMinWidthUnit
Opacity
Transparency of the entire control.
The number 0 sets the control to fully transparent, while 1 means fully visible.
Schema: tchmi:framework#/definitions/Fraction
See also
Attribute getter: getOpacity
Attribute setter: setOpacity
TE2000 Version: 2.5.1 709

Tooltip
Tooltip for the control.
This is displayed for a short time when the mouse is held above a control.
See also
Attribute getter: getTooltip
Attribute setter: setTooltip
Transform
Transforms a control.
The control can be rotated, scaled, translated or skewed.
Furthermore, the origin of the transformation and the perspective can be set once.
Schema: tchmi:framework#/definitions/TransformList
See also
Attribute getter: getTransform
Attribute setter: setTransform
Type
Type name of the control.
Note: In versions 1.8 and 1.10, a standard button returned tchmi-button as a result, whereas from
version 1.12, the full qualified name TcHmi.Controls.Beckhoff.TcHmiButton is returned. If you check
for the type in your own source code, you may have to adapt it to the new format.
Schema: tchmi:framework#/definitions/ControlType
See also
Attribute getter:getType
710 Version: 2.5.1 TE2000

Visibility
Visibility of a control.
• The default value Visible displays the control directly.
• If Hide is set, the control continues to respond to the mouse or touch. It is also involved in the size
calculations with fluid designs.
• If Collapsed is used, the control neither takes up space nor does it receive mouse interaction or touch.
Schema: tchmi:framework#/definitions/Visibility
See also
Attribute getter: getVisibility
Attribute setter: setVisibility
ZIndex
Definition of the position on the Z-axis.
The following applies: The higher the entry, the more the control is in the foreground. A control with a larger
ZIndex hides a control with a smaller one.
Caution: ZIndex is not easy to understand because the index is not global but in a so-called stacking
context. Each container control [} 717] creates its own stacking context.
See also
Attribute getter: getZindex
Attribute setter: setZindex
BoxShadow
Definition of a box shadow.
Schema: tchmi:framework#/definitions/BoxShadowList
See also
Attribute getter: getBoxShadow
Attribute setter: setBoxShadow
TE2000 Version: 2.5.1 711

AccessConfig
Access rights for the Control. For details see also Authorization System/Control Level [} 893].
Schema: tchmi:framework#/definitions/AccessConfig
See also
Attribute getter: getAccessConfig
Attribute setter: setAccessConfig
5.10.3.1.2 Events
onAttached
The control was added to the display.
onDetached
The control was removed from the display.
onInitialized
The control was initialized. Not all of the values of the binding are available yet.
onDestroyed
The control was destroyed.
onMouseClick
The left mouse button was clicked over the control and released.
This event is also triggered by interaction with a touch screen. This can be prevented by enabling
'preventDefault' [} 59] on the corresponding touch event.
712 Version: 2.5.1 TE2000

onMouseDoubleClick
The left mouse button was clicked twice over the control and released.
onMouseDown
A mouse button was depressed over the control.
onMouseDownLeft
The left mouse button was depressed over the control.
onMouseDownRight
The right mouse button was depressed over the control.
onMouseEnter
The mouse pointer was moved over the control.
onMouseLeave becomes active on leaving the control.
As opposed to onMouseOver [} 714], this event is called only once on reaching the control, regardless of the
child control.
onMouseLeave
The mouse pointer has left the control.
onMouseEnter [} 713] is called on reaching the control.
TE2000 Version: 2.5.1 713

As opposed to onMouseOut [} 714], this event is called only once on leaving the control, regardless of the
child control.
onMouseMove
The mouse was moved over the control.
onMouseOut
The mouse pointer has left the control or one of its child controls.
The event onMouseLeave [} 713] observes only the control itself.
onMouseOver [} 714] becomes active on reaching the control or one of its children.
onMouseOver
The mouse pointer was moved over the control or one of its children. The event onMouseEnter [} 713]
observes only the control itself.
onMouseOut [} 714] becomes active on leaving the control or one of its children.
onMouseRightClick
The right mouse button was clicked over the control and released.
onMouseUp
A mouse button was released over the control.
onMouseUpLeft
The left mouse button was released over the control.
714 Version: 2.5.1 TE2000

onMouseUpRight
The right mouse button was released over the control.
onMouseWheel
The mouse wheel was moved over the control.
onMoved
The control was moved in relation to the browser window.
Note: Learn how controls can be positioned [} 111].
onPressed
A mouse click was executed or a touch screen was briefly touched.
onResized
The size of the control was changed.
Note: Learn how the size of controls can be defined [} 111].
onTouchCancel
An interaction with a touch screen was aborted.
TE2000 Version: 2.5.1 715

onTouchEnd
A finger/stylus was lifted off a touch screen.
onTouchMove
A finger/stylus was moved on a touch screen.
onTouchStart
A finger/stylus was placed against a touch screen.
observe
Determines whether the control is generally observable.
If this right is missing, the control is not displayed.
See also
operate
Determines whether the control is generally operable.
If the main function of a control is the interaction (e.g. button [} 168]), a light-colored overlay is drawn if the
right is missing.
See also
716 Version: 2.5.1 TE2000

5.10.3.2 Container Control

provides. It is the base class for all controls that can contain further controls.
Attributes
Category: Colors
Name Description
Category: Layout
TE2000 Version: 2.5.1 717

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
718 Version: 2.5.1 TE2000

Name Description
be displayed
is to be displayed
• Content: The height is defined by the width of the
content. The "Width" attribute is ignored in all
calculations!
TE2000 Version: 2.5.1 719

Name Description
• Content: The height is defined by the height of the
content. The "Height" attribute is ignored in all
calculations!
Category: Common
Name Description
IsEnabled [} 722] Selection of whether the control is enabled
Category: Border
Name Description
them off
control
control

Name Description
background color
image:
image:
four sides
Events
Category: Framework
720 Version: 2.5.1 TE2000

Name Description
window.
Category: Operator
Name Description
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
Access rights
Name Description
observable.
Control [} 690]
TE2000 Version: 2.5.1 721

Container Control
See also
HeightMode
• Content: The width is defined by the children of the control.
Origin: Container Control [} 717]
See also
IsEnabled
Activation status of a control. This overwrites the status of the child control. Only active controls react to
mouse and touch
See also
WidthMode
722 Version: 2.5.1 TE2000

all calculations!
See also
5.10.3.3 Container
The container offers the option of grouping other child controls. All child controls that are added to a
container are defined relative to the position of the container and are shifted automatically with the container.
The container can also be used for the subdivision and arrangement, for example a view or a content.
Attributes
Category: Colors
Name Description
Category: Layout
TE2000 Version: 2.5.1 723

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
724 Version: 2.5.1 TE2000

Name Description
be displayed
is to be displayed
calculations!
TE2000 Version: 2.5.1 725

Name Description
calculations!
Category: Common
Name Description
Category: Border
Name Description
them off
control
control

Name Description
background color
image:
image:
four sides
Events
Category: Framework
726 Version: 2.5.1 TE2000

Name Description
window.
Category: Operator
Name Description
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
Access rights
Name Description
observable.
Control [} 690]
TE2000 Version: 2.5.1 727

Container Control [} 717]
Container
See also
5.10.3.4 Content
A content is an independent container object that can be loaded in a region [} 755]. A content can be used,
for example, to subdivide operating concepts into various contents. It is created under the TcHmi project tree
with the context menu Add new Item…
Attributes
Category: Colors
Name Description
Category: Layout
728 Version: 2.5.1 TE2000

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
TE2000 Version: 2.5.1 729

Name Description
be displayed
is to be displayed
calculations!
730 Version: 2.5.1 TE2000

Name Description
calculations!
Category: Common
Name Description
Category: Border

them off
control
control

Name Description
background color
image:
image:
four sides
Events
Category: Framework
TE2000 Version: 2.5.1 731

Name Description
window.
Category: Operator
Name Description
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
Access rights
Name Description
observable.
Control [} 690]
732 Version: 2.5.1 TE2000

Partial [} 750]
Content
See also
5.10.3.5 Grid
The grid is a layout grid that can be used for the development of fluid and responsive designs. With the help
of the grid, parts of the page or the entire page can be divided into various cells. On the basis of the cells you
can then design the page by adding controls to the various cells and defining the behavior of the cells when
changing the browser size. The grid offers a great many different configuration options. You can find the
description of an example configuration in the chapter Configuration [} 738].
Attributes
Category: Colors
Name Description
Category: Layout
TE2000 Version: 2.5.1 733

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
734 Version: 2.5.1 TE2000

Name Description
be displayed
is to be displayed
WidthMode [} 744] Selection of the method of calculating the width
HeightMode [} 743] Selection of the method of calculating the height
Category: Common
TE2000 Version: 2.5.1 735

Name Description
ColumnOptions [} 743] Definition of the columns
RowOptions [} 744] Definition of the rows
CellOptions [} 742] Definition of the cells
CellWrap [} 742] Selection of whether the cells should wrap within the
row
Category: Border
Name Description
them off
control
control

Name Description
background color
image:
image:
four sides
Events
Category: Framework
736 Version: 2.5.1 TE2000

Name Description
window.
Category: Operator
Name Description
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
Access rights
Name Description
observable.
Control [} 690]
TE2000 Version: 2.5.1 737

Grid
See also
A grid control can be configured in different ways. An example configuration of the Desktop.view together
with a grid control is explained below. Prior to this you should read the chapter on Positioning and calculation
of the size of controls [} 111] as the basis for this example.
1. Create a new project.
2. Open the Desktop.view.
The Desktop.view has a fixed size as a default setting. If the browser size changes, therefore, the
Desktop.view and its contents do not adapt themselves. In the following steps the view will be adjusted so
that it changes its size dynamically with the browser size.
3. Select the view.
4. Change the "Width" attribute to 100 %.
With this setting the size of the view adapts itself automatically to the size of the browser. The viewport of the
graphic editor can now be used to simulate a desired browser size and test the effect on the visualization.
5. Add a grid control to the interface.
6. Change the following attributes: Left = 20 px, Top = 100 px, Right = 20 px.
7. Select the "Parent" mode for the "Width Mode" attribute.
With these settings the size of the grid control adapts itself to the size of the parent element accordingly. In
this case the parent element is the Desktop.view.
8. Insert a second column with the help of the "Column Options [} 741]" dialog.
9. Insert a text block in each column by drag and drop.
10. Change the position of both controls to: Left = 120, Top = 140
With these settings the right-hand cell will be shifted automatically to the row below if there is insufficient
space in the browser to display both side by side. You can test this function by changing the width of the
integrated LiveView [} 72] window or the browser instance. So far the grid has not adapted itself
automatically in height. The consequence of this is that only half of each of the two text blocks is displayed if
the right-hand cell is displayed in the second row.
11. Select the "Content" mode in the "Height Mode" attribute of the grid control.
12. Also select the "Content" mode in the "Height Mode" attribute of the view.
With these settings not only will the grid be enlarged according to its contents, but also the view. In this way
you can ensure that all contents are displayed so as to be reachable if the right-hand cell jumps to the row
below. In order to be able to distinguish better between the two cells, their background colors will be set in
the following.
13. Insert two cells with the help of the "Cell Options [} 739]" dialog.
738 Version: 2.5.1 TE2000

14. Change the first cell option to: Background Color = #FFCA0000, Column Index = 0, Row Index = 0
15. Change the second cell option to: Background Color = #FFFFFF00, Column Index = 1, Row Index = 0
At the moment, both cells close and thus the entire row are bordering the lowermost control. In the row
settings, for example, a minimum row height can be specified.
16. Change the "Row Min Height" attribute of the row option to 300 px with the help of the "Row Options
[} 741]" dialog.
If the browser height is larger than the grid, a white border will be displayed at the moment. To make sure
that the visu completely fills the browser with each browser size, the following step must be carried out.
17. Change the "Minimum Height" attribute of the view to 100 %.
In summary, you have created your first visualization with the help of the grid control according to the
responsive design approach. This visualization fills the entire browser regardless of the browser size. If
insufficient width is available, the content of the second column is automatically displayed in the row below. If
on the other hand the height is insufficient, it will be expanded automatically according to the content to be
displayed.
Sample project: Grid [} 1329]
5.10.3.5.2 Dialogs
Cell Options Dialog

You can change the cell settings with this dialog.
Add a new object
Category: Colors
Name Description
them off
control
control
TE2000 Version: 2.5.1 739

Name Description
background color
image:
image:
four sides
image:
image:
four sides
Category: Border
Name Description
Border Width Definition of the border width of the four sides of the
cell
Border Style Selection of the border style of the four sides of the
cell
Category: Layout
740 Version: 2.5.1 TE2000

Name Description
Grid Column Index Definition of the column of a grid that is to be defined
by the cell option
Grid Row Index Definition of the row of a grid that is to be defined by
the cell option
Padding Definition of an additional distance between the cell
border and the controls added to the cell for the four
sides
Column Options Dialog

You can change the number of columns and their settings with this dialog.
Add a new object
Category: Layout
Name Description
Column Width Definition of the column width
WidthMode [} 744] Selection of the method of calculating the width
Column Max Width Definition of the maximum column width
Column Min Width Definition of the minimum column width
Overflow Selection of whether controls that have been added
to the row but placed outside the row area should be
displayed
Row Options Dialog

You can change the number of rows and their settings with this dialog.
Add a new object
Category: Layout
TE2000 Version: 2.5.1 741

Name Description
Row Height Definition of the row height
Row Max Height Definition of the maximum row height
Row Min Height Definition of the minimum row height
Overflow Selection of whether controls that have been added
to the row but placed outside the row area should be
displayed
CellOptions
Definition for the cells.
Here you can define a specific feature for each cell. In each definition a row and column index defines which
cell is to be addressed.
You can define:

• background color (identical to Control Background Color [} 705])
• border color (identical to Control Border Color [} 703])
• background image (identical to Control Background Image [} 705])
• width of the background image (identical to Control Background Image Width [} 705])
• height of the background image (identical to Control Background Image Height [} 706])
• horizontal alignment of the background image (identical to Control Background Image [} 706])
• vertical alignment of the background image (identical to Control Background Image [} 707])
• border width (identical to Control Border Width [} 704])
• border style (identical to Control Border Style [} 704])
• padding (identical to Control Padding [} 706])
Schema (version 1.8): tchmi:framework#/definitions/CellOptions
Schema (version 1.12): tchmi:framework#/definitions/TcHmi.Controls.System.TcHmiGrid.CellOptions
Origin: Grid [} 733]
See also
Attribute getter: getCellOptions
Attribute setter: setCellOptions
CellWrap
Determines whether the cells should wrap within the row.
742 Version: 2.5.1 TE2000

See also
Attribute getter: getCellWrap
Attribute setter: setCellWrap
ColumnOptions
Definition for the columns and thus their number.
You can define:

• Width (similar to Control Width [} 698])
• Width Mode (similar to Control Width Mode [} 698])
• Minimum Width (identical to Control Minimum Width [} 709])
• Maximum Width (identical to Control Maximum Width [} 708])
• Overflow determines whether a child control is truncated if it is larger than the cell.
Schema (version 1.8): tchmi:framework#/definitions/ColumnOptions
Schema (version 1.12): tchmi:framework#/definitions/TcHmi.Controls.System.TcHmiGrid.ColumnOptions
See also
Attribute getter: getColumnOptions
Attribute setter: setColumnOptions
HeightMode
See also
TE2000 Version: 2.5.1 743

RowOptions
Definition for the rows and thus their number.
You can define:

• Height (similar to Control Height [} 699])
• Height Mode (similar to Control Height Mode [} 699])
• Minimum Height (identical to Control Minimum Height [} 707])
• Maximum Height (identical to Control Maximum Height [} 708])
• Overflow determines whether a child control is truncated if it is larger than the cell.
Schema (version 1.8): tchmi:framework#/definitions/RowOptions
Schema (version 1.12): tchmi:framework#/definitions/TcHmi.Controls.System.TcHmiGrid.RowOptions
See also
Attribute getter: getRowOptions
Attribute setter: setRowOptions
WidthMode
all calculations!
See also
5.10.3.6 HTML host

The HTML Host offers the possibility to use pure HTML content on the user interface. This control can be
filled with content and modified in the HTML editor of the designer.
Attributes
Category: Colors
744 Version: 2.5.1 TE2000

Name Description
Category: Layout
TE2000 Version: 2.5.1 745

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
746 Version: 2.5.1 TE2000

Name Description
be displayed
is to be displayed
Category: Common
TE2000 Version: 2.5.1 747

Name Description
Category: Border
Name Description
them off
control
control

Name Description
background color
image:
image:
four sides
Events
Category: Framework
Name Description
window.
748 Version: 2.5.1 TE2000

Category: Operator
Name Description
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
Access rights
Name Description
observable.
Control [} 690]
HTML Host
See also
TE2000 Version: 2.5.1 749

5.10.3.7 Partial
provides. It is the base class for some system controls.
Attributes
Category: Colors
Name Description
Category: Layout
750 Version: 2.5.1 TE2000

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
TE2000 Version: 2.5.1 751

Name Description
be displayed
is to be displayed
calculations!
752 Version: 2.5.1 TE2000

Name Description
calculations!
Category: Common
Name Description
Category: Border
Name Description
them off
control
control

Name Description
background color
image:
image:
four sides
Events
Category: Framework
TE2000 Version: 2.5.1 753

Name Description
window.
Category: Operator
Name Description
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
Access rights
Name Description
observable.
Control [} 690]
754 Version: 2.5.1 TE2000

Partial
See also
5.10.3.8 Region
The region allows to display a Content [} 728] (and thus a subpage of any complexity). The content to be
displayed can be defined using the Target Content attribute. Thus, the displayed subpage can be changed at
runtime.
Attributes
Category: Colors
Name Description
Category: Layout
TE2000 Version: 2.5.1 755

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
756 Version: 2.5.1 TE2000

Name Description
be displayed
is to be displayed
left and right side. The "Width" attribute is ignored
• Content: The width is defined by the children of the
content control. The "Width" attribute is ignored in
all calculations!
TE2000 Version: 2.5.1 757

Name Description
• Content: The height is defined by the children of
the content control. The "Height" attribute is
Category: Common
Name Description
TargetContent [} 761] Definition of the path to the content control that is to
be displayed
CurrentContent [} 762] Current content control object for this region.
ScaleMode [} 762] Selection of the scaling of the content that is
displayed in the region:
• None: No scaling of the content
• ScaleToFill: The content is displayed over the
entire size of the control. The proportions are
thereby ignored.
• ScaleToFit: The content is displayed as large as
possible without extending beyond the edges of
the control. The proportions are retained.
• ScaleToFitWidth: The content is displayed over the
entire width of the control. The proportions are
retained.
• ScaleToFitHeight: The content is displayed over
the entire height of the control. The proportions are
retained.
Scrolling [} 762] Selection of the scrolling behavior of the content:
• No
• Yes
• Auto
A browser has to be used to test the scrolling.
Category: Border
Name Description
them off
control
control
758 Version: 2.5.1 TE2000

Name Description
background color
image:
image:
four sides
Events
Category: Control
Name Description
onTargetContentReplaced [} 763] The content control was replaced.
Category: Framework
Name Description
window.
Category: Operator
TE2000 Version: 2.5.1 759

Name Description
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
Access rights
Name Description
observable.
Control [} 690]
Region
See also
760 Version: 2.5.1 TE2000

WidthMode
all calculations!
• Content: The width is defined by the children of the content control.
Origin: Region [} 755]
See also
HeightMode
• Content: The height is defined by the children of the content control.
See also
TargetContent
Path to the content [} 728] control.
See also
Attribute getter: getTargetContent
Attribute setter: setTargetContent
TE2000 Version: 2.5.1 761

CurrentContent
Current Content [} 728] control object for this region. This is not the path [} 761] to the control, but the
control itself.
Schema: tchmi:framework#/definitions/TcHmi.Controls.System.TcHmiContent
See also
Attribute getter: getCurrentContent
ScaleMode
Defines the scaling of the control.
Possible values:
• None (Standard)
• ScaleToFit
• ScaleToFitWidth
• ScaleToFitHeight
• ScaleToFill
See also
Scrolling
Defines whether the content can be scrolled.
Possible values:
• No (Standard)
• Yes
• Auto
Schema: tchmi:framework#/definitions/ScrollMode
See also
Attribute getter: getScrolling
Attribute setter: setScrolling
762 Version: 2.5.1 TE2000

5.10.3.8.2 Events
onTargetContentReplaced
The content control was replaced. The new control is not yet displayed at this point in time.
5.10.3.9 User Control

A user control is a reusable collection of controls which, after creation, is available in the toolbox like a
standard control. The context menu option Add new item can be used to create a user control within the
project tree.
When a User Control is added, a User Control Host is created that points to the User Control.
Therefore, every change to an attribute (for example the background color) acts from the outside on
the user control host and from the inside on the user control.
Attributes
Category: Colors
Name Description
Category: Layout
TE2000 Version: 2.5.1 763

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
764 Version: 2.5.1 TE2000

Name Description
be displayed
is to be displayed
calculations!
TE2000 Version: 2.5.1 765

Name Description
calculations!
Category: Common
Name Description
Category: Border
Name Description
them off
control
control

Name Description
background color
image:
image:
four sides
Events
Category: Framework
766 Version: 2.5.1 TE2000

Name Description
window.
Category: Operator
Name Description
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
Access rights
Name Description
observable.
Control [} 690]
TE2000 Version: 2.5.1 767

Partial [} 750]
User Control
See also
5.10.3.10 User Control Host

The user control host is an administration container for user controls [} 768]. It is created automatically when
using a user control.
Note: Version 1.10
Form version 1.10, the attribute TargetUserControl is mandatory at the time of compilation and can no longer
be changed at runtime.
A missing attribute TargetUserControl and errors in the configuration of the UserControl defined in
TargetUserControl now lead to compilation errors that can indicate an error in the configuration.
Attributes
Category: Colors
Name Description
Category: Layout
768 Version: 2.5.1 TE2000

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
TE2000 Version: 2.5.1 769

Name Description
be displayed
is to be displayed
left and right side. The "Width" attribute is ignored
• Content: The width is defined by the user control
that is displayed in the user control host. The
770 Version: 2.5.1 TE2000

Name Description
• Content: The height is defined by the user control
that is displayed in the user control host. The
Category: Common
Name Description
TargetUserControl [} 774] Definition of the path to the user control that is to be
displayed
IsEnabled [} 774] Selection of whether the control should be enabled
Category: Border
Name Description
them off
control
control

Name Description
background color
image:
image:
four sides
Events
Category: Control
TE2000 Version: 2.5.1 771

Name Description
onTargetUserControlReplaced [} 774] Version 1.8 only: The user control was replaced.
Category: Framework
Name Description
window.
Category: Operator
Name Description
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
772 Version: 2.5.1 TE2000

Access rights
Name Description
observable.
Control [} 690]
User Control Host
See also
HeightMode
ignored in all calculations.
• Content: The width is defined by the children of the user control.
Learn how controls can be positioned and their size defined [} 111].
Origin: User Control Host [} 768]
See also
WidthMode
all calculations.
• Content: The width is defined by the children of the user control.
TE2000 Version: 2.5.1 773

Learn how controls can be positioned and their size defined [} 111].
See also
IsEnabled
Activation status of a control. This overwrites the status of the user control [} 763]. Only active controls
respond to mouse and touch.
See also
TargetUserControl
Path to the user control [} 763].
Schema: tchmi:framework#/definitions/UserControlPath
See also
Attribute getter: getTargetUserControl
Attribute setter: setTargetUserControl
ReadOnly from version 1.10
5.10.3.10.2 Events
onTargetUserControlReplaced
Since version 1.10 the UserControlHost and the UserControl form a firmer unit. This is established when the
UserControlHost is created and can no longer be separated. The event is therefore no longer used.
In version 1.8:
774 Version: 2.5.1 TE2000

The user control was replaced. The new control is not yet displayed at this point in time.
Note: Available from version 1.8, not applicable from version 1.10
5.10.3.11 View
A view is the top-level control of a visualization. The control is created under the TC HMI project tree with the
context menu Add new Item…
Attributes
Category: Colors
Name Description
Category: Layout
TE2000 Version: 2.5.1 775

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
776 Version: 2.5.1 TE2000

Name Description
be displayed
is to be displayed
calculations!
TE2000 Version: 2.5.1 777

Name Description
calculations!
Category: Common
Name Description
Category: Border
Name Description
them off
control
control

Name Description
background color
image:
image:
four sides
Events
Category: Framework
778 Version: 2.5.1 TE2000

Name Description
window.
Category: Operator
Name Description
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
Access rights
Name Description
observable.
Control [} 690]
TE2000 Version: 2.5.1 779

Partial [} 750]
View
See also
5.10.4 User controls

A user control enables the re-use of existing controls in a separate control. Existing controls include the
system controls, the Beckhoff controls and the framework controls. The controls can be placed in the user
control by drag & drop.
Further information on the controls can be found in the chapter Creating a user control [} 44].
5.10.5 Framework controls

User-specific controls [} 1223] can be developed in JavaScript in order to integrate controls or libraries from
third-party suppliers or to map applicative requirements.
5.10.6 Control rights
Enables or prevents the editing or viewing of the respective control by the user groups configured. For more
information, see the chapter User Management [} 887].
5.10.7 BaseTemplate
Name Description
780 Version: 2.5.1 TE2000

Breadcrumb [} 781] The breadcrumb control in combination with the

navigation control can display the path of the
navigation and navigate back to already visited
pages.
Burger Menu [} 787] The Burger Menu control can be used to show and
hide controls.
Header [} 793] The Header control can responsively display and
prioritize elements that are typically displayed in
headers of an application.
Navigation [} 798] With the Navigation control the user can navigate
between different pages of an application.
Responsive Behaviour A function that implements the responsive behavior
of the Project Generator.
5.10.7.1 Breadcrumb
The breadcrumb control in combination with the navigation control can display the path of the navigation and
navigate back to already visited pages.
Attributes
Category: Colors
Name Description
Category: Layout
TE2000 Version: 2.5.1 781

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
782 Version: 2.5.1 TE2000

Name Description
be displayed
is to be displayed
Category: Common
TE2000 Version: 2.5.1 783

Name Description
Category: Border
Name Description
them off
control
control

Name Description
background color
image:
image:
four sides
Category: Text
Name Description
Events
Category: Framework
784 Version: 2.5.1 TE2000

Name Description
window.
Category: Operator
Name Description
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
Access rights
Name Description
observable.
Control [} 690]
TE2000 Version: 2.5.1 785

Breadcrumb
NuGet package: Beckhoff.TwinCAT.HMI.BaseTemplate
See also
TextFontSize
Origin: Breadcrumb [} 781]
See also
TextFontSizeUnit
See also
TextColor
786 Version: 2.5.1 TE2000

See also
5.10.7.2 Burger Menu

The Burger Menu can be used to show and hide controls.
Attributes
Category: Colors
Name Description
Category: Layout
TE2000 Version: 2.5.1 787

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
788 Version: 2.5.1 TE2000

Name Description
be displayed
is to be displayed
Category: Common
TE2000 Version: 2.5.1 789

Name Description
TargetControl [} 792] Definition of the target control of the control
Category: Border
Name Description
them off
control
control

Name Description
background color
image:
image:
four sides
Events
Category: Framework
790 Version: 2.5.1 TE2000

Name Description
window.
Category: Operator
Name Description
pressed.
pressed.
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
Functions
Category: Menu
TE2000 Version: 2.5.1 791


closeMenu [} 792] TcHmiBurgerMenu Resets the currently displayed path
Access rights
Name Description
observable.
Control [} 690]
Burger Menu
See also
TargetControl
Definition of the target control of the control.
Schema: tchmi:framework#/definitions/TcHmi.Controls.System.TcHmiControl
Origin: Burger Menu [} 787]
See also
Attribute getter: getTargetControl
Attribute setter: setTargetControl
closeMenu
Closes the menu.
792 Version: 2.5.1 TE2000

Return value: null
Origin: Burger Menu [} 787]
5.10.7.3 Header
The Header Control can responsively and prioritize elements that are typically displayed in the header of an
application.
Attributes
Category: Colors
Name Description
Category: Layout
TE2000 Version: 2.5.1 793

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
794 Version: 2.5.1 TE2000

Name Description
be displayed
is to be displayed
Category: Common
TE2000 Version: 2.5.1 795

Name Description
Expandable [} 798] Defines whether the button for expanding the control
is displayed
Category: Border
Name Description
them off
control
control

Name Description
background color
image:
image:
four sides
Category: Items
Name Description
HeaderItems [} 798] Definition of the header elements of the control
Events
Category: Framework
796 Version: 2.5.1 TE2000

Name Description
window.
Category: Operator
Name Description
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
Access rights
Name Description
observable.
Control [} 690]
TE2000 Version: 2.5.1 797

Header
See also
Expandable
Defines whether the button for expanding the control is displayed.
Origin: Header [} 793]
See also
Attribute getter: getExpandable
Attribute setter: setExpandable
HeaderItems
Definition of the header elements of the control.
Schema: tchmi:framework#/definitions/TcHmi.Control.BaseTemplate.TcHmiHeader.HeaderItems
Origin: Header [} 793]
See also
Attribute getter: getHeaderItems
Attribute setter: setHeaderItems
5.10.7.4 Navigation
The Navigation Control allows the user to navigate between the different pages of an application.
798 Version: 2.5.1 TE2000

Attributes
Category: Colors
Name Description
Category: Layout
TE2000 Version: 2.5.1 799

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
800 Version: 2.5.1 TE2000

Name Description
be displayed
is to be displayed
Category: Common
TE2000 Version: 2.5.1 801

Name Description
NavigationStructure [} 807] Definition of the navigation hierarchy
TargetRegion [} 807] Definition of the target region
BreadcrumbControl [} 807] Definition of the Breadcrumb control
Category: Border
Name Description
them off
control
control

Name Description
background color
image:
image:
four sides
Category: navigation
802 Version: 2.5.1 TE2000

Name Description
KeepLowestLevel [} 809] Defines whether the last navigation level should be
preserved in the context menu if the selected page
has no elements defined for the context menu.
NavigationOrientation [} 808] Definition of the orientation of the control
StaticMenuHeight [} 808] Definition of the height of the static menu
StaticMenuHeightUnit [} 808] Selection of the unit of the height of the static menu:
Category: Text
Name Description
Category: Icon
Name Description
IconHeight [} 805] Icon height definition
IconHeightUnit [} 806] Selection of the unit of the icon height:
IconWidth [} 806] Icon width definition
IconWidthUnit [} 806] Selection of the unit of the icon width:
Events
Category: Framework
Name Description
window.
Category: Operator
TE2000 Version: 2.5.1 803

Name Description
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
Access rights
Name Description
observable.
Control [} 690]
Navigation
804 Version: 2.5.1 TE2000

See also
TextFontSize
Origin: Navigation [} 798]
See also
TextFontSizeUnit
See also
IconHeight
Numerical value of the image height of the icon.
See also
Attribute getter: getIconHeight
Attribute setter: setIconHeight
TE2000 Version: 2.5.1 805

IconHeightUnit
See also
Attribute getter: getIconHeightUnit
Attribute setter: setIconHeightUnit
IconWidth
See also
Attribute getter: getIconWidth
Attribute setter: setIconWidth
IconWidthUnit
See also
Attribute getter: getIconWidthUnit
Attribute setter: setIconWidthUnit
806 Version: 2.5.1 TE2000

TextColor
See also
NavigationStructure
The structure of the navigation. A list of navigation elements, each of which represents a page of the
application and each of which may have subpages.
Schema: tchmi:framework#/definitions/TcHmi.Controls.BaseTemplate.TcHmiNavigation.ListItemList
See also
Attribute getter: getNavigationStructure
Attribute setter: setNavigationStructure
TargetRegion
Definition of the target region.
See also
Attribute getter: getTargetRegion
Attribute setter: setTargetRegion
BreadcrumbControl
Definition of the Breadcrumb control.
Schema: tchmi:framework#/definitions/TcHmi.Controls.BaseTemplate.TcHmiBreadcrumb
TE2000 Version: 2.5.1 807

See also
Attribute getter: getBreadcrumb
Attribute setter: setBreadcrumb
StaticMenuHeight
Height of the static part of the menu. The dynamic part of the menu takes up the rest of the available space.
See also
Attribute getter: getStaticMenuHeight
Attribute setter: setStaticMenuHeight
StaticMenuHeightUnit
See also
Attribute getter: getStaticMenuHeightUnit
Attribute setter: setStaticMenuHeightUnit
NavigationOrientation
The orientation of the entire control.
TcHmi.Controls.BaseTemplate.TcHmiNavigation.NavigationOrientation
808 Version: 2.5.1 TE2000

See also
Attribute getter: getNavigationOrientation
Attribute setter: setNavigationOrientation
KeepLowestLevel
Defines whether the last navigation level should be preserved in the context menu if the selected page has
no elements defined for the context menu.
See also
Attribute getter: getKeepLowestLevel
Attribute setter: setKeepLowestLevel
5.10.8 Responsive navigation

Name Description
Breadcrumb The breadcrumb control in combination with the

navigation control can display the path of the
navigation and navigate back to already visited
pages.
Navigation Bar The Navigation Bar control in combination with the
Navigation Content control allows the user to
navigate between different pages of an application.
Navigation Content The Navigation Content control in combination with
the Navigation Bar control allows the user to navigate
between different pages of an application.
5.10.8.1 Breadcrumb
The Breadcrumb control in combination with the Navigation control can display the path of the navigation
and navigate back to already visited pages.
Attributes
Category: Colors
TE2000 Version: 2.5.1 809

Name Description
FontColor [} 819] Definition the text color of the control
Category: Layout
810 Version: 2.5.1 TE2000

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
TE2000 Version: 2.5.1 811

Name Description
be displayed
is to be displayed
Category: Common
812 Version: 2.5.1 TE2000

Name Description
StartPage [} 816] Definition of the start page
LastPageClickable [} 816] Defines whether interaction with the last page
displayed is possible.
Path [} 819] Defines the displayed path
Category: Border
Name Description
them off
control
control

Name Description
background color
image:
image:
four sides
Category: Text
TE2000 Version: 2.5.1 813

Name Description
FontSize [} 819] Definition of the font size
FontSizeUnit [} 819] Selecting the font size unit:
Category: Start Page

Name Description
StartPageVisible [} 816] Defines whether the start page is displayed
ShowStartPageOnStartPage [} 817] Defines whether the start page is displayed on the
start page
StartPageText [} 817] Defines the text that will be displayed for the start
page
StartPageImage [} 817] Defines the image that will be displayed for the start
page
ShowDefaultStartPage [} 818] Defines whether the default icon for the start page
should be displayed if no other image is defined.
SpacerImage [} 818] Defines the image between the Breadcrumb
elements
Events
Category: Framework
Name Description
window.
Category: Operator
814 Version: 2.5.1 TE2000

Name Description
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
Functions
Category: Close Menu

clearDisplay TcHmiBreadcrumb Resets the currently displayed path
Access rights
Name Description
observable.
Control [} 690]
Breadcrumb
NuGet package: Beckhoff.TwinCAT.HMI.ResponsiveNavigation
TE2000 Version: 2.5.1 815

See also
StartPage
Definition of the start page.
See also
Attribute getter: getStartPage
Attribute setter: setStartPage
LastPageClickable
Defines whether interaction with the last page displayed is possible.
See also
Attribute getter: getLastPageClickable
Attribute setter: setLastPageClickable
StartPageVisible
Defines whether the start page is displayed.
816 Version: 2.5.1 TE2000

See also
Attribute getter: getStartPageVisible
Attribute setter: setStartPageVisible
ShowStartPageOnStartPage
Defines whether the start page is displayed on the start page.
See also
Attribute getter: getShowStartPageOnStartPage
Attribute setter: setShowStartPageOnStartPage
StartPageText
Defines the text that will be displayed for the start page.
See also
Attribute getter: getStartPageText
Attribute setter: setStartPageText
StartPageImage
Defines the image that will be displayed for the start page.
See also
Attribute getter: getStartPageImage
Attribute setter: setStartPageImage
TE2000 Version: 2.5.1 817

ShowDefaultStartPage
Defines whether the default icon for the start page should be displayed if no other image is defined.
See also
Attribute getter: getShowDefaultStartPage
Attribute setter: setShowDefaultStartPage
SpacerImage
Defines the image between the Breadcrumb elements.
See also
Attribute getter: getSpacerImage
Attribute setter: setSpacerImage
Selecting the vertical alignment of the text.
See also
818 Version: 2.5.1 TE2000

FontSize
See also
Attribute getter: getFontSize
Attribute setter: setFontSize
FontSizeUnit
See also
Attribute getter: getFontSizeUnit
Attribute setter: setFontSizeUnit
FontColor
Definition the text color of the control.
See also
Attribute getter: getFontColor
Attribute setter: setFontColor
Path
Defines the displayed path.
Schema: tchmi:framework#/definitions/TcHmi.Controls.ResponsiveNavigation.TcHmiBreadcrumb.Path
TE2000 Version: 2.5.1 819

See also
Attribute getter: getPath
Attribute setter: setPath
clearDisplay
Resets the currently displayed path.
Return value: null
5.10.8.2 Navigation Bar

The Navigation Bar control, in combination with the Navigation Content control, allows the user to navigate
between the different pages of an application.
Attributes
Category: Colors
Name Description
HightlightColor [} 827] Definition of the highlight color of the control
TriangleColor [} 827] Definition of the color of the triangle
Category: Layout
820 Version: 2.5.1 TE2000

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
TE2000 Version: 2.5.1 821

Name Description
be displayed
is to be displayed
Category: Common
822 Version: 2.5.1 TE2000

Name Description
MenuSourceData [} 829] Definition of the menu structure
SwitchBreakpoint [} 829] Defines the width in pixels at which the control
switches from the desktop view to the mobile view
EnableMobileSwitch [} 829] Defines whether the control can switch to the mobile
view
LastEventParameter [} 834] The parameter of the last selected menu item
LastPage [} 834] The page of the last selected menu item
Category: Border
Name Description
them off
control
control

Name Description
background color
image:
image:
four sides
TE2000 Version: 2.5.1 823

Name Description
Alignment [} 832] Definition of the alignment of the control.
PaddingLeftRight [} 828] Definition of the vertical spacing of the menu items.
PaddingLeftRightUnit [} 828] Selection of the unit of the distance:
Category: Behavior
Name Description
ListenToWindowResize [} 835] Defines whether the control responds to resizing the
control or the window.
MouseOverShow [} 835] Defines whether menu items are opened when the
mouse pointer stays over the item for a while.
Category: Mobile Icon

Name Description
MobileMenuImage [} 830] The image that is displayed in the mobile view.
MobileIconHeight [} 833] The height of the icon in the mobile view
MobileIconHeightUnit [} 834] Selection of the unit of the height:
MobileIconWidth [} 833] The width of the icon in the mobile view
MobileIconWidthUnit [} 833] Selection of the unit of the width:
Category: Slave Controls

Name Description
BreadcrumbControl [} 831] The TcHmiBreadcrumb control instance which
represents the navigation path (obsolete).
BreadcrumbControlSymbol [} 831] The icon of the TcHmiBreadcrumb control instance,
which represents the navigation path.
NavContentControl [} 831] The TcHmiNavigationContent control instance which
represents the menu (obsolete).
NavContentControlSymbol [} 830] The icon of the TcHmiNavigationContent control
instance which represents the menu.
TargetRegionControl [} 832] The TcHmiRegion control instance representing the
selected page (obsolete).
TargetRegionControlSymbol [} 832] The icon of the TcHmiRegion control instance
representing the selected page.
Category: Source Data

Name Description
DesktopView [} 830] Defines whether the control is in the desktop view
Category: Text
824 Version: 2.5.1 TE2000

Name Description
FontSize [} 828] Definition of the font size
FontSizeUnit [} 829] Selecting the font size unit:
Events
Category: Control
Name Description
onMenuClosed [} 836] The menu has been closed.
onMenuOpened [} 836] The menu has been opened.
onPageCalled [} 835] A menu item has been selected.
onViewSwitched [} 835] The view has switched between desktop view and
mobile view
Category: Framework
Name Description
window.
Category: Operator
TE2000 Version: 2.5.1 825

Name Description
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
Functions
Category: Close Menu

closeMenu [} 836] TcHmiNavigationBar Closes the menu
Access rights
Name Description
observable.
Control [} 690]
Navigation Bar
826 Version: 2.5.1 TE2000

See also
HightlightColor
Origin: Navigation Bar [} 820]
See also
Attribute getter: getHighlightColor
Attribute setter: setHighlightColor
FontColor
See also
TriangleColor
See also
Attribute getter: getTriangleColor
Attribute setter: setTriangleColor
TE2000 Version: 2.5.1 827

PaddingLeftRight
See also
Attribute getter: getPaddingLeftRight
Attribute setter: setPaddingLeftRight
PaddingLeftRightUnit
See also
Attribute getter: getPaddingLeftRightUnit
Attribute setter: setPaddingLeftRightUnit
FontSize
See also
Attribute getter: getFontSize
Attribute setter: setFontSize
828 Version: 2.5.1 TE2000

FontSizeUnit
See also
Attribute getter: getFontSizeUnit
Attribute setter: setFontSizeUnit
MenuSourceData
TcHmi.Controls.ResponsiveNavigation.TcHmiNavigationBar.MenuItemList
See also
Attribute getter: getMenuSourceData
Attribute setter: setMenuSourceData
SwitchBreakpoint
The width in pixels at which the control switches from desktop view to mobile view.
See also
Attribute getter: getSwitchBreakpoint
Attribute setter: setSwitchBreakpoint
EnableMobileSwitch
Defines whether the control can switch to the mobile view.
TE2000 Version: 2.5.1 829

See also
Attribute getter: getEnableMobileSwitch
Attribute setter: setEnableMobileSwitch
DesktopView
See also
Attribute getter: getDesktopView
MobileMenuImage
The address of the image that will be displayed when the control is in mobile view. Images on other servers
are also possible.
See also
Attribute getter: getMobileMenuImage
Attribute setter: setMobileMenuImage
NavContentControlSymbol
The icon of the TcHmiNavigationContent control in which subelements of the navigation are displayed.
TcHmiControls.ResponsiveNavigation.TcHmiNavigationBar.NavigationContentControlSymbol
See also
Attribute getter: getNavContentControlSymbol
830 Version: 2.5.1 TE2000

Attribute setter: setNavContentControlSymbol
NavContentControl
The TcHmiNavigationContent control instance which represents the menu.
This attribute is obsolete. Please use this attribute NavContentControlSymbol [} 830]
Schema: tchmi:framework#/definitions/Tchmi.Controls.ResponsiveNavigation.TcHmiNavigationContent
See also
Attribute getter: getNavContentControl
Attribute setter: setNavContentControl
BreadcrumbControlSymbol
The TcHmiBreadcrumb control instance which represents the navigation path.
TcHmi.Controls.ResponsiveNavigation.TcHmiNavigationBar.BreadCrumbControlSymbol
Origin: BreadcrumbControlSymbol [} 831]
See also
Attribute getter: getBreadcrumbControlSymbol
Attribute setter: setBreadcrumbControlSymbol
BreadcrumbControl
The TcHmiBreadcrumb control instance which represents the navigation path.
This attribute is obsolete. Please use this attribute BreadcrumbControlSymbol [} 831]
Schema: tchmi:framework#/definitions/TcHmi.Controls.ResponsiveNavigation.TcHmiBreadcrumb
TE2000 Version: 2.5.1 831

See also
Attribute getter: getBreadcrumbControl
Attribute setter: setBreadcrumbControl
TargetRegionControlSymbol
The TcHmiRegion control instance that represents the selected page.
TcHmi.Controls.ResponsiveNavigation.TcHmiNavigationBar.TargetRegionControlSymbol
Origin: TargetRegionControlSymbol [} 832]
See also
Attribute getter: getTargetRegionControlSymbol
Attribute setter: setTargetRegionControlSymbol
TargetRegionControl
The TcHmiRegion control instance that represents the selected page.
This attribute is obsolete. Please use this attribute TargetRegionControlSymbol [} 832]
See also
Attribute getter: getTargetRegionControl
Attribute setter: setTargetRegionControl
Alignment
TcHmi.Controls.ResponsiveNavigation.TcHmiNavigationBar.Alignment
832 Version: 2.5.1 TE2000

See also
Attribute getter: getAlignment
Attribute setter: setAlignment
MobileIconWidth
See also
Attribute getter: getMobileIconWidth
Attribute setter: setMobileIconWidth
MobileIconWidthUnit
See also
Attribute getter: getMobileIconWidthUnit
Attribute setter: setMobileIconWidthUnit
MobileIconHeight
See also
Attribute getter: getMobileIconHeight
Attribute setter: setMobileIconHeight
TE2000 Version: 2.5.1 833

MobileIconHeightUnit
See also
Attribute getter: getMobileIconHeightUnit
Attribute setter: setMobileIconHeightUnit
LastEventParameter
The parameter of the last selected menu item.
See also
Attribute getter: getLastEventParameter
LastPage
The page of the last selected menu item.
See also
Attribute getter: getLastPage
834 Version: 2.5.1 TE2000

ListenToWindowResize
See also
Attribute getter: getListenToWindowResize
Attribute setter: setListenToWindowResize
MouseOverShow
See also
Attribute getter: getMouseOverShow
Attribute setter: setMouseOverShow
5.10.8.2.2 Events
onViewSwitched
The view has been changed between mobile and desktop.
onPageCalled
A navigation element that defined a page was selected.
TE2000 Version: 2.5.1 835

onMenuOpened
The menu has been opened.
onMenuClosed
The menu has been closed.
closeMenu
Closes the menu.
Return value: null
5.10.8.3 Navigation Content

The Navigation Content control, in combination with the Navigation Bar control, allows the user to navigate
between the different pages of an application.
Attributes
Category: Colors
Name Description
MenuBackgroundColor [} 849] Definition of the background color of the menu
Category: Layout
836 Version: 2.5.1 TE2000

Name Description
defined as dynamic
defined as dynamic
defined as dynamic
defined as dynamic
TE2000 Version: 2.5.1 837

Name Description
be displayed
is to be displayed
• Value: the height is defined by the height entered.
• Parent: the height is defined by the distance to the
838 Version: 2.5.1 TE2000

Name Description
• Content: the height is defined by the content of the
control.
Category: Common
Name Description
CloseText [} 848] The text of the close button
CloseImage [} 848] The image of the close button
SubMenuImage [} 849] The image that is displayed in front of subelements of
the navigation
Category: Border
Name Description
them off
control
control

Name Description
background color
image:
image:
four sides
Category: Text
TE2000 Version: 2.5.1 839

Name Description
CloseFontSize [} 846] Definition of the font size of the close button
CloseFontSizeUnit [} 847] Selecting the font size unit:
ColumnElementFontSize [} 846] Definition of the font size of a column element
ColumnElementFontSizeUnit [} 846] Selecting the font size unit:
ColumnTitleFontSize [} 845] Definition of the font size of a column title
ColumnTitleFontSizeUnit [} 845] Selecting the font size unit:
SubtitleFontSize [} 844] Definition of the font size of a subtitle
SubtitleFontSizeUnit [} 845] Selecting the font size unit:
Category: Behavior
Name Description
AnimationTime [} 844] The animation time in milliseconds.
AutoCloseMenu [} 848] Defines whether the menu is closed when the user
interacts with controls outside the menu.
AutoCollapseElement [} 847] Defines whether menu items are closed when
another menu item is selected.
AutoExpandElements [} 847] Defines whether all elements are expanded after
opening the menu.
Name Description
ColumnElementMarginTop [} 843] Top margin of a column element
ColumnElementMarginTopUnit [} 843] Selection of the unit of the distance:
MobileElementMarginTop [} 844] Top margin of an element in mobile view
MobileElementMarginTopUnit [} 844] Selection of the unit of the distance:
PaddingLeftRight [} 842] Definition of the vertical spacing of the menu items.
PaddingLeftRightUnit [} 843] Selection of the unit of the distance:
ShowIconsMobile [} 847] Defines whether the icons are displayed in the mobile
view.
840 Version: 2.5.1 TE2000

Events
Category: Framework
Name Description
window.
Category: Operator
Name Description
briefly touched.
and released.
and released.
control.
control.
child controls.
control.
TE2000 Version: 2.5.1 841

Access rights
Name Description
observable.
Control [} 690]
Navigation Content
See also
FontColor
Definition the text color of the control.
Origin: Navigation Content [} 836]
See also
PaddingLeftRight
Definition of the vertical spacing of the menu items.
See also
Attribute getter: getPaddingLeftRight
842 Version: 2.5.1 TE2000

Attribute setter: setPaddingLeftRight
PaddingLeftRightUnit
See also
Attribute getter: getPaddingLeftRightUnit
Attribute setter: setPaddingLeftRightUnit
ColumnElementMarginTop
The top margin of a column element.
See also
Attribute getter: getColumnElementMarginTop
Attribute setter: setColumnElementMarginTop
ColumnElementMarginTopUnit
See also
Attribute getter: getColumnElementMarginTopUnit
Attribute setter: setColumnElementMarginTopUnit
TE2000 Version: 2.5.1 843

MobileElementMarginTop
The top margin of an element in mobile view.
See also
Attribute getter: getMobileElementMarginTop
Attribute setter: setMobileElementMarginTop
MobileElementMarginTopUnit
See also
Attribute getter: getMobileElementMarginTopUnit
Attribute setter: setMobileElementMarginTopUnit
AnimationTime
Animation time in milliseconds.
See also
Attribute getter: getAnimationTime
Attribute setter: setAnimationTime
SubtitleFontSize
844 Version: 2.5.1 TE2000

See also
Attribute getter: getSubtitleFontSize
Attribute setter: setSubtitleFontSize
SubtitleFontSizeUnit
See also
Attribute getter: getSubtitleFontSizeUnit
Attribute setter: setSubtitleFontSizeUnit
ColumnTitleFontSize
See also
Attribute getter: getColumnTitleFontSize
Attribute setter: setColumnTitleFontSize
ColumnTitleFontSizeUnit
See also
Attribute getter: getColumnTitleFontSizeUnit
TE2000 Version: 2.5.1 845

Attribute setter: setColumnTitleFontSizeUnit
ColumnElementFontSize
See also
Attribute getter: getColumnElementFontSize
Attribute setter: setColumnElementFontSize
ColumnElementFontSizeUnit
See also
Attribute getter: getColumnElementFontSizeUnit
Attribute setter: setColumnElementFontSizeUnit
CloseFontSize
See also
Attribute getter: getCloseFontSize
Attribute setter: setCloseFontSize
846 Version: 2.5.1 TE2000

CloseFontSizeUnit
See also
Attribute getter: getCloseFontSizeUnit
Attribute setter: setCloseFontSizeUnit
ShowIconsMobile
Defines whether the icons are displayed in the mobile view.
See also
Attribute getter: getShowIconsMobile
Attribute setter: setShowIconsMobile
AutoCollapseElement
Defines whether menu items are closed when another menu item is selected.
See also
Attribute getter: getAutoCollapseElements
Attribute setter: setAutoCollapseElements
AutoExpandElements
Defines whether all elements are expanded after opening the menu.
TE2000 Version: 2.5.1 847

See also
Attribute getter: getAutoExpandElements
Attribute setter: setAutoExpandElements
AutoCloseMenu
Defines whether the menu is closed when the user interacts with controls outside the menu.
See also
Attribute getter: getAutoCloseMenu
Attribute setter: setAutoCloseMenu
CloseText
The text of the close button.
See also
Attribute getter: getCloseText
Attribute setter: setCloseText
CloseImage
See also
Attribute getter: getCloseImage
848 Version: 2.5.1 TE2000

Attribute setter: setCloseImage
SubMenuImage
See also
Attribute getter: getSubMenuImage
Attribute setter: setSubMenuImage
MenuBackgroundColor
Definition of the background color of the menu.
See also
Attribute getter: getMenuBackgroundColor
Attribute setter: setMenuBackgroundColor
HeightMode
Selection of the method of calculating the height.
See also
TE2000 Version: 2.5.1 849

5.11 Functions
Functions enable various logical operations to be executed on the client side. The functions can be used in
the Properties window [} 58], in the Actions and Conditions Editor [} 59] or in the Code Behind [} 1209].
To use a function in Code Behind, a reference to the function must be obtained via the API function
TcHmi.Functions.getFunction. This reference can then be called up directly.
In addition to the functions supplied, it is possible to implement your own logical operations in JavaScript
[} 1213].
5.11.1 Binding
5.11.1.1 CheckBinding
function CheckBinding(control: TcHmi.Controls.System.baseTcHmiControl, propertyName: string):
boolean
The CheckBinding function checks whether a binding to a control property exists. Refer also to the
description page for the corresponding API function.
Parameter
control TcHmi.Controls.System.baseTcHm The control containing the property
iControl to be checked.
propertyName string The name of the control property to
be checked.
Return value
Type Description
boolean Values:
• true: A binding to the control property exists.
• false: A binding to the control property does not
exist.
NuGet package: Beckhoff.TwinCAT.HMI.Functions
Note: Available since version 1.10.
5.11.1.2 CheckBindingEx
function CheckBindingEx(control: TcHmi.Controls.System.baseTcHmiControl, propertyName: string,
symbol: TcHmi.Symbol | null): boolean
The CheckBindingEx function checks whether a binding of a certain symbol to a control property exists.
850 Version: 2.5.1 TE2000

Parameter
control TcHmi.Controls.System.baseTcHm The control containing the property
iControl to be checked.
propertyName string The name of the control property to
be checked.
symbol Symbol The symbol for which the binding to
a control property is to be checked.
Return value
Type Description
boolean Values:
• true: A binding of the symbol to the control
property exists.
• false: A binding of the symbol to the control
property does not exist.
5.11.1.3 CreateBinding
function CreateBinding(control: TcHmi.Controls.System.baseTcHmiControl, propertyName: string,
symbol: TcHmi.Symbol | null): void
The CreateBinding function creates a binding on a control property. Refer also to the description page for the
corresponding API function.
Parameter
control TcHmi.Controls.System.baseTcHm The control that is to be linked.
iControl
propertyName string The name of the property on the
control.
symbol Symbol Binding source
Return value
Type Description
void No return value
5.11.1.4 RemoveBinding
function RemoveBinding(control: TcHmi.Controls.System.baseTcHmiControl, propertyName: string): void
The RemoveBinding function deletes a binding on a control property. Refer also to the description page for
the corresponding API function.
TE2000 Version: 2.5.1 851

Parameter
control TcHmi.Controls.System.baseTcHm The control that is to be changed.
iControl
propertyName string The name of the property on the
control.
Return value
Type Description
void No return value
5.11.2 Data Conversion
5.11.2.1 Concatenate
function Concatenate(...strings: string[])
The Concatenate function links several strings together.
Parameter
…strings [ Rest Parameter ] string[] Any number of strings that are to
be linked.
Return value
Type Description
string A string linked from the parameter values.
5.11.2.2 ConvertBooleanToEnum
function ConvertBooleanToEnum<T = any>(value: boolean, trueValue: T, falseValue: T)
The function ConvertBooleanToEnum converts a Boolean value to the value of an enumerator.
852 Version: 2.5.1 TE2000

Parameter
value boolean The Boolean value to be
converted. Only a binding [} 104]
makes sense at this point.
trueValue T The value to be returned if the
Boolean value is true.
falseValue T The value to be returned if the
Boolean value is false.
Return value
Type Description
T The value specified as trueValue or falseValue
depending on the Boolean parameter value.
5.11.2.3 ConvertBooleanToVisibility
function ConvertBooleanToVisibility(value: boolean, falseValue: 'Hidden' | 'Collapsed' = 'Hidden'):
Visibility
The function ConvertBooleanToVisibility converts a Boolean value to a value of the enumerator "Visibility
[} 711]".
Parameter
value boolean The Boolean value to be
converted. Only a binding [} 104]
makes sense at this point.
falseValue Visibility [} 711] The value specified as falseValue
depending on the Boolean
parameter value.
Return value
Type Description
Visibility [} 711] The visibility depending on the Boolean value.
5.11.2.4 Decrement
Note: Version 1.8
function Decrement(symbol: Symbol, minValue?: number): void
Note: Version 1.10
TE2000 Version: 2.5.1 853

function Decrement(ctx: Required<TcHmi.Context>, symbol: TcHmi.Symbol | null, minValue?: number |

null, stepWidth?: number | null): void
The Decrement function counts a numerical value in a binding downward in steps of a specified step size.
Parameter
ctx Required<TcHmi.Context> Context object
Note: Available since version 1.10 Does not need to be specified by
the user when used in a trigger or
function expression. In this case
the transfer and the evaluation is
done by the corresponding parser.
Is used by the caller to indicate
success or failure to the framework
during execution.
If the function is used directly in
JavaScript/TypeScript, the context
object must be passed in the call
and evaluated if necessary.
value Symbol The value to be decremented. The
value must be specified as a
binding [} 104] to a symbol.
minValue number A minimum value that may not be
undershot.
stepWidth number The step size with which the value
is to be decremented.
Return value
Type Description
void No return value.
5.11.2.5 GetElementByIndex
Note: Version 1.8
function GetElementByIndex<T>(array: T[] | string | null, arrayIndex: number | null): T | any
Note: Version 1.10

function GetElementByIndex(ctx: Required<TcHmi.Context>, arraySymbol: TcHmi.Symbol | null,
arrayIndex: number | null): void
The function GetElementByIndex returns the value of a certain array index of a binding.
854 Version: 2.5.1 TE2000

Parameter
during execution.
arraySymbol Note: Version 1.8 A binding to the symbol of an array.
T[] | string | null
Note: Version 1.10
Symbol
index number | null The index of the array for which the
value is to be returned.
Return value
Type Description
Note: Version 1.8 Note: Version 1.8
any The value that is stored in the position of the index in
Note: Version 1.10 the array.
void Note: Version 1.10

No return value.
The result or error information is communicated via
corresponding callback functions in the context
object.
5.11.2.6 Increment
Note: Version 1.8
function Increment(symbol: Symbol | undefined | null, maxValue?: number | null): void
Note: Version 1.10

function Increment(ctx: Required<TcHmi.Context>, symbol: TcHmi.Symbol<number> | null, maxValue?:
number | null, stepWidth?: number | null): void
The Increment function counts a numerical value in a binding upward in steps of a specified step size.
TE2000 Version: 2.5.1 855

Parameter
during execution.
symbol Symbol The value to be incremented. The
value must be specified as a
binding [} 104] to a symbol.
maxValue number A maximum value that may not be
exceeded.
stepWidth number The step size with which the value
is to be incremented.
Return value
Type Description
5.11.2.7 SetElementByIndex
function SetElementByIndex(ctx: Required<TcHmi.Context>, arraySymbol: TcHmi.Symbol<any[]> | null,
arrayIndex: number | null, value: any): void
The function SetElementByIndex sets the value of a certain array index in a binding.
856 Version: 2.5.1 TE2000

Parameter
Does not need to be specified by
during execution.
arraySymbol Symbol A binding to the symbol of an array.
index number The index of the array for which the
value is to be set.
value any The value to be written in the
position of the array.
Return value
Type Description
5.11.2.8 ToDateString
function ToDateString(date: Date | any, locale?: string | null): string
The function ToDateString converts a date in accordance with a transferred localization into a string
containing the date.
Parameter
date any Text, numbers (milliseconds since
01/01/1970) or JavaScript date
object.
locale string The localization variable in the form
of a string. If this is not specified,
the currently active language
[} 928] will be used.
Return value
Type Description
string The date of the input value according to the
localization in the form of a string.
TE2000 Version: 2.5.1 857

5.11.2.9 ToDateTimeString
function ToDateTimeString(date: Date | any, locale?: string | null): string
The function ToDateTimeString converts a date in accordance with a transferred localization into a string
containing the date including the time.
Parameter
object.
Return value
Type Description
string The date with time of the input value according to the
5.11.2.10 ToLowerCase
function ToLowerCase(value: string | null): string | null
The function ToLowerCase converts all the letters in a string to lower-case letters.
Parameter
value string Any string.
Return value
Type Description
string | null Input string in lower case or null if no string was
passed.
5.11.2.11 ToTimeString
function ToTimeString(date: Date | any, locale?: string | null): string
858 Version: 2.5.1 TE2000

The function ToTimeString converts a date in accordance with a transferred localization into a string
containing the time.
Parameter
object.
Return value
Type Description
string The time of the input value according to the
5.11.2.12 ToUpperCase
function ToUpperCase(value: string): string | null
The function ToUpperCase converts all the letters in a string to upper-case letters.
Parameter
value string Any string or null if no string was
passed.
Return value
Type Description
string | null Input string in upper-case letters.
5.11.2.13 TrimToLength
function TrimToLength(value: string | null, trimToLength: number | string | null): string | null
The function TrimToLength shortens a string to a specified number of characters from left or right.
TE2000 Version: 2.5.1 859

Parameter
value string String to be shortened.
trimToLength number Number of characters to which the
string is to be shortened. Positive
values shorten the string from the
left, negative values from the right.
Return value
Type Description
string | null The truncated string or null if anything other than
string was passed.
5.11.3 Diagnostics
5.11.3.1 Log
function Log(level: string, message: string, ...optionalParameters: any[]): void
The Log function writes a message to the browser console.
Parameter
level string Values:
• Error
• Warning
• Info
• Debug
message string Message text
optionalParameters [ Optional, …any[] Additional parameters can be
Rest Parameter ] passed, which are displayed in the
browser console in the context of
the message.
Return value
Type Description
860 Version: 2.5.1 TE2000

5.11.4 Formatting
5.11.4.1 FormatString
function FormatString(formatString: string, ...args: any[]): string | null
The function FormatString formats a given string by replacing placeholders in the string by the values of the
symbols.
Parameter
formatString string A string with placeholders.
…args [ Rest Parameter ] any[] Any value used in a placeholder.
Return value
Type Description
string | null String in which the placeholders are replaced by
values of the symbols or null if anything other than
string is passed as formatString.
Placeholder
Example: {0|.1f}
Placeholder Description
{ Placeholder is initiated.
0 Index of the parameter (optional: without an index
iteration takes place in sequence).
| Separator.
+ If a + is specified here, the string is always assigned
a sign. Example: "+42" for the positive number 42.
Negative numbers always have a sign, of course.
.X Number of digits.
f Type description.
} End of the placeholder.
TE2000 Version: 2.5.1 861

Type description
Character Description
d Signed decimal integer
i Signed decimal integer
u Unsigned decimal integer
o Unsigned octal
x Unsigned hexadecimal integer
X Unsigned hexadecimal integer (upper case)
f Decimal floating point
e Scientific notation (mantissa/exponent), lower case
g Use the shortest representation: e or f
s String of characters
b Binary number
t true or false
T Type of the argument ('number', 'string', 'null' …)
v Primitive value of the specified argument
j JavaScript object or array as a JSON encoded string
Example
Input:
FormatString('Hello {1|.5s}. This is a floating point number - {0|.2f}. Two zeros are attached -
{03i} (3 digits in total).', 2, 'World123', 3);
Output:
"Hello World. This is a floating point number – 2.00. Two zeros are attached – 003 (3 digits in total)."
5.11.4.2 GaugeValueFormatter
function GaugeValueFormatter(value: number, maxDecimals = Infinity): string
The function GaugeValueFormatter rounds up a numerical value to a transferred number of decimal places.
Parameter
value number Value to be rounded up.
maxDecimals number Number of decimal places to which
the value is to be rounded.
Return value
Type Description
string The rounded value in the form of a string.
862 Version: 2.5.1 TE2000

5.11.5 Locale
5.11.5.1 GetLocale
function GetLocale(): string | undefined
The function GetLocale returns the currently active language of the client (with region, if available). Refer
also to the description page for the corresponding API function.
Parameter
- - -
Return value
Type Description
string | undefined Currently active language (e.g. "de-DE").
5.11.5.2 GetRegisteredLocales
function GetRegisteredLocales(): string[]
The function GetRegisteredLocales returns all registered languages (with region if available) of the project.
Refer also to the description page for the corresponding API function.
Parameter
- - -
Return value
Type Description
string[] An array with all registered languages of the project
in the form of a string.
5.11.5.3 SetLocale
function SetLocale(locale: string): void
The function SetLocale sets the active language in the client. Refer also to the description page for the
TE2000 Version: 2.5.1 863

Parameter
locale string A language registered in the
project.
Return value
Type Description
5.11.5.4 SetLocaleEx
function SetLocaleEx(ctx: Required<TcHmi.Context>, locale: string): void
The function SetLocaleEx sets the active language in the client. The function SetLocaleEx provides a context
parameter of type TcHmi.Context, which allows the framework to wait for the asynchronous signaling of the
end of the action when executing within triggers or function expressions.
Parameter
during execution.
locale string A language registered in the
project.
Return value
Type Description
864 Version: 2.5.1 TE2000

5.11.6 Recipe
5.11.6.1 ActivateRecipe
function ActivateRecipe(ctx: Required<TcHmi.Context>, recipeReference: string): void
The ActivateRecipe function enables the recipe defined in the parameter when the function is executed.
Parameter
during execution.
recipeReference String The reference or the recipe (path
plus name) that is to be activated.
Return value
Type Description
5.11.6.2 TeachRecipe
function TeachRecipe(ctx: Required<TcHmi.Context>, recipeReference: string): void
The Teach function reads the current values of the symbols of a recipe from the target and stores them in
this recipe.
TE2000 Version: 2.5.1 865

Parameter
during execution.
recipeReference string The reference of the recipe (path
plus name) in which the current
values of the target are to be read
and stored.
Return value
Type Description
5.11.6.3 TeachAsNewRecipe
function TeachAsNewRecipe(ctx: Required<TcHmi.Context>, recipeReference: string, newRecipeName:
string, newRecipePath: string)
The TeachAsNew function reads the current values of the symbols of a defined recipe from the target and
stores them in a new recipe.
866 Version: 2.5.1 TE2000

Parameter
during execution.
recipeReference string The reference of the recipe (path
plus name) whose current symbol
values are to be read from the
target.
Examples:
‚MyRecipe1‘
‚MyFolder::MyRecipe2‘
newRecipeName string The name of the new recipe that is
to be created and in which the
values are to be stored.
If required, this name can already
contain the folder tree in which the
recipe is to be stored. Otherwise
the folder tree can be specified
under newRecipePath.
newRecipePath string The path under which the new
recipe is to be stored.
If this parameter is empty, the
recipe is created at the highest
folder level.
Example:
‚MyFolder‘
‚MyFolder1::MyFolder2‘
Return value
Type Description
TE2000 Version: 2.5.1 867

5.11.7 Theme
5.11.7.1 GetTheme
function GetTheme(): string
The function GetTheme returns the name of the active theme. Refer also to the description page for the
Parameter
- - -
Return value
Type Description
String Name of the active theme.
5.11.7.2 SetAttributeToThemeValue
function SetAttributeToThemeValue(control: TcHmi.Controls.System.baseTcHmiControl, propertyName:
string): void
The function SetAttributeToThemeValue sets an attribute of a control to the value of the active theme. In the
case of a change of theme, the value of the attribute is changed in accordance with the new active theme.
Parameter
control TcHmi.Controls.System.baseTcHm The control for which the attribute
iControl is to be set.
propertyName string Name of the attribute that is to be
set to the value of the active
theme.
Return value
Type Description
5.11.7.3 SetTheme
function SetTheme(themeName: string): void
The function SetTheme sets the active theme. Refer also to the description page for the corresponding API
function.
868 Version: 2.5.1 TE2000

Parameter
newTheme string Available theme that is to be set to
active.
Return value
Type Description
5.11.8 UserManagement
5.11.8.1 CheckAccess
function CheckAccess(tco: TcHmi.Controls.System.baseTcHmiControl, AccessRightToCheck: string):
boolean
The function CheckAccess checks whether the logged-in user has the right to access a control. Refer also to
the description page for the corresponding API function.
Parameter
tco TcHmi.Controls.System.baseTcHm The control for which the right is to
iControl be checked.
AccessRightToCheck string The right that is to be checked.
Return value
Type Description
boolean Values:
• true: The user has the right in question.
• false: The user does not have the right in question.
5.11.8.2 ForceLogout
function ForceLogout(username: string | null | undefined): boolean
The ForceLogout function logs out a specific user or all users on all client instances connected to the server.
TE2000 Version: 2.5.1 869

Parameter
username [ optional ] string | null | undefined The user name to be logged out on
all client instances connected to
the server.
If the parameter is not specified, all
users are logged out.
Return value
Type Description
boolean Returns false in case of error.
5.11.8.3 ForceLogoutEx
function ForceLogoutEx(ctx: Required<TcHmi.Context>, username: string | null | undefined)
The ForceLogoutEx function logs out a specific user or all users on all client instances connected to the
server. The function ForceLogoutEx provides a context parameter of type TcHmi.Context, which allows the
framework to wait for the asynchronous signaling of the end of the action when executing within triggers or
function expressions.
Parameter
during execution.
username [ optional ] string | null | undefined The user name to be logged out on
all client instances connected to
the server.
If the parameter is not specified, all
users are logged out.
Return value
Type Description
870 Version: 2.5.1 TE2000

5.11.8.4 GoToLoginPage
function GoToLoginPage(): boolean
The GoToLoginPage function calls the login page of the server without logging out the currently logged in
user. This makes it possible to change users.
Parameter
- - -
Return value
Type Description
boolean Returns false if it is not possible to switch to the login
page.
5.11.8.5 Login
function Login(username: string | null, password: string | null, persistent: boolean = true, reload:
boolean = true): boolean
The Login function logs a user into the server.
Parameter
username string User name
password string User password
persistent [ optional ] boolean Defines whether the login should
be persistent.
The default value is true.
reload [ optional ] boolean Defines whether a reload should
Note: Available since version 1.12 take place after the logout.
Return value
Type Description
TE2000 Version: 2.5.1 871

5.11.8.6 LoginEx
function LoginEx(ctx: Required<TcHmi.Context>, username: string | null, password: string | null,
persistent: boolean = true, reload: boolean = true)
The LoginEx function logs a user into the server. The function LoginEx provides a context parameter of type
TcHmi.Context, which allows the framework to wait for the asynchronous signaling of the end of the action
when executing within triggers or function expressions.
Parameter
during execution.
username string User name
password string User password
persistent [ optional ] boolean Defines whether the login should
be persistent.
Note: Available since version 1.12 take place after the logout.
Return value
Type Description
5.11.8.7 Logout
function Logout(reload: boolean = true): boolean
The function Logout logs the current user out of the server.
872 Version: 2.5.1 TE2000

Parameter
Note: Available from version 1.12 take place after the logout.
Return value
Type Description
Note: Available from version 1.8.
5.11.8.8 LogoutEx
function LogoutEx(ctx: Required<TcHmi.Context>, reload: boolean = true)
The function LogoutEx logs the current user out of the server. The function LogoutEx provides a context
parameter of type TcHmi.Context, which allows the framework to wait for the asynchronous signaling of the
end of the action when executing within triggers or function expressions.
Parameter
during execution.
take place after the logout.
Return value
Type Description
Note: Available from version 1.12.
TE2000 Version: 2.5.1 873

5.12 Publishing
So that a TwinCAT HMI project can be requested from a TE2000 HMI server, it must be transferred to the
server.
1. Open the Publish dialog via the context menu or the Visual Studio menu (TwinCAT HMI / Publish to
TwinCAT HMI Server).
2. When executing for the first time, create a Publish profile that you can use again later.
874 Version: 2.5.1 TE2000

3. Enter the IP address or the host name as well as the port of the TwinCAT HMI server. Alternatively you
can perform a broadcast search using the button and find all available HMI servers in the local
network (the administrator password must be set on the server via the Config page). The project can be
transferred by HTTP (default setting: port 1010) and HTTPS (default setting: 1020).
TE2000 Version: 2.5.1 875

4. Select the server configuration that you wish to transfer to the target system.
876 Version: 2.5.1 TE2000

5. Conclude the procedure by clicking on Publish.
ð The Visual Studio output window informs you about the course of the procedure.
5.12.1 Autostart Server

The TwinCAT HMI Server can optionally be started automatically when the operating system is started.
Server as process
In versions 1.8 and 1.10 [} 19], the TF2000 HMI Server starts as a process on the operating system.
1. Open the Start menu and copy the link from the following folder:
C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Beckhoff\TF2000 HMI Server
TE2000 Version: 2.5.1 877

2. Open the TwinCAT Autostart folder and place the link there:
C:\TwinCAT\3.1\Target\StartUp
ð The server starts automatically with the next system startup.
5.12.2 Autostart Client

The client is any HTML5-capable web browser. An overview of the supported versions can be found in the
system requirements [} 18]. The browsers can be started automatically when the operating system is started.
Various options are available for this:
Systems with TwinCAT:
If the browser is located on a system on which TwinCAT is installed, the browser can be started via the
TwinCAT Autostart folder. To do this, open the TwinCAT Autostart folder:
C:\TwinCAT\3.1\Target\StartUp
You can then place the link of your browser there:
Systems without TwinCAT
If the browser is located on a system which only functions as a client and on which TwinCAT is not installed,
you can use the startup folder of the Windows user. To do this, copy the link of your browser into this folder.
You open the startup folder by entering the command "shell:startup" under "Run":
878 Version: 2.5.1 TE2000

You can then place the link of your browser there:
Set up full screen mode
Some browsers support starting in full screen mode (kiosk mode), which makes it possible to hide the
underlying operating system. The kiosk mode is set differently depending on the browser.
In the following, the configuration of the kiosk mode is explained using the "Google Chrome" browser as an
example. With this browser, the kiosk mode can be set via startup parameters.
1. Open the link properties.
TE2000 Version: 2.5.1 879

2. In the Target line you can add optional parameters at the end:
In addition to the kiosk mode, further parameters can be set that load different configurations in the browser.
For the browser "Google Chrome" there are the following relevant parameters:
Parameter Description
--kiosk https://ip-of-hmi-server:1020 Start kiosk mode. The URL can load any page (in this
case the HMI).
--disable-pinch Disable zoom in browser.
--overscroll-history-navigation=0 Disable wipe navigation of the browser.
--incognito Start incognito mode of the browser.
The parameters can be combined with each other, for example:

chrome.exe –kiosk https://ip-of-hmi-server:1020 –-incognito --disable-pinch --overscroll-history-
navigation=0
5.13 Server configuration

The configuration of the server and the configuration of the extensions can be managed on the configuration
page of the TwinCAT HMI Server. The configuration page of the TwinCAT HMI Server can be opened by
double-clicking the extension node in the Solution Explorer. Alternatively you can carry out the configuration
directly on the configuration page of the server. Open it via the systray icon of the TwinCAT HMI Server by
right-clicking on the "Config" entry.
880 Version: 2.5.1 TE2000

The server can manage several configurations in order, for example, to configure different controllers. You
can add new configurations via "Create new configuration".
The configuration, which is transferred to the remote server, can be selected during the publish process.
[} 874] Two configurations are supplied by default:
• Default Configuration: Local configuration that is loaded from the Engineering Server (valid in LiveView
[} 72] and when transferred to the Engineering Server).
• Remote configuration: Configuration that is transferred to the remote server when publishing.
5.14 Gallery Explorer

In the Galley Explorer you can find predefined graphics that are supplied with the TwinCAT HMI. You can
add them directly to the graphic editor or to the project tree by drag-and-drop.
TE2000 Version: 2.5.1 881

5.15 TwinCAT HMI Toolbar

The TwinCAT HMI Engineering supplies its own toolbar for Visual Studio that offers fast access to important
functions. You can activate the toolbar in Visual Studio under View\Toolbars.
882 Version: 2.5.1 TE2000

The toolbar provides the following options:
Publish to HMI server
Edit publishing profile
Cancel publishing
Bring to front
Send to back
Bring one level forward
Send one level backward
TE2000 Version: 2.5.1 883

Same height
Same width
Insert horizontal intermediate space
Insert vertical intermediate space
Swap
Align left
Align horizontally central
Align right
Align top
Align vertically central
Align bottom
Show developer tools
Manage TwinCAT HMI packages
Toggle Highlight Container visibility
Toggle LiveView's mode
5.16 TwinCAT HMI Items

Further elements can be added to a TwinCAT HMI project via the context menu in the Solution Explorer.
884 Version: 2.5.1 TE2000

The following elements can be chosen:
TE2000 Version: 2.5.1 885

Start point for creating individual cascading style sheets.
CodeBehind scripts (JavaScript).
Content [} 728], a page that can be used and switched within regions [} 755].
Reusable functions that are usable in the client.
A localization file for a further language.
A User Control [} 763] can be instanced multiple times and each has a
unique ID. All User Controls are listed in the Toolbox.
A view [} 775] can be used as an entry page, e.g. configured as a start page
and a further view.
886 Version: 2.5.1 TE2000

User management
6 User management
User management in TwinCAT HMI is an authorization system for controlling user group-specific access at
control, symbol or file level.
The use of the user management is optional and only works with active authentication.
Since user management only works when authentication is active, the configured functions are not
available in live view.
6.1 Users and user groups

The TwinCAT HMI User Management is based on a user group concept. The user groups are managed
centrally in the TwinCAT HMI Server (TcHmiSrv). The actual users, who may be members of one or more
user groups, are made available as a data source by the server extension TcHmiUsermanagement. The
creation and editing of users and user groups takes place within the development environment via the
TwinCAT HMI Configuration window under the category Users and Groups, within which the individual
Users and Groups are listed.
6.1.1 Create new user

1. Select Create new user with a right mouse click on Users, or the Create User function with a left
mouse click.
TE2000 Version: 2.5.1 887

User management
2. Configure the user via the following properties in the Create / edit user dialog.
• User name: Unique name of the user.

• Password: Password of the new user for the login. Empty passwords are not allowed.
• Confirm Password: Confirm password.
• Authenticate by client certificate: Selection of a client certificate, [} 910] if available, which is
assigned to the user. This makes it possible for a user to log on using a client certificate.
• Auth Extension: Server extension that manages the authentication of the user. By default, the
TcHmiUserManagement extension is selected. The developer can develop his own authentication
extension to provide his own user management.
• Member of the following groups: Group membership of the user. A selection from the existing
groups is possible. A user can be a member of several groups. By default, the user is a member of the
system group "__SystemUsers".
• Language: Language of the user. The language can be taken from the project properties or the
browser default or can be defined individually.
888 Version: 2.5.1 TE2000

User management
• Time zone: Time zone in which the user is located. By assigning the time zone, it is possible to
localize the times displayed on the HMI. The time zone can be taken from the project properties or the
browser default or can be defined individually.
• Time format locale: Time format to be displayed to the user. By assigning the time format, it is
possible to format the times displayed on the HMI. The time format can be taken from the project
properties or the browser default or can be defined individually.
• Auto-Logout Time: Time of inactivity of the user after which the user is automatically logged out on
the HMI (client side) without any user interaction.
Confirm your settings with OK.
The settings "Authenticate by client certificate", "Auth Extension", "Time zone" and "Time format lo-
cal" are available as of version 1.10.1336.0
6.1.2 Changing user properties

1. Double-click on the user whose properties you wish to change or right-click on Edit user.
2. Make the desired changes (see Create new user [} 887]).
6.1.3 Activate auto-login user

Enabling the auto-login function allows a specific user to log in automatically without authentication. This
skips the login page and logs in a user with preconfigured rights. If the auto-login function is activated, the
auto-login user cannot be logged out. As soon as another user is logged out, the auto-login user is logged in
automatically.
The Auto Login function is activated in the TwinCAT HMI Configuration window under the Users item. To do
this, the checkbox for a user must be set. The auto login function can only be activated for one user and not
for several users at the same time.
TE2000 Version: 2.5.1 889

User management
Available since version 1.10.1171.142
See also
GoToLoginPage [} 871]
6.1.4 Deleting a user

1. Select Delete User by right-clicking on the user to be deleted.
6.1.5 Creating a new user group

1. Select Add new group by right-clicking on Groups, or the Create new group function with a left
mouse click.
890 Version: 2.5.1 TE2000

User management
2. Configure the user group with the following properties in the associated dialog:
• Group name: Unique name of the group.

• Symbol Access: Standard access (None, Read, Write, Read/Write) to symbols.
• File Access: Standard access (None, Read, Write, Read/Write) to files.
• Status: Group availability (Enabled, Disabled).
• Members: Group members (selection of the existing users).
Confirm your settings with OK.
6.1.6 Changing user group properties

1. Call the dialog by double-clicking on the user group whose properties you wish to change, or by a right
mouse click on it via Edit group.
2. Make the desired changes (see Creating a new user group [} 890]).
TE2000 Version: 2.5.1 891

User management
6.1.7 Deleting a user group

1. Select Delete Group by right-clicking on the user group to be deleted.
6.1.8 System users and system user groups

The following users and user groups exist as standard in the system and cannot be deleted:
System user
__SystemAdministrator: System administrator and member of the group "__Systemadministrators".
__SystemGuest: Guest who is automatically active if no user is logged in and is a member of the group
"__SystemGuests".
System user groups
__SystemAdministrators: System administrator group with unrestricted rights and the following default
settings:
• Symbol Access: Read/Write
• File Access: Read/Write
• Enabled: True
• Members: __SystemAdministrator
__SystemGuests: Guest group with restricted rights, which allow only the login function, and the following
default settings:
• Symbol Access: None
• File Access: None
• Enabled: True
• Members: __SystemGuest
__SystemUsers: User group with restricted rights that allow access to all system server symbols required at
runtime. The user group has the following default settings:
• Symbol Access: None
• File Access: Read/Write
• Enabled: True
• Members: Every user except __SystemAdministrator or __SystemGuest
By default, all new users are members of the group __SystemUsers as a minimum. This behavior can be
changed on the server configuration page under "TcHmiSrv/Security" under the name "Default Usergroup".
The system users and system user groups are visible and configurable only in Advanced Mode. Do
not change any settings in the system user groups.
892 Version: 2.5.1 TE2000

User management
6.2 Permissions system

You can issue user group-specific permissions at three levels in the permissions system of the TwinCAT HMI
User Management.
1. The control level [} 893] represents the client-side permissions system of the TwinCAT HMI Frame-
work. This is a manipulation of the user interface through the hiding of controls or the deactivation of
their functions, depending on which group(s) the logged-in user belongs to.
2. The symbol level [} 897] controls the user group-specific access to server symbols (mapped symbols).
3. The file level [} 899] enables the user group-specific access to the files made available by the Twin-
CAT HMI Server.
While level one is purely a manipulation of the user interface on the client side, the second and third
levels offer real data security on the server side.
In order to be able to configure the rights of the system user groups at the individual levels, you
have to activate Advanced Mode in the TwinCAT HMI Configuration window.
6.2.1 Control level

The control level represents the client-side permissions system. A control has defined access methods that
can be permitted or not permitted for the different user groups. Each control has at least the default access
methods "Observe" and "Operate".
"Observe" describes the general observability of the control and thus its visibility to the user. If this access
method is not permitted for the user group of the logged-in user, the control is not visible. This also applies to
all child controls of the control, if there are any.
"Operate" represents the general operability of the control. If this access method is not permitted for the user
group of the logged-in user, then the control is displayed as deactivated and no control events that could be
initiated by the user (operator events) are initiated.
The access methods are configured in the Properties window (Configuring control access [} 893]).
The access methods of a user control can be extended via special access methods, so-called virtual
permissions (Defining and using virtual permissions of a user control [} 896]).
6.2.1.1 Configuring control access

1. Select the control in the designer.
2. Open the Show Permissions tab in the Properties.
3. Configure the desired permissions of the individual user groups; the following options are available for
this:
Allow: The access method is permitted for the user group.
TE2000 Version: 2.5.1 893

User management
Disallow: The access method is not permitted for the user group.
Inherit: The permission of the user group is derived from the higher-level parent control (container
control: View, Content, User Control, Container, Region or User Control Host).
Special cases
Access methods of a view
Operate and Observe are permitted for a view as standard (default = Allow). Since the view –as the entry
point to the HMI application –is always the highest container control, the Inherit option is not available.
User is a member of several user groups

The following rules apply if the user is a member of several user groups:
• If Allow is configured for at least one user group, the access method is permitted for the user (Allow).
• If Disallow is configured for at least one user group and Allow is not configured for any user group, the
access method is not permitted for the user (Disallow).
894 Version: 2.5.1 TE2000

User management
• If Inherit is configured for all user groups, the permission is derived from the higher-level container
control (Inherit).
Inherit with other access rights
Apart from Operate and Observe, a control can define other access rights [} 1295] (for example, "viewDetails
[} 286]" with EventGrid). Here too, the rights setting of the respective level is checked starting from the
respective control. If a control has defined Allow or Disallow here, then the user (as described above) has
the configured right. If Inherit is defined here, the higher-level parent control is queried for an explicit setting.
It can also be the case that this higher-level parent control does not know the access right. For example, a
fictitious right "configure" is discussed here that is not known to the View. It is assumed that a ControlTypeA
exists that knows "configure" and has set defaultValueInternal [} 1295] to true/Allow. ControlTypeB also
knows "configure", but has set defaultValueInternal [} 1295] to zero.
Sample 1:
• Desktop (TcHmiView) contains:
• MainContainer (TcHmiContainer) contains:
• myControlA (ControlTypeA) "configure" to Allow. Contains:
• myControlB (ControlTypeB) "configure" to Disallow.
Disallow acts on myControlB as its own configuration is checked first.
Sample 2:
• myControlA (ControlTypeA) "configure" to Allow. Contains:
• myControlB (ControlTypeB) "configure" to Inherit.
Allow acts on myControlB as its own configuration has no definition and the parent control has a direct
configuration.
Sample 3:
• myControlA (ControlTypeA) "configure" to Inherit. Contains:
• myControlB (ControlTypeB) "configure" to Inherit.
myControlB and the parent control have no configuration of their own and neither TcHmiContainer nor
TcHmiView know "configure". Therefore the defaultValueInternal [} 1295] of the ControlTypeA is used as it is
the last control in the parent-child relationship to which "configure" is known and which defines a value (true/
false or Allow/Disallow).
TE2000 Version: 2.5.1 895

User management
6.2.1.2 Defining and using virtual permissions of a user control
Defining virtual permissions

1. Open the parameter editor of the user control.
2. Under Virtual Permissions, add the desired additional user control access methods. The following
properties can be configured here:
Name: Unique name of the virtual permission
Description: Description used as a tooltip
Additional properties are displayed if you activate the Details checkbox:

Internal Name: Internal name used in HTML code (corresponds by default to "Display Name").
Display Name: Name displayed to the user in the engineering (corresponds by default to "Name").
Visible: Visibility of the virtual permission for the user in the engineering.
Default Value (Internal): Default return value of the virtual permission if the query of the current
permissions situation does not produce a return value.
3. Confirm your input with OK.
Using virtual permissions

4. Select a control inside the user control in the designer.
896 Version: 2.5.1 TE2000

User management
5. Assign a virtual permission for the desired access method to the selected control, which is to represent a
special access method of the user control to the outside.
The desired access method is now no longer configurable inside the user control. However, it is available for
configuration through the assignment of the virtual permissions as an additional access method of the user
control host when using the user control in the designer.
For the purpose of reusability of the user control, direct configuration of the access methods inside
a user control should be dispensed with. The independence of project-specific user groups is
achieved with this approach. Accordingly, the default access methods "Observe" and "Operate"
should be configured either with "Inherit" or as special access methods via the use of virtual permis-
sions. Special access methods of controls within a user control should always be fed to the outside
via the use of virtual permissions because the user control host only has the default access meth-
ods "Observe" and "Operate" as standard.
6.2.2 Symbol level

The symbol level represents the first part of the server-side permissions system. General and user group-
specific access methods, which apply when authentication is active, can be configured for every mapped
server symbol (Mapped Symbols). The configuration is done via the Permissions Management editor, which
can be called via the TwinCAT HMI Configuration window (Configuring symbol access [} 898]).
TE2000 Version: 2.5.1 897

User management
6.2.2.1 Configuring symbol access

1. Select the Symbol Permissions tab in the Permission Management editor.
2. Configure the following access methods for a mapped server symbol:

Symbol Access: Generally permitted symbol access method that is valid for each user group (default
value: Read/Write).
Group Symbol Access: Permitted default access method of a user group for all symbols (see also
Creating a new user group [} 890]).
Specific Group Symbol Access: Permitted user group-specific access method for the symbol that is
initially specified by the combination of Symbol Access and Group Symbol Access, whose
configurations mutually restrict each other.
However, it is also possible to overwrite this combination so that Symbol Access and Group Symbol
Access are invalid for this symbol for this user group.
3. Confirm your configuration with OK
898 Version: 2.5.1 TE2000

User management
Special cases
If a user is a member of several user groups, the combination of permitted access methods of the user
groups applies, which in this case mutually expand one another.
The permitted access methods for system server symbols can be configured in Advanced Mode.
6.2.3 File level

The file level represents the second part of the server-side permissions system. General and user group-
specific access methods, which apply when authentication is active, can be configured for every file and
every folder added to the TwinCAT HMI Server via the publishing. The configuration is done via the
Permissions Management editor, which can be called via the TwinCAT HMI Configuration (Configuring file
access [} 899]).
6.2.3.1 Configuring file access

1. Select the File and Folder Permissions tab in the Permission Management editor.
2. Configure the following access methods for a file (or a folder):

File Access: Generally permitted file access method that is valid for each user group (default value:
Read/Write).
Group File Access: Permitted default access method of a user group for all files (see also Creating a
new user group [} 890]).
TE2000 Version: 2.5.1 899

User management
Specific Group File Access: Permitted user group-specific access method for the file that is initially
specified by the combination of FileAccess and Group File Access, whose configurations mutually
restrict each other.
However, it is also possible to overwrite this combination so that File Access and Group File Access
are invalid for this file for this user group.
3. Confirm your configuration with OK
Special cases
If a user is a member of several user groups, the combination of permitted access methods of the user
groups applies, which in this case mutually expand one another.
6.3 Access management in the client

The system provides functions [} 850] for managing access in the client. The functions can be used to log
out a user and to check the user's current access. The functions are available in the development
environment in the Actions and Conditions Editor [} 59].
Check Access
Function [} 869] for querying whether a certain control access method is permitted for the logged-in user or
not.
GoToLoginPage
Function [} 871] to open the login page without logging out the currently logged in user. This allows a user
change to be performed without a previous logout of the user.
Logout
Function [} 872] for logging out the logged in user from the TwinCAT HMI server. The function loads the
login page after the logout.
900 Version: 2.5.1 TE2000

User management
6.4 Login page

If authentication is active, the login page (login dialog) is displayed before the start page is opened and
allows users to log in. Start page of the HMI loads only after successful authentication.
The login page can be replaced by a user-specific login dialog. This can be added to any TwinCAT HMI
project if required. The login page is edited in HTML, CSS and JavaScript. It is not possible to edit a login
page via the TwinCAT HMI Designer, as the framework is not yet loaded at the time of user login.
TE2000 Version: 2.5.1 901

User management
6.4.1 Add login page

A TwinCAT HMI project can contain several login pages. Only one login page can be active [} 903] per
project.
1. Right-click Add anywhere in the project, and then click New Item.
902 Version: 2.5.1 TE2000

User management
2. Select the LoginPage type and assign a name.
ð The login page can now be used in the project.
6.4.2 Switch login page

Several login pages can be managed within one project. Only one login page can be active per project. The
switching of the active login page takes place in the project properties.
To do this, select the project node in the Solution Explorer and open the Properties window [} 51]:
TE2000 Version: 2.5.1 903

User management
The "Default" entry displays the standard login page of the TwinCAT HMI.
6.4.3 Edit login page

The creation of a login page takes place within an HTML file with HTML, CSS and JavaScript. The template
contained in the TwinCAT HMI represents an exemplary login page and can be adapted and modified as
required. The comments in the template serve as support.
A login page is an HTML page with the following structure:

• Head tag: Here you can specify the title of the login page, which is displayed in the browser window.
• Style tags: Here the appearance of the login page in CSS is described.
• Body tag: The structure of the login page in HTML is described here.
• Script tags: Here the logic of the login page is implemented in JavaScript.
6.4.3.1 Login
The login command enables a user to log in to the TwinCAT HMI server and is sent to the server as a
WebSocket request in JSON format. If the authentication data is valid, the server allows the login and calls
the start page of the HMI.
The WebSocket request must be structured as follows:
var message = {
"requestType": "ReadWrite",
"commands": [
{
"commandOptions": ["SendErrorMessage", "SendWriteValue"],
"symbol": "Login",
"writeValue":
{
"userName": username,
"password": password,
"persistent": stayLoggedIn
}
}
]
};
In the template you will find this WebSocket request in the function "Login" in line 350.
The base functionality of the requests to the server contained in the template should not be changed in order
to ensure proper functioning of the login page.
904 Version: 2.5.1 TE2000

User management
6.4.3.2 Include graphics

Graphics such as a company logo can also be used within a user-specific login page. The use of inline
graphics in Base64 format in the HTML file is recommended. The use of graphic resources outside the
HMTL file is also possible, but requires additional configuration in the server.
inline graphics
Within an HTML file, graphics can be integrated as Base64 strings. The Base64 string can be used directly
in HTML code or CSS code. With the user-specific login page, this has the advantage that no user rights
have to be configured for the "__SystemGuests [} 892]" group in the server.
An HTML image tag with a Base64 string as source is structured as follows:

<img src=”data:[mime type];[charset],[base64]”>
The "MIME-Type" specifies the original file format, the "Charset" the character encoding and "base64" the
data encoding. As an example of an SVG graphic:
<img src="data:image/svg+xml;base64,PD94bWwg…[rest of base64]"/>
The graphics can be encoded into a Base64 string via a Base64 Image Encoder. Encoding can be
performed using an online tool, for example.
A favicon can also be integrated into the HTML page as an inline graphic.
External resources
The integration of external graphics into the user-specific login page is possible if they are located within the
HMI project. First the graphic must be added to the project. The graphic can then be referenced within the
HTML file, for example within an HTML image tag:
<img src="manual_pressed.svg" />
Since no user is logged in to the HMI server at the time the login page is loaded, the rights of the
"__SystemGuests" group apply at this point in time. Therefore, this group must be granted explicit access to
the graphics to be used within the login page. Open the configuration page of the HMI server in the category
"General".
TE2000 Version: 2.5.1 905

User management
Open the configuration of the rights of the "_SystemGuests" group under "Usergroups".
Click "Add" under "Files".
906 Version: 2.5.1 TE2000

User management
Add the graphic with read/write permissions.
You can then use the graphic on the login page.
6.5 User administration in LiveView

User administration only works with active authentication. Authentication can only be enabled for a
standalone server to which the Publishing [} 874]. In LiveView [} 72] there is an option to simulate the user
administration. This allows all configured permissions to be tested in LiveView before the project is
transferred to a standalone server.
TE2000 Version: 2.5.1 907

User management
1. Open LiveView and click the lock icon in the header bar.
2. Initialize the engineering server with a password for the user __SystemAdministrator.
ð The user administration can now be used in LiveView.
908 Version: 2.5.1 TE2000

User management
You can also open the LiveView user administration simulation in a browser.
1. To do this, click on the corresponding entry in the dropdown list when selecting the browser:
2. A user can be logged out of the LiveView via a button in the HMI or the Logout button in the LiveView
header bar. This button logs out all users from all LiveView instances (if additional instances are open in
a browser window).
TE2000 Version: 2.5.1 909

User management
3. After a user logs out, the login page of the server is displayed. There you can then log in any user to test
the permission configuration.
ð The user administration can now be used in LiveView.
6.6 User management in the client

In addition to the configuration in the TwinCAT HMI Configuration window, the management (dynamic
creation) of users is also possible during runtime in the client. For example, it is possible to add new users to
the server at runtime, edit existing users (change password, change group membership) or remove them.
It is not possible to manage (dynamically create) groups at runtime. The groups must first be created in
engineering and the rights to the corresponding controls configured. If the rights of a user are to be changed,
the group membership of the user can be changed.
The administration at runtime in the client is made possible by the Framework API. This can be used in the
JavaScript code.
6.7 Client certificates

The client certificates allow the authentication to be restricted so that only certain clients that have the
certificate can access the server and thus the HMI. All other clients that do not have the certificate will not
have access to the server. A so-called client certificate, which can be generated and signed by TwinCAT
HMI in the engineering department, must be installed in the respective client. The server-side part of the
certificate is automatically stored as the remote terminal in the TwinCAT HMI server during generation. A
client certificate can optionally be assigned to a user so that the user is automatically logged in via the client
certificate.
910 Version: 2.5.1 TE2000

User management
The use of client certificates is optional.
The use of authentication via client certificates requires encrypted communication via HTTPS.
6.7.1 Creating a Client Certificate

The client certificates can be created and managed in the TwinCAT HMI Configuration window. [} 75]
1. Open the TwinCAT HMI Configuration window and select the "Client certificates" tab.
2. Double-click on the <create new client certificate> entry or right-click on the "Client certificates" tab
and select "Create new client certificate...".
TE2000 Version: 2.5.1 911

User management
3. In the dialog that appears, you can define the properties of the client certificate.
4. The name of the client certificate is required. All other parameters can be optionally specified for sign-
ing the certificate.
6.7.2 Assigning a Client Certificate

A client certificate can optionally be assigned to one or more users. This enables a user to log in
automatically using the client certificate.
1. Create [} 887] a new user or edit an existing user.

2. In the following dialog, the client certificate is selected for the user.
A client certificate can be assigned to multiple users. A maximum of one client certificate can be assigned to
a user.
912 Version: 2.5.1 TE2000

User management
6.7.3 Activating Client Certificates

Authentication via client certificates must be activated in the TwinCAT HMI server. You can make this setting
directly in the configuration of the engineering server and use a project publish [} 874] to transfer it to a
server on the target system. Alternatively, you can make the setting as required directly on the target system
at a server.
1. Open the configuration page of the TwinCAT HMI server.
Engineering server:
Open the "Server" node within the TwinCAT HMI project in Visual Studio. Then open the "Extensions"
node and double-click on the "TcHmiSrv" entry:
Server on the target system (TF2000 HMI Server):

Right-click on the SysTray icon of the TwinCAT HMI server:
Open the configuration page via the context menu by clicking on the entry "Config":
TE2000 Version: 2.5.1 913

User management
2. On the configuration page, click on the entry "TcHmiSrv" (1) and then go to the "Security" tab (2).
There you will find the entry "Only client certificates allowed to authenticate" (3).
3. Enable authentication using client certificates by setting the option to "true" (3). Confirm the action with
the button "Accept" (4).
4. Authentication using client certificates is active. If you have made the setting on the engineering
server, you can transfer [} 874] the project to a server on the target system.
5. The client certificates must be installed [} 914] in the clients that are to gain access to the system.
6.7.4 Installing the Client certificate

The client certificates can be installed in the clients that are to gain access to the system. First, the certificate
must be exported as a PFX file.
1. Open the TwinCAT HMI Configuration window [} 75] and select the category Client certificates.
914 Version: 2.5.1 TE2000

User management
2. Right-click on the desired certificate and select the entry Export PFX (client part) ...:
The exported certificate can then be installed on the target systems that are to authenticate themselves
using the certificate.
Installing the Client Certificate in a Browser
The following steps show the integration of a client certificate into a browser using the example of the
"Google Chrome" browser. Integration is performed in the same way with other browsers.
1. Copy the exported certificate to the target system.
2. Open the browser on the target system.
3. Open the settings of your browser.
4. Open the advanced settings and select Manage certificates.
5. Select the Import item:
TE2000 Version: 2.5.1 915

User management
6. Click Next in the following wizard:
916 Version: 2.5.1 TE2000

User management
7. Then click on Browse and select the certificate:
You may have to switch to the PFX format in the Browse dialog:
8. After selecting the certificate, click Next.
TE2000 Version: 2.5.1 917

User management
9. The following dialog can be confirmed without entering a password with the default settings by clicking
on Next:
918 Version: 2.5.1 TE2000

User management
10. Select the area Personal and click on Next:
TE2000 Version: 2.5.1 919

User management
11. Confirm the import by clicking on Finish:
ð This concludes the installation.
Open Client
Start the browser and open the HMI via the IP address of the server. When you access the server using a
client certificate for the first time, the dialog that offers the selection of a client certificate is opened in the
browser. Select your certificate there:
920 Version: 2.5.1 TE2000

User management
Access to the HMI is then granted. If the client certificate has been assigned to [} 912] a user, this user is
logged in automatically and the HMI is loaded. Otherwise you have to authenticate yourself with username
and password.
Communication with the server must be encrypted using HTTPS if you are using a client certificate.
Error handling
If you have already worked with client certificates before, it may happen that the browser skips the query for
a client certificate and access to the HMI is not granted. In this case, you can clear the browser cache and
restart the browser. The browser should then query the client certificate and access the HMI.
TE2000 Version: 2.5.1 921

Event system
7 Event system
The central Event System is integrated in the TwinCAT HMI server. It is possible to manage events from the
HMI server and its extensions. For the connection to the TwinCAT 3 EventLogger with local or remote real-
time systems, the EventLogger [} 922] extension can also be used. Prerequisite for this is the installation of
the EventLogger extension [} 922].
To display current or historical events, the EventGrid Control [} 924] and the EventLine Control can be used,
which can be configured flexibly.
7.1 TcHmiEventlogger extension

When creating a new TwinCAT HMI project in the version 1.10, the TcHmiEventLogger extension is also
loaded and is located in the project under the server node with the Extensions [} 880]. In version 1.12 this
must be installed via NuGet [} 966].
922 Version: 2.5.1 TE2000

Event system
Configuration
In the TwinCAT HMI Server configurations [} 880] the EventLogger extension can be configured. There you
can define the connections (Target Systems) with which the Engineering HMI Server (Publish Configuration:
Default) or the Remote HMI Server (Publish Configuration: Remote) communicates. By default, the extension
connects to the local TwinCAT 3 EventLogger (Local). Remote target systems can also be entered if the
ADS route is configured.
• Address: AmsNetId of the EventLogger target

• Enabled: Specifies whether the connection to the target should be enabled or disabled.
TE2000 Version: 2.5.1 923

Event system
• Add Target System: Adds another entry for an EventLogger target.

• Limit event count: Specifies how many events should initially be imported by the EventLogger. Active
alarms are always imported regardless of the limit.
Licensing
One target license is counted per EventLogger. If an ADS connection is also configured with the same NetId,
only one target license is counted.
7.2 Event Grid Control

The Event Grid Control is a control for the tabular display of alarms and messages. It automatically displays
the alarms and messages of the target systems addressed in the event logger extension. Alarms can be
confirmed directly in the control.
The Event Grid Control is located in the Toolbox under the category Beckhoff, from where you can insert it
into an HMI page by drag-and-drop.
Apart from the tabular display of the alarms and messages, the control offers various configuration options in
the engineering and during the runtime in the browser.
Detailed view
A detailed view can be displayed for each message and alarm in the Event Grid. The detailed view is opened
by selecting a row in the Event Grid and double-clicking on the row. The detailed view provides additional
information about the event.
924 Version: 2.5.1 TE2000

Event system
Filter
Filters enable the display of alarms and messages according to certain criteria. It is possible, for example, to
display only active alarms or to filter according to a certain time period. The filters can be configured under
Filter [} 276] in the control's properties.
You can switch between different filters at runtime by calling a WriteToSymbol [} 63] for the filter of the Event
Grid. Alternatively, you can use various filter settings via the control's menu bar [} 287].
Columns
The configuration of the columns defines which columns are displayed in the Event Grid Control. By default
the type (alarm or message), the severity, the timestamp of the input and the associated text are displayed.
Further columns such as the time of the confirmation can be configured in the control's properties [} 277].
The settings apply to all clients.
There is an option at runtime to change the columns displayed per client. To do this, open the column editor
from the menu bar [} 287]. The column editor automatically opens a popup with an overlay and positions
itself in the center of the view:
TE2000 Version: 2.5.1 925

Event system
Confirming an alarm
An alarm can be confirmed by selecting the row containing the alarm and clicking on the button Confirm
alarm (single check mark) in the menu bar [} 287].
If several alarms are active, there is an option to confirm all alarms simultaneously. To do this, click on the
button Confirm all alarms (two check marks) in the menu bar [} 287]. A popup with an overlay then opens
automatically and displays all active alarms. At this point the operator has the option to abort the dialog or to
confirm the active alarms.
Permissions
Within the context of an authorization system it may be useful to allow only certain operators to access the
Event Grid. In addition, individual operators may be assigned rights to confirm the events. Rights are
configured in TwinCAT HMI at two levels (see User Management [} 887]).
926 Version: 2.5.1 TE2000

Event system
At control level the configuration right (configuration at runtime) and the right to a detail view can be granted
[} 286] explicitly in addition to the standard rights for the Event Grid.
The right to confirm the alarms can be granted at symbol level. To do this, open the rights management
[} 897] in the expert view.
Further configuration options
Further configuration options for the Event Grid Control can be found here [} 270].
Example
An example of the use of the event logger with the Event Grid: Example [} 1328]
The example shows two different configuration options for the Event Grid and the associated PLC project, in
which example alarms and messages can be generated.
TE2000 Version: 2.5.1 927

Internationalization
8 Internationalization
Internationalization in TwinCAT HMI enables the management of languages and units and their switching in
the client. Furthermore, the administration of different time zones and time formats is supported.
8.1 Change the language

Language switching in TwinCAT HMI is implemented with keys, which are managed in language tables
(localization files). Any texts in different languages can be stored in the language table for a key.
In the Designer, [} 54] the keys are linked directly to the respective control properties. [} 58] The texts behind
the respective keys are resolved in the Designer directly in the currently active language.
Set active language
The active language can be set in engineering as follows:

• Project properties: The default language for the project can be set in the project properties. [} 51]
• User Configuration: The language per user can be set in the user configuration. [} 887] This setting
overrides the default language set in the project properties.
Manage language tables
The language tables (localization files) of a TwinCAT HMI project are managed in the Localization editor.
[} 102] Language tables can be added to the project as a new TwinCAT HMI item. [} 884]
Switch language in client
The active language can be switched at runtime in the client, regardless of which language settings have
been specified in the project properties and for the logged in user. The switchover at runtime is realized with
the function "SetLocale [} 863]", which can be used in the Actions & Conditions editor. [} 59]
8.2 Unit conversion

Unit switching in TwinCAT HMI enables the switching of the displayed units and the conversion of the
corresponding values depending on the language or a specific event.
Conversion of values
The conversion of the units is solved by functions [} 850]. A function is linked to the Control property in
[} 106] the properties window and returns the converted value. As a parameter value, the function receives
the output value that is present in a certain unit.
Within the function, the developer can convert [} 1218] the corresponding value (e.g. from a symbol in the
PLC) into the desired unit. The respective unit can be added to the converted value directly within the
function as a string or alternatively stored as a language key.
Switching units
The units can be switched depending on the language or any other event. To do this, another parameter is
passed to the function that contains the unit into which the value is to be converted. As soon as this
parameter changes, the function is automatically called again and the value is converted and returned
accordingly.
For example, pass an internal symbol [} 85] to the function that contains the unit into which the value is to be
converted. The unit can be written anywhere in the internal symbol. Possible scenarios are e.g:
928 Version: 2.5.1 TE2000

• "onLocaleChanged [} 97]": This global event is triggered as soon as a language is loaded. At this event
the unit can be written into the internal symbol according to the active language [} 863].
• Events: Depending on any event, [} 37] a unit can be written into the internal symbol. The event can be
triggered, for example, if a value in the PLC changes or the user has pressed a button on the user
interface.
8.3 Localization
Localization in TwinCAT HMI enables the management of different time zones and time formats. The server
is based on the UTC time. Some controls (for example, the Event Grid and the Trend Line Chart) require a
timestamp. To display the times on the client according to their region (with time offset), the time zone and
time format can be specified in the project properties or per user.
Setting in the project properties
The setting of the time zone and time format can be set for the project in the project properties [} 51].
Setting in the user properties
The time zone and time format settings can be set per user [} 887]. This setting overrides the setting in the
project properties when user authentication is active.
8.4 Keyboard layouts

The TwinCAT HMI offers different keyboard layouts for different countries and regions. Each layout is
available with or without numpad and with or without indirect input field. The compact versions of the
German and American keyboards are integrated as standard. These can be found in the project under the
folder KeyboardLayouts:
TE2000 Version: 2.5.1 929

1. To add more layouts to the project, right-click the KeyboardLayouts folder and click Add, New item
2. In the following dialog, select Keyboard Layout and confirm with OK:
The wizard for selecting a keyboard layout then opens. Here you can filter or search according to your
criteria. The wizard includes a tabular listing of the keyboard layouts shows the differences between them.
930 Version: 2.5.1 TE2000

3. You can select multiple layouts in the wizard using the checkbox. When you have made your selection,
confirm and exit the wizard by clicking Finish.
ð The keyboard layouts are then added to your project.
TE2000 Version: 2.5.1 931

4. To display the corresponding layout in the keyboard, open the Designer, select the keyboard and then
open the Properties window. There you will find the property Layout File:
932 Version: 2.5.1 TE2000

5. Click the button to open the following dialog. It contains a selection of all layout files available in the
project. Select the desired layout and click OK.
ð The keyboard now displays the selected layout.
The keyboard layout can also be switched dynamically at runtime using the Actions and Conditions Editor
[} 59].
TE2000 Version: 2.5.1 933

Themes
9 Themes
The theme system allows you to switch the design of all elements. The theme can be switched during
runtime per client or globally in the project properties. Only one theme can be active at a time (similar to
language switching [} 928]). A theme can change the appearance of a control (e.g. Top [} 697], Left [} 697],
Width [} 698], Height [} 699], BackgroundColor [} 705] etc.). Besides the appearance of the control, all
control attributes [} 109] can be changed.
A theme can be created via the integrated theme editor or directly as a CSS file.
Available since version 1.10
9.1 Introduction
In a TwinCAT HMI project, the various themes are located under the Themes project node:
The theme node contains all themes defined for the project. For each theme there is a .theme file, which
contains the JSON definition of a theme and can be opened with the theme editor.
The default theme can be viewed and switched under the general project properties (click on the project
node and open the Properties window).
934 Version: 2.5.1 TE2000

Themes
For a new project, the base theme is included in the project and set as the default theme. The base theme
includes the font setting, which is included at project level regardless of the theme (see Fonts). In addition,
each TwinCAT HMI Control has a base theme, which describes the design of the control if this is not
explicitly overwritten by the developer in Engineering or by another theme.
Add a new theme by right-clicking on the Themes project node under New\Add New Item. In the dialog
select the type Theme and click Add.
The new theme contains the .theme file, which can be opened via the theme editor [} 936].
Under a theme, right-click Add Item to add more items.
TE2000 Version: 2.5.1 935

Themes
You have a choice between a Cascading Style Sheets file and a CSS control theme file (see CSS theme
[} 941]).
9.2 Theme editor

Open the theme editor by double-clicking on a. theme file in a theme. The following graphic shows the theme
editor, which is open for the base theme as an example.
936 Version: 2.5.1 TE2000

Themes
The theme editor is divided into the following areas:
1 Status information (Attribute Values for Control Type Button):

• Default theme: Here you can set the default theme (as in the project properties).
• View: Determines which attributes are displayed. In the standard view, only those attributes and
controls are displayed that are usually changed by the user. The Advanced view displays all controls
that can be changed and their attributes.
2 Theme Control Types and Classes: In this area you can select whether a Class theme [} 937] or a
Control theme [} 940] should be edited.
3 Themeable Attributes: In this area you select for which attribute a property is to be defined, depending on
the respective theme.
Only those attributes are displayed that can be changed via the theme.
4 Attribute Properties: In this area, the property for the respective attribute is set. Any number of properties
can be set for each Class theme and each Control theme.
9.2.1 Class theme

A class theme defines properties that apply to all controls assigned to this class, regardless of the control
type. A control class is defined at project level for each theme in the theme editor.
The following steps are required to create a class theme:
TE2000 Version: 2.5.1 937

Themes
1. Open a theme in the theme editor, right-click on Control Classes and select Create new Control Class:
2. Added control classes that do not yet contain definitions are initially grayed out in all themes:
938 Version: 2.5.1 TE2000

Themes
3. You can define any number of attribute properties for a control class. All control attributes are available:
4. The control class must be assigned to a control for the properties to apply to the control. Open the
Properties window for a control and select the entry ClassNames under Common:
TE2000 Version: 2.5.1 939

Themes
5. In the dialog, select the control classes that you want to add to the control. To do this, select the required
control class and press the arrow. Confirm the dialog with OK:
ð The control class is now assigned to the control, and the properties of the control class are used.
If you add several classes to a control and each class describes the same attributes, the properties
of the last class in the list apply (analogous to the class selectors in CSS).
To display the attribute properties of the class theme, the attribute must not be explicitly set at the control.
The control colors must be set to Theme.
9.2.2 Control theme

A control theme defines the properties for all instances of a control. The control theme is defined for each
theme in the theme editor [} 936] at project level.
940 Version: 2.5.1 TE2000

Themes
The following steps are required to create a Control theme:

1. First, the control type must be selected in the theme editor. In the upper screenshot the control type
Button was selected.
2. After selecting the control type, select the attribute from the respective changeable attributes.
3. Drag and drop the attribute onto the large area for the attribute properties in the center of the editor.
4. You can define any number of additional attributes for the control type.
Control types that contains defined attribute properties are shown in bold font. To change the attribute
properties for a control type at a later stage, select the respective control type again. The existing
configurations are then automatically displayed in the center of the theme editor. A property that has already
been configured can be deleted by selecting it and then pressing the Delete key.
To display the attribute properties of the Control theme, the attribute must not be explicitly set at the
control. The control colors must be set to Theme.
9.2.3 CSS theme

Beside the control theme and the class theme there is the possibility to add [} 934] any number of Cascading
Style Sheets files to a theme. A distinction is made between a normal CSS file and a CSS control theme file.
CSS files can also be added at project level, independent of a theme. These files define general properties
such as the inclusion of fonts.
Cascading Style Sheets file
A Cascading Style Sheets file allows the definition of any CSS properties for all elements contained in the
project (standard controls, framework controls etc.). In addition, specific CSS classes can be overwritten by a
control. All CSS selectors and CSS properties are available within a CSS file.
TE2000 Version: 2.5.1 941

Themes
If a class theme [} 937] is defined in the theme editor, it can be addressed in the CSS code via the class
name with the prefix tchmi-class-. Example:
tchmi-class-myclassthemeclass
CSS control theme file
A CSS control theme file can be used to replace specific CSS properties of the base theme. This is made
possible by importing all CSS properties of the control into the CSS control theme file of the project.
In the next window you have to select the control for which you want to create a CSS control theme file.
In this dialog you can select several controls for which a CSS control theme is to be generated. You must
also select from which theme the CSS control theme should be derived. If you select the Base theme, all
properties defined in the Base theme of the control are displayed.
Some controls contain further TwinCAT HMI Controls, e.g. the Event Grid. This is indicated in the dialog by a
note (upside down exclamation mark) after the control. If you want to overwrite all properties, you must also
include the CSS files of the child controls. For more detailed information about the dependencies between
the individual controls, see the documentation for each control.
The following example shows a CSS control theme file for the control TcHmiButton [} 168]:
/** Styles for the theme: Base */
/* Style for the main element */

.tchmi-button {
/* color gradient for default view */
background-image: linear-gradient(135deg, #eff1f3, #aeb9c2);
/* default color for button text */
942 Version: 2.5.1 TE2000

Themes
color: #4794da;
/* default box shadow */
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.6);
}
/* class down will be set/unset in the control on mouse/touch down */

.tchmi-button.down {
/* another color gradient */
background-image: linear-gradient(135deg, #aeb9c2, #eff1f3);
color: #000000;
box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.6);
}
9.3 Theme switching

You can switch the entire theme in the project properties, the theme editor or during runtime using a function.
Controls allow you to switch between different theme classes within a theme at runtime. Individual control
attributes can be assigned a theme property at runtime if they have been overwritten previously.
Switching in the properties
The default theme can be viewed and switched under the general project properties (click on the project
node and open the Properties window).
The theme editor [} 936] features the Default Theme property in the header bar at the top, irrespective of
the theme. There you can set the default theme in the same way as in the project properties.
Switching at runtime
The theme can be switched during runtime in the browser for each client [} 16]. To do this, an action must be
configured, e.g. on the .onPressed event of a button (so that the theme is switched when a specific button is
pressed). In the Actions and Conditions editor, the Theme folder contains the SetTheme function under
functions. Use drag & drop to add this function under the actions and enter the name of the theme by
selecting it in the combo box.
TE2000 Version: 2.5.1 943

Themes
Switching classes
In certain cases it is necessary to switch not the entire theme, but only the properties of a group of elements
or a particular control instance during runtime. This is possible if different theme classes [} 937] are defined
for the control. During runtime the attribute ClassNames [} 696] of the control is then set again. To do this, an
action must be configured at runtime, as for theme switching.
Switching from control attributes to a theme
A control attribute, which is set by an attribute definition directly at the control (Level 1 [} 945]), can be set to
the value of the currently active theme during runtime with the SetAttributeToThemeValue [} 868] function.
The value of the attribute is then changed according to the active theme each time the theme is switched.
944 Version: 2.5.1 TE2000

Themes
This function is used if individual control attributes are to be overwritten and then reset to the value
of a theme.
9.4 Concept
Theming in TwinCAT HMI distinguishes between control-based themes and class-based themes. A control
theme [} 940] specifies properties that apply to all instances of the respective control type. A class theme
[} 937] specifies properties that only apply to controls to which this class is assigned. You can assign several
classes to a control.
The theme properties can be set at different levels. Cascading Style Sheets use a comparable approach in
the sphere of web development, for example. The levels determine which property applies to an element if
different properties are defined for an element. The properties of the higher levels are overwritten by the
properties of the lower levels, if these are defined. The lowest level is level 1, which overwrites all properties
of the higher levels.
The theme system has the following levels:
TE2000 Version: 2.5.1 945

Themes
Level 1: Attribute level [} 947]
This level describes the appearance using attribute definitions at the control. In analogy to the CSS world,
this level would be a "style" attribute that is defined directly at the element.
Levels 2-4: attribute levels [} 947]
Like level 1, these levels describe the appearance using attribute definitions at the control. In analogy to the
CSS world, these levels would be external CSS files.
Level 5: attribute levels [} 947]
Like levels 1-4, this level describes the appearance using attribute definitions at the control. If nothing is
specified above levels 1-4, this defaultValueInternal value applies. In the analogy to the CSS world these
levels would be comparable to the font color black, for example, which applies even if nothing else has been
defined.
Levels 6-9: element levels [} 947]
These levels describe the appearance of a control using Cascading Style Sheets files if the appearance of a
control cannot be defined using an attribute or has not been defined using an attribute.
946 Version: 2.5.1 TE2000

Themes
9.4.1 Attribute levels

The attribute levels describe the appearance of the controls using attribute definitions.
Level 1: Attribute definition at the control at project level
The attribute definition on a control instance overwrites all properties defined by a theme. The attribute
definition at the control [} 109] is specified in the Properties window or directly in the HTML code. The
attribute definition at the control follows the usual procedure for overwriting the default properties of the base
theme if no other theme is defined.
This option has been available since version 1.8.
Level 2: Attribute definition in a class at project level
The attribute definition in a class [} 937] is specified in the theme editor of the respective theme at project
level. The class is added to a control as a property so that it automatically adopts the attribute definitions of
the class. The attribute definition in a class overwrites the attribute definition for a control type if both
definitions contain the same attribute.
Level 3: Attribute definition per control type at project level
The attribute definitions in a control type [} 940] are specified in the theme editor of the respective theme at
project level. The attribute definition in a control type applies to all instances of the respective control in the
project and is only overwritten by level 1 or level 2.
Level 4: Attribute definition per control type at control level
The attribute definition per control type at control level [} 1247] is specified directly in the directory of the
control and is defined by the control developer. The definition is the same as in level 2 within a .theme file.
For the standard controls, this property cannot be changed at the control level. The attribute definition per
control type at control level is therefore only available for framework control developers.
Level 5: Attribute definition through DefaultValueInternal at control level
The DefaultValueInternal [} 1240] defines the properties of an attribute independent of the active theme and is
used if the attribute is not overwritten by a theme at the higher levels.
In addition to the attribute definitions, it is possible to configure so-called ThemedResources at levels 2 to 4.

The ThemedResources are control properties that cannot be configured via the Properties window and can
only be changed via the theme system. An example of this are the knob definitions [} 421] at the
LinearGauge. The definition [} 1241] of ThemedResources is handled by the control developer.
9.4.2 Element levels

The element levels describe the appearance of the controls using Cascading Style Sheets files.
Level 6: Cascading Style Sheets per theme at project level
At project level it is possible to add, in addition to the .theme file of the theme editor, any number of CSS files
to a theme in the project (see Introduction [} 934]).
If a control is described in the theme editor and also in a CSS file within the theme, the definitions
within the theme editor (lower level) apply.
Level 7: Cascading Style Sheets at project level
At the project level, any number of Cascading Style Sheets files can be defined, independent of a theme.
This option has been available since version 1.8 under the name CSS-Behind file. The definitions within the
CSS file at the project level overwrite the CSS definitions at the control level and apply regardless of the
theme.
TE2000 Version: 2.5.1 947

Themes
Any CSS-Behind files at project level, which were already added to the project with version 1.8,
can still be used. When using different themes, it usually makes sense to assign this file to a spe-
cific theme.
Level 8: Cascading Style Sheets per theme at control level
Any number of Cascading Style Sheets files can be added to a theme at the control level. The CSS
definitions at control level describe the normal layout of all elements of a control. These properties apply if no
properties of the control are overwritten by a theme at the higher levels. Each control should implement at
least one theme called Base.
Level 9: Cascading Style Sheets at control level
At the control level, you can add any number of general Cascading Style Sheets files that describe the
properties of elements, regardless of the theme.
948 Version: 2.5.1 TE2000

Historical data
10 Historical data
Historical data are data from earlier times that are stored in a database.
Arbitrary server symbols of the TwinCAT HMI (e.g. numerical values from the PLC) can be historized by the
TcHmiSqliteHistorize extension. The extension saves the data in a ring buffer in an SQlite database. The
interval at which the data are saved in the database can be defined for each symbol. The data are saved in
the database only as long as the server is running. No historical data are written to the database if the server
is terminated.
The historical data are displayed in an included control – the Trend Line Chart. The control enables the
display of various historical data at the same time.
Available since version 1.10
10.1 TcHmiSqliteHistorize extension

When creating a new TwinCAT HMI project the TcHmiSqliteHistorize extension is also loaded and is located
in the project under the server node with the Extensions [} 880].
Configuration
The extension configuration page is opened with a double-click on the extension in the Solution. Alternatively
this can also be called via the server configuration page on the TcHmiSqliteHistorize tab.
TE2000 Version: 2.5.1 949

Historical data
On the configuration page you have the option to create new historized symbols and to define the storage
location of the database and all historized symbols. By default the historized symbols are stored on the local
hard drive. Alternatively they can be saved directly in the computer's RAM.
NOTE
Loss of data
If saved in the RAM, the data will be lost in the event of the PC being (unexpectedly) shut down.
Adding a historized symbol
In order for a symbol to be used as a historized symbol, it must be mapped [} 79]. A historized symbol can
be added in two different ways:
Configuration window (recommended):
A historized symbol can be added in the TwinCAT HMI Configuration [} 75] window, where a dialog is
available for adding the symbols. Instructions for this can be found here [} 81].
Extension configuration:
A new historized symbol can be added via the Add button on the configuration page of the
TcHmiSqliteHistorize extension. A dialog then opens for adding the symbol.
1. Linked Server Symbol: Mapped server symbol to be historized. All mapped server symbols are dis-
played in the combobox.
950 Version: 2.5.1 TE2000

Historical data
2. Interval Time: Interval at which the symbol is saved in the database.

3. Maximum number of Entries: Maximum number of entries in the ring memory of the database. On
the basis of the interval time and the maximum number of entries you can calculate the time period for
which the data can be stored. If the time period is to be extended you can extend the interval time or
increase the maximum number of entries.
4. Recording enabled: Defines whether the symbol is to be historized or whether historization is to be
deactivated.
5. Row limit for filter: Maximum number of data records that are filtered by the TcHmiSqliteHistorize ex-
tension and forwarded to the trendline chart.
Also see about this

2 Installing a NuGet package [} 966]
10.2 Trend Line Chart Control

The Trend Line Chart Control [} 635] enables the display of the historized symbols. The Trend Line Chart
Control can display several historized symbols simultaneously. In addition, time periods from the past can be
displayed and the data they contain enlarged and observed in detail.
The Trend Line Chart Control is located in the Toolbox under the category Beckhoff, from where you can
insert it into an HMI page by drag-and-drop.
The control offers various configuration options in the engineering and during the runtime in the browser.
Detailed view
If the live view in the Trend Line Chart has been paused, you can view individual data points with the aid of
the zoom functions. Hovering with the mouse over a data point will bring up a display of detailed information
on the time and data point.
TE2000 Version: 2.5.1 951

Historical data
Configuring axes
If you wish to display a historized symbol in the Trend Line Chart you must first carry out a Y-axis
configuration [} 644] for the symbol. Select the control and open the Properties window, where you select
the property Y Axis under the category Y Axis. An editor then opens that enables the configuration of a Y-
axis as well as the addition of further axes. Configure the axis [} 645] according to the settings that you need
for the historized symbol (e.g. min. and max value on the Y-axis).
Then confirm the dialog with OK and open the descriptions of the chart [} 644] (LineGraphDescriptions) in
the category Common in the Properties window, where the configured Y-axes are linked with the historized
symbols. Add a new description and select the historized symbol as well as the associated Y-axis. The
available historized symbols or Y-axes respectively are displayed in the comboboxes.
952 Version: 2.5.1 TE2000

Historical data
Confirm the dialog with OK. You can then start the LiveView or publish the project on a server and view the
historized symbol in the chart.
Configuring the interval time
You can configure the update rate of the control in the Trend Line Chart Control. The update rate can be
found under the entry Interval in the category Common. The update rate is specified in milliseconds.
If you have a historized symbol with an update rate of 100 ms, you should also set the update rate
of the control to 100 ms, as otherwise the control will be updated, for example, at 1-second inter-
vals, even though your data are already available every 100 ms.
Configuring the time period
The start and end times of the historized data displayed can be configured in the control's Properties
window. The times can be specified as time interval, point in time or "First or Latest" respectively.
TE2000 Version: 2.5.1 953

Historical data
In addition, it is possible to set the start and end times of the historized data displayed in the browser for
each client (see menu bar).
Menu bar
The Trend Line Chart Control has a menu bar that can optionally be displayed under the properties of the
control (ShowMenuBar in the category MenuBar). The menu bar enables the analysis of the data at runtime
in the browser:
1. Start time: Start time of the historized data displayed (First for the beginning of the recording).
2. Select time interval: Select the time interval for the start time (e.g. two minutes before the last value).
3. Select point in time: Select point in time for the start time (e.g. 6/16/2018 at 5:53 pm).
4. End time: End time of the historized data displayed (Latest for the last recorded value).
5. Select time interval: Select the time interval for the end time.
6. Select point in time: Select the point in time for the end time.
7. Start live view: The live view can be started after pausing the live view.
8. Pause live view: The live view can be paused in order to view data points in greater detail.
9. Shift data on the X-axis: The data displayed can be shifted on the X-axis if the live view has been
paused.
10. Shift data on the X and Y-axes: The data displayed can be shifted on all axes if the live view has
been paused.
11. Zoom X-axis: When this button has been activated you can zoom in on the X-axis with the aid of the
mouse.
12. Zoom X-Y-axis: When this button has been activated you can zoom in on both axis equally with the
aid of the mouse.
13. Reset Zoom: This button resets all zoom settings.
Further configuration options
Further configuration options for the Trend Line Chart Control can be found here [} 635].
954 Version: 2.5.1 TE2000

Historical data
Example
An example of the use of the historized symbols in interaction with the Trend Line Chart Control: Example
[} 1329].
The example shows two historized symbols (the associated TwinCAT project is included) and the associated
configuration in the Trend Line Chart Control.
Also see about this

2 TcHmiSqliteHistorize extension [} 949]
TE2000 Version: 2.5.1 955

Package management
11 Package management
The package management in TwinCAT HMI makes it possible to export TwinCAT HMI components such as
a Framework Control [} 1223] or a Server Extension [} 1202] into a package. These packages can easily be
installed in further TwinCAT HMI projects. This allows libraries to be created for HMI components to facilitate
exchange within a company.
Many extensions in TwinCAT HMI are themselves delivered as a package and can optionally be installed in
a TwinCAT HMI project.
11.1 Versions 1.8 and 1.10

The TwinCAT HMI package management available in versions 1.8 and 1.10 makes it possible to export a
TwinCAT HMI extensibility project as a TwinCAT HMI package (.tchmipkg). A TwinCAT HMI Package can be
installed as a reference in a TwinCAT HMI project.
TwinCAT HMI packages are supported up to and including version 1.10. The package management
in version 1.12 is based on NuGet as package management system [} 965]. Legacy support for the
TwinCAT HMI packages is also available in version 1.12.
956 Version: 2.5.1 TE2000

Package management
11.1.1 Creating a package

1. By means of a right mouse click on the uppermost node of the TwinCAT HMI extensibility project, select
Create TwinCAT HMI Package.
TE2000 Version: 2.5.1 957

Package management
2. Assign a version. (The name is not editable as it is assigned via the project name).
3. Select Next.
958 Version: 2.5.1 TE2000

Package management
4. Select all the project files that the package is to contain.
5. Optionally, select an Industrial Field for the package and specify the repository for the package. The
following options are available for this:
Export to local repository: Save in C:\TwinCAT\Functions\TE2000-HMI-Engineering\References
TE2000 Version: 2.5.1 959

Package management
Export to project directory: Save in the project directory

Export to specific directory: Save via a specific path (selectable via Select target directory)
ð The creation of the package is concluded by actuating Finish.
To provide the package with further metadata (e.g. author, description), edit the file Manifest.json in
the associated TwinCAT HMI extensibility project.
960 Version: 2.5.1 TE2000

Package management
11.1.2 Installing a package

1. Open the Packages window by right-clicking on References Manage TwinCAT HMI Packages.
2. Select the package that you wish to install. The following sources are available for this:
Solution – Repository: Local repository (under C:\TwinCAT\Functions\TE2000-HMI-
Engineering\References)
Solution – Projects: List of packages within the Solution
TE2000 Version: 2.5.1 961

Package management
Browse – Current: Option to add a package by Browse.
3. Select Install to install the package.
962 Version: 2.5.1 TE2000

Package management
ð The package contents are now available for use in the TwinCAT HMI project – framework controls inside
the Toolbox, server extension in the Server Extensions area.
The Install option is only available in case the Package does not auto-install and another version of
this package is not installed.
In order to be able to save a package without an associated TwinCAT HMI extensibility project in
the repository, it must be saved manually in C:\TwinCAT\Functions\TE2000-HMI-Engineering\Refer-
ences.
11.1.3 Uninstalling a package

1. Open the Packages window by right-clicking on References Manage TwinCAT HMI Packages.
2. Select the package that you wish to uninstall. The following sources are available for this:
Solution – Repository: Local repository (under C:\TwinCAT\Functions\TE2000-HMI-
Engineering\References)
TE2000 Version: 2.5.1 963

Package management
Solution – Projects: List of packages within the Solution
Browse – Current: List of packages that were added by Browse.
964 Version: 2.5.1 TE2000

Package management
3. Select Uninstall to uninstall the package.
ð The package contents are no longer available for use in the TwinCAT HMI project.
If no updates of the package take place and the package is really to be removed, all references to
the package used in the TwinCAT HMI project should be removed (Framework Control: remove all
instances / Server Extension: remove all mapped symbols of the server extension).
11.1.4 Updating a package

1. Uninstall [} 963] the package.
2. Install [} 961] a different version of the package.
Since this is an update of the package, all references to the package used in the TwinCAT HMI
project should be retained after uninstalling the package (Framework Control: all instances / Server
Extension: all mapped symbols of the server extension).
11.2 Version 1.12

The package management in TwinCAT HMI version 1.12 is based on the NuGet package management
system. This makes it possible to export the following TwinCAT HMI components into a NuGet package:
• Framework controls
• Server Extensions
• Functions (JavaScript/TypeScript)
• Code-behind files (JavaScript/TypeScript)
• Style sheets (CSS)
• Image files
Package management also enables export of several elements into one package, so that a whole control
library can be contained in one NuGet package, for example. In addition, dependencies between packages
can be defined such that when a package is installed, another package is automatically installed with it.
NuGet also offers update management, so that users are automatically informed when a new version of a
package is released and can install it directly.
The TwinCAT HMI components such as the TwinCAT HMI framework or a server extension are provided
with version 1.12 as a NuGet package. The packages are provided in the public repository at nuget.org
under the official Beckhoff account. Updates are also rolled out in this way.
The NuGet packages installed in an HMI project can be found in the project under the References node. A
new project contains the TwinCAT HMI Framework, the TwinCAT HMI Controls and the TwinCAT HMI
Functions as standard.
TE2000 Version: 2.5.1 965

Package management
11.2.1 Installing a NuGet package

1. In the TwinCAT HMI project, right-click on the References node, then click on Manage NuGet
Packages…:
966 Version: 2.5.1 TE2000

Package management
2. In the NuGet Package Manager you will then find an overview of the currently installed packages:
3. Switch to the Browse tab at the top:
4. Make sure that the correct repository is selected in the upper right corner under Package source:
1. Repository explanations:
TE2000 Version: 2.5.1 967

Package management
• nuget.org: public repository that requires an internet connection.

Search here for Beckhoff or TwinCAT HMI.
• TwinCAT HMI Official: offline TwinCAT HMI repository, for which no internet connection is required.
The packages are stored on your system when the TE2000 setup is installed.
• TwinCAT HMI Customer: offline repository for user-created packages.
5. Select the package you want to install. Further information about the package is then displayed on the
right.
6. Select the required version on the right and click Install:
ð The package will now be installed. Detailed information about the installation progress can be found
in Package Manager Console:
968 Version: 2.5.1 TE2000

Package management
ð After successful installation the package can be found under References node, and the corresponding
functions can be used:
11.2.2 Uninstalling a NuGet package

1. Under the References node, select the package you want to remove. Then click Remove in the context
menu:
ð The package has been removed,
and the package functions can no longer be used. References (such as a control instance from a control in
the package) are not automatically removed. If you subsequently see errors in the browser console, check
that you are not trying to use any other resources from the removed package.
Alternatively, you can remove the package using the NuGet Package Manager:
1. Open the NuGet Package Manager by right-clicking the References node under Manage NuGet
Packages.
TE2000 Version: 2.5.1 969

Package management
2. Select the package you want to remove and click Uninstall:
ð The package has been removed, Detailed information about the uninstall progress can be found in the
Package Manager Console.
11.2.3 Updating a NuGet package

ü When a newer version of an installed NuGet package is available, Visual Studio displays a yellow notifi-
cation bar:
970 Version: 2.5.1 TE2000

Package management
1. Click Manage NuGet Packages... to open the NuGet Package Manager. All available updates are
displayed under the Updates tab.
2. In the next step you can choose between updating the packages individually (select a package and click
Update in the right section) or updating multiple packages via Select all packages or by selecting
several individual packages.
ð The NuGet packages have been updated. Information about the current progress can be found in the
Package Manager Console.
TE2000 Version: 2.5.1 971

Package management
Downgrading NuGet packages
The Update button can also be used to downgrade NuGet packages. To do this, select the required NuGet
package and the required version from the dropdown list, then click Update:
11.2.4 Creating a NuGet package

NuGet packages can be created from framework projects or from server extension projects.
972 Version: 2.5.1 TE2000

Package management
1. Right-click on the respective project node and click Create NuGet Package... in the context menu:
2. Confirm the following query with YES to include the latest version of your sources in the package:
ð Package generation starts, and a progress bar shows the progress:
ð More detailed information about the current progress can be obtained from the Package Manager
Console.
TE2000 Version: 2.5.1 973

Package management
3. If the NuGet package is created successfully, the following message appears:
Click Explore to open the local repository for user-specific NuGet packages. This can be found in the
installation directory under:
C:\TwinCAT\Functions\TE2000-HMI-Engineering\References
ð The NuGet package can now be installed in an HMI project [} 966]. Select TwinCAT HMI Customer as
package source.
Specifying metadata for a NuGet package
Both project types contain a *.nuspec file, in which meta information for the respective NuGet package is
defined. The nuspec file at the top level in the respective project type:
For information on the structure of the *.nuspec file please refer to the corresponding Microsoft
documentation.
974 Version: 2.5.1 TE2000

Package management
11.2.5 Support for TwinCAT HMI packages

TwinCAT HMI packages from versions 1.8 and 1.10 can be used in version 1.12 as legacy NuGet packages.
This makes the corresponding functionalities available in version 1.12. The legacy NuGet packages are
created during the project migration.
ü The prerequisite for this is a project in version 1.10 that contains the TwinCAT HMI packages.
1. Open the project with version 1.12.
2. Confirm the migration wizard by clicking OK (One-way upgrade):
TE2000 Version: 2.5.1 975

Package management
3. The project is migrated and loaded.
ð After the migration is complete, a migration report opens in your web browser:
ð The project now contains the NuGet legacy packages. All framework controls are put together into
one package. Server extensions are added separately in a separate package.
ð You can now use the functionalities of the packages.
The migration wizard automatically converts TwinCAT HMI Framework Control projects to TwinCAT HMI
Framework projects. You can create NuGet packages from these in version 1.12.
976 Version: 2.5.1 TE2000

Recipe management
12 Recipe management
The recipe management enables the activation of symbol values that are managed in recipes. Furthermore,
online values from the development environment and from the visualization clients can be saved by the
target system in a recipe. Prerequisite for the use of the recipe management is the installation of the Recipe
Management extension [} 978].
Recipe types and recipes
A fundamental distinction is made between recipe types and recipes. Comparable with a class in the object
orientation, a recipe type is a general description of a set of symbols. On the basis of this description you can
create various recipes, comparable with an instance of a class. Specific values for the symbols defined in the
recipe type can be saved in a recipe.
The definition of colors as color codes is used as an example. In this example the recipe type Color
describes the general structure of a color with its red, green and blue components. Three color recipes for
yellow, light gray and navy are created on the basis of this description. The color components defined for
these colors are each saved in the three different recipes.
Inheritance of symbol configurations
If, by default, certain recipe types are to have a base set of symbols managed in a central place, then these
recipe types can inherit [} 982]from one or more recipe types. As a result they contain the symbol entries
configured in these parent recipe types. These entries are automatically updated in case of changes being
made in the parent recipe types.
Reuse of recipes in other recipes
In order to reuse [} 983] already defined recipes in other recipes, a recipe type may possess one or more
recipe types as members, comparable with standard symbol entries. To do this you can drag-and-drop the
recipe type of the recipe to be reused from the TC HMI Configuration window into the Recipe Editor [} 987] in
the base recipe type and then enter the recipe to be reused into the recipes derived from it.
See also
Actions and Conditions Editor [} 59]
Recipe [} 865]
TE2000 Version: 2.5.1 977

Recipe management
12.1 Recipe Management Extension

prerequisite for using the recipe management is the Recipe Management Extension. In version 1.10, this is
loaded by default in new projects. In version 1.12 this must be installed via NuGet [} 966].
The Recipe Management extension does not offer a configuration page. The configuration of the recipe
types and recipes [} 978] is done in TwinCAT HMI Engineering.
12.2 Management in the engineering

The management of recipe types and recipes is integrated in the TwinCAT HMI configuration window [} 75]
under Recipe Management, where all available recipes are listed under the entry Recipes and all recipe
types under Recipe Types. Both the recipes and the recipe types can be managed there in a self-made
folder structure.
12.2.1 Create folder

Folders can be created for the structuring of recipe types and recipes. The folders can be nested in one
another as required. The folders represent the relative path of a recipe.
978 Version: 2.5.1 TE2000

Recipe management
Create recipe type folder:
Click on Create new Recipe Type Folder…. in the configuration window.
Adding a recipe folder:
Click on Create new Recipe Folder…. in the configuration window
You can then insert recipe types, recipes or further folders in the folders.
Existing folders can be deleted with a right click on Delete and renamed by right-clicking on Rename.
12.2.2 Create new recipe type

1. In the TwinCAT HMI configuration window, right-click on Recipe Types and select Create new Recipe
Type in the context menu or click on the Create new Recipe Type button in the toolbar.
TE2000 Version: 2.5.1 979

Recipe management
2. Enter a name for the new recipe type.

3. Confirm the dialog with OK.
ð You have now created a new recipe type.
The Recipe Type Editor [} 980] is opened with a double click on the recipe type or by right-clicking on Edit.
12.2.3 Changing the recipe type

In the TwinCAT HMI configuration window, right-click on the recipe type to be changed and select Edit in the
context menu or double-click on this recipe type to open the Recipe Type Editor [} 980].
12.2.4 Recipe Type Editor

A recipe type can be configured in the Recipe Type Editor. The editor has a toolbar in the upper area, a
configurable list of server symbols in the central area and general settings for the entire recipe type in the
lower area.
New symbols can be added directly to the recipe type by drag-and-drop on the TwinCAT HMI configuration
window. Alternatively, they can be added to the toolbar via the + button.
980 Version: 2.5.1 TE2000

Recipe management
Symbol list
Server symbols that are to be added to a recipe type can either be placed in the symbol list by drag-and-drop
from the TwinCAT HMI configuration window or selected in the symbol selection window, which is accessible
via the toolbar [} 988]. The symbol list has different columns.
Display Name The name to be used for the symbol entry in the recipes derived from the recipe type is
defined here.
Symbol This entry is automatically set by drag-and-drop.
Default Define a default value here that is adopted automatically when creating a new recipe.
Note: A value must be entered here so that the recipe type can be saved. The Read
Default Values from Target function in the toolbar can be used to adopt the current
values of all symbols from the PLC into this field.
Min If necessary, define a minimum value for this symbol here that can be used in the recipes
derived from the recipe type.
Info: This field is available only with numerical values and enumerations.
Max If necessary, define a maximum value for this symbol here that can be used in the recipes
derived from the recipe type.
Info: This field is available only with numerical values and enumerations.
Unit If necessary, enter a unit for the symbol here.
Enabled Activate or deactivate individual symbols for the recipe type here.
Note: This setting is automatically adopted for the recipes derived from the recipe type. On
activating one of these recipes, the values of the deactivated symbol entries are not written
to the corresponding server symbols.
Comment If necessary, enter a comment for the symbol entry here.
You can mark several symbol entries in the symbol list at the same time by keeping the Ctrl key pressed
while selecting the individual entries. This allows you, for example, to delete several entries at the same time
with the Delete key or the X button.
Other recipe types can also be added by drag-and-drop in the symbol list for the reuse of recipes in other
recipes [} 983].
Toolbar
You can execute various functions via the toolbar in the upper area of the editor.
TE2000 Version: 2.5.1 981

Recipe management
Delete selected rows The selected entries in the symbol list are deleted from the
recipe type.
Create new group A new group in which the symbol entries can be summarized is
created in the symbol list.
Read default values from target The default values are read from the target and entered for all
symbol entries.
Read default values of the selected The default values are read from the target and entered only for
rows from the target the selected symbol entries.
Add symbols to this recipe type The symbol selection window is opened,
where you can select the desired symbols and add them to the
recipe type as an alternative to drag-and-drop.
General settings
In the lower part of the editor you can configure generally valid settings for the entire recipe type.
Inherited From Select one or more recipe types from which the currently opened recipe type should inherit
[} 982].
Enabled Activate or deactivate the entire recipe type here.
Note: The recipes derived from the recipe type are deactivated automatically.
Comment If necessary, enter a comment for the entire recipe type here.
12.2.4.1 Inheritance of recipe types

A recipe type can inherit from one or more recipe types. In the process, all symbols of the base recipe type
are adopted into the derived recipe type (comparable with inheritance in object-oriented programming).
Inheritance hierarchies can be constructed as desired through the support of inheritance. Changes in the
base recipe type are automatically adopted into the derived recipe types.
1. Create a new recipe type.
2. Select the base recipe type in the lower status bar under "Inherited From:" via the "…" button:
982 Version: 2.5.1 TE2000

Recipe management
3. In the subsequent window you have the possibility to select the base recipe type:
Multiple selection is possible by keeping the "Ctrl" key pressed.

Note: A recipe type cannot inherit from itself.
4. The symbols are inherited by the derived recipe type. The symbols are displayed grayed out since a
change is only possible in the base recipe type.
12.2.4.2 Reuse of recipe types

A recipe type can contain further recipe types as members. This enables several recipe types to be reused in
a recipe type. When creating a recipe, other recipes (instead of a value as in the case of the symbols) are
stored for the individual recipe type members.
1. Create a new recipe type.
TE2000 Version: 2.5.1 983

Recipe management
2. Add a recipe type from the configuration window to the new recipe type by drag-and-drop.
3. The recipe type is now contained as a member. The recipe type can subsequently be replaced by
another recipe type by clicking on the … button behind the symbol name.
984 Version: 2.5.1 TE2000

Recipe management
12.2.5 Deleting a recipe type

1. In the TwinCAT HMI configuration window, right-click on the recipe type to be deleted and select Delete
in the context menu.
2. Confirm the dialog with OK if you wish to delete the selected recipe type(s) including all recipes derived
from it/them.
TE2000 Version: 2.5.1 985

Recipe management
12.2.6 Creating a new recipe

1. In the TwinCAT HMI configuration window, right-click on Recipes and select Create new Recipe in the
context menu or click on the Create new Recipe button in the toolbar.
2. Enter a name for the new recipe in the Create new Recipe dialog.
3. Using the … button, select one of the existing recipes on which the new recipe is to be based.
4. Confirm the dialog with OK.
The Recipe Editor [} 987] is opened by double-clicking on the recipe or right-clicking on Edit.
986 Version: 2.5.1 TE2000

Recipe management
12.2.7 Changing the recipe

1. In the TwinCAT HMI configuration window, right-click on the recipe to be changed and select Edit in the
context menu or double-click on this recipe to open the Recipe Editor [} 987].
12.2.8 Recipe Editor

A recipe can be managed in the Recipe Editor. The editor has a toolbar in the upper area, a symbol list in the
central area and general information in the lower area.
Symbol list
TE2000 Version: 2.5.1 987

Recipe management
All symbol entries with the information defined in the recipe type are shown in the symbol list. Here you can
change the values of the individual entries, save them together with the recipe and manage them via the
toolbar. [} 988] You can mark several symbol entries at the same time by keeping the Ctrl key pressed while
selecting the individual entries.
Name The name of the symbol entry is shown here.

Value Define a value for the symbol entry here.
Note: When creating a new recipe the default value is automatically adopted from the
recipe type.
Min The lowest possible value for the symbol is shown here.
Max The highest possible value for the symbol is shown here.
Unit The unit of the value is shown here.
Comment The comment for a symbol entry is shown here.
Toolbar
You can execute various functions via the toolbar in the upper area of the editor.
Activate recipe The values saved in the recipe are written to the symbols.
Read values from target The current values of all symbols are read from the target and
written to the recipe.
Read values for the selected The current values of the selected symbols are read from the
symbols from target target and written to the recipe.
Show the online values for the The current values of the symbols are displayed in an extra
symbols column.
Import recipes The recipes selected in the dialog are imported into the server.
Export recipe The opened recipe is exported with a name that is to be defined.
General Information
General information about the recipe is displayed in the lower part of the editor.
Based on The recipe type on which the recipe is based is displayed here.
Recipe Type
988 Version: 2.5.1 TE2000

Recipe management
12.2.9 Delete recipe

1. In the TwinCAT HMI configuration window, right-click on the recipe to be deleted and select Delete in the
context menu.
12.3 Management in the client

The recipe management can also be used in the client at runtime. Base functionalities are mapped via the
Actions and Conditions Editor [} 59], so that preconfigured recipes can simply be activated or newly learned
[} 865] at runtime. The Framework API offers the option to run all the functions, which are also available in
the engineering, in the client by means of Code Behind. The recipe management example shows the use of
the Framework API at runtime.
Authorization concept
If user authentication is active, [} 887] you must explicitly enable access to the recipe configuration for the
desired user groups. Access is not granted by default. Open the authorization system for the symbols [} 897]
in the extended view [} 75] and search for the term "TcHmiRecipeManagement.Config". You can assign the
corresponding authorizations on this symbol.
TE2000 Version: 2.5.1 989

Recipe management
12.3.1 Example
The recipe management example shows the use of the recipe management [} 977] at runtime. It thereby
extends the functions available in the Actions and Conditions Editor [} 59] by the use of the Framework API.
The example serves as the point of entry to the recipe management and can be extended as desired. In
parallel with the example project, observe the chapter "Management in the engineering [} 978]".
The example consists of a TwinCAT HMI project and a TwinCAT project with example symbols in the PLC.
The example contains a total of three symbols, which are used by two different recipe types. Symbol 1 and
Symbol 2 are the symbols from the PLC and Symbol 3 is an offline symbol [} 79]. The offline symbol
illustrates that symbols from other sources (OPC UA, use-specific server extension, etc.) can also be used
as the ADS extension.
The example can be downloaded here [} 1329].
User interface
The example has a user interface in the client that can execute various functions of the recipe management
at runtime. These are described in more detail below.
990 Version: 2.5.1 TE2000

Recipe management
1. Recipe selection: All available recipe types are displayed in the combo box. If there is a recipe inside a
folder, the relative path to the recipe is displayed. The combo box is used to select the recipe that is used as
the basis for the other buttons and fields in this example.
2. Teach and activate recipe: The recipe currently selected in the combo box can be edited in this area.
• Teach selected recipe: The currently selected recipe is taught again. This means that the current online
values are adopted from the PLC and saved in the recipe.
• Teach as new recipe: A new recipe is created with the current online values from the PLC on the basis
of the currently selected recipe. A new name for the recipe must be entered in the text box.
• Activate selected recipe: The currently selected recipe is activated. This means that the values stored
in the recipe are written to the corresponding symbols in the PLC.
• Delete selected recipe: The currently selected recipe is deleted.
3. Upload and download recipe: This area enables recipes to be downloaded and uploaded. The file
browser of the respective browser that enables the selection of the storage location or the selection of the
recipe thereby opens.
The upload and download functions are not available in the LiveView in Visual Studio.
4. Display and edit recipe: This area enables the display and editing of the recipe members (symbols) of
the currently selected recipe.
• Datagrid: The currently selected recipe is loaded and the individual members are displayed in the data
grid. The "New value" column has two different functions. Firstly, the column is used to receive new
values for the individual members of the recipe, which are subsequently saved by clicking on the
Update selected recipe button. Secondly, the column is used to display the current online values of
the members for comparison with the stored values by clicking on the Read values from target button.
• Update selected recipe: This button saves the recipe with the new values specified in the "New value"
column.
• Read values from target: This button reads out the current online values of the recipe members and
displays them in the "New value" column.
TE2000 Version: 2.5.1 991

Recipe management
5. Online recipe values: The current online values of the three symbols Value 1, Value 2 and Value 3 are
displayed in this area.
12.3.1.1 Logic in the background

The example extends the "Activate [} 865]", "Teach [} 865]" and "TeachAsNew [} 866]" functions available in
the Action and Conditions Editor by further user-specific functions that call the Framework API of the recipe
management in the background. These functions can also be reused in other projects if they are imported
accordingly.
The functions can be found in the HMI project in the RecipeFunctions folder.
Since all functions are called asynchronously [} 1211], they are additionally given a context object [} 1220]as a
parameter value. This provides information about the success or failure of the function.
ConvertDatagridToRecipe
The ConvertDatagridToRecipe function reads the current contents of the data grid and saves them in the
transferred recipe. This function is executed by clicking on the Update selected recipe button.
Parameter:

datagridControl tchmi:framework#/definitions/ The TcHmiDatagrid, in which the
Control recipe members are to be
displayed.
recipeReference tchmi:framework#/definitions/ The reference to the recipe that is
RecipeReference to be described.
The reference consists of the
recipe path (with folder structure).
Return value:
Type Description
ConvertRecipeToDatagrid
The ConvertRecipeToDatagrid function displays all members of the transferred recipe in a data grid. The
function is transferred to the SrcData attribute of the data grid when changing the selection in the combo box
in order to load the newly selected recipe.
Parameter:

RecipeReference to be displayed.
Return value:
992 Version: 2.5.1 TE2000

Recipe management
Type Description
The data set for the data grid is transferred to the context object.
DeleteRecipe
The DeleteRecipe function deletes a transferred recipe.
Parameter:

RecipeReference to be deleted.
Return value:
Type Description
DownloadRecipe
The Download function enables the download of a transferred recipe as a JSON file. This can then be
imported using the UploadRecipe function.
Parameter:

RecipeReference to be downloaded.
Return value:
Type Description
ListRecipeAsReferenceArray
The ListRecipeAsReferenceArray function creates an array of all available recipes that is needed for the
selection in the combo box. The function is used on the SrcData attribute of the combo box.
Parameter:

recipeList tchmi:server#/definitions/ The reference to all recipes. The
folderRecipe list of all recipes is the "recipeList"
symbol in the RecipeManagement
extension.
Return value:
Type Description
TE2000 Version: 2.5.1 993

Recipe management
The data set for the combo box is transferred to the context object.
UpdateDatagridFromTarget
The UpdateDatagridFromTarget function lists the current online values of the recipe members of the
transferred recipe in the "New value" column in the data grid. The function is executed by clicking on the
Read values from target button.
Parameter:

datagridControl tchmi:framework#/definitions/ The TcHmiDatagrid, in which the
Control online values are to be displayed in
the "New value" column.
RecipeReference to be displayed in the data grid.
Return value:
Type Description
UploadRecipe
The UploadRecipe function loads a recipe from a JSON file into the recipe management. Recipes that were
exported using the DownloadRecipe function can be imported with this function.
Parameter:

- - -
The recipe in the form of the JSON file is selected directly via the file browser in the browser.
Return value:
Type Description
12.3.1.2 Extension with filter function

The sample can be extended by a filter function that filters the list of recipes based on the recipe name.
You can download the extension of the sample here [} 1329].
994 Version: 2.5.1 TE2000

Recipe management
TE2000 Version: 2.5.1 995

Project Generator
13 Project Generator
The Project Generator is used to quickly and easily create a base frame for the HMI. In this you can
customize a navigation tree.
Step by step guide: Quick start [} 1004]
Selection of a base project
1. Selection range of a base project

ð The "Base Application Template [} 996]" is a template in the classic HMI design
ð The "Web Navigation Template [} 1001]" is based on a modern website design.
Editing with the Project Generator is possible only once. Once you have completed your configura-
tion, the configurator cannot be opened again. Changes have to be made in Engineering after-
wards.
13.1 Base Application Template

The "Base Application Template" is a template in the classic HMI design.
996 Version: 2.5.1 TE2000

Project Generator
Selecting and setting the viewing areas
1. Selection of a static or responsive application

2. Adjustment range for static application for HMI size in pixels
TE2000 Version: 2.5.1 997

Project Generator
Setting the HMI layout
1. Elements available
2. Drop area for elements
3. Adding breadcrumb navigation
998 Version: 2.5.1 TE2000

Project Generator
Place element in drop area
1. Docking areas for the element

2. Preview for the selected area
TE2000 Version: 2.5.1 999

Project Generator
Define and set media query
1. MediaQuery
2. Add new MediaQuery
3. Adjust switching range in px
4. On selection: name of the MediaQuery
5. On selection: behavior of the navigation
6. On selection: delete the MediaQuery
1000 Version: 2.5.1 TE2000

Project Generator
Build navigation
1. Minimize and maximize the structure

2. Navigation element (StartPage) cannot be moved or deleted
3. Navigation element can be moved or deleted
4. Adding an element on the same layer
6. On selection: name of the element
7. On selection: selection of content type
8. On selection: preview of the selected content template
13.2 Web Navigation Template

The "Web Navigation Template" is based on a modern website design.
TE2000 Version: 2.5.1 1001

Project Generator
Selecting and setting the viewing areas
1. Selection of a static or responsive application

2. Adjustment range for static application for HMI size in pixels
1002 Version: 2.5.1 TE2000

Project Generator
Define and set media query
1. MediaQuery
2. Switching range in px
3. Preview of the two versions
TE2000 Version: 2.5.1 1003

Project Generator
Build navigation
1. Navigation element (StartPage) cannot be moved or deleted

2. Minimize and maximize the structure
3. Navigation element (content) can be moved or deleted
4. Adding a grouping
5. Navigation element (grouping) can be moved or deleted
8. On selection: name of the element
9. On selection: selection of content type
10. On selection: preview of the selected content template
13.3 Quick start

1. Start your VisualStudio
2. Create a new project of the type "TwinCAT HMI Project Generator"
1004 Version: 2.5.1 TE2000

Project Generator
3. After confirmation, a configurator opens. Here you have the choice between different templates. Select
the appropriate template for your application.
ð The "Base Application Template [} 1005]" is a template in the classic HMI design
ð The "Web Navigation Template [} 1008]" is based on a modern website design.
13.3.1 Base Application Template

The "Base Application Template" is a template in the classic HMI design.
TE2000 Version: 2.5.1 1005

Project Generator
1. The first step is about the behavior of the HMI. A distinction is made here between a "static" or a
"responsive" application.
ð The static application is an HMI that works with fixed pixel values. With different resolutions there is
only the possibility of scaling.
ð In the responsive application, the HMI is adapted depending on the resolution. It is possible to set
"Media Querys".
1006 Version: 2.5.1 TE2000

Project Generator
2. Define their areas in the HMI. To do this, you can drag controls into the HMI layout from the left side.
This offers various docking options. However, you can also move or delete elements that have already
been placed.
3. This step is available only if the responsive application is selected beforehand. In order to use the
responsive design optimally, MediaQuerys must be defined. These describe when a break occurs.
TE2000 Version: 2.5.1 1007

Project Generator
4. Create their navigation structure. Add new main nodes or sub-nodes. For created nodes there is a
possibility to choose different templates. Furthermore, the nodes can be moved freely in the structure. If
you want to finish the configuration, click the Finish button.
13.3.2 Web Navigation Template

The "Web Navigation Template" is based on a modern website design.
1008 Version: 2.5.1 TE2000

Project Generator
1. The first step is about the behavior of the HMI. A distinction is made here between a "static" or a
"responsive" application.
ð The static application is an HMI that works with fixed pixel values. With different resolutions there is
only the possibility of scaling.
ð In the responsive application, the HMI is adapted depending on the resolution. It is possible to set
"Media Querys".
TE2000 Version: 2.5.1 1009

Project Generator
2. This step is available only if the responsive application is selected beforehand. In order to use the
responsive design optimally, MediaQuerys must be defined. These describe when a break occurs.
3. Create their navigation structure. Add new main nodes or sub-nodes. In addition, the WebNavigation has
a grouping on the first level. For created nodes there is a possibility to choose different templates.
Furthermore, the nodes can be moved freely in the structure inside or outside the grouping. If you want
to finish the configuration, click the "Finish" button.
1010 Version: 2.5.1 TE2000

Extensions
14 Extensions
The TwinCAT HMI server can be extended with server extensions. This section describes the server
extensions supplied by Beckhoff, which are available for optional use. The following server extensions are
available:
• ADS [} 1011]: The ADS extension is required for the connection of a Beckhoff PLC. This is included by
default in new projects.
• Sqlite Historize [} 949]: The SqliteHistorize extension is required for recording historical data in the
TwinCAT HMI Server.
• LDAP: The LDAP extension is required to connect the TwinCAT HMI Server to LDAP Servers.
• OPC UA Client [} 1017]: The OPC UA Client extension is required to connect OPC UA Servers.
• Recipe Management [} 978]: The Recipe Management extension is required for the Recipe
Management [} 977] in the TwinCAT HMI.
• TwinCAT EventLogger [} 922]: The EventLogger extension is required for connection to the TwinCAT
EventLogger.
• TwinCAT Speech [} 1027]: The Speech extension is required for connection to TwinCAT Speech
systems.
• TwinCAT Scope [} 1021]: The Scope extension is required for connection to the TwinCAT Scope.
• TwinCAT Vision [} 1029]: The Vision extension is required to display images from TwinCAT Vision in the
HMI.
In addition, own server extensions [} 1202] can be developed and integrated into the TwinCAT HMI Server.
Some server extensions are not included as standard in a new HMI project and can be installed via NuGet
[} 966], if required.
14.1 Protocols
14.1.1 ADS
The ADS Server Extension displays the configured target systems of the selected publish configuration. You
can add further devices.
TE2000 Version: 2.5.1 1011

Extensions
• Enabled: Specifies whether the target system should be active or disabled in the HMI.
• AmsNetId: AmsNetId of the target system. An ADS route to the target system must exist.
• Port: Port on the target system that is to be accessed (e.g. 851 for PLC, 10000 for TwinCAT System
Service, etc.)
• Use whitelisting: Specifies whether blacklisting (false) or whitelisting (true) [} 1013] should apply to the
configured target.
• Symbols: Manually add symbols per IndexGroup and Offset [} 1017].
• Add Runtime: Add a new target system.
• Timeout: Timeout for ADS requests. If the target system does not respond within this time, the access
is considered an error.
Click on Add Runtime to add a new target system. In the dialog you will automatically see all locally
configured
All locally configured routes are displayed with their AmsNetId when adding a runtime. You can select the
AmsNetId and the corresponding port to add the target system.
1012 Version: 2.5.1 TE2000

Extensions
14.1.1.1 Blacklisting and whitelisting

With version 1.12, it is possible to use black or whitelisting for PLC symbols. With black or whitelisting, PLC
symbols can be explicitly hidden or shown for use in the HMI. For this, you can tag the corresponding
variables in the PLC with an attribute pragma. In the default case, blacklisting is active, which means that
you have access to all variables of the PLC that are not explicitly hidden for the HMI. On the configuration
page of the ADS extension, you can switch between black and whitelisting (Use whitelisting).
TE2000 Version: 2.5.1 1013

Extensions
The following attribute pragmas are available for black or whitelisting in the TwinCAT HMI:
{ attribute 'TcHmiSymbol.Show' }
{ attribute 'TcHmiSymbol.ShowRecursively' }
{ attribute 'TcHmiSymbol.Hide' }
{ attribute 'TcHmiSymbol.ReadOnly' }
{ attribute 'TcHmiSymbol.BLOB' }
Use:
• TcHmiSymbol.Show: If a variable has this attribute, it will be displayed in the HMI in case of
whitelisting. With this attribute only the first level is displayed (example: only the struct, but not the sub-
elements). The attribute has no effect on blacklisting.
• TcHmiSymbol.ShowRecursively: If a variable has this attribute, it is displayed with all sub-elements in
the HMI in the case of whitelisting (e.g. structure or function block with all sub-elements). Variables in
the sub-elements that are blacklisted with TcHmiSymbol.Hide are not displayed.
• TcHmiSymbol.Hide: If a variable has this attribute, it will not be displayed in the HMI in case of
blacklisting. All variables without an attribute are displayed. If the attribute is used with a structure, all
sub-elements are also hidden in the HMI, even if they are tagged with TcHmiSymbol.Show.
• TcHmiSymbol.ReadOnly: If a variable has this attribute, the variable with all sub-elements cannot be
written in the HMI.
• TcHmiSymbol.BLOB: If a variable has this attribute, the data is transferred to the server and the client
in binary form (reduction of packet size). The data must be converted in the client itself.
Blacklisting overrides whitelisting.
With blacklisting, all variables are visible in the HMI, except variables with the attribute TcHmi-Sym-
bol.Hide.
With whitelisting, no variables are visible in the HMI except variables with the attributes TcHmiSym-
bol.Show and TcHmiSymbol.ShowRecursively.
1014 Version: 2.5.1 TE2000

Extensions
14.1.1.2 Methods and properties

With version 1.12 it is possible to access PLC properties in the HMI and to call PLC methods in the HMI.
PLC properties
The properties must be made visible in the PLC with an attribute pragma via ADS.
{attribute 'monitoring' := 'call'}
PROPERTY Prop : BOOL
You can then access the property in the TwinCAT HMI.
PLC properties can only be used explicitly in the HMI by linking the property individually to a control
attribute. If the entire function block is linked to a control attribute, the property is not called. This is
the case when a function block is used as the source data of the DataGrid or as a user control pa-
rameter.
PLC methods
The methods must be switched visible in the PLC with an attribute pragma via ADS.
{attribute 'TcRpcEnable'}
METHOD MyMethod : BOOL
VAR_INPUT
bInput : BOOL;
END_VAR
Afterwards you can see the methods in the TwinCAT HMI. Within the TwinCAT HMI Configuration Window,
you can call them explicitly.
TE2000 Version: 2.5.1 1015

Extensions
At runtime in the client, you can call the methods using a JavaScript/TypeScript function and the Framework
API. Below you will find an example for the call via Framework API.
// call of method without parameter
TcHmi.Symbol.readEx2("%s%PLC1.MAIN.fbTest.MethodWithoutParam%/s%", function (data) {
console.log(data);
});
// call of method with parameter

TcHmi.Symbol.writeEx("%s%PLC1.MAIN.fbTest.MyMethod%/s%", { bInput: true }, function (data) {
console.log(data);
});
If the method has a return value, you can access the return value within the callback function in the Result
object.
In a future version of the TwinCAT HMI, it will be possible to call the methods directly via the Actions and
Conditions Editor without using JavaScript/TypeScript.
Methods must always be called explicitly and cannot be used as a control attribute. Note that calling
a method from the HMI results in the execution of PLC code.
1016 Version: 2.5.1 TE2000

Extensions
14.1.1.3 Pointers and references

With version 1.12.748.0, references, pointers and interface pointers can be resolved in the HMI. This makes
it possible to access the original variable being pointed to via the pointer or reference. This can be read and
written when accessing via the pointer or reference. The resolved pointers or references are listed as usual
under the variables in the TwinCAT HMI Configuration Window.
Changing the addresses of the pointers or references so that they point to another variable is not possible in
the HMI. This must be done in the PLC.
Available from version 1.12.748.0.
14.1.1.4 Access by IndexGroup and Offset

It makes most sense to access PLC variables by symbol name in order to detect changes in the symbolism
(e.g. due to an OnlineChange). Small controllers (e.g. BC/BX) that have no symbolism can be addressed
directly via IndexGroup and Offset. Via the configured ADS runtime you can add a new symbol that fetches
the values by IndexGroup and Offset (hex values are converted to the corresponding decimal values).
14.1.2 OPC UA Client

The OPC UA Client Extension enables communication between the TwinCAT HMI Server and an OPC UA
Server. The TwinCAT HMI Server connects as a client to the OPC UA Server. This can be used, for
example, to connect third-party controllers that do not support the ADS protocol to the TwinCAT HMI. The
data exchange is bidirectional. The data points of the OPC UA Server are automatically browsed by the OPC
UA Client Extension.
TE2000 Version: 2.5.1 1017

Extensions
To use the OPC UA Client Extension the license TF2110 is required. The license allows the connection to
OPC UA servers and the use of a namespace. One TwinCAT HMI Target license (TF2050 - TF2090) per
namespace is required for the use of additional namespaces.
14.1.2.1 Add extension

The OPC UA Client Extension is not loaded by default and must be added later to a TwinCAT HMI project.
The extension is added via TwinCAT HMI Package Management. When TwinCAT HMI is installed, the
extension is automatically stored in the local repository and is therefore listed directly in the Package
Manager.
Open the Package Manager and install the extension [} 961].
1018 Version: 2.5.1 TE2000

Extensions
14.1.2.2 Configure connection

The connection to an OPC UA Server is configured on the configuration page of the extension.
Open the TwinCAT HMI Server configuration page [} 880] and navigate to the TcHmiOpcUa tab:
TE2000 Version: 2.5.1 1019

Extensions
1. advancedSettings: Under the advanced settings you can create profiles for the display of the
browsed variables.
2. connectionSettings: You can create profiles for establishing a connection under Connection Set-
tings.
3. namespaces: The connection to an OPC UA server is configured under the namespaces. The config-
uration profiles can be selected for each connection.
4. securitySettings: Under the security settings you can create profiles for the OPA UA Security.
Connecting to an OPC UA Server

1. Open the TwinCAT HMI Server configuration page and navigate to the TcHmiOpcUa tab.
2. Open the point namespaces and add a new entry by clicking on the button + Add.
3. Configure the connection to the OPC UA Server:
Name: Freely selectable name under which the OPC UA Server is listed in TwinCAT HMI.
advanced: Profile of the advanced settings.
connection: Profile of the connection settings.
endpoint: Endpoint URL of the OPC UA Server.
security: Profile of the security settings.
ð You can then use [} 1020] the symbols of the OPC UA Server.
14.1.2.3 Use data points

After the connection to the OPC UA Server has been configured, the symbols of the OPC UA Server can be
accessed. Access is via the TwinCAT HMI Configuration window [} 75]. There the symbols can be used in
the [} 77] same way as with the other extensions.
The OPC UA Server is listed below the extension "TcHmiOpcUa" with the configured name. [} 1019]
1020 Version: 2.5.1 TE2000

Extensions
14.2 TwinCAT Scope

The TwinCAT Scope extension enables connection to a TwinCAT Scope Server. For this purpose, an existing
Scope project (.tcscopex file) can be integrated into the TwinCAT HMI. The visualization in the client takes
place in Scope Control [} 524]. The configuration of the charts (e.g. linking with the PLC variables,
configuration of the axes, etc.) is done in the Scope project itself.
Create a link to a Scope project

ü Install the TwinCAT HMI Scope extension (Beckhoff.TwinCAT.HMI.Scope) and the TwinCAT HMI Scope
Control (Beckhoff.TwinCAT.HMI.ScopeControl) via the NuGet Package Manager [} 966].
TE2000 Version: 2.5.1 1021

Extensions
1. Open the TwinCAT HMI Configuration window [} 75]. Click in the tree structure on the left side on the
entry Scope Configurations.
2. Right-click on the entry Scope Configurations and then on Import Scope Configuration... or double-
click on the entry <Import Scope Configuration> in the TwinCAT HMI Configuration window.
3. Assign a unique name for the scope configuration in the Add Scope Config dialog. The Scope project is
then listed under this name in the TwinCAT HMI Configuration window.
4. In the next step, choose whether you want to add the scope project file (.tcscopex file) from the hard disk
or from the Solution.
ð If the project file is located within the Solution, you can select it by clicking on Browse Solution.
After selecting the project file, confirm the dialog by clicking on OK.
ð If the project file is located outside the Solution on your hard disk, you can select it from your hard
disk by clicking on "Browse Files".
You can add multiple Scope configurations to a project
1022 Version: 2.5.1 TE2000

Extensions
5. After adding the Scope configuration, the charts contained there are displayed.
If not all charts from your project are displayed, the corresponding chart type is not yet supported in the
TwinCAT HMI Scope extension. A list of the supported chart types can be found at the end of this page.
6. Open an HMI page and drop an instance of the TwinCAT HMI Scope Control [} 524]. This can be found
in the Toolbox under the category Charts.
7. Go to the Properties window [} 58] to configure the control.

8. You can create a link between the Scope chart and the Scope control by linking the attribute "Scope
Config [} 531]". Here you have two options:
ð Select the chart below your Scope configuration by clicking on the "..." button next to the "Scope-
Config" attribute:
TE2000 Version: 2.5.1 1023

Extensions
ð Alternatively, you can drag and drop the chart from the TwinCAT HMI Configuration window [} 75]
onto the "Scope-Config" attribute:
ð You can now use the chart in the LiveView [} 72] or in the Client [} 874].
Configure Scope Charts
The general configuration of the Scope charts (e.g. axes, colors, channels, data sources, etc.) is done in the
Scope project. Instructions for this can be found in the Documentation of the TwinCAT Scope.
After you have made a change in the Scope project, you must update an already existing Scope
configuration in the TwinCAT HMI project.
1. To do this, right-click on the Scope configuration entry in the TwinCAT HMI Configuration window and
select Refresh.
ð The configuration has now been updated.
1024 Version: 2.5.1 TE2000

Extensions
Configure Scope Control
Further setting options are available in the TwinCAT HMI Scope Control [} 524]. This can be found in the
properties of the control under the category Common.
• Scope Config [} 531]: Selection of the chart that is displayed in the current control instance. For
example, you can create multiple instances of the control to display different charts simultaneously.
Alternatively, you can switch the configuration at runtime within the control instance.
• EnableRecordControls [} 532]: Specifies whether the start and stop record buttons are displayed in the
Scope control.
• Server Interval [} 531]: Interval at which the data between the control and the extension is updated.
TE2000 Version: 2.5.1 1025

Extensions
• ChartColorSource [} 532]: Defines whether the colors of the chart are taken from the Scope project, or
whether they are set via the ThemedResources in a TwinCAT HMI Theme [} 936].
• Server Domain [} 531]: Name of the Scope extension that provides the Scope configuration. This
attribute usually does not have to be changed.
Using the Scope Control in the Client
After you have completed the configuration, you can use the Scope in the client. The familiar TwinCAT
Scope functionalities are available for analysis.
1026 Version: 2.5.1 TE2000

Extensions
Sample:
An example of the use of the Scope in TwinCAT HMI can be found here [} 1329].
For using the TwinCAT HMI Scope extension a TC3 Scope View Professional (TE1300) license or a
TC3 HMI Scope (TF2300) license is required on the system where the TwinCAT HMI Server is run-
ning.
Available from version 1.12.748.0.
With version 1.12.748.0 the following chart types are supported: YT-Chart, XY-Chart, Single Bar
Chart and Array Bar Chart.
14.3 TwinCAT Speech

The TwinCAT Speech Extension offers a connection to TwinCAT Speech systems. This allows a TwinCAT
HMI client/browser to be used as an audio input and output device. For the extension, the .NET Core Runtime
must be installed.
TE2000 Version: 2.5.1 1027

Extensions
1. Install the TwinCAT Speech extension using the NuGet Package Manager [} 966]:
ð The extension can now be used:
The extension is now responsible for the exchange of data between TwinCAT Speech and the browser.
Therefore, nothing needs to be configured on the extension itself.
The server must be announced first in TwinCAT Speech (see Documentation of TwinCAT Speech).
Base configuration
By default, no speech connection is established. For this purpose, a connection must be actively started by a
TypeScript/JavaScript API call.
TcHmi.TcSpeech.openConnection({
enableMicrophone: true,
enableSpeaker: true
});
Further possible parameters of the call with the respective default value are:
defaultVolume: 1 This is the volume of the sound output when loading the application. This can be set
from 0 to 1.
domain: 'TcHmiSpeech' Domain name under which the speech extension is reachable.
confidenceThreshold: 0.2 Each recognition event has a probability that the recognized text
corresponds to the specified entry. This threshold value specifies the value from which this is treated as a
genuine event. If, for example, 0.9 is specified here, an HMI event is only triggered in the case of a very
precise correspondence. (Refer also to the documentation from Microsoft)
1028 Version: 2.5.1 TE2000

Extensions
Use of recognized events in the project
Recognized texts call events in the speech system. These are transferred to the browser and are usable
there in an identical way to events of controls (such as myButton.onClick). The Recognition Tag from
the SRGS file is taken here as the name.
It can thus be used as an event in the Actions and Conditions Editor [} 59] in the HMI. The name is entered
in the Custom area for this purpose. If, for example, SpeechOnCommand<SET_ENGLISH> is entered here,
then an action is started on recognition of the Recognition Tag SET_ENGLISH.
Use via CodeBehind [} 1220] is also possible. Sample code with TypeScript:
TcHmi.EventProvider.register('SpeechOnCommand<SET_ENGLISH>', (e, data:
TcHmi.TcSpeech.IEventCallbackParameter) => {
// Will output:
// 'The user said a text which triggered the recoginition tag: SET_ENGLISH'
console.log('The user said a text which triggered the recoginition tag: ' + data.Command);
if (data.Confidence > 0.9) {
console.log('The speech recognition was pretty sure about that.');
}
if (data.Parameter) {
console.log('We got a parameter for this recognition: ', data.Parameter);
}
});
14.4 TwinCAT Vision

The TwinCAT Vision extension offers a link to TwinCAT Vision systems. It can be used to display images
from the PLC in the TwinCAT HMI.
1. Install the TwinCAT Vision extension via the NuGet Package Manager [} 966]:
TE2000 Version: 2.5.1 1029

Extensions
ð The extension can now be used:
The extension configuration and the linking of images is described in the TwinCAT Vision documentation.
1030 Version: 2.5.1 TE2000

Server
15 Server
15.1 Configuration side
15.1.1 TcHmiSrv
Type Definitions
Name Description
adsRoute [} 1035] ADS route
threadPoolSize [} 1036] Thread pool size
accessEnum [} 1036] Access level
severity [} 1037] Severity
timing [} 1038] Timing
valueType [} 1039] Value type
alarmState [} 1041] Alarm state
confirmationState [} 1042] Alarm confirmation state
nullableDateTime [} 1043] Nullable datetime
eventType [} 1043] Event type
message [} 1044] Message
alarm [} 1045] Alarm
event [} 1046] Event
symbol [} 1046] Symbol
filter [} 1048] Filter
userLocale [} 1049] User locale
userTimeZone [} 1055] User timezone
userGroups [} 1066] User groups
eventFilter [} 1066] Event filter
TE2000 Version: 2.5.1 1031

Server
Webserver
Symbol name Text Description

CLIENT_CACHE_MAX_AGE Client-Cache max age Defines how long server responses may be cached.
[} 1125]
COOKIEEXPIRATIONDATE Cookie expiration date The server uses cookies to store session IDs. Make
[} 1107] sure that the cookie expiration date and the
automatic logout duration are not in conflict.
CLIENTPRIORITYLIST Client priority list IP addresses of preferred clients. If the client limit is
[} 1125] reached these clients will be able to connect and
clients which are not in this list will be disconnected.
SESSIONSTORAGE [} 1108] Saved sessions Sessions are saved here so that they are still valid
after a server restart.
DISCOVERY [} 1109] SSDP discovery Changes will become active after a server restart
ENDPOINTS [} 1111] Endpoints IPv4 and IPv6 endpoints are supported. Only HTTPS
endpoints should be enabled for remote access. Use
the wildcard addresses '0.0.0.0' and '[::]' to accept
remote connections on all network interfaces.
KEEP_ALIVE [} 1112] Keep alive Timer for persistent connections.
SOCKET_TIMEOUT [} 1112] Socket timeout Timeout for incomplete message body.
ETAGENABLED [} 1113] Enable ETAG The entity tag HTTP header is an identifier for a
specific version of a resource.
GZIPENABLED [} 1113] Enable GZIP GZIP compression is used by the server and web
clients to improve transfer speed and bandwidth
utilization.
GZIPMINSIZE [} 1114] GZIP minimum size Prevents small data from getting zipped.
DEFLATECOMPRESSIONLE GZIP compression level GZIP compression is used by the server and web
VEL [} 1114] clients to improve transfer speed and bandwidth
utilization.
PERMESSAGEDEFLATEENA Enable Try to enable compression for all WebSocket
BLED [} 1115] PerMessageDeflate requests. Compression is not enabled for clients that
don't support it.
CACHEENABLED [} 1116] Enable cache If enabled, the web-server stores frequently
requested data such as web pages, images, and
similar media content in RAM to improve response
times.
CACHEMAXENTRYSIZE Cache max entry size Server restart required.
[} 1116]
CACHEMAXSIZE [} 1117] Cache max size Server restart required.
CACHEMAXAGE [} 1117] Cache max age Server restart required.
GLOBALHTTPHEADERS Global HTTP(S) Headers These headers will be added to all HTTP responses.
[} 1118]
REVALIDATION [} 1126] Force Revalidation Works by setting proper Cache-Control, Pragma and
Expire headers.
MIME [} 1127] MIME HTTP headers Mappings for internet media types.
DEFAULTDOCUMENT Default document This default page is served when a web client
[} 1133] requests a URL that points to a directory structure
instead of an actual web page within the directory
structure.
1032 Version: 2.5.1 TE2000

Server
General Properties

PROJECTNAME [} 1071] Project name The name of the HMI project.
PROJECTVERSION [} 1071] Project version This is the version of the HMI project that has been
published to this server.
DEFAULTLOCALE [} 1072] Default Locale Leave empty to use client locale.
DEFAULTTIMEZONE Default timezone Leave empty to use client timezone.
[} 1072]
DEFAULTTIMEFORMATLO Default Time Locale Leave empty to use client locale.
CALE [} 1073]
CONFIGURATIONS [} 1073]Configurations The names of all existing configurations.
FILES [} 1074] Files Special handling and permissions for specific files or
directories.
VIRTUALDIRECTORIES Virtual directories Virtual directories are used to specify which folders
[} 1075] paths on the file system should be served by the web
server.
REQUIREAUTH [} 1075] Authentication required Authentication should only be disabled on private
networks.
EXTENSIONS [} 1076] Extensions Server extensions are used to integrate additional
functionality into the server.
USERGROUPS [} 1078] User groups User groups have access permissions to specific
symbols and files. Permissions are assigned to users
based on user groups they are a member of.
USERGROUPUSERS Members of user groups The account settings and group memberships of all
[} 1081] users from all authentication extensions.
REMOTESERVERS [} 1083] Remote Server Connections to other HMI servers. The mapped
symbols of remote servers can be used like symbols
from extensions of the current server.
REMOTESERVERS_CERTIFI Allowed certificates for Certificates of the remote servers.
CATES [} 1084] remote servers
TE2000 Version: 2.5.1 1033

Server
Advanced

MAXSESSIONS [} 1085] Maximum number of Maximum number of concurrent connections.
connections
THREADPOOLSIZE [} 1085] Size of thread pool Server restart required.
FLOODPROTECTION Flood protection Allowed WebSocket-requests per client IP per
[} 1086] second
HTTP_FLOODPROTECTIO Flood protection HTTP Allowed HTTP-requests per client IP per second per
N [} 1092] URI
INITTIMEOUT [} 1092] Init timeout It should not take longer than this to initialize a server
extension.
SHUTDOWNTIMEOUT Timeout for unloading It should not take longer than this to unload a server
[} 1086] extensions extension.
UPLOADTIMEOUT [} 1087] Upload timeout Upload requests will be rejected if they do not
succeed after this duration.
CHUNKSIZE [} 1087] Size of chunk packet Downloaded files will be split into chunks of this size.
VIDEOSEGMENTSIZE Size of video segments HTTP range requests (streamed videos) will be split
[} 1088] in chunks of this size.
CHECKSUMENABLED Checksum enabled Checksum of uploaded files will be validated during
[} 1089] publishing.
DEFAULTEVENTEXTENSIO Default logging extension When the 'ListEvents' function symbol is called, the
N [} 1089] events are requested from the default event
extension.
DIAGNOSTICS_DOMAINS Log diagnostics data for Logging diagnostics data are useful to diagnose
[} 1090] domains problems but they have a negative impact on
performance.
MAXCONNECTIONSPERCL Maximum connections per Keep in mind that web browsers might open multiple
IEN [} 1093]T client simultaneous connections to the same server to
achieve faster load times.
MAXHTTPHEADERSIZE Maximum size of HTTP Requests with HTTP headers that are larger than this
[} 1090] header limit will be rejected by the web server.
MAXREQUESTSIZE [} 1091] Maximum request size Requests that are larger than this limit will be rejected
by the web server.
ENABLE_SERVER_UPDATE Enable server updates When server updates are enabled remote servers
[} 1093] can be updated to new versions during the publish
process.
SHOW_CONFIGURATION_ Show configuration hints Configuration hints inform about problematic settings
HINTS [} 1091] or combinations of settings in the configurations of
the server or server extensions.
DISABLED_CONFIGURATI Disabled configuration Hints which should not be shown anymore.
ON_HINTS [} 1094] hints
1034 Version: 2.5.1 TE2000

Server
Security

DEFAULTAUTHEXTENSIO Default authentication Multiple authentication extensions can be used at the
N [} 1094] extension same time. The default authentication extension is
automatically selected on the login page.
USERSELECTTYPE [} 1095] Select User by If there are only a few user accounts, selecting the
user account using a list box can simplify the login
process.
AUTO_LOGOFF [} 1096] Auto logoff Can be overridden for individual user accounts. This
value is used when no other value is specified for the
current user.
DEFAULTUSERGROUP Default user group All user accounts are automatically added to this user
[} 1096] group.
AUTO_LOGINUSER [} 1103]Automatic Login The user account that is configured here is logged in
automatically when a new session is opened.
CERTIFICATE [} 1097] Certificate PEM or PFX formatted certificate.
CERTIFICATEEXPIRATION Duration for default Shorter validity durations limit the damage from key
[} 1097] certificate compromise and mis-issuance. Stolen keys and mis-
issued certificates are valid for a shorter period of
time.
SELFSIGNEDROOTCA Self signed root certificate This certificate is used to create self-signed server
[} 1098] certificates.
SELFSIGNEDROOTCAKEY Self signed root certificate This key is used to decrypt the root certificate.
[} 1098] key
KEY [} 1099] Key This key is used to decrypt the certificate.
TEMPDH [} 1099] TempDH Custom parameters for the Diffie-Hellman (DH) key-
exchange.
KEYPASSWORD [} 1100] Key Password Password used to decrypt the private key.
AUTHCLIENTCERTIFICATE Only client certificates Require an approved client certificate to establish a
[} 1100] allowed to authenticate HTTPS connection.
LOCKOUT_PROTECTION_C Lockout Protection Enabling client certificate requires a local endpoint.
LIENT_CERTIFICATE
[} 1101]
CLIENTCERTIFICATES Client Certificates Client certificates constitute an alternative
[} 1101] authentication mechanism that is not based on
passwords.
SAMESITE_ATTRIBUTE SameSite attribute Specifies whether cookies should be sent for cross-
[} 1102] page requests.
Symbols

DEFINITIONS [} 1104] Definitions Storage for JSON schema definitions.
SYMBOLS [} 1105] Mapped symbols Mapped symbols are used to grant access to internal
symbols of a domain.
15.1.1.1 Type Definitions
15.1.1.1.1 adsRoute
ADS route
TE2000 Version: 2.5.1 1035

Server
General Information
Domain TcHmiSrv
Schema
Type string
JSON Schema
{
"allOf": [
{
"oneOf": [
{
"format": "ipv4"
},
{
"format": "amsnetid"
}
]
},
{
"description": "descAdsRoute",
"optionMethod": {
"symbol": "ADS.ListRoutes"
},
"type": "string"
}
]
}
15.1.1.1.2 threadPoolSize
Thread pool size
General Information
Domain TcHmiSrv
Schema
Type integer
Minimum 4
Maximum 128
JSON Schema
{
"description": "descThreadPoolSize",
"maximum": 128,
"minimum": 4,
"type": "integer"
}
15.1.1.1.3 accessEnum
Access level
General Information
Domain TcHmiSrv
1036 Version: 2.5.1 TE2000

Server
Schema
Enumeration type integer

Default value 3
Options
Value Label
0 None
1 Read
2 Write
3 Read-Write
JSON Schema
{
"default": 3,
"description": "descAccessEnum",
"enum": [
0,
1,
2,
3
],
"options": [
{
"label": "ENUM_NONE",
"value": 0
},
{
"label": "ENUM_READ",
"value": 1
},
{
"label": "ENUM_WRITE",
"value": 2
},
{
"label": "ENUM_READWRITE",
"value": 3
}
],
"type": "integer"
}
15.1.1.1.4 severity
Severity
General Information
Domain TcHmiSrv
Schema

Default value 1
TE2000 Version: 2.5.1 1037

Server
Options
Value Label
-1 Diagnostics
0 Verbose
1 Info
2 Warning
3 Error
4 Critical
JSON Schema
{
"default": 1,
"description": "descSeverity",
"enum": [
-1,
0,
1,
2,
3,
4
],
"options": [
{
"label": "ENUM_m1_DIAGNOSTICS",
"value": -1
},
{
"label": "ENUM_0_VERBOSE",
"value": 0
},
{
"label": "ENUM_1_INFO",
"value": 1
},
{
"label": "ENUM_2_WARNING",
"value": 2
},
{
"label": "ENUM_3_ERROR",
"value": 3
},
{
"label": "ENUM_4_CRITICAL",
"value": 4
}
],
"type": "integer"
}
15.1.1.1.5 timing
Timing
General Information
Domain TcHmiSrv
Schema

Default value 1
1038 Version: 2.5.1 TE2000

Server
Options
Value Label
0 Early
1 Normal
2 Delayed
JSON Schema
{
"default": 1,
"description": "descTiming",
"enum": [
0,
1,
2
],
"options": [
{
"label": "ENUM_EARLY",
"propertyOrder": 1,
"value": 0
},
{
"label": "ENUM_NORMAL",
"propertyOrder": 2,
"value": 1
},
{
"label": "ENUM_DELAYED",
"propertyOrder": 3,
"value": 2
}
],
"type": "integer"
}
15.1.1.1.6 valueType
Value type
General Information
Domain TcHmiSrv
Schema

Default value 0
TE2000 Version: 2.5.1 1039

Server
Options
Value Label
0 null
1 boolean
2 integer
3 number
4 string
5 array
6 map
7 object
8 binary
9 int64
10 date-time
11 timespan
64 event
65 message
66 alarm
256 any
JSON Schema
{
"default": 0,
"description": "descValueType",
"enum": [
0,
1,
2,
3,
4,
5,
6,
7,
8,
9,
10,
11,
64,
65,
66,
256
],
"options": [
{
"label": "ENUM_VALUETYPE_NULL",
"value": 0
},
{
"label": "ENUM_VALUETYPE_BOOL",
"value": 1
},
{
"label": "ENUM_VALUETYPE_INT",
"value": 2
},
{
"label": "ENUM_VALUETYPE_DOUBLE",
"value": 3
},
{
"label": "ENUM_VALUETYPE_STRING",
"value": 4
},
{
"label": "ENUM_VALUETYPE_ARRAY",
"value": 5
},
{
1040 Version: 2.5.1 TE2000

Server
"label": "ENUM_VALUETYPE_MAP",
"value": 6
},
{
"label": "ENUM_VALUETYPE_STRUCT",
"value": 7
},
{
"label": "ENUM_VALUETYPE_BINARY",
"value": 8
},
{
"label": "ENUM_VALUETYPE_INT64",
"value": 9
},
{
"label": "ENUM_VALUETYPE_DATETIME",
"value": 10
},
{
"label": "ENUM_VALUETYPE_TIMESPAN",
"value": 11
},
{
"label": "ENUM_VALUETYPE_EVENT",
"value": 64
},
{
"label": "ENUM_VALUETYPE_MESSAGE",
"value": 65
},
{
"label": "ENUM_VALUETYPE_ALARM",
"value": 66
},
{
"label": "ENUM_VALUETYPE_ANY",
"value": 256
}
],
"type": "integer"
}
15.1.1.1.7 alarmState
Alarm state
General Information
Domain TcHmiSrv
Schema

Default value 0
Options
Value Label
0 Raised
1 Confirmed
2 Cleared
3 Cleared and Confirmed
4 Invalid
TE2000 Version: 2.5.1 1041

Server
JSON Schema
{
"default": 0,
"description": "descAlarmState",
"enum": [
0,
1,
2,
3,
4
],
"options": [
{
"label": "ENUM_0_RAISED",
"value": 0
},
{
"label": "ENUM_1_CONFIRMED",
"value": 1
},
{
"label": "ENUM_2_CLEARED",
"value": 2
},
{
"label": "ENUM_3_CLEARED_AND_CONFIRMED",
"value": 3
},
{
"label": "ENUM_4_INVALID",
"value": 4
}
],
"type": "integer"
}
15.1.1.1.8 confirmationState
Alarm confirmation state
General Information
Domain TcHmiSrv
Schema

Default value 1
Options
Value Label
0 Not supported
1 Not required
2 Waiting for confirmation
3 Confirmed
4 Reset
JSON Schema
{
"default": 1,
"description": "descConfirmationState",
"enum": [
0,
1,
2,
3,
1042 Version: 2.5.1 TE2000

Server
4
],
"options": [
{
"label": "ENUM_NOTSUPPORTED",
"propertyOrder": 2,
"value": 0
},
{
"label": "ENUM_NOTREQUIRED",
"propertyOrder": 5,
"value": 1
},
{
"label": "ENUM_WAIT",
"propertyOrder": 4,
"value": 2
},
{
"label": "ENUM_CONFIRMED",
"propertyOrder": 3,
"value": 3
},
{
"label": "ENUM_RESET",
"propertyOrder": 1,
"value": 4
}
],
"type": "integer"
}
15.1.1.1.9 nullableDateTime
Nullable datetime
General Information
Domain TcHmiSrv
JSON Schema
{
"allOf": [
{
"oneOf": [
{
"format": "date-time",
"type": "string"
},
{
"type": "null"
}
]
},
{
"description": "descNullableDateTime"
}
]
}
15.1.1.1.10 eventType
Event type
General Information
Domain TcHmiSrv
TE2000 Version: 2.5.1 1043

Server
Schema

Default value 1
Options
Value Label
0 Message
1 Alarm
2 Payload
JSON Schema
{
"default": 1,
"description": "descEventType",
"enum": [
0,
1,
2
],
"options": [
{
"label": "ENUM_0_MESSAGE",
"value": 0
},
{
"label": "ENUM_1_ALARM",
"value": 1
},
{
"label": "ENUM_2_PAYLOAD",
"value": 2
}
],
"type": "integer"
}
15.1.1.1.11 message
Message
General Information
Domain TcHmiSrv
Schema
Type object
JSON Schema
{
"additionalProperties": false,
"description": "descMessage",
"properties": {
"domain": {
"type": "string"
},
"name": {
"type": "string"
},
"params": {
"additionalProperties": {},
"type": "object"
},
"severity": {
1044 Version: 2.5.1 TE2000

Server
"$ref": "tchmi:server#/definitions/severity"
},
"timeRaised": {
"type": "string"
}
},
"required": [
"name",
"domain",
"severity"
],
"type": "object"
}
15.1.1.1.12 alarm
Alarm
General Information
Domain TcHmiSrv
Schema
Type object
JSON Schema
{
"description": "descAlarm",
"properties": {
"alarmState": {
"$ref": "tchmi:server#/definitions/alarmState"
},
"confirmationState": {
"$ref": "tchmi:server#/definitions/confirmationState"
},
"domain": {
"type": "string"
},
"id": {
"type": "integer"
},
"isActive": {
"$ref": "tchmi:general#/definitions/Boolean"
},
"name": {
"type": "string"
},
"params": {
"type": "object"
},
"severity": {
},
"timeCleared": {
"$ref": "tchmi:server#/definitions/nullableDateTime"
},
"timeConfirmed": {
},
"timeRaised": {
"type": "string"
}
},
"required": [
"name",
"domain",
"confirmationState"
TE2000 Version: 2.5.1 1045

Server
],
"type": "object"
}
15.1.1.1.13 event
Event
General Information
Domain TcHmiSrv
Schema
Type object
JSON Schema
{
"description": "descEvent",
"properties": {
"domain": {
"type": "string"
},
"name": {
"type": "string"
},
"payload": {
"anyOf": [
{
"$ref": "tchmi:server#/definitions/alarm"
},
{
"$ref": "tchmi:server#/definitions/message"
},
{}
],
"description": "Payload can be alarms, messages or any type of user data."
},
"payloadType": {
"$ref": "tchmi:server#/definitions/eventType"
},
"sessionId": {
"type": "string"
},
"timeReceived": {
"type": "string"
}
},
"required": [
"name",
"domain"
],
"type": "object"
}
15.1.1.1.14 symbol
Symbol
General Information
Domain TcHmiSrv
1046 Version: 2.5.1 TE2000

Server
Schema
Type object
JSON Schema
{
"configDescription": "DESC_SYMBOL",
"properties": {
"ACCESS": {
"allOf": [
{
"$ref": "tchmi:server#/definitions/accessEnum"
},
{
"configDescription": "DESC_ACCESS"
}
]
},
"CUSTOMERDATA": {
"type": "string"
},
"DOMAIN": {
"description": "Domain of the symbol",
"optionMethod": {
"symbol": "ListDomains"
},
"type": "string"
},
"DYNAMIC": {
"default": true,
"description": "Only dynamic symbols can be removed.",
"type": "boolean"
},
"HIDDEN": {
"default": false,
"description": "Hide this symbol in the symbol browser.",
"type": "boolean"
},
"MAPPING": {
"description": "This is how the given domain will access the symbol.",
"type": "string"
},
"OPTIONS": {
"type": "object"
},
"SCHEMA": {
"allOf": [
{
"$ref": "tchmi:server#/definitions/schemaRef"
},
{
"description": "Json schema describing the output parameters of the symbol."
}
]
},
"SUBSYMBOL_MAPPING": {
"description": "This sub-path is not forwarded to the extension. The server
automatically browses into the result of the mapped symbol.",
"type": "string"
},
"USEMAPPING": {
"default": true,
"description": "If true the mapping will be used, otherwise the symbol will be evaluated
in the server.",
"type": "boolean"
}
},
"required": [
"DOMAIN",
"MAPPING",
"ACCESS"
],
"type": "object"
}
TE2000 Version: 2.5.1 1047

Server
15.1.1.1.15 filter
Filter
General Information
Domain TcHmiSrv
Schema
Type array
JSON Schema
{
"description": "descFilter",
"items": {
"oneOf": [
{
"configDescription": "descComparator",
"properties": {
"comparator": {
"enum": [
"==",
"!=",
"<",
">",
"<=",
">=",
"contains",
"contains not",
"== [ignore case]",
"!= [ignore case]",
"contains [ignore case]",
"contains not [ignore case]"
],
"type": "string"
},
"path": {
"type": "string"
},
"value": {
"oneOf": [
{
"type": "string"
},
{
"type": "number"
},
{
"type": "boolean"
},
{
"type": "null"
}
]
}
},
"required": [
"comparator",
"value"
],
"type": "object"
},
{
"configDescription": "descLogic",
"properties": {
"logic": {
"enum": [
"AND",
"OR"
],
"type": "string"
1048 Version: 2.5.1 TE2000

Server
}
},
"required": [
"logic"
],
"type": "object"
},
{
"$ref": "tchmi:server#/definitions/filter"
}
]
},
"type": "array"
}
15.1.1.1.16 userLocale
User locale
General Information
Domain TcHmiSrv
Schema
Enumeration type string

Default value "project"
TE2000 Version: 2.5.1 1049

Server
Enumeration value
af
af-ZA
ar
ar-AE
ar-BH
ar-DZ
ar-EG
ar-IQ
ar-JO
ar-KW
ar-LB
ar-LY
ar-MA
ar-OM
ar-QA
ar-SA
ar-SY
ar-TN
ar-YE
az
az-AZ
be
be-BY
bg
bg-BG
bs-BA
ca
ca-ES
cs
cs-CZ
cy
cy-GB
da
da-DK
de
de-AT
de-CH
de-DE
de-LI
de-LU
dv
dv-MV
el
el-GR
en
en-AU
en-BZ
en-CA
1050 Version: 2.5.1 TE2000

Server
Enumeration value
en-CB
en-GB
en-IE
en-JM
en-NZ
en-PH
en-TT
en-US
en-ZA
en-ZW
eo
es
es-AR
es-BO
es-CL
es-CO
es-CR
es-DO
es-EC
es-ES
es-GT
es-HN
es-MX
es-NI
es-PA
es-PE
es-PR
es-PY
es-SV
es-UY
es-VE
et
et-EE
eu
eu-ES
fa
fa-IR
fi
fi-FI
fo
fo-FO
fr
fr-BE
fr-CA
fr-CH
fr-FR
fr-LU
fr-MC
TE2000 Version: 2.5.1 1051

Server
Enumeration value
ga-IE
gl
gl-ES
gu
gu-IN
he
he-IL
hi
hi-IN
hr
hr-BA
hr-HR
hu
hu-HU
hy
hy-AM
id
id-ID
is
is-IS
it
it-CH
it-IT
ja
ja-JP
ka
ka-GE
kk
kk-KZ
kn
kn-IN
ko
ko-KR
kok
kok-IN
ky
ky-KG
lt
lt-LT
lv
lv-LV
mi
mi-NZ
mk
mk-MK
mn
mn-MN
mr
1052 Version: 2.5.1 TE2000

Server
Enumeration value
mr-IN
ms
ms-BN
ms-MY
mt
mt-MT
nb
nb-NO
nl
nl-BE
nl-NL
nn-NO
ns
ns-ZA
pa
pa-IN
pl
pl-PL
ps
ps-AR
pt
pt-BR
pt-PT
qu
qu-BO
qu-EC
qu-PE
ro
ro-RO
ru
ru-RU
sa
sa-IN
se
se-FI
se-NO
se-SE
sk
sk-SK
sl
sl-SI
so-SO
sq
sq-AL
sr-BA
sr-SP
sv
sv-FI
TE2000 Version: 2.5.1 1053

Server
Enumeration value
sv-SE
sw
sw-KE
syr
syr-SY
ta
ta-IN
te
te-IN
th
th-TH
tl
tl-PH
tn
tn-ZA
tr
tr-TR
tt
tt-RU
ts
uk
uk-UA
ur
ur-PK
uz
uz-UZ
vi
vi-VN
xh
xh-ZA
zh
zh-CN
zh-HK
zh-MO
zh-SG
zh-TW
zu
zu-ZA
client
project
JSON Schema
{
"oneOf": [
{
"$ref": "tchmi:general#/definitions/Locale"
},
{
"default": "project",
"description": "descUserLocale",
"enum": [
"client",
1054 Version: 2.5.1 TE2000

Server
"project"
],
"type": "string"
}
]
}
15.1.1.1.17 userTimeZone
User timezone
General Information
Domain TcHmiSrv
Schema

Default value "project"
TE2000 Version: 2.5.1 1055

Server
Enumeration value
Africa/Abidjan
Africa/Accra
Africa/Addis_Ababa
Africa/Algiers
Africa/Asmara
Africa/Bamako
Africa/Bangui
Africa/Banjul
Africa/Bissau
Africa/Blantyre
Africa/Brazzaville
Africa/Bujumbura
Africa/Cairo
Africa/Casablanca
Africa/Ceuta
Africa/Conakry
Africa/Dakar
Africa/Dar_es_Salaam
Africa/Djibouti
Africa/Douala
Africa/El_Aaiun
Africa/Freetown
Africa/Gaborone
Africa/Harare
Africa/Johannesburg
Africa/Juba
Africa/Kampala
Africa/Khartoum
Africa/Kigali
Africa/Kinshasa
Africa/Lagos
Africa/Libreville
Africa/Lome
Africa/Luanda
Africa/Lubumbashi
Africa/Lusaka
Africa/Malabo
Africa/Maputo
Africa/Maseru
Africa/Mbabane
Africa/Mogadishu
Africa/Monrovia
Africa/Nairobi
Africa/Ndjamena
Africa/Niamey
Africa/Nouakchott
Africa/Ouagadougou
Africa/Porto-Novo
1056 Version: 2.5.1 TE2000

Server
Enumeration value
Africa/Sao_Tome
Africa/Timbuktu
Africa/Tripoli
Africa/Tunis
Africa/Windhoek
America/Adak
America/Anchorage
America/Anguilla
America/Antigua
America/Araguaina
America/Argentina/Buenos_Aires
America/Argentina/Catamarca
America/Argentina/Cordoba
America/Argentina/Jujuy
America/Argentina/La_Rioja
America/Argentina/Mendoza
America/Argentina/Rio_Gallegos
America/Argentina/Salta
America/Argentina/San_Juan
America/Argentina/San_Luis
America/Argentina/Tucuman
America/Argentina/Ushuaia
America/Aruba
America/Asuncion
America/Atikokan
America/Atka
America/Bahia
America/Bahia_Banderas
America/Barbados
America/Belem
America/Belize
America/Blanc-Sablon
America/Boa_Vista
America/Bogota
America/Boise
America/Buenos_Aires
America/Cambridge_Bay
America/Campo_Grande
America/Cancun
America/Caracas
America/Catamarca
America/Cayenne
America/Cayman
America/Chicago
America/Chihuahua
America/Coral_Harbour
America/Cordoba
America/Costa_Rica
TE2000 Version: 2.5.1 1057

Server
Enumeration value
America/Creston
America/Cuiaba
America/Curacao
America/Danmarkshavn
America/Dawson
America/Dawson_Creek
America/Denver
America/Detroit
America/Dominica
America/Edmonton
America/Eirunepe
America/El_Salvador
America/Ensenada
America/Fort_Nelson
America/Fort_Wayne
America/Fortaleza
America/Glace_Bay
America/Godthab
America/Goose_Bay
America/Grand_Turk
America/Grenada
America/Guadeloupe
America/Guatemala
America/Guayaquil
America/Guyana
America/Halifax
America/Havana
America/Hermosillo
America/Indiana/Indianapolis
America/Indiana/Knox
America/Indiana/Marengo
America/Indiana/Petersburg
America/Indiana/Tell_City
America/Indiana/Vevay
America/Indiana/Vincennes
America/Indiana/Winamac
America/Indianapolis
America/Inuvik
America/Iqaluit
America/Jamaica
America/Jujuy
America/Juneau
America/Kentucky/Louisville
America/Kentucky/Monticello
America/Kralendijk
America/La_Paz
America/Lima
America/Los_Angeles
1058 Version: 2.5.1 TE2000

Server
Enumeration value
America/Louisville
America/Lower_Princes
America/Maceio
America/Managua
America/Manaus
America/Marigot
America/Martinique
America/Matamoros
America/Mazatlan
America/Mendoza
America/Menominee
America/Merida
America/Metlakatla
America/Mexico_City
America/Miquelon
America/Moncton
America/Monterrey
America/Montevideo
America/Montreal
America/Montserrat
America/Nassau
America/New_York
America/Nipigon
America/Nome
America/Noronha
America/North_Dakota/Beulah
America/North_Dakota/Center
America/North_Dakota/New_Salem
America/Ojinaga
America/Panama
America/Pangnirtung
America/Paramaribo
America/Phoenix
America/Port-au-Prince
America/Port_of_Spain
America/Porto_Acre
America/Porto_Velho
America/Puerto_Rico
America/Punta_Arenas
America/Rainy_River
America/Rankin_Inlet
America/Recife
America/Regina
America/Resolute
America/Rio_Branco
America/Rosario
America/Santa_Isabel
America/Santarem
TE2000 Version: 2.5.1 1059

Server
Enumeration value
America/Santiago
America/Santo_Domingo
America/Sao_Paulo
America/Scoresbysund
America/Shiprock
America/Sitka
America/St_Barthelemy
America/St_Johns
America/St_Kitts
America/St_Lucia
America/St_Thomas
America/St_Vincent
America/Swift_Current
America/Tegucigalpa
America/Thule
America/Thunder_Bay
America/Tijuana
America/Toronto
America/Tortola
America/Vancouver
America/Virgin
America/Whitehorse
America/Winnipeg
America/Yakutat
America/Yellowknife
Antarctica/Casey
Antarctica/Davis
Antarctica/Macquarie
Antarctica/Mawson
Antarctica/Palmer
Antarctica/Rothera
Antarctica/South_Pole
Antarctica/Syowa
Antarctica/Vostok
Arctic/Longyearbyen
Asia/Aden
Asia/Almaty
Asia/Amman
Asia/Anadyr
Asia/Aqtau
Asia/Aqtobe
Asia/Ashgabat
Asia/Ashkhabad
Asia/Atyrau
Asia/Baghdad
Asia/Bahrain
Asia/Baku
Asia/Bangkok
1060 Version: 2.5.1 TE2000

Server
Enumeration value
Asia/Barnaul
Asia/Beirut
Asia/Bishkek
Asia/Brunei
Asia/Calcutta
Asia/Chita
Asia/Choibalsan
Asia/Chongqing
Asia/Chungking
Asia/Colombo
Asia/Dacca
Asia/Damascus
Asia/Dhaka
Asia/Dili
Asia/Dubai
Asia/Dushanbe
Asia/Famagusta
Asia/Gaza
Asia/Harbin
Asia/Hebron
Asia/Ho_Chi_Minh
Asia/Hong_Kong
Asia/Hovd
Asia/Irkutsk
Asia/Istanbul
Asia/Jakarta
Asia/Jayapura
Asia/Jerusalem
Asia/Kabul
Asia/Kamchatka
Asia/Karachi
Asia/Kashgar
Asia/Kathmandu
Asia/Khandyga
Asia/Kolkata
Asia/Krasnoyarsk
Asia/Kuala_Lumpur
Asia/Kuching
Asia/Kuwait
Asia/Macau
Asia/Magadan
Asia/Makassar
Asia/Manila
Asia/Muscat
Asia/Nicosia
Asia/Novokuznetsk
Asia/Novosibirsk
Asia/Omsk
TE2000 Version: 2.5.1 1061

Server
Enumeration value
Asia/Oral
Asia/Phnom_Penh
Asia/Pontianak
Asia/Pyongyang
Asia/Qatar
Asia/Qyzylorda
Asia/Rangoon
Asia/Riyadh
Asia/Saigon
Asia/Sakhalin
Asia/Samarkand
Asia/Seoul
Asia/Shanghai
Asia/Singapore
Asia/Srednekolymsk
Asia/Taipei
Asia/Tashkent
Asia/Tbilisi
Asia/Tehran
Asia/Tel_Aviv
Asia/Thimbu
Asia/Thimphu
Asia/Tokyo
Asia/Tomsk
Asia/Ujung_Pandang
Asia/Ulaanbaatar
Asia/Ulan_Bator
Asia/Urumqi
Asia/Ust-Nera
Asia/Vientiane
Asia/Vladivostok
Asia/Yakutsk
Asia/Yangon
Asia/Yekaterinburg
Asia/Yerevan
Atlantic/Azores
Atlantic/Bermuda
Atlantic/Canary
Atlantic/Cape_Verde
Atlantic/Faeroe
Atlantic/Faroe
Atlantic/Jan_Mayen
Atlantic/Madeira
Atlantic/Reykjavik
Atlantic/South_Georgia
Atlantic/St_Helena
Atlantic/Stanley
Australia/Adelaide
1062 Version: 2.5.1 TE2000

Server
Enumeration value
Australia/Brisbane
Australia/Broken_Hill
Australia/Canberra
Australia/Currie
Australia/Darwin
Australia/Eucla
Australia/Hobart
Australia/Lindeman
Australia/Lord_Howe
Australia/Melbourne
Australia/Perth
Australia/Queensland
Australia/Sydney
Australia/Yancowinna
Europe/Amsterdam
Europe/Andorra
Europe/Astrakhan
Europe/Athens
Europe/Belfast
Europe/Belgrade
Europe/Berlin
Europe/Bratislava
Europe/Brussels
Europe/Bucharest
Europe/Budapest
Europe/Busingen
Europe/Chisinau
Europe/Copenhagen
Europe/Dublin
Europe/Gibraltar
Europe/Guernsey
Europe/Helsinki
Europe/Isle_of_Man
Europe/Istanbul
Europe/Jersey
Europe/Kaliningrad
Europe/Kiev
Europe/Kirov
Europe/Lisbon
Europe/Ljubljana
Europe/London
Europe/Luxembourg
Europe/Madrid
Europe/Malta
Europe/Mariehamn
Europe/Minsk
Europe/Monaco
Europe/Moscow
TE2000 Version: 2.5.1 1063

Server
Enumeration value
Europe/Nicosia
Europe/Oslo
Europe/Paris
Europe/Podgorica
Europe/Prague
Europe/Riga
Europe/Rome
Europe/Samara
Europe/San_Marino
Europe/Sarajevo
Europe/Saratov
Europe/Simferopol
Europe/Skopje
Europe/Sofia
Europe/Stockholm
Europe/Tallinn
Europe/Tirane
Europe/Tiraspol
Europe/Ulyanovsk
Europe/Uzhgorod
Europe/Vaduz
Europe/Vatican
Europe/Vienna
Europe/Vilnius
Europe/Volgograd
Europe/Warsaw
Europe/Zagreb
Europe/Zaporozhye
Europe/Zurich
Indian/Antananarivo
Indian/Chagos
Indian/Christmas
Indian/Cocos
Indian/Comoro
Indian/Kerguelen
Indian/Mahe
Indian/Maldives
Indian/Mauritius
Indian/Mayotte
Indian/Reunion
Pacific/Apia
Pacific/Auckland
Pacific/Bougainville
Pacific/Chatham
Pacific/Chuuk
Pacific/Easter
Pacific/Efate
Pacific/Enderbury
1064 Version: 2.5.1 TE2000

Server
Enumeration value
Pacific/Fakaofo
Pacific/Fiji
Pacific/Funafuti
Pacific/Galapagos
Pacific/Gambier
Pacific/Guadalcanal
Pacific/Guam
Pacific/Honolulu
Pacific/Johnston
Pacific/Kiritimati
Pacific/Kosrae
Pacific/Kwajalein
Pacific/Majuro
Pacific/Marquesas
Pacific/Midway
Pacific/Nauru
Pacific/Niue
Pacific/Norfolk
Pacific/Noumea
Pacific/Pago_Pago
Pacific/Palau
Pacific/Pitcairn
Pacific/Pohnpei
Pacific/Ponape
Pacific/Port_Moresby
Pacific/Rarotonga
Pacific/Saipan
Pacific/Samoa
Pacific/Tahiti
Pacific/Tarawa
Pacific/Tongatapu
Pacific/Truk
Pacific/Wake
Pacific/Wallis
Pacific/Yap
UTC
client
project
JSON Schema
{
"oneOf": [
{
"$ref": "tchmi:general#/definitions/TimeZone"
},
{
"default": "project",
"description": "descUserTimeZone",
"enum": [
"client",
"project"
],
"type": "string"
TE2000 Version: 2.5.1 1065

Server
}
]
}
15.1.1.1.18 userGroups
User groups
General Information
Domain TcHmiSrv
Schema
Type array
Unique items Yes
JSON Schema
{
"description": "descUserGroups",
"items": {
"configDescription": "DESC_GROUP",
"optionMethod": {
"symbol": "TcHmiSrv.Config::USERGROUPS"
},
"type": "string"
},
"type": "array",
"uniqueItems": true
}
15.1.1.1.19 eventFilter
Event filter
General Information
Domain TcHmiSrv
Schema
Type array
JSON Schema
{
"description": "descEventFilter",
"items": {
"anyOf": [
{
"properties": {
"comparator": {
"enum": [
"==",
"!=",
"contains",
"contains not",
"== [ignore case]",
"!= [ignore case]",
],
"type": "string"
},
"path": {
"enum": [
1066 Version: 2.5.1 TE2000

Server
"domain",
"sourceDomain",
"name",
"text",
"sessionId"
],
"type": "string"
},
"value": {
"type": "string"
}
},
"required": [
"path",
"comparator",
"value"
],
"type": "object"
},
{
"properties": {
"comparator": {
"enum": [
"==",
"!=",
"<",
">",
"<=",
">="
],
"type": "string"
},
"path": {
"enum": [
"id"
],
"type": "string"
},
"value": {
"type": "number"
}
},
"required": [
"path",
"comparator",
"value"
],
"type": "object"
},
{
"properties": {
"comparator": {
"enum": [
"==",
"!=",
"<",
">",
"<=",
">="
],
"type": "string"
},
"path": {
"enum": [
"timeRaised"
],
"type": "string"
},
"value": {
"type": "string"
}
},
"required": [
"path",
"comparator",
"value"
],
"type": "object"
},
TE2000 Version: 2.5.1 1067

Server
{
"properties": {
"comparator": {
"enum": [
"==",
"!=",
"<",
">",
"<=",
">="
],
"type": "string"
},
"path": {
"enum": [
"timeCleared",
"timeConfirmed"
],
"type": "string"
},
"value": {
}
},
"required": [
"path",
"comparator",
"value"
],
"type": "object"
},
{
"properties": {
"comparator": {
"enum": [
"==",
"!=",
"<",
">",
"<=",
">="
],
"type": "string"
},
"path": {
"enum": [
"type"
],
"type": "string"
},
"value": {
"enum": [
0,
1
],
"options": [
{
"label": "ENUM_0_MESSAGE",
"value": 0
},
{
"label": "ENUM_1_ALARM",
"value": 1
}
],
"type": "integer"
}
},
"required": [
"path",
"comparator",
"value"
],
"type": "object"
},
{
"properties": {
"comparator": {
"enum": [
"==",
1068 Version: 2.5.1 TE2000

Server
"!=",
"<",
">",
"<=",
">="
],
"type": "string"
},
"path": {
"enum": [
"severity"
],
"type": "string"
},
"value": {
}
},
"required": [
"path",
"comparator",
"value"
],
"type": "object"
},
{
"properties": {
"comparator": {
"enum": [
"==",
"!=",
"<",
">",
"<=",
">="
],
"type": "string"
},
"path": {
"enum": [
"alarmState"
],
"type": "string"
},
"value": {
"$ref": "tchmi:server#/definitions/alarmState"
}
},
"required": [
"path",
"comparator",
"value"
],
"type": "object"
},
{
"properties": {
"comparator": {
"enum": [
"==",
"!=",
"<",
">",
"<=",
">="
],
"type": "string"
},
"path": {
"enum": [
"confirmationState"
],
"type": "string"
},
"value": {
"$ref": "tchmi:server#/definitions/confirmationState"
}
},
"required": [
"path",
TE2000 Version: 2.5.1 1069

Server
"comparator",
"value"
],
"type": "object"
},
{
"properties": {
"comparator": {
"enum": [
"==",
"!="
],
"type": "string"
},
"path": {
"enum": [
"isActive"
],
"type": "string"
},
"value": {
"type": "boolean"
}
},
"required": [
"path",
"comparator",
"value"
],
"type": "object"
},
{
"properties": {
"comparator": {
"enum": [
"==",
"!=",
"<",
">",
"<=",
">=",
"contains",
"contains not",
"== [ignore case]",
"!= [ignore case]",
],
"type": "string"
},
"path": {
"pattern": "^params::",
"type": "string"
},
"value": {
"oneOf": [
{
"type": "string"
},
{
"type": "number"
},
{
"type": "boolean"
}
]
}
},
"required": [
"path",
"comparator",
"value"
],
"type": "object"
},
{
"properties": {
"logic": {
"enum": [
"AND",
1070 Version: 2.5.1 TE2000

Server
"OR"
],
"type": "string"
}
},
"required": [
"logic"
],
"type": "object"
},
{
"$ref": "tchmi:server#/definitions/eventFilter"
}
]
},
"type": "array"
}
15.1.1.2 General Properties
15.1.1.2.1 Project name

The name of the HMI project.
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::PROJECTNAME
Property is hidden No
Contained in every configuration by default No
Schema
Type string
JSON Schema
{
"description": "DESC_PROJECTNAME",
"propertyOrder": 1,
"type": "string"
}
15.1.1.2.2 Project version

This is the version of the HMI project that has been published to this server.
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::PROJECTVERSION
Schema
Type string
Format version
TE2000 Version: 2.5.1 1071

Server
JSON Schema
{
"description": "DESC_PROJECTVERSION",
"format": "version",
"propertyOrder": 2,
"type": "string"
}
15.1.1.2.3 Default Locale

Leave empty to use client locale.
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::DEFAULTLOCALE
JSON Schema
{
"allOf": [
{
"oneOf": [
{
},
{
"default": "client",
"enum": [
"client"
],
"type": "string"
}
]
},
{
"configDescription": "DESC_LOCALE",
"propertyOrder": 8
}
]
}
15.1.1.2.4 Default timezone

Leave empty to use client timezone.
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::DEFAULTTIMEZONE
JSON Schema
{
"allOf": [
{
"oneOf": [
{
"$ref": "tchmi:general#/definitions/TimeZone"
},
{
1072 Version: 2.5.1 TE2000

Server
"enum": [
"client"
],
"type": "string"
}
]
},
{
"configDescription": "DESC_TIMEZONE",
"propertyOrder": 9
}
]
}
15.1.1.2.5 Default Time Locale

Leave empty to use client locale.
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::DEFAULTTIMEFORMATLOCALE
JSON Schema
{
"allOf": [
{
"oneOf": [
{
},
{
"enum": [
"client"
],
"type": "string"
}
]
},
{
"configDescription": "DESC_LOCALE",
"propertyOrder": 10
}
]
}
15.1.1.2.6 Configurations
The names of all existing configurations.
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::CONFIGURATIONS
Schema
Type array
Unique items Yes
TE2000 Version: 2.5.1 1073

Server
Default value
[
"remote"
]
JSON Schema
{
"default": [
"remote"
],
"description": "DESC_CONFIGURATIONS",
"items": {
"type": "string"
},
"propertyOrder": 5,
"type": "array",
"uniqueItems": true
}
15.1.1.2.7 Files
Special handling and permissions for specific files or directories.
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::FILES
Schema
Type object
JSON Schema
{
"additionalProperties": {
"default": {
"ACCESS": 3
},
"properties": {
"ACCESS": {
},
"FILESHTTPHEADERS": {
"format": "multiline",
"type": "string"
},
"HTTPSTATUSCODE": {
"enum": [
"",
"301",
"302",
"307",
"308",
"401",
"403",
"404"
],
"type": "string"
},
"LOGINPAGE": {
"type": "string"
}
},
"type": "object"
},
"description": "DESC_FILES",
1074 Version: 2.5.1 TE2000

Server
"propertyOrder": 11,
"type": "object"
}
15.1.1.2.8 Virtual directories

Virtual directories are used to specify which folders paths on the file system should be served by the web
server.
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::VIRTUALDIRECTORIES
Contained in every configuration by default Yes
Schema
Type object
Minimum number of properties 1
Default value
{
"/": "www"
}
JSON Schema
{
"format": "filename",
"type": "string"
},
"default": {
"/": "www"
},
"defaultConfigurable": true,
"description": "DESC_VIRTUALDIRECTORIES",
"minProperties": 1,
"type": "object"
}
15.1.1.2.9 Authentication required

Authentication should only be disabled on private networks.
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::REQUIREAUTH
Schema

Default value 2
TE2000 Version: 2.5.1 1075

Server
Options
Value Label
0 None
1 Authentication only for remote access
2 Always authenticate
JSON Schema
{
"default": 2,
"description": "DESC_REQUIREAUTH",
"enum": [
0,
1,
2
],
"options": [
{
"label": "ENUM_NONE",
"value": 0
},
{
"label": "ENUM_REMOTE",
"value": 1
},
{
"label": "ENUM_ALWAYS",
"value": 2
}
],
"type": "integer"
}
15.1.1.2.10 Extensions
Server extensions are used to integrate additional functionality into the server.
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::EXTENSIONS
Schema
Type object
Default value
{
"ADS": {
"NAME": "TcHmiAds",
"PATH": "TcHmiAds",
"REQUIRED": true,
"STARTUPTYPE": 1
},
"TcHmiLua": {
"NAME": "TcHmiLua",
"PATH": "TcHmiLua",
"REQUIRED": true,
"STARTUPTYPE": 1
},
"TcHmiSqliteLogger": {
"NAME": "TcHmiSqliteLogger",
"PATH": "TcHmiSqliteLogger",
1076 Version: 2.5.1 TE2000

Server
"REQUIRED": true,
"STARTUPTYPE": 0
},
"TcHmiUserManagement": {
"NAME": "TcHmiUserManagement",
"PATH": "TcHmiUserManagement",
"REQUIRED": true,
"STARTUPTYPE": 1
}
}
JSON Schema
{
"properties": {
"ENABLED": {
"default": true,
"type": "boolean"
},
"NAME": {
"type": "string"
},
"PATH": {
"configDescription": "DESC_EXTENSION_PATH",
"type": "string"
},
"PROCESSID": {
"default": -1,
"hidden": true,
"type": "integer"
},
"REQUIRED": {
"default": false,
"readOnly": true,
"type": "boolean"
},
"STARTUPTYPE": {
"$ref": "tchmi:server#/definitions/timing"
}
},
"readOnly": {
"$data": "#/properties/EXTENSIONS/additionalProperties/properties/REQUIRED"
},
"required": [
"NAME",
"ENABLED",
"STARTUPTYPE"
],
"title": "TITLE_EXTENSION",
"type": "object"
},
"default": {
"ADS": {
"NAME": "TcHmiAds",
"PATH": "TcHmiAds",
"REQUIRED": true,
"STARTUPTYPE": 1
},
"TcHmiLua": {
"NAME": "TcHmiLua",
"PATH": "TcHmiLua",
"REQUIRED": true,
"STARTUPTYPE": 1
},
"TcHmiSqliteLogger": {
"NAME": "TcHmiSqliteLogger",
"PATH": "TcHmiSqliteLogger",
"REQUIRED": true,
"STARTUPTYPE": 0
},
"NAME": "TcHmiUserManagement",
"PATH": "TcHmiUserManagement",
"REQUIRED": true,
"STARTUPTYPE": 1
}
TE2000 Version: 2.5.1 1077

Server
},
"description": "DESC_EXTENSION",
"propertyOrder": 4,
"required": [
"TcHmiSqliteLogger",
"TcHmiLua",
"TcHmiUserManagement",
"ADS"
],
"type": "object"
}
15.1.1.2.11 User groups

User groups have access permissions to specific symbols and files. Permissions are assigned to users
based on user groups they are a member of.
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::USERGROUPS
Schema
Type object
Default value
{
"__SystemAdministrators": {
"ENABLED": true,
"FILEACCESS": 3,
"SYMBOLACCESS": 3
},
"__SystemGuests": {
"ENABLED": true,
"FILEACCESS": 0,
"FILES": {
"/Config/ServerState": 1,
"/FavIcon.ico": 1
},
"SYMBOLACCESS": 0,
"SYMBOLS": {
"DefaultAuthExtension": 1,
"DefaultUserGroup": 1,
"GetCurrentUser": 3,
"GetSymbolAccess": 3,
"Heartbeat": 3,
"IsAuthRequired": 3,
"ListDomains": 3,
"ListUserNames": 3,
"Login": 3,
"Logout": 3,
"SetLocale": 3,
"Unsubscribe": 3,
"UserSelectType": 1
}
},
"__SystemUsers": {
"ENABLED": true,
"FILEACCESS": 3,
"FILES": {
"/Config": 1
},
"SYMBOLACCESS": 0,
"SYMBOLS": {
"ChangeUserSettings": 3,
"ConfirmAlarm": 3,
"CreateEvent": 3,
1078 Version: 2.5.1 TE2000

Server
"Diagnostics": 3,
"GetConfiguration": 3,
"GetDefinitions": 3,
"GetSchema": 3,
"Heartbeat": 3,
"ListDomains": 3,
"ListEvents": 3,
"ListSymbols": 3,
"ListUserNames": 3,
"LocalizeText": 3,
"Login": 3,
"Logout": 3,
"SetLocale": 3,
"SubscribeEvents": 3,
"Unsubscribe": 3,
"UnsubscribeEvents": 3,
"UpdateEventsSubscription": 3
}
}
}
JSON Schema
{
"configDescription": "DESC_USERGROUP",
"properties": {
"ENABLED": {
"default": true,
"type": "boolean"
},
"FILEACCESS": {
},
"FILES": {
"allOf": [
{
},
{
"configDescription": "DESC_FILE"
}
]
},
"type": "object"
},
"SYMBOLACCESS": {
"allOf": [
{
},
{
"configDescription": "DESC_SYMBOLACCESS"
}
]
},
"SYMBOLS": {
"allOf": [
{
},
{
"configDescription": "DESC_SYMBOL"
},
{
"optionMethod": {
"symbol": "ListSymbolNames"
}
}
]
},
"configDescription": "DESC_USERGROUPS_SYMBOLS",
TE2000 Version: 2.5.1 1079

Server
"type": "object"
}
},
"required": [
"ENABLED",
"SYMBOLACCESS",
"FILEACCESS",
"SYMBOLS",
"FILES"
],
"type": "object"
},
"default": {
"__SystemAdministrators": {
"ENABLED": true,
"FILEACCESS": 3,
"SYMBOLACCESS": 3
},
"__SystemGuests": {
"ENABLED": true,
"FILEACCESS": 0,
"FILES": {
"/Config/ServerState": 1,
"/FavIcon.ico": 1
},
"SYMBOLACCESS": 0,
"SYMBOLS": {
"Heartbeat": 3,
"ListDomains": 3,
"ListUserNames": 3,
"Login": 3,
"Logout": 3,
"SetLocale": 3,
"Unsubscribe": 3,
"UserSelectType": 1
}
},
"__SystemUsers": {
"ENABLED": true,
"FILEACCESS": 3,
"FILES": {
"/Config": 1
},
"SYMBOLACCESS": 0,
"SYMBOLS": {
"ChangeUserSettings": 3,
"ConfirmAlarm": 3,
"CreateEvent": 3,
"Diagnostics": 3,
"GetConfiguration": 3,
"GetDefinitions": 3,
"GetSchema": 3,
"Heartbeat": 3,
"ListDomains": 3,
"ListEvents": 3,
"ListSymbols": 3,
"ListUserNames": 3,
"LocalizeText": 3,
"Login": 3,
"Logout": 3,
"SetLocale": 3,
"SubscribeEvents": 3,
"Unsubscribe": 3,
"UnsubscribeEvents": 3,
"UpdateEventsSubscription": 3
}
}
},
"description": "DESC_USERGROUPS",
"propertyOrder": 6,
1080 Version: 2.5.1 TE2000

Server
"required": [
"__SystemAdministrators",
"__SystemUsers",
"__SystemGuests"
],
"type": "object"
}
15.1.1.2.12 Members of user groups

The account settings and group memberships of all users from all authentication extensions.
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::USERGROUPUSERS
Schema
Type object
Default value
{
"__SystemAdministrator": {
"USERGROUPUSERS_GROUPS": [
"__SystemAdministrators"
],
"USERGROUPUSERS_LOCALE": "project"
},
"__SystemGuest": {
"__SystemGuests"
],
}
}
}
JSON Schema
{
"configDescription": "DESC_USERNAME",
"optionMethod": {
"symbol": "ListUserNames"
},
"properties": {
"USERGROUPUSERS_AUTO_LOGOFF": {
"default": "PT0S",
"format": "timespan",
"type": "string"
},
"USERGROUPUSERS_GROUPS": {
"$ref": "tchmi:server#/definitions/userGroups"
},
"USERGROUPUSERS_LOCALE": {
"allOf": [
{
"$ref": "tchmi:server#/definitions/userLocale"
},
{
"configDescription": "DESC_LOCALE"
}
]
},
TE2000 Version: 2.5.1 1081

Server
"USERGROUPUSERS_TIMEFORMATLOCALE": {
"allOf": [
{
"$ref": "tchmi:server#/definitions/userLocale"
},
{
"configDescription": "DESC_LOCALE"
}
]
},
"USERGROUPUSERS_TIMEZONE": {
"allOf": [
{
"$ref": "tchmi:server#/definitions/userTimeZone"
},
{
"configDescription": "DESC_TIMEZONE"
}
]
}
},
"required": [
"USERGROUPUSERS_LOCALE",
"USERGROUPUSERS_GROUPS",
"USERGROUPUSERS_AUTO_LOGOFF"
],
"type": "object"
},
"configDescription": "DESC_AUTHENTICATION_DOMAIN",
"type": "object"
},
"default": {
"__SystemAdministrators"
],
},
"__SystemGuest": {
"__SystemGuests"
],
}
}
},
"description": "DESC_USERGROUPUSERS",
"propertyOrder": 7,
"required": [
"TcHmiUserManagement"
],
"type": "object"
}
15.1.1.2.13 Default document
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::DEFAULTDOCUMENT
Schema
Type array
Unique items Yes
1082 Version: 2.5.1 TE2000

Server
Default value
[
"Default.html"
]
JSON Schema
{
"default": [
"Default.html"
],
"items": {
"type": "string"
},
"type": "array",
"uniqueItems": true
}
15.1.1.2.14 Internal storage
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::INTERNALSTORAGE
Property is hidden Yes
Schema
Type object
JSON Schema
{
"hidden": true,
"type": "object"
}
15.1.1.2.15 Remote Server

Connections to other HMI servers. The mapped symbols of remote servers can be used like symbols from
extensions of the current server.
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::REMOTESERVERS
Schema
Type object
JSON Schema
{
"properties": {
TE2000 Version: 2.5.1 1083

Server
"REMOTE_CONNECT_TIMEOUT": {
"default": "PT5S",
"type": "string"
},
"REMOTE_ENABLED": {
"default": true,
"type": "boolean"
},
"REMOTE_PASSWORD": {
"default": "",
"format": "encrypted",
"propertyOrder": 3,
"type": "string"
},
"REMOTE_URL": {
"propertyOrder": 1,
"type": "string"
},
"REMOTE_USERNAME": {
"configDescription": "DESC_REMOTE_USERNAME",
"default": "",
"propertyOrder": 2,
"type": "string"
}
},
"required": [
"REMOTE_ENABLED",
"REMOTE_URL",
"REMOTE_USERNAME",
"REMOTE_PASSWORD",
"REMOTE_CONNECT_TIMEOUT"
],
"title": "REMOTESERVERS_TITLE",
"type": "object"
},
"configDescription": "DESC_REMOTESERVERS",
"description": "DESC_REMOTESERVERS",
"type": "object"
}
15.1.1.2.16 Allowed certificates for remote servers

Certificates of the remote servers.
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::REMOTESERVERS_CERTIFICATES
Schema
Type array
JSON Schema
{
"configDescription": "DESC_REMOTESERVERS_CERTIFICATES",
"description": "DESC_REMOTESERVERS_CERTIFICATES",
"items": {
"configDescription": "DESC_PEM_CERT",
"default": "",
"format": "certificate",
"type": "string"
},
"type": "array"
}
1084 Version: 2.5.1 TE2000

Server
15.1.1.3 Advanced
15.1.1.3.1 Maximum number of connections

Maximum number of concurrent connections.
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::MAXSESSIONS
Category Advanced
Schema
Type integer
Minimum 1
Maximum 4294967295
Default value 128
JSON Schema
{
"allOf": [
{
"$ref": "tchmi:general#/definitions/UINT32"
},
{
"category": "CATEGORY_ADVANCED",
"default": 128,
"description": "DESC_MAXSESSIONS",
"minimum": 1,
"propertyOrder": 8
}
]
}
15.1.1.3.2 Size of thread pool

Server restart required.
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::THREADPOOLSIZE
Category Advanced
Schema
Type integer
Minimum 4
Maximum 128
Default value 32
TE2000 Version: 2.5.1 1085

Server
JSON Schema
{
"allOf": [
{
"$ref": "tchmi:server#/definitions/threadPoolSize"
},
{
"configDescription": "DESC_THREADPOOLSIZE",
"default": 32,
"propertyOrder": 14
}
]
}
15.1.1.3.3 Flood protection

Allowed WebSocket-requests per client IP per second
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::FLOODPROTECTION
Category Advanced
Schema
Type integer
Maximum 4294967295
Default value 500
JSON Schema
{
"allOf": [
{
},
{
"configDescription": "DESC_FLOODPROTECTION",
"default": 500,
"propertyOrder": 10
}
]
}
15.1.1.3.4 Timeout for unloading extensions

It should not take longer than this to unload a server extension.
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::SHUTDOWNTIMEOUT
Category Advanced
1086 Version: 2.5.1 TE2000

Server
Schema
Type string
Format timespan
Minimum PT1S
Default value "PT10S"
JSON Schema
{
"default": "PT10S",
"description": "DESC_SHUTDOWNTIMEOUT",
"formatMinimum": "PT1S",
"type": "string"
}
15.1.1.3.5 Upload timeout

Upload requests will be rejected if they do not succeed after this duration.
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::UPLOADTIMEOUT
Category Advanced
Schema
Type string
Format timespan
Minimum PT1S
JSON Schema
{
"default": "PT20S",
"description": "DESC_UPLOADTIMEOUT",
"type": "string"
}
15.1.1.3.6 Size of chunk packet

Downloaded files will be split into chunks of this size.
TE2000 Version: 2.5.1 1087

Server
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::CHUNKSIZE
Category Advanced
Schema
Type integer
Maximum 4294967295
Default value 1048576
JSON Schema
{
"allOf": [
{
},
{
"configDescription": "DESC_CHUNKSIZE",
"default": 1048576,
"displayClass": "byte",
"propertyOrder": 4
}
]
}
15.1.1.3.7 Size of video segments

HTTP range requests (streamed videos) will be split in chunks of this size.
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::VIDEOSEGMENTSIZE
Category Advanced
Schema
Type integer
Maximum 4294967295
JSON Schema
{
"allOf": [
{
},
{
"configDescription": "DESC_RANGE_REQUEST_SIZE",
"default": 1048576,
"propertyOrder": 5
1088 Version: 2.5.1 TE2000

Server
}
]
}
15.1.1.3.8 Checksum enabled

Checksum of uploaded files will be validated during publishing.
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::CHECKSUMENABLED
Category Advanced
Schema
Type boolean
Default value True
JSON Schema
{
"configDescription": "DESC_CHECKSUMENABLED",
"default": true,
"propertyOrder": 3,
"type": "boolean"
}
15.1.1.3.9 Default logging extension

When the 'ListEvents' function symbol is called, the events are requested from the default event extension.
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::DEFAULTEVENTEXTENSION
Category Advanced
Schema
Type string
Default value "TcHmiSqliteLogger"
JSON Schema
{
"default": "TcHmiSqliteLogger",
"description": "DESC_DEFAULTEVENTEXTENSION",
"hidden": true,
"type": "string"
}
TE2000 Version: 2.5.1 1089

Server
15.1.1.3.10 Log diagnostics data for domains

Logging diagnostics data are useful to diagnose problems but they have a negative impact on performance.
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::DIAGNOSTICS_DOMAINS
Category Advanced
Schema
Type array
Default value
[]
JSON Schema
{
"default": [],
"description": "DESC_DIAGNOSTICS_DOMAINS",
"items": {
"minLength": 1,
"optionMethod": {
},
"type": "string"
},
"propertyOrder": 2,
"type": "array"
}
15.1.1.3.11 Maximum size of HTTP header

Requests with HTTP headers that are larger than this limit will be rejected by the web server.
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::MAXHTTPHEADERSIZE
Category Advanced
Schema
Type integer
Minimum 1024
Default value 32768
JSON Schema
{
"default": 32768,
"description": "DESC_MAXHTTPHEADERSIZE",
1090 Version: 2.5.1 TE2000

Server
"minimum": 1024,
"propertyOrder": 6,
"type": "integer"
}
15.1.1.3.12 Maximum request size

Requests that are larger than this limit will be rejected by the web server.
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::MAXREQUESTSIZE
Category Advanced
Schema
Type integer
Minimum 1024
JSON Schema
{
"default": 1048576,
"description": "DESC_MAXREQUESTSIZE",
"minimum": 1024,
"propertyOrder": 7,
"type": "integer"
}
15.1.1.3.13 Show configuration hints

Configuration hints inform about problematic settings or combinations of settings in the configurations of the
server or server extensions.
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::SHOW_CONFIGURATION_HINTS
Category Advanced
Schema
Type boolean
Default value True
JSON Schema
{
"default": true,
"description": "DESC_SHOW_CONFIGURATION_HINTS",
TE2000 Version: 2.5.1 1091

Server
"propertyOrder": 1,
"type": "boolean"
}
15.1.1.3.14 Flood protection HTTP

Allowed HTTP-requests per client IP per second per URI
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::HTTP_FLOODPROTECTION
Category Advanced
Schema
Type integer
Maximum 4294967295
Default value 10
JSON Schema
{
"allOf": [
{
},
{
"configDescription": "DESC_HTTP_FLOODPROTECTION",
"default": 10,
"propertyOrder": 10
}
]
}
15.1.1.3.15 Init timeout

It should not take longer than this to initialize a server extension.
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::INITTIMEOUT
Category Advanced
Schema
Type string
Format timespan
Minimum PT1S
1092 Version: 2.5.1 TE2000

Server
JSON Schema
{
"default": "PT10S",
"description": "DESC_INITTIMEOUT",
"type": "string"
}
15.1.1.3.16 Maximum connections per client

Keep in mind that web browsers might open multiple simultaneous connections to the same server to
achieve faster load times.
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::MAXCONNECTIONSPERCLIENT
Category Advanced
Schema
Type integer
Minimum 1
Default value 32
JSON Schema
{
"default": 32,
"description": "DESC_MAXCONNECTIONSPERCLIENT",
"minimum": 1,
"propertyOrder": 9,
"type": "integer"
}
15.1.1.3.17 Enable server updates

When server updates are enabled remote servers can be updated to new versions during the publish
process.
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::ENABLE_SERVER_UPDATE
Category Advanced
Schema
Type boolean
Default value True
TE2000 Version: 2.5.1 1093

Server
JSON Schema
{
"configDescription": "DESC_ENABLE_SERVER_UPDATE",
"default": true,
"type": "boolean"
}
15.1.1.3.18 Disabled configuration hints

Hints which should not be shown anymore.
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::DISABLED_CONFIGURATION_HINTS
Category Advanced
Schema
Type array
Unique items Yes
JSON Schema
{
"description": "DESC_DISABLED_CONFIG_HINTS",
"items": {
"type": "string"
},
"propertyOrder": 2,
"type": "array",
"uniqueItems": true
}
15.1.1.4 Security
15.1.1.4.1 Default authentication extension

Multiple authentication extensions can be used at the same time. The default authentication extension is
automatically selected on the login page.
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::DEFAULTAUTHEXTENSION
Category Security
Schema
Type string
Default value "TcHmiUserManagement"
1094 Version: 2.5.1 TE2000

Server
JSON Schema
{
"category": "CATEGORY_SECURITY",
"default": "TcHmiUserManagement",
"description": "DESC_DEFAULTAUTHEXTENSION",
"optionMethod": {
"filter": [
{
"comparator": "==",
"path": "authExtension",
"value": true
}
],
},
"type": "string"
}
15.1.1.4.2 Select User by

If there are only a few user accounts, selecting the user account using a list box can simplify the login
process.
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::USERSELECTTYPE
Category Security
Schema

Default value 0
Options
Value Label
0 List box
1 Text field
JSON Schema
{
"default": 0,
"description": "DESC_USERSELECTTYPE",
"enum": [
0,
1
],
"options": [
{
"label": "ENUM_COMBOBOX",
"value": 0
},
{
"label": "ENUM_TEXTFIELD",
"value": 1
}
],
"type": "integer"
}
TE2000 Version: 2.5.1 1095

Server
15.1.1.4.3 Auto logoff

Can be overridden for individual user accounts. This value is used when no other value is specified for the
current user.
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::AUTO_LOGOFF
Category Security
Schema
Type string
Format timespan
Default value "P30D"
JSON Schema
{
"default": "P30D",
"description": "DESC_AUTO_LOGOFF",
"propertyOrder": 2,
"type": "string"
}
15.1.1.4.4 Default user group

All user accounts are automatically added to this user group.
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::DEFAULTUSERGROUP
Category Security
Schema
Type string
Default value "__SystemUsers"
JSON Schema
{
"default": "__SystemUsers",
"description": "DESC_DEFAULTUSERGROUP",
"optionMethod": {
},
"type": "string"
}
1096 Version: 2.5.1 TE2000

Server
15.1.1.4.5 Login user automatically
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::AUTO_LOGINUSER
Category Security
Schema
Type string
Default value
JSON Schema
{
"default": "",
"optionMethod": {
},
"type": "string"
}
15.1.1.4.6 Certificate
PEM or PFX formatted certificate.
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::CERTIFICATE
Category Security
Schema
Type string
Format certificate
Default value ""
JSON Schema
{
"default": "",
"propertyOrder": 6,
"type": "string"
}
15.1.1.4.7 Duration for default certificate

Shorter validity durations limit the damage from key compromise and mis-issuance. Stolen keys and mis-
issued certificates are valid for a shorter period of time.
TE2000 Version: 2.5.1 1097

Server
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::CERTIFICATEEXPIRATION
Category Security
Schema
Type string
Format timespan
JSON Schema
{
"default": "P14000D",
"description": "DESC_CERTIFICATEEXPIRATION",
"hidden": true,
"type": "string"
}
15.1.1.4.8 Self signed root certificate

This certificate is used to create self-signed server certificates.
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::SELFSIGNEDROOTCA
Category Security
Schema
Type string
Format certificate
Default value ""
JSON Schema
{
"default": "",
"description": "DESC_SELFSIGNEDROOTCA",
"propertyOrder": 7,
"type": "string"
}
15.1.1.4.9 Self signed root certificate key

This key is used to decrypt the root certificate.
1098 Version: 2.5.1 TE2000

Server
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::SELFSIGNEDROOTCAKEY
Category Security
Schema
Type string
Format base64
Default value ""
JSON Schema
{
"default": "",
"description": "DESC_SELFSIGNEDROOTCAKEY",
"format": "base64",
"propertyOrder": 8,
"type": "string"
}
15.1.1.4.10 Key
This key is used to decrypt the certificate.
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::KEY
Category Security
Schema
Type string
Format base64
Default value ""
JSON Schema
{
"default": "",
"description": "DESC_KEY",
"format": "base64",
"propertyOrder": 9,
"type": "string"
}
15.1.1.4.11 TempDH
Custom parameters for the Diffie-Hellman (DH) key-exchange.
TE2000 Version: 2.5.1 1099

Server
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::TEMPDH
Category Security
Schema
Type string
Format base64
Default value ""
JSON Schema
{
"configDescription": "DESC_TEMPDH",
"default": "",
"format": "base64",
"type": "string"
}
15.1.1.4.12 Key Password

Password used to decrypt the private key.
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::KEYPASSWORD
Category Security
Schema
Type string
Format base64
Default value ""
JSON Schema
{
"default": "",
"description": "DESC_KEYPASSWORD",
"format": "base64",
"type": "string"
}
15.1.1.4.13 Only client certificates allowed to authenticate

Require an approved client certificate to establish a HTTPS connection.
1100 Version: 2.5.1 TE2000

Server
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::AUTHCLIENTCERTIFICATE
Category Security
Schema
Type boolean
Default value False
JSON Schema
{
"configDescription": "DESC_AUTHCLIENTCERTIFICATE",
"default": false,
"propertyOrder": 4,
"type": "boolean"
}
15.1.1.4.14 Lockout Protection

Enabling client certificate requires a local endpoint.
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::LOCKOUT_PROTECTION_CLIENT_CERTIF
ICATE
Category Security
Schema
Type boolean
Default value True
JSON Schema
{
"configDescription": "DESC_LOCKOUT_PROTECTION_CLIENT_CERTIFICATE",
"default": true,
"propertyOrder": 3,
"type": "boolean"
}
15.1.1.4.15 Client Certificates

Client certificates constitute an alternative authentication mechanism that is not based on passwords.
TE2000 Version: 2.5.1 1101

Server
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::CLIENTCERTIFICATES
Category Security
Schema
Type array
Unique items Yes
JSON Schema
{
"description": "DESC_CLIENTCERTIFICATES",
"items": {
"properties": {
"CLIENTCERTIFICATE": {
"default": "",
"type": "string"
},
"DEFAULTUSER": {
"default": "",
"optionMethod": {
},
"type": "string"
},
"ENABLECLIENTCERTIFICATE": {
"default": true,
"type": "boolean"
}
},
"type": "object"
},
"propertyOrder": 5,
"type": "array",
"uniqueItems": true
}
15.1.1.4.16 SameSite attribute

Specifies whether cookies should be sent for cross-page requests.
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::SAMESITE_ATTRIBUTE
Category Security
Schema

Default value 2
1102 Version: 2.5.1 TE2000

Server
Options
Value Label
0 None
1 Lax
2 Strict
JSON Schema
{
"configDescription": "DESC_SAMESITE_ATTRIBUTE",
"default": 2,
"enum": [
0,
1,
2
],
"options": [
{
"label": "ENUM_SAMESITE_NONE",
"value": 0
},
{
"label": "ENUM_SAMESITE_LAX",
"value": 1
},
{
"label": "ENUM_SAMESITE_STRICT",
"value": 2
}
],
"type": "integer"
}
15.1.1.4.17 Automatic Login

The user account that is configured here is logged in automatically when a new session is opened.
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::AUTO_LOGINUSER
Category Security
Schema
Type string
Default value ""
JSON Schema
{
"configDescription": "DESC_AUTO_LOGINUSER",
"default": "",
"optionMethod": {
},
"propertyOrder": 1,
"type": "string"
}
TE2000 Version: 2.5.1 1103

Server
15.1.1.5 Symbols
15.1.1.5.1 Definitions
Storage for JSON schema definitions.
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::DEFINITIONS
Category Symbols
Schema
Type object
Default value
{}
JSON Schema
{
},
"category": "CATEGORY_SYMBOLS",
"default": {},
"description": "DESC_DEFINITIONS",
"type": "object"
}
15.1.1.5.2 Symbols
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::SYMBOLS
Category Symbols
Schema
Type object
Default value
{
"DefaultAuthExtension": {
"ACCESS": 3,
"DOMAIN": "TcHmiSrv",
"HIDDEN": true,
"MAPPING": "Config::DEFAULTAUTHEXTENSION",
"SCHEMA": {
"function": true,
"type": "string"
},
"USEMAPPING": true
1104 Version: 2.5.1 TE2000

Server
},
"UserSelectType": {
"ACCESS": 3,
"HIDDEN": true,
"MAPPING": "Config::USERSELECTTYPE",
"SCHEMA": {
"function": true,
"type": "number"
},
"USEMAPPING": true
}
}
JSON Schema
{
"$ref": "tchmi:server#/definitions/symbol"
},
"default": {
"ACCESS": 3,
"HIDDEN": true,
"SCHEMA": {
"function": true,
"type": "string"
},
"USEMAPPING": true
},
"UserSelectType": {
"ACCESS": 3,
"HIDDEN": true,
"SCHEMA": {
"function": true,
"type": "number"
},
"USEMAPPING": true
}
},
"type": "object"
}
15.1.1.5.3 Mapped symbols

Mapped symbols are used to grant access to internal symbols of a domain.
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::SYMBOLS
Category Symbols
Schema
Type object
Default value
{
"ACCESS": 3,
"DYNAMIC": false,
TE2000 Version: 2.5.1 1105

Server
"HIDDEN": true,
"SCHEMA": {
"function": true,
"type": "string"
},
"USEMAPPING": true
},
"DefaultUserGroup": {
"ACCESS": 3,
"DYNAMIC": false,
"HIDDEN": true,
"MAPPING": "Config::DEFAULTUSERGROUP",
"SCHEMA": {
"function": true,
"type": "string"
},
"USEMAPPING": true
},
"UserSelectType": {
"ACCESS": 3,
"DYNAMIC": false,
"HIDDEN": true,
"SCHEMA": {
"function": true,
"type": "number"
},
"USEMAPPING": true
}
}
JSON Schema
{
"$ref": "tchmi:server#/definitions/symbol"
},
"configDescription": "DESC_SYMBOLS",
"default": {
"ACCESS": 3,
"DYNAMIC": false,
"HIDDEN": true,
"SCHEMA": {
"function": true,
"type": "string"
},
"USEMAPPING": true
},
"DefaultUserGroup": {
"ACCESS": 3,
"DYNAMIC": false,
"HIDDEN": true,
"MAPPING": "Config::DEFAULTUSERGROUP",
"SCHEMA": {
"function": true,
"type": "string"
},
"USEMAPPING": true
},
"UserSelectType": {
"ACCESS": 3,
"DYNAMIC": false,
"HIDDEN": true,
"SCHEMA": {
"function": true,
"type": "number"
},
"USEMAPPING": true
}
1106 Version: 2.5.1 TE2000

Server
},
"type": "object"
}
15.1.1.6 Webserver
15.1.1.6.1 Cookie expiration date

The server uses cookies to store session IDs. Make sure that the cookie expiration date and the automatic
logout duration are not in conflict.
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::COOKIEEXPIRATIONDATE
Category Webserver
Schema
Type string
Format timespan
JSON Schema
{
"category": "CATEGORY_WEBSERVER",
"default": "P30D",
"description": "DESC_COOKIEEXPIRATIONDATE",
"type": "string"
}
15.1.1.6.2 Maximum connections per client
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::MAXCONNECTIONSPERCLIENT
Category Webserver
Schema
Type integer
Minimum 1
Default value 32
JSON Schema
{
"default": 32,
TE2000 Version: 2.5.1 1107

Server
"minimum": 1,
"type": "integer"
}
15.1.1.6.3 Network Adapter
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::NETWORKADAPTER
Category Webserver
Schema
Type string
Default value
JSON Schema
{
"default": "",
"type": "string"
}
15.1.1.6.4 Saved sessions

Sessions are saved here so that they are still valid after a server restart.
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::SESSIONSTORAGE
Category Webserver
Schema
Type object
JSON Schema
{
"properties": {
"created": {
"type": "string"
},
"domain": {
"type": "string"
},
"userName": {
"type": "string"
}
},
"required": [
"created",
"userName",
1108 Version: 2.5.1 TE2000

Server
"domain"
],
"type": "object"
},
"description": "DESC_SESSIONSTORAGE",
"type": "object"
}
15.1.1.6.5 SSDP discovery

Changes will become active after a server restart
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::DISCOVERY
Category Webserver
Schema

Default value 2
Options
Value Label
0 Disabled
1 Enabled
2 Enabled on alternative port
JSON Schema
{
"default": 2,
"description": "DISCOVERY_DESC",
"enum": [
0,
1,
2
],
"options": [
{
"label": "DISCOVERY_0_DISABLED",
"value": 0
},
{
"label": "DISCOVERY_1_ENABLED",
"value": 1
},
{
"label": "DISCOVERY_2_ALTERNATIVE",
"value": 2
}
],
"propertyOrder": 1,
"type": "integer"
}
TE2000 Version: 2.5.1 1109

Server
15.1.1.6.6 Remote Server
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::REMOTESERVERS
Category Webserver
Schema
Type object
JSON Schema
{
"configDescription": "DESC_REMOTESERVERS",
"properties": {
"REMOTE_CONNECT_TIMEOUT": {
"default": "PT5S",
"type": "string"
},
"REMOTE_ENABLED": {
"default": true,
"type": "boolean"
},
"REMOTE_PASSWORD": {
"configDescription": "DESC_REMOTE_PASSWORD",
"default": "",
"propertyOrder": 3,
"type": "string"
},
"REMOTE_URL": {
"propertyOrder": 1,
"type": "string"
},
"REMOTE_USERNAME": {
"configDescription": "DESC_REMOTE_USERNAME",
"default": "",
"propertyOrder": 2,
"type": "string"
}
},
"required": [
"REMOTE_ENABLED",
"REMOTE_URL",
"REMOTE_USERNAME",
"REMOTE_PASSWORD",
"REMOTE_CONNECT_TIMEOUT"
],
"title": "REMOTESERVERS_TITLE",
"type": "object"
},
"type": "object"
}
1110 Version: 2.5.1 TE2000

Server
15.1.1.6.7 Allowed certificates for remote servers
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::REMOTESERVERS_CERTIFICATES
Category Webserver
Schema
Type array
JSON Schema
{
"items": {
"default": "",
"type": "string"
},
"type": "array"
}
15.1.1.6.8 Endpoints
IPv4 and IPv6 endpoints are supported. Only HTTPS endpoints should be enabled for remote access. Use
the wildcard addresses '0.0.0.0' and '[::]' to accept remote connections on all network interfaces.
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::ENDPOINTS
Category Webserver
Schema
Type array
Unique items Yes
Minimum number of elements 1
Default value
[
"http://127.0.0.1:1010",
"https://0.0.0.0:1020"
]
JSON Schema
{
"default": [
"http://127.0.0.1:1010",
"https://0.0.0.0:1020"
],
TE2000 Version: 2.5.1 1111

Server
"description": "DESC_ENDPOINTS",
"items": {
"type": "string"
},
"minItems": 1,
"propertyOrder": 2,
"type": "array",
"uniqueItems": true
}
15.1.1.6.9 Keep alive

Timer for persistent connections
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::KEEP_ALIVE
Category Webserver
Schema
Type string
Format timespan
Minimum PT1S
Default value PT40S
JSON Schema
{
"configDescription": "DESC_KEEP_ALIVE",
"default": "PT40S",
"type": "string"
}
15.1.1.6.10 Socket timeout

Timeout for incomplete message body.
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::SOCKET_TIMEOUT
Category Webserver
Schema
Type string
Format timespan
Minimum PT1S
1112 Version: 2.5.1 TE2000

Server
JSON Schema
{
"configDescription": "DESC_SOCKET_TIMEOUT",
"default": "PT10S",
"type": "string"
}
15.1.1.6.11 Enable ETAG

The entity tag HTTP header is an identifier for a specific version of a resource.
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::ETAGENABLED
Category Webserver
Schema
Type boolean
Default value True
JSON Schema
{
"configDescription": "DESC_ETAGENABLED",
"default": true,
"propertyOrder": 8,
"type": "boolean"
}
15.1.1.6.12 Enable GZIP

GZIP compression is used by the server and web clients to improve transfer speed and bandwidth utilization.
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::GZIPENABLED
Category Webserver
Schema
Type boolean
Default value True
JSON Schema
{
"default": true,
TE2000 Version: 2.5.1 1113

Server
"description": "DESC_GZIPENABLED",
"propertyOrder": 9,
"type": "boolean"
}
15.1.1.6.13 GZIP minimum size

Prevents small data from getting zipped.
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::GZIPMINSIZE
Category Webserver
Schema
Type integer
Maximum 4294967295
Default value 800
JSON Schema
{
"allOf": [
{
},
{
"configDescription": "DESC_GZIP_MIN_SIZE",
"default": 800,
"propertyOrder": 11
}
]
}
15.1.1.6.14 GZIP compression level

GZIP compression is used by the server and web clients to improve transfer speed and bandwidth utilization.
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::DEFLATECOMPRESSIONLEVEL
Category Webserver
Schema

Minimum 0
Maximum 9
Default value 5
1114 Version: 2.5.1 TE2000

Server
Options
Value Label
1 Best Speed
5 Medium
9 Best Size
JSON Schema
{
"default": 5,
"description": "DESC_DEFLATECOMPRESSIONLEVEL",
"maximum": 9,
"minimum": 0,
"options": [
{
"label": "GZIP_BEST_SPEED",
"value": 1
},
{
"label": "GZIP_MEDIUM",
"value": 5
},
{
"label": "GZIP_BEST_SIZE",
"value": 9
}
],
"type": "integer"
}
15.1.1.6.15 Enable PerMessageDeflate

Try to enable compression for all WebSocket requests. Compression is not enabled for clients that don't
support it.
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::PERMESSAGEDEFLATEENABLED
Category Webserver
Schema
Type boolean
Default value True
JSON Schema
{
"default": true,
"description": "DESC_PERMESSAGEDEFLATEENABLED",
"type": "boolean"
}
TE2000 Version: 2.5.1 1115

Server
15.1.1.6.16 Enable cache

If enabled, the web-server stores frequently requested data such as web pages, images, and similar media
content in RAM to improve response times.
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::CACHEENABLED
Category Webserver
Schema
Type boolean
Default value True
JSON Schema
{
"default": true,
"description": "DESC_CACHEENABLED",
"propertyOrder": 3,
"type": "boolean"
}
15.1.1.6.17 Cache max entry size

General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::CACHEMAXENTRYSIZE
Category Webserver
Schema
Type integer
Maximum 4294967295
JSON Schema
{
"allOf": [
{
},
{
"configDescription": "DESC_CACHE",
"default": 1048576,
"propertyOrder": 5
}
]
}
1116 Version: 2.5.1 TE2000

Server
15.1.1.6.18 Cache max size

General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::CACHEMAXSIZE
Category Webserver
Schema
Type integer
Maximum 4294967295
JSON Schema
{
"allOf": [
{
},
{
"default": 2097152,
"propertyOrder": 6
}
]
}
15.1.1.6.19 Cache max age

General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::CACHEMAXAGE
Category Webserver
Schema
Type string
Format timespan
JSON Schema
{
"default": "P30D",
TE2000 Version: 2.5.1 1117

Server
"propertyOrder": 4,
"type": "string"
}
15.1.1.6.20 Enable remote administration
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::REMOTEADMINISTRATIONENABLED
Category Webserver
Schema
Type boolean
Default value True
JSON Schema
{
"default": true,
"type": "boolean"
}
15.1.1.6.21 Enable plain administration
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::PLAINADMINISTRATIONENABLED
Category Webserver
Schema
Type boolean
Default value True
JSON Schema
{
"default": true,
"type": "boolean"
}
15.1.1.6.22 Global HTTP(S) Headers

These headers will be added to all HTTP responses.
1118 Version: 2.5.1 TE2000

Server
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::GLOBALHTTPHEADERS
Category Webserver
Schema
Type string
Format multiline
Default value
{LASTMODIFIED}
Strict-Transport-Security: max-age=31536000; includeSubDomains
X-Content-Type-Options: nosniff
Content-Security-Policy: frame-ancestors 'self'
JSON Schema
{
"configDescription": "DESC_GLOBAL_HTTP_HEADERS",
"default": "{LASTMODIFIED}\nStrict-Transport-Security: max-age=31536000; includeSubDomains\nX-
Content-Type-Options: nosniff\nContent-Security-Policy: frame-ancestors 'self'",
"type": "string"
}
15.1.1.6.23 Force Revalidation

by setting proper Cache-Control, Pragma and Expire header
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::REVALIDATION
Category Webserver
Schema
Type boolean
Default value True
JSON Schema
{
"configDescription": "DESC_REFORCE_REVALIDATION",
"default": true,
"type": "boolean"
}
TE2000 Version: 2.5.1 1119

Server
15.1.1.6.24 Mime
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::MIME
Category Webserver
Schema
Type object
Default value
{
"bin": {
"MIME_TYPE": "application/octet-stream"
},
"bmp": {
"MIME_ENABLE_GZIP": true,
"MIME_TYPE": "image/bmp"
},
"cer": {
"MIME_ENABLE_CACHE": false,
"MIME_ENABLE_CHUNKING": false,
"MIME_TYPE": "application/x-x509-ca-cert"
},
"config": {
"MIME_TYPE": "text/xml"
},
"content": {
"MIME_TYPE": "text/plain"
},
"css": {
"MIME_TYPE": "text/css"
},
"dll": {
},
"ear": {
"MIME_TYPE": "application/java-archive"
},
"eot": {
"MIME_TYPE": "vnd.ms-fontobject"
},
"exe": {
},
"gif": {
"MIME_TYPE": "image/gif"
},
"htm": {
"MIME_TYPE": "text/html"
},
"html": {
},
"ico": {
"MIME_TYPE": "image/x-icon"
},
"img": {
},
"iso": {
1120 Version: 2.5.1 TE2000

Server
},
"jar": {
},
"jpeg": {
"MIME_TYPE": "image/jpeg"
},
"jpg": {
},
"js": {
"MIME_TYPE": "application/javascript"
},
"json": {
"MIME_TYPE": "application/json"
},
"jsonp": {
},
"localization": {
},
"lp": {
"MIME_HTTP_HEADERS": "no-store",
"MIME_TYPE": "application/lp"
},
"lua": {
"MIME_TYPE": "application/lua"
},
"map": {
},
"mp3": {
"MIME_TYPE": "audio/mpeg"
},
"mp4": {
"MIME_TYPE": "video/mp4"
},
"ogg": {
"MIME_TYPE": "video/ogg"
},
"ogv": {
},
"otf": {
"MIME_TYPE": "application/font-sfnt"
},
"pdf": {
"MIME_TYPE": "application/pdf"
},
"pem": {
"MIME_TYPE": "application/x-pem-file"
},
"png": {
"MIME_TYPE": "image/png"
},
"shtml": {
TE2000 Version: 2.5.1 1121

Server
},
"svg": {
"MIME_TYPE": "image/svg+xml"
},
"theme": {
},
"ttf": {
},
"txt": {
},
"usercontrol": {
},
"view": {
},
"war": {
},
"webm": {
"MIME_TYPE": "video/webm"
},
"woff": {
"MIME_TYPE": "application/font-woff"
},
"woff2": {
"MIME_TYPE": "application/font-woff2"
},
"xml": {
},
"zip": {
"MIME_TYPE": "application/zip"
}
}
JSON Schema
{
"configDescription": "DESC_MIME",
"properties": {
"MIME_ENABLE_CACHE": {
"default": true,
"type": "boolean"
},
"MIME_ENABLE_CHUNKING": {
"default": true,
"type": "boolean"
},
"MIME_ENABLE_GZIP": {
"default": false,
"type": "boolean"
},
"MIME_HTTP_HEADERS": {
"type": "string"
},
"MIME_TYPE": {
"type": "string"
}
},
"required": [
"MIME_TYPE",
"MIME_ENABLE_GZIP",
"MIME_ENABLE_CACHE",
1122 Version: 2.5.1 TE2000

Server
"MIME_ENABLE_CHUNKING"
],
"title": "TITLE_MIME",
"type": "object"
},
"default": {
"bin": {
},
"bmp": {
},
"cer": {
},
"config": {
},
"content": {
},
"css": {
},
"dll": {
},
"ear": {
},
"eot": {
},
"exe": {
},
"gif": {
},
"htm": {
},
"html": {
},
"ico": {
},
"img": {
},
"iso": {
},
"jar": {
},
"jpeg": {
},
"jpg": {
},
"js": {
},
"json": {
TE2000 Version: 2.5.1 1123

Server
},
"jsonp": {
},
"localization": {
},
"lp": {
},
"lua": {
},
"map": {
},
"mp3": {
},
"mp4": {
},
"ogg": {
},
"ogv": {
},
"otf": {
},
"pdf": {
},
"pem": {
},
"png": {
},
"shtml": {
},
"svg": {
},
"theme": {
},
"ttf": {
},
"txt": {
},
1124 Version: 2.5.1 TE2000

Server
"usercontrol": {
},
"view": {
},
"war": {
},
"webm": {
},
"woff": {
},
"woff2": {
},
"xml": {
},
"zip": {
}
},
"type": "object"
}
15.1.1.6.25 Client-Cache max age

Defines how long server responses may be cached.
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::CLIENT_CACHE_MAX_AGE
Category Webserver
Schema
Type integer
Minimum 0
Default value 0
JSON Schema
{
"configDescription": "DESC_CLIENT_CACHE_MAX_AGE",
"default": 0,
"displayClass": "seconds",
"minimum": 0,
"type": "integer"
}
15.1.1.6.26 Client priority list

IP addresses of preferred clients. If the client limit is reached these clients will be able to connect and clients
which are not in this list will be disconnected.
TE2000 Version: 2.5.1 1125

Server
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::CLIENTPRIORITYLIST
Category Webserver
Schema
Type array
JSON Schema
{
"configDescription": "DESC_CLIENTPRIORITYLIST",
"items": {
"type": "string"
},
"type": "array"
}
15.1.1.6.27 Keep alive

Timer for persistent connections.
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::KEEP_ALIVE
Category Webserver
Schema
Type string
Format timespan
Minimum PT1S
JSON Schema
{
"configDescription": "DESC_KEEP_ALIVE",
"default": "PT40S",
"type": "string"
}
15.1.1.6.28 Force Revalidation

Works by setting proper Cache-Control, Pragma and Expire headers.
1126 Version: 2.5.1 TE2000

Server
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::REVALIDATION
Category Webserver
Schema
Type boolean
Default value True
JSON Schema
{
"configDescription": "DESC_REFORCE_REVALIDATION",
"default": true,
"hidden": true,
"propertyOrder": 7,
"type": "boolean"
}
15.1.1.6.29 MIME HTTP headers

Mappings for internet media types.
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::MIME
Category Webserver
Schema
Type object
Default value
{
"bin": {
},
"bmp": {
},
"cer": {
},
"config": {
},
"content": {
},
"css": {
TE2000 Version: 2.5.1 1127

Server
},
"dll": {
},
"ear": {
},
"eot": {
},
"exe": {
},
"gif": {
},
"htm": {
},
"html": {
},
"ico": {
},
"img": {
},
"iso": {
},
"jar": {
},
"jpeg": {
},
"jpg": {
},
"js": {
},
"json": {
},
"jsonp": {
},
"localization": {
},
"lp": {
},
"lua": {
},
"map": {
},
"mjs": {
},
1128 Version: 2.5.1 TE2000

Server
"mp3": {
},
"mp4": {
},
"ogg": {
},
"ogv": {
},
"otf": {
},
"pdf": {
},
"pem": {
},
"png": {
},
"shtml": {
},
"svg": {
},
"theme": {
},
"ttf": {
},
"txt": {
},
"usercontrol": {
},
"view": {
},
"war": {
},
"webm": {
},
"woff": {
},
"woff2": {
},
"xml": {
TE2000 Version: 2.5.1 1129

Server
},
"zip": {
}
}
JSON Schema
{
"properties": {
"MIME_ENABLE_CACHE": {
"default": true,
"type": "boolean"
},
"MIME_ENABLE_CHUNKING": {
"default": true,
"type": "boolean"
},
"MIME_ENABLE_GZIP": {
"default": false,
"type": "boolean"
},
"MIME_HTTP_HEADERS": {
"type": "string"
},
"MIME_TYPE": {
"type": "string"
}
},
"required": [
"MIME_TYPE",
"MIME_ENABLE_GZIP",
"MIME_ENABLE_CACHE",
"MIME_ENABLE_CHUNKING"
],
"title": "TITLE_MIME",
"type": "object"
},
"configDescription": "DESC_MIME",
"default": {
"bin": {
},
"bmp": {
},
"cer": {
},
"config": {
},
"content": {
},
"css": {
},
"dll": {
},
"ear": {
},
"eot": {
},
"exe": {
1130 Version: 2.5.1 TE2000

Server
},
"gif": {
},
"htm": {
},
"html": {
},
"ico": {
},
"img": {
},
"iso": {
},
"jar": {
},
"jpeg": {
},
"jpg": {
},
"js": {
},
"json": {
},
"jsonp": {
},
"localization": {
},
"lp": {
},
"lua": {
},
"map": {
},
"mjs": {
},
"mp3": {
},
"mp4": {
},
"ogg": {
TE2000 Version: 2.5.1 1131

Server
},
"ogv": {
},
"otf": {
},
"pdf": {
},
"pem": {
},
"png": {
},
"shtml": {
},
"svg": {
},
"theme": {
},
"ttf": {
},
"txt": {
},
"usercontrol": {
},
"view": {
},
"war": {
},
"webm": {
},
"woff": {
},
"woff2": {
},
"xml": {
},
"zip": {
}
},
"type": "object"
}
1132 Version: 2.5.1 TE2000

Server
15.1.1.6.30 Default document

This default page is served when a web client requests a URL that points to a directory structure instead of
an actual web page within the directory structure.
General Information
Domain TcHmiSrv
Full symbol path TcHmiSrv.Config::DEFAULTDOCUMENT
Category Webserver
Schema
Type array
Unique items Yes
Default value
[
"Default.html"
]
JSON Schema
{
"default": [
"Default.html"
],
"description": "DESC_DEFAULTDOCUMENT",
"items": {
"type": "string"
},
"type": "array",
"uniqueItems": true
}
15.1.2 ADS
Type Definitions
Name Description
TE2000 Version: 2.5.1 1133

Server
General Properties

TIMEOUT [} 1134] Timeout Default timeout for ADS requests
Maximum timeout for A configured runtime is considered unreachable if a
RUNTIME_STATE_CHECK_ determining the runtime request takes longer than this timeout.
TIMEOUT [} 1135] status
Runtime state check The state of each configured runtime is checked
RUNTIME_STATE_CHECK_I interval periodically.
NTERVAL [} 1135]
RUNTIMES [} 1136] Runtimes An ADS connection is established to all enabled
runtimes.
Ignored PLC attributes Attribute pragmas are added to the JSON schema.
IGNORED_PLC_ATTRIBUTE The attributes configured here are hidden.
S [} 1138]
VISIBLE_RUNTIME_PORTS Visible runtime ports Target systems might many ADS ports. Most of them
[} 1138] are rarely used in HMI projects.
RESPONSE_SIZE_LIMIT Limit response size of The PLC task is locked for every request. If the
[} 1139] ADS requests request is too large, the PLC cycle time might be
exceeded.
SUM_REQUEST_LIMIT Limit the number of ADS The PLC task is locked for every request. If a sum
[} 1140] requests that can be request contains too many requests, the PLC cycle
bundled in one sum time might be exceeded.
request
Limit the number of ADS TwinCAT's handle buffer is not resized in the middle
NEW_HANDLES_PER_SUM handles created by a sum of a sum request. Creating too many ADS handles in
_REQUEST_LIMIT [} 1141] request a single sum request causes errors if TwinCAT's
handle buffer is full.
Support incomplete writes Variables that are hidden or not set in the write
ENABLE_READ_BEFORE_W by reading before writing request will be overwritten with an old value. Disable
RITE [} 1141] this setting to prevent side-effects and improve
performance.
15.1.2.1.1 Timeout
Default timeout for ADS requests
General Information
Domain ADS
Full symbol path ADS.Config::TIMEOUT
Schema
Type string
Format timespan
Minimum PT0.1S
1134 Version: 2.5.1 TE2000

Server
JSON Schema
{
"configDescription": "DESC_TIMEOUT",
"default": "PT1S",
"formatMinimum": "PT0.1S",
"propertyOrder": 2,
"type": "string"
}
15.1.2.1.2 Maximum timeout for determining the runtime status

A configured runtime is considered unreachable if a request takes longer than this timeout.
General Information
Domain ADS
Full symbol path ADS.Config::RUNTIME_STATE_CHECK_TIMEOUT
Schema
Type string
Format timespan
Minimum PT1S
Maximum PT30S
JSON Schema
{
"default": "PT5S",
"description": "DESC_RUNTIME_STATE_CHECK_TIMEOUT",
"formatMaximum": "PT30S",
"hidden": true,
"propertyOrder": 3,
"type": "string"
}
15.1.2.1.3 Runtime state check interval

The state of each configured runtime is checked periodically.
General Information
Domain ADS
Full symbol path ADS.Config::RUNTIME_STATE_CHECK_INTERVAL
TE2000 Version: 2.5.1 1135

Server
Schema
Type string
Format timespan
Minimum PT1S
Maximum PT30S
JSON Schema
{
"default": "PT2S",
"description": "DESC_RUNTIME_STATE_CHECK_INTERVAL",
"hidden": true,
"propertyOrder": 4,
"type": "string"
}
15.1.2.1.4 Runtimes
An ADS connection is established to all enabled runtimes.
General Information
Domain ADS
Full symbol path ADS.Config::RUNTIMES
Schema
Type object
Default value
{
"PLC1": {
"ENABLED": true,
"NETID": "127.0.0.1.1.1",
"PORT": 851,
"SYMBOLS": {},
"USE_WHITELISTING": false
}
}
JSON Schema
{
"configDescription": "DESC_RUNTIME",
"properties": {
"ENABLED": {
"default": true,
"propertyOrder": 1,
"type": "boolean"
},
"NETID": {
"allOf": [
{
"$ref": "tchmi:server#/definitions/adsRoute"
},
{
"propertyOrder": 2
1136 Version: 2.5.1 TE2000

Server
}
]
},
"PORT": {
"default": 851,
"minimum": 0,
"optionMethod": {
"symbol": "RuntimePorts",
"writeValue": {
"NETID": {
"$data": "#/properties/RUNTIMES/additionalProperties/NETID"
}
}
},
"propertyOrder": 3,
"type": "integer"
},
"SYMBOLS": {
"configDescription": "DESC_SYMBOL",
"properties": {
"INDEXGROUP": {
},
"INDEXOFFSET": {
},
"TYPENAME": {
"configDescription": "DESC_TYPENAME",
"optionMethod": {
"symbol": "ListCommonTypes"
},
"type": "string"
}
},
"required": [
"INDEXGROUP",
"INDEXOFFSET",
"TYPENAME"
],
"type": "object"
},
"default": {},
"propertyOrder": 5,
"type": "object"
},
"USE_WHITELISTING": {
"default": false,
"propertyOrder": 4,
"type": "boolean"
}
},
"required": [
"PORT",
"USE_WHITELISTING",
"NETID",
"ENABLED",
"SYMBOLS"
],
"type": "object"
},
"configDescription": "DESC_RUNTIMES",
"default": {
"PLC1": {
"ENABLED": true,
"NETID": "127.0.0.1.1.1",
"PORT": 851,
"SYMBOLS": {},
}
},
"propertyOrder": 1,
"type": "object"
}
TE2000 Version: 2.5.1 1137

Server
15.1.2.1.5 Ignored PLC attributes

Attribute pragmas are added to the JSON schema. The attributes configured here are hidden.
General Information
Domain ADS
Full symbol path ADS.Config::IGNORED_PLC_ATTRIBUTES
Schema
Type array
Default value
[
"DisplayMinValue",
"DisplayMaxValue",
"LowerBorder",
"UpperBorder",
"TcRpcEnable",
"TcHmiSymbol.ReadOnly",
"TcHmiSymbol.AddSymbol",
"TcHmiSymbol.AddSymbol.UserGroups",
"TcHmiSymbol.AddSymbol.Hidden"
]
JSON Schema
{
"default": [
"DisplayMinValue",
"DisplayMaxValue",
"LowerBorder",
"UpperBorder",
"TcRpcEnable",
"TcHmiSymbol.ReadOnly",
"TcHmiSymbol.AddSymbol",
"TcHmiSymbol.AddSymbol.UserGroups",
"TcHmiSymbol.AddSymbol.Hidden"
],
"description": "DESC_IGNORED_PLC_ATTRIBUTES",
"hidden": true,
"items": {
"type": "string"
},
"propertyOrder": 5,
"type": "array"
}
15.1.2.1.6 Visible runtime ports

Target systems might many ADS ports. Most of them are rarely used in HMI projects.
General Information
Domain ADS
Full symbol path ADS.Config::VISIBLE_RUNTIME_PORTS
1138 Version: 2.5.1 TE2000

Server
Schema
Type array
Default value
[
301,
302,
303,
304,
350,
351,
352,
353,
354,
355,
501,
801,
811,
821,
831,
851,
852,
853,
854,
10000,
19800
]
JSON Schema
{
"default": [
301,
302,
303,
304,
350,
351,
352,
353,
354,
355,
501,
801,
811,
821,
831,
851,
852,
853,
854,
10000,
19800
],
"description": "DESC_VISIBLE_RUNTIME_PORTS",
"hidden": true,
"items": {
"allOf": [
{
},
{
"minimum": 1
}
]
},
"propertyOrder": 6,
"type": "array"
}
15.1.2.1.7 Limit response size of ADS requests

The PLC task is locked for every request. If the request is too large, the PLC cycle time might be exceeded.
TE2000 Version: 2.5.1 1139

Server
General Information
Domain ADS
Full symbol path ADS.Config::RESPONSE_SIZE_LIMIT
Schema
Type integer
Minimum 2048
JSON Schema
{
"allOf": [
{
"$ref": "tchmi:general#/definitions/INT32"
},
{
"default": 2097152,
"description": "DESC_RESPONSE_SIZE_LIMIT",
"hidden": true,
"minimum": 2048,
"propertyOrder": 7,
"type": "integer"
}
]
}
15.1.2.1.8 Limit the number of ADS requests that can be bundled in one sum
request
The PLC task is locked for every request. If a sum request contains too many requests, the PLC cycle time
might be exceeded.
General Information
Domain ADS
Full symbol path ADS.Config::SUM_REQUEST_LIMIT
Schema
Type integer
Minimum 1
Maximum 1000
Default value 500
JSON Schema
{
"default": 500,
"description": "DESC_SUM_REQUEST_LIMIT",
"hidden": true,
"maximum": 1000,
"minimum": 1,
"propertyOrder": 8,
"type": "integer"
}
1140 Version: 2.5.1 TE2000

Server
15.1.2.1.9 Limit the number of ADS handles created by a sum request

TwinCAT's handle buffer is not resized in the middle of a sum request. Creating too many ADS handles in a
single sum request causes errors if TwinCAT's handle buffer is full.
General Information
Domain ADS
Full symbol path ADS.Config::NEW_HANDLES_PER_SUM_REQUEST_LIMIT
Schema
Type integer
Minimum 1
Maximum 1000
Default value 100
JSON Schema
{
"default": 100,
"description": "DESC_NEW_HANDLES_PER_SUM_REQUEST_LIMIT",
"hidden": true,
"maximum": 1000,
"minimum": 1,
"propertyOrder": 9,
"type": "integer"
}
15.1.2.1.10 Support incomplete writes by reading before writing

Variables that are hidden or not set in the write request will be overwritten with an old value. Disable this
setting to prevent side-effects and improve performance.
General Information
Domain ADS
Full symbol path ADS.Config::ENABLE_READ_BEFORE_WRITE
Schema
Type boolean
Default value True
JSON Schema
{
"default": true,
"description": "DESC_ENABLE_READ_BEFORE_WRITE",
"type": "boolean"
}
TE2000 Version: 2.5.1 1141

Server
15.1.2.2.1 adsState
ADS state
General Information
Domain ADS
Schema
Options
Value Label
0 Invalid
1 Idle
2 Reset
3 Init
4 Start
5 Run
6 Stop
7 Save Configuration
8 Load Configuration
9 Power Failure
10 Power Good
11 Error
12 Shutdown
13 Suspend
14 Resume
15 Config
16 Reconfiguring
17 Stopping
18 Incompatible
19 Exception
JSON Schema
{
"enum": [
0,
1,
2,
3,
4,
5,
6,
7,
8,
9,
10,
11,
12,
13,
14,
15,
16,
1142 Version: 2.5.1 TE2000

Server
17,
18,
19
],
"options": [
{
"label": "adsStateInvalid",
"value": 0
},
{
"label": "adsStateIdle",
"value": 1
},
{
"label": "adsStateReset",
"value": 2
},
{
"label": "adsStateInit",
"value": 3
},
{
"label": "adsStateStart",
"value": 4
},
{
"label": "adsStateRun",
"value": 5
},
{
"label": "adsStateStop",
"value": 6
},
{
"label": "adsStateSaveCfg",
"value": 7
},
{
"label": "adsStateLoadCfg",
"value": 8
},
{
"label": "adsStatePowerFailure",
"value": 9
},
{
"label": "adsStatePowerGood",
"value": 10
},
{
"label": "adsStateError",
"value": 11
},
{
"label": "adsStateShutdown",
"value": 12
},
{
"label": "adsStateSuspend",
"value": 13
},
{
"label": "adsStateResume",
"value": 14
},
{
"label": "adsStateConfig",
"value": 15
},
{
"label": "adsStateReconfig",
"value": 16
},
{
"label": "adsStateStopping",
"value": 17
},
{
"label": "adsStateIncompatible",
"value": 18
TE2000 Version: 2.5.1 1143

Server
},
{
"label": "adsStateException",
"value": 19
}
],
"type": "integer"
}
15.1.3 TcHmiAlarm
General Properties

limitEventCount [} 1145] Limit Event Count Active alarms will always be imported, even if this
limit is thereby exceeded.
alarmSymbols [} 1146] Alarm Symbols This list contains all configured alarm symbols.
15.1.3.1.1 Alarm list

This list contains all configured alarms
General Information
Domain TcHmiAlarm
Full symbol path TcHmiAlarm.Config::alarmList
Schema
Type object
JSON Schema
{
"configDescription": "DESC_ALARM_SYMBOL",
"optionMethod": {
},
"properties": {
"enabled": {
"default": true,
"type": "boolean"
},
"onError": {
"default": true,
"type": "boolean"
},
"rangeList": {
"configDescription": "DESC_RANGE",
"properties": {
"alarmName": {
"propertyOrder": 9,
"type": "string"
},
"enabled": {
"default": true,
"propertyOrder": 1,
1144 Version: 2.5.1 TE2000

Server
"type": "boolean"
},
"eventType": {
"default": 0,
"enum": [
0,
1
],
"options": [
{
"label": "enum_0_alarm",
"value": 0
},
{
"label": "enum_1_message",
"value": 1
}
],
"propertyOrder": 2,
"type": "integer"
},
"filterString": {
"configDescription": "DESC_FILTER",
"propertyOrder": 8,
"type": "string"
},
"interval": {
"default": "PT1S",
"propertyOrder": 4,
"type": "string"
},
"severity": {
"$ref": "tchmi:server#/definitions/severity",
"propertyOrder": 3
}
},
"required": [
"severity",
"interval",
"filterString",
"eventType",
"enabled"
],
"title": "range",
"type": "object"
},
"type": "object"
}
},
"required": [
"rangeList",
"enabled",
"onError"
],
"title": "titleAlarmSymbol",
"type": "object"
},
"configDescription": "DESC_ALARM_LIST",
"type": "object"
}
15.1.3.1.2 Limit Event Count

Active alarms will always be imported, even if this limit is thereby exceeded.
General Information
Domain TcHmiAlarm
Full symbol path TcHmiAlarm.Config::limitEventCount
TE2000 Version: 2.5.1 1145

Server
Schema
Type integer
Minimum 1
Default value 1000
JSON Schema
{
"allOf": [
{
},
{
"configDescription": "DESC_LIMIT_EVENT_COUNT",
"default": 1000,
"minimum": 1,
"propertyOrder": 1,
"type": "integer"
}
]
}
15.1.3.1.3 Alarm Symbols

This list contains all configured alarm symbols.
General Information
Domain TcHmiAlarm
Full symbol path TcHmiAlarm.Config::alarmSymbols
Schema
Type object
JSON Schema
{
"configDescription": "DESC_ALARM_SYMBOL",
"optionMethod": {
},
"properties": {
"alarmSettings": {
"configDescription": "alarmSetting",
"properties": {
"alarmTextKey": {
"propertyOrder": 9,
"type": "string"
},
"condition": {
"allOf": [
{
"$ref": "tchmi:server#/definitions/filter"
},
{
"minItems": 1
},
{
"configDescription": "DESC_CONDITION",
"propertyOrder": 8
}
]
1146 Version: 2.5.1 TE2000

Server
},
"enabled": {
"default": true,
"propertyOrder": 1,
"type": "boolean"
},
"notificationType": {
"default": 1,
"enum": [
0,
1,
2
],
"options": [
{
"label": "enum_0_message",
"value": 0
},
{
"label": "enum_1_alarm_with_confirmation",
"value": 1
},
{
"label": "enum_2_alarm",
"value": 2
}
],
"propertyOrder": 2,
"type": "integer"
},
"severity": {
"$ref": "tchmi:server#/definitions/severity",
"propertyOrder": 3
}
},
"required": [
"severity",
"condition",
"notificationType",
"enabled"
],
"type": "object"
},
"propertyOrder": 3,
"type": "object"
},
"enabled": {
"default": true,
"propertyOrder": 0,
"type": "boolean"
},
"interval": {
"default": "PT1S",
"propertyOrder": 2,
"type": "string"
},
"onError": {
"configDescription": "DESC_ON_ERROR",
"default": false,
"hidden": true,
"propertyOrder": 1,
"type": "boolean"
}
},
"required": [
"alarmSettings",
"enabled",
"onError",
"interval"
],
"title": "titleAlarmSymbol",
"type": "object"
},
"configDescription": "DESC_ALARM_SYMBOLS",
"propertyOrder": 2,
"type": "object"
}
TE2000 Version: 2.5.1 1147

Server
15.1.4 TcHmiEventLogger
General Properties

LIMIT_EVENT_COUNT Limit event count Active alarms are always imported, even if this limit is
[} 1149] exceeded as a result.
TARGET_SYSTEMS [} 1148] Target Systems Target systems from which events and alarms are
collected.
15.1.4.1.1 Limit initial event import

When a target system is initialized, the newest existing events are imported. Active alarms will always be
imported, even if this limit is thereby exceeded.
General Information
Domain TcHmiEventLogger
Full symbol path TcHmiEventLogger.Config::LIMIT_INITIAL_EVENT_IMPORT
Schema
Type integer
Maximum 4294967295
Default value 1000
JSON Schema
{
"allOf": [
{
},
{
"configDescription": "DESC_LIMIT_INITIAL_EVENT_IMPORT",
"default": 1000,
"propertyOrder": 2
}
]
}
15.1.4.1.2 Target Systems

Target systems from which events and alarms are collected.
General Information
Full symbol path TcHmiEventLogger.Config::TARGET_SYSTEMS
1148 Version: 2.5.1 TE2000

Server
Schema
Type object
Default value
{
"Local": {
"ADDRESS": "127.0.0.1.1.1",
"ENABLED": true
}
}
JSON Schema
{
"configDescription": "DESC_TARGET_SYSTEM",
"properties": {
"ADDRESS": {
"$ref": "tchmi:server#/definitions/adsRoute"
},
"ENABLED": {
"default": true,
"type": "boolean"
}
},
"required": [
"ADDRESS",
"ENABLED"
],
"type": "object"
},
"configDescription": "DESC_TARGET_SYSTEMS",
"default": {
"Local": {
"ADDRESS": "127.0.0.1.1.1",
"ENABLED": true
}
},
"propertyOrder": 1,
"type": "object"
}
15.1.4.1.3 Limit event count

Active alarms are always imported, even if this limit is exceeded as a result.
General Information
Full symbol path TcHmiEventLogger.Config::LIMIT_EVENT_COUNT
Schema
Type integer
Maximum 4294967295
Default value 1000
JSON Schema
{
"allOf": [
{
TE2000 Version: 2.5.1 1149

Server
},
{
"configDescription": "DESC_LIMIT_EVENT_COUNT",
"default": 1000,
"propertyOrder": 2
}
]
}
15.1.5 TcHmiLua
General Properties

HTML_ERRORS [} 1150] Show errors in HTML For security reasons, this error output should be
disabled.
SCRIPT_TIMEOUT [} 1150] Script timeout Timeout after which the execution of a Lua script is
aborted.
15.1.5.1.1 Show errors in HTML

For security reasons, this error output should be disabled.
General Information
Domain TcHmiLua
Full symbol path TcHmiLua.Config::HTML_ERRORS
Schema
Type boolean
Default value False
JSON Schema
{
"configDescription": "DESC_HTML_ERRORS",
"default": false,
"type": "boolean"
}
15.1.5.1.2 Script timeout

Timeout after which the execution of a Lua script is aborted.
General Information
Domain TcHmiLua
Full symbol path TcHmiLua.Config::SCRIPT_TIMEOUT
1150 Version: 2.5.1 TE2000

Server
Schema
Type string
Format timespan
Minimum PT5S
JSON Schema
{
"configDescription": "DESC_SCRIPT_TIMEOUT",
"default": "PT10S",
"type": "string"
}
15.1.6 TcHmiOpcUa
Type Definitions
Name Description
UA.LocalizedText [} 1151] Localized text
UA.QualifiedName [} 1152] Qualified name
namespace [} 1152] OPC-UA namespace
connection [} 1153] Connection settings
advanced [} 1154] Advanced settings
General Properties

advancedSettings [} 1160] Advanced Settings Advanced settings for datatype name translation, etc.
connectionSettings Connection Settings Connection details for the OPC-UA server.
[} 1158]
namespaces [} 1158] Namespaces OPC-UA namespaces.
securitySettings [} 1159] Security Settings Certificates, Security policies, etc.
15.1.6.1.1 UA.LocalizedText
Localized text
General Information
Domain TcHmiOpcUa
Schema
Type object
TE2000 Version: 2.5.1 1151

Server
JSON Schema
{
"description": "descUaLocalizedText",
"properties": {
"Locale": {
"type": "integer"
},
"Text": {
"type": "string"
}
},
"required": [
"Locale",
"Text"
],
"type": "object"
}
15.1.6.1.2 UA.QualifiedName
Qualified name
General Information
Domain TcHmiOpcUa
Schema
Type object
JSON Schema
{
"description": "descUaQualifiedName",
"properties": {
"Name": {
"type": "string"
},
"NamespaceIndex": {
"type": "integer"
}
},
"required": [
"NamespaceIndex",
"Name"
],
"type": "object"
}
15.1.6.1.3 namespace
OPC-UA namespace
General Information
Domain TcHmiOpcUa
Schema
Type object
JSON Schema
{
"description": "descNamespace",
"properties": {
1152 Version: 2.5.1 TE2000

Server
"advanced": {
"optionMethod": {
"symbol": "Config::advancedSettings"
},
"type": "string"
},
"connection": {
"optionMethod": {
"symbol": "Config::connectionSettings"
},
"type": "string"
},
"endpoint": {
"type": "string"
},
"security": {
"optionMethod": {
"symbol": "Config::securitySettings"
},
"type": "string"
}
},
"required": [
"advanced",
"connection",
"endpoint",
"security"
],
"type": "object"
}
15.1.6.1.4 connection
Connection settings
General Information
Domain TcHmiOpcUa
Schema
Type object
JSON Schema
{
"description": "descConnection",
"properties": {
"connectionTimeout": {
"default": "PT1S",
"type": "string"
},
"readTimeout": {
"default": "PT10S",
"type": "string"
},
"reconnectMode": {
"default": 0,
"enum": [
0,
1,
2
],
"options": [
{
"label": "none",
"value": 0
TE2000 Version: 2.5.1 1153

Server
},
{
"label": "auto",
"value": 1
},
{
"label": "onRequest",
"value": 2
}
],
"type": "integer"
},
"reconnectTries": {
"type": "integer"
}
},
"required": [
"reconnectMode",
"reconnectTries",
"connectionTimeout",
"readTimeout"
],
"type": "object"
}
15.1.6.1.5 advanced
Advanced settings
General Information
Domain TcHmiOpcUa
Schema
Type object
JSON Schema
{
"description": "descAdvanced",
"properties": {
"arrayCloseReplacement": {
"type": "string"
},
"arrayOpenReplacement": {
"type": "string"
},
"browseValueSubelements": {
"type": "boolean"
},
"definitionNameMode": {
"configDescription": "DESC_DEFINITIONNAMEMODE",
"default": 0,
"enum": [
0,
1,
2
],
"options": [
{
"label": "useReferenceTypesAsDefinitionNames",
"value": 0
},
{
"label": "useNodeTypesAsDefinitionNames",
"value": 1
},
{
"label": "useNodeIdsAsDefinitionNames",
"value": 2
}
],
1154 Version: 2.5.1 TE2000

Server
"type": "integer"
},
"doublePointReplacement": {
"type": "string"
},
"forbiddenReferenceNodes": {
"configDescription": "DESC_FORBIDDENREFERENCENODES",
"properties": {
"binaryNodes": {
"items": {
"format": "base64",
"type": "string"
},
"type": "array"
},
"guidNodes": {
"items": {
"type": "string"
},
"type": "array"
},
"integerNodes": {
"items": {
"type": "number"
},
"type": "array"
},
"stringNodes": {
"items": {
"type": "string"
},
"type": "array"
}
},
"type": "object"
},
"ignoreNodes": {
"configDescription": "DESC_IGNORENODES",
"properties": {
"binaryNodes": {
"items": {
"format": "base64",
"type": "string"
},
"type": "array"
},
"guidNodes": {
"items": {
"type": "string"
},
"type": "array"
},
"integerNodes": {
"items": {
"type": "number"
},
"type": "array"
},
"stringNodes": {
"items": {
"type": "string"
},
"type": "array"
}
},
"type": "object"
},
"startPoint": {
"configDescription": "DESC_STARTPOINT",
"default": {
"binaryIdentifier": "",
"guidIdentifier": "",
"identifierType": 0,
"integerIdentifier": 85,
"namespaceIndex": 0,
"stringIdentifier": ""
},
"properties": {
"binaryIdentifier": {
"format": "base64",
TE2000 Version: 2.5.1 1155

Server
"type": "string"
},
"guidIdentifier": {
"type": "string"
},
"identifierType": {
"type": "number"
},
"integerIdentifier": {
"type": "number"
},
"namespaceIndex": {
"type": "number"
},
"stringIdentifier": {
"type": "string"
}
},
"type": "object"
}
},
"required": [
"arrayCloseReplacement",
"arrayOpenReplacement",
"browseValueSubelements",
"doublePointReplacement",
"definitionNameMode",
"ignoreNodes",
"forbiddenReferenceNodes",
"startPoint"
],
"type": "object"
}
15.1.6.1.6 security
Security Settings
General Information
Domain TcHmiOpcUa
Schema
Type object
JSON Schema
{
"properties": {
"acceptAllServerCertificates": {
"default": true,
"type": "boolean"
},
"acceptSelfSignedCertificates": {
"default": true,
"type": "boolean"
},
"authEnabled": {
"default": false,
"type": "boolean"
},
"certificateTrust": {
"default": "",
"type": "string"
},
"clientCertificate": {
"default": "",
"type": "string"
},
"clientPrivatekey": {
1156 Version: 2.5.1 TE2000

Server
"default": "",
"format": "base64",
"type": "string"
},
"globalPassword": {
"default": "",
"type": "string"
},
"globalUser": {
"default": "",
"type": "string"
},
"policyMode": {
"enum": [
"http://opcfoundation.org/UA/SecurityPolicy#None",
"http://opcfoundation.org/UA/SecurityPolicy#Basic128Rsa15",
"http://opcfoundation.org/UA/SecurityPolicy#Basic256",
"http://opcfoundation.org/UA/SecurityPolicy#Basic256Sha256"
],
"options": [
{
"label": "none",
"value": "http://opcfoundation.org/UA/SecurityPolicy#None"
},
{
"label": "Basic128Rsa15",
"value": "http://opcfoundation.org/UA/SecurityPolicy#Basic128Rsa15"
},
{
"label": "Basic256",
"value": "http://opcfoundation.org/UA/SecurityPolicy#Basic256"
},
{
"label": "Basic256Sha256",
"value": "http://opcfoundation.org/UA/SecurityPolicy#Basic256Sha256"
}
],
"type": "string"
},
"securityMode": {
"default": 1,
"enum": [
1,
2,
3
],
"options": [
{
"label": "none",
"value": 1
},
{
"label": "sign",
"value": 2
},
{
"label": "signAndEncrypt",
"value": 3
}
],
"type": "integer"
},
"useGlobalUaUser": {
"configDescription": "USEGLOBALUAUSER_DESC",
"default": true,
"type": "boolean"
},
"useHmiServerCertificate": {
"default": false,
"type": "boolean"
}
},
"required": [
"acceptAllServerCertificates",
"acceptSelfSignedCertificates",
"authEnabled",
"certificateTrust",
"clientCertificate",
"clientPrivatekey",
TE2000 Version: 2.5.1 1157

Server
"globalPassword",
"globalUser",
"policyMode",
"securityMode",
"useGlobalUaUser",
"useHmiServerCertificate"
],
"type": "object"
}
15.1.6.2.1 Namespaces
OPC-UA namespaces.
General Information
Domain TcHmiOpcUa
Full symbol path TcHmiOpcUa.Config::namespaces
Schema
Type object
Default value
{
"basic": {
"advanced": "basic",
"connection": "basic",
"endpoint": "opc.tcp://127.0.0.1:4840",
"security": "basic"
}
}
JSON Schema
{
"$ref": "#/definitions/namespace"
},
"default": {
"basic": {
"advanced": "basic",
"connection": "basic",
"endpoint": "opc.tcp://127.0.0.1:4840",
"security": "basic"
}
},
"description": "descNamespaces",
"propertyOrder": 3,
"type": "object"
}
15.1.6.2.2 Connection Settings

Connection details for the OPC-UA server.
1158 Version: 2.5.1 TE2000

Server
General Information
Domain TcHmiOpcUa
Full symbol path TcHmiOpcUa.Config::connectionSettings
Schema
Type object
Default value
{
"basic": {
"reconnectMode": 0,
"reconnectTries": 0
}
}
JSON Schema
{
"$ref": "#/definitions/connection"
},
"default": {
"basic": {
"reconnectMode": 0,
"reconnectTries": 0
}
},
"description": "descConnectionSettings",
"propertyOrder": 2,
"type": "object"
}
15.1.6.2.3 Security Settings

Certificates, Security policies, etc.
General Information
Domain TcHmiOpcUa
Full symbol path TcHmiOpcUa.Config::securitySettings
Schema
Type object
Default value
{
"basic": {
"acceptAllServerCertificates": true,
"acceptSelfSignedCertificates": true,
"certificateTrust": "",
"clientCertificate": "",
"clientPrivatekey": "",
"globalPassword": "",
"globalUser": "",
"policyMode": "http://opcfoundation.org/UA/SecurityPolicy#None",
"securityMode": 1,
"useGlobalUaUser": true,
TE2000 Version: 2.5.1 1159

Server
"useHmiServerCertificate": false
}
}
JSON Schema
{
"$ref": "#/definitions/security"
},
"default": {
"basic": {
"acceptAllServerCertificates": true,
"acceptSelfSignedCertificates": true,
"certificateTrust": "",
"clientCertificate": "",
"clientPrivatekey": "",
"globalPassword": "",
"globalUser": "",
"policyMode": "http://opcfoundation.org/UA/SecurityPolicy#None",
"securityMode": 1,
"useGlobalUaUser": true,
"useHmiServerCertificate": false
}
},
"description": "descSecuritySettings",
"propertyOrder": 4,
"type": "object"
}
15.1.6.2.4 Advanced Settings

Advanced settings for datatype name translation, etc.
General Information
Domain TcHmiOpcUa
Full symbol path TcHmiOpcUa.Config::advancedSettings
Schema
Type object
Default value
{
"basic": {
"arrayCloseReplacement": "_HMI_RESERVED_ARRAYCLOSE_",
"arrayOpenReplacement": "_HMI_RESERVED_ARRAYOPEN_",
"browseValueSubelements": false,
"doublePointReplacement": "_HMI_RESERVED_DOUBLECOLON_"
}
}
JSON Schema
{
"$ref": "#/definitions/advanced"
},
"default": {
"basic": {
"arrayCloseReplacement": "_HMI_RESERVED_ARRAYCLOSE_",
"arrayOpenReplacement": "_HMI_RESERVED_ARRAYOPEN_",
"browseValueSubelements": false,
"doublePointReplacement": "_HMI_RESERVED_DOUBLECOLON_"
}
},
"description": "descAdvancedSettings",
1160 Version: 2.5.1 TE2000

Server
"propertyOrder": 1,
"type": "object"
}
15.1.7 TcHmiRecipeManagement
Type Definitions
Name Description
folderRecipe [} 1161] Folder for recipes and/or folders
folderRecipeType [} 1161] Folder for recipe types and/or folders
recipe [} 1162] Recipes are based on recipe types
recipeType [} 1162] Recipe type is a general description of a set of symbols
15.1.7.1.1 folderRecipe
Folder for recipes and/or folders
General Information
Domain TcHmiRecipeManagement
Schema
Type object
JSON Schema
{
"configDescription": "DESC_FOLDER_RECIPE",
"hidden": true,
"patternProperties": {
"^(\\.\\..+|\\..*[^.]|\\..{2,}|(?!\\.\\.|\\.).*)$": {
"oneOf": [
{
"$ref": "#/definitions/recipe"
},
{
"$ref": "#/definitions/folderRecipe"
}
]
}
},
"type": "object"
}
15.1.7.1.2 folderRecipeType
Folder for recipe types and/or folders
General Information
TE2000 Version: 2.5.1 1161

Server
Schema
Type object
JSON Schema
{
"configDescription": "DESC_FOLDER_RECIPETYPE",
"hidden": true,
"patternProperties": {
"^(\\.\\..+|\\..*[^.]|\\..{2,}|(?!\\.\\.|\\.).*)$": {
"oneOf": [
{
"$ref": "#/definitions/recipeType"
},
{
"$ref": "#/definitions/folderRecipeType"
}
]
}
},
"type": "object"
}
15.1.7.1.3 recipe
Recipes are based on recipe types
General Information
Schema
Type object
JSON Schema
{
"configDescription": "DESC_RECIPE",
"properties": {
"recipeTypeName": {
"type": "string"
},
"values": {
"type": "object"
}
},
"required": [
"recipeTypeName",
"values"
],
"type": "object"
}
15.1.7.1.4 recipeType
Recipe type is a general description of a set of symbols
General Information
1162 Version: 2.5.1 TE2000

Server
Schema
Type object
JSON Schema
{
"configDescription": "DESC_RECIPETYPE",
"properties": {
"members": {
"anyOf": [
{
"properties": {
"comment": {
"default": "",
"type": "string"
},
"defaultValue": {},
"enabled": {
"default": false,
"type": "boolean"
},
"group": {
"default": "",
"type": "string"
},
"order": {
"type": "integer"
},
"schema": {
},
"symbol": {
"default": "",
"type": "string"
},
"unit": {
"default": "",
"type": "string"
}
},
"required": [
"symbol",
"defaultValue"
],
"type": "object"
},
{
"properties": {
"comment": {
"default": "",
"type": "string"
},
"enabled": {
"default": true,
"type": "boolean"
},
"group": {
"default": "",
"type": "string"
},
"order": {
"type": "integer"
},
"recipeType": {
"type": "string"
},
"unit": {
"default": "",
"type": "string"
}
},
"required": [
"recipeType"
],
"type": "object"
TE2000 Version: 2.5.1 1163

Server
}
]
},
"type": "object"
},
"options": {
"properties": {
"comment": {
"default": "",
"type": "string"
},
"enabled": {
"enum": [
"None",
"Disabled"
],
"type": "string"
}
},
"type": "object"
},
"recipeTypeNames": {
"items": {
"type": "string"
},
"uniqueItems": true
}
},
"required": [
"members"
],
"type": "object"
}
15.1.8 TcHmiSqliteHistorize
Type Definitions
Name Description
stringTypeArray [} 1165] Width of the XAxis in milliseconds.
General Properties

historizedSymbolList Historized symbols List containing all historized symbols.
[} 1165]
enableBackup [} 1166] Enable database backups Creates database backups continuously.
maxBackups [} 1167] Maximal amount of Once the maximum number of backups is reached,
database backups oldest backups will be deleted.
inMemory [} 1167] In memory database Active option will save to volatile RAM. Server restart
is required.
vacuumOnStartup [} 1168] Vacuum at start Tries to reduce database size. This might take a
while on big databases.
commitInterval Commit interval The time between writing each transaction into the
database.
mode [} 1169] Mode A stricter synchronization mode lowers the chance
that the database is corrupted in case of a crash or
power failure. The memory journaling mode can also
corrupt the database.
1164 Version: 2.5.1 TE2000

Server
15.1.8.1.1 stringTypeArray
Width of the XAxis in milliseconds.
General Information
Domain TcHmiSqliteHistorize
Schema

Format timespan
Enumeration value
Null
First
Latest
JSON Schema
{
"configDescription": "descStringTypeArray",
"oneOf": [
{
"description": "descStringTypeArrayTimespan",
"type": "string"
},
{
"description": "descStringTypeArrayTimestamp",
"type": "string"
},
{
"description": "descStringTypeArrayStartPoint",
"enum": [
"Null",
"First",
"Latest"
],
"type": "string"
}
]
}
15.1.8.2.1 Historized symbols

List containing all historized symbols.
General Information
Full symbol path TcHmiSqliteHistorize.Config::historizedSymbolList
TE2000 Version: 2.5.1 1165

Server
Schema
Type object
JSON Schema
{
"configDescription": "descHistorizedSymbol",
"optionMethod": {
},
"properties": {
"interval": {
"default": "PT1S",
"type": "string"
},
"maxEntries": {
"default": 10000,
"minimum": 1,
"type": "integer"
},
"recordingEnabled": {
"default": true,
"type": "boolean"
},
"rowLimit": {
"default": 100000,
"hidden": true,
"minimum": 1,
"type": "integer"
}
},
"required": [
"maxEntries",
"interval",
"recordingEnabled",
"rowLimit"
],
"title": "TITLE_HISTORIZE_SYMBOL",
"type": "object"
},
"configDescription": "descHistorizedSymbolList",
"propertyOrder": 1,
"type": "object"
}
15.1.8.2.2 Enable database backups

Creates database backups continuously.
General Information
Full symbol path TcHmiSqliteHistorize.Config::enableBackup
Schema
Type boolean
Default value False
1166 Version: 2.5.1 TE2000

Server
JSON Schema
{
"configDescription": "descEnableBackup",
"default": false,
"propertyOrder": 2,
"type": "boolean"
}
15.1.8.2.3 Maximal amount of database backups

Once the maximum number of backups is reached, oldest backups will be deleted.
General Information
Full symbol path TcHmiSqliteHistorize.Config::maxBackups
Schema
Type integer
Minimum 1
Default value 1
JSON Schema
{
"configDescription": "descMaxBackup",
"default": 1,
"minimum": 1,
"propertyOrder": 3,
"type": "integer"
}
15.1.8.2.4 In memory database

Active option will save to volatile RAM. Server restart is required.
General Information
Full symbol path TcHmiSqliteHistorize.Config::inMemory
Schema
Type boolean
Default value False
JSON Schema
{
"configDescription": "descInMemory",
"default": false,
TE2000 Version: 2.5.1 1167

Server
"propertyOrder": 4,
"type": "boolean"
}
15.1.8.2.5 Vacuum at start

Tries to reduce database size. This might take a while on big databases.
General Information
Full symbol path TcHmiSqliteHistorize.Config::vacuumOnStartup
Schema
Type boolean
Default value False
JSON Schema
{
"configDescription": "descVacuumOnStartup",
"default": false,
"propertyOrder": 5,
"type": "boolean"
}
15.1.8.2.6 Commit interval

The time between writing each transaction into the database.
General Information
Full symbol path TcHmiSqliteHistorize.Config::commitInterval
Schema
Type string
Format timespan
Minimum PT1S
Default value PT10S
JSON Schema
{
"configDescription": "descCommitInterval",
"default": "PT10S",
"hidden": true,
"propertyOrder": 6,
"type": "string"
}
1168 Version: 2.5.1 TE2000

Server
15.1.8.2.7 Mode
A stricter synchronization mode lowers the chance that the database is corrupted in case of a crash or power
failure. The memory journaling mode can also corrupt the database.
General Information
Full symbol path TcHmiSqliteHistorize.Config::mode
Schema

Default value 3
Options
Value Label
0 Synchronous extra, journal mode persist
1 Synchronous full, journal mode persist
2 Synchronous full, journal mode memory
3 Synchronous normal, journal mode persist
4 Synchronous off, journal mode persist
5 Synchronous off, journal mode memory
JSON Schema
{
"configDescription": "descMode",
"default": 3,
"enum": [
0,
1,
2,
3,
4,
5
],
"hidden": true,
"options": [
{
"label": "ENUM_SYNCHRONOUS_EXTRA_PERSIST",
"value": 0
},
{
"label": "ENUM_SYNCHRONOUS_FULL_PERSIST",
"value": 1
},
{
"label": "ENUM_SYNCHRONOUS_FULL_MEMORY",
"value": 2
},
{
"label": "ENUM_SYNCHRONOUS_NORMAL_PERSIST",
"value": 3
},
{
"label": "ENUM_SYNCHRONOUS_OFF_PERSIST",
"value": 4
},
{
"label": "ENUM_SYNCHRONOUS_OFF_MEMORY",
"value": 5
}
],
TE2000 Version: 2.5.1 1169

Server
"propertyOrder": 7,
"type": "integer"
}
15.1.9 TcHmiSqliteLogger
General Properties

MAXENTRIES [} 1172] Maximum number of To limit the database size, the oldest database
Entries entries are permanently deleted when this limit is
exceeded.
MAXENTRYLENGTH Maximum length of an Entries that exceed this limit will be truncated before
[} 1171] Entry being stored.
DEFAULT_LIST_LIMIT Default limit for entry lists This limit is used for all requests for which no other
[} 1172] limit has been specified.
VACUUM_ON_STARTUP Vacuum at start Tries to reduce database size. This might take a
[} 1171] while on big databases.
MODE [} 1173] Mode Synchronous off mode is fast but can corrupt the
database in case of a power failure.
Redirect diagnostics Reduces the chance that a flood of diagnostics
REDIRECT_DIAGNOSTICS_ messages to file messages will overwhelm the system. Especially
MESSAGES_TO_FILE useful when diagnosing problems on smaller devices.
Only supported on windows.
[} 1174]
15.1.9.1.1 Maximum number of Entries

To limit the database size, the oldest database entries are permanently deleted when this limit is exceeded
General Information
Domain TcHmiSqliteLogger
Full symbol path TcHmiSqliteLogger.Config::MAXENTRIES
Schema
Type integer
Minimum 1
Default value 15000
JSON Schema
{
"configDescription": "DESC_MAXENTRIES",
"default": 15000,
"minimum": 1,
"type": "integer"
}
1170 Version: 2.5.1 TE2000

Server
15.1.9.1.2 Maximum length of an Entry

Entries that exceed this limit will be truncated before being stored.
General Information
Full symbol path TcHmiSqliteLogger.Config::MAXENTRYLENGTH
Schema
Type integer
Minimum 80
Default value 1024
JSON Schema
{
"configDescription": "DESC_MAXENTRYLENGTH",
"default": 1024,
"minimum": 80,
"type": "integer"
}
15.1.9.1.3 Default limit for entry lists

This limit is used for all requests for which no other limit has been specified
General Information
Full symbol path TcHmiSqliteLogger.Config::DEFAULT_LIST_LIMIT
Schema
Type integer
Minimum 1
Default value 1000
JSON Schema
{
"configDescription": "DESC_DEFAULT_LIST_LIMIT",
"default": 1000,
"minimum": 1,
"type": "integer"
}
15.1.9.1.4 Vacuum at start

Tries to reduce database size. This might take a while on big databases.
TE2000 Version: 2.5.1 1171

Server
General Information
Full symbol path TcHmiSqliteLogger.Config::VACUUM_ON_STARTUP
Schema
Type boolean
Default value False
JSON Schema
{
"configDescription": "DESC_VACUUM_ON_STARTUP",
"default": false,
"type": "boolean"
}
15.1.9.1.5 Maximum number of Entries

To limit the database size, the oldest database entries are permanently deleted when this limit is exceeded.
General Information
Full symbol path TcHmiSqliteLogger.Config::MAXENTRIES
Schema
Type integer
Minimum 1
Default value 15000
JSON Schema
{
"configDescription": "DESC_MAXENTRIES",
"default": 15000,
"minimum": 1,
"type": "integer"
}
15.1.9.1.6 Default limit for entry lists

This limit is used for all requests for which no other limit has been specified.
General Information
Full symbol path TcHmiSqliteLogger.Config::DEFAULT_LIST_LIMIT
1172 Version: 2.5.1 TE2000

Server
Schema
Type integer
Minimum 1
Default value 1000
JSON Schema
{
"configDescription": "DESC_DEFAULT_LIST_LIMIT",
"default": 1000,
"minimum": 1,
"type": "integer"
}
15.1.9.1.7 Mode
Synchronous off mode is fast but can corrupt the database in case of a power failure.
General Information
Full symbol path TcHmiSqliteLogger.Config::MODE
Schema

Default value 1
Options
Value Label
0 Synchronous extra
1 Synchronous full
3 Synchronous normal
4 Synchronous off
JSON Schema
{
"configDescription": "DESC_MODE",
"default": 1,
"enum": [
0,
1,
3,
4
],
"hidden": true,
"options": [
{
"label": "ENUM_SYNCHRONOUS_EXTRA_PERSIST",
"value": 0
},
{
"label": "ENUM_SYNCHRONOUS_FULL_PERSIST",
"value": 1
},
{
"label": "ENUM_SYNCHRONOUS_NORMAL_PERSIST",
"value": 3
},
TE2000 Version: 2.5.1 1173

Server
{
"label": "ENUM_SYNCHRONOUS_OFF_PERSIST",
"value": 4
}
],
"type": "integer"
}
15.1.9.1.8 Redirect diagnostics messages to file

Reduces the chance that a flood of diagnostics messages will overwhelm the system. Especially useful when
diagnosing problems on smaller devices. Only supported on windows.
General Information
Full symbol path TcHmiSqliteLogger.Config::REDIRECT_DIAGNOSTICS_MESS
AGES_TO_FILE
Schema
Type boolean
Default value True
JSON Schema
{
"configDescription": "DESC_REDIRECT_DIAGNOSTICS_MESSAGES_TO_FILE",
"default": true,
"type": "boolean"
}
15.1.10 TcHmiUserManagement
General Properties

USERS [} 1174] Users Contains the information about all managed user
accounts.
15.1.10.1.1 Users
Contains the information about all managed user accounts.
General Information
Domain TcHmiUserManagement
Full symbol path TcHmiUserManagement.Config::USERS
1174 Version: 2.5.1 TE2000

Server
Schema
Type object
Default value
{
"ENABLED": false,
"PASSWORD": "",
"SALT": ""
},
"__SystemGuest": {
"ENABLED": true,
"PASSWORD": "",
"SALT": ""
}
}
JSON Schema
{
"configDescription": "DESC_USER",
"properties": {
"ALGORITHM": {
"default": 0,
"enum": [
0,
1
],
"options": [
{
"label": "SHA256",
"value": 0
},
{
"label": "PBKDF2-HMAC-64-SHA512-1000",
"value": 1
}
],
"type": "integer"
},
"ENABLED": {
"default": true,
"type": "boolean"
},
"PASSWORD": {
"default": "",
"type": "string"
},
"SALT": {
"default": "",
"format": "base64",
"type": "string"
}
},
"required": [
"PASSWORD",
"SALT",
"ALGORITHM",
"ENABLED"
],
"type": "object"
},
"default": {
"ENABLED": false,
"PASSWORD": "",
"SALT": ""
},
"__SystemGuest": {
"ENABLED": true,
"PASSWORD": "",
"SALT": ""
}
},
TE2000 Version: 2.5.1 1175

Server
"description": "DESC_USERS",
"required": [
"__SystemAdministrator",
"__SystemGuest"
],
"type": "object"
}
15.1.11 TcHmiEcDiagnostics
Type Definitions
Name Description
slave [} 1176] EtherCAT slave
Process data (Object entry ID)
EcDiagnosticsProcessData
ObjectEntryID [} 1180]
Process data (Object entry value)
EcDiagnosticsProcessData
ObjectEntryValue [} 1180]
Process data (IN-OUT values)
EcDiagnosticsProcessDataI
nOutValues [} 1181]
General Properties

devices [} 1182] EtherCAT Devices EtherCAT Devices
vendorsOverwrite [} 1183] Vendors overwrite Add vendor ID
15.1.11.1.1 slave
EtherCAT slave
General Information
Domain TcHmiEcDiagnostics
Schema
Type object
JSON Schema
{
"description": "descSlave",
"properties": {
"EtherCAT": {
"properties": {
"identity": {
"properties": {
"addrs": {
"properties": {
"autoInc": {
"type": "integer"
},
"phys": {
1176 Version: 2.5.1 TE2000

Server
"type": "integer"
}
},
"required": [
"autoInc",
"phys"
],
"type": "object"
},
"name": {
"type": "string"
},
"product": {
"type": "integer"
},
"revision": {
"type": "integer"
},
"serial": {
"type": "integer"
},
"type": {
"type": "string"
},
"vendor": {
"properties": {
"id": {
"type": "integer"
},
"memberNameLong": {
"type": "string"
},
"memberNameShort": {
"type": "string"
}
},
"required": [
"id",
"memberNameLong",
"memberNameShort"
],
"type": "object"
}
},
"required": [
"addrs",
"name",
"product",
"revision",
"serial",
"type",
"vendor"
],
"type": "object"
},
"syncUnitsAssignment": {
"items": [
{
"type": "integer"
}
],
"type": "array"
}
},
"required": [
"identity",
"syncUnitsAssignment"
],
"type": "object"
},
"hotConnect": {
"properties": {
"isHotConnectHead": {
"type": "boolean"
},
"isHotConnectSlave": {
"type": "boolean"
},
"slaveCountActual": {
"type": "integer"
TE2000 Version: 2.5.1 1177

Server
},
"slaveCountConfig": {
"type": "integer"
}
},
"required": [
"isHotConnectHead",
"isHotConnectSlave",
"slaveCountActual",
"slaveCountConfig"
],
"type": "object"
},
"ports": {
"items": [
{
"properties": {
"autoIncAddr": {
"type": "integer"
},
"configured": {
"type": "boolean"
},
"configuredSlave": {
"$ref": "#/definitions/slave"
},
"physAddr": {
"type": "integer"
},
"physic": {
"type": "integer"
},
"redundancy": {
"type": "boolean"
},
"redundancyPath": {
"type": "boolean"
}
},
"required": [
"autoIncAddr",
"configured",
"physAddr",
"physic"
],
"type": "object"
}
],
"type": "array"
},
"processData": {
"properties": {
"in": {
"items": [
{
"properties": {
"entries": {
"items": [
{
"properties": {
"bitLength": {
"type": "integer"
},
"index": {
"type": "string"
},
"name": {
"type": "string"
},
"subIndex": {
"type": "string"
},
"type": {
"type": "string"
}
},
"required": [
"bitLength",
"index",
"name",
1178 Version: 2.5.1 TE2000

Server
"subIndex",
"type"
],
"type": "object"
}
],
"type": "array"
},
"index": {
"type": "string"
},
"name": {
"type": "string"
}
},
"required": [
"entries",
"index",
"name"
],
"type": "object"
}
],
"type": "array"
},
"out": {
"items": [
{
"properties": {
"entries": {
"items": [
{
"properties": {
"bitLength": {
"type": "integer"
},
"index": {
"type": "string"
},
"name": {
"type": "string"
},
"subIndex": {
"type": "string"
},
"type": {
"type": "string"
}
},
"required": [
"bitLength",
"index",
"name",
"subIndex",
"type"
],
"type": "object"
}
],
"type": "array"
},
"index": {
"type": "string"
},
"name": {
"type": "string"
}
},
"required": [
"entries",
"index",
"name"
],
"type": "object"
}
],
"type": "array"
}
},
"required": [
TE2000 Version: 2.5.1 1179

Server
"in",
"out"
],
"type": "object"
}
},
"required": [
"EtherCAT",
"hotConnect",
"ports",
"processData"
],
"type": "object"
}
15.1.11.1.2 EcDiagnosticsProcessDataObjectEntryID
Process data (Object entry ID)
General Information
Schema
Type object
JSON Schema
{
"description": "descEcDiagnosticsProcessDataObjectEntryID",
"properties": {
"entryIndex": {
"type": "string"
},
"entrySubIndex": {
"type": "string"
},
"io": {
"type": "string"
},
"objectIndex": {
"type": "string"
}
},
"required": [
"io",
"objectIndex",
"entryIndex",
"entrySubIndex"
],
"type": "object"
}
15.1.11.1.3 EcDiagnosticsProcessDataObjectEntryValue
Process data (Object entry value)
General Information
Schema
Type object
1180 Version: 2.5.1 TE2000

Server
JSON Schema
{
"description": "descEcDiagnosticsProcessDataObjectEntryValue",
"properties": {
"entryValue": {}
},
"required": [
"entryValue"
],
"type": "object"
}
15.1.11.1.4 EcDiagnosticsProcessDataInOutValues
Process data (IN-OUT values)
General Information
Schema
Type object
JSON Schema
{
"description": "descEcDiagnosticsProcessDataInOutValues",
"properties": {
"entries": {
"items": [
{
"properties": {
"error": {
"properties": {
"code": {
"type": "number"
},
"message": {
"type": "string"
},
"reason": {
"type": "string"
}
},
"type": "object"
},
"forced": {
"type": "boolean"
},
"index": {
"type": "string"
},
"subIndex": {
"type": "string"
},
"value": {}
},
"required": [
"index",
"subIndex"
],
"type": "object"
}
],
"type": "array"
},
"index": {
"type": "string"
}
},
"required": [
"in",
TE2000 Version: 2.5.1 1181

Server
"out"
],
"type": "object"
}
15.1.11.2.1 EtherCAT Devices

EtherCAT Devices
General Information
Full symbol path TcHmiEcDiagnostics.Config::devices
Schema
Type object
Default value
{
"Device1": {
"enabled": true,
"masterNetId": "0.0.0.0.2.1",
"targetNetId": "0.0.0.0.1.1"
}
}
JSON Schema
{
"properties": {
"enabled": {
"default": true,
"propertyOrder": 1,
"type": "boolean"
},
"masterNetId": {
"format": "amsnetid",
"optionMethod": {
"symbol": "TcHmiEcDiagnostics.ListMastersOfRoute",
"writeValue": {
"$data": "#/properties/devices/additionalProperties/targetNetId"
}
},
"propertyOrder": 3,
"type": "string"
},
"targetNetId": {
"format": "amsnetid",
"optionMethod": {
"symbol": "ADS.ListRoutes"
},
"propertyOrder": 2,
"type": "string"
}
},
"required": [
"enabled",
"targetNetId",
"masterNetId"
],
"type": "object"
},
1182 Version: 2.5.1 TE2000

Server
"default": {
"Device1": {
"enabled": true,
"masterNetId": "0.0.0.0.2.1",
"targetNetId": "0.0.0.0.1.1"
}
},
"description": "devices",
"propertyOrder": 1,
"type": "object"
}
15.1.11.2.2 Vendors overwrite

Add vendor ID
General Information
Full symbol path TcHmiEcDiagnostics.Config::vendorsOverwrite
Schema
Type object
Default value
{
"1": {
"longName": "EtherCAT Technology Group",
"shortName": "ETG"
},
"2": {
"longName": "Beckhoff Automation GmbH & Co. KG",
"shortName": "Beckhoff"
}
}
JSON Schema
{
"properties": {
"devices": {
"items": {
"properties": {
"longName": {
"type": "string"
},
"pattern": {
"type": "string"
},
"shortName": {
"type": "string"
}
},
"required": [
"pattern"
],
"type": "object"
},
"type": "array"
},
"longName": {
"type": "string"
},
TE2000 Version: 2.5.1 1183

Server
"shortName": {
"type": "string"
}
},
"required": [
"devices"
],
"type": "object"
},
"default": {
"1": {
"longName": "EtherCAT Technology Group",
"shortName": "ETG"
},
"2": {
"longName": "Beckhoff Automation GmbH & Co. KG",
"shortName": "Beckhoff"
}
},
"description": "descVendorsOverwrite",
"propertyOrder": 2,
"type": "object"
}
15.1.12 TcHmiLdap
Type Definitions
Name Description
General Properties

HOST [} 1186] Host A hostname, a domain name or an IP address. IPv6
is currently not supported.
PORT [} 1187] Port The most common ports are 636 for TLS and 389 for
unencrypted connections.
USE_TLS [} 1187] Use TLS Strongly recommended, especially when using the
'Simple' authentication mechanism.
TRUST_ALL_CERTIFICATES Trust all certificates If 'false', check whether the server certificate was
[} 1188] issued by a certificate authority trusted by the
operating system.
TIMEOUT [} 1188] Timeout This timeout is used for all LDAP requests, including
search requests.
BASE_DN [} 1189] Base DN Entry point for LDAP search requests. If empty, the
domain components of the host are used.
LDAP_OPT_REFERRALS Follow referrals Specifies whether to automatically follow referrals
[} 1189] returned by the LDAP server.
Case-sensitive DNs and attributes are case-insensitive by default. It
CASE_SENSITIVE_ATTRIBU comparison of attribute is possible to define an attribute as case-sensitive in
TE_VALUE_COMPARISON values the schema, but this is rare.
[} 1190]
1184 Version: 2.5.1 TE2000

Server
HMI Authentication

Authentication mechanism The most common mechanism is 'Simple'. 'Digest-
AUTHENTICATION_MECH MD5' is recommended when TLS is unavailable.
ANISM [} 1190]
USER_FILTER [} 1191] User filter Used to search for the user entry. {input} is a
placeholder replaced by what the user inputs in the
login form. {username_attribute} is a placeholder
replaced by the configured username attribute.
USERNAME_ATTRIBUTE Username attribute Attribute used to identify the user.
[} 1191]
Ignore the domain suffix Ignore everything after the first @ in the username
IGNORE_DOMAIN_SUFFIX during login submitted by the user. If you are for example using
_DURING_LOGIN [} 1192] 'userPrincipalName' on ActiveDirectory you need to
disable this setting, because the userPrincipalName
contains an @.
Append the domain during For example, if the 'email' or 'userPrincipalName' is
APPEND_DOMAIN_DURIN login used for login, this setting can be used to
G_LOGIN [} 1192] automatically add the domain suffix so that it does
not need to be specified at login. The extension does
a case-insensitive check to find out if the domain
suffix is already present.
Use LDAP search for Depending on the size of the directory, the search
USE_LDAP_SEARCH_FOR_L ListUsers might take too long or return too many results. If
ISTUSERS [} 1193] disabled, the usernames are collected from the
TcHmiSrv configuration.
LDAP Authentication

Authentication mechanism 'None' means that there is no bind user, in which
BIND_USER_AUTHENTICA for bind user case, the bind request is done with what the user
TION_MECHANISM inputs in the login form.
[} 1193]
BIND_USER_DN [} 1194] Bind user DN The full DN of the admin user that is used to search
for the DN of the user that is trying to sign in. This
setting is ignored if the authentication mechanism is
'Anonymous', 'Kerberos-Credential-Cache' or 'None'.
BIND_USER_PASSWORD Bind user password Stored as plaintext in the configuration database.
[} 1195]
Group mappings

GROUP_MAPPINGS Group mappings Set HMI user groups based on an LDAP user's
[} 1195] attributes.
BLOCK_USERS [} 1196] Block specific users Blocked users are not able to log in, even if they
logged in successfully in the past.
15.1.12.1.1 ldapAttributeValue
Attribute value
TE2000 Version: 2.5.1 1185

Server
General Information
Domain TcHmiLdap
Schema
Type string
JSON Schema
{
"pattern": "#(?:[\\dA-Fa-f]{2})+|(?:[^,=\\+<>#;\\\\\"]|\\\\[,=\\+<>#;\\\\\"]|\\\\[\\dA-Fa-f]
{2})*|\"(?:[^\\\\\"]|\\\\[,=\\+<>#;\\\\\"]|\\\\[\\dA-Fa-f]{2})*\"",
"type": "string"
}
15.1.12.1.2 ldapDistinguishedName
Distinguished Name
General Information
Domain TcHmiLdap
Schema
Type string
JSON Schema
{
"pattern": "^(?:[A-Za-z][\\w-]*|\\d+(?:\\.\\d+)*)=(?:#(?:[\\dA-Fa-f]{2})+|(?:[^,=\\+<>#;\\\\\"]|
\\\\[,=\\+<>#;\\\\\"]|\\\\[\\dA-Fa-f]{2})*|\"(?:[^\\\\\"]|\\\\[,=\\+<>#;\\\\\"]|\\\\[\\dA-Fa-f]
{2})*\")(?:\\+(?:[A-Za-z][\\w-]*|\\d+(?:\\.\\d+)*)=(?:#(?:[\\dA-Fa-f]{2})+|(?:[^,=\\+<>#;\\\\\"]|\\\
\[,=\\+<>#;\\\\\"]|\\\\[\\dA-Fa-f]{2})*|\"(?:[^\\\\\"]|\\\\[,=\\+<>#;\\\\\"]|\\\\[\\dA-Fa-f]
{2})*\"))*(?:,(?:[A-Za-z][\\w-]*|\\d+(?:\\.\\d+)*)=(?:#(?:[\\dA-Fa-f]{2})+|(?:[^,=\\+<>#;\\\\\"]|\\\
\[,=\\+<>#;\\\\\"]|\\\\[\\dA-Fa-f]{2})*|\"(?:[^\\\\\"]|\\\\[,=\\+<>#;\\\\\"]|\\\\[\\dA-Fa-f]{2})*\")
(?:\\+(?:[A-Za-z][\\w-]*|\\d+(?:\\.\\d+)*)=(?:#(?:[\\dA-Fa-f]{2})+|(?:[^,=\\+<>#;\\\\\"]|\\\\[,=\\
+<>#;\\\\\"]|\\\\[\\dA-Fa-f]{2})*|\"(?:[^\\\\\"]|\\\\[,=\\+<>#;\\\\\"]|\\\\[\\dA-Fa-f]
{2})*\"))*)*$",
"type": "string"
}
15.1.12.2.1 Host
A hostname, a domain name or an IP address. IPv6 is currently not supported.
General Information
Domain TcHmiLdap
Full symbol path TcHmiLdap.Config::HOST
Schema
Type string
Default value ""
1186 Version: 2.5.1 TE2000

Server
JSON Schema
{
"default": "",
"description": "DESC_HOST",
"propertyOrder": 1,
"type": "string"
}
15.1.12.2.2 Port
The most common ports are 636 for TLS and 389 for unencrypted connections.
General Information
Domain TcHmiLdap
Full symbol path TcHmiLdap.Config::PORT
Schema
Type integer
Minimum 1
Default value 389
JSON Schema
{
"default": 389,
"description": "DESC_PORT",
"minimum": 1,
"propertyOrder": 2,
"type": "integer"
}
15.1.12.2.3 Use TLS

Strongly recommended, especially when using the 'Simple' authentication mechanism.
General Information
Domain TcHmiLdap
Full symbol path TcHmiLdap.Config::USE_TLS
Schema
Type boolean
Default value False
JSON Schema
{
"configDescription": "DESC_USE_TLS",
"default": false,
TE2000 Version: 2.5.1 1187

Server
"propertyOrder": 3,
"type": "boolean"
}
15.1.12.2.4 Trust all certificates

If 'false', check whether the server certificate was issued by a certificate authority trusted by the operating
system.
General Information
Domain TcHmiLdap
Full symbol path TcHmiLdap.Config::TRUST_ALL_CERTIFICATES
Schema
Type boolean
Default value False
JSON Schema
{
"configDescription": "DESC_TRUST_ALL_CERTIFICATES",
"default": false,
"propertyOrder": 4,
"type": "boolean"
}
15.1.12.2.5 Timeout
This timeout is used for all LDAP requests, including search requests.
General Information
Domain TcHmiLdap
Full symbol path TcHmiLdap.Config::TIMEOUT
Schema
Type string
Format timespan
Minimum PT1S
JSON Schema
{
"default": "PT10S",
"description": "DESC_TIMEOUT",
"hidden": true,
"propertyOrder": 5,
"type": "string"
}
1188 Version: 2.5.1 TE2000

Server
15.1.12.2.6 Base DN
Entry point for LDAP search requests. If empty, the domain components of the host are used.
General Information
Domain TcHmiLdap
Full symbol path TcHmiLdap.Config::BASE_DN
JSON Schema
{
"allOf": [
{
"configDescription": "DESC_BASE_DN",
"default": "",
"optionMethod": {
"symbol": "ListNamingContexts"
},
"propertyOrder": 10
},
{
"anyOf": [
{
"const": "",
"type": "string"
},
{
"$ref": "tchmi:server#/definitions/ldapDistinguishedName"
}
]
}
]
}
15.1.12.2.7 Follow referrals

Specifies whether to automatically follow referrals returned by the LDAP server.
General Information
Domain TcHmiLdap
Full symbol path TcHmiLdap.Config::LDAP_OPT_REFERRALS
Schema
Type boolean
Default value False
JSON Schema
{
"configDescription": "DESC_LDAP_OPT_REFERRALS",
"default": false,
"hidden": true,
"type": "boolean"
}
TE2000 Version: 2.5.1 1189

Server
15.1.12.2.8 Case-sensitive comparison of attribute values

DNs and attributes are case-insensitive by default. It is possible to define an attribute as case-sensitive in the
schema, but this is rare.
General Information
Domain TcHmiLdap
Full symbol path TcHmiLdap.Config::CASE_SENSITIVE_ATTRIBUTE_VALUE_C
OMPARISON
Schema
Type boolean
Default value False
JSON Schema
{
"default": false,
"description": "DESC_CASE_SENSITIVE_ATTRIBUTE_VALUE_COMPARISON",
"hidden": true,
"type": "boolean"
}
15.1.12.3 HMI Authentication
15.1.12.3.1 Authentication mechanism

The most common mechanism is 'Simple'. 'Digest-MD5' is recommended when TLS is unavailable.
General Information
Domain TcHmiLdap
Full symbol path TcHmiLdap.Config::AUTHENTICATION_MECHANISM
Category HMI Authentication
Schema

Default value "Simple"
Enumeration value
Simple
Digest-MD5
JSON Schema
{
"category": "CATEGORY_AUTHENTICATION",
"default": "Simple",
"description": "DESC_AUTHENTICATION_MECHANISM",
"enum": [
"Simple",
1190 Version: 2.5.1 TE2000

Server
"Digest-MD5"
],
"propertyOrder": 6,
"type": "string"
}
15.1.12.3.2 User filter

Used to search for the user entry. {input} is a placeholder replaced by what the user inputs in the login form.
{username_attribute} is a placeholder replaced by the configured username attribute.
General Information
Domain TcHmiLdap
Full symbol path TcHmiLdap.Config::USER_FILTER
Schema

Default value "(&({username_attribute}={input})(objectClass=person))"
Enumeration value
(&({username_attribute}={input})(objectCategory=person)(objectClass=user))
(&({username_attribute}={input})(objectClass=person))
(&({username_attribute}={input})(objectClass=inetOrgPerson))
JSON Schema
{
"configDescription": "DESC_USER_FILTER",
"default": "(&({username_attribute}={input})(objectClass=person))",
"enum": [
"(&({username_attribute}={input})(objectCategory=person)(objectClass=user))",
"(&({username_attribute}={input})(objectClass=person))",
"(&({username_attribute}={input})(objectClass=inetOrgPerson))"
],
"type": "string"
}
15.1.12.3.3 Username attribute

Attribute used to identify the user.
General Information
Domain TcHmiLdap
Full symbol path TcHmiLdap.Config::USERNAME_ATTRIBUTE
TE2000 Version: 2.5.1 1191

Server
Schema

Default value "userPrincipalName"
Enumeration value
userPrincipalName
sAMAccountName
uid
mail
JSON Schema
{
"configDescription": "DESC_USERNAME_ATTRIBUTE",
"default": "userPrincipalName",
"enum": [
"userPrincipalName",
"sAMAccountName",
"uid",
"mail"
],
"type": "string"
}
15.1.12.3.4 Ignore the domain suffix during login

Ignore everything after the first @ in the username submitted by the user. If you are for example using
'userPrincipalName' on ActiveDirectory you need to disable this setting, because the userPrincipalName
contains an @.
General Information
Domain TcHmiLdap
Full symbol path TcHmiLdap.Config::IGNORE_DOMAIN_SUFFIX_DURING_LO
GIN
Schema
Type boolean
Default value False
JSON Schema
{
"configDescription": "DESC_IGNORE_DOMAIN_SUFFIX_DURING_LOGIN",
"default": false,
"type": "boolean"
}
15.1.12.3.5 Append the domain during login

For example, if the 'email' or 'userPrincipalName' is used for login, this setting can be used to automatically
add the domain suffix so that it does not need to be specified at login. The extension does a case-insensitive
check to find out if the domain suffix is already present.
1192 Version: 2.5.1 TE2000

Server
General Information
Domain TcHmiLdap
Full symbol path TcHmiLdap.Config::APPEND_DOMAIN_DURING_LOGIN
Schema
Type string
Default value ""
JSON Schema
{
"configDescription": "DESC_APPEND_DOMAIN_DURING_LOGIN",
"default": "",
"type": "string"
}
15.1.12.3.6 Use LDAP search for ListUsers

Depending on the size of the directory, the search might take too long or return too many results. If disabled,
the usernames are collected from the TcHmiSrv configuration.
General Information
Domain TcHmiLdap
Full symbol path TcHmiLdap.Config::USE_LDAP_SEARCH_FOR_LISTUSERS
Schema
Type boolean
Default value False
JSON Schema
{
"configDescription": "DESC_USE_LDAP_SEARCH_FOR_LISTUSERS",
"default": false,
"type": "boolean"
}
15.1.12.4 LDAP Authentication
15.1.12.4.1 Authentication mechanism for bind user

'None' means that there is no bind user, in which case, the bind request is done with what the user inputs in
the login form.
TE2000 Version: 2.5.1 1193

Server
General Information
Domain TcHmiLdap
Full symbol path TcHmiLdap.Config::BIND_USER_AUTHENTICATION_MECHA
NISM
Category LDAP Authentication
Schema

Default value "None"
Enumeration value
None
Anonymous
Simple
Digest-MD5
Kerberos-Credential-Cache
JSON Schema
{
"category": "CATEGORY_BIND_USER",
"configDescription": "DESC_BIND_USER_AUTHENTICATION_MECHANISM",
"default": "None",
"enum": [
"None",
"Anonymous",
"Simple",
"Digest-MD5",
"Kerberos-Credential-Cache"
],
"propertyOrder": 7,
"type": "string"
}
15.1.12.4.2 Bind user DN

The full DN of the admin user that is used to search for the DN of the user that is trying to sign in. This
setting is ignored if the authentication mechanism is 'Anonymous', 'Kerberos-Credential-Cache' or 'None'.
General Information
Domain TcHmiLdap
Full symbol path TcHmiLdap.Config::BIND_USER_DN
JSON Schema
{
"allOf": [
{
"configDescription": "DESC_BIND_USER_DN",
"default": "",
"propertyOrder": 8
},
{
"anyOf": [
1194 Version: 2.5.1 TE2000

Server
{
"const": "",
"type": "string"
},
{
"$ref": "tchmi:server#/definitions/ldapDistinguishedName"
},
{
"$ref": "tchmi:server#/definitions/ldapAttributeValue"
}
]
}
]
}
15.1.12.4.3 Bind user password

Stored as plaintext in the configuration database.
General Information
Domain TcHmiLdap
Full symbol path TcHmiLdap.Config::BIND_USER_PASSWORD
Schema
Type string
Format encrypted
JSON Schema
{
"description": "DESC_BIND_USER_PASSWORD",
"propertyOrder": 9,
"type": "string"
}
15.1.12.5 Group mappings
15.1.12.5.1 Group mappings

Set HMI user groups based on an LDAP user's attributes.
General Information
Domain TcHmiLdap
Full symbol path TcHmiLdap.Config::GROUP_MAPPINGS
Category Group mappings
Schema
Type array
TE2000 Version: 2.5.1 1195

Server
Default value
[]
JSON Schema
{
"category": "CATEGORY_INTEGRATION",
"configDescription": "DESC_GROUP_MAPPINGS",
"default": [],
"items": {
"properties": {
"HMI_GROUP": {
"optionMethod": {
},
"propertyOrder": 3,
"type": "string"
},
"LDAP_ATTRIBUTE_NAME": {
"default": "memberOf",
"propertyOrder": 1,
"type": "string"
},
"LDAP_ATTRIBUTE_VALUE": {
"allOf": [
{
"propertyOrder": 2
},
{
}
]
}
},
"required": [
"LDAP_ATTRIBUTE_NAME",
"LDAP_ATTRIBUTE_VALUE",
"HMI_GROUP"
],
"type": "object"
},
"type": "array"
}
15.1.12.5.2 Block specific users

Blocked users are not able to log in, even if they logged in successfully in the past.
General Information
Domain TcHmiLdap
Full symbol path TcHmiLdap.Config::BLOCK_USERS
Category Group mappings
Schema
Type object
Default value
{
"LIST": [],
}
1196 Version: 2.5.1 TE2000

Server
JSON Schema
{
"category": "CATEGORY_INTEGRATION",
"configDescription": "DESC_BLOCK_USERS",
"default": {
"LIST": [],
},
"properties": {
"LIST": {
"default": [],
"items": {
"properties": {
"LDAP_ATTRIBUTE_NAME": {
"default": "memberOf",
"propertyOrder": 1,
"type": "string"
},
"LDAP_ATTRIBUTE_VALUE": {
"allOf": [
{
"propertyOrder": 2
},
{
}
]
}
},
"required": [
"LDAP_ATTRIBUTE_NAME",
"LDAP_ATTRIBUTE_VALUE"
],
"type": "object"
},
"propertyOrder": 3,
"type": "array"
},
"USE_WHITELISTING": {
"configDescription": "DECS_USE_WHITELISTING",
"default": false,
"propertyOrder": 1,
"type": "boolean"
},
"WHITELIST_ACCOUNTS_AFFECTED_BY_GROUP_MAPPINGS": {
"default": false,
"description": "DESC_WHITELIST_ACCOUNTS_AFFECTED_BY_GROUP_MAPPINGS",
"propertyOrder": 2,
"type": "boolean"
}
},
"required": [
"USE_WHITELISTING",
"WHITELIST_ACCOUNTS_AFFECTED_BY_GROUP_MAPPINGS",
"LIST"
],
"type": "object"
}
15.2 Server-to-server communication

Server-to-server communication enables communication between TwinCAT HMI servers via WebSockets.
Using server-to-server communication, any data points can be exchanged between the servers. The
prerequisite for this is that the symbols are mapped on the target server. [} 77]
Server-to-server communication can be used in different scenarios. For example, it is possible for a server to
tap the data points of any number of subordinate servers. It is also possible for one server to pass the data
points on to another server, which in turn passes the data on to the next server.
TE2000 Version: 2.5.1 1197

Server
Server-to-server communication requires a client license (TF2010 - TF2040) on the server to which another
server wants to connect. In the scenario shown above, TwinCAT HMI Server 1, TwinCAT HMI Server 2 and
TwinCAT HMI Server n require a client license if the higher-level TwinCAT HMI Server connects to them.
15.2.1 Configure connection

Server-to-server communication is set up on the configuration page [} 880] of the TwinCAT HMI server.
1198 Version: 2.5.1 TE2000

Server
Add Remote Server
1. Open the configuration page of the server and navigate to the subpage TcHmiSrv → Webserver:
2. Under Remote Server, you can add a server that you want to connect to. Click on the entry + Add.
Configuring the Remote Server
The connection to the remote server can be configured as follows:
1. Domain: The domain can be chosen freely. The remote server is listed in TwinCAT HMI under this
name.
2. Remote URL: URL of the remote server. The complete address of the remote server must be speci-
fied here, including the protocol to be used. Using encrypted communication requires adding the cer-
tificate [} 1200] of the remote server.
3. Username (optional): The user name is required if authentication [} 887] is active on the remote
server. Depending on the configured symbol rights [} 897], the different users have different access
rights to the symbols. It is possible to log another user on to the remote server at runtime [} 1200].
If authentication is disabled on the remote server, the user does not need to enter anything.
4. Password (optional): Password of the user logged on to the remote server.
TE2000 Version: 2.5.1 1199

Server
5. Timeout (optional): WebSocket timeout for communication with the remote server.
6. Enabled: Enables or disables the connection to the remote server.
7. Add: Adds the connection to the remote server.
15.2.1.1 Add remote server certificate

Communication with the remote server can be encrypted. In this case, the SSL certificate of the remote
server must be exported and imported to the server that wants to connect to the remote server.
1. Export the certificate of the remote server. Open the configuration page of the remote server and click
on "Export SSL Certificate".
2. Open the configuration page of the server you want to connect to the remote server.
3. Navigate under "TcHmiSrv" to the tab "Webserver" and click on the entry "Allowed certificates for re-
mote servers".
4. Add a new certificate by clicking on the entry "+ Add".

5. Select the certificate of the remote server you want to import.
6. Confirm the dialog by clicking on "Add".
15.2.1.2 Changing the Configuration at Runtime

The configuration of the remote server can be changed at runtime. This makes it possible, for example, to
log on to the remote server with another user and thus obtain different access rights to the symbols of the
remote server. Access at runtime is via the Config symbol of the TwinCAT HMI server. Under the Config
symbol you will find the configuration of the remote server, which contains the same options as the
configuration page of the server.
1200 Version: 2.5.1 TE2000

Server
When mapping the symbols [} 77], the domain must be specified (e.g. MyRemoteServer). The symbols can
then be described and read in the Actions and Conditions editor [} 63].
15.2.2 Use data points

After the connection has been configured, the mapped symbols of the remote server can be accessed.
Access is via the TwinCAT HMI Configuration window [} 75] via the domain of the remote server. There the
symbols can be used in the same way as with the other extensions [} 104].
The symbols can be mapped via the TwinCAT HMI Configuration window. Activating the extended view
[} 75] (button "...") displays the extended mapped symbols of the remote server.
TE2000 Version: 2.5.1 1201

Server
15.3 Extensions
The TwinCAT HMI Server has a modular structure and encapsulates individual functionalities in server
extensions. This enables a flexible expandability of the server. This can be used, for example, to integrate
business logic centrally in the server and to protect know-how. Possible application scenarios are, for
example, the connection to a user-specific database or the implementation of communication protocols.
The development of server extensions is done in C#. The development takes place in a separate project
type within the Visual Studio. A corresponding project template is available for this purpose.
The execution of a server extension on the TwinCAT HMI server (TF2000) requires a license for the
extension SDK (TF2200).
The development of a server extension requires a full version [} 18] of Visual Studio.
15.3.1 First steps

In addition to the TwinCAT HMI project, add another Server Extension project to your solution:
1202 Version: 2.5.1 TE2000

Server
In the following dialog you can choose which server version should be used for development:
TE2000 Version: 2.5.1 1203

Server
If the project was compiled successfully, the extension can be loaded from the server. Open the context
menu in the TwinCAT HMI project under Server/Extensions:
Activate the respective extension to be loaded from the Engineering Server:
The server tries to load the extension. The state of the loaded extension is symbolized in the project node
Server/Extensions:
If a problem has occurred during loading, the error list or log from the server can help with error analysis.
After loading the extension, the extension symbols are available in the TwinCAT HMI Config window:
1204 Version: 2.5.1 TE2000

Server
15.4 Appendix
15.4.1 TcHmiAds return codes
Enumerations
Enumeration Description
Return codes of the TcHmiAds extension.
HMI_ADS_CONSTA
NTS [} 1205]
15.4.1.1 HMI_ADS_CONSTANTS Enumeration

Return codes of the TcHmiAds extension.
Namespace: TcHmiAds [} 1205]

Assembly: TcHmiAds (in TcHmiAds.dll) Version: 1.0.0.0 (1.0.0.0)
TE2000 Version: 2.5.1 1205

Server
Members
1206 Version: 2.5.1 TE2000

Server
Hex Dec Member name Value Description

0x0 0 HMI_ADS_SUCCE 0 No error, everything
SS fine
0x100000 1048576 HMI_ADS_E_OFF 1048576 Offset of TcHmiAds
SET specific error codes
0x100010 1048592 HMI_ADS_E_TCDI 1048592 TwinCAT directory not
R found on local system
0x100011 1048593 HMI_ADS_E_TCV 1048593 TwinCAT version
ERSION invalid
0x100012 1048594 HMI_ADS_E_CON 1048594 TwinCAT configuration
FIGDIR directory not found
0x100013 1048595 HMI_ADS_E_STA 1048595 TwinCAT Router is in
TE invalid state no port
could be opened
0x100020 1048608 HMI_ADS_E_PAR 1048608 Error while parsing
SE_BASETYPES ADS base types
0x100021 1048609 HMI_ADS_E_PAR 1048609 Error while parsing
SE_DATA ADS data
0x100022 1048610 HMI_ADS_E_NOT 1048610 Function not
_IMPLEMENTED implemented (trying to
write a reference
value)
0x100030 1048624 HMI_ADS_E_INVA 1048624 Invalid data written to
LID_DATA server or an ADS
datatype can not be
parsed
0x100031 1048625 HMI_ADS_E_UPL 1048625 No upload data
OAD_DATA provided by configured
ADS runtime
0x100032 1048626 HMI_ADS_E_UNE 1048626 Should not happen
XPECTED contact support
0x100033 1048627 HMI_ADS_E_INVA 1048627 Runtime name is
LID_RUNTIME empty or invalid
0x100034 1048628 HMI_ADS_E_INVA 1048628 A parameter of the
LID_PARAMETER requested function is
invalid
0x100035 1048629 HMI_ADS_E_NO_ 1048629 No offline data
OFFLINE_DATA available
0x100036 1048630 HMI_ADS_E_INVA 1048630 The requested symbol
LID_SYMBOL is not available
0x100037 1048631 HMI_ADS_E_MISS 1048631 A parameter is missing
ING_PARAMETER in the requested
function
0x100038 1048632 HMI_ADS_E_ADD 1048632 An ADS route could
_ROUTE not be added
0x100039 1048633 HMI_ADS_E_EMP 1048633 No ADS symbols
TY found
0x10003A 1048634 HMI_ADS_E_DISA 1048634 The requested runtime
BLED is disabled in the HMI
configuration
0x10003B 1048635 HMI_ADS_E_LICE 1048635 A license error
NSE occurred
0x10003C 1048636 HMI_ADS_E_INVA 1048636 A type from ADS could
LID_SYMBOL_TY not be interpreted
PE
TE2000 Version: 2.5.1 1207

Server
Hex Dec Member name Value Description

0x10003D 1048637 HMI_ADS_E_INVA 1048637 A handle to an ADS
LID_SYMBOL_HA symbol has become
NDLE invalid
0x10003E 1048638 HMI_ADS_E_ABO 1048638 A TCP/IP error
RTED occurred
Reference
TcHmiAds Namespace [} 1205]
1208 Version: 2.5.1 TE2000

Framework
16 Framework
TwinCAT HMI can be extended in the client via script language. The client is implemented via web
technology (see Web Technology Reference at MDN). Besides the TwinCAT HMI API, the application
developer can also use the other browser APIs. The main API that is required is the JavaScript DOM API.
JavaScript tutorials:
• https://developer.mozilla.org/en-US/docs/Web/Tutorials
• https://developer.mozilla.org/en-US/docs/Learn
16.1 Script languages in the HMI project

Scripting languages enable the client-side extension of a TwinCAT HMI project with complex logics that
cannot be mapped using the engineering functions. The scripting languages provide the developer with all
options and functions of the respective scripting language. In addition, the scripting languages provide
access to the framework API.
In addition to the JavaScript script language, version 1.12 makes the TypeScript programming language
available for development purposes. TypeScript code is converted to JavaScript code by the TypeScript
transpiler. TypeScript offers many advantages over JavaScript thanks to typification and the TypeScript
syntax. This enables many errors to be detected at an early stage during development, making source code
development easier and faster.
A distinction is made between three types of usage:
1. Action [} 1209]: An action consists of JavaScript code that can only be used within the Actions and
Conditions Editor [} 59].
Application: Execution of simple JavaScript functionalities.
Note: No TypeScript support.
2. Functions [} 1213]: A function consists of TypeScript/JavaScript code and an associated description; it
is added separately to a project.
Application: TypeScript/JavaScript execution in the Actions and Conditions Editor [} 59] and in the
Properties [} 58] window.
3. Code-behind [} 1220]: Code-behind consists of TypeScript/JavaScript code and is added to a project
as a separate file.
Application: Execution of complex TypeScript/JavaScript code.
JavaScript is supported from version 1.8, TypeScript from version 1.12.
See also
TypeScript documentation
16.1.1 Action
16.1.1.1 Create
An action is configured in the Actions and Conditions Editor [} 59] for an event. To do this, open any event
and insert a JavaScript action in the Actions and Conditions Editor using drag & drop.
TE2000 Version: 2.5.1 1209

Framework
A JavaScript action consists of the following elements:
1 Edit Source Code: Clicking this button opens the Embedded JavaScript Editor, where the JavaScript
statements can be programmed.
2 Wait mode: In this combo box you can select whether the JavaScript block is executed synchronously or
asynchronously [} 1211].
3 Inject context object: When selecting the checkbox a context object (ctx) [} 1212] is available within the
JavaScript code, which can be used to provide feedback about the end of an action. The context object is
evaluated via a success branch or an error branch [} 1211], which can be shown or hidden by right-clicking on
the action.
16.1.1.2 Editor
The editor for JavaScript actions offers the option to program and edit the JavaScript code. After
programming, save the JavaScript code by clicking the OK button.
1210 Version: 2.5.1 TE2000

Framework
The JavaScript code within the JavaScript action is interpreted when the action is executed. De-
pending on the event, the action can be executed several times. Variables and functions declared in
an action are only available within the action. Internal variables [} 85] can be read via the framework
API.
16.1.1.3 Use
JavaScript actions are typically used for simple JavaScript logics that have no major connection to other
functionalities in the project. The use of a Code-Behind file [} 1220] is recommended in cases where several
JavaScript actions are configured, since the code is available centrally in one place, i.e. not distributed
across several places.
Typical use cases

• Logging messages to the browser console
• Output of info messages in popup windows for debugging purposes
• Calling simple framework API functions
Special statements
• Breakpoint:
debugger;
This statement sets a breakpoint at the current location and stops the program when the development tools
of the browser [} 1343] are open.
16.1.1.4 Wait mode

Via the wait mode options of the JavaScript action, the TwinCAT HMI framework can be informed whether
the stored logic works synchronously or asynchronously; it is used to determine when the TwinCAT HMI
framework considers execution to be finished.
TE2000 Version: 2.5.1 1211

Framework
Synchronous
The execution of the action is considered finished when the last line of JavaScript source code has been
processed synchronously. If an exception occurs during execution, the error branch of the JavaScript action
is executed. If the execution completed without errors, the success branch of the JavaScript action is
executed.
The Wait for completion option has no effect for a synchronous logic. "Parallel" execution of synchronous
logic, even in parts, is not possible.
Asynchronous
The execution of the action is considered completed if this has been signaled using the corresponding
functions of a context object. If Inject context object is checked, an object with the name "ctx [} 1212]" is
inserted into the context of the JavaScript block. This object contains functions for communicating the
execution result.
If the success function is called, the success branch of the JavaScript action is executed. If the error
function is called, the error branch of the JavaScript action is executed. The error branch of the JavaScript
action is also executed if an exception occurs during execution.
With asynchronous logic, the Wait for completion option can be used to control whether the execution
result is to be awaited when the subsequent actions are executed or whether they are to be executed in
parallel with the JavaScript action.
16.1.1.4.1 Context
An asynchronous JavaScript [} 1209] trigger action must notify the context object (ctx) of success or failure of
the execution. The context object has appropriate functions for this.
success
Indicates successful execution.

ctx.success("Result");
1212 Version: 2.5.1 TE2000

Framework
error
Indicates unsuccessful execution.

ctx.error(TcHmi.Errors.ERROR);
16.1.2 Function
16.1.2.1 Create
Create a new function via the project node of the TwinCAT HMI project.
TE2000 Version: 2.5.1 1213

Framework
A function can be created based on TypeScript or JavaScript. Both have the same technical options and are
very similar in terms of programming. Due to the better Visual Studio programming support offered by Visual
Studio, TypeScript should be selected for new functions. Enter a name for the file.
A function consists of a TypeScript/JavaScript file and an associated JSON file, which defines engineering
properties. Double-click the JSON file in the Solution Explorer to configure [} 1214] the function and its
parameters.
16.1.2.2 Editor
The function and parameter editor is divided into a function and parameter area.
1214 Version: 2.5.1 TE2000

Framework
Function area:
1 Display name: Name of the function used [} 1216] in the Actions and Conditions Editor or in the Properties
window.
2 Description: Description of the function that is displayed as a tooltip during mouseover in the engineering.
3 Return type: Return value of the function that is transferred to the calling point in the engineering.
4 Context: The context defines whether the function synchronous (None) or asynchronous (Asynchronous)
[} 1211] is executed. Asynchronous automatically adds a context object [} 1220] as a parameter value to the
function.
5 Internal name: Internal name of the function used in the JavaScript file.
6 Category: The category determines under which category the function is displayed in the Actions and
Conditions Editor.
7 Return value description: Description of the return value that is displayed as a tooltip during mouseover
in the engineering.
Parameter area:
8 Display name: Name of the parameter used [} 1216] in the Actions and Conditions Editor or in the
Properties window.
9 Internal name: Internal name of the parameter used in the JavaScript file.
10 Description: Description of the parameter that is displayed as a tooltip during mouseover in the
engineering.
11 Data type: Data type of the parameter.
12 Default value: Default value of the parameter that is used if no parameter is transferred.
13 Required: Indicates whether the parameter is required or can be transferred optionally. If the parameter
is required and is not transferred, an error message is issued in the browser console.
14 Bindable: Bindable indicates whether the parameter can be bound to a symbol via the Select Binding
Source window [} 103]. The following options are available:
• No: The parameter cannot be bound to a symbol.
TE2000 Version: 2.5.1 1215

Framework
• Yes, pass value: The parameter can be bound to a symbol. During binding, the value of the symbol is
passed to the function (e.g. "20" for an integer).
• Yes, pass symbol reference: The parameter can be bound to a symbol. During binding, the reference
to the symbol is passed to the function. The symbol can be read (.read()) and written (.write()) via the
framework API "TcHmi.Symbol".
15 Rest: Rest indicates whether the last parameter is a rest parameter (var nNumber,...) and can therefore
contain a variable list of arguments (cf. va_arg / va_list in C / C++).
Changes (e.g. newly added parameters) in the function and parameter editor can be automatically
applied to the corresponding JavaScript file. The automatic application can be confirmed or rejected
via a dialog.
16.1.2.3 Use
Functions allow the execution of JavaScript code that can be linked directly from the Properties window
[} 58] in the engineering component or used within the Actions and Conditions Editor [} 59]. This makes it
possible to pass parameters to the function via the engineering.
Typical use cases

• Conversion: Conversion of values within a function, e.g. conversion of units.
• Validation: Checking of values within a function and feedback on the validity of the value.
Several functions are already available [} 68] in the TwinCAT HMI engineering. To obtain an over-
view of the functions, open the "Functions" folder in the Actions and Conditions Editor.
16.1.2.3.1 Using HMI functions

Functions that have been created are available for graphical programming in the Actions and Conditions
Editor [} 59] under Functions.
1216 Version: 2.5.1 TE2000

Framework
In addition, the Control Properties functions can be used directly in the Properties window [} 58]. They can
be found via IntelliSense.
TE2000 Version: 2.5.1 1217

Framework
16.1.2.4 Structure
A function is implemented within the TcHmi namespace. Implementation outside the namespace is not
possible, since otherwise the function would not be available in the TwinCAT HMI framework. The function is
registered in the framework via the framework API function "registerFunctionEx" (from version 1.12) or
"registerFunction" so that it is available at runtime.
The following example implements the conversion of a temperature from Fahrenheit to Celsius and returns
the calling point.
Base structure of a TypeScript function

module TcHmi {
export module Functions {
export module TcHmiProject40 {
export function FahrToCels(TempInFahr: number | string) {
// variable for the return value
var value = TempInFahr;
// check the type of the parameter

if (typeof TempInFahr === 'number') {
// parameter is already a number
// convert the parameter value to Celsius

value = ((TempInFahr - 32) * (5 / 9));
1218 Version: 2.5.1 TE2000

Framework
} else if (typeof TempInFahr === 'string') {

// parameter is a string
// convert the parameter type and the parameter value

value = ((parseFloat(TempInFahr) - 32) * (5 / 9));
}
// return the converted parameter

return value;
}
}
registerFunctionEx('FahrToCels', 'TcHmi.Functions.TcHmiProject40', TcHmiProject40.FahrToCels);
}
}
Base structure of a JavaScript function (from version 1.12)

(function (/** @type {globalThis.TcHmi} */ TcHmi) {
var Functions;
(function (/** @type {globalThis.TcHmi.Functions} */ Functions) {
var TcHmiProject40;
(function (TcHmiProject40) {
function FahrToCels(TempInFahr) {

// convert the parameter value to celsius

}else if (typeof TempInFahr === 'string') {

}

return value;
}
TcHmiProject40.FahrToCels = FahrToCels;
})(TcHmiProject40 = Functions.TcHmiProject40 || (Functions.TcHmiProject40 = {}));
Functions.registerFunctionEx('FahrToCels', 'TcHmi.Functions.TcHmiProject40',
TcHmiProject40.FahrToCels);
})(Functions = TcHmi.Functions || (TcHmi.Functions = {}));
})(TcHmi);
Base structure of a JavaScript function (from version 1.8)

// required namespace TcHmi
// name and parameters of the function defined in json
var FahrToCels = function (TempInFahr) {

// convert the parameter value to celsius

}
else if (typeof TempInFahr === 'string') {

}

return value;
};
TE2000 Version: 2.5.1 1219

Framework
// register the function in the framework

TcHmi.Functions.registerFunction('FahrToCels', FahrToCels);
})(TcHmi);
References to the framework and jQuery within the function's JavaScript file are created to enhance
IntelliSense support. This is not necessary with TypeScript.
// TcHmi Version 1.12
/// <reference path="../Packages/Beckhoff.TwinCAT.HMI.Framework.12.742.1/runtimes/native1.12-tchmi/
TcHmi.d.ts" />

// Provider for a best effort Intellisense of Visual Studio 2017/2019.
/// <reference path="C:\TwinCAT\Functions\TE2000-HMI-
Engineering\Infrastructure\TcHmiFramework\Latest\Lib\jquery.d.ts" />
Engineering\Infrastructure\TcHmiFramework\Latest\TcHmi.d.ts" />
Engineering\Infrastructure\TcHmiFramework\Latest\Controls\System\TcHmiControl\Source.d.ts" />

Engineering\Infrastructure\TcHmiFramework\Latest\Lib\jquery\jquery.js" />
Engineering\Infrastructure\TcHmiFramework\Latest\TcHmi.js" />
16.1.2.4.1 Context
An asynchronous [} 1214] TypeScript/JavaScript function must report execution success or error to the
context object (ctx). The context object has appropriate functions for this.
success
Indicates successful execution.

ctx.success("Result");
error
Indicates unsuccessful execution.

ctx.error(TcHmi.Errors.ERROR);
16.1.2.4.2 Using a function within a function

Within a JavaScript function, the TwinCAT HMI can use another JavaScript function. To do this, a reference
to the function must be created via the framework API. The function can be used once its validity has been
verified.
// get user function
var myCustomFunction1 = TcHmi.Functions.getFunction('MyCustomFunction1');
// check if the reference is valid
if (myCustomFunction1)
{
var myParameter = "Sample";
// function call
var output = myCustomFunction1(myParameter);
// ...
}
16.1.3 Code-behind
16.1.3.1 Create
A code-behind file can be added at the project level or in a project folder. Any number of code-behind files
can be added to the project.
1220 Version: 2.5.1 TE2000

Framework
A Code-Behind file can be created based on TypeScript or JavaScript. Both have the same technical options
and are very similar in terms of programming. Due to the better Visual Studio programming support offered
by Visual Studio, TypeScript should be selected for new functions.
Right-click the target node and click Add New Item. Select a code-behind file. The Code-Behind file can be
opened by double-clicking in the source code editor.
Code-behind sort order
If you have added several code-behind files to the project, it is possible to specify the order in the build
process and thus during inclusion within the HTML file of the HMI. This is necessary if dependencies exist
within the individual files.
Right-click on the project node of the HMI project and select CodeBehind Sort Order and Theme
Assignment.
Within the editor, the sort order can be defined under the JavaScript Files tab. The order can be changed
using the Up and Down buttons.
Note: The browsers only support JavaScript files. The generated JavaScript file is therefore displayed in this
window.
TE2000 Version: 2.5.1 1221

Framework
16.1.3.2 Use
A code-behind file can be used for JavaScript functionalities that are to apply globally to the entire project.
Control events can be registered independently of the HMI side, based on the control ID. Therefore, a code-
behind file is particularly suitable for mapping complex functionalities with JavaScript that cannot be
performed using the graphical engineering.
Typical applications
• Summary of functionalities: Identical event configurations can be combined in a code-behind file and
stored in functions to avoid redundancies (see Action Templates [} 69] in the Actions and Conditions
Editor).
• Global variables: Saving of data used in multiple events to a global variable (see internal symbols
[} 85] in the Configuration window).
• Evaluation of complex objects (e.g. JSON): Processing, validating and evaluating objects.
• Using the framework API: Access to the framework API functions, which cannot be executed via the
graphical engineering.
• Dynamic elements: Adding or removing dynamic elements at runtime (e.g. dynamically generate
controls at runtime, see ControlFactory).
• Responsive design: Querying the current browser width, switching of grid configurations and loading of
different pages depending on the browser width.
• Evaluating URL parameters: Loading different views depending on the browser URL.
• Disabling client interactions: Disabling interactions with other clients via the session ID of the browser.
16.1.3.3 Structure
A newly added code-behind file contains pre-configured JavaScript code.
The commentary lines (triple slash directives) are required for enhanced support of IntelliSenese in
JavaScript:
/// <reference path="../Packages/Beckhoff.TwinCAT.HMI.Framework.12.742.1/runtimes/native1.12-tchmi/
TcHmi.d.ts" />


1222 Version: 2.5.1 TE2000

Framework
The JavaScript code that is implemented within a code-behind file must be implemented within the TcHmi
namespace.
(function ( /** @type {globalThis.TcHmi} */ TcHmi) {
// code
})(TcHmi);
The TwinCAT HMI framework is not available outside the namespace!
In a new code-behind file the global onInitialized event is registered by the framework as an example.
Here you can place actions that are to be executed after the initialization of the framework.
// If you want to unregister an event outside the event code you need to use the return value of the
method register()
var destroyOnInitialized = TcHmi.EventProvider.register('onInitialized', function (e, data) {
// This event will be raised only once, so we can free resources.
// It's best practice to use destroy function of the event object within the callback function to
avoid conflicts.
e.destroy();
// ----------------------
// Place your code here!
// ----------------------
});
Within the code-behind file any events can be registered and deregistered. The registration of TwinCAT HMI
framework events is realized via the EventProvider framework API. Registration via the EventProvider
registers a callback to the event and returns a function for deregistering the event. The function for
deregistering the event should be called to release system resources when the event is no longer needed
(for example, Event Listener for a MouseOver event).
destroyOnInitialized();
Control events are registered using the Control ID (e.g. TcHmiButton.onPressed). A control event can be
registered in several places. If an event is registered in the code-behind file, it is not displayed in the
Designer under Events. It is therefore advisable to either register an event in a code-behind file or to
configure it in the Designer for enhanced clarity.
16.2 Extensions
16.2.1 Versions 1.8 and 1.10
16.2.1.1 Controls
JavaScript is supported from version 1.8.
16.2.1.1.1 Introduction
Framework controls are user-specific controls that are not created with the graphical WYSIWYG editor [} 34].
Framework controls are used if the desired behavior cannot be mapped with the standard controls or a user
control. Unlike a Code Behind file [} 1220], a framework control can be used independently of the HMI
project, so that the source code can be reused.
TE2000 Version: 2.5.1 1223

Framework
Technology
Framework controls are developed using web development tools.

• HTML: Type and structure of the elements of the framework control
• CSS: Design of the elements of the framework control
• JavaScript: Logic behind the elements of the framework control
Developers are no longer bound to the TwinCAT HMI controls and can use all the elements and
functionalities they are already familiar with from web development within a framework control. The standard
TwinCAT HMI controls are implemented on the same basis as a framework control. It is also possible to
reuse the TwinCAT HMI controls in the framework control or to add user-specific properties.
Application scenarios
Framework controls can map customer-specific and application-specific requirements. The following use
cases can be implemented with a framework control:
• Implementation of complex JavaScript logic
• Reusing HTML, JS and CSS in a control
• Integration of external libraries and realization of own libraries
• Dynamic elements: Adding and removing HTML elements and controls at runtime
• Developing responsive controls
• Realizing and integrating 3D models
Use
The framework controls can be integrated directly as references in a TwinCAT HMI project if both projects
are in the same solution. Furthermore, it is possible to export the framework control as a package [} 957] and
install it in different HMI projects. In this way, it is possible to implement application-specific control libraries.
Within the HMI project, a framework control is used like a standard TwinCAT HMI control.
1224 Version: 2.5.1 TE2000

Framework
16.2.1.1.2 First steps

1. Open Visual Studio and click Add new project. Select the Extensibility category under TwinCAT HMI
as the project type.
2. Right-click on the project and execute a project build (Build Project).
TE2000 Version: 2.5.1 1225

Framework
3. Add a new HMI project to the existing solution by right-clicking the Add new project solution. Select an
HMI project.
4. Right-click on the "Framework" node in the HMI project and select "Manage Extensions...".
1226 Version: 2.5.1 TE2000

Framework
5. Select Framework Control in the TwinCAT HMI Extension Management window and confirm the
dialog with OK.
6. If you have opened a View/Content/UserControl file, you have to reload the page. This is illustrated by a
note. Click Reload.
ð The framework control is now available in the toolbox.
TE2000 Version: 2.5.1 1227

Framework
7. Use drag & drop to add the framework control to an open View/Content/UserControl file.
ð You can now use the framework control like a normal control.
All changes in the source code of the framework control require a project build (see step 2) to en-
sure that the changes are adopted in the Engineering.
16.2.1.1.3 Development environment

A framework control project is created within a solution in Visual Studio. Multiple framework control projects
and associated HMI projects can be placed in a solution. A framework control project can be configured
using the standard Visual Studio functions (for example, Build Solution).
A framework control project contains the following elements when it is created:
1228 Version: 2.5.1 TE2000

Framework
1. References: This project node is not required and is automatically provided by the project type in Vis-
ual Studio.
2. Icons: This folder contains all icons relating to the control.
3. Icon: The .png elements are control icons in different sizes.
4. Schema [} 1259]: This folder contains JSON schema files that are required for the control. Additional
JSON schema files for project-specific data types can be added to this folder.
5. ControlDescription.Schema.json: Standard schema [} 1230] describing Description.json [} 1229].
6. Themes [} 1247]: This folder contains all themes relating to the control. New themes can be added to
this folder.
7. Base: This folder contains the base theme of the control. Additional theme-based files can be added
to this folder.
8. Image: This folder serves as a container for images that are assigned to the base theme.
9. Style.css [} 1247]: This stylesheet file contains the properties for the base theme.
10. Description.json [} 1229]: This file contains all Engineering interfaces for the TwinCAT HMI
11. Mainfest.json [} 1269]: This file describes control data required for creating a TwinCAT HMI package.
12. Source.js [} 1250]: This file contains the JavaScript logic required for the control.
13. Style.css [} 1247]: This file contains all style properties that are to apply to the control regardless of the
theme.
14. Template.html [} 1246]: This file contains the static HTML framework of the control and is included in
the HMI as HTML code for the control during subsequent instantiation on the HMI.
Please note from version 1.8
To program framework controls, a full version of Visual Studio is required for editing the HTML,
CSS, and JavaScript code. The Visual Studio shell is not sufficient.
16.2.1.1.4 Properties
Description.json
This section describes the structure of the description file Description.json.
TE2000 Version: 2.5.1 1229

Framework
Any changes in Description.json must be followed by a project build (see First Steps [} 1225]).
Introduction
TwinCAT HMI Engineering reads all properties of the control from the Description.json file. The properties
allow you to transfer data to the control and vice versa. In TwinCAT HMI Engineering, the control can be
configured via the Properties window [} 58] or via the Actions and Conditions editor. The developer can
define additional attributes, besides the standard attributes of each framework control.
Description.json must correspond to a given JSON schema. The schema is located in the framework control
project under Schema/Control/Description.json. The schema must not be changed. It is used to describe the
syntax in Description.json.
In many cases the following user-specific properties are defined in Description.json:

• Attributes [} 1235] (data interfaces)
• Functions [} 1241]
• Events [} 1243]
• Access rights [} 1245]
• User-specific data types [} 1244]
Properties
Type: Specifies the data type of the property.
Required: Specifies whether the property is required for the framework control (yes) or is optional (no).
$schema
Type: String (relative path)
Required: No
"$schema": "./Schema/ControlDescription.Schema.json"
This property references the JSON schema that describes the structure of Description.json. The schema is
located in the framework control project and does not have to be changed. Including the JSON schema
enables Intellisense in Visual Studio for each property.
name
Type: String
Required: Yes
"name": "framework-control-js1"
This property is the name of the framework control, which is automatically generated based on the project
name. The name is added to the control as a CSS class and can be used within the CSS files [} 1247] in the
framework control project to describe the styles.
classNamespace
Type: String
Required: Yes
"classNamespace": "TcHmi.Controls.Custom"
1230 Version: 2.5.1 TE2000

Framework
This property is the namespace in which the control is added to the controls. Framework controls are added
to the "Custom" namespace by default. The namespace is also used in Source.js.
className
Type: String
Required: Yes
"className": "FrameworkControlJs1"
This property is the internal name of the JavaScript object that defines the control. This name is used in
Source.js.
displayName
Type: String
Required: Yes
"displayName": "FrameworkControlJs1"
This property is the name of the control that is displayed as the control name in the Engineering.
version
Type: JSON object
Required: Yes
"version": {
"full": "1.0.0.0",
"major": 1,
"minor": 0,
"revision": 0,
"build": 0
}
This property is the version number of the framework control that is used for versioning a framework control.
The version number is subdivided into the major release number, minor release number, revision number
and build number.
For creating a package [} 957], the version number must match the version number in Manifest.json [} 1269].
visible
Type: Boolean
Required: Yes
"visible": true
This property makes the control visible or hides it in the toolbox in the Engineering. By default, a control is
always displayed in the toolbox.
themeable
Type: Enum string
Required: No
"themeable": "Standard"
This property determines whether the control is displayed in the theme editor [} 936] within in the TwinCAT
HMI Engineering.
Permissible values:
• Standard: The control is displayed in the theme editor.
TE2000 Version: 2.5.1 1231

Framework
• None: The control is not displayed in the theme editor.

• Advanced: The control is only displayed in the theme editor if the "Advanced" property is enabled in
the theme editor.
base
Type: String
Required: Yes
"base": "tchmi-control"
This property determines whether the control inherits the properties of another control. By default, a
framework control inherits all properties of Description.json of the base control tchmi-control, which
defines a base framework for all TwinCAT HMI controls. The control can be made to inherit from other
controls, such as a button, if a particular control is to be extended. The control name to be specified here
corresponds to the control type or control name defined in Description.json [} 1230].
Validity
This property must refer to a valid control and must not have the value null, otherwise the control
can no longer be used in the Engineering.
uses
Type: Array of strings
Required: No
"uses": []
This property defines a list of controls that are used in this control (static or dynamic at runtime). This
property references the JavaScript and stylesheet files of the controls used in this control. By default, no
other controls are used. The base control [} 1232] does not have to be referenced again.
If other controls are used in this control, the control type or name of the control [} 1230] defined in
Description.json must be specified.
The following listing shows an example of a framework control that uses the TcHmiButton and a user-specific
control:
"uses": [
"tchmi-button",
"tchmi-my-framework-control"
]
For more information about using controls in a framework control, see Examples.
description
Type: String
Required: Yes
"description": "This description text will be used as a Tooltip in Visual Studio."
This property is the description of the control and is displayed as a tooltip when the mouse is moved over the
control in the toolbox.
defaultDesignerEvent
Type: String
Required: No
"defaultDesignerEvent": ""
1232 Version: 2.5.1 TE2000

Framework
This property determines which event is to be configured in the Actions and Conditions Editor when the
control is double-clicked. By default (no entry or empty entry), no event is executed on double-clicking.
All standard and custom events defined in Description.json can be used here. The following listing shows an
example of a custom event:
"defaultDesignerEvent": ".onMyCustomEvent"
Custom events are defined under events [} 1243].
properties
Type: JSON object
Required: Yes
"properties": {
"containerControl": false,
"geometry": {
"width": 150,
"height": 150
}
}
This property defines the engineering properties required for each framework control and describes general
control properties.
• containerControl {Boolean}, not required: Specifies whether the control is a container control and
can include additional controls using drag and drop. In this case, the control must also be derived
[} 1232] (directly or indirectly) from TcHmiContainerControl.
• geometry {JSON object}: Defines the default geometry properties (width and height) of the control,
which are set after dropping the control from the toolbox.
icons
Type: Array of JSON objects
Required: Yes
"icons": [
{
"name": "Icons/16x16.png",
"width": 16,
"height": 16
},
{
"width": 24,
"height": 24
},
{
"width": 32,
"height": 32
},
{
"width": 64,
"height": 64
}
]
This property defines the icon of the control in different dimensions. The array contains JSON objects, where
each object corresponds to a control icon in a different resolution. The control icon is used to display the
control in the toolbox of the Engineering and the Actions and Conditions Editor.
The name is specified as a relative project path. The dimensions (width/height) are specified in pixels.
TE2000 Version: 2.5.1 1233

Framework
dependencyFiles
Required: Yes
"dependencyFiles": [
{
"name": "Source.js",
"type": "JavaScript",
"description": ""
},
{
"name": "Style.css",
"type": "Stylesheet",
"description": "Theme independent style"
}
]
This property contains all files of the framework control that must be included in the HTML file of the HMI. By
default, the Source.js and Style.css files are included. If additional JavaScript or stylesheet files are included
in the control, they must be referenced under "dependencyFiles".
Caution: Theme-dependent stylesheet files are not included under "dependencyFiles", but under "themes
[} 1234]".
The array contains JSON objects that contain information about the file:
• name {string}: file name and file extension with the relative project path to the file.
• type {string}: File type (JavaScript or stylesheet).
• description {string}: Optional file description.
themes
Type: JSON object of JSON objects
Required: No
"themes": {
"Base": {
"resources": [
{
"name": "Themes/Base/Style.css",
"description": ""
}
]
}
}
This property contains all themes that are included in the control. By default, the base theme is included with
a stylesheet file. A theme is an object containing the array "resources". The array "resources" contains
all the files that are allocated to a theme.
A "resource" object contains the same properties as a "dependencyFile" object [} 1234], with other allowed
values for "type":
• type {string}: file type (Stylesheet or ThemedValues, see Theming [} 934]).
Note: Images and fonts etc. are not included under the theme resources, but referenced via the stylesheet
file (see Theming [} 934]).
The following listing illustrates the inclusion of another theme with associated files:
"themes": {
"Base": {
"resources": [
{
1234 Version: 2.5.1 TE2000

Framework
"description": ""
}
]
},
"Custom": {
"resources": [
{
"name": "Themes/Custom/Style.css",
"description": ""
},
{
"name": "Themes/Custom/MyTheme.theme",
"type": "ThemedValues"
"description": "This is theme file created by the theme editor."
}
]
}
}
attributes
Type: Array of JSON objects (attributes)
Required: Yes
"attributes": [
{
"name": "data-tchmi-value",
"propertyName": "Value",
"propertySetterName": "setValue",
"propertyGetterName": "getValue",
"displayName": "Value",
"visible": true,
"themeable": "Standard",
"displayPriority": 10,
"type": "tchmi:general#/definitions/Boolean",
"category": "Value",
"description": "",
"readOnly": false,
"bindable": true,
"heritable": true,
"defaultValue": false,
"defaultValueInternal": false
}
]
The attributes define the data interfaces to the TwinCAT HMI Engineering. The attributes of the control are
displayed in the Properties window of the Engineering under "ShowProperties". Any number of attributes can
be defined in a control.
By default, the attribute array contains the type attribute that is required for each control and must not be
removed. This attribute specifies that the control is of type tchmi-framework-control-js1:
{
"name": "data-tchmi-type",
"displayName": "",
"propertyName": "type",
"propertySetterName": "",
"propertyGetterName": "getType",
"visible": false,
"type": "tchmi:framework#/definitions/ControlType",
"category": "None",
"description": "Type of the control.",
"requiredOnCompile": true,
"readOnly": true,
"bindable": false,
"heritable": false,
"defaultValue": "framework-control-js1",
"defaultValueInternal": null
}
The individual properties of an attribute are described on the following pages.

Required: Specifies whether the property is required for the attribute (yes) or is optional (no).
TE2000 Version: 2.5.1 1235

Framework
name
Type: String
Required: Yes
"name": "data-tchmi-value"
Name of the attribute. The name is written into the HMTL code of the control as a "data-*" attribute.
Therefore, the "data-" prefix is mandatory. The subsequent prefix "tchmi-" before the attribute is
recommended for standardizing attributes, but it is not obligatory. An attribute name may only be used once
for each control, otherwise unambiguous assignment cannot be guaranteed.
propertyName
Type: String
Required: Yes
"propertyName": "Value"
Internal attribute name of the control. The internal attribute name is formed from the attribute name without
prefix in Pascal case.
Example:
"name": "data-tchmi-my-custom-value"
becomes: „MyCustomValue“.
For better mapping between JavaScript variables and attributes, it is recommended to name the attribute
variable in the JavaScript code of Source.js according to the "propertyName".
propertySetterName
Type: String
Required: Yes
"propertySetterName": "setValue"
This property creates the reference to the setter function in Source.js. The setter function allows a new value
to be set. For the reference between Description.json and Source.js, the setter function must have the same
name as the"propertySetterName". If the names in Description.json and Source.js are different, an error
message appears in the browser console and the setter function cannot be used.
The recommended notation for the setter name is the "propertyName" plus the prefix "set" in Camel case.
If an attribute is read only [} 1239], the empty string should be entered as propertySetterName.
propertyGetterName
Type: String
Required: Yes
"propertyGetterName": "getValue"
This property creates the reference to the getter function in Source.js. The getter function returns the
attribute value when called. For the reference between Description.json and Source.js, the getter function
must have the same name as the"propertyGetterName". If the names in Description.json and Source.js
are different, an error message appears in the browser console and the getter function cannot be used.
The recommended notation for the getter name is the "propertyName" plus the prefix "get" in Camel case.
1236 Version: 2.5.1 TE2000

Framework
displayName
Type: String
Required: Yes
"displayName": "Value"
The property is the name of the attribute displayed in the Engineering Properties window for the attribute.
The "displayName" can be selected as desired, but it is recommended that it should be based on the
"propertyName".
refTo
Type: String
Required: No
"refTo": "basePropertyName"
Name of a PropertyName of the control. This attribute references another attribute.
This is used to write the physical unit (pixel or percent) in the development environment next to the numeric
value.
Before the introduction of refTo the "Unit" suffix was checked.
searchTerms
Required: No
"searchTerms": [
"Shortcut1",
"ShortCut2",
"Shortcut3"
]
This property defines a list of search terms for Engineering to optimize the search function within the Actions
and Conditions Editor and the Properties window. This makes it possible to find the attribute using terms
other than the attribute name.
visible
Type: Boolean
Required: No
"visible": true
This property determines whether the attribute is to be displayed in the Engineering. If the property is set to
"false", the attribute is not available in the Engineering. By default, all attributes are displayed in the
Engineering.
themeable
Type: Enum string
Required: No
This property determines whether the attribute is displayed in the theme editor in the Engineering.
Permissible values:
• Standard: The attribute is displayed in the theme editor.
TE2000 Version: 2.5.1 1237

Framework
• None: The attribute is not displayed in the theme editor.

• Advanced: The attribute is only displayed in the theme editor if the "Advanced" property is activated
in the theme editor.
type
Type: String (TcHmi data type)
Required: Yes
"type": "tchmi:general#/definitions/Boolean"
This property indicates the data types of the attribute. All data types of the TwinCAT HMI [} 87] are available.
Further user-specific data types can be defined (see dataTypes [} 1244]). The data type determines the
display of the attribute in the Engineering Properties window (e.g. checkbox for a Boolean value).
displayPriority
Type: Number
Required: No
"displayPriority": 10
This property determines the priority with which the attribute is displayed within the category in the
Engineering Properties window. User-specific sorting of attributes is possible based on the priority. Attributes
with the same priority are displayed according to the order in which they are defined. The prioritization of the
attribute categories is set via the property "attributCategories [} 1240]".
• Values less than 10 have high priority and are displayed higher up in the category, according to the
value.
• Values that equal 10 have main attributes like top, left etc.
• Values greater than 10 have low priority and are displayed lower down in the category, according to
the value.
• Values greater than 50 are collapsed by default and have to be expanded using the arrow.
allowedFunctions
Type: JSON object
Required: No
"allowedFunctions": {
"returnType": "tchmi:general#/definitions/String",
"requiredArguments": [
{
"type": "tchmi:general#/definitions/Number"
}
],
"requiredWaitMode": "Synchronous"
}
For attributes with the data type [} 1238]:

"type": "tchmi:framework#/definitions/Function"
These properties can only be used for "Function" type attributes. This property determines which functions
are allowed for the attribute. This means that when configuring the attribute, only those functions are
displayed that meet the defined criteria.
Further parameters are possible and can be specified per instance in the engineering.
Attributes:
• returnType {string}: Determines which TwinCAT HMI data type may be returned by the function.
• requiredArguments {array of JSON objects}: Determines which TwinCAT HMI data types the
functions may have as parameter values. The parameters mentioned here are set by the control.
1238 Version: 2.5.1 TE2000

Framework
• requiredWaitMode {enum string}: Determines in which mode (synchronous, asynchronous) the

function may be executed (Synchronous, Asynchronous).
For example, one the Beckhoff controls that uses this property is LinearGauge [} 400], namely for the
ValueFormat [} 419] in order to restrict the functions that can format the values of the gauge.
category
Type: String
Required: No
"category": "Value"
This property indicates the category to which the attribute is assigned in the Engineering Properties window.
New category names can be assigned or standard category names (e.g. Common) can be used. A new
category name does not have to exist under the Attribute categories [} 1240], since the category is created
independently of the attribute categories. The attribute categories are used to prioritize different attribute
categories.
description
Type: String
Required: No
This property contains the description of the attribute, which is displayed as a tooltip when the mouse is
moved over the attribute.
requiredOnCompile
Type: Boolean
Required: No
"requiredOnCompile": false
This property determines whether the attribute of the control is required when the HMI is compiled. If the
attribute is required for the control and the property is not set, an error message is issued and the control is
not valid. This property is normally not required for attributes of a framework control. An example for
"requiredOnCompile" is id and data-tchmi-type of a control.
readOnly
Type: Boolean
Required: No
"readOnly": false
This property indicates whether the Engineering has write access to the attribute or only read access. By
default, write access to an attribute is available. If readOnly is set to true, the attribute is no longer
displayed in the Engineering Properties window, but it can still be used via the Actions and Conditions Editor.
For read only attributes, the propertySetterName [} 1236] is not required and can be replaced by an
empty string.
bindable
Type: Boolean
Required: No
TE2000 Version: 2.5.1 1239

Framework
"bindable": true
This property indicates whether a data Binding [} 103] to the attribute can be created in the Engineering. By
default, the property is true.
If the property is set to false, it is not possible to link symbols to the attribute. Nevertheless, this attribute
can be used and read at another location.
heritable
Type: Boolean
Required: No
"heritable": true
This property indicates whether the attribute can be passed on to other control. By default, the property is
true. If the property is set to false, it is not available in the derived control classes.
defaultValue
Type: Data type of the attribute
Required: No
"defaultValue": false
This property indicates the default value for the attribute that is used in the Engineering Properties window
when instantiating the control and written to the HTML code.
If null is entered here, no attribute is set.
defaultValueInternal
Required: No
This property indicates the internal default value for the attribute that can be used in Source.js. The internal
default value may differ from the normal default value [} 1240].
attributeCategories
Required: No
"attributeCategories": [
{
"name": "Value",
"defaultCollapsed": false,
"description": ""
}
]
The property is used to prioritize new attribute categories that are assigned under Attributes [} 1239].
Prioritization is used to determine the displayed order of the categories in the Engineering Properties
window. The attribute categories are described within a JSON object.
The following properties can be defined:

• name {String}: The name of the attribute category. The attribute name must be assigned to at least one
control attribute.
• displayPriority {Number}: The priority determines the order in which the various attribute
categories are displayed within the Engineering Properties window.
1240 Version: 2.5.1 TE2000

Framework
◦ Values less than 10 mean high priority and are displayed at the top of the Properties window (e.g.
colors).
◦ Values less than 500 have standard categories (e.g. Common =100, Layout = 200, Border = 300,
Background Image = 400).
◦ Values greater than 500 should be assigned user-specific categories so that they are listed below
the standard categories.
◦ Values greater than 800 have low priority and are rarely configured.
• defaultCollapsed {Boolean}, not required: This property determines whether the category is
collapsed by default (true) or expanded (false).
• description {String}, not required: Optional description of the attribute category that is displayed as
a tooltip for the mouseover event in the Engineering.
themedResources
Required: No
"themedResources": [
{
"name": "MyCustomThemedResource",
"displayName": "MyCustomThemedResource",
"description": "This is a custom themed resource. Look at theming of framework controls.",
"type": "tchmi:framework#/definitions/MyThemedDefinition"
}
]
This property contains all user-specific theme definitions that are not defined as attributes in the Engineering
Properties window and can only be changed using the theme editor. An example of a "ThemedResource"
are images within a control that cannot be exchanged via the Properties window (e.g. KnobConfigHorizontal
and KnobConfigVertical for the LinearGauge [} 400]). A control developer can access these resources via the
theme API.
A "themedResources" object contains the following properties:

• name {String}: Name of the property to be changed.
• displayName {String}: Name displayed in the Engineering theme editor.
• description {String}: Optional description of the property that is displayed in the theme editor on
mouseover.
• type {string of a framework data type}: Data type of the property. The data type can be either a
TwinCAT HMI data type or a user-specific data type defined under "dataTypes [} 1244]". Usually, user-
specific data types are used (see Theming).
functions
Required: No
"functions": [
{
"name": "customFunction",
"displayName": "customFunction",
"visible": true,
"description": "This is a sample for a function that can be called.",
"category": "Actions",
"params": [],
"type": null,
"heritable": true,
"searchTerms": []
}
]
This property defines functions of the control that are independent of attributes. The functions can optionally
have parameter values or a return value. Each function must have the same name in Source.js, otherwise an
error message appears in the browser console and the function is not executed.
TE2000 Version: 2.5.1 1241

Framework
A JSON object for a function contains the following properties:

• name {String}: Internal name of the function.
• displayName {String}: Name of the function that is displayed in the Engineering.
• description {String}: Description of the function that is displayed as a tooltip during mouseover in
the engineering.
• category {String}: Category of the function under which the function is displayed in the Actions and
Conditions Editor in the Engineering.
• params [} 1242] {JSON object}, not required: Parameter values of the function.
• type {string, TwinCAT HMI data type}: Return value of the function. The return value must have a
TwinCAT HMI data type.
• heritable {Boolean}: This property defines whether the function is to be passed on to derived
classes.
• searchTerms {array of strings}, not required: This property defines search terms for the Engineering
that are to optimize the search function within the Actions & Conditions Editor. This makes it possible to
find the function using terms other than the function name. For example, if the strings "MyFunction"
and "1234" are added to the array, the function can also be found under these terms.
The following figure shows an example of two framework control functions in the Engineering, both of which
have no return value and contain an optional parameter value function.
params
Type: JSON object
Required: No
"params": [
{
"name": "functionParameter1",
"displayName": "functionParameter1",
"description": "This is a sample for a function parameter.",
"type": "tchmi:general#/definitions/Number",
"visible": true
},
{
"bindable": false
1242 Version: 2.5.1 TE2000

Framework
"visible": true
}
]
This property defines the optional parameters values of a function. The parameter values can be transferred
via Engineering.
A parameter object contains the following properties:

• name {String}: Internal name of the parameter value.
• displayName {String}: Name of the parameter value that is displayed in the Engineering.
• description {String}: Description of the parameter value that is displayed as a tooltip during
mouseover in the Engineering.
• bindable {Boolean}: Determines whether a binding [} 103] can be set to this parameter. This is
allowed by default.
• visible {Boolean}: Visibility of the parameter value. The visibility determines whether the parameter
is to be displayed or hidden in the Engineering.
events
Required: No
"events": [
{
"name": ".onMyCustomEvent",
"displayName": ".onMyCustomEvent",
"visible": true,
"category": "Control",
"description": "This is a sample for a framework control event.",
"heritable": true
"allowsPreventDefault": false
}
]
This property defines events that can be configured through the Engineering and are triggered in this
framework control. An event is used to notify the Engineering that a specific event has occurred in the
control. The HMI developer can respond to this event accordingly in the Engineering. Triggering of an event
is implemented in Source.js.
An event object contains the following properties:

• name {String}: Internal name of the event.
• visible {Boolean}: Visibility of the event. If "visible" is set to "false", the event is not displayed in
the Engineering.
• displayPriority {number}, not required: The priority determines the order in which the various
events are displayed within the category.
◦ Values = 10 correspond to frequently used events such as ".onPressed".
◦ Values = 15 correspond to standard events such as ".onClick" or "onRightClick".
◦ Values = 50 correspond to rarely used events such as ".onMouseUp".
◦ No value assigned: The event is collapsed by default and has to be expanded using the arrow.
• category {String}: The category determines under which category the event is listed in the
Engineering. Existing categories such as "Operator" can be used, or new category names can be
assigned.
• description {String}: Optional description of the event, which is displayed as a tooltip on mouseover
in the Engineering.
• heritable {Boolean}: This property defines whether the event is to be passed on to derived classes.
By default, this value is "true", so that the event is inherited.
TE2000 Version: 2.5.1 1243

Framework
• allowsPreventDefault {Boolean}, not required: This property specifies that a user can explicitly
select preventDefault. See also Events [} 1259]
The event configured above is displayed in the Engineering as follows:
dataTypes
Required: No
"dataTypes": [
{
"name": "tchmi:framework#/definitions/CustomDatatype",
"schema": "Schema/TypeDefinitions/CustomDatatype.Schema.json"
}
]
This property contains a list of all user-specific data types defined in the control. Developer can define their
own data types in a JSON schema. The definition usually takes place under "Schema\TypeDefinitions
[} 1228]". In order for the Engineering to know and be able to process the user-specific data types, they must
be referenced in Description.json.
A dataType object contains the following properties:

• name {String}: Name of the new data type. Framework data types are always user-specific and have to
start with "tchmi:framework#/definitions/{MyName}". For each data type an individual name must be
assigned.
• schema {string, relative path}: Relative path to the JSON schema file describing the data type.
1244 Version: 2.5.1 TE2000

Framework
access
Required: No
"access": [
{
"name": "myCustomRight",
"displayName": "myCustomRight",
"description": "This is a sample for access rights in the framework control.",
"visible": true,
}
]
This property contains a list of user-specific access rights that can be configured via the Engineering. Access
rights restrict user groups in their activities (see authorization system [} 893]). A user-specific access right
must be evaluated in Source.js with corresponding user-specific logic [} 1259].
An access right object contains the following properties:

• name {String}: Internal name of the access right.
• displayName {String}: Name of the access right that is displayed in the Engineering.
• description {String}: Description of the access right, which is displayed as a tooltip in the
Engineering on mouseover.
• visible {Boolean}: This property switches the visibility of the access right. If "visible" is set to
"false", the access right is not displayed in the Engineering.
• defaultValueInternal {Boolean}: This property defines the internal default value that is to apply if
the access right is not configured via the Engineering. "true" means access is granted by default.
"false" means access is not granted. If "zero" is set, the default value is not defined at this control.
For a detailed description of the behavior of defaultValueInternal see authorization system [} 893].
Various user groups are assigned to an access right via the Engineering, which are structured according to
the following schema: tchmi:framework#/definitions/ControlAccessRight
This schema defines the type of access (Allow, Deny, Inherit) the respective user group has to the
access right.
In the Engineering, the access right is displayed in the Properties window as follows (for two different user
groups):
TE2000 Version: 2.5.1 1245

Framework
Template.html
Like every control in the TwinCAT HMI, a framework control is based on HTML code. As soon as a
framework control is instantiated in the Engineering of the TwinCAT HMI, an HTML div element is
automatically created for the control. The developer of the framework control can define additional HTML
code for the control within the control div element.
HTML code
The definition of the HTML code is implemented in the "Template.html" file. The use of this file is optional.
The Template.html file is only used, if this is referenced in the Source.js of the Control [} 1251]. The
Template.html file defines the base structure of a framework control.
<div class="framework-control-js1-template tchmi-box">

</div>
The HTML code defined within this file is automatically inserted in within the control div element (if the file is
used) in the Engineering. The code can be viewed in the browser during debugging, for example.
<div id="TcHmiFrameworkControlJs1" data-tchmi-type="framework-control-js1" data-tchmi-height="150"
data-tchmi-height-unit="px" data-tchmi-left="137" data-tchmi-left-unit="px" data-tchmi-top="140"
data-tchmi-top-unit="px" data-tchmi-value="True" data-tchmi-width="150" data-tchmi-width-unit="px"
class="tchmi-box tchmi-control framework-control-js1" title="" style="left: 137px; top: 140px;
width: 150px; height: 150px; z-index: 0; border-width: 0px;">
</div>
</div>
Within the Template.html file any number of HTML elements can be defined. All standard HTML elements
are available to the developer. In addition to the standard HTML elements, TwinCAT HMI controls can also
be used in the Template.html file. The user-specific HTML code should be placed within the template div
("Place your code here").
Do not assign fixed IDs

No fixed IDs may be assigned within the Template.html file. The assignment of IDs within the Tem-
plate.html file would contradict the concept of multiple instantiation of a framework control, since an
ID may only occur once within the HTML document. The outer control div element is automatically
assigned a unique ID through the Engineering.
CSS classes
Within the elements in the Template.html file, CSS classes [} 1247] can be assigned, which are described via
cascading style sheets files, either detached from the theme or depending on the theme. By default, the
template class in the Style.css file is used at project level.
Access via JavaScript
The HTML elements defined within the Template.html file can be further processed in the Source.js file
[} 1250]. The elements can be changed during runtime or used as placeholders for dynamically created
elements, for example. Processing of the HMTL elements in the Source.js file is optional. Static use within
the Template.html file is also possible.
If the HMTL elements are to be processed further in the Source.js file, references to the HTML elements
must be created there. References to the Template.html file are created within the PrevInit function in the
Source.js file.
/** Handle template elements. Should be done before call to __previnit of super class. */
this.__elementTemplateRoot = this.getElement().find('.framework-control-js1-template');
The listing shows the access to the template div within Template.html. A search for the template div is
initiated using the ".find()" JQuery function within the main JQuery object of the control. The reference to the
JQuery object of the control can be reached via ".getElement()". If additional elements are placed within the
template div, they can also be found using the ".find()" JQuery function. For performance reasons, we
recommend to avoid using the outer JQuery object for the search in cases with many nested elements, but
to use the inner elements that are already referenced instead.
1246 Version: 2.5.1 TE2000

Framework
Example:
<div class="framework-control-js1-inner-div">
<div class="framework-control-js1-inner-div-my-element">
</div>
</div>
</div>
The following references result from this HMTL code:

this.__innerDiv = this.__elementTemplateRoot.find('.framework-control-js1-inner-div');
this.__myElement = this.__innerDiv.find('.framework-control-js1-inner-div-my-element');
Style.css
Within a framework control, the appearance of individual elements is described using cascading style sheets.
The default design of the control is defined in the Style.css file at the project level and in the Style.css file,
the base theme of the control. In addition to the standard design, further themes can be defined for the
framework control. The appearance of a framework control can be changed at four different levels [} 945]
according to the theme system of the TwinCAT HMI.
Theme levels
The appearance of a framework control can be described at different levels of the theme system [} 945].
Level 4: Attribute definition per control type
Control themes [} 940] can be defined at level 4 of the theme system. Control themes allow individual
attributes of the framework control to be overwritten. A control theme is defined within a theme file and can
be created using the theme editor in Engineering or directly as JSON code. The theme file must be assigned
to a specific theme within the project:
The theme file must then be referenced as "ThemedValues" under "themes [} 1234]" in the Description.json
file.
Level 5: Attribute definition by DefaultValueInternal
At level 5 of the theme system, it is possible to set the properties of the attribute via DefaultValueInternal
[} 1240]. DefaultValueInternal can be set in the Description.json file of the framework control.
Example of a color attribute:

"defaultValueInternal": {
"color": "rgba(255, 0, 0, 1)"
}
TE2000 Version: 2.5.1 1247

Framework
Level 8: Cascading Style Sheets per theme
Cascading style sheet files can be added to a theme at level 8 of the theme system. Within the CSS file any
element properties can be defined.
The CSS file "Stylesheet" must then be referenced under "themes [} 1234]" in the Description.json file of the
framework control.
Level 9: Cascading Style Sheets on project level in the control
At level 9 of the theme system, Cascading Style Sheet files can be added independently of a theme at
project level in the control. By default, each framework control project contains a Style.css file at project
level. Within this file, element properties are defined that are to apply independently of a theme (e.g. sizes of
a div).
All CSS files at the project level in the control must be referenced under dependencyFiles [} 1234] in the
Description.json file of the framework control.
Using CSS classes

The CSS class selectors are used within the cascading style sheet files of a framework control.
Permitted selectors
The following CSS selectors can be used conditionally within a CSS file of a framework control:
• Type selectors
• Attribute selectors
• Class selectors
With class selectors, new CSS classes are defined for a framework control, which means that CSS
styles are not overwritten outside the framework control. If type or attribute selectors are to be used,
you must ensure that they are only used for the class of the framework control and do not overwrite
any styles outside the framework control (descendant selector):
1248 Version: 2.5.1 TE2000

Framework
.tchmi-framework-control-js2 a {
color: red;
}
The following CSS selectors should not be used within a CSS file of a framework control:
• ID selectors: Due to multiple instantiation, you cannot assign fixed IDs within a framework control.
• Universal selector: A framework control should not overwrite any styles outside the control during
instantiation.
Using the class selectors
CSS classes can be used in the Template.html file, or they can be added dynamically at runtime within the
Source.js file.
.tchmi-framework-control-js1-template
{
width: 100%;
height: 100%;
}
Within the Template.html file, a CSS class is assigned via the HTML attribute "class":
<div class="tchmi-framework-control-js1-template tchmi-box">
</div>
The class "tchmi-box" sets CSS properties to facilitate element positioning and can be used with
all positioned HTML elements.
The dynamic use of a CSS class within Source.js can be realized via the jQuery function ".addClass()", for
example:
this.__elementTemplateRoot.addClass('tchmi-framework-control-js1-my-custom-class');
Overwriting CSS of controls

Within the CSS files it is possible to overwrite the appearance of embedded TwinCAT HMI controls. For
example, if you want to change the appearance of an embedded button within a control, you can do this by
applying the CSS styles of the button.
Please ensure that all buttons are not inadvertently assigned this appearance and that the CSS file of the
general button does not overwrite that of the embedded control. Both can be achieved by so-called
descendant selectors (spaces in CSS):
.framework-control-js1 .tchmi-button {
color: #4794da;
}
.framework-control-js1 .tchmi-button.down {
color: #000000;
}
All main elements of a control are assigned the control name as CSS class name (in this case framework-
control-js1). If this is attached before the style of the control to be overwritten, the new appearance in the
example only applies to buttons below the framework control.
CSS selectors are always read from right to left:

• First example: Main element of the button (".tchmi-button") if it is below (" ") FrameworkControlJs1
(".framework-control-js1").
• Second example: Element with class down (".down") if it is the main element of the button (".tchmi-
button"), if it is below (" ") FrameworkControlJs1 (".framework-control-js1").
TE2000 Version: 2.5.1 1249

Framework
Source.js
A framework control requires JavaScript code. The JavaScript code is defined in the Source.js file at project
level, which is included in each framework control project. The Source.js file defines the base framework for
the implementation of a framework control and can be flexibly extended.
Programming conventions:
The programming conventions provide a basis for standardizing framework controls. They are used to
distinguish between internal and external access.
• Member variables are marked with the prefix"__" and in Camel case:
this.__myVar = …;
• Functions with external access (Engineering: setter/getter functions) are identified without prefix and in
Camel case:
MyControl.prototype.setMyVar = …
• Internal functions are marked with the prefix "__" and in Camel case:
MyControl.prototpye.__processMyVar = …
If you make changes in the Source.js file and the framework control is already associated with an
HMI project, you must then carry out a project build [} 1230] of the framework control to apply the
changes.
Control life cycle

The control life cycle describes which system function of the control is called by the system at which time. In
the control life cycle, a distinction is made as to whether the control is on an HMI page for which preloading
is activated.
The base control life cycle is described in the following diagram:
Explanations:
1. The constructor is called during control instantiation.

2. The PrevInit function is called after the constructor and before the attribute setter functions are called.
3. The attribute setter functions are called after the PrevInit function.
4. The init function is called after the attribute setter functions. At this point, the control attributes are ini-
tialized by the attribute setter functions and have valid values.
5. The Attach function is called after the Init function, once the control has been added to the DOM on
the HMI page.
6. The Detach function is called after a control has been removed from the DOM of the HMI page (e.g.
during page switching).
7. The Destroy function is called after the control has been removed from the DOM of the HMI page, so
that the system can destroy the controls. In addition, the Destroy function can be called explicitly at
another point (for example, when subordinate controls elements are destroyed).
HMI page: Preloading disabled
Normally, preloading of an HMI page is disabled (Preload this partial: false), which means that the controls
are not stored in the browser cache. This increases the speed of the initial HMI loading process, but it can
lead to a reduction in the loading speed of individual HMI pages on which many controls are instantiated.
1250 Version: 2.5.1 TE2000

Framework
In this case, the constructor of the control is called when the page is loaded (for example, when switching to
the page or when loading the start page). This is followed by the PrevInit function, the attribute setter
functions, the Init function and the Attach function. As soon as the page is unloaded (e.g. when switching to
another page), the Detach function is called, followed by the Destroy function. The life cycle of the controls
starts again when the HMI page is loaded.
HMI page: Preloading enabled
If preloading is enabled for an HMI page (preload this partial: true), the controls are stored in the browser
cache. This increases the loading speed of a single HMI page, but it can lead to a reduction in the initial
loading process of the HMI.
In this case, the constructor of the control is called as soon as the HMI is initially loaded. This is followed by
the PrevInit function, the attribute setter functions and the init function. The Attach function of the control is
not called until the HMI page on which the control is instantiated is loaded. The Detach function is called as
soon as the HMI page is unloaded. The Destroy function is not called automatically subsequently. The
control remains in the browser cache. When the HMI page is reloaded, the Attach function is called directly.
Base framework
The Source.js file already contains preconfigured source code that is required for various functions of the
framework control and may not be modified in some cases. In JavaScript, a framework control is a
JavaScript object that is described by various properties and methods. In other programming languages, the
framework control would correspond to a class from which concrete instances (objects) are created at a later
point in time.
Project information
Better support for IntelliSense in JavaScript:

TE2000 Version: 2.5.1 1251

Framework

These comment lines include different files, allowing better IntelliSense support within the Source.js file.
These lines are not required for using the control.
Information about the framework control:

/*
* Generated 2/15/2018 10:57:13 AM
* Copyright UserXY 2018
* ........................
*/
These comment lines contain information about the creation of the framework control, which is generated
automatically when the framework control project is created. These lines are not required for using the
control.
Base structure of a framework control

/**
* Namespace: TcHmi
* [REQUIRED]
*/
/**
* Namespace: TcHmi.Controls
* [REQUIRED]
*/
(function (/** @type {globalThis.TcHmi.Controls} */ Controls) {
/**
* Namespace: TcHmi.Controls.Custom
* [CUSTOM]
*/
var Custom;
(function (Custom) {
/** FrameworkControlJs1 object */
var FrameworkControlJs1 = (function (_super) {
__extends(FrameworkControlJs1, _super);
/** Control specific logic */
return FrameworkControlJs1;
})(TcHmi.Controls.System.TcHmiControl);
Custom.FrameworkControlJs1 = FrameworkControlJs1;
})(Custom = Controls.Custom || (Controls.Custom = {}));
/**
* Register control...
*/
Controls.register('framework-control-js1', Custom.FrameworkControlJs1, 'Custom/
FrameworkControlJs1/', 'Custom/FrameworkControlJs1/Template.html');
})(Controls = TcHmi.Controls || (TcHmi.Controls = {}));
})(TcHmi);
This code defines the base structure of a framework control and is required for using the control at runtime.
In the event of invalid changes, the control can no longer be used properly.
Do not change the base structure of the framework control within Source.js. There is a risk that the
control can no longer be used.
Definition of the namespaces
Within Source.js, various namespaces are referenced and defined, which are required for the framework.
TcHmi
(function (TcHmi) { })(TcHmi);
This function makes the control known within the "TcHmi" namespace. The framework cannot be accessed
outside this namespace.
1252 Version: 2.5.1 TE2000

Framework
Controls
(function (Controls) { })(Controls = TcHmi.Controls || (TcHmi.Controls = {}));
This function makes the control known within the "Controls" namespace. This namespace contains all
TwinCAT HMI controls (System [} 690], Beckhoff [} 119], Custom).
The control is registered in the control namespace which is required for the Engineering of the TwinCAT
HMI. The transfer of the Template [} 1246] parameter is optional.
Controls.register('framework-control-js1', Custom.FrameworkControlJs1, 'Custom/
FrameworkControlJs1/', 'Custom/FrameworkControlJs1/Template.html');
Custom
var Custom;
(function (Custom) { })(Custom = Controls.Custom || (Controls.Custom = {}));
This function defines the namespace for user-specific controls and makes the control known within the
namespace. The concrete framework control object is defined in the custom namespace (prototypical control
object) and then assigned to the custom namespace:
Custom.FrameworkControlJs1 = FrameworkControlJs1;
Prototypical control object
A framework control is defined by a JavaScript object within the custom namespace. The logic is
implemented in this section (Constructor [} 1253], System functions [} 1254], Attributes [} 1255], Functions
[} 1257], Events [} 1259], Access rights [} 1259]).
var FrameworkControlJs1 = (function (_super) {
__extends(FrameworkControlJs1, _super);
return FrameworkControlJs1;
})(TcHmi.Controls.System.TcHmiControl);
The object (_super) of the base control [} 1232] defined in Description.json [} 1229] (usually TcHmiControl
[} 690] ) is passed to the framework control. The framework control inherits all properties of the defined base
control.
The framework control is defined by a function, in which the user-specific code of the framework control is
implemented. A function in JavaScript always links a prototypical object. Access to the prototypical object of
this function is indicated by the property "protoype". All properties (other functions) of the framework
control are stored in the function object via the prototype.
MyControlName.prototype.myProperty = function () {...};
When a specific instance (JavaScript object) is created by the function, the instance has all the properties of
the prototypical object of the function.
Constructor
Each framework control contains a constructor that is structured as follows:
function FrameworkControlJs1(element, pcElement, attrs) {
/** Call base constructor */
_super.call(this, element, pcElement, attrs);
/** Attribute variables are initialized with undefined. The System will call the setter later.
See "Attribute philosophy" above. */
this.__value = undefined;
}
Within the constructor, the internal variables of the control (member variables) are initialized with
"undefined". Initialization at this point is not necessary, but is recommended for better clarity.
The parameter values of the constructor are only used internally and forwarded to the base constructor call.
TE2000 Version: 2.5.1 1253

Framework
System functions
Framework controls have functions that are called by the system at different times. Each system function
calls the respective system function of the basic class (TcHmiControl [} 690]) via the "_super" object and
passes a reference to the current control object.
PrevInit function
FrameworkControlJs1.prototype.__previnit = function () {
/** Call __previnit of super class. */

_super.prototype.__previnit.call(this);
};
The PrevInit function is automatically called after the system calls the constructor [} 1253] and before the
attribute setters of each attribute are called. Accordingly, the member variables of the attributes have the
value "undefined" when the PrevInit function is called. Within the PrevInit function, the references [} 1246] to
the HMTL elements are created from the Template.html file.
This function may only be called by the system and not explicitly by the developer.
Init function
FrameworkControlJs1.prototype.__init = function () {
_super.prototype.__init.call(this);
};
The Init function is called automatically by the system after the attribute setters of the individual attributes
have been called. Accordingly, when the Init function is called, the member variables of the attributes already
have the values that were passed to the control or defined internally as default values.
Attach function
FrameworkControlJs1.prototype.__attach = function () {
/**
* Enable everything which was disabled while __detach function was called!
*/
/**
* Initialize everything which is only available while the control is part of the active dom.
*/
/** Call base __attach function */
_super.prototype.__attach.call(this);
};
The Attach function is automatically called by the system after the current control instance has been added
to the DOM of the HTML document. Within the Attach function, all calculations should be performed that are
only available while the control instance is in the DOM (e.g. .getBoundingClientRect() of DOM elements
or .width() of jQuery elements). The opposite of the Attach function is the Detach function.
Detach function
FrameworkControlJs1.prototype.__detach = function () {
/**
* Disable everything which is not needed while the control is not part of the active dom.
* No need to listen to events for example!
*/
1254 Version: 2.5.1 TE2000

Framework
/** Call base __detach function */

_super.prototype.__detach.call(this);
};
The system automatically calls the Detach function after the current control instance has been removed from
the DOM of the HTML document. In the Detach function, all functions that are no longer required after the
control instance has been removed from the DOM are to be disabled. The opposite of the Detach function is
the Attach function.
Destroy function
FrameworkControlJs1.prototype.destroy = function () {
/**
* Free resources
*/
/** Call base __destroy function */
_super.prototype.destroy.call(this);
};
The system automatically calls the Destroy function when the control instance is no longer used (after the
Detach function). If the control is on an HTML page where "Preload Partial" is enabled, the Destroy function
is not called because the page is still saved in the browser cache. Within the Destroy function, the elements
that were created during runtime are to be destroyed.
This function can also be called explicitly (for example when child controls are destroyed).
Attributes
Framework control attributes [} 1235] defined in Description.json must be initialized within Source.js, and the
corresponding setter, getter and process methods must be implemented. The setter and getter methods
provide central access to the attribute.
The following examples refer to the following attribute, which is defined in Description.json under "attributes
[} 1235]":
"attributes": [
{
"visible": true,
"description": "",
"readOnly": false,
"bindable": true,
"heritable": true,
"defaultValue": false,
}
]
Initialization
The attributes are initialized in the constructor of the framework control. Initialization is not required here
(variables without keywords are automatically initialized in JavaScript when used), but is recommended for
better clarity.
TE2000 Version: 2.5.1 1255

Framework
Member variables and functions that cannot be accessed from outside are prefixed with "__".
Setter method
The setter method of an attribute is only required for attributes that are not set to "readOnly [} 1239]" (all
attributes that can be set via Engineering). Like the definition, the setter method must be named in the
"propertySetterName [} 1236]".
/**
* @description Setter function for 'data-tchmi-value' attribute.
* @param {Boolean} valueNew the new value or null
* @returns {void}
*/
FrameworkControlJs1.prototype.setValue = function (valueNew) {
// convert the value with the value converter
var convertedValue = TcHmi.ValueConverter.toBoolean(valueNew);
// check if the converted value is valid

if (convertedValue === null) {
// if we have no value to set we have to fall back to the defaultValueInternal from
description.json
convertedValue = this.getAttributeDefaultValueInternal('Value');
}
if (tchmi_equal(convertedValue, this.__value)) {
// skip processing when the value has not changed
return;
}
// remember the new value

this.__value = convertedValue;
// inform the system that the function has a changed result.

TcHmi.EventProvider.raise(this.__id + ".onFunctionResultChanged", ["getValue"]);
// call process function to process the new value

this.__processValue();
};
Within the setter method, the parameter that was passed is first converted into the expected data type by
Engineering using the framework API function "ValueConverter". If an invalid value is passed to the
ValueConverter or if the conversion of the value fails, the function returns "null". In this case the
DefaultValueInternal [} 1240] from Description.json is used. The system then checks whether a value
change to the last stored value of the attribute on the member variable has taken place. If no value change
has taken place, the setter is exited. If a value change has taken place, the value of the member variable for
the attribute is overwritten and the system is notified that a value change has taken place. Finally, the
Process method is called for the value in which the response to the value change takes place.
The function "tchmi_equal" should be used to check for a change in value. The JS comparison op-
erator "===" can only check the base JavaScript data types but not complex JSON objects.
Getter method
The getter method of an attribute returns the current value of the attribute and is required for each attribute.
Like the definition, the getter method must be named in the "propertyGetterName [} 1236]".
/**
* @description Getter function for 'data-tchmi-value' attribute.
* @returns {Boolean}
*/
FrameworkControlJs1.prototype.getValue = function () {
return this.__value;
};
1256 Version: 2.5.1 TE2000

Framework
Process-Methode
The Process method is always called when the attribute value has been changed. The response to the value
changes is to be implemented in the process method. For example, depending on a Boolean value elements
can be switched visible or invisible, or a list can be created dynamically based on a transferred JSON object.
/**
* @description Processor function for 'data-tchmi-value' attribute.
* @returns {void}
*/
FrameworkControlJs1.prototype.__processValue = function () {
// process actions with Value
// ...
};
Functions
Framework control functions [} 1241] defined in Description.json must be defined and implemented in
Source.js. The function must be named like the "name [} 1241]" of the function in Description.json.
Function without parameter values
A function without parameter values is defined in Description.json as follows:

"functions": [
{
"visible": true,
"params": [],
"type": null,
"heritable": true,
"searchTerms": []
}
]
This results in the following code for Source.js:

/**
* @description This is the call of the api function 'customFunction'.
* @returns {void}
*/
FrameworkControlJs1.prototype.customFunction = function () {
/**
* customFunction is defined in the description.json and called from outside.
* The api functions are shown in the graphical user interface of the engineering in Visual Studio
*/
// implement function logic here

};
Within the function, any execution logic of the function can be implemented.
Function with return value
The functions enables a return value to be returned the calling point in Engineering. The return value is
defined in Description.json under "type".
Within the function in Source.js it is then possible to return a value of the corresponding type.
/**
*/
FrameworkControlJs1.prototype.customFunction = function () {
/**
*/
TE2000 Version: 2.5.1 1257

Framework

return true;
};
Function with parameter values
A function with parameter values [} 1242] is defined in Description.json as follows:

"functions": [
{
"displayName": " customFunction ",
"visible": true,
"description": "This is a sample for a function that can be called by the engineering.",
"params": [
{
"visible": true
},
{
"visible": true
}
],
"type": null,
"heritable": false,
"searchterms": []
}
]
The function is implemented in Source.js like a normal function. The parameter values are passed with the
function call. The parameters must be checked for validity before they are used, similar to the attribute
setters [} 1255].
/**
* @returns {void}
*/
FrameworkControlJs1.prototype.customFunction = function (functionParameter1, functionParameter2) {
/**
* The api functions are shown in the graphical user interface of the enginnering in the twincat
*/
var convertedParameter1 = TcHmi.ValueConverter.toNumber(functionParameter1);
if (convertedParameter1 === null) {
// parameter is null: define what to do in this case
// exit function call if the execution without this parameter is not possible
return;
}
var convertedParameter2 = TcHmi.ValueConverter.toBoolean(functionParameter2);

return;
}
// implement function logic with the evaluation of the parameters here

};
1258 Version: 2.5.1 TE2000

Framework
Events
Framework control events defined in Description.json should be triggered in Source.js. The name of the
event must be named like the "name [} 1243]" of the event in Description.json. An event can be triggered in
different situations, e.g. when a certain record changes (see ".onDataChanged [} 235]" in the data grid
[} 207]).
An event is triggered in Source.js via the EventProvider of the framework. The framework API function
"EventProvider.raise()" is used for this purpose. When the event is triggered, the concrete control instance
must be identified with "this.__id".
// raise .onMyCustomEvent event
TcHmi.EventProvider.raise(this.__id + '.onMyCustomEvent);
Optionally, parameters can be passed to the event callbacks when the event is triggered.
// declare parameter: type anything
var myParameterObject = 42;
// raise .onMyCustomEvent event with event parameters
TcHmi.EventProvider.raise(this.__id + '.onMyCustomEvent, myParameterObject);
The response to the triggered events can take place in Engineering via the Properties window [} 58] or via
the registration of the event in a Code Behind file [} 1222].
If allowPreventDefault is allowed in the event definition [} 1243], the myParameterObject

should offer preventDefault as a function. All DOM and jQuery event objects meet this require-
ment, for example. This function is called if the user has set the option for this event in Engineering.
Access rights
User-specific access rights [} 1245] defined in Description.json and configured in Engineering [} 58] should
be checked and evaluated in Source.js. Depending on the user-specific access rights [} 887], specific
elements can be switched visible or invisible or enabled or disabled, for example.
The evaluation of the configured access rights is performed via the framework API function
"TcHmi.Access.checkAccess()". The current instance of the control is passed to the function (this) and the
name of the right to be checked, which must correspond to the definition in Description.json.
// check user access of "myCustomRight" that is defined in the description.json
if (TcHmi.Access.checkAccess(this, 'myCustomRight') === true) {
// current user has the rights to do this
// process actions with the right

// show elements, enable buttons, etc.
}
else {
// Current user has no rights to do this
// process actions without the rights

// hide elements, disable buttons, etc.
}
available in live view.
CustomDatatype.Schema.json
Within a framework control project, user-specific and complex data types can be implemented if the data
type is not covered by a standard data type. In principle, any data structures can be transferred as objects
without the need for a user-specific data type. A user-specific data type is required if an editor is to be
provided for generating the data in Engineering. The data editor is generically based on a given JSON
schema.
TE2000 Version: 2.5.1 1259

Framework
The following user-specific data types can be implemented:

• Objects [} 1263] with fixed properties
• Array [} 1265] of any data types
• Enumerations [} 1267]
• Limitation [} 1268] of several allowed data types
Creating a custom data type

Add a new item in the "TypeDefinitions" folder under "Schema".
Add a new JSON file or JSON schema file to the project.
1260 Version: 2.5.1 TE2000

Framework
Reference the schema file in Description.json under "dataTypes [} 1244]". Note that user-specific data types
are assigned to the "Framework" category.
"dataTypes": [
{
"name": "tchmi:framework#/definitions/CustomDatatype",
}
]
You can then use the user-specific data type within Description.json.
"type": "tchmi:framework#/definitions/CustomDatatype
Note: If the framework control is already referenced in an HMI project, a project build (see First Steps
[} 1225]) must then be executed and the HMI project reloaded so that the new data type is included in the
type descriptions of the HMI project.
To reload the project, right-click on the HMI project and select "Unload project".
TE2000 Version: 2.5.1 1261

Framework
Then select "Reload project" to reload the project. You can then use all the functions as usual.
Implementing a custom data type

The configuration of a JSON schema for the framework follows a certain structure.
{
"$schema": "http://json-schema.org/draft-04/schema",
"definitions": {
"{DatatypeName}": {
"title": " {DatatypeName} ",
"type": "array",
//...
}
}
}
Each JSON schema contains a definition that describes the data type ({DatatatypeName}). The definition of
the data type contains the specification (type) and the description of the data type through attributes
depending on the respective data type.
1262 Version: 2.5.1 TE2000

Framework
Objects
Objects can contain any properties. A property is described under Properties and can be refined through
optional metadata (propertiesMeta).
The following JSON schema describes an object with two properties.

{
"definitions": {
"CustomDatatype": {
"title": "CustomDatatype",
"type": "object",
"propertiesMeta": [
{
"name": "axisName",
"category": "Name",
"displayName": "Axis Name",
"description": "",
"defaultValue": null,
},
{
"name": "axisColor",
"category": "Colors",
"displayName": "Axis color",
"description": "",
"color": "#4794da"
}
}
],
"properties": {
"axisName": {
"type": "string"
},
"axisColor": {
"$ref": "tchmi:framework#/definitions/SolidColor"
}
},
"required": [ "axisName" ]
}
}
}
This results in the following generic data editor in Engineering.
TE2000 Version: 2.5.1 1263

Framework
Explanations
propertiesMeta:
The metadata of the properties are optional. They describe the display within the generic data editor. The
metadata are described by the following properties:
• name {String}: Internal name of the property, see "name [} 1236]" in Description.json.
Note: The name must match the name under the properties.
• category {String}: Name of the category under which the property is displayed in the generic data
editor, see "category [} 1239]" in Description.json.
• displayName {String}: Name of the property displayed in the generic data editor, see "displayName
[} 1237]" in Description.json.
• displayPriority {Number}: Priority of the display, see "displayPriority [} 1238]" in Description.json.
• description {String}: Description of the property, see "description [} 1239]" in Description.json.
• defaultValue: Default value used initially in engineering, see "defaultValue [} 1240]" in
Description.json.
• defaultValueInternal: Internal default value, see "defaultValueInternal [} 1240]" in
Description.json.
properties:
The name and data type of the object properties are described under Properties. The name is determined by
the name of the property. The data type can be described as follows:
• type {string}: Default JSON data type of the property, or
• $ref {string, reference}: Reference to a framework data type. This can be implemented within the
project or taken from the existing data type descriptions of the framework.
1264 Version: 2.5.1 TE2000

Framework
required:
The required properties are listed under "required". The list is based on the internal name. If a property of the
object that is set to required is not set in Engineering, the generic data editor displays a warning.
Arrays
Arrays can be created from simple data types and complex objects.
Array of simple data types
Simple data types are specified within the "items" property under the "type" data type property. The following
schema defines an array of strings.
{
"definitions": {
"CustomDatatype": {
"type": "array",
"items": {
"type": "string"
}
}
}
}
This schema generates the following generic data editor in Engineering.
The generic data editor displays the array elements on the rleft-hand side under the name of the respective
data type (in the example: string). If a self-defined name is to be displayed instead, an object with a property
of the type of the data type must be selected instead of the simple data type, and the "displayName" of the
property must be set in the metadata.
TE2000 Version: 2.5.1 1265

Framework
Array of complex data types
Complex data types are specified in the property "items" under the reference property "$ref". The following
schema defines an array of objects of data type "CustomDatatype". This data type was previously
implemented as Object [} 1263].
{
"definitions": {
"MyArray": {
"title": "MyArray",
"type": "array",
"items": {
"$ref": "tchmi:framework#/definitions/CustomDatatype"
}
}
}
}
Furthermore, it is possible to describe the object directly within the array definition. The following schema
describes the same array with the definition of the object within the property "items".
{
"definitions": {
"MyArrayInlineObject": {
"title": "MyArrayInlineObject",
"type": "array",
"items": {
"type": "object",
"title": "CustomObject",
"description": "Defines a custom object in the array.",
"propertiesMeta": [
{
"name": "axisName",
"category": "Name",
"description": "",
},
{
"description": "",
"color": "#4794da"
}
}
],
"properties": {
"axisName": {
"type": "string"
},
"axisColor": {
}
},
}
}
}
}
Both schema files generate the following generic data editor in Engineering.
1266 Version: 2.5.1 TE2000

Framework
Enumerations
Enumerations can contain any elements for the data type string. In the Engineering, enumerations are not
displayed in the generic data editor, but in the combo box in the Properties window. The permissible values
of the enumeration are defined in the property "enum" in an array.
The following schema defines an exemplary enumeration.
{
"definitions": {
"MyEnum": {
"title": "MyEnum",
"type": "string",
"enum": [ "MyValue1", "MyValue2", "MyValue3", "MyValue4" ]
}
}
}
This results in the following display in Engineering.
TE2000 Version: 2.5.1 1267

Framework
Restrict permitted data types

User-specific data types can be restricted so that only certain data types can be transferred. As a result,
when creating a binding [} 103] only the symbols corresponding to the permitted data types are displayed.
The following schema defines an exemplary restriction of permissible values (oneOf). Only values that have
the data type "Time" or "TimeSpan" are permitted.
{
"definitions": {
"MyConstrainedDatatype": {
"oneOf": [
{
"title": "Time",
"$ref": "tchmi:general#/definitions/DateTime"
},
{
"title": "Timespan",
"$ref": "tchmi:general#/definitions/TimeSpan"
}
]
}
}
}
The display in Engineering is normally an attribute. However, only bindings to symbols that correspond to the
permitted data types can be created.
1268 Version: 2.5.1 TE2000

Framework
Manifest.json
The Manifest.json file contains optional information that can be set to create a TwinCAT HMI package. The
information is placed under the metadata and generated automatically when the project is created.
"metadata": {
"industrialField": "",
"packageType": "FrameworkExtPrj",
"id": "FrameworkControlJs1",
"version": "1.0.0.0",
"guid": "7001c40b-7081-4c53-8496-f416efe212b9",
"configurationName": "",
"platformName": "",
"creationTime": 1520610054,
"authors": "",
"owners": "",
"summary": "",
"licenseUrl": "",
"projectUrl": "",
"iconUrl": "",
"requireLicenseAcceptance": false,
"description": "",
"releaseNotes": "",
"copyright": "",
"tags": "",
"dependencies": [],
"references": []
}
Note: For creating a package, the version number must match the version number [} 1231] in
Description.json [} 1229].
16.2.2 Version 1.12
Note that there may be small differences in behavior between different versions.
Differences between version 1.10 and version 1.12
From version 1.12, multiple control classes can exist with the same type name. An additional namespace
has been added to differentiate between them. For example, the control types
TcHmi.Controls.BaseTemplate.TcHmiBreadcrumb and
TcHmi.Controls.ResponsiveNavigation.TcHmiBreadcrumb are supplied. All APIs that expect a
control type as input (such as TcHmi.ControlFactory.createEx) can be called with the old or new form.
However, the API getType of all controls had to be changed. In version 1.8 and 1.10 a standard button
returned tchmi-button as result whereas from version 1.12 on the full qualified name
TcHmi.Controls.Beckhoff.TcHmiButton is returned.
If you check for the type in your own source code, you may have to adapt it to the new format.
16.2.2.1 Framework project

A framework project can combine different contents [} 1277] such as controls, functions, JavaScript libraries,
CSS files or even images to form a package. This can be used as NuGet package [} 1270] (once or multiple
times) or passed on.
TE2000 Version: 2.5.1 1269

Framework
An HMI project can be extended with UserControls, functions and Code-Behind. However, resources defined
there can only be used in one project.
The framework project offers a supplement in which many different components [} 1277] are encapsulated
together. These can be full controls, functions, CSS files or JavaScript libraries.
This content can still simply be passed on. See Integrating a project [} 1270].
16.2.2.1.2 Build Project

Open Visual Studio and click Add new project.
TwinCAT HMI offers two different project templates for framework projects. The "TwinCAT HMI Framework
Project" contains a control [} 1278], whereas the "TwinCAT HMI Framework Project Empty" does not.
In both projects, any number of control, functions [} 1327] or other components [} 1277] can be stored and
adapted to your requirements.
The project can then be integrated [} 1270] directly as a reference or as a NuGet package in a TwinCAT HMI
project.
16.2.2.1.3 Integrating a project

The content of a framework project can be referenced in an HMI project in the same Visual Studio solution or
exported as a NuGet package. As a package it can be imported several times into different projects and thus
reused.
1270 Version: 2.5.1 TE2000

Framework
Integration via reference
For integration via a reference select "Add Reference...". This opens a dialog in which all framework projects
within the same solution are listed:
If the project was selected with the checkbox, it is shown under References in the HMI project:
When the framework project is built, the HMI project recognizes this and updates the controls and other files
from the referenced project.
Integration via NuGet package
Before the current content can be integrated, it must be created as a NuGet package. This can easily be
done via the menu item "Create NuGet Package ...":
TE2000 Version: 2.5.1 1271

Framework
The package is created in the directory C:\TwinCAT\Functions\TE2000-HMI-

Engineering\References. In Visual Studio this directory is known as "TwinCAT HMI Customer“. The file
name is generated from the package name and its version number. Both can be set in the nuspec file
[} 1275].
To integrate the created file into an HMI project, select "Manage NuGet Packages ...":
Here, "TwinCAT HMI Customer" is selected on the right-hand side of the NuGet Package Manager, and the
new package can be seen in the "Browse" tab.
If the package was selected with "Install", it is shown under References in the HMI project:
1272 Version: 2.5.1 TE2000

Framework
Passing on NuGet packages
Since the package forms a closed unit, it can also be passed on as a file. Different options are available.
• Direct file transfer: To this end the file must be copied to the directory C:
\TwinCAT\Functions\TE2000-HMI-Engineering\References on the target computer. It is
then available for selection in the NuGet Package Manager.
• A shared directory: In applications where packages are exchanged on a regular basis, additional
directories can be defined as package sources. The setting for this can be found in the Visual Studio
options under NuGet Package Manager/Package Sources:
• Furthermore it is possible to make the packages available in the public NuGet gallery at nuget.org.
16.2.2.1.4 Structure
All framework projects need certain files. These are available by default for a new project:
TE2000 Version: 2.5.1 1273

Framework
• The folder Images [} 1274] initially contains only a logo, which is used in the NuGet package.
• The .nuspec file [} 1275] contains metadata for creating a NuGet package. See also the notes in the
chapter on Integrating a project [} 1270]
• Manifest.json [} 1275] contains a list of resources stored in the framework project.
• packages.config [} 1276] contains information on which NuGet packages the framework project itself
references.
• The file tsconfig.tpl.json [} 1276] configures the TypeScript compiler.
Furthermore, any number of controls [} 1277] are possible. These must each be created in a separate folder.
Functions [} 1327], JavaScript [} 1278] and CSS files [} 1277] on the other hand can be created without
subfolders and simply have to be referenced accordingly in the Manifest.json file.
References
A framework project can use content from other NuGet packages.
If, for example, an TcHmiButton [} 168] is to be created in a control factory, the NuGet package
Beckhoff.TwinCAT.HMI.Controls must be integrated (and the control must be added to
tsconfig.tpl.json [} 1276]).
Select Manage NuGet Packages from the context menu in the References node.
Select the required package in the Browse tab. It may be necessary to adapt the source in the Package
source drop-down box. TwinCAT HMI Official contains a list of all packages that are provided with the
TwinCAT HMI setup. TwinCAT HMI Customer contains all packages that were created on this computer.
Images
This directory contains the logo of the NuGet package.
However, a package can also contain images for the gallery of the HMI project. This option is described for
the components under Images [} 1278].
1274 Version: 2.5.1 TE2000

Framework
Project.nuspec
This file contains metadata for creating a NuGet package. Note the following important entries:
• id: Denotes the full name of the package. The name must be unique in the respective repository (on
the computer or at nuget.org, if required). Namespace-like names can be separated with a dot. To
avoid conflicts, the company name can be used as the first part, for example. See example
Beckhoff.TwinCAT.HMI.PDFViewer
• version: NuGet supports version numbers with three components (e.g. 1.2.1). Furthermore, a name
suffix is common for pre-release versions (1.2.1-beta). If an HMI project is opened and a higher version
number is found, you will be notified of the update option.
• dependencies: This is where package dependencies are defined. At least
Beckhoff.TwinCAT.HMI.Framework should have an entry here. See also References [} 1274].
• files: This entry determines which files should be included in the package. Here you can specify
single files or multiple files.
See also the official documentation:
https://docs.microsoft.com/en-us/nuget/reference/nuspec
Manifest.json
This file is the main file of each framework project or package. All components and their dependencies are
documented here.
Possible components are:

• Package: This entry references a specific NuGet package as a dependency by its name in nugetId.
If, for example, a TcHmiButton (from Beckhoff.TwinCAT.HMI.Controls) is used in its own
package, Beckhoff.TwinCAT.HMI.Framework does not have to be referenced additionally, since
this is already done in the controls package.
• Function: This registers a function [} 1327] from this package in the system. The function directory
(basePath) is specified for this. The name of the function description file is specified as
descriptionFile.
• Resource: Two resource types can be included, JavaScript [} 1278] files and CSS [} 1277] files. The
embedding process is carried out in the correct order. A CSS resource, which is located between two
controls in the manifest file, is therefore also included between the CSS files of these two controls.
For CSS files, a theme name can also be specified (from version 1.12.752.0). In this case, the file will
only be included if a theme with the corresponding name is active, similar to what is possible with
control CSS files [} 1284].
• Control: This registers a control [} 1277] from this package in the system. The control directory
(basePath) is specified for this. The name of the control description file, Description.json, should
not be changed.
Furthermore, you can use the entry toolboxCategory to define where a control appears in the
VisualStudio toolbar.
• Beckhoff.TwinCAT.HMI:200 is stored in the System category.
• Beckhoff.TwinCAT.HMI:201 is stored in the Beckhoff category.
• Beckhoff.TwinCAT.HMI:202 is stored in the 3rd party category.
• Beckhoff.TwinCAT.HMI:203 is stored in the Legacy (1.10) category.
• You can create your own entries via provideMetadata (also for multiple languages in Visual Studio).
See example below.
• If no category is defined here, the name of the project itself is used as the category.
TE2000 Version: 2.5.1 1275

Framework
Sample
{
"apiVersion": 1,
"modules": [
{
"type": "Package",
"nugetId": "Beckhoff.TwinCAT.HMI.Framework"
},
{
"type": "Function",
"basePath": "myFunction/",
"descriptionFile": "myFunction.function.json"
},
{
"type": "Resource",
"path": "customHelpers.js"
},
{
"type": "Control",
"basePath": "Control1/",
"descriptionFile": "Description.json",
"toolboxCategory": "MyIdentifier:200"
},
{
"type": "Resource",
"path": "PackageStyle.css"
},
{
"type": "Resource",
"path": "PackageBaseThemeStyle.css",
"theme": "Base",
},
{
"type": "Control",
"basePath": "Control2/",
"descriptionFile": "Description.json",
"toolboxCategory": "MyIdentifier:201"
}
],
"provideMetadata": {
"toolbox": {
"MyIdentifier": {
"200": "FrameworkPrj1",
"201": {
"default": "Bühnentechnik",
"de-DE": "Bühnentechnik",
"en-US": "Stagecraft",
"it-IT": "Scenotecnica",
"nl-NL": "Theatertechniek"
}
}
}
},
"$schema": ".hmiframework/Schema/Manifest.Schema.json"
}
packages.config
This file contains information on which NuGet packages the framework project itself references. The version
number range with which the packages must comply is also specified here.
See also the official documentation:
https://docs.microsoft.com/en-us/nuget/reference/packages-config
tsconfig.tpl.json
All options of the TypeScript compiler are set in tsconfig.json. This checks whether API calls are used
correctly, for example.
1276 Version: 2.5.1 TE2000

Framework
Type definitions for jQuery, the framework and the controls are required to analyze the source code. These
are provided with the NuGet packages. Since these paths are not always in the same place, the user only
edits this template file. Visual Studio uses this to create the correct tsconfig.json.
compilerOptions
The default is a standard set of options in the compilerOptions section. These can be changed.
However, it is possible that subsequently a project can no longer be built or no longer works in all browsers.
See the official documentation: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html
include
Type definitions for APIs that do not come from the browser itself are integrated in the include section. The
entry
"$(Beckhoff.TwinCAT.HMI.Framework).InstallPath/TcHmi.d.ts"
that references jQuery, framework and the system controls is essential. If, for example, an TcHmiButton
[} 168] is to be created in a control factory, the NuGet package Beckhoff.TwinCAT.HMI.Controls must
be integrated and this line must be added:
"$(Beckhoff.TwinCAT.HMI.Controls).InstallPath/TcHmiButton.d.ts"
files
Under Files, all TypeScript files to be compiled by the TypeScript compiler must be included individually and
in the correct order. New files for functions or controls are automatically added here, but manual intervention
may also be necessary.
The TypeScript compiler then creates JavaScript files with the same base name and the extension .js
instead of .ts. This should be entered under Controls [} 1278] in description.json [} 1283], for example.
16.2.2.1.5 Components
A framework project/package may include a number of components. Most of these components require a
reference in Manifest.json [} 1275].
Furthermore, a framework package can provide additions to the image gallery.
Controls
Creating your own controls is probably the most common use case for a framework project. This is described
in detail in a special section of the documentation [} 1278].
Functions
The HMI can be flexibly extended with HMI functions. These can also be created in a framework project. This
is described in detail in a special section of the documentation [} 1327].
Stylesheets
A framework project can contain any number of stylesheet files (which may be independent of controls). This
is useful for common styles of controls within a project, for example.
Any file that has its own entry in the Manifest.json [} 1275] file is integrated in the browser accordingly. The
embedding process is carried out in the correct order. A CSS file, which is located between two controls
[} 1278] in the manifest file, is therefore also included between the CSS files of these two controls.
TE2000 Version: 2.5.1 1277

Framework
JS libraries / Code-Behind
A framework project can contain any number of JavaScript files (which may be independent of controls or
functions). This is useful for external libraries, for example.
Any file that has a separate entry in the Manifest.json [} 1275] file is available in the browser (and therefore
to all controls).
Images
A NuGet package may include images that appear directly in the Gallery Explorer [} 881]. To do this, the files
in the NuGet package must be stored in the special folder {gallery} folder. They should be stored in the
ImageLibrary directory and then referenced in the nuspec file [} 1275]:
<file src="ImageLibrary\*" target="tools\native1.12-tchmi\{gallery}\"/>
16.2.2.2 Controls
Starting with version 1.12, controls are always created in a framework project. The framework project can
store several controls in encapsulated form. Other options include functions and further resources. See
Framework project [} 1269]
Framework controls are user-specific controls that are not created with the graphical WYSIWYG editor [} 34].
Framework controls are used if the desired behavior cannot be mapped with the standard controls or a user
control. Unlike a Code Behind file [} 1220], a framework control can be used independently of the HMI
project, so that the source code can be reused.
Each control must have a reference in Manifest.json [} 1275] within a framework package in order to be able
to use it.
Technology
Framework controls are developed using web development tools.

• HTML: Type and structure of the elements of the framework control
• CSS: Design of the elements of the framework control
• TypeScript/JavaScript: Logic behind the elements of the framework control
Developers are no longer bound to the TwinCAT HMI controls and can use all the elements and
functionalities they are already familiar with from web development within a framework control. The standard
TwinCAT HMI controls are implemented on the same basis as a framework control. It is also possible to
reuse the TwinCAT HMI controls in the framework control or to add user-specific properties.
Application scenarios
Framework controls can map customer-specific and application-specific requirements. The following use
cases can be implemented with a framework control:
• Mapping of complex TypeScript/JavaScript logic
• Reusing HTML, JS and CSS in a control
• Dynamic elements: Adding and removing HTML elements and controls at runtime
• Developing responsive controls
• Realizing and integrating 3D models
1278 Version: 2.5.1 TE2000

Framework
Use
The framework controls form part of a framework project and can be integrated directly as references
[} 1270] in a TwinCAT HMI project if both projects are in the same Solution. Furthermore, it is possible to
export the framework project as a NuGet package [} 1270] and install it in different HMI projects. In this way,
it is possible to implement application-specific control libraries. Within the HMI project, a framework control is
used like a standard TwinCAT HMI control.
16.2.2.2.2 Creating a control

A framework project can contain any number of controls. Each control is stored in its own folder, along with
all associated files.
A control can be created based on TypeScript or JavaScript. Both have the same technical options and are
very similar in terms of programming. Due to the better programming support offered by Visual Studio,
TypeScript should be selected for new controls.
To create a new control, right-click on the destination folder in the context menu and select Add new Item.
A new folder is then created with the chosen name. This folder contains all the important files of a control.
The control is still automatically entered in the Manifest.json [} 1275] file.
It then becomes part of the project and can be used as a project reference or NuGet package, for example.
See Integrating a project [} 1270].
16.2.2.2.3 Structure
A framework control consists of a series of files. Most of these files are created automatically when a control
is created and filled with a base structure.
Each usable control of a framework project must be referenced in Manifest.json [} 1275].
This section is intended to serve as a reference for these file contents.
Description.json
This section describes the structure of the description file Description.json.
TE2000 Version: 2.5.1 1279

Framework
Any changes in Description.json must be followed by a project build (see Build Project [} 1270]).
Introduction
TwinCAT HMI Engineering reads all properties of the control from the Description.json file. The properties
allow you to transfer data to the control and vice versa. In TwinCAT HMI Engineering, the control can be
configured via the Properties window [} 58] or via the Actions and Conditions Editor [} 59]. The developer
can define additional attributes, besides the standard attributes of each framework control.
In many cases the following user-specific properties are defined in Description.json:

• Attributes [} 1285] (data interfaces)
• Functions [} 1292]
• Events [} 1293]
• Access rights [} 1295]
• User-specific data types [} 1294]
Properties
Required: Specifies whether the property is required for the framework control (yes) or is optional (no).
$schema
Type: String (relative path)
Required: No
"$schema": "../.hmiframework/Schema/ControlDescription.Schema.json"
This property references the JSON schema that describes the structure of Description.json. The schema is in
a special folder of the framework control project. It is provided and updated by the NuGet package
Beckhoff.TwinCAT.HMI.Framework. Including the JSON schema enables Intellisense in Visual Studio
for each property.
name
Type: String
Required: Yes
"name": "FrameworkPrj1Control"
This property is the name of the framework control, which is automatically generated. The name (extended
by the namespace [} 1280]) is added to the control as CSS class and can be used within the CSS files [} 1298]
in the framework control project to describe the styles.
namespace
Type: String
Required: Yes
"name": "TcHmi.Controls.FrameworkPrj1"
This property is the namespace of the framework control, which is automatically generated based on the
project name. The name (extended by the name [} 1280]) is added to the control as CSS class and can be
used within the CSS files [} 1298] in the framework control project to describe the styles.
1280 Version: 2.5.1 TE2000

Framework
displayName
Type: String
Required: Yes
"displayName": "FrameworkControlJs1"
This property is the name of the control that is displayed as the control name in the Engineering.
version
Type: JSON object
Required: Yes
"version": {
"full": "1.0.0.0",
"major": 1,
"minor": 0,
"revision": 0,
"build": 0
}
This property is the version number of the framework control that is used for versioning a framework control.
The version number is subdivided into the major release number, minor release number, revision number
and build number.
visible
Type: Boolean
Required: Yes
"visible": true
This property makes the control visible or hides it in the toolbox in the Engineering. By default, a control is
always displayed in the toolbox.
themeable
Type: Enum string
Required: No
This property determines whether the control is displayed in the theme editor [} 936] within in the TwinCAT
HMI Engineering.
Permissible values:
• Standard: The control is displayed in the theme editor.
• None: The control is not displayed in the theme editor.
• Advanced: The control is only displayed in the theme editor if the "Advanced" property is enabled in
the theme editor.
base
Type: String
Required: Yes
"base": "TcHmi.Controls.System.TcHmiControl"
This property determines whether the control inherits the properties of another control. By default, a
framework control inherits all properties of Description.json of the base control
TcHmi.Controls.System.TcHmiControl, which defines a base framework for all TwinCAT HMI
TE2000 Version: 2.5.1 1281

Framework
controls. The control can be made to inherit from other controls, such as a button, if a particular control is to
be extended. The control name that must be specified here corresponds to the control type [} 1280]
including its namespace [} 1280], which are defined in Description.json.
Validity
This property must refer to a valid control and must not have the value null, otherwise the control
can no longer be used in the Engineering.
template
Type: String
Required: No
"base": "Template.html"
This property defines whether the system should automatically create an HTML subtree for the control.
For further details please refer to the description of the template file [} 1296].
description
Type: String
Required: Yes
This property is the description of the control and is displayed as a tooltip when the mouse is moved over the
control in the toolbox.
defaultDesignerEvent
Type: String
Required: No
"defaultDesignerEvent": ""
This property determines which event is to be configured when the control is double-clicked in the Actions
and Conditions Editor [} 59]. By default (no entry or empty entry), no editor is opened on double-clicking.
All standard and custom events defined in Description.json can be used here. The following listing shows an
example of a custom event:
"defaultDesignerEvent": ".onMyCustomEvent"
Custom events are defined under events [} 1293].
properties
Type: JSON object
Required: Yes
"properties": {
"containerControl": false,
"geometry": {
"width": 150,
"height": 150
}
}
This property defines the engineering properties required for each framework control and describes general
control properties.
1282 Version: 2.5.1 TE2000

Framework
• containerControl {Boolean}, not required: Specifies whether the control is a container control and
can include additional controls using drag and drop. In this case, the control must also be derived
[} 1281] (directly or indirectly) from TcHmiContainerControl.
• geometry {JSON object}: Defines the default geometry properties (width and height) of the control,
which are set after dropping the control from the toolbox.
icons
Required: Yes
"icons": [
{
"width": 16,
"height": 16
},
{
"width": 24,
"height": 24
},
{
"width": 32,
"height": 32
},
{
"width": 64,
"height": 64
}
]
This property defines the icon of the control in different dimensions. The array contains JSON objects, where
each object corresponds to a control icon in a different resolution. The control icon is used to display the
control in the toolbox of the Engineering and the Actions and Conditions Editor.
The name is specified as a relative project path. The dimensions (width/height) are specified in pixels.
dependencyFiles
Required: Yes
"dependencyFiles": [
{
"name": "Control.js",
"type": "JavaScript",
"description": ""
},
{
"name": "Style.css",
"description": "Theme independent style"
}
]
This property contains all files of the framework control that must be included in the HTML file of the HMI. By
default, the Control.js and Style.css files are included. If additional JavaScript or stylesheet files are included
in the control, they must be referenced under "dependencyFiles".
The array contains JSON objects that contain information about the file:
• type {string}: File type (JavaScript or Stylesheet)
TE2000 Version: 2.5.1 1283

Framework
Theme-dependent stylesheet files are not included under "dependencyFiles", but under "themes
[} 1284]".
Even if the control is created via TypeScript, the compiled JavaScript file must be referenced here.
themes
Type: JSON object of JSON objects
Required: No
"themes": {
"Base": {
"resources": [
{
"description": ""
}
]
}
}
This property contains all themes that are included in the control. By default, the base theme is included with
a stylesheet file. A theme is an object containing the array "resources". The array "resources" contains
all the files that are allocated to a theme.
A "resource" object contains the same properties as a "dependencyFile" object [} 1283], with other allowed
values for "type":
• type {string}: file type (Stylesheet or ThemedValues, see Theming [} 934]).
Images and fonts etc. are not included under the theme resources, but referenced via the stylesheet
file (see Theming [} 934]).
The following listing illustrates the inclusion of another theme with associated files:
"themes": {
"Base": {
"resources": [
{
"description": ""
}
]
},
"Custom": {
"resources": [
{
"name": "Themes/Custom/Style.css",
"description": ""
},
{
"name": "Themes/Custom/MyTheme.theme",
"type": "ThemedValues"
"description": "This is a theme file."
}
]
}
}
1284 Version: 2.5.1 TE2000

Framework
attributes
Type: Array of JSON objects (attributes)
Required: Yes
"attributes": [
{
"visible": true,
"description": "",
"readOnly": false,
"bindable": true,
"heritable": true,
}
]
The attributes define the data interfaces to the TwinCAT HMI Engineering. The attributes of the control are
displayed in the Properties window of the Engineering under "Show Properties". Any number of attributes
can be defined in a control.
The individual properties of an attribute are described on the following pages.

Required: Specifies whether the property is required for the attribute (yes) or is optional (no).
name
Type: String
Required: Yes
"name": "data-tchmi-value"
Name of the attribute. The name is written into the HMTL code of the control as a "data-*" attribute.
Therefore, the "data-" prefix is mandatory. The subsequent prefix "tchmi-" before the attribute is
recommended for standardizing attributes, but it is not obligatory. An attribute name may only be used once
for each control, otherwise unambiguous assignment cannot be guaranteed.
propertyName
Type: String
Required: Yes
"propertyName": "Value"
Internal attribute name of the control. The internal attribute name is formed from the attribute name without
prefix in Pascal case.
Example:
"name": "data-tchmi-my-custom-value"
becomes: „MyCustomValue“.
For better assignment between JavaScript variables and attributes, it is recommended to name the attribute
variable in the JavaScript/TypeScript code of Source.js according to the "propertyName".
TE2000 Version: 2.5.1 1285

Framework
propertySetterName
Type: String
Required: Yes
"propertySetterName": "setValue"
This property creates the reference to the setter function in Source.js. The setter function allows a new value
to be set. For the reference between Description.json and Source.js, the setter function must have the same
name as the"propertySetterName". If the names in Description.json and Source.js/ts are different, an
error message appears in the browser console and the setter function cannot be used.
The recommended notation for the setter name is the "propertyName" plus the prefix "set" in Camel case.
If an attribute is read only [} 1289], the empty string should be entered as propertySetterName.
propertyGetterName
Type: String
Required: Yes
"propertyGetterName": "getValue"
This property creates the reference to the getter function in Source.js/ts. The getter function returns the
attribute value when called. For the reference between Description.json and Source.js, the getter function
must have the same name as the"propertyGetterName". If the names in Description.json and Source.js/
ts are different, an error message appears in the browser console and the getter function cannot be used.
The recommended notation for the getter name is the "propertyName" plus the prefix "get" in Camel case.
displayName
Type: String
Required: Yes
"displayName": "Value"
The property is the name of the attribute displayed in the Engineering Properties window for the attribute.
You can choose any "displayName".
It is recommended that the "displayName" is based on the "propertyName".
refTo
Type: String
Required: No
"refTo": "basePropertyName"
Name of a PropertyName of the control. This attribute references another attribute.
This is used to write the physical unit (pixel or percent) in the development environment next to the numeric
value.
searchTerms
Required: No
1286 Version: 2.5.1 TE2000

Framework
"searchTerms": [
"Shortcut1",
"ShortCut2",
"Shortcut3"
]
This property defines a list of search terms for Engineering to optimize the search function within the Actions
and Conditions Editor and the Properties window. This makes it possible to find the attribute using terms
other than the attribute name.
visible
Type: Boolean
Required: No
"visible": true
This property determines whether the attribute is to be displayed in the Engineering. If the property is set to
"false", the attribute is not available in the Engineering. By default, all attributes are displayed in the
Engineering.
themeable
Type: Enum string
Required: No
This property determines whether the attribute is displayed in the theme editor in the Engineering.
Permissible values:
• Standard: The attribute is displayed in the theme editor.
• None: The attribute is not displayed in the theme editor.
• Advanced: The attribute is only displayed in the theme editor if the "Advanced" property is activated
in the theme editor.
type
Type: String (TcHmi data type)
Required: Yes
This property indicates the data types of the attribute. All data types of the TwinCAT HMI [} 87] are available.
Further user-specific data types can be defined (see dataTypes [} 1294]). The data type determines the
display of the attribute in the Engineering Properties window (e.g. checkbox for a Boolean value).
displayPriority
Type: Number
Required: No
"displayPriority": 10
This property determines the priority with which the attribute is displayed within the category in the
Engineering Properties window. User-specific sorting of attributes is possible based on the priority. Attributes
with the same priority are displayed according to the order in which they are defined. The prioritization of the
attribute categories is set via the property "attributCategories [} 1290]".
• Values less than 10 have high priority and are displayed higher up in the category, according to the
value.
• Values that equal 10 have main attributes like top, left etc.
TE2000 Version: 2.5.1 1287

Framework
• Values greater than 10 have low priority and are displayed lower down in the category, according to
the value.
• Values greater than 50 are collapsed by default and have to be expanded using the arrow.
allowedFunctions
Type: JSON object
Required: No
"allowedFunctions": {
"returnType": "tchmi:general#/definitions/String",
"requiredArguments": [
{
"type": "tchmi:general#/definitions/Number"
}
],
"requiredWaitMode": "Synchronous"
}
For attributes with the data type [} 1287]:

"type": "tchmi:framework#/definitions/Function"
These properties can only be used for "Function" type attributes.
This property determines which functions are allowed for the attribute. This means that when configuring the
attribute, only those functions are displayed that meet the defined criteria.
A selected function may allow additional parameters. These parameters can be specified for each instance
in engineering.
Attributes:
• returnType {string}: Determines which TwinCAT HMI data type may be returned by the function.
• requiredArguments {array of JSON objects}: Determines which TwinCAT HMI data types the
functions may have as parameter values. The parameters mentioned here are set by the control.
• requiredWaitMode {enum string}: Determines in which mode (synchronous, asynchronous) the
function may be executed (Synchronous, Asynchronous).
For example, one the Beckhoff controls that uses this property is LinearGauge [} 400], namely for the
ValueFormat [} 419] in order to restrict the functions that can format the values of the gauge.
category
Type: String
Required: No
"category": "Value"
This property indicates the category to which the attribute is assigned in the Engineering Properties window.
New category names can be assigned or standard category names (e.g. Common) can be used. A new
category name does not have to exist under the Attribute categories [} 1290], since the category is created
independently of the attribute categories. The attribute categories are used to prioritize different attribute
categories.
description
Type: String
Required: No
This property contains the description of the attribute, which is displayed as a tooltip when the mouse is
moved over the attribute.
1288 Version: 2.5.1 TE2000

Framework
requiredOnCompile
Type: Boolean
Required: No
"requiredOnCompile": false
This property determines whether the attribute of the control is required when the HMI is compiled. If the
attribute is required for the control and the property is not set, an error message is issued and the control is
not valid. This property is normally not required for attributes of a framework control. An example of
"requiredOnCompile" is the id of a control.
readOnly
Type: Boolean
Required: No
"readOnly": false
This property indicates whether the Engineering has write access to the attribute or only read access. By
default, write access to an attribute is available. If readOnly is set to true, the attribute is no longer
displayed in the Engineering Properties window, but it can still be used via the Actions and Conditions Editor.
For read only attributes, the propertySetterName [} 1286] is not required and can be replaced by an
empty string.
bindable
Type: Boolean
Required: No
"bindable": true
This property indicates whether a data Binding [} 103] to the attribute can be created in the Engineering. By
default, the property is true.
If the property is set to false, it is not possible to link symbols to the attribute. Nevertheless, this attribute
can be used and read at another location.
heritable
Type: Boolean
Required: No
"heritable": true
This property indicates whether the attribute can be passed on to other control. By default, the property is
true. If the property is set to false, it is not available in the derived control classes.
allowSymbolExpressionsInObject
Type: Boolean
Required: No
"allowSymbolExpressionsInObject": false
This property specifies whether the attribute setter [} 1308] can process symbol expressions within an object.
This setting is not relevant if the values of an attribute are not objects (e.g. string, Boolean, number). By
default, the property is false.
If this setting is true, engineering allows a selection of symbols in the editor.
TE2000 Version: 2.5.1 1289

Framework
The control receives such an object at runtime, for example:

{
"start": "%i%myinternalsymbol%/i%",
"end": 35.0
}
For step-by-step instructions on how these data types are processed, see Handling of symbol expressions in
objects [} 1324]
defaultBindingMode
Type: Boolean
Required: No
"defaultBindingMode": "OneWay"
This property specifies how a binding to this attribute should be handled.
Permissible values:
• OneWay: By default, a binding to the attribute is only valid for writing to the control. This is the default.
• TwoWay: By default, a binding to the attribute is valid for reading to and writing from the control. The
new value is written to the binding each time the respective attribute is changed. See also Configure
binding [} 107]
defaultValue
Required: No
"defaultValue": false
This property indicates the default value for the attribute that is used in the Engineering Properties window
when instantiating the control and written to the HTML code.
If null is entered here, no attribute is set.
defaultValueInternal
Required: No
This property specifies the internal default value for the attribute. This value is passed to the Setter function
[} 1286] when the control is initialized. The internal default may differ from the normal default [} 1290] ("drop
default").
attributeCategories
Required: No
1290 Version: 2.5.1 TE2000

Framework
"attributeCategories": [
{
"name": "Value",
"defaultCollapsed": false,
"description": ""
}
]
The property is used to prioritize new attribute categories that are assigned under Attributes [} 1288].
Prioritization is used to determine the displayed order of the categories in the Engineering Properties
window. The attribute categories are described within a JSON object.
The following properties can be defined:

• name {String}: The name of the attribute category. The attribute name must be assigned to at least one
control attribute.
• displayPriority {Number}: The priority determines the order in which the various attribute
categories are displayed within the Engineering Properties window.
◦ Values less than 10 mean high priority and are displayed at the top of the Properties window (e.g.
colors).
◦ Values less than 500 have standard categories (e.g. Common =100, Layout = 200, Border = 300,
Background Image = 400).
◦ Values greater than 500 should be assigned user-specific categories so that they are listed below
the standard categories.
◦ Values greater than 800 have low priority and are rarely configured.
• defaultCollapsed {Boolean}, not required: This property determines whether the category is
collapsed by default (true) or expanded (false).
• description {String}, not required: Optional description of the attribute category that is displayed as
a tooltip for the mouseover event in the Engineering.
themedResources
Required: No
"themedResources": [
{
"name": "MyCustomThemedResource",
"displayName": "MyCustomThemedResource",
"description": "This is a custom themed resource. Look at theming of framework controls.",
"type": "tchmi:framework#/definitions/MyThemedDefinition"
}
]
This property contains all user-specific theme definitions that are not defined as attributes in the Engineering
Properties window and can only be changed using the theme editor. An example of a "ThemedResource"
are images within a control that cannot be exchanged via the Properties window (e.g. KnobConfigHorizontal
and KnobConfigVertical for the LinearGauge [} 400]). A control developer can access these resources via the
theme API.
A "themedResources" object contains the following properties:

• name {String}: Name of the property to be changed.
• displayName {String}: Name displayed in the Engineering theme editor.
• description {String}: Optional description of the property that is displayed in the theme editor on
mouseover.
• type {string of a framework data type [} 87]}: Data type of the property. The data type can be either a
TwinCAT HMI data type or a user-specific data type defined under "dataTypes [} 1294]". Usually, user-
specific data types are used (see Theming).
TE2000 Version: 2.5.1 1291

Framework
functions
MType: Array of JSON objects
Required: No
"functions": [
{
"visible": true,
"params": [],
"type": null,
"heritable": true,
"searchTerms": []
}
]
This property defines functions of the control that are independent of attributes. The functions can optionally
have parameter values or a return value. Each function must have the same name in Source.js, otherwise an
error message appears in the browser console and the function is not executed.
A JSON object for a function contains the following properties:

• name {String}: Internal name of the function.
• description {String}: Description of the function that is displayed as a tooltip during mouseover in
the engineering.
• category {String}: Category of the function under which the function is displayed in the Actions and
Conditions Editor in the Engineering.
• params [} 1293] {JSON object}, not required: Parameter values of the function.
• type {string, TwinCAT HMI data type}: Return value of the function. The return value must have a
TwinCAT HMI data type.
• heritable {Boolean}: This property defines whether the function is to be passed on to derived
classes.
• searchTerms {array of strings}, not required: This property defines search terms for the Engineering
that are to optimize the search function within the Actions & Conditions Editor. This makes it possible to
find the function using terms other than the function name. For example, if the strings "MyFunction"
and "1234" are added to the array, the function can also be found under these terms.
The following diagram shows an example of two framework control functions in engineering, neither of which
has a return value. A function contains optional parameter values.
1292 Version: 2.5.1 TE2000

Framework
params
Type: JSON object
Required: No
"params": [
{
"visible": true
},
{
"bindable": false
"visible": true
}
]
This property defines the optional parameter vaules of a function. The parameter values can be transferred
via Engineering.
A parameter object contains the following properties:

• name {String}: Internal name of the parameter values.
• displayName {String}: Name of the parameter value that is displayed in the Engineering.
• description {String}: Description of the parameter value that is displayed as a tooltip during
mouseover in the Engineering.
• bindable {Boolean}: Determines whether a binding [} 103] can be set to this parameter. This is
allowed by default.
• visible {Boolean}: Visibility of the parameter value. The visibility determines whether the parameter
is to be displayed or hidden in the Engineering.
events
Required: No
"events": [
{
"name": ".onMyCustomEvent",
"displayName": ".onMyCustomEvent",
"visible": true,
"category": "Control",
"description": "This is a sample for a framework control event.",
"heritable": true,
"allowsPreventDefault": false
}
]
This property defines events that can be configured through the Engineering and are triggered in this
framework control. An event is used to notify engineering that a specific event has occurred in the control.
The HMI developer in engineering has the option to respond to this event accordingly. Triggering of an event
is implemented in Source.js.
An event object contains the following properties:

• name {String}: internal name of the event.
• displayName {String}: name of the function that is displayed in the Engineering.
• visible {Boolean}: visibility of the event. If "visible" is set to "false", the event is not displayed in
the Engineering.
TE2000 Version: 2.5.1 1293

Framework
• displayPriority {Number}, not required: the priority determines the order in which the various
events are displayed within the category.
◦ Values = 10 correspond to frequently used events such as ".onPressed".
◦ Values = 15 correspond to standard events such as ".onClick" or "onRightClick".
◦ Values = 50 correspond to rarely used events such as ".onMouseUp".
◦ No value assigned: the event is collapsed by default and has to be expanded using the arrow.
• category {String}: the category determines under which category the event is listed in the
Engineering. Existing categories such as "Operator" can be used, or new category names can be
assigned.
• description {String}: optional description of the event, which is displayed as a tooltip on mouseover
in the Engineering.
• heritable {Boolean}: this property defines whether the event is to be inherited to derived classes. By
default, this value is "true", so that the event is inherited.
• allowsPreventDefault {Boolean}, not required: this property specifies that a user can explicitly
select preventDefault. See also Events [} 1313]
The event configured above is displayed in the Engineering as follows:
dataTypes
Required: No
1294 Version: 2.5.1 TE2000

Framework
"dataTypes": [
{
}
]
This property contains a list of files in which all user-specific data types of the control are defined. Each file
can describe any number of data types. Developer can define their own data types in a JSON schema. The
definition usually takes place under "Schema\TypeDefinitions [} 1228]". In order for the Engineering to know
and be able to process the user-specific data types, they must be referenced in Description.json.
A dataType object contains the following properties:

• schema {String, relative path}: relative path to the JSON schema file describing the data type.
access
Required: No
"access": [
{
"name": "myCustomRight",
"displayName": "myCustomRight",
"description": "This is a sample for access rights in the framework control.",
"visible": true,
}
]
This property contains a list of user-specific access rights that can be configured via the Engineering. Access
rights restrict user groups in their activities (see authorization system [} 893]). A user-specific access right
must be evaluated in Source.js with corresponding user-specific logic [} 1314].
An access right object contains the following properties:

• name {String}: Internal name of the access right.
• displayName {String}: Name of the access right that is displayed in the Engineering.
• description {String}: Description of the access right, which is displayed as a tooltip in the
Engineering on mouseover.
• visible {Boolean}: This property switches the visibility of the access right. If "visible" is set to
"false", the access right is not displayed in the Engineering.
• defaultValueInternal {Boolean}: This property defines the internal default value that is to apply if
the access right is not configured via engineering. "true" means access is granted by default. "false"
means access is not granted. "null" means access is not defined and the parent control is queried. If
the parent control does not know this right, the value set here applies. For a detailed description of the
behavior of defaultValueInternal see authorization system [} 893].
Various user groups are assigned to an access right via the Engineering, which are structured according to
the following schema: tchmi:framework#/definitions/ControlAccessRight
This schema defines the type of access (Allow, Deny, Inherit) the respective user group has to the
access right.
In the Engineering, the access right is displayed in the Properties window as follows (for two different user
groups):
TE2000 Version: 2.5.1 1295

Framework
For more information, see section Access rights [} 1314].
Template.html
Like every control in the TwinCAT HMI, a framework control is based on HTML code. As soon as a
framework control is instantiated in the Engineering of the TwinCAT HMI, an HTML div element is
automatically created for the control. The developer of the framework control can define additional HTML
code for the control within the control div element.
HTML/SVG code
The definition of the HTML/SVG code is implemented in the "Template.html" file. The use of this file is
optional. The Template.html file is only used if it is referenced in Description.json [} 1282] of the control. The
Template.html file defines the basic structure of a framework control.
<div class="TcHmi_Controls_FrameworkPrj1_FrameworkControlJs1-Template tchmi-box">
</div>
The HTML/SVG code defined within this file is automatically inserted in the control div element (if the file is
used) in the engineering. The code can be viewed in the browser during debugging, for example.
<div id="TcHmiFrameworkControlJs1" data-tchmi-type="
TcHmi.Controls.FrameworkPrj1.FrameworkControlJs1" data-tchmi-height="150" data-tchmi-height-
unit="px" data-tchmi-left="137" data-tchmi-left-unit="px" data-tchmi-top="140" data-tchmi-top-
unit="px" data-tchmi-value="True" data-tchmi-width="150" data-tchmi-width-unit="px" class="tchmi-box
tchmi-control framework-control-js1" title="" style="left: 137px; top: 140px; width: 150px; height:
150px; z-index: 0; border-width: 0px;">
<div class="TcHmi_Controls_FrameworkPrj1_FrameworkControlTs1-Template tchmi-box">
</div>
</div>
SVG elements can also be embedded directly.

<div class="TcHmi_Controls_FrameworkPrj1_FrameworkControlTs1-Template tchmi-box">
<div class="TcHmi_Controls_FrameworkPrj1_FrameworkControlTs1-Template-div1 tchmi-box"></div>
<svg class=" TcHmi_Controls_FrameworkPrj1_FrameworkControlTs1-Template-svg1 tchmi-box"
version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30px" height="100%"
viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
<polyline class="TcHmi_Controls_FrameworkPrj1_FrameworkControlTs1-Template-svg1-arrow" stroke-
width="2" stroke-linecap="round" stroke-linejoin="round" points="22.865,12.5 15,20.366
7.135,12.5"></polyline>
</svg>
<div class="TcHmi_Controls_FrameworkPrj1_FrameworkControlTs1-Template-div2 tchmi-box"></div>
1296 Version: 2.5.1 TE2000

Framework
Within the Template.html file any number of HTML/SVG elements can be defined. All standard HTML/SVG
elements are available to the developer.
In addition to the standard HTML elements, TwinCAT HMI controls can also be used in the Template.html
file. See Dynamic control generation [} 1325].
The user-specific HTML code should be placed within the template div ("Place your code here").
Do not assign fixed IDs

No fixed IDs may be assigned within the Template.html file. The assignment of IDs within the Tem-
plate.html file would contradict the concept of multiple instantiations of a framework control, since
an ID may only occur once within the HTML document. The outer control div element is automati-
cally assigned a unique ID through the Engineering.
This ID is made available via the placeholder {Id}. A div element may be created in this way: <div
id=“{Id}-subDiv“></div>
CSS classes
Within the elements in the Template.html file, CSS classes [} 1298] can be assigned, which are described via
cascading style sheets files, either detached from the theme or depending on the theme. By default, the
template class in the Style.css file is used at project level.
Access via JavaScript/TypeScript
The HTML elements defined within the Template.html file can be further processed in the Source.js/ts file
[} 1301]. The elements can be changed during runtime or used as placeholders for dynamically created
elements, for example. Processing of the HTML elements in the Source.js/ts file is optional. Static use within
the Template.html file is also possible.
If the HTML elements are to be processed further in the Source.js/ts file, references to the HTML elements
must be created there. References to the Template.html file are created within the PrevInit function in the
Source.js file.
this.__elementTemplateRoot =
this.getElement().find('.TcHmi_Controls_FrameworkPrj1_FrameworkControlJs1-Template');
The listing shows the access to the template div within Template.html. A search for the template div is
initiated using the ".find()" JQuery function within the main JQuery object of the control. The reference to the
JQuery object of the control can be reached via ".getElement()". If additional elements are placed within the
template div, they can also be found using the ".find()" JQuery function. For performance reasons, we
recommend to avoid using the outer JQuery object for the search in cases with many nested elements, but
to use the inner elements that are already referenced instead.
Sample:
<div class="TcHmi_Controls_FrameworkPrj1_FrameworkControlJs1-Template tchmi-box">
<div class="TcHmi_Controls_FrameworkPrj1_FrameworkControlJs1-inner-div">
<div class="TcHmi_Controls_FrameworkPrj1_FrameworkControlJs1-inner-div-my-element">
</div>
</div>
</div>
The following references result from this HTML code:

this.getElement().find('.TcHmi_Controls_FrameworkPrj1_FrameworkControlJs1-template');
this.__innerDiv =
this.__elementTemplateRoot.find('.TcHmi_Controls_FrameworkPrj1_FrameworkControlJs1-inner-div');
this.__myElement = this.__innerDiv.find('.TcHmi_Controls_FrameworkPrj1_FrameworkControlJs1-inner-
div-my-element');
TE2000 Version: 2.5.1 1297

Framework
Style.css
Within a framework control, the appearance of individual elements is described using cascading style sheets.
The default design of the control is defined in the Style.css file at the project level and in the Style.css file,
the base theme of the control. In addition to the standard design, further themes can be defined for the
framework control. The appearance of a framework control can be changed at four different levels [} 945]
according to the theme system of the TwinCAT HMI.
Theme levels
The appearance of a framework control can be described at different levels of the theme system [} 945].
Level 4: Attribute definition per control type
Control themes [} 940] can be defined at level 4 of the theme system. Control themes allow individual
attributes of the framework control to be overwritten. A control theme is defined within a theme file and can
be created using the theme editor in Engineering or directly as JSON code. The theme file must be assigned
to a specific theme within the project:
The theme file must then be referenced as "ThemedValues" under "themes [} 1284]" in the Description.json
file.
Level 5: Attribute definition by DefaultValueInternal
At level 5 of the theme system, it is possible to set the properties of the attribute via DefaultValueInternal
[} 1290]. DefaultValueInternal can be set in the Description.json file of the framework control.
Example of a color attribute:

"color": "rgba(255, 0, 0, 1)"
}
Level 8: Cascading Style Sheets per theme
Cascading style sheet files can be added to a theme at level 8 of the theme system. Within the CSS file any
element properties can be defined.
1298 Version: 2.5.1 TE2000

Framework
The CSS file "Stylesheet" must then be referenced under "themes [} 1284]" in the Description.json file of the
framework control.
Level 9: Cascading Style Sheets on project level in the control
At level 9 of the theme system, Cascading Style Sheet files can be added independently of a theme at
project level in the control. By default, each framework control project contains a Style.css file at project
level. Within this file, element properties are defined that are to apply independently of a theme (e.g. sizes of
a div).
All CSS files at the project level in the control must be referenced under dependencyFiles [} 1283] in the
Description.json file of the framework control.
Using CSS classes

The CSS class selectors are used within the cascading style sheet files of a framework control.
Permitted selectors
The following CSS selectors can be used conditionally within a CSS file of a framework control:
• Type selectors
• Attribute selectors
• Class selectors
With class selectors, new CSS classes are defined for a framework control, which means that CSS
styles are not overwritten outside the framework control. If type or attribute selectors are to be used,
you must ensure that they are only used for the class of the framework control and do not overwrite
any styles outside the framework control (descendant selector):
.TcHmi_Controls_FrameworkPrj1_FrameworkControlJs1 a {
color: red;
}
TE2000 Version: 2.5.1 1299

Framework
The following CSS selectors should not be used within a CSS file of a framework control:
• ID selectors: Due to multiple instantiation, you cannot assign fixed IDs within a framework control.
• Universal selector: A framework control should not overwrite any styles outside the control during
instantiation.
Using the class selectors
CSS classes can be used in the Template.html file, or they can be added dynamically at runtime within the
Source.js/ts file.
.TcHmi_Controls_FrameworkPrj1_FrameworkControlJs1-template
{
width: 100%;
height: 100%;
}
Within the Template.html file, a CSS class is assigned via the HTML attribute "class":
<div class="TcHmi_Controls_FrameworkPrj1_FrameworkControlJs1-template tchmi-box">
</div>
The class "tchmi-box" sets CSS properties to facilitate element positioning and can be used with
all positioned HTML elements.
The dynamic use of a CSS class within Source.js can be realized via the jQuery function ".addClass()", for
example:
this.__elementTemplateRoot.addClass('TcHmi_Controls_FrameworkPrj1_FrameworkControlJs1-my-custom-
class');
Overwriting CSS of controls

Within the CSS files it is possible to overwrite the appearance of embedded TwinCAT HMI controls. For
example, if you want to change the appearance of an embedded button within a control, you can do this by
applying the CSS styles of the button.
Please ensure that all buttons are not inadvertently assigned this appearance and that the CSS file of the
general button does not overwrite that of the embedded control. Both can be achieved by so-called
descendant selectors (spaces in CSS):
.TcHmi_Controls_FrameworkPrj1_FrameworkControlJs1 .TcHmi_Controls_Beckhoff_TcHmiButton {
color: #4794da;
}
.TcHmi_Controls_FrameworkPrj1_FrameworkControlJs1 .TcHmi_Controls_Beckhoff_TcHmiButton.down {
color: #000000;
}
All main elements of a control are assigned the control name (extended by the namespace) as CSS class
name (here TcHmi_Controls_FrameworkPrj1_FrameworkControlJs1). If this is attached before the
style of the control to be overwritten, the new appearance in the example only applies to buttons below the
framework control.
CSS selectors are always read from right to left:

• First example: Main element of the button (".TcHmi_Controls_Beckhoff_TcHmiButton") if it is
located under (" ") of FrameworkControlJs1
(".TcHmi_Controls_FrameworkPrj1_FrameworkControlJs1").
• Second example: Element with class down (".down") if it is the main element of the button
(".TcHmi_Controls_Beckhoff_TcHmiButton"), if it is below (" ") of FrameworkControlJs1
(".TcHmi_Controls_FrameworkPrj1_FrameworkControlJs1").
1300 Version: 2.5.1 TE2000

Framework
Control.ts/js
A framework control requires JavaScript code or TypeScript code.
Browsers cannot execute TypeScript, so an additional compilation step turns TypeScript code into
corresponding JavaScript code. TypeScript extends the syntax of JavaScript with information about data
type and access rights.
JavaScript code is written directly in the Control.js file.
Both file types (Control.js and Control.ts) define the base framework for the implementation of a framework
control and can be extended flexibly. See also Creating a control [} 1279].
Programming conventions
The programming conventions provide a base for standardizing framework controls. They are used to
distinguish between internal and external access.
• Member variables are marked with the prefix"__" and in Camel case:
this.__myVar = …;
• Functions with external access (Engineering: setter/getter functions) are identified without prefix and in
Camel case:
setMyVar() { /* … */ }
• Internal functions are marked with the prefix "__" and in Camel case:
__processMyVar() { /* … */ }
Source code analysis with eslint
The project directory contains a file .eslintrc.json. This can be used to enter rules for the source code
analysis tool eslint for all JavaScript and also TypeScript files. By default a few rules are already active there,
which can detect actual program errors. The documentation under https://eslint.org/docs/rules/ lists all
possible rules in detail.
If you make changes in the Control.js file and the framework control is already associated with an
HMI project, you must then carry out a project build [} 1280] of the framework control to apply the
changes. A corresponding JavaScript file is automatically created from the TypeScript files.
Control life cycle

The control life cycle describes which system function of the control is called by the system at which time. In
the control life cycle, a distinction is made as to whether the control is on an HMI page for which preloading
is activated.
The basic control life cycle is described in the following diagram:
Explanations:
1. The constructor is called during control instantiation.

2. The PrevInit function is called after the constructor and before the attribute setter functions are called.
3. The attribute setter functions are called after the PrevInit function.
4. The init function is called after the attribute setter functions. At this point, the control attributes are ini-
tialized by the attribute setter functions and have valid values.
5. The Attach function is called after the Init function, once the control has been added to the DOM on
the HMI page.
TE2000 Version: 2.5.1 1301

Framework
6. The Detach function is called after a control has been removed from the DOM of the HMI page (e.g.
during page switching).
7. The Destroy function is called after the control has been removed from the DOM of the HMI page, so
that the system can destroy the controls. In addition, the Destroy function can be called explicitly at
another point (for example, when subordinate controls elements are destroyed).
HMI page: Preload disabled
Normally, preloading of an HMI page is disabled ("Preload this partial: false" as setting for a content file),
which means that the controls are not stored in the browser cache. This increases the speed of the initial
HMI loading process, but it can lead to a reduction in the loading speed of individual HMI pages on which
many controls are instantiated. Memory consumption is also reduced because the pages are no longer in
memory when they are not active.
functions, the Init function and the Attach function. As soon as the page is unloaded (e.g. when switching to
another page), the Detach function is called, followed by the Destroy function. The life cycle of the controls
starts again when the HMI page is loaded.
HMI page: Preload enabled
If preloading is enabled for an HMI page ("Preload this partial: true" as setting for a content file), the controls
are stored in the browser cache. This increases the loading speed of a single HMI page, but it can lead to a
reduction in the initial loading process of the HMI. Furthermore, memory consumption is increased because
all preloaded pages are always in memory, even if they are never activated.
In this case, the constructor of the control is called as soon as the HMI is initially loaded. This is followed by
the PrevInit function, the attribute setter functions and the init function. The Attach function of the control is
not called until the HMI page on which the control is instantiated is loaded. The Detach function is called as
soon as the HMI page is unloaded. The Destroy function is not called automatically subsequently. The
control remains in the browser cache. When the HMI page is reloaded, the Attach function is called directly.
1302 Version: 2.5.1 TE2000

Framework
HMI page: KeepAlive enabled
If KeepAlive is enabled for an HMI page ("KeepAlive this partial: true" as setting for a content file), the
controls are kept in the browser cache. This increases the loading speed of a single HMI page if it is called
several times. The controls of a page are created when the page is accessed for the first time. They are
retained when the page is exited. This only slightly increases memory consumption, since only those pages
remain in memory that were enabled once.
Pages with KeepAlive are therefore kept in memory similar to preload when they are no longer needed. In
contrast, these pages are not loaded initially. This ensures fast loading of the entire application.
functions and the init function. The Attach function of the control is not called until the HMI page on which the
control is instantiated is loaded. The Detach function is called as soon as the HMI page is unloaded. The
Destroy function is not called automatically subsequently. The control remains in the browser cache. When
the HMI page is reloaded, the Attach function is called directly.
Base framework
The Source.js/ts file already contains preconfigured source code that is required for various functions of the
framework control and may not be modified in some cases. A framework control corresponds to a class, of
which concrete instances (objects) are created at a later time.
Project information
Better support of IntelliSense in JavaScript (not necessary when using TypeScript):

/// <reference path="../../Packages/Beckhoff.TwinCAT.HMI.Framework.12.742.0/runtimes/native1.12-
tchmi/TcHmi.d.ts" />
This comment line includes files, allowing better IntelliSense support within the Control.js file. These lines are
not required for using the control.
Information about the framework control:

/*
* Generated 2/15/2020 10:57:13 AM
* Copyright UserXY 2020
* ........................
*/
These comment lines contain information about the creation of the framework control, which is generated
automatically when the framework control project is created. These lines are not required for using the
control.
Do not change the base structure of the framework control within Control.js/ts. There is a risk that
the control can no longer be used.
TE2000 Version: 2.5.1 1303

Framework
Base structure of a TypeScript framework control

module TcHmi {
export module Controls {
export module FrameworkPrj1 {
export class FrameworkPrj1Control extends TcHmi.Controls.System.TcHmiControl {
constructor(element: JQuery, pcElement: JQuery, attrs:
TcHmi.Controls.ControlAttributeList) {
super(element, pcElement, attrs);
}
}
registerEx('FrameworkPrj1Control', 'TcHmi.Controls.FrameworkPrj1',
FrameworkPrj1.FrameworkPrj1Control);
}
}
Base structure of a JavaScript framework control
The base structure of version 1.8 and 1.10 controls [} 1251]is still supported. However, it is recom-
mended to use TypeScript or this Javascipt syntax for new controls:
let Controls;
(function (/** @type {globalThis.TcHmi.Controls} */ Controls) {
let FrameworkPrj1;
(function (FrameworkPrj1) {
class FrameworkControlJs1 extends TcHmi.Controls.System.TcHmiControl {
constructor(element, pcElement, attrs) {
}
FrameworkPrj1.FrameworkControlJs1 = FrameworkControlJs1;
})(FrameworkPrj1 = Controls.FrameworkPrj1 || (Controls.FrameworkPrj1 = {}));
Controls.registerEx('FrameworkControlJs1', 'TcHmi.Controls.FrameworkPrj1',
FrameworkPrj1.FrameworkControlJs1);
})(Controls = TcHmi.Controls || (TcHmi.Controls = {}));
})(TcHmi || (TcHmi = {}));
This code defines the base structure of a framework control and is required for using the control at runtime.
In the event of invalid changes, the control can no longer be used properly.
Definition of the namespaces
Within Control.js, various namespaces are referenced and defined, which are required for the framework.
Many of these definitions are unnecessary in TypeScript.
TcHmi
(function (/** @type {globalThis.TcHmi} */ TcHmi) { })(TcHmi);
This function makes the control known within the "TcHmi" namespace. The framework cannot be accessed
outside this namespace.
Controls
(function (/** @type {globalThis.TcHmi.Controls} */ Controls) { })(Controls = TcHmi.Controls ||
(TcHmi.Controls = {}));
This function makes the control known within the "Controls" namespace. This namespace contains all
TwinCAT HMI controls (System [} 690], Beckhoff [} 119], Custom).
The control is registered in the control namespace which is required for the Engineering of the TwinCAT
HMI.
1304 Version: 2.5.1 TE2000

Framework
Controls.registerEx('FrameworkControlJs1', 'TcHmi.Controls.FrameworkPrj1',
FrameworkPrj1.FrameworkControlJs1);
Own namespace
var FrameworkPrj1;
(function (FrameworkPrj1) { })(FrameworkPrj1= Controls.FrameworkPrj1 || (Controls.FrameworkPrj1 =
{}));
This function defines the namespace for user-specific controls and makes the control known within the
namespace. The concrete framework control object is defined in the FrameworkPrj1 namespace and then
assigned to the FrameworkPrj1 namespace:
FrameworkPrj1.FrameworkControlJs1 = FrameworkControlJs1;
Control class
A framework control is defined by a JavaScript class within the FrameworkPrj1 namespace. The logic is
implemented in this section (Constructor [} 1305], System functions [} 1306], Attributes [} 1308], Functions
[} 1311], Events [} 1313], Access rights [} 1314]).
let FrameworkPrj1;
(function (FrameworkPrj1) {
}

}
For the framework control the class of the base control [} 1281] (usually TcHmiControl [} 690]) defined in
Description.json [} 1279] is specified. The framework control inherits all properties of the defined base
control.
The framework control is defined by a class within which the user-specific code of the framework control is
implemented.
When a specific instance (JavaScript object) is created by the class, the instance has all the properties of the
class.
Constructor
Each TypeScript framework control contains a constructor that is structured as follows:
constructor(element: JQuery, pcElement: JQuery, attrs: TcHmi.Controls.ControlAttributeList) {
}
}
Each JavaScript framework control contains a constructor that is structured as follows:

}
}
The parameter values of the constructor are only used internally and forwarded to the base constructor call.
With JavaScript controls, the internal variables of the control (member variables) are initialized with
"undefined" within the constructor. Initialization at this point is not necessary, but is recommended for better
clarity.
TE2000 Version: 2.5.1 1305

Framework
System functions
Framework controls have functions that are called by the system at different times. Each system function
calls the respective system function of the base class (TcHmiControl [} 690]) via the "super" object.
PrevInit function
TypeScript:
protected __elementTemplateRoot!: JQuery;
public __previnit() {

super.__previnit();
}
If variables (such as __elementTemplateRoot) are written with the final value in PrevInit, they do not
need the type undefined. In this case the type JQuery is sufficient. To notify TypeScript that these
variables are still not used uninitialized, the Definite Assignment Assertion operator must be used with an
exclamation mark.
JavaScript:
__previnit() {

super.__previnit();
}
The PrevInit function is automatically called after the system calls the constructor [} 1305] and before the
attribute setters of each attribute are called. Accordingly, the member variables of the attributes have the
value "undefined" when the PrevInit function is called. Within the PrevInit function, the references [} 1296] to
the HMTL elements are created from the Template.html file.
Init function
TypeScript:
public __init() {
super.__init();
}
JavaScript:
__init() {
super.__init();
}
The Init function is called automatically by the system after the attribute setters of the individual attributes
have been called. Accordingly, when the Init function is called, the member variables of the attributes already
have the values that were passed to the control or defined internally as default values.
Attach function
TypeScript:
1306 Version: 2.5.1 TE2000

Framework
public __attach() {
/**
*/
/**
*/
super.__attach();
}
JavaScript:
__attach() {
/**
*/
/**
*/
super.__attach();
}
The Attach function is automatically called by the system after the current control instance has been added
to the DOM of the HTML document. Within the Attach function, all calculations should be performed that are
only available while the control instance is in the DOM (e.g. .getBoundingClientRect() of DOM elements
or .width() of jQuery elements). The opposite of the Attach function is the Detach function.
Detach function
TypeScript:
public __detach() {
/**
*/
super.__detach();
}
JavaScript:
__detach() {
/**
*/
super.__detach();
}
The system automatically calls the Detach function after the current control instance has been removed from
the DOM of the HTML document. In the Detach function, all functions that are no longer required after the
control instance has been removed from the DOM are to be disabled. The opposite of the Detach function is
the Attach function.
Destroy function
TypeScript:
public destroy() {
if (this.__keepAlive) {
return;
TE2000 Version: 2.5.1 1307

Framework
}
/**
* Free resources
*/
super.destroy();
}
JavaScript:
destroy() {
return;
}
/**
* Free resources like events etc.
*/
super.destroy();
}
The system automatically calls the Destroy function when the control instance is no longer used (after the
Detach function). If the control is on an HTML page where "Preload Partial" is enabled, the Destroy function
is not called because the page is still saved in the browser cache. Within the Destroy function, the elements
that were created during runtime are to be destroyed.
This function can also be called explicitly (for example when child controls are destroyed).
Attributes
Framework control attributes [} 1285] defined in Description.json must be initialized within Control.js, and the
corresponding setter, getter and process methods must be implemented. The setter and getter methods
provide central access to the attribute.
The following examples refer to the following attribute, which is defined in Description.json under "attributes
[} 1285]":
"attributes": [
{
"visible": true,
"description": "",
"readOnly": false,
"bindable": true,
"heritable": true,
}
]
Initialization (TypeScript)
The declaration of the attributes is implemented as a separate line in TypeScript. Note that the data type
must be defined for these attributes. Attributes are set late in the life cycle, so they should have undefined
as a possible additional data type. The keyword protected specifies that only derived controls may access
these variables, but not foreign controls.
protected __value: boolean | undefined;
1308 Version: 2.5.1 TE2000

Framework
Initialization (JavaScript)
The attributes are initialized in the constructor of the framework control. Initialization is not required here
(variables without keywords are automatically initialized in JavaScript when used), but is recommended for
better clarity.
Member variables and functions that cannot be accessed from outside are prefixed with "__".
Setter method
The setter method of an attribute is only required for attributes that are not set to "readOnly [} 1289]" (all
attributes that can be set via Engineering). Like the definition, the setter method must be named in the
"propertySetterName [} 1286]".
TypeScript:
/**
* @param valueNew the new value or null
*/
public setValue(valueNew: boolean | null): void {
let convertedValue = TcHmi.ValueConverter.toBoolean(valueNew);

description.json
convertedValue = this.getAttributeDefaultValueInternal('Value') as boolean;
}
return;
}


TcHmi.EventProvider.raise(this.__id + '.onPropertyChanged', { propertyName: 'Value' });

}
JavaScript:
/**
* @param {boolean} valueNew the new value or null
* @returns {void}
*/
setValue(valueNew) {
var convertedValue = TcHmi.ValueConverter.toBoolean(valueNew);

description.json
convertedValue = this.getAttributeDefaultValueInternal('Value');
}
return;
}

TE2000 Version: 2.5.1 1309

Framework


}
Within the setter method, the parameter that was passed is first converted into the expected data type by
Engineering using the framework API function "ValueConverter". If an invalid value is passed to the
ValueConverter or if the conversion of the value fails, the function returns "null". In this case the
DefaultValueInternal [} 1290] from Description.json is used. The system then checks whether a value
change to the last stored value of the attribute on the member variable has taken place. If no value change
has taken place, the setter is exited. If a value change has taken place, the value of the member variable for
the attribute is overwritten and the system is notified that a value change has taken place. Finally, the
Process method is called for the value in which the response to the value change takes place.
If the attribute contains an object (i.e. no base data type such as string, Boolean, number), it can
optionally contain symbol expressions.
A detailed description of the adjustments for this case can be found in the article Handling of symbol
expressions in objects [} 1324].
The function "tchmi_equal" should be used to check for a change in value. The JS comparison op-
erator "===" can only check the basic JavaScript data types but not complex JSON objects.
Getter method
The getter method of an attribute returns the current value of the attribute and is required for each attribute.
Like the definition, the getter method must be named in the "propertyGetterName [} 1286]".
TypeScript:
/**
*/
public getValue () {
}
JavaScript:
/**
* @returns {boolean}
*/
getValue () {
}
Process method
The Process method is always called when the attribute value has been changed. The response to the value
changes is to be implemented in the process method. For example, depending on a Boolean value elements
can be switched visible or invisible, or a list can be created dynamically based on a transferred JSON object.
TypeScript:
/**
*/
protected __processValue() {
// ...
}
JavaScript:
1310 Version: 2.5.1 TE2000

Framework
/**
* @returns {void}
*/
__processValue() {
// ...
}
Functions
Framework control functions [} 1292] defined in Description.json must be defined and implemented in
Control.js/ts. The function must be named like the "name [} 1292]" of the function in Description.json.
Function without parameter values
A function without parameter values is defined in Description.json as follows:

"functions": [
{
"visible": true,
"params": [],
"type": null,
"heritable": true,
"searchTerms": []
}
]
This results in the following code:
TypeScript:
/**
*/
public customFunction(): void {
/**
*/

}
JavaScript:
/**
* @returns {void}
*/
customFunction() {
/**
*/

}
Within the function, any execution logic of the function can be implemented.
Function with return value
The functions enables a return value to be returned the calling point in Engineering. The data type [} 87] of
the return value is defined in Description.json under "type".
"functions": [
{
"name": "customFunction2",
"displayName": "customFunction2",
TE2000 Version: 2.5.1 1311

Framework
"visible": true,
"params": [ ],
"heritable": false,
"searchterms": []
}
]
Within the function in Control.js/ts it is then possible to return a value of the corresponding type.
TypeScript:
/**
* @description This is the call of the api function 'customFunction2'.
*/
public customFunction2 (): boolean {
/**
*/

return true;
}
JavaScript:
/**
*/
customFunction2 () {
/**
*/

return true;
}
Function with parameter values
A function with parameter values [} 1293] is defined in Description.json as follows:

"functions": [
{
"name": "customFunction3",
"displayName": "customFunction3",
"visible": true,
"params": [
{
"visible": true
},
{
"visible": true
}
],
"type": null,
"heritable": false,
"searchterms": []
}
]
1312 Version: 2.5.1 TE2000

Framework
The function is implemented in Control.js/ts like a normal function. The parameter values are transferred with
the function call. The parameters must be checked for validity before they are used, similar to the attribute
setters [} 1308].
TypeScript:
/**
*/
public customFunction3(functionParameter1: number, functionParameter2: boolean): void {
/**
*/
let convertedParameter1 = TcHmi.ValueConverter.toNumber(functionParameter1);
return;
}
let convertedParameter2 = TcHmi.ValueConverter.toBoolean(functionParameter2);

return;
}

}
JavaScript:
/**
* @param {number} functionParameter1
* @param {boolean} functionParameter2
* @returns {void}
*/
customFunction3(functionParameter1, functionParameter2) {
/**
*/
var convertedParameter1 = TcHmi.ValueConverter.toNumber(functionParameter1);
return;
}
var convertedParameter2 = TcHmi.ValueConverter.toBoolean(functionParameter2);

return;
}

}
Events
Framework control events defined in Description.json should be triggered in Control.js/ts. The name of the
event must be named like the "name [} 1293]" of the event in Description.json. An event can be triggered in
different situations, e.g. when a certain record changes (see ".onDataChanged [} 235]" in the data grid
[} 207]).
TE2000 Version: 2.5.1 1313

Framework
An event is triggered in Control.js/ts via the EventProvider of the framework. The framework API function
"EventProvider.raise()" is used for this purpose. When the event is triggered, the concrete control instance
must be identified with "this.__id".
// raise .onMyCustomEvent event
TcHmi.EventProvider.raise(this.__id + '.onMyCustomEvent');
Optionally, parameters can be passed to the event callbacks when the event is triggered.
// declare parameter: type anything
var myParameterObject = 42;
// raise .onMyCustomEvent event with event parameters
TcHmi.EventProvider.raise(this.__id + '.onMyCustomEvent', myParameterObject);
The response to the triggered events can take place in Engineering via the Properties window [} 58] or via
the registration of the event in a Code Behind file [} 1222].
If allowPreventDefault is allowed in the event definition [} 1293], the myParameterObject

should offer preventDefault as a function. All DOM and jQuery event objects meet this require-
ment, for example. This function is called if the user has set the option for this event in Engineering.
Access rights
User-specific access rights [} 1295] defined in Description.json and configured in engineering [} 58] should
be checked and evaluated in Control.js/ts. Depending on the user-specific access rights [} 887], specific
elements can be switched visible or invisible or enabled or disabled, for example.
The evaluation of the configured access rights is performed via the framework API function
"TcHmi.Access.checkAccess()". The current instance of the control is passed to the function (this) and the
name of the right to be checked, which must correspond to the definition in Description.json.
// check user access of "myCustomRight" that is defined in the description.json
if (TcHmi.Access.checkAccess(this, 'myCustomRight') === true) {
// current user has the rights to do this
// process actions with the right

// show elements, enable buttons, etc.
} else {
// Current user has no rights to do this
// process actions without the rights

// hide elements, disable buttons, etc.
}
available in normal live view. From version 1.12 a live view with authentication is offered.
CustomDatatype.Schema.json
Within a framework control project, user-specific and complex data types can be implemented if the data
type is not covered by a standard data type. In principle, any data structures can be transferred as objects
without the need for a user-specific data type. A user-specific data type is required if an editor is to be
provided for generating the data in Engineering. The data editor is generically based on a given JSON
schema.
The following user-specific data types can be implemented:

• Objects [} 1317] with fixed properties
• Array [} 1319] of any data types
• Enumerations [} 1321]
• Limitation [} 1322] of several allowed data types
1314 Version: 2.5.1 TE2000

Framework
The usage within the TypeScript/JavaScript file is described in a separate documentation section [} 1323].
Creating a custom data type

Add a new element (New item...) in the TypeDefinitions folder under Schema.
Add a new JSON file or JSON schema file to the project.
TE2000 Version: 2.5.1 1315

Framework
Reference the schema file in Description.json under "dataTypes [} 1294]". Note that user-specific data types
are assigned to the "Framework" category.
"dataTypes": [
{
}
]
You can then use the user-specific data type within Description.json.
"type": "tchmi:framework#/definitions/CustomDatatype
If the framework control is already referenced in an HMI project, a project build (see First Steps
[} 1225]) must then be executed and the HMI project reloaded so that the new data type is included
in the type descriptions of the HMI project.
Implementing a custom data type

The configuration of a JSON schema for the framework follows a certain structure.
{
"definitions": {
"{DatatypeName}": {
"title": " {DatatypeName} ",
"type": "array",
//...
}
}
}
Each JSON schema contains a definition that describes the data type ({DatatatypeName}). The definition of
the data type contains the specification (type) and the description of the data type through attributes
depending on the respective data type.
1316 Version: 2.5.1 TE2000

Framework
Objects
Objects can contain any properties. A property is described under Properties and can be refined through
optional metadata (propertiesMeta).
The following JSON schema describes an object with two properties.

{
"definitions": {
"CustomDatatype": {
"type": "object",
"propertiesMeta": [
{
"name": "axisName",
"category": "Name",
"description": "",
},
{
"description": "",
"color": "#4794da"
}
}
],
"properties": {
"axisName": {
"type": "string"
},
"axisColor": {
}
},
}
}
}
This results in the following generic data editor in Engineering.
TE2000 Version: 2.5.1 1317

Framework
Explanations
propertiesMeta:
The metadata of the properties are optional. They describe the display within the generic data editor. The
metadata are described by the following properties:
• name {String}: Internal name of the property, see "name [} 1285]" in Description.json.
Note: The name must match the name under the properties.
• category {String}: Name of the category under which the property is displayed in the generic data
editor, see "category [} 1288]" in Description.json.
• displayName {String}: Name of the property displayed in the generic data editor, see "displayName
[} 1286]" in Description.json.
• displayPriority {Number}: Priority of the display, see "displayPriority [} 1287]" in Description.json.
• description {String}: Description of the property, see "description [} 1288]" in Description.json.
• defaultValue: Default value used initially in engineering, see "defaultValue [} 1290]" in
Description.json.
• defaultValueInternal: Internal default value, see "defaultValueInternal [} 1290]" in
Description.json.
properties:
The name and data type of the object properties are described under Properties. The name is determined by
the name of the property. The data type can be described as follows:
• type {string}: Default JSON data type of the property, or
• $ref {string, reference}: Reference to a framework data type. This can be implemented within the
project or taken from the existing data type descriptions of the framework.
1318 Version: 2.5.1 TE2000

Framework
required:
The required properties are listed under "required". The list is based on the internal name. If a property of the
object that is set to required is not set in Engineering, the generic data editor displays a warning.
Arrays
Arrays can be created from simple data types and complex objects.
Array of simple data types
Simple data types are specified within the "items" property under the "type" data type property. The following
schema defines an array of strings.
{
"definitions": {
"CustomDatatype": {
"type": "array",
"items": {
"type": "string"
}
}
}
}
This schema generates the following generic data editor in Engineering.
The generic data editor displays the array elements on the left-hand side under the name of the respective
data type (in the example: string). If a self-defined name is to be displayed instead, an object with a property
of the type of the data type must be selected instead of the simple data type, and the "displayName" of the
property must be set in the metadata.
TE2000 Version: 2.5.1 1319

Framework
Array of complex data types
Complex data types are specified in the property "items" under the reference property "$ref". The following
schema defines an array of objects of data type "CustomDatatype". This data type was previously
implemented as Object [} 1317].
{
"definitions": {
"MyArray": {
"title": "MyArray",
"type": "array",
"items": {
"$ref": "tchmi:framework#/definitions/CustomDatatype"
}
}
}
}
Furthermore, it is possible to describe the object directly within the array definition. The following schema
describes the same array with the definition of the object within the property "items".
{
"definitions": {
"MyArrayInlineObject": {
"title": "MyArrayInlineObject",
"type": "array",
"items": {
"type": "object",
"title": "CustomObject",
"description": "Defines a custom object in the array.",
"propertiesMeta": [
{
"name": "axisName",
"category": "Name",
"description": "",
},
{
"description": "",
"color": "#4794da"
}
}
],
"properties": {
"axisName": {
"type": "string"
},
"axisColor": {
}
},
}
}
}
}
Both schema files generate the following generic data editor in Engineering.
1320 Version: 2.5.1 TE2000

Framework
Enumerations
Enumerations can contain any elements for the data type string. In the Engineering, enumerations are not
displayed in the generic data editor, but in the combo box in the Properties window. The permissible values
of the enumeration are defined in the property "enum" in an array.
The following schema defines an exemplary enumeration.
{
"definitions": {
"MyEnum": {
"title": "MyEnum",
"type": "string",
"enum": [ "MyValue1", "MyValue2", "MyValue3", "MyValue4" ]
}
}
}
This results in the following display in Engineering.
TE2000 Version: 2.5.1 1321

Framework
Restrict permitted data types

User-specific data types can be restricted so that only certain data types can be transferred. As a result,
when creating a binding [} 103] only the symbols corresponding to the permitted data types are displayed.
The following schema defines an exemplary restriction of permissible values (oneOf). Only values that have
the data type "Time" or "TimeSpan" are permitted.
{
"definitions": {
"MyConstrainedDatatype": {
"oneOf": [
{
"title": "Time",
"$ref": "tchmi:general#/definitions/DateTime"
},
{
"title": "Timespan",
"$ref": "tchmi:general#/definitions/TimeSpan"
}
]
}
}
}
The display in Engineering is normally an attribute. However, only bindings to symbols that correspond to the
permitted data types can be created.
1322 Version: 2.5.1 TE2000

Framework
16.2.2.2.4 Extended functionalities

Some advanced features and tips for developing controls are explained here.
Handling of complex data types

In many cases a control is intended to work with a complex data type, e.g. from the PLC. Alternatively,
control configurations are to be created as an object or array. To do this, a JSON schema [} 1314] must be
created and referenced [} 1294] accordingly in description.json.
However, the information in the schemas cannot be used directly in TypeScript. To do this, a TypeScript
interface must be defined manually in your own source code.
A namespace must be added in parallel to module of the project name. The TypeScript interface can then
be defined here.
module TcHmi {
export module Controls {
export module FrameworkPrj1 {
// more here
}
}
export namespace FrameworkPrj1 {

export interface plcValue {
/** Count Down on rising edge */
CountDown: boolean;
/** Load Start Value */
LOAD: boolean;
/** Start Value */
PV: number;
}
}
registerEx('FrameworkPrj1Control', ...
}
}
The data type is now known under the name TcHmi.Controls.FrameworkPrj1.plcValue. Since the
control is in the same execution context (scope), the type with the identifier FrameworkPrj1.plcValue
can be accessed.
An example of an attribute setter and process function [} 1308] is shown below:

protected __value: FrameworkPrj1.plcValue | undefined;
public setValue(valueNew: FrameworkPrj1.plcValue | null) {

let convertedValue = TcHmi.ValueConverter.toObject<typeof valueNew>(valueNew);
description.json
convertedValue = this.getAttributeDefaultValueInternal('Value') as FrameworkPrj1.plcValue;
}
return;
}
}
protected __processValue() {
if (this.__value) {
this.__value.CountDown; // known to TypeScript
TE2000 Version: 2.5.1 1323

Framework
this.__value.PV; // even tooltip “Start Value” is shown

}
}
Custom control administration objects can be defined and used in the same way.
Handling of symbol expressions in objects

A control setter can contain objects that contain symbol expressions. The control must enable this for each
attribute individually via the property allowSymbolExpressionsInObject [} 1289]. In this case this is shown in
Visual Studio as follows:
For this purpose, the source code that deals with attribute handling [} 1308] must be adapted accordingly.
First an existing ObjectResolver has to be located. If successful, this will be destroyed. Then a new
ObjectResolver with the new object (which may contain the symbol expression) is created and saved. At the
same time a watch function is linked, which is called initially and when changes in referenced symbols
occur.
This watch function checks whether the control is currently visible. If this is not the case, the ObjectResolver
is put into a waiting state. If the control is made visible later, all ObjectResolvers are reactivated by the
system. If an error occurs, processing is aborted with an error message.
Processing is terminated when the new value is identical to the old value. If the value is changed, the new
value is saved, and the system is notified about the change and responds to it.
Instead of the generic type object, a more specific TypeScript type definition [} 1323] can be used.
protected __value: object | undefined;
/**
* @param valueNew the new value or null
*/
public setValue(valueNew: object | null): void {
let convertedValue = TcHmi.ValueConverter.toObject<object>(valueNew);

// if we have no value to set we have to fall back to the defaultValueInternal from descript
ion.json
convertedValue = this.getAttributeDefaultValueInternal('Value') as object;
}
let resolverInfo = this.__objectResolvers.get('value');
if (resolverInfo) {
if (resolverInfo.watchDestroyer) {
resolverInfo.watchDestroyer();
}
resolverInfo.resolver.destroy();
}
let resolver = new Symbol.ObjectResolver(convertedValue);
this.__objectResolvers.set('value', {
resolver: resolver,
watchCallback: this.__onResolverForMyAttributeWatchCallback,
watchDestroyer: resolver.watch(this.__onResolverForMyAttributeWatchCallback)
});
}
/**
* The watch callback for the value object resolver.
*/
1324 Version: 2.5.1 TE2000

Framework
protected __onResolverForMyAttributeWatchCallback = (data: Symbol.ObjectResolver.IWatchResultObject<

Transform[]>) => {
if (this.__isAttached === false) { // While not attached attribute should only be processed once
during initializing phase.
this.__suspendObjectResolver('value');
}
if (data.error !== TcHmi.Errors.NONE) {

if (TCHMI_CONSOLE_LOG_LEVEL >= TcHmi.System.LOG_LEVEL.Error) {
TcHmi.Log.error('[Source=Control, Module=TcHmi.Controls.System.TcHmiControl, Id=' + this
.getId() + ', Attribute=Value] Resolving symbols from object failed with error: ' + TcHmi.Log.buildM
essage(data.details));
}
return;
}
if (tchmi_equal(data.value, this.__value)) {
return;
}
this.__value = data.value;
};
public __processValue() {
// ...
}
Handling of control inheritance

If several of your own controls require an identical part of the source code, it is advisable to put them on a
common inheritance basis. In this way, common attributes could be implemented in a base class and then
used in all derived controls.
Each custom control can be seen in the context of inheritance. All controls are at least derived from the base
control TcHmiControl. From this, each control inherits the base functionality such as positioning (including
Left [} 697], Top [} 697], Width [} 698], Height [} 699]) and the handling of the life cycle [} 1301].
Inheritance is defined in two places in a control. First in the attribute base [} 1281] in the metadata of
description.json. This inheritance is also defined in the TypeScript/JavaScript source code in the Base
framework [} 1303] of the control.
Methods and properties within the source code are marked in TypeScript either as public, protected or
private. Public resources can be used/accessed from any location. These are therefore part of the public
interface (API) of a control. Protected resources, on the other hand, are only intended for derived classes.
In contrast, private resources are really only accessible to the class itself.
Dynamic control generation

Controls can create additional foreign controls and use them in their own context. This enables the system to
respond to events of these child controls.
Example using the ControlFactory API
In this example the API of the ControlFactory is used. When the control is created, the child control is
created and attached to its own representation.
By defining the parent, the child control is embedded in its own life cycle, so that the child control is
automatically managed at the same time.
In addition, an event handler is registered to respond to events of the child control. Note that this event
registry must be cleaned up in a dedicated Destroy action in order to fix a memory leak.
TE2000 Version: 2.5.1 1325

Framework
See also Control life cycle [} 1301]

protected __childOnPressedDestroyEvent: DestroyFunction | undefined;
public __init() {
super.__init();
let childName = this.__id + '_startAction';

let myButton = TcHmi.ControlFactory.createEx(
'TcHmi.Controls.Beckhoff.TcHmiButton',
childName,
{
'data-tchmi-top': 25,
'data-tchmi-left': 250,
'data-tchmi-width': 200,
'data-tchmi-height': 50,
'data-tchmi-text': 'Start Action',
'data-tchmi-background-color': {
'color': 'rgba(55, 55, 55, 1)'
},
'data-tchmi-state-symbol': '%s%PLC1.MAIN.testBool%/s%' // Binding a symbol to an attribute
during control creation
},
this // marks our control as the parent
);
if (myButton) {
// Append to our DOM. This will be detected by the framework and its .__attach function will
be called automatically.
this.__element.append(myButton.getElement());
this.__childOnPressedDestroyEvent = TcHmi.EventProvider.register(childName + '.onPressed', ()
=> {
// do something
});
// Binding a symbol to an attribute after control creation

Binding.createEx2('%s%PLC1.MAIN.anotherBool%/s%', 'StateSymbol', myButton);
}
}
public destroy() {
return;
}
if(this.__childOnPressedDestroyEvent){
this.__childOnPressedDestroyEvent();
}
super.destroy();
}
Example of a child control embedded in the template
Child controls can also be embedded directly in the Template [} 1296] of a control. The same syntax is used
for this as is used in engineering to represent a control in code. The only difference is the {Id} placeholder,
which is replaced by the actual ID when the control is compiled.
It is mandatory to use the {Id} placeholder, otherwise it would be impossible to create more than one
instance of the control. The compilation of the second instance would run into an error because it would try
to create a control with a name already assigned.
<div class="TcHmi_Controls_Example-template">
<div id="{Id}_startAction" data-tchmi-type="TcHmi.Controls.Beckhoff.TcHmiButton"
data-tchmi-top="25" data-tchmi-left="250"
data-tchmi-width="200" data-tchmi-height="50"
data-tchmi-text="Start Action" data-tchmi-state-symbol="%s%PLC1.MAIN.testBool%/s%"
>
<script data-tchmi-target-attribute="data-tchmi-background-color" type="application/json">
{
"color": "rgba(55, 55, 55, 1)"
}
</script>
</div>
</div>
The instance of the child control can then be accessed in __previnit or __init of the control:
let button = Controls.get<TcHmi.Controls.Beckhoff.Button>(this.getId() + '_startAction');
1326 Version: 2.5.1 TE2000

Framework
16.2.2.3 Functions
A function consists of the file containing the source code and a JSON file with corresponding metadata.
These two files do not necessarily have to be created in a separate folder. Depending on the number of
functions, it may be useful to group them together in a folder.
A function can be created based on TypeScript or JavaScript. Both have the same technical options and are
very similar in terms of programming. Due to the better Visual Studio programming support offered by Visual
Studio, TypeScript should be selected for new functions.
To create a new function, right-click on the destination folder in the context menu and select Add new Item.
A file for TypeScript/JavaScript is now created, along with a file containing the matching metadata.
The files are identical to functions that can be created within an HMI project. We therefore refer to the
documentation for these functions [} 1218] here.
The metadata file must have a reference in Manifest.json [} 1275] within a framework package in order to be
able to use it.
TE2000 Version: 2.5.1 1327

Samples
17 Samples
17.1 Controls
17.1.1 Barchart
17.1.1.1 Version 1.10

https://infosys.beckhoff.com/content/1033/TE2000_TC3_HMI_Engineering/Resources/9692152075/.zip
17.1.1.2 Version 1.12

17.1.2 Combobox
17.1.2.1 Version 1.10

17.1.2.2 Version 1.12

17.1.3 Datagrid
17.1.3.1 Version 1.10

17.1.3.2 Version 1.12

17.1.4 Event Grid
17.1.4.1 Version 1.10

17.1.4.2 Version 1.12

1328 Version: 2.5.1 TE2000

Samples
17.1.5 Grid
17.1.5.1 Version 1.10

17.1.5.2 Version 1.12

17.1.6 Linechart
17.1.6.1 Version 1.10

17.1.6.2 Version 1.12

17.1.7 Scope
17.1.7.1 Version 1.12

[1.12.748.0]
17.1.8 Trend Line Chart
17.1.8.1 Version 1.10

17.1.8.2 Version 1.12

17.2 Recipe management
17.2.1 Version 1.10

TE2000 Version: 2.5.1 1329

Samples
17.2.2 Version 1.12

1330 Version: 2.5.1 TE2000

FAQ
18 FAQ
18.1 General
Which system requirements do I need for the TwinCAT HMI?
An overview of the system requirements can be found in the system requirements. [} 18]
Which browser can I use for the TwinCAT HMI client?
An overview of the recommended HTML5-capable browsers can be found in the system requirements [} 18].
Can I use projects from the TC3 PLC HMI (TF1800) in the TwinCAT HMI?
The use of projects created with the TC3 PLC HMI is not possible.
Is there a tutorial that will help me get started with TwinCAT HMI?
The QuickStart [} 29] offers a good introduction to the TwinCAT HMI.
Is there a training course for the TwinCAT HMI?
There are three different training courses for the TwinCAT HMI:
1. TR7050: Basics TwinCAT HMI (3 days).

2. TR7060: Extension of TwinCAT HMI Controls [} 1223] (1 day).
3. TR7065: Extension of TwinCAT HMI Server Extensions [} 1202] (1 day).
You will find an overview of the training courses and upcoming dates on our website.
Are there sample projects for the TwinCAT HMI?
An overview of the sample projects can be found in the chapter Samples [} 1328].
18.2 Server
How do I transfer the project to my target system?
Carry out the following steps to transfer the project to the target system:
1. Install the TwinCAT HMI Server (install TF2000) on the target system.
2. Start the TwinCAT HMI Server on the target system and assign an administrator password on the
configuration page of the server.
3. Perform a project publish [} 874] to the target system.
I have no access to the target system. Can I transfer the project offline?
A transfer of the project without access to the target system is possible. To do this, perform the following
steps:
4. Install the TwinCAT HMI Server (install TF2000) on the target system and on your engineering system.
5. Perform a project publish [} 874] on the TF2000 TwinCAT HMI Server on your engineering system.
6. Copy the entire contents of the folder:
Version 1.10: C:\ProgramData\Beckhoff\TF2000 TwinCAT 3 HMI Server
TE2000 Version: 2.5.1 1331

FAQ
Version 1.12: C:\ProgramData\Beckhoff\TF2000 TwinCAT 3 HMI Server\service\{TcHmiInstanceName}
7. Transfer the folder content to the target system (e.g. via USB stick).
8. Add the folder content to the following folder on the target system:
Version 1.10: C:\ProgramData\Beckhoff\TF2000 TwinCAT 3 HMI Server
Version 1.12: C:\ProgramData\Beckhoff\TF2000 TwinCAT 3 HMI Server\service\{TcHmiInstanceName}
9. Start the TwinCAT HMI Server on the target system.

10. To use encrypted communication via HTTPS, it is necessary for the server to issue a new certificate, as
this is created with a local system hash. To do this, open the configuration page from the server and
navigate to TcHmiSrv  Security.
11. Delete the existing entry at Certificate:
12. Confirm with OK.
1332 Version: 2.5.1 TE2000

FAQ
13. The server must then be restarted so that a new certificate can be generated. To do this, restart the
TcHmiSrv service or restart the current server instance via the configuration page.
ð You can now use the project.
The publish process failed due to a version difference. What can I do?
For a project publish, the server version (TF2000) on the target system must match the engineering version
(TE2000) (versions 1.8 and 1.10). Please observe the version overview [} 19].
I forgot the password of the user "__SystemAdministrator". What can I do?
If you have forgotten the password of the user "__SystemAdministrator", there are the following possibilities:
1. You have another user who is a member of the "__SystemAdministrators" group. Log in with this user
on the configuration page of the server and reset the password of the user "__SystemAdministrator".
2. Reset the server.
How can I reset the server?
To reset the server, perform the following steps:

1. Stop the server via the SysTray icon by clicking on "Shutdown".
2. Start the "TwinCAT HMI Server Factory reset" shortcut. Confirm the confirmation prompt with "Yes". The
server starts up briefly and performs a reset.
3. Restart the TwinCAT HMI Server. The server is now reset. The password of the user
"__SystemAdministrator" must be initialized again.
I cannot find the target server with the Discovery function in the Publish dialog. What can I do?
This can have the following causes:
1. The password of the user "__SystemAdministrator" was not initialized. For security reasons, the server
cannot be found using the discovery function.
◦ Solution 1: Enter the IP address of the destination server under connection settings. Click
"Validate Connection". In this case, the dialog for initializing the "__SystemAdministrator"
password in engineering opens.
◦ Solution 2: Initialize the user "__SystemAdministrator" on the target server.
2. The password of the user "__SystemAdministrator" has not been initialized and the server has been
starting for more than five minutes. The server must be restarted for security reasons.
◦ Solution: Connect to the target system, restart the server and initialize the user
"__SystemAdministrator".
3. There are connection problems. Check the steps in the question below.
TE2000 Version: 2.5.1 1333

FAQ
I can't connect to my target server. What can I do?
This can have the following causes:
1. There is no network connection to the system.

◦ Check the network connection to the system (e.g. using a ping command).
2. The system's firewall is blocking access.
◦ Check the firewall settings on the target system and enable the port on which the TwinCAT HMI
Server is running (e.g. port 1010 for http or 1020 for https).
3. The port that you want to use to access the server has not been released in the server.
◦ Add Port on the configuration page of the server.
How can I share an additional port on the server?
How to share additional ports on the server can be found here.
The server reports "License error". What can I do?
The TwinCAT HMI Server can only be started if a valid license is available on the target system. Activate a
license [} 23] on the target system.
How can I start the TwinCAT HMI Server automatically?
A recommendation on this topic can be found in the chapter Autostart Client [} 877].
With version 1.12 the TwinCAT HMI Server is automatically started with the system startup via the
service TcHmiSrv.
How can I start multiple instances of the TwinCAT HMI Server on one system?
Since version 1.12, multiple server instances can be started on one system. This function is included in the
basic TF2000 license. The target and client licenses are shared among the server instances, so you need
licenses for the sum of all connected targets or clients.
To start another server instance, proceed as follows:

4. Stop the service from the TwinCAT HMI Server (TcHmiSrv). You can do this in the Task Manager under
the services:
1334 Version: 2.5.1 TE2000

FAQ
5. Navigate to the following folder on the system hard disk:

C:\ProgramData\Beckhoff\TF2000 TwinCAT 3 HMI Server\service.
6. Create a new folder for the additional server instance. The folder name specifies the name of the
instance. The default instance has the name "TcHmiProject".
7. Start the service again via the Task Manager.
ð There are now multiple server instances initially running on the same port. Since this is not allowed,
the ports must be changed.
8. Open the configuration page of the default server instance at TcHmiSrv - Web server and change the
ports to free ports.
9. Confirm the changes by clicking Accept at the bottom of the page.
TE2000 Version: 2.5.1 1335

FAQ
10. Change the name of the instance at TcHmiSrv - General and confirm the changes by clicking on
Accept. Enter the name you used for the folder name here.
11. Repeat the procedure from steps 3 to 7 for additional server instances.
ð The server instances are now accessible via different ports.
In the future, a service management page will be provided in the TwinCAT HMI server which will
make it easy to create further instances.
18.3 Client
How can I access the HMI with a client?
After you have published a project on the server, you can access the system from any client. Open a
browser and enter the URL of the server. This usually consists of the IP address and the port number.
• http: http://127.0.0.1:1010
• https: https://127.0.0.1:1020
How can I access the HMI from a mobile end device?
You can access the HMI from mobile end devices in the same way as from desktop PCs.
How can I establish an encrypted connection to a mobile end device?
Some mobile browsers block connections with self-signed certificates. In this case, you can install the
certificate on the device:
1336 Version: 2.5.1 TE2000

FAQ
1. Export the self-signed certificate of the server.

2. Transfer the certificate to the mobile device. You can, for example, send it to the device by email.
3. Install the certificate on the mobile end device (click on the certificate and follow the wizard).
ð You can now access the HMI.
If you do not want to install the certificate on the device and want to provide a general secure access from
mobile end devices, you can issue an official certificate of a CA and import it into the server.
Can I start the client automatically?
The client can be started automatically. Some browsers also support starting in full screen mode. Information
on this topic can be found in the Autostart Client [} 878] chapter.
18.4 Communication
Which communication protocols does TwinCAT HMI support?
The TwinCAT HMI supports communication via ADS to TwinCAT systems [} 1011] and communication via
OPC UA to OPC UA servers [} 1017]. In addition, the TwinCAT HMI servers can exchange data with each
other via server-to-server communication [} 1197].
A server extension [} 1202] offers further communication options.
How do I use the ADS extension?
You can configure the connection to TwinCAT systems in the ADS extension. You will find instructions on
how to do this in the ADS chapter [} 1011]. The data points can then be used [} 104] in TwinCAT HMI.
How do I use the OPC UA Client Extension?
In the OPC UA Client Extension you can configure connections to OPC UA Servers. Instructions can be
found in the chapter OPC UA Client [} 1017]. The data points can then be used [} 104] in TwinCAT HMI.
How can I check the connection status to my target system?
With the ADS extension and with the OPC UA client extension you can click on "Diagnosis" on the
configuration page of the server [} 880]. There you can view the current connection status.
I cannot establish a connection to my TwinCAT system. What can I do?
Check whether a route to TwinCAT exists. The TwinCAT system must be in Run mode and the PLC must be
started.
I have transferred my project to the target server. Afterwards, no data points from the TwinCAT
system are displayed. The data points were displayed on the engineering system. What could be the
cause?
The following causes are possible:
1. In the TwinCAT HMI Server, a distinction is made between local profiles and remote profiles [} 880].
With a project publish, [} 874] a remote profile (selected in the Publish dialog) is transferred to the tar-
get server. Check the connection settings of the ADS extension for the remote profile.
2. There are not enough target licenses on the target server. One target license is required per TwinCAT
system. Activate [} 23] additional target licenses.
TE2000 Version: 2.5.1 1337

FAQ
I cannot transfer my project with OPC-UA-Client-Extension to the target system. What could be the
cause?
The OPC-UA-Client-Extension requires the license TF2110. Activate this license [} 23] on the target system
and run the project publish [} 874] again.
Can a TwinCAT HMI server communicate with another TwinCAT HMI server?
TwinCAT HMI servers can communicate with each other via server-to-server communication [} 1197].
18.5 Framework
How can I realize a page switching?
Page switching can be implemented via the control TcHmiRegion [} 755]. You will find instructions on how to
do this in the chapter Creating Navigation [} 41].
Can I develop my own controls for the TwinCAT HMI?
The development of user-specific controls in HTML5, JavaScript and CSS 3 is possible via so-called
"Framework Controls [} 1223]".
How can I integrate a Framework Control into other TwinCAT HMI projects?
A Framework Control can be exported as a package [} 957] via Package Management and installed [} 961]
in other TwinCAT HMI projects.
Is there a training for the development of Framework Controls?
The one-day course TR7060 can be attended for the development of Framework Controls. The dates can be
found on our website.
Can I integrate external libraries into the TwinCAT HMI?
The TwinCAT HMI Framework offers an API that can be used to implement many functions. The integration
of external web libraries is possible within a Framework Control. [} 1223] The external library must be
integrated into the Framework Control project. In the Description.json [} 1229] a reference [} 1234] to the
files of the library must be created.
I have created a Framework Control. This is not displayed in the TwinCAT HMI Designer or in the
LiveView. What could be the cause?
JavaScript is an interpreted scripting language, therefore syntax errors etc. can only be detected at runtime.
Such an error may result in the Control not being displayed in the Designer or LiveView. The developer tools
[} 1343] of the browsers offer a possibility for diagnosis. These developer tools also allow you to debug a
control.
1338 Version: 2.5.1 TE2000

Appendix
19 Appendix
19.1 Return Codes
19.1.1 ADS Return Codes

Grouping of error codes:
Global error codes: ADS Return Codes [} 1339]... (0x9811_0000 ...)
Router error codes: ADS Return Codes [} 1339]... (0x9811_0500 ...)
General ADS errors: ADS Return Codes [} 1340]... (0x9811_0700 ...)
RTime error codes: ADS Return Codes [} 1342]... (0x9811_1000 ...)
Global error codes

Hex Dec HRESULT Name Description
0x0 0 0x98110000 ERR_NOERROR No error.
0x1 1 0x98110001 ERR_INTERNAL Internal error.
0x2 2 0x98110002 ERR_NORTIME No real time.
0x3 3 0x98110003 ERR_ALLOCLOCKEDMEM Allocation locked – memory error.
0x4 4 0x98110004 ERR_INSERTMAILBOX Mailbox full – the ADS message could not be sent. Re-
ducing the number of ADS messages per cycle will help.
0x5 5 0x98110005 ERR_WRONGRECEIVEHMSG Wrong HMSG.
0x6 6 0x98110006 ERR_TARGETPORTNOTFOUND Target port not found – ADS server is not started or is
not reachable.
0x7 7 0x98110007 ERR_TARGETMACHINENOTFOUND Target computer not found – AMS route was not found.
0x8 8 0x98110008 ERR_UNKNOWNCMDID Unknown command ID.
0x9 9 0x98110009 ERR_BADTASKID Invalid task ID.
0xA 10 0x9811000A ERR_NOIO No IO.
0xB 11 0x9811000B ERR_UNKNOWNAMSCMD Unknown AMS command.
0xC 12 0x9811000C ERR_WIN32ERROR Win32 error.
0xD 13 0x9811000D ERR_PORTNOTCONNECTED Port not connected.
0xE 14 0x9811000E ERR_INVALIDAMSLENGTH Invalid AMS length.
0xF 15 0x9811000F ERR_INVALIDAMSNETID Invalid AMS Net ID.
0x10 16 0x98110010 ERR_LOWINSTLEVEL Installation level is too low –TwinCAT 2 license error.
0x11 17 0x98110011 ERR_NODEBUGINTAVAILABLE No debugging available.
0x12 18 0x98110012 ERR_PORTDISABLED Port disabled – TwinCAT system service not started.
0x13 19 0x98110013 ERR_PORTALREADYCONNECTED Port already connected.
0x14 20 0x98110014 ERR_AMSSYNC_W32ERROR AMS Sync Win32 error.
0x15 21 0x98110015 ERR_AMSSYNC_TIMEOUT AMS Sync Timeout.
0x16 22 0x98110016 ERR_AMSSYNC_AMSERROR AMS Sync error.
0x17 23 0x98110017 ERR_AMSSYNC_NOINDEXINMAP No index map for AMS Sync available.
0x18 24 0x98110018 ERR_INVALIDAMSPORT Invalid AMS port.
0x19 25 0x98110019 ERR_NOMEMORY No memory.
0x1A 26 0x9811001A ERR_TCPSEND TCP send error.
0x1B 27 0x9811001B ERR_HOSTUNREACHABLE Host unreachable.
0x1C 28 0x9811001C ERR_INVALIDAMSFRAGMENT Invalid AMS fragment.
0x1D 29 0x9811001D ERR_TLSSEND TLS send error – secure ADS connection failed.
0x1E 30 0x9811001E ERR_ACCESSDENIED Access denied – secure ADS access denied.
Router error codes
TE2000 Version: 2.5.1 1339

Appendix

0x500 1280 0x98110500 ROUTERERR_NOLOCKEDMEMORY Locked memory cannot be allocated.
0x501 1281 0x98110501 ROUTERERR_RESIZEMEMORY The router memory size could not be changed.
0x502 1282 0x98110502 ROUTERERR_MAILBOXFULL The mailbox has reached the maximum number of
possible messages.
0x503 1283 0x98110503 ROUTERERR_DEBUGBOXFULL The Debug mailbox has reached the maximum num-
ber of possible messages.
0x504 1284 0x98110504 ROUTERERR_UNKNOWNPORTTYPE The port type is unknown.

0x505 1285 0x98110505 ROUTERERR_NOTINITIALIZED The router is not initialized.
0x506 1286 0x98110506 ROUTERERR_PORTALREADYINUSE The port number is already assigned.
0x507 1287 0x98110507 ROUTERERR_NOTREGISTERED The port is not registered.
0x508 1288 0x98110508 ROUTERERR_NOMOREQUEUES The maximum number of ports has been reached.
0x509 1289 0x98110509 ROUTERERR_INVALIDPORT The port is invalid.
0x50A 1290 0x9811050A ROUTERERR_NOTACTIVATED The router is not active.
0x50B 1291 0x9811050B ROUTERERR_FRAGMENTBOXFULL The mailbox has reached the maximum number for
fragmented messages.
0x50C 1292 0x9811050C ROUTERERR_FRAGMENTTIMEOUT A fragment timeout has occurred.
0x50D 1293 0x9811050D ROUTERERR_TOBEREMOVED The port is removed.
General ADS error codes
1340 Version: 2.5.1 TE2000

Appendix

0x700 1792 0x98110700 ADSERR_DEVICE_ERROR General device error.
0x701 1793 0x98110701 ADSERR_DEVICE_SRVNOTSUPP Service is not supported by the server.
0x702 1794 0x98110702 ADSERR_DEVICE_INVALIDGRP Invalid index group.
0x703 1795 0x98110703 ADSERR_DEVICE_INVALIDOFFSET Invalid index offset.
0x704 1796 0x98110704 ADSERR_DEVICE_INVALIDACCESS Reading or writing not permitted.
0x705 1797 0x98110705 ADSERR_DEVICE_INVALIDSIZE Parameter size not correct.
0x706 1798 0x98110706 ADSERR_DEVICE_INVALIDDATA Invalid data values.
0x707 1799 0x98110707 ADSERR_DEVICE_NOTREADY Device is not ready to operate.
0x708 1800 0x98110708 ADSERR_DEVICE_BUSY Device is busy.
0x709 1801 0x98110709 ADSERR_DEVICE_INVALIDCONTEXT Invalid operating system context. This can result
from use of ADS blocks in different tasks. It may be
possible to resolve this through multitasking syn-
chronization in the PLC.
0x70A 1802 0x9811070A ADSERR_DEVICE_NOMEMORY Insufficient memory.
0x70B 1803 0x9811070B ADSERR_DEVICE_INVALIDPARM Invalid parameter values.
0x70C 1804 0x9811070C ADSERR_DEVICE_NOTFOUND Not found (files, ...).
0x70D 1805 0x9811070D ADSERR_DEVICE_SYNTAX Syntax error in file or command.
0x70E 1806 0x9811070E ADSERR_DEVICE_INCOMPATIBLE Objects do not match.
0x70F 1807 0x9811070F ADSERR_DEVICE_EXISTS Object already exists.
0x710 1808 0x98110710 ADSERR_DEVICE_SYMBOLNOTFOUND Symbol not found.
0x711 1809 0x98110711 ADSERR_DEVICE_SYMBOLVERSIONINVALID Invalid symbol version. This can occur due to an
online change. Create a new handle.
0x712 1810 0x98110712 ADSERR_DEVICE_INVALIDSTATE Device (server) is in invalid state.
0x713 1811 0x98110713 ADSERR_DEVICE_TRANSMODENOTSUPP AdsTransMode not supported.
0x714 1812 0x98110714 ADSERR_DEVICE_NOTIFYHNDINVALID Notification handle is invalid.
0x715 1813 0x98110715 ADSERR_DEVICE_CLIENTUNKNOWN Notification client not registered.
0x716 1814 0x98110716 ADSERR_DEVICE_NOMOREHDLS No further handle available.
0x717 1815 0x98110717 ADSERR_DEVICE_INVALIDWATCHSIZE Notification size too large.
0x718 1816 0x98110718 ADSERR_DEVICE_NOTINIT Device not initialized.
0x719 1817 0x98110719 ADSERR_DEVICE_TIMEOUT Device has a timeout.
0x71A 1818 0x9811071A ADSERR_DEVICE_NOINTERFACE Interface query failed.
0x71B 1819 0x9811071B ADSERR_DEVICE_INVALIDINTERFACE Wrong interface requested.
0x71C 1820 0x9811071C ADSERR_DEVICE_INVALIDCLSID Class ID is invalid.
0x71D 1821 0x9811071D ADSERR_DEVICE_INVALIDOBJID Object ID is invalid.
0x71E 1822 0x9811071E ADSERR_DEVICE_PENDING Request pending.
0x71F 1823 0x9811071F ADSERR_DEVICE_ABORTED Request is aborted.
0x720 1824 0x98110720 ADSERR_DEVICE_WARNING Signal warning.
0x721 1825 0x98110721 ADSERR_DEVICE_INVALIDARRAYIDX Invalid array index.
0x722 1826 0x98110722 ADSERR_DEVICE_SYMBOLNOTACTIVE Symbol not active.
0x723 1827 0x98110723 ADSERR_DEVICE_ACCESSDENIED Access denied.
0x724 1828 0x98110724 ADSERR_DEVICE_LICENSENOTFOUND Missing license.
0x725 1829 0x98110725 ADSERR_DEVICE_LICENSEEXPIRED License expired.
0x726 1830 0x98110726 ADSERR_DEVICE_LICENSEEXCEEDED License exceeded.
0x727 1831 0x98110727 ADSERR_DEVICE_LICENSEINVALID Invalid license.
0x728 1832 0x98110728 ADSERR_DEVICE_LICENSESYSTEMID License problem: System ID is invalid.
0x729 1833 0x98110729 ADSERR_DEVICE_LICENSENOTIMELIMIT License not limited in time.
0x72A 1834 0x9811072A ADSERR_DEVICE_LICENSEFUTUREISSUE Licensing problem: time in the future.
0x72B 1835 0x9811072B ADSERR_DEVICE_LICENSETIMETOLONG License period too long.
0x72C 1836 0x9811072C ADSERR_DEVICE_EXCEPTION Exception at system startup.
0x72D 1837 0x9811072D ADSERR_DEVICE_LICENSEDUPLICATED License file read twice.
0x72E 1838 0x9811072E ADSERR_DEVICE_SIGNATUREINVALID Invalid signature.
0x72F 1839 0x9811072F ADSERR_DEVICE_CERTIFICATEINVALID Invalid certificate.
0x730 1840 0x98110730 ADSERR_DEVICE_LICENSEOEMNOTFOUND Public key not known from OEM.
0x731 1841 0x98110731 ADSERR_DEVICE_LICENSERESTRICTED License not valid for this system ID.
0x732 1842 0x98110732 ADSERR_DEVICE_LICENSEDEMODENIED Demo license prohibited.
0x733 1843 0x98110733 ADSERR_DEVICE_INVALIDFNCID Invalid function ID.
0x734 1844 0x98110734 ADSERR_DEVICE_OUTOFRANGE Outside the valid range.
0x735 1845 0x98110735 ADSERR_DEVICE_INVALIDALIGNMENT Invalid alignment.
0x736 1846 0x98110736 ADSERR_DEVICE_LICENSEPLATFORM Invalid platform level.
TE2000 Version: 2.5.1 1341

Appendix

0x737 1847 0x98110737 ADSERR_DEVICE_FORWARD_PL Context – forward to passive level.
0x738 1848 0x98110738 ADSERR_DEVICE_FORWARD_DL Context – forward to dispatch level.
0x739 1849 0x98110739 ADSERR_DEVICE_FORWARD_RT Context – forward to real time.
0x740 1856 0x98110740 ADSERR_CLIENT_ERROR Client error.
0x741 1857 0x98110741 ADSERR_CLIENT_INVALIDPARM Service contains an invalid parameter.
0x742 1858 0x98110742 ADSERR_CLIENT_LISTEMPTY Polling list is empty.
0x743 1859 0x98110743 ADSERR_CLIENT_VARUSED Var connection already in use.
0x744 1860 0x98110744 ADSERR_CLIENT_DUPLINVOKEID The called ID is already in use.
0x745 1861 0x98110745 ADSERR_CLIENT_SYNCTIMEOUT Timeout has occurred – the remote terminal is not
responding in the specified ADS timeout. The route
setting of the remote terminal may be configured
incorrectly.
0x746 1862 0x98110746 ADSERR_CLIENT_W32ERROR Error in Win32 subsystem.
0x747 1863 0x98110747 ADSERR_CLIENT_TIMEOUTINVALID Invalid client timeout value.
0x748 1864 0x98110748 ADSERR_CLIENT_PORTNOTOPEN Port not open.
0x749 1865 0x98110749 ADSERR_CLIENT_NOAMSADDR No AMS address.
0x750 1872 0x98110750 ADSERR_CLIENT_SYNCINTERNAL Internal error in Ads sync.
0x751 1873 0x98110751 ADSERR_CLIENT_ADDHASH Hash table overflow.
0x752 1874 0x98110752 ADSERR_CLIENT_REMOVEHASH Key not found in the table.
0x753 1875 0x98110753 ADSERR_CLIENT_NOMORESYM No symbols in the cache.
0x754 1876 0x98110754 ADSERR_CLIENT_SYNCRESINVALID Invalid response received.
0x755 1877 0x98110755 ADSERR_CLIENT_SYNCPORTLOCKED Sync Port is locked.
0x756 1878 0x98110756 ADSERR_CLIENT_REQUESTCANCELLED The request was cancelled.
RTime error codes

0x1000 4096 0x98111000 RTERR_INTERNAL Internal error in the real-time system.
0x1001 4097 0x98111001 RTERR_BADTIMERPERIODS Timer value is not valid.
0x1002 4098 0x98111002 RTERR_INVALIDTASKPTR Task pointer has the invalid value 0 (zero).
0x1003 4099 0x98111003 RTERR_INVALIDSTACKPTR Stack pointer has the invalid value 0 (zero).
0x1004 4100 0x98111004 RTERR_PRIOEXISTS The request task priority is already assigned.
0x1005 4101 0x98111005 RTERR_NOMORETCB No free TCB (Task Control Block) available. The maxi-
mum number of TCBs is 64.
0x1006 4102 0x98111006 RTERR_NOMORESEMAS No free semaphores available. The maximum number of
semaphores is 64.
0x1007 4103 0x98111007 RTERR_NOMOREQUEUES No free space available in the queue. The maximum
number of positions in the queue is 64.
0x100D 4109 0x9811100D RTERR_EXTIRQALREADYDEF An external synchronization interrupt is already applied.

0x100E 4110 0x9811100E RTERR_EXTIRQNOTDEF No external sync interrupt applied.
0x100F 4111 0x9811100F RTERR_EXTIRQINSTALLFAILED Application of the external synchronization interrupt has
failed.
0x1010 4112 0x98111010 RTERR_IRQLNOTLESSOREQUAL Call of a service function in the wrong context
0x1017 4119 0x98111017 RTERR_VMXNOTSUPPORTED Intel VT-x extension is not supported.
0x1018 4120 0x98111018 RTERR_VMXDISABLED Intel VT-x extension is not enabled in the BIOS.
0x1019 4121 0x98111019 RTERR_VMXCONTROLSMISSING Missing function in Intel VT-x extension.
0x101A 4122 0x9811101A RTERR_VMXENABLEFAILS Activation of Intel VT-x fails.
Specific positive HRESULT Return Codes:

HRESULT Name Description
0x0000_0000 S_OK No error.
0x0000_0001 S_FALSE No error.
Example: successful processing, but with a negative or in-
complete result.
0x0000_0203 S_PENDING No error.
Example: successful processing, but no result is available
yet.
0x0000_0256 S_WATCHDOG_TIMEOUT No error.
Example: successful processing, but a timeout occurred.
TCP Winsock error codes
1342 Version: 2.5.1 TE2000

Appendix
Hex Dec Name Description

0x274C 10060 WSAETIMEDOUT A connection timeout has occurred - error while establishing the connec-
tion, because the remote terminal did not respond properly after a certain
period of time, or the established connection could not be maintained be-
cause the connected host did not respond.
0x274D 10061 WSAECONNREFUSED Connection refused - no connection could be established because the tar-
get computer has explicitly rejected it. This error usually results from an at-
tempt to connect to a service that is inactive on the external host, that is, a
service for which no server application is running.
0x2751 10065 WSAEHOSTUNREACH No route to host - a socket operation referred to an unavailable host.
More Winsock error codes: Win32 error codes
19.2 Troubleshooting
The product version number can be found via the Systray icon, the Visual Studio menu Help > About or
under Programs in the Windows Control Panel. Additional information is required:
• Visual Studio Version
• Operating system
• Windows error reports (if any)
• Console errors (if any)
19.2.1 Windows error reporting

If Visual Studio crashes, the engineering process (devenv.exe) generates a crash dump. This crash dump
helps with error analysis. The crash dumps are located under the following path:
\User\Username\AppData\Local\CrashDumps. Please send this crash dump to Support with the product
version number. Additionally, a project and instructions to recreate the problem would be very helpful.
If the Appdata folder is not visible, the hidden files are hidden.
Further information can be found via Windows Error Reporting.
19.2.2 Client Console

Modern HTML5 browsers provide helpful developer tools for debugging and analyzing. For example, a
console is provided in which errors and status messages can be displayed. The TwinCAT HMI server and
framework use the console to output errors, warnings and debug information. The log level of the output can
be adjusted via the project settings [} 51].
Further information can be found under these external links:

• Chrome DevTools
• Mozilla Firefox Developer Tools
• Microsoft Edge F12 devtools
19.2.3 Engineering server

When a TwinCAT HMI project is opened, a TwinCAT HMI Engineering server instance is started in the
background. The server logs all messages in the Visual Studio output. In case of a crash, a dump of the
server process is stored in the folder TcHmiProject\.engineering_servers . Please send this crash dump to
Support with the product version number. Additionally, a project and instructions to recreate the problem
would be very helpful.
TE2000 Version: 2.5.1 1343

More Information:
www.beckhoff.com/te2000
Beckhoff Automation GmbH & Co. KG

Hülshorstweg 20
33415 Verl
Germany
Phone: +49 5246 9630
[email protected]
www.beckhoff.com

Te2000 TC3 Hmi en

Uploaded by

Copyright:

Available Formats

Te2000 TC3 Hmi en

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Te2000 TC3 Hmi en

Uploaded by

Copyright:

Available Formats

Manual | EN

2023-02-09 | Version: 2.5.1

4 Quick start ............................................................................................................................................... 29

5 Development environment ..................................................................................................................... 49

TE2000 Version: 2.5.1 3

4 Version: 2.5.1 TE2000

5.13 Server configuration ...................................................................................................................... 880

6 User management ................................................................................................................................. 887

7 Event system ......................................................................................................................................... 922

8 Internationalization ............................................................................................................................... 928

TE2000 Version: 2.5.1 5

9.4 Concept ......................................................................................................................................... 945

10 Historical data ....................................................................................................................................... 949

11 Package management .......................................................................................................................... 956

12 Recipe management ............................................................................................................................. 977

13 Project Generator .................................................................................................................................. 996

14 Extensions ........................................................................................................................................... 1011

6 Version: 2.5.1 TE2000

15 Server ................................................................................................................................................... 1031

16 Framework ........................................................................................................................................... 1209

17 Samples ............................................................................................................................................... 1328

TE2000 Version: 2.5.1 7

18.3 Client ........................................................................................................................................... 1336

19 Appendix .............................................................................................................................................. 1339

8 Version: 2.5.1 TE2000

1.1 Notes on the documentation

© Beckhoff Automation GmbH & Co. KG, Germany.

TE2000 Version: 2.5.1 9

1.2 Safety instructions

Please note the following safety instructions and explanations!

10 Version: 2.5.1 TE2000

1.3 Notes on information security

TE2000 Version: 2.5.1 11

2.1 Product description

12 Version: 2.5.1 TE2000

TE2000 Version: 2.5.1 13

14 Version: 2.5.1 TE2000

TE2000 Version: 2.5.1 15

16 Version: 2.5.1 TE2000

2.4 Business model

TE2000 Version: 2.5.1 17

3.1 System requirements

Technical data Version 1.12

Technical data Version 1.10

**ASP.NET can be added through the Visual Studio® Setup process.

TwinCAT HMI Client:

Technical data Version 1.12

Technical data Version 1.10

18 Version: 2.5.1 TE2000

Framework control development:

Technical data Version 1.12

Technical data Version 1.10

Server extension development

Technical data Version 1.12

Technical data Version 1.10

3.2 Version overview

Version number Designation

TE2000 Version: 2.5.1 19

Version number Designation