Siemens

Industry
Online
Support

APPLICATION EXAMPLE

HMI Template Suite

(WinCC Unified)
SIMATIC WinCC Unified V18
Legal information
Use of application examples
Application examples illustrate the solution of automation tasks through an interaction of several components in the form of
text, graphics and/or software modules. The application examples are a free service by Siemens AG and/or a subsidiary of
Siemens AG (“Siemens”). They are non-binding and make no claim to completeness or functionality regarding configuration and
equipment. The application examples merely offer help with typical tasks; they do not constitute customer-specific solutions. You
yourself are responsible for the proper and safe operation of the products in accordance with applicable regulations and must
also check the function of the respective application example and customize it for your system.
Siemens grants you the non-exclusive, non-sublicensable and non-transferable right to have the application examples used by
technically trained personnel. Any change to the application examples is your responsibility. Sharing the application examples
with third parties or copying the application examples or excerpts thereof is permitted only in combination with your own
products. The application examples are not required to undergo the customary tests and quality inspections of a chargeable
product; they may have functional and performance defects as well as errors. It is your responsibility to use them in such a
manner that any malfunctions that may occur do not result in property damage or injury to persons.

Disclaimer of liability
Siemens shall not assume any liability, for any legal reason whatsoever, including, without limitation, liability for the usability,
availability, completeness and freedom from defects of the application examples as well as for related information, configuration
and performance data and any damage caused thereby. This shall not apply in cases of mandatory liability, for example under
the German Product Liability Act, or in cases of intent, gross negligence, or culpable loss of life, bodily injury or damage to
health, non-compliance with a guarantee, fraudulent non-disclosure of a defect, or culpable breach of material contractual
obligations. Claims for damages arising from a breach of material contractual obligations shall however be limited to the
foreseeable damage typical of the type of agreement, unless liability arises from intent or gross negligence or is based on loss of
life, bodily injury or damage to health. The foregoing provisions do not imply any change in the burden of proof to your
detriment. You shall indemnify Siemens against existing or future claims of third parties in this connection except where Siemens
is mandatorily liable.
By using the application examples you acknowledge that Siemens cannot be held liable for any damage beyond the liability
provisions described.

Other information
Siemens reserves the right to make changes to the application examples at any time without notice. In case of discrepancies
between the suggestions in the application examples and other Siemens publications such as catalogs, the content of the other
documentation shall have precedence.
The Siemens terms of use (https://support.industry.siemens.com) shall also apply.

Security information
Siemens provides products and solutions with industrial security functions that support the secure operation of plants, systems,
machines and networks.
In order to protect plants, systems, machines and networks against cyber threats, it is necessary to implement – and
continuously maintain – a holistic, state-of-the-art industrial security concept. Siemens’ products and solutions constitute one
element of such a concept.
Customers are responsible for preventing unauthorized access to their plants, systems, machines and networks. Such systems,
machines and components should only be connected to an enterprise network or the internet if and to the extent such a
connection is necessary and only when appropriate security measures (e.g. firewalls and/or network segmentation) are in place.
For additional information on industrial security measures that may be implemented, please visit
https://www.siemens.com/industrialsecurity.
Siemens’ products and solutions undergo continuous development to make them more secure. Siemens strongly recommends
that product updates are applied as soon as they are available and that the latest product versions are used. Use of product
versions that are no longer supported, and failure to apply the latest updates may increase customer’s exposure to cyber threats.
To stay informed about product updates, subscribe to the Siemens Industrial Security RSS Feed under
https://www.siemens.com/cert.

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 2

 Table of contents

Table of contents
1. Introduction ...................................................................................................................................5

1.1. Overview ..................................................................................................................................................... 5

1.2. Principle of operation ................................................................................................................................... 5
1.3. Operating Philosophy ................................................................................................................................... 6
1.4. Screen Navigation ........................................................................................................................................ 6
1.4.1. Sidebar navigation........................................................................................................................................ 6
1.4.2. Tile navigation.............................................................................................................................................. 6
1.5. Components used ........................................................................................................................................ 7

2. HMI Template Wizard .....................................................................................................................9

2.1. Installing HMI Template Wizard ..................................................................................................................... 9

2.1.1. Requirements ............................................................................................................................................... 9
2.1.2. Checking membership in the Windows user group "Siemens TIA Openness" on the engineering PC .................. 9
2.1.3. Installation ................................................................................................................................................. 11
2.2. Operating the HMI Template Wizard ............................................................................................................ 13
2.2.1. Sidebar navigation...................................................................................................................................... 14
2.2.2. Tile navigation............................................................................................................................................ 18
2.2.3. Tile navigation view during engineering ...................................................................................................... 28
2.2.4. Launch "Tile navigation" with a button......................................................................................................... 30
2.3. Structure of the library ................................................................................................................................ 34
2.4. Color Concept and Palette ........................................................................................................................... 38
2.4.1. Color Concept ............................................................................................................................................ 38
2.4.2. Color Palette............................................................................................................................................... 38
2.5. Overview of the layout areas ....................................................................................................................... 40
2.5.1. Navigation Levels in detail .......................................................................................................................... 42
2.5.2. Script functions of the navigation levels ...................................................................................................... 45
2.6. Elements of the HMI Template .................................................................................................................... 47
2.6.1. Title bar ..................................................................................................................................................... 47
2.6.2. Status bar................................................................................................................................................... 47
2.6.3. Option Panel .............................................................................................................................................. 48
2.6.4. MainWindow .............................................................................................................................................. 49
2.6.5. Buttons and Icons ....................................................................................................................................... 49
2.6.6. Text and I/O Fields ...................................................................................................................................... 50
2.6.7. Rectangles ................................................................................................................................................. 52

3. Library elements ..........................................................................................................................53

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 3

 Table of contents

3.1. Screen objects ............................................................................................................................................ 53

3.1.1. Faceplates .................................................................................................................................................. 53
3.1.2. ContentBoard ............................................................................................................................................. 56
3.1.3. Button with status output ........................................................................................................................... 57
3.2. HMI screens ............................................................................................................................................... 58
3.2.1. Dashboards ................................................................................................................................................ 59
3.2.2. Machine modules ....................................................................................................................................... 60
3.2.3. Wizard ....................................................................................................................................................... 61
3.2.4. Notifications............................................................................................................................................... 61
3.2.5. Function panel ........................................................................................................................................... 62
3.2.6. Additional example screens ("mixed examples") ........................................................................................... 63

4. Configuration notes......................................................................................................................64

4.1. Set the language ........................................................................................................................................ 67

4.2. Creating templates with screen windows ..................................................................................................... 68
4.3. Accessing Screens as Pop-Ups ..................................................................................................................... 70
4.4. Example operator actions............................................................................................................................ 71

5. Appendix .....................................................................................................................................73

5.1. Service and support .................................................................................................................................... 73

5.2. Links and literature ..................................................................................................................................... 74
5.3. Change documentation .............................................................................................................................. 74

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 4

 Introduction

1. Introduction
1.1. Overview
Systems and machines are becoming more and more complex and, therefore, the demands on the system operators are
increasing. For this reason, designing an intuitive and graphically appealing user interface as a link between human and
machine is becoming increasingly more important.
The HMI Template Suite offers you templates and ideas to make the configuration of your operator panel clear and
modern.
Figure 1-1

Layout and design are designed for smooth operation, transparency, and scalability. In this way, you can simplify the
operation of your machine and reduce operator errors.

1.2. Principle of operation

The basis of the "HMI Template Suite" is a fully configured operator device or, as of WinCC Unified V18, a web application
in the memory of the SIMATIC S7-1500 (SIMATIC WinCC Unified "View of Things", or "VoT" for short). You can find detailed
information about "VoT" via the following link \5\.
The fully configured operator device contains basic navigation and control functions. On this basis, you can easily build
and extend your project in a modular manner using additional HMI objects from the library.
The "HMI Template Suite Wizard" helps you create your new operator panel by selecting the contents and then having the
Wizard integrate them into your project via Openness. The basis for the configuration of the Wizard is, in turn, the
"HMI Template Suite (WinCC Unified)" library.
This gives you a uniform "look & feel" with a consistent operating concept, in addition to saving time during
configuration.

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 5

 Introduction

1.3. Operating Philosophy

There is a philosophy behind every operating concept. This operating philosophy covers points such as the following:

• How is the operator notified of the current state of the machine?

• How is the operator shown when or where an operator action is necessary?
• How are the implications of an operator action made clear to the operator?
Humans are not able to register as much information as they would like to at one time. For this reason, it is necessary to
present solid information in such a way as to allow the operator to register all the information quickly and intuitively. An
easy-to-follow HMI plays a major role in this regard.

NOTE You can find additional information on the operator philosophy in the free HMI Design Masterclass:
https://new.siemens.com/global/en/products/automation/simatic-hmi/design-masterclass.html

1.4. Screen Navigation

Figure 1-2

1 2

As of version V2.0, the Wizard offers two types of navigation.

1. Sidebar navigation (navigation elements arranged to the side)
2. Tile navigation

1.4.1. Sidebar navigation

"Sidebar navigation" is always useful where several subordinate navigation levels are required.
Of course, less complex system and machine areas can also be configured here.

1.4.2. Tile navigation

"Tile navigation" is ideal when connected machinery or plant areas are operated from one operator panel.

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 6

 Introduction

The navigation can be likened to the Table of Contents in a Word document in which a main heading contains sub-
chapters.
Here, the "Tile" named "Tile 1.1" is analogous to the first "navigation level" which pulls up the associated plant screen.
The "Tile" named "Tile 2.1" is analogous to the second "navigation level" which pulls up its own associated plant screen.
The following graphic is provided to illustrate the principle of operation.
Figure 1-3

Tile navigation
Navigation layer 1

Tile
1.1

Tile
1.2

Navigation layer 2

Tile
2.1

Tile
2.2

Tile
1.3

Tile
1.4

A detailed description of how to configure a "tile navigation" can be found in Section 2.2.2.

1.5. Components used

This application example has been created with the following hard- and software components:

Component Number Article Number Note

SIMATIC HMI MTP700 Unified 1 6AV2128-3GB06-0AX0 Alternativ können Sie Bediengeräte in der
Comfort Größe von 7 bis 22 Zoll einsetzen.

SIMATIC WinCC Unified V18 1 6AV2151-0XB01-8AA5 Engineering im TIA Portal.

(Engineering)

SIMATIC WinCC Unified PC RT V18 1 6AV2154-2GB01-8AA0

WinCC Unified PC Runtime V18 - 1 Release 10/2023

Update 3

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 7

 Introduction

You can purchase these components from the Siemens Industry Mall.

This application example consists of the following components:

Component File name Note

Documentation 91174767_HMITemplateSuiteUnified_V4.2_DOC_de.pdf

Library HMI Template Suite (WinCC Unified)_V18.zip

Wizard SIMATIC_HMI_Template_Suite_Wizard_V3.0.0_Setup.zip "Exe file"

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 8

 HMI Template Suite Wizard

2. HMI Template Suite Wizard

The HMI Template Suite Wizard helps you create the configuration for your Unified operator panel even faster.

2.1. Installing HMI Template Suite Wizard

2.1.1. Requirements
1. The HMI Template Suite Wizard uses the TIA Portal Openness interface to access selected contents of the HMI
Template Suite library, then integrates them in your project. Therefore, the user under which you are logged in to the
engineering PC must be a member of the Windows user group "Siemens TIA Openness". 2.1.2 describes in detail how
to check this.
Figure 2-1

2. WinCC Unified V18 (or higher) is installed on the PC.

3. A user must be created in WinCC Unified.

2.1.2. Checking membership in the Windows user

group "Siemens TIA Openness" on the
engineering PC
To verify that the user is a member of the "Siemens TIA Openness" Windows user group, follow these steps:

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 9

 HMI Template Suite Wizard

1. Right-click on the Windows icon in the Windows task bar.

Figure 2-2

2. Left click on "Computer Management".

Figure 2-3

3. In the console tree of the "Computer Management" window, double-click the local "Siemens TIA Openness" user group
under "Groups".
Figure 2-4

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 10

 HMI Template Suite Wizard

4. Check whether the user under which you've logged in to the engineering PC is a member of the "Siemens TIA
Openness" user group. If it is not a member, add the user to the group.
Figure 2-5

2.1.3. Installation
1. Download the file "SIMATIC HMI Template Suite Wizard V3.0.0 Setup.zip" from this application example and unzip it.
2. Start the installation by double clicking the file "SIMATIC HMI Template Suite Wizard V3.0.0 Setup.exe".
Figure 2-6

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 11

 HMI Template Suite Wizard

3. Follow the setup instructions and perform all installation steps.

Figure 2-7

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 12

 HMI Template Suite Wizard

2.2. Operating the HMI Template Suite

Wizard
1. Start the "SIMATIC HMI Template Suite Wizard" via the Windows start menu in the folder "Siemens Automation".
Figure 2-8

2. Select the navigation type. You have two types to choose from:
a. Sidebar navigation (navigation elements arranged to the side).
b. Tile navigation.

Figure 2-9

a b

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 13

 HMI Template Suite Wizard

2.2.1. Sidebar navigation

1. In the first step, select the navigation type.
In this case, "Sidebar navigation". Double-click the blue surface to start the Wizard.
Figure 2-10

2. Select your device:

- Select which device (Unified Basic Panel, Unified Comfort Panel or PC station with WinCC Unified Runtime) you
want to create (1).
- Then use the drop-down list to select the desired resolution (2).
- Click "Next" button (3).
Figure 2-11

3. Select your TIA Portal project or create a new TIA Portal project:
- In the next step, choose whether you want to modify an existing TIA project (1) or create a new project.
To modify an existing project, the project must already be open.
If you create a new project, you must also specify the "Project name" and "Location".
- Click "Next" button (2).

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 14

 HMI Template Suite Wizard

Figure 2-12

4. Various functions now run automatically in the background, such as establishing a connection to the TIA Portal
project, etc.
Figure 2-13

Openness access message

While the Wizard performs some functions automatically in the background, the following message appears when you
use the Wizard for the first time. Depending on the configuration, this message may be partially obscured by the "Wizard
screen", meaning you may not see the message, and an error message may appear (see Figure 2-15).

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 15

 HMI Template Suite Wizard

Figure 2-14

Otherwise, confirm the message by clicking "Yes to all".

Error message
If the "Openness access" message (see Figure 2-14) is not confirmed in time, the following message appears. In this case,
click "Quit".
The Wizard is canceled. Start the Wizard a second time.
Figure 2-15

5. After completion, the following screen appears automatically.

The properties of the project are displayed as read-only. Click "Next" to go to the screen selection.
Figure 2-16

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 16

 HMI Template Suite Wizard

6. Select screens for navigation and for system operation.

Check or uncheck the checkboxes of the objects you want to use in your project (1).
When clicking the name of a grouping or an element, it will be highlighted in the preview.
When you have finished selecting the screens, click "Next" (2).
Figure 2-17

7. In the last step, all chosen settings are displayed again in summary.
Click "Finish" (1) to complete the Wizard and apply the changes to your project.
Figure 2-18

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 17

 HMI Template Suite Wizard

2.2.2. Tile navigation

General settings
1. After starting the Wizard, first select the navigation type, in this case "Tile navigation". Double-click the blue button
(interface with red border) to start the Wizard.
Figure 2-19

2. Select your device:

- Select which device (Unified Comfort Panel or PC station with WinCC Unified Runtime) you want to create (1).
- Use the drop-down list to select the desired resolution (2).
- Click the "Next" button (3).
Figure 2-20

3. Select your TIA Portal project or create a new TIA Portal project:
- Choose whether you want to modify an existing TIA project (1) or create a new project.
To extend an existing project, the project must already be open.
If you create a new project, you must also specify the "Project name" and "Location".
- Click the "Next" button (2).

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 18

 HMI Template Suite Wizard

Figure 2-21

4. Various functions now run automatically in the background, such as establishing a connection to the TIA Portal
project, etc. This can cause a brief waiting time and is necessary for transmitting the screen navigation that will be
programmed below.
Figure 2-22

After completion, the following screen appears automatically.

The properties of the project are displayed as read-only. Click "Next" to go to the screen selection screen.

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 19

 HMI Template Suite Wizard

Openness access message

While the Wizard performs some functions automatically in the background, the following message appears when you
use the Wizard for the first time. Depending on the configuration, this message may be partially obscured by the "Wizard
screen", meaning you may not see the message, and an error message may appear (see Figure 2-24).
Figure 2-23

Otherwise, confirm the message by clicking "Yes to all".

Error message
Frei verwendbar
If the "Openness access" message (see Figure 2-23) is not confirmed in time, the following message appears. In this case,
click "Quit".
The Wizard is canceled. Start the Wizard a second time.
Figure 2-24

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 20

 HMI Template Suite Wizard

Create a screen layout

The small excerpt in the Figure below shows how the "Tile navigation" created with the Wizard will later appear in the
finished HMI project. More details on this can be found at the end of this chapter.

Figure 2-25

3 1
4

(1) Root navigation level

(2) Tile text: Screen100 (alternative: name of screen that appears.
(3) Screen from the Template Suite
(4) Screen from the Template Suite

1 2
3

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 21

 HMI Template Suite Wizard

Create first navigation level

Before starting to create the individual navigation levels and their page calls with the "tiles", you
NOTE
should create an overview of the plant structure and its naming conventions. This will help you keep
track of the configuration steps below.

Example of a plant structure:

Figure 2-26

Root navigation level

Unit100 Screen 1

Unit200 Screen 2

Unit300

navigation level 1

Unit310

navigation level 2

Unit320 Screen 1

Unit321 Screen 2

Unit322 Screen 3

Unit311 Screen 1

Unit312 Screen 2

Unit100 = Plant unit 1

Unit200 = Plant unit 2
Unit300 = Plant unit 3
Unit310 = Plant unit 3, section 1…
Unit320 = Plant unit 3, section 2…

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 22

 HMI Template Suite Wizard

Assign tiles
5. In the generated HMI project, the tiles are used to access the assigned HMI Template Suite screens.
Zoom out of the view using the drop-down menu (1) for a more manageable view.
Figure 2-27

First navigation level

6. Select the "Root navigation level" (1).
7. Create a new tile by clicking the tile icon (2). Repeat this step to create additional tiles.
Tiles you have inserted will each appear as a blue rectangle (3).
Figure 2-28

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 23

 HMI Template Suite Wizard

Edit tile properties

8. Select the tile you created (2) in the Overview window (1).
The selected tile can be recognized by the color change (3).
Figure 2-29

9. The properties of the tile (2) appear under the selected tile (1). You can change various settings here. Some of the
settings are described in greater detail below.

(3) You can give the tile a background color. This lets you color-code plant areas, for example.
(4) Give the tile a unique name under the "Name" section. The name will be used for the screen navigation. Do not
change it later on. If your project is in multiple languages, try to use English names for the "Name" property where
possible.

(5) Here you can select a graphic from a preset list and have it displayed on the foreground of the tile.
(6) Give the tile a name with the "Text" section, for example the name of the screen that this tile will pull up. This
text appears at the bottom edge of the tile and serves as a tooltip about the function of the tile, for example to change
to the screen indicated. This text can be changed later on in the generated HMI project.

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 24

 HMI Template Suite Wizard

Figure 2-30

2
3

10. Change the settings for the other tiles.

Here you can see the appearance of the first three tiles. The tiles do not have any function yet.
See also Figure 2-36 for more information.
Figure 2-31

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 25

 HMI Template Suite Wizard

Optional: Assign a tile an image from the HMI Template Suite collection
Select a tile. In this example: the tile "Unit100" (1). Click the "library" icon (2) in the header. A window will open where
you can select images from the HMI Template Suite library (3). Select an image from the library collection (4) and
confirm the selection with "Ok" (5).
Figure 2-32

11. Repeat these steps if you wish to assign other tiles images from the library collection.

Optional: Assign a navigation level to a tile

12. Select a tile. In this example: the tile "Unit300" (1). Click the "navigation levels" icon (2) in the header. Clicking the
"navigation level" icon creates a new "level" where you can add more "tiles". Assign a name to the level you just
created under the properties of the new level.
Figure 2-33

The Figure below shows two levels that were added (1) and (2).
The view corresponds to the plant structure created earlier (see Figure 2-26).

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 26

 HMI Template Suite Wizard

Figure 2-34

1
2

Finish the "Tile navigation" Wizard

In the example, the tiles in the newly-created levels still need to be assigned the corresponding template screens from the
HMI Template Suite library.
Once you have completed all steps, click the "Finish" button (1). The project will be compiled.
Finally, confirm the process by clicking "OK" (2).
Figure 2-35

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 27

 HMI Template Suite Wizard

2.2.3. Tile navigation view during engineering

This chapter describes the arrangement of the screens after the Wizard has implemented your configuration and imported
it into the existing/new project.
The screens you created with the Wizard will be listed in the project tree under the "Screens" folder.

Root navigation level

The configured "navigation levels" are all in the main screens folder.
The "Root navigation level" screen item (1) contains the three "tiles" that you created earlier in Figure 2-31. Select one tile
(button) (2). You can check which page this would call up by looking in "Properties > Events > Click left mouse button"
(3).
Figure 2-36

HMI Template Suite screens

The screens used in the "Tile navigation" Wizard can be found in the project tree under "Screens > 02-Screens".

Changing screen navigation names after the fact

When the project was created with the "Tile navigation" Wizard, a "Screen navigation name" was assigned under the
"Name" parameter in the tile properties. This name is not intended to be changed later on (see Figure 2-30). If this is
nevertheless necessary, proceed as follows.

Before making any changes, make a backup copy of the current configuration.
CAUTION
By renaming the screens manually, there is a possibility that the "link" of the automatically generated
screens will be lost if the renaming is done incorrectly.

1. In the project tree, open the screen "Screens > 01_ScreenLayout > 01_ScreenLayout".
2. The names of the navigation levels are stored under "Properties > Events". Now modify these manually.

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 28

 HMI Template Suite Wizard

Figure 2-37

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 29

 HMI Template Suite Wizard

2.2.4. Launch "Tile navigation" with a button

Default setting
If you are using the HMI configuration generated by the "Tile navigation" wizard, then the screen "01_Screenlayout" will
be selected as the start screen (1). Here, the content is displayed in a screen window "swContent" (2) by the screen "Root
navigation level".
Figure 2-38

The following screen appears after starting the runtime.

By default you find the links here that you defined in the HMI Template Suite Wizard. If you wish to create more links to
HMI Template Suite screens or your own screens, you can add them as described in the next step.
Figure 2-39

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 30

 HMI Template Suite Wizard

Link to more screens

The HMI project generated by the "Tile navigation" Wizard already contains various navigation templates.
The existing "sub-navigation" (1) will be used to call up the following screen (previously the "Start screen", see Figure 2-
44) via the "Overview" button (2). In this way it is possible to access additional screens with the existing "Module x"
buttons.
Figure 2-40

2 1

Navigation within the "Tile navigation" is done with the "navigation elements" in the title bar. The "sub-navigation" is
hidden for this (it can also be shown if needed).
Figure 2-41

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 31

 HMI Template Suite Wizard

The Figure below shows a screen from the HMI Template Suite with the "sub-navigation" visible.
Figure 2-42

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 32

 HMI Template Suite Wizard

Configuration
1. Modify/check "01_ScreenLayout" screen.
a. Open the screen "01_ScreenLayout"
("Project tree > Screens > 01-Screenlayout").

b. Select the screen window "swContent".

Under "Properties > Properties > General > Screen", select the screen "10_Application" (you can also use a screen of
your choice). In this case, the screen "10_Application" serves as the start screen.

c. Select the screen window "swSubNavigation".

Make sure the "Operability" and "Visibility" are enabled in the object properties. Also make sure that the "Height"
under "Size and position" is specified as "64" (if using an MTP1200 Comfort).

2. Call up the screen "04_SubNavigation".

a. Open the "04_SubNavigation" screen
("Project tree > Screens > 04_SubNavigation").

b. Select the "Overview" button and open

"Properties > Events > Click left mouse button".

c. Add the function "ChangeScreen".

Screen name: Root navigation level
Screen window path: ../swContent ("String" must be set as the type here)

3. In all screens where the "sub-navigation" needs to be hidden, you must put the following script under the screen
properties ("Properties > Events > Loaded"):
{HMIRuntime.UI.SysFct.SetPropertyValue("../swSubNavigation", "Visible", 0)

The "0" means that the sub-navigation will be hidden. If the sub-navigation needs to remain visible, change the "0" to
"1".

Figure 2-43

This part is generated automatically!

Insert these parts between the curly braces.

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 33

 HMI Template Suite Wizard

2.3. Structure of the library

With the "HMI Template Suite" library, you can easily create a custom project using preconfigured graphics and control
elements.

WinCC Unified operator panels

The template is available for WinCC Unified operator panels with the following resolutions:

• 800x480 pixels (MTP700, MTP400 Basic, MTP700 Basic, PC Station, VoT)

• 1280x800 pixels (MTP1000, MTP1200, MTP1000 Basic, Vertical_MTP1200, MTP1200 Basic, PC
Station, VoT)
• 1366x768 pixels (MTP1500, PC Station, VoT)
• 1920x1080 pixels (MTP1900, MTP2200, PC Station, VoT)

Move the various HMI objects into you operator panel using the drag-and-drop feature.

When dragging an operator panel into your project, make sure that you also include the faceplates
NOTE
(see also Section 3.1.1).

Use the preconfigured operator panels that are stored in the library under the different resolutions in the folder "00 –
Device".
Figure 2-44

Preparing the HMI operator panel

Visualization offers the perfect basis for your project. The operator panel already contains all of the necessary elements
for operation:

• Navigation and title bar (Section 2.6.1 and 2.6.2)

• Display of notifications/alarms (Section 3.2.4)
• Settings and diagnostics pages (Section 2.5.1)
• HMI templates ("Screen templates") for various navigation levels (Section 3.2)

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 34

 HMI Template Suite Wizard

The operator panels are located in the library within the subfolders "00 – Device". They are stored
NOTE
according to resolution.
You can create your visualization on this basis and enhance it using the other objects (i.e., pop-up
screens) from the library.

Preconfigured pop-up screens

The pop-up screens are used to display alarms or to change parameters in the machine. You will find the pop-up screens
in the subfolder "01 - Resolution independent > 01 - Pop-up screen".
Figure 2-45

The preconfigured pop-up screens are screens that are used as pop-ups in WinCC Unified via a screen
NOTE
window.

Preconfigured HMI screens

The preconfigured HMI screens allow you to use dashboards, overview screens, or operator wizards.

The HMI screens are stored in the subfolder "02 - Screens" in the respective resolution.
NOTE

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 35

 HMI Template Suite Wizard

Figure 2-46

Preconfigured navigation and operator panels

Use the navigation and function buttons for the tasks and functions of the machine. You can use these elements to create
different navigation levels.

You can find the navigation and operator panels in the "04 – Grouped objects" subfolder.
NOTE

Figure 2-47

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 36

 HMI Template Suite Wizard

WinCC Unified View Of Things

The template is for SIMATIC WinCC Unified "View of Things", or "VoT" for short. SIMATIC WinCC Unified "View of Things" is
a web application in the memory of the SIMATIC S7-1500. You can find detailed information about "VoT" via the following
link \5\.
The templates are available in the following resolutions:
• 800x480 pixels
• 1280x800 pixels
• 1366x768 pixels
• 1920x1080 pixels
Move the individual objects from the "WinCC Unified View Of Thing" folder (1) into the "Web Application (2) > Screens (3)"
folder of your Controller using drag & drop.

Figure 2-48

NOTE Ensure that the components of the automation system you are using are VoT-capable. You can find
help in the compatibility tool.
You can find the tool via https://www.siemens.com/compatool.

To stay within the VoT limits, do not configure more than 10 screens. The folder "00 - Info: Use up to
NOTE
ten screens for your VoT application!" does not contain any screens and is for information purposes
only.

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 37

 HMI Template Suite Wizard

2.4. Color Concept and Palette

This section explains the color concept and color palette of the HMI Template Suite in detail.

2.4.1. Color Concept

The entire HMI Template Suite is created in a flat design. It is a minimalist design style that works without three-
dimensional effects (shadows or textures etc.). This makes configuration easier and provides a clear display for the user,
as the design style places the focus on the content.
For optimal usability and ergonomics, a simple color concept is used for this project.
The following colors are available:

• An accent color
• A complementary color
• Various graded gray tones for navigation
• Light gray for the application area (MainWindow) and for operating the system
• Another shade of gray for regular text
The accent color is used to highlight objects such as the title bar or active buttons and tabs.
The gray tones are used to separate the navigation bars and the status bar from the content of the main screen.
The Main Window background is lighter. The main content stands out due to its placement in the center of the Operator
Panel and the high-contrast differentiation from the other objects at the edge of the screen.

2.4.2. Color Palette

To achieve a consistent design during configuration, you can configure a palette of pre-assigned colors. This means that
the same colors can always be used, thus ensuring a consistent user interface design. You can store these as "User-
defined". When setting the colors in the property settings of the respective HMI object, you can use the quick access to
select the colors accordingly:
1. Click any object on a screen.
2. If you are editing the color of the object, click one of the white placeholders and then click "More colors..." to
configure the RGB code that you want to define for this placeholder.
3. You can find the selected white placeholder in the "User-defined" area.
4. Enter the RGB code of an HMI Template Suite color in "Calibration" and select the next color.
5. Repeat the previous steps for all the colors of the documentation.

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 38

 HMI Template Suite Wizard

Figure 2-49

For visualization, the following main colors are used for the HMI objects.
Table 2-1
Color RGB color code Function
0,161,209 Accent color blue ("selective" color)
For example, if a button is active

38,39,41 Anthracite
Main Navigation (background)

72,73,78 Dark gray

Title bar (background)
"Option Panel" (background)
181,190,197 Gray
Button (inactive)

205,211,215 Light gray

Main Window background

240,242,243 Light gray

Third-level navigation (background)

255,255,255 White
Status bar (background), content board (background)
SubNavigation (background)

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 39

 HMI Template Suite Wizard

The following colors are defined for status displays:

Table 2-2
Color RGB color code Function

234,206,33 Warning color 1

231,121,16 Warning color 2

222,56,88 Alarm

94,209,173 Status "OK"

0,80,104 Dark blue

Complementary color for display elements

The following color is used for ordinary text:

Table 2-3
Color RGB color code Function

133,147,153 Gray
Value descriptions for ContentBoards

2.5. Overview of the layout areas

The following names are predefined for the individual objects of the "HMI Template Suite". Table 2-4 lists the elements
and their intended use.
Table 2-4

No. Element Position Uses

1 Title bar Display title, open MainNavigation

2 Status bar Displaying important information,

e.g., current parameter set, registered user, or status of
the machine
The display can be adjusted according to the machine
3 MainWindow Display of plant modules, dashboards, machine
(application area) operation

4 MainNavigation First navigation level:

Display of the menu and switching between modules, or
displaying messages or settings

5 SubNavigation Second navigation level:

Navigation bar at the bottom edge of the screen, within
a machine module

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 40

 HMI Template Suite Wizard

No. Element Position Uses

6 Third navigation level Third navigation level:
Additional level for better structuring

A fourth navigation level is possible by using a "Tab" view.

NOTE
You can find configuration details for this navigation level in Section 2.5.1.

Screen layout with screen window

The Start Screen in WinCC Unified is divided into six screen windows, corresponding with the areas as shown in Table 2-4.

If the contents of the Title bar (1) and Status bar (2) remain the same throughout the project, a screen
NOTE
window can also be used for both areas.

Figure 2-50

1
2

6 3 5

The contents displayed in the screen window are configured in the folder "Screens".

In the "01_ScreenLayout" screen, the following elements are located next to the screen windows:
NOTE
• "btnHideMainNavigation":
Closes the MainNavigation if it is open and is clicked outside the MainNavigation.
• "RecBackground":
Semi-transparent rectangle that blocks the entire screen except the image that is called as a pop-
up.

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 41

 HMI Template Suite Wizard

2.5.1. Navigation Levels in detail

First navigation level ("MainNavigation")
Figure 2-51

Screen window
1 1

The first navigation level (MainNavigation) is implemented via a screen window "swMainNavigation" in the
"01_ScreenLayout" screen on the right side. The "03_MainNavigation" screen is displayed in the screen window.

The main navigation can be displayed via the hamburger ( ) menu in the Title bar.

If you want to show or hide levels of navigation and highlight the selected navigation point, please
NOTE
refer to Section 2.5.2.

In the main navigation, you can switch between the configured application and the global message page. In "Settings",
you can, for example, change the display language or the brightness of the operator panel.
Configuration
The first menu level is already included in the preconfigured operator panel.
Figure 2-52

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 42

 HMI Template Suite Wizard

Second navigation level

Second navigation level (SubNavigation) is the main navigation of a module. It is located at the bottom edge of the screen
and can be displayed using the "ShowSubNavigation" script (see Section 2.5.2).
Figure 2-53

You can switch between the individual HMI screens of a plant module using the navigation bar (see Section 4.2).
Configuration
The second navigation level is configured via the "swSubNavigation" screen window in the "01_ScreenLayout" screen. You
can configure page calls and adjust the text in the corresponding screen, "04_SubNavigation".
Figure 2-54

Third navigation level (optional)

Third navigation level can be used within a module to give a more detailed structure to the displayed module
functionalities.
The navigation bar is implemented as text-based navigation. However, it is possible to switch to icon-based navigation by
swapping the image. This saves space for the plant visualization on smaller operator devices.

Figure 2-55

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 43

 HMI Template Suite Wizard

Figure 2-56

Configuration
The third navigation level is also implemented as the "swThirdNavigation" screen window in the "01_ScreenLayout"
screen. You can configure the page calls and add button text for the third-level navigation bar in the corresponding
screen, "05_ThirdNavigation". If you want to use the icon variant, you must configure the associated
"05_ThirdNavigation_Icons" screen and select it in the screen window under the "Screen" property.
Figure 2-57

Fourth navigation level (optional)

On an HMI screen, you also have the option of displaying content in a clear and structured manner using the following
"Tab" view.
Operators are familiar with tab views as they appear in a number of everyday applications, which makes them intuitive to
use.

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 44

 HMI Template Suite Wizard

Figure 2-58

Configuration:
A "Tab" view is already stored in the "Mixed Examples" folder in the library.
The contents of the tabs are each implemented in a separate screen. The different tabs allow you to set the respective
screen in the screen window via a "click" event.
Figure 2-59

2.5.2. Script functions of the navigation levels

Multiple scripts from the global "Navigation" module are used within the navigation levels.

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 45

 HMI Template Suite Wizard

Figure 2-60

To ensure that the scripts are executed correctly, the screen objects within the navigation must be
NOTE
numbered sequentially. The name before the number (e.g., "btnSubNav") can be freely defined, but
must remain the same for all elements.
e.g., "btnSubNav1", "btnSubNav2", "btnSubNav3", etc.

"HideMainNavigation" function
This script function hides the first navigation level "MainNavigation".

"HideSubNavigation" function
This script function hides the second navigation level "SubNavigation".

"HideThirdNavigation" function
This script function hides the third navigation level "ThirdNavigation".

"HighlightButton (ButtonName)" function

This script function highlights the screen object in the accent color that was defined in the "ButtonName" parameter.

NOTE The main navigation screen objects are named "txtMainNav.." by default. If you change the name of
the screen objects within the MainNavigation, you must adapt it in the script function as well.

"HighlightThirdNavIcon (ButtonName)" function

This script function highlights the screen object in the accent color that was defined in the "ButtonName" parameter. The
function is an extension of the "HighlightButton" function. Visibility has also been added for the various graphic elements.

NOTE The screen objects in the navigation are named "btnThirdNav..", "gfxThirdNavActive.." and
"gfxThirdNavNotActive.." by default. If you change the name of the screen objects within
ThirdNavigation_Icons, you must adapt it in the script function as well.

"ShowMainNavigation" function
The script function displays the first navigation level "MainNavigation".

"ShowSubNavigation (ButtonNumber)" function

The script function shows the second navigation level "SubNavigation". With the parameter "ButtonNumber", you can
specify which screen object of the "SubNavigation" should be set to active.

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 46

 HMI Template Suite Wizard

"ShowThirdNavigation (ButtonNumber)" function

The script function shows the third navigation level "ThirdNavigation". With the parameter "ButtonNumber", you can
specify which screen object of the "ThirdNavigation" should be set to active.

If the second-level or third navigation level is displayed again after a screen change, the screen object
NOTE
specified with the "ButtonNumber" parameter is set to active.

2.6. Elements of the HMI Template

2.6.1. Title bar
The "Title bar" is located at the top of the screen. It contains a short title that shows the operator of the plant which area
of the visualization it deals with. The title should be informative. The first navigation level can be accessed via the menu
button on the right side.
Dark gray is used as the background color for the "Title bar".
Figure 2-61

Clicking the text of the "Title bar" will take you to the overview screen.
NOTE

2.6.2. Status bar

The "Status bar" is found directly beneath the "Title bar". The "Status bar" contains dynamic components and displays:

• the state of the different system sections

• the parameter set currently being used
• and the user
Figure 2-62

The color of the left icon visualizes the current operating state of the system.
The color white is used for the "Status bar". This makes it stand out from the upper "Title bar" and the lower main window.

Statuses of the Status bar

This section briefly explains the appearance of the different plant states.
Depending on the condition of each machine (tag: CurrentMachineState), the "Status bar" will change as follows:
Figure 2-63

CurrentMachineState = 1

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 47

 HMI Template Suite Wizard

Figure 2-64

CurrentMachineState = 2-3

Figure 2-65

CurrentMachineState = 4

2.6.3. Option Panel

The "Option Panel" can be displayed on the right side of the screen.
The following actions can be performed in the Option Panel:

• Functions or actions that have a temporary effect on the machine.

• Global functions that should be accessible from multiple or all HMI screens.
Figure 2-66

Access the Option Panel on the right side of the screen:

Use the button on the right side of the screen to open the Option Panel (see Figure 2-66).
Since the button is relatively narrow, icons must be used here.

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 48

 HMI Template Suite Wizard

Figure 2-67

2.6.4. MainWindow
The screen edges of the operator panel are used for navigation or to display global functions. The control area of the plant
or the main window is located in the middle of the operator panel.
Figure 2-68

This is the area where the operator’s main attention is focused. For this reason, configure the visualization of the machine
in the main area of the operator panel. This central area takes up about 70% of the display area. The background color is
light gray. The contents of the main display can consist of additional tabs or controls for navigation within the screen.

2.6.5. Buttons and Icons

Size
For the HMI Template Suite, a minimum button size of 40x40px has been defined. This ensures that all buttons are of
sufficient size to be operated.

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 49

 HMI Template Suite Wizard

Appearance
The uniform design of the buttons is ensured by the use of an operating concept. The following Table lists the objects in
your interface and what they mean.
Table 2-5
Object name Appearance Use/place of use
"Button" Standard button, for normal operating action e.g., executing a
function or opening a pop-up screen
"Cancel_Abort_ Close" Button to cancel actions or close pop-up screens.
→ no effect on the machine
"Delete" Button that triggers a delete action.
→ critical actions
"Execute_Action" Button for actions that have an effect on the machine, such as
executing script functions or setting machine parameters.
"StatusBar" Button for opening the pop-up screens of the Status bar, e.g.,
logon dialog or Recipe view.

Button for opening a pop-up screen for controlling the plant

module.

→ Additional content via pop-ups

"SubNavigation_ Inactive" Navigation button for the "SubNavigation" bar. Display of inactive
status (unpressed).
"SubNavigation_ Active" Navigation button for the "SubNavigation" bar. Display of active
status (pressed).
"ScreenTab_ Button for the "Tab bar",
Inactive" unpressed state
"ScreenTab_ Button for the "Tab bar",
Active" pressed state

To configure buttons without a color gradient, text fields were used in the "HMI Template Suite_V17
NOTE
(Unified)".
With WinCC Unified, the event "Click left mouse button" can also be used to execute "Events" on a "text
box". This is done using both mouse and touch operation.

2.6.6. Text and I/O Fields

To ensure a uniform and clean typeface on the operator panels, text and I/O fields can be configured in the "HMI Template
Suite" in a standardized way.
This ensures consistency and allows the HMI to be configured more intuitively and quickly.

Size
Present the text in such a way that the operators can recognize them quickly and reliably.
The font size used depends on the distance between the operator and the configured operator panel.

Font
"Siemens Sans" was used as the default font for all text and process values.

Appearance of texts
Table 2-6

Style name Appearance Use/place of use

Standard
Standard style Standard object, unrestricted

"Regular (center)" Standard object, unrestricted

"Regular (right)" Standard object, unrestricted

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 50

 HMI Template Suite Wizard

Style name Appearance Use/place of use

Title bar, Status bar & Pop-ups
"Headline" Dark heading, unrestricted

"Headline (Center)" The middle heading, unrestricted

"SubHeadline" Heading, only for pop-up screens

"TitleBar" Font, only for the Title bar
"Navigation" Font, only for main navigation purposes

"SubNavigation_Active" Used for active navigation or tab

"SubNavigation_Inactive" Used for inactive navigation or tab

"StatusBar_Title" Heading for the Status bar
"StatusBar_Text" Text, only for the Status bar
Notifications
"Notification_OK" Notification at the bottom of the screen, for non-
critical information
"Notification_Warning" Notification at the bottom of the screen, for
important information
"Notification_error" Notification at the bottom of the screen, for
critical information
Miscellaneous
"OptionPanel_Title" Heading for the Option Panel

"ContenBoard_Title" Heading, only for use in HMI faceplates.

"Default" Display of the stored value or for standard values

Appearance of I/O fields

Entry fields are marked with a white background. If the I/O field does not have a white background or frame, it is not
possible to add an entry in the field.
The operator can thus see at a glance whether the field can be edited.
Table 2-7

Name Appearance Use/place of use

"Standard style" Standard object, unrestricted
"Regular (center)" Standard object, unrestricted
"Regular (right)" Standard object, unrestricted
"Regular_Out (left)" Use only to output values
"Regular_Out (center)" Use only to output values

"Regular_Out (right)" Use only to output values

"StatusBar" Used for the Status bar

"ContentBoard_Output" Output and entry field on a "ContentBoard"
"ContentBoard_Output (center)" Output and entry field on a "ContentBoard"
"ContentBoard_Large_Output" Output and entry field on a "ContentBoard"

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 51

 HMI Template Suite Wizard

2.6.7. Rectangles
Rectangle styles are defined with the main colors (Colors, see Section 2.4).
The rectangles are defined without a border so that they fit with the intended flat design.
Table 2-8

Name Appearance Use/place of use

"Content board rectangle" White rectangle, no border, Background for visual grouping of elements; content
6 px corner radius board border

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 52

 Library elements

3. Library elements
This section explains the additionally available screens and screen objects and their intended use.

3.1. Screen objects

3.1.1. Faceplates
You can find the following faceplates in the library under "Types":
Figure 3-1

If you drag a device available in the global library into your project, all faceplates linked to the device
NOTE
are automatically created in the project library. You can find the faceplates you have created under
"Project library" > "Types".
Additional steps are not required.

NOTE If you drag a faceplate available in the global library directly into the project library or into the screen
where it is needed, the faceplate is automatically added to the project library.

You can interconnect the "Faceplates" using the type interface.

1. In Engineering, select a faceplate in the screen.
2. Go to the "Properties" tab in the Inspector window
3. Open the "Interface" group in the "Properties" under "Miscellaneous". The corresponding sub-section explains how to
connect the individual elements.

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 53

 Library elements

Figure 3-2

Below you will find an overview of the faceplates in the HMI Template Suite.

"Progress Indicator"
The "progress indicator" can be used to visualize the progress of a process. Each point indicates a process step (see
Figure 3-3). As soon as the step has been completed, it is displayed in blue with a white checkmark. There are templates
with 3, 4, and 5 steps.
Figure 3-3

At the interface, you can select an INT tag for each step (2 = step completed, 1 = step active, 0 = step still pending).

Table 3-1

Interface Function
"Step1" Connect one HMI tag for each step.
"Step2" Depending on the value of the tag, the display changes as follows:
"Step3"
HMI tag = "0"
…
HMI tag = "1"

HMI tag = "2"

"Value Stepper"
The "Value Stepper" is an element with two buttons used to increase or decrease a value. The current value is displayed
between the two steppers.
Figure 3-4

The library contains different "Value Stepper" templates for REAL and INT variable values.
One tag for the incrementation (delta) and another for the process value must be connected to the control panel
interface.

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 54

 Library elements

Table 3-2

Interface Function
"Value" Connect to an HMI tag (Int/LReal).
If you click the "-" button, the tag value is reduced by the delta value.
If you click the "+" button, the tag value is increased by the delta value.
"Delta" Connect to an HMI tag (Int/LReal).
The "Value" tag is incremented or decremented by this value.

The following "value steppers" can be found in the HMI Template Suite.
Table 3-3
Faceplate name Appearance Benefits
"ValueStepperInt" Horizontal "value stepper" with rounded square buttons for
switching between the values for the process values and delta
values as INT tags with the output as an INT value
"ValueStepperInt_Vertical" Vertical "value stepper" with square buttons for switching between
the values for the process values and delta values as REAL tags with
output as INT values

"ValueStepperInt_Vertical2" Vertical "value stepper" with triangular buttons for switching

between the values for the process values and delta values as INT
tags with the output as an INT value

"ValueStepperReal" Horizontal "value stepper" with rounded square buttons for

switching between the values for the process values and delta
values as INT tags with the output as a REAL value
"ValueStepperReal_Vertical" Vertical "value stepper" with square buttons for switching between
the values for the process values and delta values as REAL tags with
the output as a REAL value

"ValueStepperReal_Vertical2" Vertical "value stepper" with triangular buttons for switching

between the values for the process values and delta values as REAL
tags with the output as a REAL value

"PieChart"
The "PieChart" is used to display KPI values. You can connect up to 5 parameters as INT tags to the interface and display
them in the diagram.
Figure 3-5

"Control Module PopUp"

There are 4 different faceplates in the "Control Module PopUp" folder that can be used as pop-up windows to control and
display certain process values. These only serve as a template for displaying certain content and cannot be parameterized
via the faceplates interface, as this is not fully configured. If required, you can configure the interface yourself.
You will find the following "Control Module PopUp" in the HMI Template Suite.

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 55

 Library elements

Table 3-4
Faceplate name Appearance Benefits
"BasicControlModulPopUp_Layer1" Faceplates for displaying a process variable on an
alternative gauge control

"BasicControlModulPopUP_Layer2_1" Faceplates for parameterization in the Runtime of a

process variable

"BasicControlModulPopUP_Layer2_2" Faceplates for parameterization in the Runtime of a

scale

"BasicControlModulPopUP_Layer2_3" Faceplates for parameterizing certain limits in

Runtime

3.1.2. ContentBoard
The "ContentBoard" is a purely visual tool for grouping and structuring HMI elements on a screen.
The "ContentBoard" consists of a white rectangle. This rectangle is placed behind the HMI objects to represent a functional
context.

Configuration
Insert a new screen into your image and assign the color white to the rectangle.

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 56

 Library elements

Figure 3-6

You can use horizontal and vertical lines within the content board as additional structuring features.
NOTE

3.1.3. Button with status output

The "Button with status output" is a screen object that combines a button and a status display. Here it is possible to react
to various events while showing the value of a tag at the same time, for example.
Locate the element in the "00_CopyTemplate" screen.

Figure 3-7

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 57

 Library elements

3.2. HMI screens

In the library, you can find ready-made HMI screens for various applications. These templates should support you in
creating your own HMI operator panel. The following types of templates are at your disposal:

• Dashboards (Section 3.2.1)

• Machine overviews (Section 3.2.2)
• Wizards (Section 3.2.3)
• Function panel (Section 3.2.5)
• Notifications (Section 3.2.4)
• Additional example screens (Section 3.2.6)

Figure 3-8

The screens serve as a template for your visualization. You still have to connect the objects properly so
NOTE
that the objects can display process values.

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 58

 Library elements

3.2.1. Dashboards
With a Dashboard, you can display the most important information and analyses such as the "efficiency" or "produced
quantity" of the machine. Furthermore, the most important HMI Screens are linked to it.
The Dashboard, therefore, displays the most important information about a machine and links to other HMI screens at a
glance.
In the library, different versions are preconfigured for different application scenarios. From the multitude of display
formats, you can always put together new Dashboards individually adapted to your machine. In addition to the two
variants shown, further variants are available in the library.

Figure 3-9

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 59

 Library elements

3.2.2. Machine modules

The Machine Modules Overview allows you to keep track of your area of responsibility at all times. The machine module
overview pages show the machine states or possible errors for each subarea or module and thus provide a good overview.
One click takes you to the detailed view of a module.
In addition to the two variants shown, further variants are available in the library.

Figure 3-10

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 60

 Library elements

3.2.3. Wizard
Use
Use a "Wizard" to guide the operator through some steps in a predefined order.
The Wizard should always appear on the entire screen.
This allows the operator to concentrate fully on the current step. Only apply the new settings to the configuration once
the operator has completed all steps.
Versions with 3 to 5 steps are available in the Wizard.
Figure 3-11

3.2.4. Notifications
Use
Notifications are displayed at the bottom of the screen. If you are in second navigation level, the message overlays the
navigation elements (see Figure 3-12). If you do not use the second navigation level, the notification also appears along
the bottom of the screen.

Figure 3-12

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 61

 Library elements

3.2.5. Function panel

You can use the "Function Panel" to dynamically enable or disable a specific functionality or module of your machine.
By pressing a button, the previous state is inverted (two states). Depending on the status, it should be displayed with a
different color.
Different versions are available for different panel sizes and variants with 4, 8, and 16 buttons.
Figure 3-13

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 62

 Library elements

3.2.6. Additional example screens ("mixed

examples")
Mixed examples are preconfigured in the library in order to demonstrate the visualization concept and inspire ideas for
your own implementation.
In addition to the two variants shown, further variants are available in the library.
Figure 3-14

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 63

 Configuration notes

4. Configuration notes
Requirements
Before you start configuring your HMI operator panel, you must prepare a complete design concept with concrete
visualization ideas.

If you need more information and tips on creating a design concept, take a look at the free "HMI
NOTE
Design Masterclass".
The "HMI Design Masterclass" gives you an introduction to the topic of HMI design in 7 x 10 min video
units.
Link to the Masterclass: https://new.siemens.com/global/en/products/automation/simatic-hmi/design-
masterclass.html

Integrating the library

1. Download the library from the article page and unzip it.
https://support.industry.siemens.com/cs/ww/en/view/91174767
2. Open the library with TIA Portal. Create a new project or open an existing configuration.
3. Open the "Libraries" task card (1).
4. Then open the "Global libraries" palette (2).
5. Click the icon to open a library (3). The "Open Global Library" window opens.

Figure 4-1

6. Select the library

- In the window, navigate to the file folder where the library file is located (1).
- Select the file "HMI Template Suite (WinCC Unified)_V18" (2).
- Then click "Open" (3).

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 64

Frei verwendbar
 Configuration notes

Figure 4-2

7. View of the open library file (1).

From here you can navigate to the screen objects or the fully configured HMI operator panels.
Figure 4-3

Frei verwendbar

8. Once you have selected the appropriate object, move the object to the project tree using the drag-and-drop feature. In
this case, the fully configured "MTP1200" is added to the project tree using "Add new device".

NOTE The operator panels are sorted by resolution in the "00 – Device" folder. All elements (navigation bars,
example screens, etc.) of the library are already included in these operator panels.

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 65

 Configuration notes

Figure 4-4

9. In the next step, copy the faceplate from the library into your project (see Section 3.1.1).

10. The operator panel is now fully configured. You can test it immediately with the runtime simulation or load it into a
real operator panel. For this, adjust the IP address to match your configuration.

Using additional screen objects

Use the other screen objects, as well as the preconfigured HMI screens and assemble your visualization step by step. You
can remove unused elements from the operator panel.

Frei verwendbar

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 66

 Configuration notes

4.1. Set the language

The stored projects and screen objects have been created in the following languages.

• German (Germany)
• English (United States)
For the project texts to be displayed correctly, the previously mentioned languages must be activated. Check the language
settings in your project.

• "Project tree > Languages & resources > Project languages"

Figure 4-5

• "Project tree > Configuration > Runtime settings"

Figure 4-6

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 67

 Configuration notes

4.2. Creating templates with screen

windows
A "01_ScreenLayout" screen with several screen window is created in the library (see also Section 2.5). You can create
your templates according to the arrangement of the individual screen windows. You can use the screen window object
property "Visibility" to define in which screen the faceplate should be visible.
Figure 4-7

Access screens via navigation levels

The navigation levels can be used, for example, to access screens. To configure these, proceed as follows:
1. Select the screen object that you want to use to switch screens.
2. Open the "Events" of the screen object.
3. Add the "ChangeScreen" system function.
Figure 4-8

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 68

 Configuration notes

4. Enter the name of the screen to be displayed in the center screen window.
5. Change the input mode for the screen window path to "String".
6. Enter the path "../swContent" in the field "Screen window path".
Figure 4-9

Runtime screen
NOTE
The button for accessing the currently active screen is always displayed in the accent color.

Highlighting the active screen is done using the script function "HighlightButton" in the Global Module
"Navigation".

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 69

 Configuration notes

4.3. Accessing Screens as Pop-Ups

In WinCC Unified, you can access screens as pop-ups. The system function "OpenScreenInPopup" is used for this.
Figure 4-10

By setting the "WindowFlags" property to zero, you hide all faceplate properties (frame, moveable,
NOTE
etc.).

Block background
To focus on the content of the screen (opened as a pop-up), the background is displayed as locked. For this purpose, a
semi-transparent rectangle has been configured in the "01_Screenlayout" screen in level 6. The rectangle is turned visible
when the screen is displayed.

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 70

 Configuration notes

Figure 4-11

4.4. Example operator actions

This chapter shows the basic operation of the "HMI Template Suite".
In this application example, the "Application" button is not used to execute any function. Create your own visualization of
your system, which you can access with the "Application" button.
An example is shown of what the operation of your machine can look like.

First menu level

1. Click the hamburger menu in the upper right corner (1).
In this first menu level, you have access to your main visualization, a message and diagnostics window, and a settings
page.
2. Click the first "Application" button to start your visualization.
Figure 4-12

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 71

 Configuration notes

Use dashboards to create an overview

A Dashboard is recommended for the Start Page, e.g., with the screen "SCREEN_01_Dashboard_Overview_3". This screen
shows both the current efficiency and that of the last 3 days.

On the left you can see 2 modules. The button allows you to then jump from the Dashboard to the Module
Overview.

Figure 4-13

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 72

 Appendix

5. Appendix
5.1. Service and support
SiePortal
The integrated platform for product selection, purchasing and support - and connection of Industry Mall and Online
support. The SiePortal home page replaces the previous home pages of the Industry Mall and the Online Support Portal
(SIOS) and combines them.

• Products & Services

In Products & Services, you can find all our offerings as previously available in Mall Catalog.
• Support
In Support, you can find all information helpful for resolving technical issues with our products.
• mySieportal
mySiePortal collects all your personal data and processes, from your account to current orders, service requests and
more. You can only see the full range of functions here after you have logged in.
You can access SiePortal via this address: sieportal.siemens.com

Technical Support
The Technical Support of Siemens Industry provides you fast and competent support regarding all technical queries with
numerous tailor-made offers – ranging from basic support to individual support contracts.
Please send queries to Technical Support via Web form: support.industry.siemens.com/cs/my/src

SITRAIN – Digital Industry Academy

We support you with our globally available training courses for industry with practical experience, innovative learning
methods and a concept that’s tailored to the customer’s specific needs.
For more information on our offered trainings and courses, as well as their locations and dates, refer to our web page:
siemens.com/sitrain

Industry Online Support app

You will receive optimum support wherever you are with the "Industry Online Support" app. The app is available for iOS
and Android:

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 73

 Appendix

5.2. Links and literature

No. Topic

\1\ Siemens Industry Online Support

https://support.industry.siemens.com

\2\ Link to the article page of the application example

https://support.industry.siemens.com/cs/ww/en/view/91174767

\3\ Link to the HMI Design Masterclass Video series

https://new.siemens.com/global/en/products/automation/simatic-hmi/design-masterclass.html

\4\ Link to the HMI Template Suite page

https://new.siemens.com/global/en/products/automation/simatic-hmi/hmi-template-suite.html

\5\ SIMATIC WinCC Unified "View of Things ("VoT")

https://support.industry.siemens.com/cs/ww/en/view/109803395

5.3. Change documentation

Version Date Modification

V1.0 04/2020 First version

V2.0 11/2021 Adaptation to V17, Tile navigation

V3.0 12/2021 Added "Unified View Of Things"

V4.0 03/2023 Adaptation to V18

V4.1 06/2023 Accessibility and procedure of the WinCC Unified V18 Wizards

V4.2 09/2024 Added "Unified Basic Panels" and adaptation to V18 Upd3

Entry ID: 91174767 | V4.2 | 09/2024 © Siemens 2024 | 74