HMI Template Suite

The HMI Template Suite assists you in

creating a modern and functional HMI
design with the help of templates,
images and objects.

Siemens
WinCC Comfort V15.1, WinCC Advanced V15.1 Industry
Online
https://support.industry.siemens.com/cs/ww/en/view/91174767 Support
 Legal information

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
© Siemens AG 2019 All rights reserved

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
at: https://www.siemens.com/industrialsecurity.

HMI Template Suite

Entry-ID: 91174767, V2.1, 03/2019 2
 Table of contents

Table of contents
Legal information ......................................................................................................... 2
1 Introduction ........................................................................................................ 4
1.1 Overview............................................................................................... 4
1.2 Principle of operation............................................................................ 4
1.3 Components used ................................................................................ 5
1.4 Structure of the library .......................................................................... 6
1.5 Differences in functionality between WinCC Comfort and Basic
operating devices ................................................................................. 9
1.6 Color and design concept................................................................... 10
1.6.1 Concept .............................................................................................. 10
1.6.2 Colors ................................................................................................. 11
1.7 HMI Template Design......................................................................... 12
1.8 Overview of Layouts ........................................................................... 12
1.8.1 Navigation level in detail..................................................................... 13
1.8.2 Operating philosophy ......................................................................... 15
1.9 Elements of the HMI template ............................................................ 16
1.9.1 Title bar............................................................................................... 16
1.9.2 Status bar ........................................................................................... 16
1.9.3 Option Panel ....................................................................................... 17
1.9.4 Main Window ...................................................................................... 19
1.9.5 Buttons and Icons ............................................................................... 20
1.9.6 Texts and IO fields ............................................................................. 21
© Siemens AG 2019 All rights reserved

1.9.7 Rectangles ......................................................................................... 23

2 Library elements .............................................................................................. 24
2.1 Picture objects .................................................................................... 24
2.1.1 Checkbox ........................................................................................... 25
2.1.2 Radio button ....................................................................................... 25
2.1.3 Page Indicator .................................................................................... 26
2.1.4 Process Indicator ................................................................................ 26
2.1.5 Switch ................................................................................................. 27
2.1.6 Value Stepper ..................................................................................... 27
2.1.7 ContentBoard ..................................................................................... 28
2.2 HMI screens ....................................................................................... 29
2.2.1 Dashboards ........................................................................................ 30
2.2.2 MachineModules ................................................................................ 31
2.2.3 Wizard ................................................................................................ 32
2.2.4 Notifications ........................................................................................ 32
2.2.5 Function Panel ................................................................................... 33
2.2.6 Further example images ("Mixed Examples") .................................... 34
3 Commissioning ................................................................................................ 35
3.1 Notes on configuration ....................................................................... 37
3.2 Configuration Examples ..................................................................... 38
4 Appendix .......................................................................................................... 39
4.1 Service and Support ........................................................................... 39
4.2 Links and Literature ............................................................................ 40
4.3 Change documentation ...................................................................... 40

HMI Template Suite

Entry-ID: 91174767, V2.1, 03/2019 3
 1 Introduction

1 Introduction
1.1 Overview
Plants and machines are becoming more and more complex and the demands
placed on the operator are increasing. For this reason, designing an intuitive and
graphically appealing user interface as a link between human and machine is
becoming steadily more important.
The HMI Template Suite offers you templates and ideas to make your HMI
operator panel clear and modern looking.

Figure 1-1 Visualization using the "HMI Template Suite"

© Siemens AG 2019 All rights reserved

Layout and design are designed for smooth operation, transparency and
expandability. 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 panel. This
operating panel uses the style "HMI Template Suite V2.x.x" as well as basic
navigation and operating functions. On this basis, you can easily build and extend
your project modularly using further HMI objects from the library.
This gives you a uniform "look & feel" with a consistent operating concept, as well
as saving time during configuration.

HMI Template Suite

Entry-ID: 91174767, V2.1, 03/2019 4
 1 Introduction

1.3 Components used

This application example was created with these hardware and software
components:
Table 1-1
Components Quantity Article number Note
SIMATIC HMI 1 6AV2124-0JC01-0AX0 Alternatively, you can
TP900 Comfort also use panels from
between
7 to 15 inches in size.
SIMATIC HMI 1 6AV2123-2JB03-0AX0 Alternatively, you can
KTP 900 Basic also use panels from
between
7 to 15 inches in size.
WinCC Comfort 1 6AV2101-0AA05-0AA5 Engineering in
V15.1 TIA Portal.
WinCC Basic 1 6AV2100-0AA05-0AA5 Engineering in
V15.1 TIA Portal.

This application example consists of the following components:

Table 1-2
© Siemens AG 2019 All rights reserved

Components File name Note

HMI Template Suite 91174767_LhmiTemplateSuite_V15_1.zip The library
Library can be downloaded
under Contribution
ID 91174767

Documentation 91174767_HMITemplateSuiteV2_de.pdf This document

HMI Template Suite

Entry-ID: 91174767, V2.1, 03/2019 5
 1 Introduction

1.4 Structure of the library

With the "HMI Template Suite" library, you can create your project individually and
with ease using prefabricated graphics and control elements.
The template is available in resolutions of 800x480 pixels and 1280x800 pixels for
WinCC Comfort and WinCC Basic.
Drag & Drop the various HMI objects into you operating device. Use the
preconfigured operating device stored in the library under "00 - Device" folder.

Note To integrate HMI objects into your own operating device, make sure to use the
HMI style "HMITemplateSuite" in your operating device.

Figure 1-2
© Siemens AG 2019 All rights reserved

You can access the following content:

Prepared HMI operator panel

The visualization offers the perfect basis for your project. The operator panel
already contains all of the necessary elements for operation:
• Navigation and title bar
• Display of notifications/alarms
• Adjustment and Diagnosis Pages
• HMI Templates for different deep navigation levels

Note The operator devices are stored in Subfolder "00 - Device" of the library.
You can create your visualization on this basis and extend it using the other
objects in the library.

HMI Template Suite

Entry-ID: 91174767, V2.1, 03/2019 6
 1 Introduction

Preconfigured pop-up screens

The pop-up screens are used to display alarms or to change parameters in the
machine.

Figure 1-3 Pop-up screens

© Siemens AG 2019 All rights reserved

Preconfigured HMI images

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

Figure 1-4 HMI Screens

HMI Template Suite

Entry-ID: 91174767, V2.1, 03/2019 7
 1 Introduction

Preconfigured navigation and control 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.

Note You find the navigation and control Panels in subfolder "04 Grouped objects".
They are sorted by resolution.

Figure 1-5 Navigation and Control objects

© Siemens AG 2019 All rights reserved

HMI Template Suite

Entry-ID: 91174767, V2.1, 03/2019 8
 1 Introduction

1.5 Differences in functionality between WinCC Comfort

and Basic operating devices
The concept is designed and optimized for the functionalities of WinCC Comfort
operating devices. Due to the different functional scope of the WinCC systems,
some functions and HMI elements cannot be displayed in other WinCC systems.
The adaptations and changes of the Template Suite for the individual WinCC
systems are described in the following section.

Colors
Compared to SIMATIC HMI Comfort or Mobile Panels, SIMATIC HMI Basic Panels
provide a limited color space. The colors used in the library are automatically
converted to the next possible color in the "Basic" RGB color space. This may lead
to slight color discrepancies compared to WinCC Comfort Panels.

Pop-up screens
If a pop-up image is included in the concept, it is converted into a full-screen
visualization in WinCC Basic. The full screen mode allows the operator to close the
image only with the "Close" button after it has been entered. Usability is therefore
comparable to that of pop-up images. When the operator clicks on the "Close"
button, the last active image with the navigation bars is displayed again.
Figure 1-6
© Siemens AG 2019 All rights reserved

Navigation slide-in
The slide-in for the first menu level cannot be displayed in WinCC Basic. As an
alternative, a permanently visible navigation bar is displayed on the right side of the
screen. The navigation bar is configured in all HMI templates. By using icons for
the navigation bar you save space for your visualization.
Figure 1-7

HMI Types
The screen objects in section 2.1 are available as HMI types. HMI Types are not
supported in WinCC Basic. The objects can therefore not be used in WinCC Basic.

HMI Template Suite

Entry-ID: 91174767, V2.1, 03/2019 9
 1 Introduction

1.6 Color and design concept

1.6.1 Concept

The entire project is created in flat design. Flat design is a minimalist style that
refrains from using three-dimensional effects (shadows or textures). This facilitates
configuration and provides clarity for operators, as the focus remains on the
content.
For optimal usability and ergonomics, a simple color concept is chosen for this
project.
Colors:
• An accent color
• Various graded gray tones for navigation
• Light gray for the MainWindow, to operate the plant

The accent color is used to highlight objects such as the title bar or to highlight
active buttons and tabs.
Shades of gray are used to distinguish the navigation bars and the status bar from
the contents of the main screen.
The background of the main screen is bright. By placing the operator panel in the
center and starkly contrasting the other objects at the edge of the screen, the
© Siemens AG 2019 All rights reserved

actual contents stand out.

HMI styles
Using the HMI styles ensures a uniform design for the TIA Portal project.
The HMI style of the "HMITemplateSuite V2.0.0" defines the design of the
elements used.

Note The HMI style is optimized for the "Siemens Sans" font. If you use other fonts,
optical deviations may occur.

Figure 1-8 HMI Style "HMITemplateSuite

HMI Template Suite

Entry-ID: 91174767, V2.1, 03/2019 10
 1 Introduction

1.6.2 Colors

The following colors in the HMI style are used for the visualization or for HMI
objects.
Table 1-3 Main colors
Color RGB color code Function
0, 95, 135 Accent color, blue,
Title bar

218, 220, 224 Light,

Main window

39, 51, 56 Dark gray

Status bar (background)

64, 77, 83 Gray,

Status bar (buttons)

196, 199, 204 Light gray

© Siemens AG 2019 All rights reserved

Option panel, background

249, 247, 248 White

ContentBoard

The following colors are defined for status displays:

Table 1-4 Status colors
Color RGB color code Function
234, 206, 33 Warning color 1

231.121, 16 Warning color 2

202, 51, 51 Alarm

133, 164, 7 Status OK

HMI Template Suite

Entry-ID: 91174767, V2.1, 03/2019 11
 1 Introduction

1.7 HMI Template Design

This section covers the design and concept of the "HMI Template Suite". The
prefabricated operator panel already contains the layout, navigation, user
administration as well as signaling and diagnostic systems.

1.8 Overview of Layouts

The following names are predefined for the individual objects of the "HMI Template
Suite". In Table 1-5 the elements and their intended use are listed.
Table 1-5 Designation of navigational levels
Element Position Uses
1. Title bar Display of the title, opening the option
panel

2. Status bar Displaying important information,

e.g., current recipe, logged in user or
status of the machine.
The display can be adjusted according
to the machine
© Siemens AG 2019 All rights reserved

3. Navigation First level navigation:

slide-in Display of the menu and switching
between modules or displaying
messages or settings.

4. SubNavigation Second level navigation

Navigation bar at the bottom edge of
the screen. Within a machine module

5. Thirdlevel- 3rd level navigation:

Navigation Additional level for dividing the control
system, optional

Note A further navigation level is possible via a "Tab" view.

Configuration details for this navigation level can be found in chapter 1.8.1.

HMI Template Suite

Entry-ID: 91174767, V2.1, 03/2019 12
 1 Introduction

1.8.1 Navigation level in detail

First level navigation

Figure 1-9 HMI Template Suite, First menu level

1 1 Slide-In

First level navigation is triggered using a slide-in on the right-hand side.

The slide-in gives you access to the global HMI screens. You can use it to switch
between the configured application, the global message page and the diagnostics
© Siemens AG 2019 All rights reserved

page. In the "Settings", you can edit aspects such as the display language or the
brightness of the operator panel.
Configuration
The first menu level is already included in the preconfigured operating device.

Note Please note the differences for WinCC Basic operator interfaces, Slide-In
see chapter 1.5.

Second level navigation

Second level navigation is the main navigation of a module. It is located at the
bottom of the screen and is permanently visible.
Figure 1-10 HMI Template Suite, Second menu level

You can switch between the individual HMI screens of a plant module using the
navigation bar.
Configuration
The second navigation level is contained in the HMI Templates
"Two_Nav_Levels*". In these templates you can project page calls and adapt the
text.

HMI Template Suite

Entry-ID: 91174767, V2.1, 03/2019 13
 1 Introduction

Figure 1-11 HMI Templates, second navigation level

Third level of navigation (optional).

Third level navigation can be used within a module to give a more detailed
structure to the module functionalities.
Figure 1-12 Third navigation level
© Siemens AG 2019 All rights reserved

The navigation bar is designed for icons, as text-based navigation takes up too
much space on smaller operator panels, and does not allow enough room for plant
configuration.

Configuration
The third navigation level is contained in the HMI Templates "Three_Nav_Levels*".
In these templates you can configure the page views and insert the icons for the
buttons of the third navigation bar.
Figure 1-13 HMI Templates, third navigation level

HMI Template Suite

Entry-ID: 91174767, V2.1, 03/2019 14
 1 Introduction

Fourth level navigation (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.

Figure 1-14 Example visualization

Configuration:
A "Tab" view is already stored in the library as an "example screen".
© Siemens AG 2019 All rights reserved

With the different tabs you can set a variable via a "Button Click" event. You can
show the corresponding content with "Visibility" animations.
Figure 1-15 HMI screen "Tab view"

1.8.2 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 status of the machine?
• How is the operator shown when or where an operator action is necessary?
• How is it made clear to the operator of the implications of an operator action?
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.

HMI Template Suite

Entry-ID: 91174767, V2.1, 03/2019 15
 1 Introduction

1.9 Elements of the HMI template

1.9.1 Title bar

The title bar is located at the upper edge 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 menu can be activated using the menu button on
the right-hand side. Accent colors are used for the "Title Bar".
Figure 1-16 Title bar with call for the first menu level

1.9.2 Status bar

The "Status bar" is found directly beneath the "Title bar". The "Status bar" is
variably structured and shows you:
• the condition of the different sections of the plant,
• the prescription currently being processed
• and the user.
Figure 1-17 Status bar
© Siemens AG 2019 All rights reserved

On the right side, the current status of the plant is displayed via the "Diagnostic
Icon". Click on "the diagnostic icon" to open the "System Diagnostic Control". A
color change and symbol change of the right square of the "Status bar" visualizes a
change of the diagnostic status of the plant.
A color change of the left square visualizes the current operating status of the
plant.
A shade of dark gray is used for the "status bar". This helps distinguish it from the
"Header line" above and the main window below.

HMI Template Suite

Entry-ID: 91174767, V2.1, 03/2019 16
 1 Introduction

Variants of the status bar

This paragraph briefly explains the various combinations of plant status and
diagnostic status issues.
Depending on the condition of each machine (variable: CurrentMachineState) and
error state (variable: DiagState).
Figure 1-18 Normal operating state

CurrentMachineState = 1; DiagState=0

Figure 1-19 Normal operating state, startup

CurrentMachineState = 2-3; DiagState=0

Figure 1-20 Error, plant stoppage

CurrentMachineState = 4; DiagState=1
© Siemens AG 2019 All rights reserved

1.9.3 Option Panel

The "Option Panel" can be displayed on the right side of the screen.
The following actions should be called in the Panel option:
• Functions/Actions that have a temporary effect on the machine.
• Global functions that should be accessible from several or all HMI screens.
This is used, for example, to implement manual operation.

Figure 1-21: Option Panel with 4 buttons

HMI Template Suite

Entry-ID: 91174767, V2.1, 03/2019 17
 1 Introduction

Call for Panel option on the right side of the screen:

The button on the right side of the screen opens the actual Option Panel (see
Figure 1-21)
Since the button is relatively narrow, icons must be used here.

Figure 1-22 Example "List view" screen with call of the Option Panel on the right side
© Siemens AG 2019 All rights reserved

HMI Template Suite

Entry-ID: 91174767, V2.1, 03/2019 18
 1 Introduction

1.9.4 Main Window

The screen edges of the operating device are used for navigation or to display
global functions. The operating area of the plant or the main window is located in
the middle of the operating panel.
Figure 1-23 Main Window of your Visualization
© Siemens AG 2019 All rights reserved

This area is the area upon which the operator focusses; here, you can project your
HMI objects to control your machine.
This centrally positioned section covers an area of about 70%. The background
color is light gray.
The content of the main displays may contain additional tabs or controls for
navigating within the screen.

HMI Template Suite

Entry-ID: 91174767, V2.1, 03/2019 19
 1 Introduction

1.9.5 Buttons and Icons

Using HMI styles ensures that the same element design is used consistently for
each operator action.
You can customize styles globally via the "StyleEditor". The changes are applied
immediately to the entire project.
These and other defined buttons, texts and other elements can be found in the HMI
Style "HMITemplateSuite V2.x.x" in the project library:
Figure 1-24 HMI Style "HMITemplateSuite"

Size
A minimum size of 40x40px has been defined for the HMI Template Suite. This
ensures that all buttons can be operated conveniently and easily via the touch
screen.
© Siemens AG 2019 All rights reserved

Appearance
Using an HMI style ensures the uniform appearance of the buttons. The following
table presents objects in the style of the "HMI Template Suite".
Table 1-6 Overview of the most important buttons in the project
Style name Appearance Use / Place of use
"Button“ Standard button for normal operator actions such
as triggering a function or opening a pop-up
screen
"Cancel_Abort_ Button for canceling actions or closing pop-up
Close" windows.
->no effect on the machine
"Delete" Button for actions performing a delete activity.
->Critical actions
"Execute_Action Button for actions that have an effect on the
" machine, such as executing scripts or setting
machine parameters.
"Status bar" Button for opening a pop-up window for the status
bar, e.g. a log-on dialog or a recipe view.

Button for opening a pop-up-screen for controlling

the plant module.

➔ Additional content via pop-ups

"SubNavigation_ Navigation button for the "SubNavigation" bar.
Inactive" Display of inactive status (unpressed).

"SubNavigation_ Navigation button for the "SubNavigation" bar.

Inactive" Display of active status (pressed).

HMI Template Suite

Entry-ID: 91174767, V2.1, 03/2019 20
 1 Introduction

Style name Appearance Use / Place of use

"btn_PrevScree When this button is pressed, you leap back to the
n" previous screen.
"ScreenTab_ Button for the "Tab bar",
Inactive" unpressed state

"ScreenTab_ Button for the "Tab bar",

Active" pressed state

1.9.6 Texts and IO fields

To ensure a uniform and clean typeface on the operator interfaces, templates for
texts are defined in the HMI style "HMITemplateSuite".
This not only ensures consistency, but also makes the HMI more intuitive and
faster to configure.

Size
Present the texts in such a way that the operators can recognize them quickly and
reliably.
© Siemens AG 2019 All rights reserved

The font size used depends on the distance between the operator and the
configured operating device.

Appearance of texts
Table 1-7 Overview of the defined text templates
Style name Appearance Use / Place of use
Standard style Standard object, free use

"Regular (center)" Standard object, free use

"Regular (right)" Standard object, free use

"SubHeadline" Header.
Only used in pop-up screens
"SubHeadline center" Header.
Only used in pop-up screens
"lightHeadline" Light header, free use

"Headline" Dark header, free use

"Headline (Center)" The middle header,

free use
"SubNavigation" Text for the navigation bar

"StatusBar_Display" Font for the status bar display.

"StatusBar_Title" Header for the status bar

"StatusBar_Text" Text, only for the status bar

HMI Template Suite

Entry-ID: 91174767, V2.1, 03/2019 21
 1 Introduction

Style name Appearance Use / Place of use

"TitleBar" Font, only for the title bar

"navigation" Font, only for navigation purposes

"OptionPanel_Title" Header for the option panel

"ContenBoard_Title" Header.
Only used in HMI faceplates.
"State" Machine status display.

"Notification_OK" Notification at the bottom,

For uncritical information

"Notification_Warning Notification at the bottom,

" For important information

"Notification_error" Notification at the bottom,

For critical information

Appearance IO Fields
© Siemens AG 2019 All rights reserved

Input fields are marked with a white background. If the IO field does not have a
white background, no input is possible in the field.
The operator can see at a glance whether the field permits an entry to be made.

Table 1-8 Overview of the defined IO Fields

Style name Appearance Use / Place of use
"Standard style" Standard object, free use

"Regular (center)" Standard object, free use

"Regular (right)" Standard object, free use

"Regular_Out (left)" Only used for the output of

values

"Regular_Out (center)" Only used for the output of

values

"Regular_Out (right)" Only used for the output of

values

"StatusBar" Only used for the status bar.

"ContentBoard_Output" Output and input field on a

"ContentBoard"

"ContentBoard_ Output and input field on a

Large_Output" "ContentBoard"

HMI Template Suite

Entry-ID: 91174767, V2.1, 03/2019 22
 1 Introduction

Style name Appearance Use / Place of use

"ContentBoard_Output Output and input field on a
(center)" "ContentBoard"

1.9.7 Rectangles

Rectangle styles are defined in the main colors (colors, see chapter 1.6.2).
The rectangles are defined without a border so that they fit into the specified flat
design.
© Siemens AG 2019 All rights reserved

HMI Template Suite

Entry-ID: 91174767, V2.1, 03/2019 23
 2 Library elements

2 Library elements
2.1 Picture objects
In this chapter, the additionally available image objects and their purpose are
briefly explained.
The following additional image objects can be found in the library below:
"Type > 02_Objects":
Figure 2-1 Image object in the library

Note In the "Type Editor" you can globally adapt the existing objects for your project.
© Siemens AG 2019 All rights reserved

Types can be dragged and dropped into a HMI image and linked together.
The Faceplates types are available for WinCC Comfort or Advanced.

You can link the types via the type interface. To do this, select an HMI object in
Engineering. In the Inspector window, go to the "Properties" tab and select
"Interface".
How to interconnect the individual elements is explained in the respective chapter
in a table.
Figure 2-2 Interface Types in Engineering

HMI Template Suite

Entry-ID: 91174767, V2.1, 03/2019 24
 2 Library elements

2.1.1 Checkbox

Use a checkbox to select one or more items from a list. After changing the
selection, the change is immediately active. If you only want to select one option
from the list at a time, it is better to use the "Radio Buttons".
Figure 2-3 Checkbox in Engineering

Interface Type
Table 2-1
Interface Function
"Text" Interconnect a static text
(Display text for the buttons)
"Value" Connect to an HMI variable (Bool).
When the element is clicked, the HMI variable changes to
True.

2.1.2 Radio button

© Siemens AG 2019 All rights reserved

Use the radio buttons to select one or more elements from a list.
If you want to be able to select multiple options, use a checkbox.
Figure 2-4 Radio Buttons in Engineering

Interface Type
Table 2-2
Interface Function
"Item1" Interconnect a static text for each "Item" element
"Item2" (Display text)
"Item3"

"Value" Connect to an HMI variable (Int).

The variable is set depending on the selected "Item"
element.
The first option has the value "0", the second option the
value "1", and so on.

HMI Template Suite

Entry-ID: 91174767, V2.1, 03/2019 25
 2 Library elements

2.1.3 Page Indicator

The page display shows the current position of the currently selected screen in a
flat list of multiple screens. The display appears in a series of small indicator points
that represent the screens in the order of their opening. The current indicator point
is colored blue. To change the current page, you should place navigation arrows
next to the page display.
This type of display is intended for pages that are on the same hierarchy level.
Always center the display at the bottom of the screen.
Versions from 2 to 5 pages are available.
Figure 2-5 "Page Indicator" in Engineering

Interface Type
Table 2-3
Interface Function
"pageIndicatorTag" Connect to an HMI variable (Int).
If the variable = "1", the first circle is colored blue. With
"2", the second circle, and so on.
© Siemens AG 2019 All rights reserved

2.1.4 Process Indicator

Use the "Process Indicator" to visualize the progress of a process. Each point
visualizes one process step. As soon as the step has been completed, it is
displayed in blue and with a white tick.

Figure 2-6 "Process Indicator" in Engineering

Interface Type
Table 2-4
Interface Function
"Step1" Connect one HMI variable for each step.
"Step2" As soon as the HMI variable = "1", the corresponding
"Step3" step is colored blue and marked with a white tick.
…

HMI Template Suite

Entry-ID: 91174767, V2.1, 03/2019 26
 2 Library elements

2.1.5 Switch

Use a "Switch" to turn a single option on or off permanently. After the status
change, the change is immediately visible.
Different versions are available.
Figure 2-7 Switch in Engineering

Interface Type
Table 2-5
Interface Function
"Value" Connect to an HMI variable (Bool).
Click on the button to invert the specified variable.

2.1.6 Value Stepper

The "Value Stepper" is a two-button element that increases or decreases a value.

© Siemens AG 2019 All rights reserved

The current value is displayed between the two switches. Use the Value Stepper if
you want to trigger large predefined value changes with a single click. The element
is well suited for enabling predefined leaps in value.
Figure 2-8 "Value Stepper" in Engineering

There are different templates of the "Value Stepper" for "Real" and "Int" values in
the library.

Interface Type
Table 2-6
Interface Function
"delta" Connect to an HMI variable (Int/LReal).
Assign a start value to this HMI variable.
The variable is increased or decreased by this value.

"Value" Connect to an HMI variable (Int/LReal).

If you click on the "-" button, the variable value is
reduced by the delta value.
If you click on the "+" button, the variable value is
increased by the delta value.

HMI Template Suite

Entry-ID: 91174767, V2.1, 03/2019 27
 2 Library elements

2.1.7 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 rectangle into your image and assign the HMI style "ContentBoard" to
the rectangle.

Figure 2-9 Sample Engineering "ContentBoard"

© Siemens AG 2019 All rights reserved

HMI Template Suite

Entry-ID: 91174767, V2.1, 03/2019 28
 2 Library elements

2.2 HMI screens

In the library, you will find ready-designed HMI images for various applications.
These templates should support you in creating your own HMI operating device.
The following types of templates are at your disposal:
• Dashboards
• Machine overviews
• Wizards
• Notifications
• Function panel
• Further example screens

Figure 2-10 Example HMI Images

© Siemens AG 2019 All rights reserved

Note The images serve as a template for your visualization. You still have to
interconnect the objects so that the objects can display values.

HMI Template Suite

Entry-ID: 91174767, V2.1, 03/2019 29
 2 Library elements

2.2.1 Dashboards

With a dashboard you can display the most important information and evaluations
such as the "efficiency" or "produced quantity" of the machine. Furthermore, the
important HMI screens are linked to it.
The dashboard thus 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 2-11 Example Dashboards

© Siemens AG 2019 All rights reserved

HMI Template Suite

Entry-ID: 91174767, V2.1, 03/2019 30
 2 Library elements

2.2.2 MachineModules

The machine module overviews allow 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 2-12 Example Machine module - Overview

© Siemens AG 2019 All rights reserved

HMI Template Suite

Entry-ID: 91174767, V2.1, 03/2019 31
 2 Library elements

2.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 complete image.
This allows the operator to concentrate fully on the current step. The new settings
should only be applied to the configuration when the operator has completed all of
the steps.
For the Wizard, versions from 3 to 5 operating steps are available.
Figure 2-13 Example Machine module - Overview
© Siemens AG 2019 All rights reserved

2.2.4 Notifications

Use
Notifications should only appear at the bottom of the screen. If you are in the
second navigation level, the notification should overlap the navigation elements
(see Fig. 2-14). If you do not use the second level navigation, the notification also
appears along the bottom of the screen.

Figure 2-14 Example notification

HMI Template Suite

Entry-ID: 91174767, V2.1, 03/2019 32
 2 Library elements

2.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 should always be inverted (two states).
The different state should be represented with a different color.
Different versions are available for different panel sizes and variants with 4, 8 and
12 buttons.
Figure 2-15 Example Function Panel
© Siemens AG 2019 All rights reserved

HMI Template Suite

Entry-ID: 91174767, V2.1, 03/2019 33
 2 Library elements

2.2.6 Further example images ("Mixed Examples")

Further example screens ("Mixed Examples") are preconfigured in the library in

order to clarify the visualization concept and promote ideas for your own
implementation.
In addition to the two variants shown, further variants are available in the library.
Figure 2-16 Example Visualization
© Siemens AG 2019 All rights reserved

HMI Template Suite

Entry-ID: 91174767, V2.1, 03/2019 34
 3 Commissioning

3 Commissioning
Requirements
Before you start the configuration of your HMI operator panel, you should develop
a complete design concept with concrete visualization ideas.

Note If you have not yet developed a design concept and require further information:
The HMI Design Masterclass gives you an introduction to the topic of HMI design
in 7 x 10min video units.
Link to the Masterclass: https://www.siemens.com/hmi-design-masterclass

Integrating an operating panel

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 the TIA Portal.
3. Drag and drop an HMI operating panel of your choice into your project.
Figure 3-1 HMI operating panels in the library
© Siemens AG 2019 All rights reserved

Note:
The operator panels are sorted by resolution.
The operating philosophy (navigation bars, HMI style, templates) is already
integrated for you in this operating panel.

HMI Template Suite

Entry-ID: 91174767, V2.1, 03/2019 35
 3 Commissioning

Figure 3-2 HMI operating panel view in project navigation

Note:
Since the operating panel is already configured, you can test it immediately
with the simulation or load it into a real operator panel. All you have to do is
change the IP address.
© Siemens AG 2019 All rights reserved

The runtime starts with the HMI image "10_Startscreen".

Use additional image objects

Now use the other image objects and HMI images from the library and assemble
your visualization step by step.

HMI Template Suite

Entry-ID: 91174767, V2.1, 03/2019 36
 3 Commissioning

3.1 Notes on configuration

The TIA Portal provides various setting options that help you to implement a
uniform HMI design.
You can define a grid to which the HMI objects are automatically aligned.
If you move an HMI object with the mouse or change its size, the objects
automatically orient themselves according to the defined grid.
This makes it easier to align the objects on the screen.

Procedure
1. Open the TIA Portal "Settings". Select the entry "Visualization".
2. Under "Settings Editor", set the entry "Snap to grid".
3. In the "Grid" category, select the "Show grid" entry.
4. Enter the value "8" as "Grid size".

Note When configuring the "HMI Template Suite", a grid size of "8" was used, so that
the distances and sizes of the objects are automatically multiplied by "8".
For a uniform appearance, set the grid size to "8" pixels.

Figure 3-3 Grid settings in TIA Portal

© Siemens AG 2019 All rights reserved

HMI Template Suite

Entry-ID: 91174767, V2.1, 03/2019 37
 3 Commissioning

3.2 Configuration Examples

This chapter shows the basic operation of the "HMI Template Suite". In this
application example, the operating concept is supplied without an "Application".
Configure your own visualization of your plant, which you can call up with the
"Application" button.
We have an example of how the operation of your machine can look.

First menu level

1. Click on the button at the top right corner (1).
In this first menu level, you have access to your main visualization, a
notification and diagnosis window, as well as a settings page.
2. Click on the first "Application" button to start your visualization.
Figure 3-4 Operation first menu level
© Siemens AG 2019 All rights reserved

Overview of using dashboards

A dashboard is recommended for the start page:
here, you can see at a glance the current efficiency and the efficiency over the last
3 days. On the left you can see 2 modules. The [...] button takes you from the
dashboard to the module overview.
Figure 3-5 Dashboard Visualization

HMI Template Suite

Entry-ID: 91174767, V2.1, 03/2019 38
 4 Appendix

4 Appendix
4.1 Service and Support
Industry Online Support
Do you have any questions or need assistance?
Siemens Industry Online Support offers round the clock access to our entire
service and support know-how and portfolio.
The Industry Online Support is the central address for information about our
products, solutions and services.
Product information, manuals, downloads, FAQs, application examples and videos
– all information is accessible with just a few mouse clicks:
https://support.industry.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:
www.siemens.com/industry/supportrequest
© Siemens AG 2019 All rights reserved

SITRAIN – Training for Industry

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:
www.siemens.com/sitrain

Service offer
Our range of services includes the following:
• Plant data services
• Spare parts services
• Repair services
• On-site and maintenance services
• Retrofitting and modernization services
• Service programs and contracts
You can find detailed information on our range of services in the service catalog
web page:
support.industry.siemens.com/cs/sc

Industry Online Support app

You will receive optimum support wherever you are with the "Siemens Industry
Online Support" app. The app is available for Apple iOS, Android and Windows
Phone:
support.industry.siemens.com/cs/ww/de/sc/2067

HMI Template Suite

Entry-ID: 91174767, V2.1, 03/2019 39
 4 Appendix

4.2 Links and Literature

Table 4-1
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://www.siemens.com/hmi-design-masterclass
\4\ Link to the HMI Template Suite-Page
https://www.siemens.com/hmi-template-suite

4.3 Change documentation

Table 4-2
Version Date Change
V1.0 04/2018 First version
© Siemens AG 2019 All rights reserved

V2.0 11/2018 New design objects and templates as well as

documentation update
HMI Style V2.0.0
V2.1 03/2019 Adding WinCC Basic operating devices.

HMI Template Suite

Entry-ID: 91174767, V2.1, 03/2019 40