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