Development environment
4 Development environment
The HMI engineering environment consists of the following windows:
· Solution Explorer [} 40]
· Document Outline [} 60]
· Designer [} 43]
· HMI LiveView [} 60]
· Toolbox [} 125]
· Properties [} 47]
· HMI Configuration [} 63]
· Gallery Explorer [} 120]
· Server Configuration [} 109]
4.1 Quick start
4.1.1 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.
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.
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.1.2 Adding controls
1. Open the Designer.
2. Switch to the Toolbox.
3. Drag and drop a control into the graphic editor.
4.1.3 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 [} 48]" 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 [} 57]". 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 basic functions as the "Actions and Conditions" editor, plus a name box and
an area for editing the template parameters.
4.1.4 Adding an internal variable
1. Open the configuration window [} 63].
2. Switch to the "Internal Symbols [} 71]" 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.1.5 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.
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.
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 [} 65] (see: Adding an
internal variable [} 30])
Localizations: Localization symbols, i.e. the localized text entries that you have created in the Localization
editor [} 72].
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:
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.1.6 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.1.6.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.1.7 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.1.7.1 Adding a new language
To add a new language, create a new localization object.
1. Right-click on the Localization folder.
2. Select Add / New Item
3. Select Localization and click on Add
ð The TwinCAT HMI Wizard starts
4. Select a language and click on Create
ð The Localization editor starts
4.1.7.2 Manipulating 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:
· 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.
You can switch between different languages with the LoadLocal action in the dialog "Actions and Conditions
[} 48]". For example, you could use two buttons to switch between two languages. The ".onPressed" event
of the buttons would be used to call the SetLocal action and to change the corresponding language.
4.1.8 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 transfer parameters.
4.1.8.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
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.
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 [} 30]).
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
⑯).
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.
4.2 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 [} 41].
2. Server: The server node contains the Server Settings [} 109] and lists the loaded server extensions.
3. Framework: The framework node enables the referencing of Framework Controls [} 2012].
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 [} 105] of the project.
5. References: Offers the option to reference TwinCAT HMI packages [} 112].
6. Imports: Folder for contents such as images or videos that are added dynamically (e.g. by drag-anddrop
via the Gallery Explorer).
7. Themes: The folder contains all themes [} 525] 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.
4.2.1 Project properties
Following the selection of the HMI project node the properties of the HMI project are displayed in the
Properties window.
Explanations:
· Creation: Date and time when the setup of the TwinCAT HMI was created.
· Product Version: Version no. of the TwinCAT HMI.
· Device IP: The local IP address.
· TcHmiSrv's Port: The port number of the server on which a client can reach the server via HTTP(S).
· WebSocket Router's Port: The 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.
· 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.
· Scale Mode: Scaling mode of the HMI.
· 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.
· View port: Meta attributes that define the scaling behavior and adaptability of the HMI.
4.3 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.
4.3.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 [} 440])
Control selection
A control can be selected with a 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. 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.
4.3.2 HTML editor
In the HTML editor you can edit directly and check the code generated. Designer and HTML editor work
synchronously.
4.4 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:
The central button (lightning bolt) displays all available events:
The right-hand button (lock) displays the access rights [} 506] to this control:
4.5 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.
Clicking the Edit icon (pen) opens the Actions and Conditions Editor for the event associated with the
selected control.
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 [} 49]: 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 [} 55] (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 [} 56]: Various functions that can also be used within the editor.
· Action Templates [} 57]: 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
4.5.1 General
The general actions can be used independently of a control.
4.5.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 [} 88] 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 [} 88] 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.
8 Or branch: Or branch of the If statement that is executed if the condition is not met.
4.5.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 [} 88] 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 [} 88] 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.
4.5.1.3 WriteToSymbol
The WriteToSymbol action writes any value to a symbol (server symbol [} 65], internal symbol [} 71]) or to
a control [} 125] property.
Explanations:
1 Symbol: Symbol or control property to be written to. A binding [} 88] is required.
2 Value: Value to be written to the symbol. A binding to another symbol or a control property can be created.
4.5.1.4 JavaScript
A JavaScript action consists of JavaScript code and enables the execution of simple JavaScript functions.
4.5.1.5 CreateBinding
The CreateBinding action creates a binding [} 88] to a control property at runtime.
Explanations:
1 Target: The control property for which the binding is to be created.
2 Expression: Expression (symbol [} 65], control property [} 125] or localized text [} 72]) to be bound to
the target.
4.5.1.6 RemoveBinding
The RemoveBinding action removes a binding from a control property at runtime.
Explanations:
1 Target: Control property from which the binding [} 88] is to be removed.
4.5.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.
4.5.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 [} 2001], 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.
· With an asynchronous logic, the function "Wait for completion [} 2001]" waits for the action to be
executed. With a synchronous logic, this function has no effect.
4.5.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 [} 47]). 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 [} 292] by pressing a button
(onPressed event [} 443]).
4.5.3 Functions
Various functions are available graphically in the Actions and Conditions Editor. In addition, user-specific
functions [} 2002] are listed there according to their category. The functions can also be used in the
Properties window [} 47].
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.
4.5.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.
4.5.4.1 Editor
The Action Template Editor can be opened via the Actions and Conditions Editor or the Configuration
window [} 63]. 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.
· 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.
4.5.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 [} 57]
opens.
2. Enter a name and a description for the Action Template.
3. Add a Template Parameter of type "Boolean" to the Action Template.
4. Drag a condition [} 50] into the editor area and implement the logic for switching the Boolean value using
WriteToSymbol actions [} 51]. 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.
4.6 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 [} 127]). In addition, you can shift the controls into containers or grids or remove them from
a container or grid.
4.7 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.
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 [} 2165] of the browser engine. These can be used
for debugging purposes:
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 device
(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
9. Opens the LiveView in an available browser. If several browsers are installed on the operating system
you can choose between the browsers.
4.8 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.
The Configuration window is subdivided into 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.
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 [} 47] by drag-and-drop.
4.8.1 Server symbols
Server Symbols lists all symbols that are saved in the TwinCAT HMI server.
4.8.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.
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.
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.
4.8.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.
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.
4.8.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:
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:
4.8.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.
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 allowed.
4.8.3 Localizations
Localizations list all available localization texts [} 524]. 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.
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.
4.8.4 Data types
Data types list all available data types of the TwinCAT HMI and the current project.
· Server: All server data types.
· Project: User-specific project data types that were created by the Scheme Generator [} 74].
· Framework: All framework data types (including data types from framework controls).
· General: Base data types.
4.8.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.
4.8.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:
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 [} 79].
4.8.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:
1. Name: Name of the object property.
2. Data type: Data type of the property.
Clicking on Create Type opens the Scheme Generator [} 79].
4.8.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:
For example, function blocks from a PLC can be selected in the dialog. The data type can be created on this
basis.
Clicking on Create Type opens the Scheme Generator [} 79].
4.8.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:
All data types including the project data types are available in the combobox.
Clicking on Create Type opens the Scheme Generator [} 79].
4.8.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.
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 [} 81]: AnyOf, AllOf or OneOf (see JSON
documentation).
◦ Not Set: Do not set a data type. This necessitates a manual restriction [} 81] 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 addition
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.
4.8.4.1.5.1 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.
4.8.5 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.
4.8.6 Global Events
Global Events lists all events of the TwinCAT HMI that can neither be assigned to any control nor to any HMI
page.
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.
4.8.7 Parameter
Parameter lists all the transfer parameters of a User Control. The Parameter category is visible only if a User
Control has the focus.
4.8.8 Files
Files lists the files used in the project, categorized according to the project folders.
4.8.8.1 All Files
Lists all available files of the TwinCAT HMI project.
4.8.8.2 Content Files
Lists all content files (pages) of the project.
4.8.8.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 [} 41].
4.8.8.4 User Controls
Lists all User Controls in the project.
4.8.9 Users and user groups
Lists all available users and user groups. Explanations of the configuration can be found in User
Management [} 507].
4.8.10 Action Templates
Action Templates lists all Action Templates [} 57] used in the project.
4.8.11 Permissions Management
The permissions management enables the configuration of the rights [} 507] 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 [} 511].
4.9 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.
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.
4.10 Symbols and Bindings
A binding links any symbol to a property [} 47] of a control. A binding automatically updates the property of
the control when the value of the symbol changes.
4.10.1 Create binding
Under Properties [} 47] 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.
Besides internal variables and localization symbols, properties of other controls can also be bound (e.g. the
current text of a text box [} 362]).
Alternatively, the symbols in input fields can be bound directly to a property of a control using autocompletion.
Available from version 1.10.
4.10.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 [} 2005], for example.
A function binding is created with the Create function binding command.
An active function binding is identified by fx highlighted in blue.
The transfer parameters 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 [} 2002].
4.10.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:
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 out.
· Two-way binding (read and write access): The value of the symbol is read out and the symbol is
written when a specific event is triggered.
2 Binding event: The Binding Event can only be configured for two-way bindings. It determines at which
event the symbol is written to (e.g. onValueChanged [} 313] for a linear gauge [} 292]).
· 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 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.
Available from version 1.10.
4.11 Functions
Functions enable various logical operations to be executed on the client side. The functions can be used in
the Properties window [} 47], in the Actions and Conditions Editor [} 48] or in the Code Behind [} 1998].
In addition to the functions supplied, it is possible to implement your own logical operations in JavaScript
[} 2002].
4.11.1 Binding
4.11.1.1 CheckBinding
The CheckBinding function checks whether a binding to a control property exists. Refer also to the
description page for the corresponding API function [} 1779].
Parameter
Name Type Description
control Control [} 2097] The control containing the property
to be checked.
propertyName String [} 1997] The name of the control property to
be checked.
Return value
Type Description
Boolean [} 1996] true: A binding to the control property exists.
false: A binding to the control property does not exist.
Note: Available from version 1.10.
4.11.1.2 CheckBindingEx
The CheckBindingEx function checks whether a binding of a certain symbol to a control property exists.
Parameter
Name Type Description
control Control [} 2097] The control containing the property
to be checked.
propertyName String [} 1997] The name of the control property to
be checked.
symbol Symbol [} 1928] The symbol for which the binding to
a control property is to be checked.
Return value
Type Description
Boolean [} 1996] true: A binding of the symbol to the control property
exists.
false: A binding of the symbol to the control property
does not exist.
Note: Available since version 1.10.
4.11.2 Data Conversion
4.11.2.1 Concatenate
The Concatenate function links several strings together.
Parameter
Name Type Description
value […] String [} 1997] Any number of strings that are to
be linked.
Return value
Type Description
String [} 1997] A string linked from the transfer parameters.
Note: Available since version 1.8.
4.11.2.2 ConvertBooleanToEnum
The function ConvertBooleanToEnum converts a Boolean value to the value of an enumerator.
Parameter
Name Type Description
value Boolean [} 1996] The Boolean value to be
converted. Only a binding [} 88]
makes sense at this point.
trueValue String [} 1997] The value to be returned if the
Boolean value is true.
falseValue String [} 1997] The value to be returned if the
Boolean value is false.
Return value
Type Description
String [} 1997] trueValue or falseValue depending on the Boolean
value.
Note: Available since version 1.8.
4.11.2.3 ConvertBooleanToVisibility
The function ConvertBooleanToVisibility converts a Boolean value to a value of the enumerator "Visibility
[} 439]".
Parameter
Name Type Description
value Boolean [} 1996] The Boolean value to be
converted. Only a binding [} 88]
makes sense at this point.
falseValue Visibility [} 439] The value to be returned if the
Boolean value is false.
Return value
Type Description
Visibility [} 439] The visibility depending on the Boolean value.
Note: Available since version 1.8.
4.11.2.4 Decrement
The Decrement function counts a numerical value in a binding downward in steps of a specified step size.
Parameter
Name Type Description
value Symbol [} 1928] The value to be decremented. The
value must be specified as a
binding [} 88] to a symbol.
minValue Number [} 1997] A minimum value that may not be
undershot.
stepWidth Number [} 1997] The step size with which the value
is to be decremented.
Return value
Type Description
void No return value.
Note: Available since version 1.8.
4.11.2.5 Increment
The Increment function counts a numerical value in a binding upward in steps of a specified step size.
Parameter
Name Type Description
value Symbol [} 1928] The value to be incremented. The
value must be specified as a
binding [} 88] to a symbol.
maxValue Number [} 1997] A maximum value that may not be
exceeded.
stepWidth Number [} 1997] The step size with which the value
is to be incremented.
Return value
Type Description
void No return value.
Note: Available since version 1.8.
4.11.2.6 GetElementByIndex
The function GetElementByIndex returns the value of a certain array index of a binding.
Parameter
Name Type Description
arraySymbol Symbol [} 1928] A binding to the symbol of an array.
index Number [} 1997] The index of the array for which the
value is to be returned.
Return value
Type Description
Any [} 1996] The value that is stored in the position of the index in
the array.
Note: Available since version 1.8.
4.11.2.7 SetElementByIndex
The function SetElementByIndex sets the value of a certain array index in a binding.
Parameter
Name Type Description
arraySymbol Symbol [} 1928] A binding to the symbol of an array.
index Number [} 1997] The index of the array for which the
value is to be set.
value Any [} 1996] The value to be written in the
position of the array.
Return value
Type Description
void No return value.
Note: Available since version 1.10.
4.11.2.8 ToDateString
The function ToDateString converts a date in accordance with a transferred localization into a string
containing the date.
Parameter
Name Type Description
date Any [} 1996] Text, numbers (milliseconds since
1/1/1970) or JavaScript date
object.
locale String [} 1997] The localization variable in the form
of a string. If this is not specified,
the currently active language
[} 524] will be used.
Return value
Type Description
String [} 1997] The date of the input value according to the
localization in the form of a string.
Note: Available since version 1.10.
4.11.2.9 ToTimeString
The function ToTimeString converts a date in accordance with a transferred localization into a string
containing the time.
Parameter
Name Type Description
date Any [} 1996] Text, numbers (milliseconds since
1/1/1970) or JavaScript date
object.
locale String [} 1997] The localization variable in the form
of a string. If this is not specified,
the currently active language
[} 524] will be used.
Return value
Type Description
String [} 1997] The time of the input value according to the
localization in the form of a string.
Note: Available since version 1.10.
4.11.2.10 ToDateTimeString
The function ToDateTimeString converts a date in accordance with a transferred localization into a string
containing the date including the time.
Parameter
Name Type Description
date Any [} 1996] Text, numbers (milliseconds since
1/1/1970) or JavaScript date
object.
locale String [} 1997] The localization variable in the form
of a string. If this is not specified,
the currently active language
[} 524] will be used.
Return value
Type Description
String [} 1997] The date with time of the input value according to the
localization in the form of a string.
Note: Available since version 1.10.
4.11.2.11 ToLowerCase
The function ToLowerCase converts all the letters in a string to lower-case letters.
Parameter
Name Type Description
value String [} 1997] Any string.
Return value
Type Description
String [} 1997] Input string in lower-case letters.
Note: Available since version 1.8.
4.11.2.12 ToUpperCase
The function ToUpperCase converts all the letters in a string to upper-case letters.
Parameter
Name Type Description
value String [} 1997] Any string.
Return value
Type Description
String [} 1997] Input string in upper-case letters.
Note: Available since version 1.8.
4.11.2.13 TrimToLength
The function TrimToLength shortens a string to a specified number of characters from left or right.
Parameter
Name Type Description
value String [} 1997] String to be shortened.
trimToLength Number [} 1997] 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 [} 1997] The shortened string.
Note: Available since version 1.8.
4.11.3 Formatting
4.11.3.1 FormatString
The function FormatString formats a given string by replacing placeholders in the string by the values of the
symbols.
Parameter
Name Type Description
formatString String [} 1997] A string with placeholders.
args […] Any [} 1996] Any value used in a placeholder.
Return value
Type Description
String [} 1997] String in which the placeholders are replaced by
values of the symbols.
Placeholder
Example: {0|.1f}
Placeholder Description
{ Placeholder is initiated.
0 Index of the parameter (optional: without an index
iteration takes place in sequence).
| Separator.
.X Number of digits.
f Type description.
} End of the placeholder.
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
Note: Available since version 1.10.
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)."
4.11.3.2 GaugeValueFormatter
The function GaugeValueFormatter rounds up a numerical value to a transferred number of decimal places.
Parameter
Name Type Description
value Number [} 1997] Value to be rounded up.
maxDecimals Number [} 1997] Number of decimal places to which
the value is to be rounded.
Return value
Type Description
String [} 1997] The rounded value in the form of a string.
Note: Available since version 1.8.
4.11.4 Locale
4.11.4.1 GetLocale
The function GetLocale returns the currently active language (with region if available) of the client. Refer also
to the description page for the corresponding API function [} 1795].
Parameter
Name Type Description
- - -
Return value
Type Description
String [} 1997] Currently active language (e.g. "de-DE").
Note: Available since version 1.8.
4.11.4.2 GetRegisteredLocales
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 [} 1796].
Parameter
Name Type Description
- - -
Return value
Type Description
String [} 1997][] An array with all registered languages of the project
in the form of a string.
Note: Available since version 1.8.
4.11.4.3 SetLocale
The function SetLocale sets the active language in the client. Refer also to the description page for the
corresponding API function [} 1795].
Parameter
Name Type Description
locale String [} 1997] A language registered in the
project.
Return value
Type Description
void No return value.
Note: Available since version 1.8.
4.11.5 Recipe
4.11.5.1 Activate
When the Activate function is executed, the recipe defined in the parameter is activated.
Parameter
Name Type Description
recipeReference String [} 1997] The reference or the recipe (path
plus name) that is to be activated.
Return value
Type Description
void No return value.
Note: Available since version 1.10.1171.142
4.11.5.2 Teach
The Teach function reads the current values of the symbols of a recipe from the target and stores them in
this recipe.
Parameter
Name Type Description
recipeReference String [} 1997] 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
void No return value.
Note: Available since version 1.10.1171.142
4.11.5.3 TeachAsNew
The TeachAsNew function reads the current values of the symbols of a defined recipe from the target and
stores them in a new recipe.
Parameter
Name Type Description
recipeReference String [} 1997] 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 [} 1997] 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 [} 1997] 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
void No return value.
Note: Available since version 1.10.1171.142
4.11.6 Theme
4.11.6.1 GetTheme
The function GetTheme returns the name of the active theme. Refer also to the description page for the
corresponding API function [} 1949].
Parameter
Name Type Description
- - -
Return value
Type Description
String [} 1997] Name of the active theme.
Note: Available since version 1.10.
4.11.6.2 SetAttributeToThemeValue
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.
Refer also to the description page for the corresponding API function [} 1951].
Parameter
Name Type Description
control Control [} 2097] The control for which the attribute
is to be set.
propertyName String [} 1997] Name of the attribute that is to be
set to the value of the active
theme.
Return value
Type Description
void No return value.
Note: Available since version 1.10.
4.11.6.3 SetTheme
The function SetTheme sets the active theme. Refer also to the description page for the corresponding API
function [} 1950].
Parameter
Name Type Description
newTheme String [} 1997] Available theme that is to be set to
active.
Return value
Type Description
void No return value.
Note: Available since version 1.10.
4.11.7 User Access Handling
4.11.7.1 CheckAccess
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 [} 1760].
Parameter
Name Type Description
TcHmiControl Control [} 2097] The control for which the right is to
be checked.
AccessRightToCheck String [} 1997] The right that is to be checked.
Return value
Type Description
Boolean [} 1996] true: The user has the right in question.
false: The user does not have the right in question.
Note: Available since version 1.8.
4.11.7.2 Logout
The function Logout logs the current user out of the server. Refer also to the description page for the
corresponding API function [} 1817].
Parameter
Name Type Description
- - -
Return value
Type Description
void No return value.
Note: Available since version 1.8.
4.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.
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).
4. Select the server configuration that you wish to transfer to the target system.
5. Conclude the procedure by clicking on Publish.
ð The Visual Studio output window informs you about the course of the procedure.
4.13 Server configuration
You can call the configuration of the server with a double click on the extension nodes in the Solution
Explorer or via the Visual Studio menu / TwinCAT HMI / TwinCAT HMI Configuration. Alternatively you can
carry out the configuration directly on the configuration page of the server.
The server can manage several configurations in order, for example, to configure different controllers. You
can add new configurations via "Create new configuration".
Two configurations are supplied by default:
· Default Configuration: Local configuration that is loaded from the engineering server.
· Remote configuration: Configuration that is transferred to the remote server when publishing.
4.13.1 ADS
The ADS server extension displays the configured runtime of the selected publish configuration. You can
add further devices.
All locally configured routes are displayed with their AmsNetId when adding a runtime. A runtime is added
via the AmsNetId.
4.13.1.1 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).
4.14 Package Management
The TwinCAT HMI Package Management makes it possible to export a TwinCAT HMI extensibility project as
a so-called TwinCAT HMI Package.
A TwinCAT HMI Package can be installed as a reference in a TwinCAT HMI project.
4.14.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.
2. Assign a version. (The name is not editable as it is assigned via the project name).
3. Select Next.
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
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.
4.14.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
Browse – Current: Option to add a package by Browse.
3. Select Install to install the package.
ð 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\References.
4.14.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)
Solution – Projects: List of packages within the Solution
Browse – Current: List of packages that were added by Browse.
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).
4.14.4 Updating a package
1. Uninstall [} 118] the package.
2. Install [} 116] 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).
4.15 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.
4.16 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.
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
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
4.17 TwinCAT HMI Items
Further elements can be added to a TwinCAT HMI project via the context menu in the Solution Explorer.
The following elements can be chosen:
Start point for creating individual cascading style sheets.
CodeBehind scripts (JavaScript).
Content [} 456], a page that can be used and switched within regions [} 482].
Reusable functions that are usable in the client.
A localization file for a further language.
A User Control [} 490] can be instanced multiple times and each has a
unique ID. All User Controls are listed in the Toolbox.
A view [} 501] can be used as an entry page, e.g. configured as a start page
and a further view.