|
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. |
|
|
