Application Description05/2014

Creating and Using Design

Standards for HMI Operator
Panels
TIA Portal WinCC V13

http://support.automation.siemens.com/WW/view/en/91174767
 Warranty and Liability

Warranty and Liability

Note The Application Examples are not binding and do not claim to be complete
regarding the circuits shown, equipping and any eventuality. The Application
Examples do not represent customer-specific solutions. They are only intended
to provide support for typical applications. You are responsible for ensuring that
the described products are used correctly. These Application Examples do not
relieve you of the responsibility to use safe practices in application, installation,
operation and maintenance. When using these Application Examples, you
recognize that we cannot be made liable for any damage/claims beyond the
liability clause described. We reserve the right to make changes to these
Application Examples at any time without prior notice.
If there are any deviations between the recommendations provided in these
Application Examples and other Siemens publications e.g. Catalogs the
contents of the other documents have priority.

We do not accept any liability for the information contained in this document.
Any claims against us based on whatever legal reason resulting from the use of
the examples, information, programs, engineering and performance data etc.,
described in this Application Example shall be excluded. Such an exclusion shall
not apply in the case of mandatory liability, e.g. under the German Product Liability
Act (Produkthaftungsgesetz), in case of intent, gross negligence, or injury of life,
body or health, guarantee for the quality of a product, fraudulent concealment of a
Siemens AG 2014 All rights reserved

deficiency or breach of a condition which goes to the root of the contract

(wesentliche Vertragspflichten). The damages for a breach of a substantial
contractual obligation are, however, limited to the foreseeable damage, typical for
the type of contract, except in the event of intent or gross negligence or injury to
life, body or health. The above provisions do not imply a change of the burden of
proof to your detriment.
Any form of duplication or distribution of these Application Examples or excerpts
hereof is prohibited without the expressed consent of Siemens Industry Sector.

Security Siemens provides products and solutions with industrial security functions that
informa- support the secure operation of plants, solutions, machines, equipment and/or
tion networks. They are important components in a holistic industrial security
concept. With this in mind, Siemens products and solutions undergo continuous
development. Siemens recommends strongly that you regularly check for
product updates.
For the secure operation of Siemens products and solutions, it is necessary to
take suitable preventive action (e.g. cell protection concept) and integrate each
component into a holistic, state-of-the-art industrial security concept. Third-party
products that may be in use should also be considered. For more information
about industrial security, visit http://www.siemens.com/industrialsecurity.
To stay informed about product updates as they occur, sign up for a product-
specific newsletter. For more information, visit
http://support.automation.siemens.com.

Creating and Using Design Standards for HMI Operator Panels

Entry ID: 91174767, V1.0, 05/2014 2
 Table of Contents

Preface
Objective of the application
Intuitive, visually appealing visualization is the showpiece of each machine.
HMI styles are used to uniquely define the color and design parameters for all
objects and controls across any device.
All objects used in the project automatically apply these parameters.

HMI styles allow easy creation of attractive user interfaces by specifying color and
design parameters of all objects and controls.
The central definition of the design allows you to use the parameters for several
devices or projects.
Siemens AG 2014 All rights reserved

Creating and Using Design Standards for HMI Operator Panels

Entry ID: 91174767, V1.0, 05/2014 3
 Table of Contents

Table of Contents
Warranty and Liability ................................................................................................. 2
Preface .......................................................................................................................... 3
1 Creating HMI Styles ........................................................................................... 5
1.1 Overview............................................................................................... 5
1.2 Creating a new HMI style ..................................................................... 6
1.3 Defining properties ............................................................................... 8
1.4 Releasing a version .............................................................................. 9
2 Using HMI Styles .............................................................................................. 11
2.1 Importing HMI styles ........................................................................... 11
2.2 Defining a project style ....................................................................... 12
2.3 Defining an alternative device style .................................................... 13
2.4 Configuring objects in the device style ............................................... 14
2.5 Practical example: Migration and styles ............................................. 15
2.6 Practical example: Corporate design for customers .......................... 17
2.7 Hardware and software components ................................................. 18
2.7.1 Validity ................................................................................................ 18
2.7.2 Components used .............................................................................. 18
3 References ....................................................................................................... 19
4 History............................................................................................................... 19
Siemens AG 2014 All rights reserved

Creating and Using Design Standards for HMI Operator Panels

Entry ID: 91174767, V1.0, 05/2014 4
 1 Creating HMI Styles

1 Creating HMI Styles

1.1 Overview
Introduction
To create your own HMI styles, use the Style Editor integrated in TIA Portal.
With just a few clicks, you can create your own styles for your machine and plant
projects.
Figure 1-1
Siemens AG 2014 All rights reserved

Creating and Using Design Standards for HMI Operator Panels

Entry ID: 91174767, V1.0, 05/2014 5
 1 Creating HMI Styles

1.2 Creating a new HMI style

Procedure
Table 1-1
No. Instruction Note
1. Start TIA Portal and open the project where
you want to create a new style.
2. Open the Libraries task card.
Siemens AG 2014 All rights reserved

3. In the project library, navigate to the Types

folder.
4. Double-click on the Add new type button to
open the Add new type dialog.

Creating and Using Design Standards for HMI Operator Panels

Entry ID: 91174767, V1.0, 05/2014 6
 1 Creating HMI Styles

No. Instruction Note

5. Enter a name for your style and select HMI
style as the type.
Select the OK button to confirm the dialog.

6. A new HMI style is created and the Library

view opens.
Siemens AG 2014 All rights reserved

Creating and Using Design Standards for HMI Operator Panels

Entry ID: 91174767, V1.0, 05/2014 7
 1 Creating HMI Styles

1.3 Defining properties

General
With WinCC TIA Portal V13, all objects were enhanced by properties for designing
the objects.
Now, for example, gradients, rounded corners or the colors of list items can be
parameterized with just a few clicks.

Procedure
Table 1-2
No. Instruction Note
1. In the Style Editor, select an object and open
the Properties tab in the Inspector window.

2. Make the desired changes to the object

design.
Siemens AG 2014 All rights reserved

3. Repeat step 2 for all objects of an HMI style.

Note The Style Editor displays only the properties of objects that refer to the design of
the object (for example, background and font color).

Background in the Style Editor

To create a contrast to the objects in the Style Editor, you can change the
background color using the Background drop-down list.
Figure 1-2

Creating and Using Design Standards for HMI Operator Panels

Entry ID: 91174767, V1.0, 05/2014 8
 1 Creating HMI Styles

1.4 Releasing a version

General
To make the HMI style available for the project, the HMI style must be released.
The integrated version control helps you identify different versions of HMI styles.

Procedure
Table 1-3
No. Instruction Note
1. In the project library that was automatically
created when the style was created, select
version V 0.0.1.
Siemens AG 2014 All rights reserved

2. In the context menu, select the Release

version option.

3. The Release type version dialog opens.

4. If necessary, customize the Name of type,
Version, Author and Comment fields.

Creating and Using Design Standards for HMI Operator Panels

Entry ID: 91174767, V1.0, 05/2014 9
 1 Creating HMI Styles

No. Instruction Note

5. Select the OK button to confirm the dialog.

6. A released version is indicated by the icon with Released:

the green emblem.
A version that is being edited is indicated by
the icon with the orange traffic cone.
Being edited:
Siemens AG 2014 All rights reserved

Creating and Using Design Standards for HMI Operator Panels

Entry ID: 91174767, V1.0, 05/2014 10
 2 Using HMI Styles

2 Using HMI Styles

General
This application example provides you with different styles that can be used freely.
The following chapters explain the steps necessary to use these styles or other
styles.

2.1 Importing HMI styles

Procedure
Table 2-1
No. Instruction Note
1. Start TIA Portal and open a project to which
you want to import an HMI style.
2. Open the Libraries task card.
3. In Global libraries, select the Global
libraries option.
Siemens AG 2014 All rights reserved

4. Select a library that contains an HMI style (for

example, Style_Controlled_Complexity) and
open it.

5. In the library, navigate to the Types folder

and select the HMI style you want to import to
the project.

Creating and Using Design Standards for HMI Operator Panels

Entry ID: 91174767, V1.0, 05/2014 11
 2 Using HMI Styles

No. Instruction Note

6. Use drag and drop to move the HMI style to
the Types folder of your project library.

2.2 Defining a project style

Procedure
Table 2-2
No. Instruction Note
1. In the project tree, navigate to the Common
data folder and open it.
Siemens AG 2014 All rights reserved

2. Double-click on the Styles folder to open it.

Note: This folder is only visible when the

project contains a device with image version
V13.

3. The Style Editor opens (write-protected).

4. By changing the selected radio button in the
Default column, you change the default HMI
style for the project.

Note: The Style Editor also allows you to

create new HMI styles and to duplicate and
then edit existing styles.

Creating and Using Design Standards for HMI Operator Panels

Entry ID: 91174767, V1.0, 05/2014 12
 2 Using HMI Styles

2.3 Defining an alternative device style

General
By default, all devices in a project follow the project style configured in chapter 2.2.
However, if you want to assign a different HMI style to a device, please follow the
procedure below.

Procedure
Table 2-3
No. Instruction Note
1. Navigate to the Runtime settings of the device
and open them.

2. In General, uncheck the Default style of the

project option.
Siemens AG 2014 All rights reserved

3. In the Style of the HMI device drop-down list,

select the HMI style you want to use for the
project.

Creating and Using Design Standards for HMI Operator Panels

Entry ID: 91174767, V1.0, 05/2014 13
 2 Using HMI Styles

2.4 Configuring objects in the device style

Procedure
Table 2-4
No. Instruction Note
1. Open the screen where you want to configure
objects.
2. Open the Toolbox task card.
3. In Options, select the Use device
style/design item from the drop-down list.

4. Insert an object of your choice into the screen.

Siemens AG 2014 All rights reserved

General
When you select an object and then select Properties, Style/Designs, you will
see that the Style/Design settings option is checked.
When this setting is checked, the object follows the used device style.
When the option is unchecked, the object does not follow the device style.

Figure 2-1

Note When an object does not follow the device style, the project remains unchanged
when the device or project style is changed.

Creating and Using Design Standards for HMI Operator Panels

Entry ID: 91174767, V1.0, 05/2014 14
 2 Using HMI Styles

2.5 Practical example: Migration and styles

General
When migrating operator panels and Multi Panels to Comfort Panels or Basic
Panels (2nd generation) and when migrating WinCC flexible projects to WinCC TIA
Portal, only a few steps need to be performed to use HMI styles in these projects.

Note All the steps listed in chapter 2.2 must have been successfully completed.

All information on migrating to the new SIMATIC HMI Panel generations is

available here: http://www.siemens.com/panel-innovation or in Industry Online
Support, Entry ID 76878921.

Procedure
Table 2-5
No. Instruction Note
1. In TIA Portal, open the project that has already
been migrated.
2. Open a screen of this project.
Siemens AG 2014 All rights reserved

3. If a screen uses the Pointer instrument, Bar

chart or Slider object, uncheck the Layout with
inner scroll bar respectively Layout without
inner scale for these objects.

4. Select all objects in this screen.

Note: The CTRL+A keyboard shortcut allows

you to select all objects in a screen.

Creating and Using Design Standards for HMI Operator Panels

Entry ID: 91174767, V1.0, 05/2014 15
 2 Using HMI Styles

No. Instruction Note

5. In the Inspector window, open the Properties
tab and check the Style/Design settings
option.

6. The objects are automatically adjusted to the

device style.

7. Perform steps 2-4 for all screens in this

project.
Siemens AG 2014 All rights reserved

Creating and Using Design Standards for HMI Operator Panels

Entry ID: 91174767, V1.0, 05/2014 16
 2 Using HMI Styles

2.6 Practical example: Corporate design for customers

General
Manufacturers of series machines frequently use the same project for different
customers.
HMI styles allow you to customize the HMI to the corporate design guidelines of
each of your customers with just a few clicks and therefore offer a customized
design of the machine.

Procedure
Table 2-6
No. Instruction Note
1. In TIA Portal, open a project that follows an
HMI style.
2. In the project tree, navigate to the Common
data folder and open it.
Siemens AG 2014 All rights reserved

3. Double-click on the Styles folder to open it.

Note: This folder is only visible when the

project contains a device with image version
V13.

4. The Style Editor opens (write-protected).

5. By changing the selected radio button in the
Default column, you change the default HMI
style for the project.

Creating and Using Design Standards for HMI Operator Panels

Entry ID: 91174767, V1.0, 05/2014 17
 2 Using HMI Styles

2.7 Hardware and software components

2.7.1 Validity

This application is valid for:

WinCCBasic/Comfort/Advanced V13 and higher

Note Please note that HMI styles must only be used when the color depth of the
project and the operator panel is set to 32 bits.

2.7.2 Components used

The application was created with the following components:

Hardware components
Table 2-7
Component No. Order number Note
Siemens AG 2014 All rights reserved

TP900 Comfort 1 6AV2124-0JC01-0AX0

Software components
Table 2-8
Component No. Order number Note
WinCC Comfort V13 1 6AV2101-0AA03-0AA5

Sample files and projects

The following list contains all files and projects that are used in this example.

Table 2-9
Component Note
91174767_HMI_Styles_Controlled_Complexity.zip This zip file contains the
ControlledComplexity style.
91174767_HMI_Styles_Reliability.zip This zip file contains the
Reliability style.
91174767_HMI_Styles_Dynamics.zip This zip file contains the
Dynamics style.
91174767_HMI_Styles_e.pdf This document.

Creating and Using Design Standards for HMI Operator Panels

Entry ID: 91174767, V1.0, 05/2014 18
 3 References

3 References
Table 3-1
Subject Title
\1\ Siemens Industry http://support.automation.siemens.com
Online Support
\2\ Download page of http://support.automation.siemens.com/WW/view/en/91174767
the entry

4 History
Table 4-1
Version Date Modifications
V1.0 05/2014 First version
Siemens AG 2014 All rights reserved

Creating and Using Design Standards for HMI Operator Panels

Entry ID: 91174767, V1.0, 05/2014 19