Faceplates Instruction Doku e

Configuration Instruction for
Generating Faceplates
WinCC Comfort and WinCC Advanced
Application Description March 2013
Applications & Tools

Answers for industry.
Siemens Industry Online Support

This entry is taken from Siemens Industry Online Support. The following link takes
you directly to the download page of this document:
http://support.automation.siemens.com/WW/view/en/68014632
Caution:
The functions and solutions described in this entry are mainly limited to the
realization of the automation task. In addition, please note that suitable security
measures in compliance with the applicable industrial security standards must be
taken, if your system is interconnected with other parts of the plant, the companys
network or the internet. More information can be found under entry ID 50203404.
Copyright Siemens AG 2013 All rights reserved
Configuring faceplates
V1.0, Entry ID: 68014632
SIMATIC
V1.0, Entry ID: 68014632
Task
Solution
Basics
Functions and Properties

of the Faceplate
Functions and Properties

of a User Data Type
(HMI UDT)
Configuration and
Settings
Operation of the
Application
Related Literature
History
Warranty and Liability
Warranty and Liability

Note
The application examples are not binding and do not claim to be complete
regarding configuration, equipment and any eventuality. The application
examples do not represent customer-specific solutions. You are responsible for
ensuring that the described products are used correctly. These application
examples do not relieve you of your responsibility to use sound practices in
application, installation, operation and maintenance. When using these
application examples, you recognize that we will not be liable for any
damage/claims beyond the liability clause described. We reserve the right to
make changes to these application examples at any time and without prior
notice. If there are any deviations between the recommendations provided in this
application example 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
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 in the burden of
proof to your disadvantage.
It is not permissible to transfer or copy these application examples or excerpts
thereof without express authorization from Siemens Industry Sector.
V1.0, Entry ID: 68014632
Preface
Preface
Objective of this application
The objective of this application is to provide you with a step by step instruction for
generating a faceplate.
Several practical examples are used for describing various application cases.
Furthermore, the benefits for you as the user are discussed and how to use those
for yourself.
Main topics of this application
The following main points are discussed in this application:
Parameters and properties of a faceplate
Configuration Instruction
Application examples
Software version as of WinCC Comfort V11 SP2
All SIMTAIC HMI operator units which support faceplates

(see chapter 2.5 Supported operator units).
Valid until
Information on the function scope of the SIMATIC HMI operator units is

available in the Online Help of WinCC (TIA Portal) or at
FAQ http://support.automation.siemens.com/WW/view/en/40227286.
V1.0, Entry ID: 68014632
Table of Contents
Table of Contents
Warranty and Liability ................................................................................................. 4
Preface .......................................................................................................................... 5
Table of Contents ......................................................................................................... 6
1
Task ..................................................................................................................... 8
1.1
1.2
Solution............................................................................................................. 10
2.1
2.2
2.3
2.4
2.5
What is a faceplate? ........................................................................... 15

How to create and open a faceplate? ................................................ 15
What does the pictures editor refer to?............................................ 15
What is a faceplate? ........................................................................... 16
Difference between a picture object and a faceplate ......................... 16
Faceplate created as conventional picture object ........................... 17
Control panel created as faceplate .................................................. 19
What is an HMI UDT user data type? .............................................. 21
How to create and open a user data type? ........................................ 21
Project library and global libraries ...................................................... 21
Functions and Properties of the Faceplate ................................................... 22

4.1
4.1.1
4.1.2
4.2
4.2.1
4.2.2
4.3
4.3.1
4.3.2
4.3.3
4.4
4.5
4.5.1
4.5.2
4.5.3
4.6
4.7
4.7.1
4.7.2
4.7.3
4.7.4
4.7.5
4.7.6
4.7.7
4.7.8
4.8
4.9
Overview of the general solution ........................................................ 10

General notes on the application ....................................................... 11
Description of the core functionality ................................................... 11
Hardware and software components used......................................... 12
Supported operator units .................................................................... 13
Basics ............................................................................................................... 15
3.1
3.2
3.3
3.4
3.5
3.5.1
3.5.2
3.6
3.7
3.8
Overview .............................................................................................. 8
Overview of the automation task .......................................................... 8
How to create a faceplate .................................................................. 22

Creating a faceplate via the pictures editor ..................................... 22
Creating a faceplate via the faceplate editor ...................................... 24
Opening a faceplate ........................................................................... 26
Open the faceplate in the pictures editor ......................................... 26
Opening the faceplate via the Project library ..................................... 27
Releasing or restoring the faceplate .................................................. 28
Enabling the faceplate ........................................................................ 29
Restoring the faceplate ...................................................................... 30
Version designation of a faceplate ..................................................... 31
Calling a faceplate or inserting it into a picture .................................. 32
Faceplate editor.................................................................................. 33
Workspace ......................................................................................... 34
Configuration area .............................................................................. 35
Inspector window................................................................................ 36
Parameters in the workspace ............................................................. 38
Parameters in the configuration area ................................................. 39
Properties tab................................................................................... 39
Events tab ........................................................................................ 51
Tags tab ........................................................................................... 57
Scripts tab ........................................................................................ 58
Text lists tab ..................................................................................... 59
Graphic lists tab ............................................................................... 60
Texts tab .......................................................................................... 61
Languages tab ................................................................................. 62
Parameters in the inspector window .................................................. 63
Saving faceplates in Global libraries................................................ 64
V1.0, Entry ID: 68014632
Table of Contents
5
Functions and Properties of a User Data Type (HMI UDT) .......................... 67

5.1
5.2
5.3
5.4
5.4.1
5.4.2
Configuration and Settings ............................................................................ 75

6.1
6.1.1
6.1.2
6.1.3
6.1.4
6.1.5
6.1.6
6.1.7
6.2
6.2.1
6.2.2
Creating a user data type ................................................................... 67

Editing/opening a user data type........................................................ 69
Configuring the user data type ........................................................... 70
User data type .................................................................................... 72
Releasing the user data type ............................................................. 73
Restoring the user data type .............................................................. 74
Configuration examples...................................................................... 75
Assigning a configurable function to a button .................................... 76
Creating a configurable IO field ....................................................... 79
Configurable font size at the object .................................................... 82
Switching objects invisible .................................................................. 86
Configuring a color change at an object............................................. 89
Using the faceplate with a user data type .......................................... 92
Assigning the user authorization to a faceplate ............................... 101
Application example ......................................................................... 105
Example 1 ........................................................................................ 105
Example 2 ........................................................................................ 109
Operation of the Application ........................................................................ 110

7.1
7.2
7.3
Overview .......................................................................................... 110

Screen Example 1.......................................................................... 111
Screen Example 2.......................................................................... 112
Related Literature .......................................................................................... 114
History............................................................................................................. 114
V1.0, Entry ID: 68014632
1 Task
1.1 Overview
Task
1.1
Overview
Introduction
In plant and mechanical engineering in particular, the requirements for a uniform
operator control and monitoring concept are high in order to guarantee short
familiarization times or high operating security for the later operator of the plant.
A uniform operator control and monitoring concept is also important for the
maintenance of plants. This can reduce down times during failures, maintenance
works, or a plant expansion.
In serial machine construction, configured functions, such as drive on/off,
switchover automatic/manual mode etc. are frequently used. These functions
generally only need to be adjusted to the respective machine and its control tags.
Using preprogrammed objects reduces engineering times and costs.
1.2
Overview of the automation task

The figure below provides an overview of the automation task.
You have different customers whose functions for controlling a pump or a drive are
identical.
Figure 1-1
Customer A
<==
Customer B
- Status display
- Switchover manual/ automatic
- Manual On / Off
- Current flow rate display
-
==>
V1.0, Entry ID: 68014632
1 Task
1.2 Overview of the automation task
Description of the automation task
You have several customers whose plant areas have similar functions.
The plant sections consist of several drives for pumps and fans. It shall be possible
to operate each drive via one control panel.
The following functions shall be possible via the control panel.
Output of the current status of the drive
Switchover manual/automatic mode
Manual mode on/off
Output e.g. of the current flow rate
Due to the different requirements for the HMI operator unit, it must be possible to
use HMI operator units with different display sizes.
Requirements
The following requirements for the operating concept must be fulfilled:
Uniform appearance for all plants.
Can be used several times even for different customers.
Central changeability of the control panel.
Automatic update of the control panels used in the project after performed
modifications or expansions.
Created control panel shall be available as a library so it can be used by

different persons in the engineering process.
A connection to a data block for data exchange between the control panel and
the connected PLC controller. The data block of the PLC controller has a
respective given structure.
V1.0, Entry ID: 68014632
2 Solution
2.1 Overview of the general solution
Solution
2.1
Overview of the general solution

Faceplates are very suitable for realizing the tasks described in chapter 1.
Faceplates consist of a compilation of display and operator objects which you can
manage and modify centrally in a library. Storing the faceplate in a library enables
calling and using them easily in different projects.
Furthermore, you can generate a user data type (HMI UDT) for faceplates (in
WinCC flexible 2008 formerly referred to as Structure). The advantage is
generating a group of tags once, which you can then use in several faceplates.
The following figure shows the editor of a faceplate in progress. Dont be irritated
by the Lines, which in the beginning seem rather confusing. In the further course
of the application, the correlations are explained step by step.
Figure 2-1
Control panel
10
V1.0, Entry ID: 68014632
2 Solution
2.2 General notes on the application
2.2
General notes on the application
Advantages
Using this application offers the following advantages:
The basics, functions and properties of faceplates are described.
The step-by-step instruction for creating a faceplate and the practical

application examples reduce the familiarization time.
Faceplates increase the efficiency.

Storing the faceplate in a library enables calling and using them easily in
different projects.
Avoiding errors through a simple connection to the STEP 7 control program.
Topics not covered by this application
This application does not include a description of
the used Comfort Panel. This document only describes the steps necessary for
this application.
how to create, for example, a network connection between operator unit and
configuration computer or PLC controller.
the installation of the SIMATIC software WinCC Comfort and STEP 7 V11.
Basic knowledge of these topics is required.

Assumed skills
2.3
Handling or operating skills for the Comfort Panel.
Skills for using WinCC (TIA Portal).
Description of the core functionality

The core functionality of this application is the description of how a faceplate is
created. The individual configuration steps are described using several practicerelevant examples.
What does the application example perform?

The application comes with a configuration example where all of the described
examples have been stored.
After you have read the description of the application, you should be capable of
creating your own faceplates.
V1.0, Entry ID: 68014632
11
2 Solution
2.4 Hardware and software components used
2.4
Hardware and software components used

This application has been generated using the following components:
Hardware components
Table 2-1
Component
Qty.
Order number
Note
CPU 317-2PN/DP
6ES7 317-2EK14-0AB0
Optional:
the PLC is used for
simulation purposes (data
exchange between control
panel and PLC).
TP1200 Comfort Panel
6AV2124-0MC01-0AX0
Alternative:
see chapter 2.5.
Standard software components

Table 2-2
Component
Qty.
Order number
Note
WinCC Comfort V11 SP2
6AV2101-0AA01-0AA5
Alternative:
WinCC Advanced V11 SP2
or higher.
WinCC Professional V11
SP2 or higher.
STEP 7 Professional V11 SP2
6ES7822-1AA01-0YA7
Optional:
For the example
configuration.
Alternative:
higher version.
Sample files and projects

The following list includes all files and projects used in this example.
Table 2-3
Component
Note
68014632_Faceplates_instruction_CODE_v10.zip
This zip file contains the

WinCC Comfort and STEP 7 project.
68014632_Faceplates_instruction_DOKU_v10_e.pdf
This document.
12
V1.0, Entry ID: 68014632
2 Solution
2.5 Supported operator units
2.5
Supported operator units

The following tables list those devices which support the faceplates.
Runtime
Table 2-4
No
Operator unit
1.
WinCC Runtime Advanced
2.
WinCC Runtime Professional

(this documentation only discusses the panels and WinCC Runtime Advanced.)
Comfort Panels
Table 2-5
No
Operator unit
1.
KP400 Comfort
2.
KTP400 Comfort
3.
KP700 Comfort
4.
TP700 Comfort
5.
KP900 Comfort
6.
TP900 Comfort
7.
KP1200 Comfort
8.
TP1200 Comfort
9.
KP1500 Comfort
10.
TP1500 Comfort
11.
TP1900 Comfort
12.
TP2200 Comfort
Panels
Table 2-6
No
Operator unit
1.
TP 277
2.
OP 277
V1.0, Entry ID: 68014632
13
2 Solution
2.5 Supported operator units
Mobile Panels
Table 2-7
No
Operator unit
1.
Mobile Panels
2.
Mobile Panel 277
3.
Mobile Panel 277 IWLAN V2
4.
Mobile Panel 277F IWLAN V2
5.
Mobile Panel 277F IWLAN (RFID Tag)
Multi Panels
Table 2-8
No
14
Operator unit
1.
MP 277
2.
MP 377
V1.0, Entry ID: 68014632
3 Basics
3.1 What is a faceplate?
Basics
The Basics chapter describes individual terms relevant for the application.
3.1
What is a faceplate?
A faceplate is a configured group of displays and operator objects. The data
exchange with the display and operator objects contained in the faceplate is
performed via an interface at the created faceplate.
The properties of the used display and operator objects are assigned to the
individual objects in the faceplate editor.
Faceplates can be managed and modified in a central library.
3.2
How to create and open a faceplate?
Faceplates can be created and opened in two ways.
Create and open in the pictures editor.
Create and open via the project library.
Respective details are described in chapter 4.1.
3.3
What does the pictures editor refer to?

In this application, the pictures editor refers to the editor in which you create and
edit your HMI pictures.
In the pictures editor, the following familiar task cards are available to you:
Tools:
Animations:
templates for dynamic configuration.
Layout:
display and control objects
tools for adjusting the representation
Libraries:
V1.0, Entry ID: 68014632
managing the project library and the global libraries.
15
3 Basics
3.4 What is a faceplate?
3.4
What is a faceplate?
In this application, a picture object refers to a compilation of several individual
display and operator objects, such as IO fields and buttons, whose properties can
be edited individually. The example in this application is the control panel shown
in the figure below.
Figure 3-1
Control panel consisting of:

Buttons
IO fields
Text fields
3.5
Difference between a picture object and a faceplate

When looking at a control panel of compiled objects, then you can initially not
know whether this control panel has been created as a conventional picture
object or as a faceplate.
Only looking at the properties of the faceplate reveals the individual differences.
The example described below shows the principle difference between a control
panel which was
created as conventional picture object.
created as a faceplate.
The described task highlights the advantages of a faceplate.
16
V1.0, Entry ID: 68014632
3 Basics
3.5 Difference between a picture object and a faceplate
3.5.1
Faceplate created as conventional picture object

The task is to create a uniform control panel for approx. 20 fan drives. The
template is the picture object available in Figure 3-2.
The picture object consists of a number of individual objects. For each used object,
you can define Properties, Animations and Events (1).
The properties such as Label, Layout etc. are specified for each object.
In the Events or Animations tab various system functions are configured at the
parameterized objects such as, for example, SetBit etc.
Depending on the used system function (e.g. SetBit), they must be
interconnected with an HMI tag.
Figure 3-2
Control panel
Problem
For each of the 20 control panels you need to adjust the HMI tags for the
respective drive at the objects to which you have configured a system function.
This may easily lead to errors when selecting the tags for the individual
drives.
The assignment is very time consuming.
V1.0, Entry ID: 68014632
17
3 Basics
You have configured all control panels in the project. Your customer
subsequently requires a further button in the control panel.
subsequently requests a further function or animation to be added.
You need to call up and adjust each of the 20 control panels individually.
Highly time consuming.
You need to call up and adjust each of the 20 control panels individually.
Highly time consuming.
Your customers use HMI operator units with different display sizes.
You need to create control panels of different sizes in order to use them for
the different display sizes. You need to adjust font and dimensions of the
individual objects. Highly time consuming.
18
V1.0, Entry ID: 68014632
3 Basics
3.5.2
Control panel created as faceplate

The task is to create a uniform control panel for approx. 20 fan drives. The
template is the faceplate available in Figure 3-3.
All properties and events are defined in the faceplate editor and have been
assigned to a user data type (HMI UDT). With a user data type (HMI UDT) you
summarize a number of different tags.
The data exchange (1) is performed via the Interface tab.
The additional Interface tab identifies the picture object as a faceplate.
Note
Figure 3-3
Advantages of using a faceplate
Instead of many individual HMI tags only one tag per drive is required in this
case. The used tag has one structure.
Due to the simple structure an error during tag assignment is less likely.
Less time is consumed.
subsequently requires a further button in the control panel.
V1.0, Entry ID: 68014632
You can change the used faceplate centrally and expand it by the button.
The changes are subsequently adopted for all respective faceplates. The
configuration workload is reduced.
19
3 Basics
subsequently requests a further function or animation to be added.
You can change the used faceplate centrally and expand it by the function
or animation. The changes are subsequently adopted for all respective
faceplates. The configuration workload is reduced.
Your customers use HMI operator units with different display sizes.
Setting faceplates gives you the option to label the size of text format or
layout, for example, as parameter (statical tag). Later, you can specify
the font size individually for all objects via the Interface tab (1). The
faceplate can therefore be used for different display sizes. This reduces
the configuration workload.
Figure 3-4
Note
20
Details for the configuration process are available in chapter 6.
V1.0, Entry ID: 68014632
3 Basics
3.6 What is an HMI UDT user data type?
3.6
What is an HMI UDT user data type?

User data types summarize a number of different tags which form a logical unit (in
WinCC flexible 2008 formerly referred to as Structure).
The advantage is generating a group of tags once, which you can then use in
several faceplates.
Example:
The different states of a motor can be described with 5 individual tags, for example.
Off state
On state
Fault state
Manual state
Automatic mode state
These tags (user data type elements) are summarized as a group. The
functionality is the same as familiar in STEP 7 programming, when creating a
structure in a data block.
Details for creating a user data type are described in chapter 5 and 6.
3.7
How to create and open a user data type?

User data types are created and opened via the project library.
Respective details are described in chapter 5.
3.8
Project library and global libraries

The created faceplates are stored and edited in the project library. If you wish to
reuse the created faceplates across different projects, then save the completed
faceplates in Global libraries.
Respective details are described in chapter 4.9.
V1.0, Entry ID: 68014632
21
4 Functions and Properties of the Faceplate

4.1 How to create a faceplate
Functions and Properties of the Faceplate

In this chapter, the functions and properties of a faceplate and the individual
parameters of the faceplate editor are described.
If you are not yet familiar with the functions and properties, such as the parameters
in the faceplate editor, then thoroughly read this chapter. This is necessary for the
comprehension of chapter 6 Configuration and Settings.
4.1
How to create a faceplate

There are two options for creating a faceplate.
Creating a faceplate via the pictures editor.
Creating a faceplate via the faceplate editor.
The individual points are explained below using an example.

If you wish to recreate the chapter, then it is sufficient if you initially use only a
button as an object, for example.
4.1.1
Creating a faceplate via the pictures editor
Creating a faceplate via the pictures editor is always an option if you have already
created a completely configured picture object. You can access the already
existing picture objects.
In order to create a faceplate via the pictures editor, please proceed as follows.
22
Generate a picture and add all required objects to this picture or call up an
existing picture object.
Select all objects in the picture which you require for the faceplate.
Right-click on one of the selected objects. A context menu opens.
Select the Create faceplate item from the context menu.

The following figure shows the context menu.
V1.0, Entry ID: 68014632

Figure 4-1
The faceplate editor for creating / editing the faceplate is opened.

In the inspection window (1) at Properties > Property list > Miscellaneous you
can adjust the name of the faceplate. Target system displays the type of
Runtime for which the faceplate is suitable.
Figure 4-2
2
First you close the created faceplate via the Close X button (2).
Details on the further configuration of a faceplate are available in chapter 6.
V1.0, Entry ID: 68014632
23

4.1.2
Creating a faceplate via the faceplate editor

In order to create a faceplate via the faceplate editor, please proceed as follows.
Select the Libraries task card.
Open the Project library palette.
Right-click the Types folder. A context menu opens.
Select Add new type... in the context menu.

The Add new type... window opens.
Figure 4-3
24
V1.0, Entry ID: 68014632

Display of the Add new type window.
Figure 4-4
On the left side, click the HMI faceplate button (1).
Assign a unique name to the faceplate (2).
In Specify device for the new type you activate the radio button
Panels / WinCC Runtime Advanced (3).
Confirm the entries with OK.

The faceplate editor for creating / editing the faceplate opens.
Now add all objects which you require you require to the workspace of the
picture. The procedure is the same as in the pictures editor.
Figure 4-5
2
V1.0, Entry ID: 68014632
25

4.2 Opening a faceplate
First you close the created faceplate via the Close X button (2).
Details on the further configuration of a faceplate are available in chapter 6.
4.2
Opening a faceplate
There are two options for opening a faceplate.
Open the faceplate via the pictures editor
Open the faceplate via the Project library.
The individual points are explained below using an example.
4.2.1
Open the faceplate in the pictures editor

To open an existing faceplate via the pictures editor, please proceed as follows.
Call the picture which contains the faceplate.
Right-click the faceplate. A context menu opens.
Select the Edit faceplate item from the opened context menu. The faceplate
editor for creating / editing the faceplate opens.
Figure 4-6
26
V1.0, Entry ID: 68014632

4.2 Opening a faceplate
4.2.2
Opening the faceplate via the Project library

To open an existing faceplate from the Project library, please proceed as follows:
In the Types folder you use the right mouse button to select the faceplate you
wish to open. A context menu opens.
Select Edit faceplate type in the context menu.

The faceplate editor for creating / editing the faceplate opens.
Figure 4-7
V1.0, Entry ID: 68014632
27

4.3 Releasing or restoring the faceplate
4.3
Releasing or restoring the faceplate
Faceplate status
When editing a faceplate, the following entry Name of the faceplate [in progress]
appears next to the name of the faceplate.
In the header of the faceplate editor you can also see the current status of the
opened faceplate.
The status information [in progress] shows you that the faceplate on hand was
edited and this modification has not yet been released. For this purpose, please
refer to chapter 4.3.2.
Figure 4-8
What happens with the faceplates used in the project if the respective faceplate is
currently edited?
When editing a faceplate used in the project, then the modifications performed at
this faceplate only become effective after the respective faceplate has been
explicitly released (see chapter 4.3.1).
You can, for example, interrupt editing a faceplate and save and close the
configuration. After opening the configuration, you can continue editing the
faceplate. The status of the edited faceplate is then always still [in progress].
28
V1.0, Entry ID: 68014632

4.3.1
Enabling the faceplate

Upon releasing the faceplate, a faceplate receives a version designation (see
chapter 4.3.3). After the release, all faceplates of this type are updated and point to
the new version of the faceplate. The old version is deleted.
To release a faceplate, please proceed as follows:
wish to release. A context menu opens.
Select Release faceplate type in the context menu.

The faceplate is updated.
Figure 4-9
Example:
Using a faceplate in several pictures. Subsequently, you edit this faceplate and add
a further button. As long as you dont release the edited faceplate, the faceplates
existing in the pictures will not change. The performed modification only becomes
effective after releasing the edited faceplate. The faceplate used in the pictures
now contains the added button.
V1.0, Entry ID: 68014632
29

4.3.2
Restoring the faceplate

You can, for example, interrupt editing a faceplate and save and close the
configuration. After opening the configuration, you can continue editing the
faceplate.
If you now wish to restore the old status of the faceplate, please use the Restore
faceplate type function.
All modifications since the last release at the faceplate will be rejected. The
faceplate will then be released again.
To restore a faceplate, please proceed as follows:
wish to restore. A context menu opens.
Select Restore faceplate type from the context menu.

The modifications are rejected. The faceplate is released again.
Figure 4-10
Example:
You perform the modifications at a faceplate. You notice that you have edited the
wrong faceplate. To restore the old status, please use the Restore faceplate
type function. The modifications are rejected. The respective faceplate in the
pictures will not be modified.
30
V1.0, Entry ID: 68014632

4.3.3
Version designation of a faceplate

Upon releasing a faceplate, the faceplate receives a version designation. After the
release, all faceplates of this type are updated and point to the new version of the
faceplate. The old version is deleted.
The current version of a faceplate can be displayed as follows.
Requirements:
The faceplate is opened in the faceplate editor.
Open the Parts (Project library) palette.
The data of the faceplate currently being edited are displayed.
Figure 4-11
V1.0, Entry ID: 68014632
31

4.4 Calling a faceplate or inserting it into a picture
4.4
Calling a faceplate or inserting it into a picture

Faceplates can be called via the Libraries task card and be inserted into a picture.
To add a faceplate to a picture, please proceed as follows:
Open the Types folder.

The available faceplates are displayed in the Types folder.
Select the desired faceplate and drag it to the HMI screen via drag&drop.
Figure 4-12
32
V1.0, Entry ID: 68014632

4.5 Faceplate editor
4.5
Faceplate editor
The subsequent figure shows the faceplate editor in which you can create and edit
the faceplate.
In the further course of the application, the areas such as
workspace
configuration area
inspection window
are explained in greater detail.

Several examples illustrate the effects of the configured function on the created
faceplate.
Figure 4-13
Workspace
Configuration area
Inspector window
V1.0, Entry ID: 68014632
33

4.5.1
Workspace
In the workspace area you place the objects for the faceplate as familiar from the
pictures editor. You remove the objects or add new objects into the workspace
from the Tools task card.
Figure 4-14
Tip:
After you have inserted an object, you assign a name to the object which enables
identifying the object easily. This procedure facilitates the work for the subsequent
configuration.
Example:
You have inserted a button. The system automatically assigns a name to this
button (e.g. Button_1).
Change the name e.g. from Button_1 to Button_Automatic_Mode.
In the Inspector window you change the properties of the button. In the
Properties > Property list > Miscellaneous tab you can adjust the name of the
object.
In the further course of this application you will see what this procedure is useful
for.
34
V1.0, Entry ID: 68014632

4.5.2
Configuration area
The configuration area contains various tabs.
Details on the individual tabs are described in chapter 4.7.
Figure 4-15
V1.0, Entry ID: 68014632
35

4.5.3
Inspector window
The properties of the selected object are displayed in the inspector window. It
corresponds to the same view as familiar from the pictures editor.
Properties, animations and events which you configure here in the faceplate at the
objects, cannot be edited in the pictures editor. As opposed to the Configuration
area (see previous chapter) where the given properties, animations and events
could be transferred to the faceplate as Parameter or be modified afterwards.
Settings in the inspector window are always advisable if you wish to assign a fixed
text, layout or function to an object.
Figure 4-16
Example 1 (assigning a text):

You have configured a button for the automatic mode. The displayed text at the
button shall always be called Auto.
In this case, you specify the name of the button in the inspector window at the
Properties > Property list > Miscellaneous.
36
Result:
The Auto text is firmly assigned to the button and cannot be changed
later on at the faceplate in the Interface tab.
Alternative:
Alternatively, you have the option to configure the name of the button in the
configuration area as static property. In the Interface tab of the faceplate
you can later on adjust the name individually. Respective details are
available in chapter 6.1.
V1.0, Entry ID: 68014632

Example 2 (assigning a function):
You have configured a button for the automatic mode.
In the Press property you have assigned the SetBit function in the inspector
window.
The respective tag has been configured as Parameter in the configuration
window.
Result:
When pressing the button, the SetBit function is executed. In the
Interface tab the function can not be changed later at the faceplate.
The respective tag, however, can be assigned individually to the used
function.
Alternative:
Alternatively, in the configuration area you have the option to configure the
event Press to the button.
In the Interface tab of the faceplate you can assign a system function
individually to the Press event. You are therefore not tied to a fixed
function, such as SetBit. Respective details are available in chapter 6.1.
V1.0, Entry ID: 68014632
37

4.6 Parameters in the workspace
4.6
Parameters in the workspace

The workspace of the faceplate editor contains the same parameters and settings
options as familiar from the pictures editor (1).
First of all, you need the Toolbox task card and the contained Basic objects and
Elements palettes (2).
Figure 4-17
38
V1.0, Entry ID: 68014632

4.7 Parameters in the configuration area
4.7
Parameters in the configuration area

Below, the individual tabs in the configuration area are described.
4.7.1
Properties tab
Figure 4-18
3
1
The Properties tab contains two lists as well as a graphic area.
Contained objects list (1)
Interface list 2
Graphic area (3)
V1.0, Entry ID: 68014632
39

The Contained objects list contains all objects located within the workspace.
Each of these objects has object-specific properties, which are already familiar
from the pictures editor (a button has different properties than a rectangle, for
example).
You can use the symbol next to the objects for opening/closing the property to
navigate through the properties of the objects.
Properties of the objects
In the Dynamizations column (2) you can see from the symbols whether the
available property has a static or a dynamic property.
symbol):
Dynamic properties (apparent from the
Values can be later assigned to the faceplate as tags or via a text or
graphics list.
symbol):
Static properties (apparent from the
Values are later assigned to the faceplate as a constant value.
Figure 4-19
2
1
The following example shall explain this:
40
V1.0, Entry ID: 68014632

Example: I/O field in a faceplate
The Process value property has a dynamic property (1).
Through the configuration, a tag can be assigned to the IO field at the faceplate in
the Interface tab.
The Font property has a static property (2).
Through the configuration, a font size can be individually assigned to the IO field at
the faceplate in the Interface tab.
Figure 4-20
The figure below shows the created faceplate (in this case only an IO field), which
was called in the pictures editor.
Figure 4-21
1
2
3
In the Interface tab (1) you see the two configured properties of the faceplate. A
tag can be assigned to the dynamic (2). Only a fixed value can be assigned to the
static interface (3).
V1.0, Entry ID: 68014632
41

Interface list
A faceplate is initially a self-sufficient picture object. From outside there is no
access to the display and control objects used in the faceplate.
Selected properties, animations and events of the used display and control objects
are listed in the Interface list. The configuration of the faceplate then occurs via
these fixed properties and tags in the pictures editor.
You can assign one property to one generated property or tag in the Interface
list.
However, it is also possible to assign several properties to one generated property
or tag in the Interface list.
The examples below shall illustrate the interface functionality.
Example 1 (interface, configurable color):

The foreground and background color of the Auto interface shall be configurable.
Table 4-1
No
1.
Action
Screens
Configuration view:
From the Contained objects list the selected properties from the Button_Auto_Mode button are
connected with the Properties in the Interface list via drag&drop (1). The data type is given
automatically.
The Properties in the Interface list were created beforehand. Respective details are available in
chapter 6.1.
42
V1.0, Entry ID: 68014632

No
2.
Action
Screens
View of the faceplate in the pictures editor:
The color for the Auto button can be assigned via the two configured properties via the
Interface tab.
V1.0, Entry ID: 68014632
43

Example 2 (IO field, tag assignment):
The tag of the IO field for the output of the current value for the flow rate shall be
configurable (1).
Table 4-2
No
1.
Action
Screens
Configuration view:
From the Contained objects list the selected property from the IO-Field_DisplayValue_m3/h IO
filed is connected with the Tag created in the Interface list via drag&drop. The data type must
be assigned / adjusted accordingly.
The Tag in the Interface list was created beforehand. Respective details are available in
chapter 6.1.
44
V1.0, Entry ID: 68014632

No
2.
Action
Screens

An HMI tag can be assigned to the IO field for the output of the current flow rate via the IOField_DisplayValue tag in the Interface tab (1).
V1.0, Entry ID: 68014632
45

Example 3 (multiple assignment)
The font of the four buttons shall be configurable.
Table 4-3
No
1.
Action
Screens
Configuration view:
From the Contained objects list, the selected properties of the four buttons are connected with
one generated Properties in the Interface list via drag&drop (1). The data type is given
automatically.
The Property in the Interface list was created beforehand. Respective details are available in
chapter 6.1.
46
V1.0, Entry ID: 68014632

No
2.
Action
Screens
The font for Font_Buttons can be assigned via Interface tab in Properties.
In this example: Tahoma 19px
3.
For comparison.
In this case, the font Tahoma 11px was selected.
V1.0, Entry ID: 68014632
47

Defining the properties in the Interface list:
The figure below shows the Interface list and the respective parameters.
General:
Depending on the added event and the resulting Type, the Interface list refers to
a
Property
symbol).
Property (apparent from the
Values are later assigned to the faceplate as a fixed value.
Tags
symbol).
Tag (apparent from the
Values can be later assigned to the faceplate as tags or via a text or
graphics list.
Figure 4-22
1a
1a
2a
2a
Adjusting a name:
If you wish to edit the name of a category, property or tag, then right-click the name
to be changed. A dialog box opens. In the dialog field, you select the option you
with to perform.
Add category (1)
In order to create a new category, click on the Add category button (1).
This function gives you the option to structure the used properties or tags
according to topics (1a). If necessary, adjust the name accordingly. The
name is displayed at the faceplate in the Interface tab.
Add property or tag (2)
48
In order to create a new property or tag, click on the Add property button
(2). The name is displayed at the faceplate in the Interface tab.
Tip: assign a name via which you can easily recognize the given property
or tag (2a).
Example: Instead of Button_01, rather use Button_AutoMode.
V1.0, Entry ID: 68014632

Adjusting the sequence (3), (4)
The buttons enable you to adjust the sequence of the given categories,
properties and tags afterwards.
Name (5)
Name of the added category, property or tag.
Type (6)
Use it to select the data type.
Note:
If you connect static values from the Contained objects list with the
Interface list via drag&drop, the data type is assigned automatically. If
you assign the Properties from the inspection window of the Interface
list, you need to specify the respective data type and adjust it to your
specification.
V1.0, Entry ID: 68014632
49

Graphic area
The graphic area shows the configured connections between the Contained
objects list and the Interface list. Furthermore, function assignments made
between the inspector window and the Interface list are displayed.
Clicking a line enables you to see which properties are connected with each other.
This facilitates the assignment among one another, in particular for extensive
assignments.
Example:
The Visibility function is configured in the inspector window of the Manual and
Auto buttons. The respective tag is stored in the Interface list. This assignment
automatically allocates the graphic lines directly to the Name of the interface (1).
As opposed to the graphic line allocation between the Contained objects list and
the Interface list. Here, there is a direct graphical line allocation between the used
Property from the Contained objects list and the respective Property from the
Interface list (2).
Figure 4-23
50
V1.0, Entry ID: 68014632

4.7.2
Events tab
Figure 4-24
3
2
Like the previous Properties tab, the Events tab contains two lists as well as a
graphic area.
Interface list 2
Graphic area (3)
V1.0, Entry ID: 68014632
51

Contained objects list
Upon calling the Events tab, the properties of the objects in the Contained
objects list change.
At objects such as a button, the known events such as Press, Click, Release
etc are available. Furthermore, the view in the Interface list changes.
You can use the symbol for opening/closing to navigate through the properties of
the objects.
In the displayed example, the names of the individual objects have been
individually adjusted / assigned beforehand. Through this name assignment, the
used objects can be easily identified.
The figure below shows a detailed extract of the possible Events of the
Button_Manual_Mode button.
Figure 4-25
Example:
As the event, the Press function was selected for the Button_Manual_Mode
button and assigned to the Interface list.
In the Events tab of the pictures editor a function can be assigned individually.
The function is carried out when pressing the Auto button. Please refer to the
below description of the Interface list.
52
V1.0, Entry ID: 68014632

Interface list
The Interface list is used to direct selected events from the Contained objects
list, such as Press, Click, Release etc., outwards via an Interface.
This means:
you have called a faceplate in the pictures editor Functions shall be assigned to
the control objects contained in the faceplate. The properties configured in the
Interface list are used for the functions to be assigned to the control objects
contained in the faceplate.
Example:
A function shall be configurable to the Button_Manual_Mode button for the
Press event.
Configuration view:
From the Contained objects list, the selected property of the Press event is
assigned to the Interface list via drag&drop.
Figure 4-26
V1.0, Entry ID: 68014632
53

Any function can be assigned to the Manual button via the Events tab. In this
case SetBit.
Figure 4-27
54
V1.0, Entry ID: 68014632

Defining the properties in the Interface list:
The following figure shows the Interface list. The Interface list has no specific
properties.
Figure 4-28
Events (1)
Here, the name of the added events from the Contained objects list is
displayed.
The events from the Contained objects list are directly assigned to the
Interface list via drag&drop.
The name which you specify here is displayed at the faceplate in the
Events tab.
Tip: assign a name via which you can easily recognize the given property.
Example: instead of Press, rather use AutoMode_Press.
Note:
The sequence of the listed properties cannot be adjusted afterwards.
V1.0, Entry ID: 68014632
55

Graphic area
The graphic area shows the configured connections between the Contained
objects list and the Interface list.
Clicking a line enables you to see which properties are connected with each other.
This facilitates the assignment among one another, in particular for extensive
assignments.
Example:
The Press event has been configured at the buttons (1). The names in the
Interface list have been adjusted according to the assigned property. Clicking one
of the lines (2) enables you to see the appropriate assignment.
Figure 4-29
56
V1.0, Entry ID: 68014632

4.7.3
Tags tab
Figure 4-30
The Tags tab contains tags which are only available within the faceplate. The
tags are connected directly to the objects contained in the faceplate.
Note
You cannot access the tag tables contained in the project tree of your project via
the faceplate editor.
V1.0, Entry ID: 68014632
57

4.7.4
Scripts tab
Figure 4-31
The Scripts tab contains scripts which are only available within the faceplate. In
the script you call up the system functions or program new functions, e.g. for
converting values. Programming is performed in VB script code.
Note
58
You cannot access the scripts contained in the project tree of your project via the
faceplate editor.
V1.0, Entry ID: 68014632

4.7.5
Text lists tab

Figure 4-32
2
1
In the Text lists tab you create text lists for the faceplate and edit them. The
created text lists are only available within the faceplate. You interconnect the text
lists of the faceplate directly to a symbolic I/O field.
The entries for the text lists are entered in the separate Text list entries window
(1).
If you do not wish to display the Text list entries window, open the window via the
arrow key (2).
Note
You cannot access the text lists contained in the project tree of your project via
V1.0, Entry ID: 68014632
59

4.7.6
Graphic lists tab

Figure 4-33
2
In the Graphic lists tab you create graphic lists for the faceplate when required.
These graphic lists are only available within the faceplate. You interconnect the
graphic lists of the faceplate directly to a graphic I/O field.
The entries for the graphic lists are entered in the separate Graphic list entries
window (1).
If you do not wish to display the Graphic list entries window, open the window via
the arrow key (2).
Note
60
You cannot access the graphic lists contained in the project tree of your project
via the faceplate editor.
V1.0, Entry ID: 68014632

4.7.7
Texts tab
Figure 4-34
The Texts tab only contains texts which are used in the faceplate. For multilanguage configurations, the known functions such as Import project texts and
Export project texts are available (1). Alternatively you enter the multi-language
texts directly into the existing editor.
Note
You cannot access the text list contained in the project tree of your project via
V1.0, Entry ID: 68014632
61

4.7.8
Languages tab
Figure 4-35
In the Languages tab you assign the language to be available for the generated
faceplate. The languages are independent of the language selected in the project.
Using this functionality, you can also use a faceplate in projects with different
languages.
When using the faceplate, it must be ensured, that the stored languages of the
faceplate are also used in the project in which the faceplate is called.
Example:
In your project, you have selected the languages German(Germany) and
English(United States).
The faceplate was generated in the languages German(Germany) and
English(Great Britain).
When using the faceplate in the project with the languages German(Germany)
and English(United States) and selecting the language English(United States),
then no texts are displayed at the faceplate since only the language English(Great
Britain) is stored at the faceplate.
Note
62
Settings in the project languages in the faceplate editor are independent of the
project languages of the user project.
V1.0, Entry ID: 68014632

4.8 Parameters in the inspector window
4.8
Parameters in the inspector window

The inspector window in the faceplate editor mainly contains the same parameters
and settings options as familiar from the pictures editor.
Deviations occur in the Properties > Events tab. Functions such as Activate
screen, for example, are not available here.
Figure 4-36
V1.0, Entry ID: 68014632
63

4.9 Saving faceplates in Global libraries
4.9
Saving faceplates in Global libraries

The created faceplates are stored and edited in the project library. If you wish to
reuse the created faceplates across different projects, then save the completed
faceplates in the Libraries task card and there in the Global libraries palette.
Table 4-4
No
1.
Action
Screens
Create a new Global library
Open the Libraries task card and there the Global libraries palette.
Click on the first icon. The new global library is created via this icon.
A window opens in which you specify the name (1) as well as the storage path (2) etc.. Close
the entry with the Create button.
1
2
64
V1.0, Entry ID: 68014632

No
Action
Screens
View of the newly created Global library

The following picture shows the view of the newly created global library Libraries_Faceplate with
the subfolders Types and Master copies.
2.
Copying faceplates from the project library
Go to the Project library palette.

In the Types folder you select an individual block or the entire folder with the contained
faceplates (1).
Right-click on the selected entry. A context menu opens. Here you select the Copy option
(2).
V1.0, Entry ID: 68014632
65

No
3.
Action
Insert the copied faceplates into global library Libraries_Faceplate
4.
Screens
Go back to the Global libraries palette and open the global library Libraries_Faceplate.
Select the Types folder via the right mouse button.
A context menu opens. Here you select the Insert option. The previously copied folder with
the faceplates is copied to the Types folder.
Saving the changes in Global libraries
Click on the third icon. The changes saved in the library via this icon.
Further information to the topic of libraries is available in the online help.
66
V1.0, Entry ID: 68014632
5 Functions and Properties of a User Data Type (HMI UDT)

5.1 Creating a user data type
Functions and Properties of a

User Data Type (HMI UDT)
This chapter describes the steps for creating / editing a user data type.
If you are not yet familiar with the properties of a user data type, then thoroughly
read this chapter. This is necessary for the comprehension of chapter 6
Configuration and Settings.
5.1
Creating a user data type

To create a new user data type, please proceed as follows:
Right-click the Types folder. A context menu opens.
Select Add new type... in the context menu.

The Add new type... window opens.
Figure 5-1
V1.0, Entry ID: 68014632
67

5.1 Creating a user data type
Display of the Add new type window.
Figure 5-2
On the left side, click the HMI UDT type (1).
Assign a unique name to the user data type (2).
In Specify device for the new type you activate the radio button
Panels / WinCC Runtime Advanced (3).
Confirm the entries with OK.

The editor for creating / editing the user data type opens.
View of the opened editor.

Figure 5-3
68
V1.0, Entry ID: 68014632

5.2 Editing/opening a user data type
5.2
Editing/opening a user data type

To process an existing user data type, please proceed as follows:
In the Types folder you use the right mouse button to select the user data
type you wish to open. A context menu opens.
Select Edit user data type in the context menu.

The editor for creating / editing the user data type block opens.
Figure 5-4
V1.0, Entry ID: 68014632
69

5.3 Configuring the user data type
5.3
Configuring the user data type
General information
Considerations during the generation process:
Prior to configuring a user data type, all Functions a faceplate should have
should be known. It facilitates the later assignment to the selected properties in
the faceplate. However, you can also adjust a user data type later on at any
time.
The date type in the STEP 7 programming must have the same Structure as
the created user data type.
The used Data types in the data block of the STEP 7 programming must
correspond to the data types in the user data type.
Example view between a DB with data type Struct and a user data type. The
figure illustrates the structure of both files.
Figure 5-5
User Data Type
STEP 7 Data Block
Note:
Further data types of the Struct type are stored in the STEP 7 data block. These
are used for further faceplates.
70
V1.0, Entry ID: 68014632

5.3 Configuring the user data type
Creating tags
The process for adding tags to the user data type editor is similar as for entering
tags into a Tag table.
Figure 5-6
2
1
(1)
Here you can adjust the name of the user data type.
(2)
Here you select the communication driver (e.g. S7 300/400).

The set communication type applies for all elements.
After a communication driver has been unselected,
an internal tag cannot be used as data type.
(3)
Double-click <Add> in the Name column and specify the

data type etc..
Replace the standard entry in the "Name" column with a meaningful
name. The name should be a reference to the tag names used in the
data block.
(4)
Here you can define special properties such as linear scaling for the
tag. The possible properties are limited in comparison with Tag table.
After all tags have been added, close the editor via the Close button X.
For the created user data type to be available in the project, it must first be
released. For this purpose, please refer to chapter 5.4.
V1.0, Entry ID: 68014632
71

5.4 User data type
5.4
User data type
User data type status

When editing a user data type, the following entry Name of the faceplate
[in progress] appears next to the name of the user data type.
In the header of the user data type editor you can also see the current status of the
opened user data type.
The status information [in progress] shows you that the user data type on hand
was modified.
Figure 5-7
What happens with a user data type used in the project if the respective user data type is
currently edited?
When editing a user data type, then the modifications at the user data type used in
the project only become effective after the respective user data type has been
explicitly released (see chapter 5.4.1).
You can, for example, interrupt editing a user data type and save and close the
configuration. After opening the configuration, you can continue editing the user
data type. The status of the edited user data type is then always still [in progress].
72
V1.0, Entry ID: 68014632

5.4 User data type
5.4.1
Releasing the user data type

After you have created or edited a user data type, it is initially not applicable in the
project. A user data type must first be released for it to be available in the project.
To release an existing user data type, please proceed as follows:
type you wish to release. A context menu opens.
Select Release user data type in the context menu.

The user data type is updated and can now be used in the project.
Figure 5-8
V1.0, Entry ID: 68014632
73

5.4 User data type
5.4.2
Restoring the user data type

You can, for example, interrupt editing a user data type and save and close the
configuration. After opening the configuration, you can continue editing the user
data type.
If you now wish to restore the old status of the user data type, please use the
Restore user data type function.
All modifications since the last release at the user data type will be rejected. The
user data type is then released again.
To restore a user data type, please proceed as follows:
type you wish to restore. A context menu opens.
Select Restore user data type in the context menu.

The modifications are rejected. The user data type is released again.
Figure 5-9
74
V1.0, Entry ID: 68014632
6 Configuration and Settings

6.1 Configuration examples
Configuration and Settings

In this chapter, details on the configuration of a faceplate are described. If you are
not yet familiar with the terms, properties and functions of a faceplate, such as
Create faceplate or Release faceplate, then first read chapter 4.
6.1
Configuration examples
Using typical application examples, it is shown how to realize the described tasks
with a faceplate.
In the enclosed HMI project the subsequently created faceplates are included as
examples.
The examples are available in the Libraries task card and there in the Global
library > Faceplate_Sample_01 palette. The examples are based on one another.
Figure 6-1
V1.0, Entry ID: 68014632
75

6.1.1
Assigning a configurable function to a button

Task (Sample_01):
With two buttons it shall be possible for user to assign any system function at the
Press event such as SetBit, for example.
Table 6-1
No
1.
Action
Screens
Insert objects
Open the faceplate editor.

Add two buttons to the workspace.
Assign a label to the buttons in the inspector window in Events > General.
In this example:
Text ->
On
Text ->
Off
Assign a name to the buttons in the inspector window in Events > Miscellaneous, which the
button can be identified by.
In this example:
Button_1 ->
Button_On
Button_2 ->
Button_Off
76
V1.0, Entry ID: 68014632

No
2.
Action
Screens
Assigning properties
Select the Events tab in the configuration area (1).

In the Contained objects list you select the properties of the button (2).
Select the event for which the function shall be performed (3).
Via drag&drop you configure a connection between the selected Event and the Interface
list (4).
In this example:
Button_Off ->
Press
1
4
In the Interface list you assign a name for the newly created property which helps you
identify the property later on at the faceplate (1).
In this example:
Press ->
Event_Button_Off
Repeat the previously described steps for the second button.
The required settings are thus completed.

3.
Releasing the faceplate

For the performed configurations to become effective, the created faceplate must be released.
Respective details are available in chapter 4.3.1.
V1.0, Entry ID: 68014632
77

No
4.
Action
Screens
Faceplate view: Assigning a function

Call up the created faceplate in a picture. Chapter 4.4 describes how to call up a faceplate.
The subsequent figure shows the created faceplate with the two buttons On and Off (1).
In the Properties > Events tab (2) the two created properties Event_Button_Off and
Event_Button_On are displayed (3).
Via the dropdown list (4) you can assign the familiar functions such as SetBit to the events
Event_Button_Off and Event_Button_On.
Note:
The name of the properties was selected so they can easily be assigned to the buttons.
78
V1.0, Entry ID: 68014632

6.1.2
Creating a configurable IO field

Task (Sample_02):
Process values shall be input and output at two IO fields.
It shall be possible to assign the HMI tags to the IO fields.
Table 6-2
No
1.
Action
Screens
Insert objects

Add two IO fields to the workspace.
In the inspector window in Events > Miscellaneous you assign a name to the IO field which
the button can be identified by.
In this example:
I/O field_1 ->
IO_Field_CurrentSpeed
I/O field_2 ->
IO_Field_SpeedSetting
In the inspector window, you make further settings for the IO fields such as settings at the
Layout.
V1.0, Entry ID: 68014632
79

No
2.
Action
Screens
Assigning properties
Select the Properties tab (1).
In the Cotained objects list you select the properties of the IO field (2).
Open the General entry from the list and mark the Process value property (3).
Via drag&drop you configure a connection between the selected Property and the Interface
list (4). Drag the mouse pointer to an existing category. (The name of the category can be
specified/modified individually and may deviate from the names used in the picture).
In this example:
IO_Field_CurrentSpeed -> Process value Properties_Faceplate
1
2
In this example:
Process_value ->
ProcessValue_CurrentSpeed
Select the data type from the drop-down list (2).
80
Repeat the previously described steps for the second IO field.
V1.0, Entry ID: 68014632

No
Action
Screens

3.

4.
Faceplate view; assigning an HMI tag

The subsequent figure shows the created faceplate with the two IO fields (1).
In the Properties > Interface tab (2) the two created properties ProcessValue_CurrentSpeed
and ProcessValue_SpeedSettings are displayed (3).
An HMI tag can be assigned to the properties ProcessValue_CurrentSpeed and
ProcessValue_SpeedSettings via the dropdown list (4).
Note:
The name of the properties was selected so they can easily be assigned to the IO fields.
1
2
V1.0, Entry ID: 68014632
81

6.1.3
Configurable font size at the object

Task (Sample_03):
At the faceplate, it shall be possible to assign the font size of the objects used in
the faceplate (two IO fields, two buttons and texts).
Table 6-3
No
1.
Action
Insert objects
Screens

Enter the required objects such as buttons, IO fields etc., into the workspace. For this
purpose, look at the table section 1 in chapters 6.1.1 and 6.1.2.
Additionally, add two text fields into the workspace.
In the inspector window in Events > Miscellaneous you assign a name to the text field which
the button can be identified by.
In this example:
Text field_1 ->
Text_Field_CurrentSpeed
Text field_2 ->
Text_Field_SpeedSetting
In the inspector window, you make further settings for the individual objects, if necessary such
as settings at the Layout.
For optical reasons, the objects are integrated into a frame (1).
82
V1.0, Entry ID: 68014632

No
2.
Action
Screens
Assigning a property for the first object

In the Cotained objects list you select the properties of the first object (2).
Open the Text entry from the list and mark the Font property (3).
Configure a connection between the selected Property and the Interface list via drag&drop
(4). Drag the mouse pointer to an existing category. (The name of the category can be
specified/modified individually and may deviate from the names used in the picture).
In this example:
Button_Off -> Text -> Font
Properties_Objects
In this example:
Font ->
Font_AllObjects
The data type is given automatically (2).
The required settings for the first Object are thus completed.
V1.0, Entry ID: 68014632
83

No
3.
Action
Screens
Assign further properties in the Interface list

Note:
You can assign several properties from the Contained objects list to one property from the
Interface list.
In the Contained objects list you select the properties of the next object (1).
Open the Text entry from the list and mark the Font property (2).
Configure a connection between the selected Property and the Interface list via drag&drop.
Drag the mouse pointer to the already existing property (3).
In this example:
Button_On -> Text -> Font
Font_AllObjects
Repeat the previously described steps for all listed elements.

The picture below shows the complete assignment of the properties.
84
V1.0, Entry ID: 68014632

No
4.
Action
Screens

5.
Faceplate view; assigning the text format

The subsequent figure shows the created faceplate (1).
In the Properties > Interface tab of the faceplate (2) the created property Font_AllObjects is
displayed (3).
The font can be assigned to the Font_AllObjects property via the selection box (4).
In this example:
Font:
Tahoma 16px
Note:
The name of the tags was selected so the stored function can be easily recognized.
V1.0, Entry ID: 68014632
85

6.1.4
Switching objects invisible

Task (Sample_04):
It shall be possible to switch all objects in a faceplate via a function/tag.
Table 6-4
No
1.
Action
Insert objects
2.
Screens

Enter all objects such as buttons, IO fields, text fields etc., into the workspace you require.
The structure of the faceplate from chapter 6.1.3 is used as a template for this example.
Creating tags
In the Interface list of the configuration area you add a new tag and via the dropdown menu
you specify data type Bool in the Type column (1).
In this example:
Name of the property:
FaceplateVisible.
Type:
Bool.
86
V1.0, Entry ID: 68014632

No
3.
Action
Screens
Creating an animation
In the workspace you select all objects (1).

In the inspection window you open the Properties > Animations tab.
Add the Visibility animation in the area navigation at Display (2).
Selecting a tag:
The properties/tags from the Interface list are displayed to you via the
symbol (3).
Select the FaceplateVisible tag from the list.
Selecting the tag automatically connects all marked object with the Visibility animation. You
can see this in the graphic area at the newly created connections (4).
Specify the area in which the faceplate shall be visible.
In this example:
Area:
0 to 0.
Visibility:
invisible.
3
2

4.

V1.0, Entry ID: 68014632
87

No
5.
Action
Screens
Faceplate view; tag assignment

In the Properties > Interface tab of the faceplate (2) the created tag FaceplateVisible is
displayed (3).
Via the dropdown menu you can assign an HMI tag to the FaceplateVisible tag via which the
faceplate can be switched invisible (4).
Note:
88
V1.0, Entry ID: 68014632

6.1.5
Configuring a color change at an object

Task (Sample_05):
Pressing a button shall change the background color of the pressed button.
Table 6-5
No
1.
Action
Insert objects
2.
Screens

The structure of the faceplate from chapter 6.1.4 is used as a template for this example.
Creating tags
In the Interface list of the configuration area you add two new tags and via the dropdown
menu you specify data type Bool in the Type column (1).
In this example:
Name of the property:
Status_Button_On
Status_Button_Off
Type:
Bool.
V1.0, Entry ID: 68014632
89

No
3.
Action
Screens
Creating an animation
The properties/tags from the Interface list are displayed to you via the
symbol (3).
Select the Status_Button_On tag from the list.
Selecting the tag automatically creates a connection between the property of the On button
(Button_On) in Contained objects list and the Status_Button_On tag in the Interface list.
You can see this in the graphic area (4).
Specify the area and the background color (5).
In this example:
Value 0:
gray
Value 1:
green
Select the On button in the workspace (1).

In the inspection window you open the Properties > Animations tab.
Add the Appearance animation in the navigation in Display (2).
Selecting a tag:
2
5
Repeat the steps for the second Off button.
90
V1.0, Entry ID: 68014632

No
4.
Action
Screens

5.
Faceplate view; tag assignment

In the Properties > Interface tab of the faceplate (2) the created tags Status_Button_Off and
Status_Button_On are displayed (3).
Via the dropdown list you can assign an HMI tag to the Status_Button_Off and
Status_Button_On. Depending on the value of the tag, the background color of both buttons
changes (4).
Note:
V1.0, Entry ID: 68014632
91

6.1.6
Using the faceplate with a user data type
Introduction
When using the all of the described functions from chapters 6.1.1 to 6.1.5 in one
operator station, you will notice, that the number of tags to be assigned to the
faceplate is increasing.
A user data type is used to reduce this number of assignments of tags to a
faceplate.
For the subsequent description it is helpful if you open the attached configuration
and the faceplate as a template, or recreate the described functions by means of
the existing faceplate.
Note
General information
A user data type always includes
a data block which has the same structure as the user data type.
an HMI tag for which the created user data type has been selected as Data
type. The data exchange is then performed between the PLC and the user
data type used in the faceplate.
For the configuration of a user data type it makes sense to initially create the data
block with the required structure.
You can assign respectively one data block to a user data type. However, you can
also use a data block which contains several structures and assign it to the
individual user data types.
Task (Sample_06)
A drive for a fan shall be operated and monitored via an operator station. The
following functions and status information shall be executed and evaluated.
Status information
Automatic mode state active
Manual mode state active
Manual mode ON state active
Manual mode OFF state active
Ready to use state
Error state
OK state
Functions
92
Output of fan number
Output value of the current flow rate
Switchover to automatic mode
Switchover to manual mode
Manual mode On
Manual mode Off
V1.0, Entry ID: 68014632

Creating data block, user data type and HMI tag for the data exchange
Table 6-6
No
1.
Action
Screens
Creating a data block

For realizing the described task (Sample_06) the following data block DB10 was created. The
displayed data block contains the structure for three faceplates.
(1)
(2)
(3)
Structure for the first faceplate

Structure (opened) for the second faceplate
Structure for a third faceplate
Note:
The data block can be extended at will.
V1.0, Entry ID: 68014632
93

No
2.
Action
Screens
Configuring a user data type

Chapter 5.3 describes how to configure a user data type.
The figure below shows the created faceplate type with the respective tags. The structure
(structure) corresponds to that of the DB10 data block.
Please ensure, that the user data block is released after creating it.
Name of the user data type:
3.
HMI_UDT_Pump
Creating an HMI tag

The data exchange between the PLC and the user data type used in the faceplate requires an
HMI tag.
In the project navigation you create an HMI tag in the HMI tag folder. Select the user data type
used in the faceplate as the data type.
In this case HMI_UDT_Pump (1).
Note:
Selecting the HMI_UDT_Pump data type initially requires a control connection to be selected in
the tag editor.
In this case HMI_connection (2).
2
94
V1.0, Entry ID: 68014632

No
Action
Screens
Assigning a start address to the HMI tag
The DB10 data block displayed in the table section (1) contains the structure for three faceplates
(Link).
Add DB10.DBX0.0 as the start address for the first faceplate.
The start address for the second faceplate is DB10.DBX16.0.

The start address for a third faceplate is DB10.DBX32.0.
View of the HMI tag with assigned user data type
The symbol for reducing / expanding the visible entries enables viewing the complete structure of
the created HMI tags (1).
The structure of the assigned user data type was automatically assigned to the HMI tag
DataExchange_HMI_Faceplate_01_to_PLC.
V1.0, Entry ID: 68014632
95

Creating a faceplate and using a user data type
Table 6-7
No
1.
Action
Screens
Insert objects

Enter all objects such as buttons, IO fields, text fields etc., into the workspace required
according to the plant description.
The attached faceplate from example Sample_06 serves as a template.
2.
Adjusting the names of the inserted objects

Adjust the names of the used objects in the Properties > Contained objects tab so you can
easily identify the objects. For this purpose, look at the previously described chapters 6.1.1 and
6.1.5.
The figure below shows the edited names in the Contained objects list.
96
V1.0, Entry ID: 68014632

No
3.
Action
Screens
Using the user data type in the faceplate

In the Properties > Interface tab of the configuration area you add a tag and select the created
user data type as a Type via the dropdown menu.
In this example:
Name of the user data type
4.
HMI_UDT_Pump
View of the configured faceplate

After assigning the user data type in the Interface list, the structure of the user data type is
displayed to you via the created tag.
The symbol for reducing / expanding the visible entries enables viewing the complete structure of
the created tags (1).
The figure below shows the already created configurations between the Contained objects list
and the Interface list.
The details for assigning the individual configurations are described below.
The procedure is principally the same as described previously for chapter 6.1.1 to 6.1.5 .
V1.0, Entry ID: 68014632
97

No
5.
Action
Screens
Configuring a color change at objects

A color change has been stored at the following objects (animation).
Button:
Button_Auto_Mode
Button:
Button_Manual_Mode
Button:
Button_Manual_On
Button:
Button_Manual_Off
Rectangle: Rectangle_Ready_to_use
Rectangle: Rectangle_Fault
Display:
Symbol_Pump
The procedure is described in chapter 6.1.5.
The allocation can be controlled by means of the graphic representation.
6.
Creating configurable IO fields
The following IO fields can be configured.
Input/output field:
IO-Field_DisplayValue_m3/h
Output field:
IO-Field_PumpNo
The procedure is described in chapter 6.1.2. The assignment via drag&drop in this case occurs
directly to the respective tag at the interface.
Example: Input/output field:
IO-Field_DisplayValue_m3/h
The allocation can be controlled by means of the graphic representation.
98
V1.0, Entry ID: 68014632

No
7.
Action
Screens
Assigning an event to the buttons

An event has been configured at the following objects.
Button:
Button_Auto_Mode
Button:
Button_Manual_Mode
Button:
Button_Manual_On
Button:
Button_Manual_Off
Button:
Button_x
8.
Switching objects invisible

For the enclosed application example, there is the option to switch the used faceplate invisible.
9.
View of the completed faceplate in the faceplate editor
The Interface list only contains the tags for the user data type and the tag for switching the
faceplate invisible.
In this example:
Property_UDT ->
02_HMI_UDT_Pump
Faceplate_Visible ->
Bool
The Connections shown in the graphic area are no more extensive in this example application.
The reference behind it should now no longer be confusing for you.
10.

V1.0, Entry ID: 68014632
99

No
Action
Screens
11.
Faceplate view; data block assignment

The subsequent figure shows the created faceplate (1). Using the User data type reduces the
number of tags to be configured to a minimum.
In the Properties > Interface tab of the faceplate (2) the created tags Property_UDT and
Faceplate_Visible are displayed (3).
An HMI tag can be assigned to both tags via the dropdown list (4).
Assign the previously described HMI tag DataExchange_HMI_Faceplate_02_to_PLC to the
Property_UDT tag (Link).
Note:
100
V1.0, Entry ID: 68014632

6.1.7
Assigning the user authorization to a faceplate

Task (Sample_07):
Switching from automatic mode to manual mode as well as the subsequent
operation in manual mode shall only be performed by an authorized person
(service staff).
A user administration is required for this.
Table 6-8
No
1.
Action
Screens
Insert objects

The attached faceplate from example Sample_07 serves as a template.
2.
Adjusting the names of the inserted objects

Adjust the names of the used objects in the Properties > Contained objects tab so you can easily
identify the objects. For this purpose, look at the previously described chapters 6.1.1 and 6.1.5.
The figure below shows the edited names in the Contained objects list.
V1.0, Entry ID: 68014632
101

No
3.
Action
Screens
Assign a property to the first button in the Interface list

In the Contained objects list you select the properties of the Button_Auto_Mode button (2).
Open the Security entry from the list and mark the Authorization property (3).
Via drag&drop you configure a connection between the selected Property and the Interface list (4).
Drag the mouse pointer to an existing category. (In this example a further category named
SecurityLevel was created).
1
2
4
In the Interface list you assign a name for the newly created property which helps you identify the
property later on at the faceplate (1).
In this example:
Authorization ->
Security_Button
The data type is given automatically (2).
The required settings for the first button are thus completed.
102
V1.0, Entry ID: 68014632

No
4.
Action
Screens
Assign further buttons in the Interface list

Note:
You can assign several properties from the Contained objects list to one property from the Interface
list. However, you can also store a separate Property in the Interface list for each button.
In this example, the properties of all five buttons are assigned to a Property in Interface list.
In the Contained objects list you open the properties of the button (1).
Open the Security entry from the list and mark the Authorization property (2).
Configure a connection between the selected Property and the Interface list via drag&drop. Drag
the mouse pointer to the already existing Security_Button property (3).
Repeat the previously described steps for all listed elements.
The picture below shows the complete assignment of the properties.
V1.0, Entry ID: 68014632
103

No
5.
Action
Screens

For the performed configurations to become effective, the created faceplate must be released. Respective
details are available in chapter 4.3.1.
6.
Faceplate view; assigning the authorization

In the Properties > Interface tab of the faceplate (2) the created property Security_Button is displayed
(3).
The respective authorization can be assigned to the Security_Button property via the selection box (4).
In this example:
Operating
Note:
104
V1.0, Entry ID: 68014632

6.2 Application example
6.2
Application example
6.2.1
Example 1
In Screen_01 of the attached HMI configuration an example is listed how the
created faceplate can be integrated to a plant picture.
Task
In a ventilation system two fan drives shall be operated and monitored via the HMI
operator unit. The control elements for controlling the fan drives shall only be
visible or called on demand.
Solution
The following picture shows the used control elements (faceplates) in a plant
picture.
The used functions of the faceplates are described in detail for chapter 6.1.1 to
6.1.6 .
Clicking one of the fan symbols calls the respective control element or closes it
again.
The control element can also be closed again via the X button at the control
element.
Figure 6-2
The call of the faceplates for the Screen_01 picture is described on the following
page.
V1.0, Entry ID: 68014632
105

Configuration
In attached HMI project the used faceplate is stored as an example.
The faceplate as well as the user data type are available in the Libraries task card
and there in the Global library > Faceplate_Sample_01 palette.
Table 6-9
No
1.
Action
Screens
Overview Screen_02, faceplate hidden
The Screen_02 picture consists of compiled objects from the symbol library of WinCC (TIA
Portal).
An invisible button has been placed over the each pump symbol (1).
The faceplates are currently hidden for better clarity (level 2 and level 3 are deactivated).
2.
Overview Screen_02, faceplate shown

In this case, the faceplates are shown (level 2 and level 3 are active).
Chapter 4.4 describes how a faceplate is inserted into a picture. Position the faceplates in the best
way for the application.
106
V1.0, Entry ID: 68014632

No
3.
Action
Screens
Configuring the faceplate
In the Properties > Interface tab of the faceplate both tags Faceplate_Visible and
Property_UDT are displayed (1).
Assign the respective HMI tag to this tag (2).
In this example:
Faceplate_Visible ->
Faceplate_01_Visible
Property_UDT ->
DataExchange_HMI_Faceplate_01_to_PLC
2
1
4.
Invisible button
The invisible button shows or hides the faceplate next to it (1).
The InvertBit function is stored at Properties > Events > Press (2).
The Faceplate_01_Visible tag is used as the HMI tag (3). For this purpose, please refer to the
previous table section 3.
V1.0, Entry ID: 68014632
107

No
5.
Action
Screens
Integrating a further faceplate

Repeat the steps from table sections 3 and 4 for the second fan drives and adjust the respective
HMI tag.
6.
PLC program
In this case, no STEP 7 program has been stored for the application.
For testing the functions, you can use the Watch and force table ->
Watch table_Sample_01.
The force table stores all tags for the two faceplates.
108
V1.0, Entry ID: 68014632

6.2.2
Example 2
The Screen_02 picture contains the second example.
In the second example only one faceplate is displayed in connection with the
respective user data type.
A PLC program is stored for example 2. At the faceplate, the status information of
the button is simulated via the PLC program.
The following functions are evaluated or controlled via the FB20.
Status automatic mode active
Status Manual mode active
Status manual On
Status manual Off
For the further functions of the faceplate, the respective tags are listed in the form
of a table. The respective values can be specified via this table.
The faceplate uses the functions described in chapter 6.1.
Figure 6-3
V1.0, Entry ID: 68014632
109
7 Operation of the Application

7.1 Overview
Operation of the Application
7.1
Overview
The enclosed example configuration helps you get an impression of how the
faceplate can be applied.
For testing the example configuration, you can whenever necessary also use the
simulation integrated in WinCC (TIA Portal).
Calling the example application

Table 7-1
No
1.
Action
Screens
Calling the example application

After starting Runtime, the following screen
will be displayed.
Here you select Application example.
This takes you to the Overview screen.
2.
Overview screen
The Overview screen enables you to
navigate to the example application.
Press the Sample 1 or Sample 2 button.
110
V1.0, Entry ID: 68014632

7.2 Screen Example 1
7.2
Screen Example 1
Showing or hiding the faceplates

The picture shows an application case for using faceplates.
The operating stations for the fan drives can alternatively be shown or hidden. The
picture remains clearer and provides space for further objects. Operating the two
listed valves in the picture would also be possible
via configured faceplates, for example.
Note:
There is a Watch and force table -> Watch table_Sample_01
for this picture. The force table stores all tags for the two faceplates.
Table 7-2
No
1.
Action
Screens
Hiding faceplates
In this case, the two operating stations

are hidden.
Apart from the fan symbol, a yellow point

is also displayed so the operator can see
behind which object a there is a function
(button).
(Clearly apparent in Runtime).
2.
Faceplate shown
In this case, an operator station has been
called. The call is performed via the
invisible button located above the fan
symbol.
Renewed actuation of the invisible button
or pressing the X button at the control
station, hides the control station again.
V1.0, Entry ID: 68014632
111

No
3.
Action
Screens
Both faceplates are shown

In this case, both operator stations have
been called. The call is performed via the
invisible button located above the fan
symbol.
Renewed actuation of the invisible button
or pressing the X button at the control
station, hides the control station again.
7.3
Screen Example 2
Functional view of a faceplate

A PLC program is stored for example 2. At the faceplate, the status information of
the button is simulated via the PLC program.
The following functions are evaluated or controlled via the PLC program.
Status automatic mode active
Status Manual mode active
Status manual On
Status manual Off
For the further functions of the faceplate, the respective tags are listed in the form
of a table. The respective values or animations are specified via this table.
Table 7-3
No
1.
Action
Screens
Simulation of the faceplate

Showing / hiding the faceplate
You can show or hide the button (1) via
the faceplate.
You can also hide the control station via
the X button (2) at the control station.
1
2
The buttons are represented with a

green background color depending on
the actuation.
The further values/animations are given
via the table next to it (see next table
section).
112
V1.0, Entry ID: 68014632

No
2.
Action
Screens
Simulation of the faceplate

The tag tables on the right enable
specifying values or operating states for
the control station next to it.
(See previous table section 1).
3.
General overview
The picture shows the general overview of example 2.
V1.0, Entry ID: 68014632
113
8 Related Literature
Related Literature
Internet links
The following list is by no means complete and only provides a selection of
appropriate sources.
Table 8-1
Table 8-2
Topic
Title
\1\
Link to this
document
\2\
Siemens Industry
Online Support
Industry Online Support

http://support.automation.siemens.com
\3\
FAQ
Which functional differences exist between the various SIMATIC

Panels?
\4\
FAQ
How can you create faceplates in WinCC (TIA Portal) with user
authorizations?
\5\
Application
Application: sample blocks for STEP 7 and WinCC flexible

\6\
Application
Faceplates for the Visualization of Sentron PAC Power Meters

http://support.automation.siemens.com/WW/view/de/67318600
History
Table 9-1
114
Version:
Date
V1.0
03/2013
Modifications
First version
V1.0, Entry ID: 68014632

Faceplates Instruction Doku e

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Faceplates Instruction Doku e

Hochgeladen von

Copyright:

Verfügbare Formate

Configuration Instruction for

Applications & Tools

Siemens Industry Online Support

Copyright Siemens AG 2013 All rights reserved

Copyright Siemens AG 2013 All rights reserved

Functions and Properties

Functions and Properties

Warranty and Liability

Warranty and Liability

Copyright Siemens AG 2013 All rights reserved

Parameters and properties of a faceplate

Software version as of WinCC Comfort V11 SP2

All SIMTAIC HMI operator units which support faceplates

Copyright Siemens AG 2013 All rights reserved

Information on the function scope of the SIMATIC HMI operator units is

Copyright Siemens AG 2013 All rights reserved

What is a faceplate? ........................................................................... 15

Functions and Properties of the Faceplate ................................................... 22

Overview of the general solution ........................................................ 10

How to create a faceplate .................................................................. 22

Functions and Properties of a User Data Type (HMI UDT) .......................... 67

Configuration and Settings ............................................................................ 75

Copyright Siemens AG 2013 All rights reserved

Creating a user data type ................................................................... 67

Operation of the Application ........................................................................ 110

Overview .......................................................................................... 110

Related Literature .......................................................................................... 114

Overview of the automation task

Copyright Siemens AG 2013 All rights reserved

Output of the current status of the drive

Switchover manual/automatic mode

Manual mode on/off

Output e.g. of the current flow rate

Copyright Siemens AG 2013 All rights reserved

The following requirements for the operating concept must be fulfilled:

Uniform appearance for all plants.

Can be used several times even for different customers.

Central changeability of the control panel.

Created control panel shall be available as a library so it can be used by

Overview of the general solution

Copyright Siemens AG 2013 All rights reserved

General notes on the application

The basics, functions and properties of faceplates are described.

The step-by-step instruction for creating a faceplate and the practical

Faceplates increase the efficiency.

Avoiding errors through a simple connection to the STEP 7 control program.

Topics not covered by this application

Copyright Siemens AG 2013 All rights reserved

This application does not include a description of

Basic knowledge of these topics is required.

Handling or operating skills for the Comfort Panel.

Skills for using WinCC (TIA Portal).

Description of the core functionality

What does the application example perform?

Hardware and software components used

TP1200 Comfort Panel

Copyright Siemens AG 2013 All rights reserved

Standard software components

WinCC Comfort V11 SP2

STEP 7 Professional V11 SP2

Sample files and projects

This zip file contains the

Supported operator units