Cover

Customizing WinCC Controls

SIMATIC WinCC

Configuration Example July 2013

Applications & Tools

Answers for industry.
 Industry Automation and Drives Technologies Service & Support Portal
This document is taken from the Internet Service Portal of Siemens AG, Industry
Automation and Drives Technologies. The following link takes you directly to the
download page of this document:
http://support.automation.siemens.com/WW/view/en/48398362

If you have any questions about this document, please contact us at the following
e-mail address:
[email protected]
Siemens AG 2013 All rights reserved
Copyright

Customizing WinCC Controls

2 V2.1, Entry ID: 48398362
 s Automation Task 1

Automation Solution 2

Configuration 3

Appendix 4
SIMATIC
Customizing WinCC Controls 5
References
Customizing WinCC Controls
History 6
Siemens AG 2013 All rights reserved
Copyright

Customizing WinCC Controls

V2.1, Entry ID: 48398362 3
 Warranty and liability

Warranty and liability

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

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

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

(“wesentliche Vertragspflichten”). The damages for a breach of a substantial
contractual obligation are, however, limited to the foreseeable damage, typical for
the type of contract, except in the event of intent or gross negligence or injury to
life, body or health. The above provisions do not imply a change of the burden of
proof to your detriment.

Any form of duplication or distribution of these Application Examples or excerpts

Copyright

hereof is prohibited without the expressed consent of Siemens Industry Sector.

Customizing WinCC Controls

4 V2.1, Entry ID: 48398362
 Table of contents

Table of contents
Warranty and liability ............................................................................................... 4
1 Automation Task ............................................................................................ 6
2 Automation Solution ...................................................................................... 7
2.1 Overview of customizing options ........................................................ 7
2.2 Required hardware and software components ................................... 8
3 Configuration .................................................................................................. 9
3.1 Customizing the toolbar ..................................................................... 9
3.1.1 Customizing the size of the buttons.................................................. 12
3.1.2 Customizing the button graphics ...................................................... 13
3.1.3 Modifying user-defined buttons ........................................................ 13
3.1.4 Customizing the divider/dividing space............................................. 14
3.2 Customizing grids ............................................................................ 14
3.3 Customizing the scrollbar................................................................. 17
4 Appendix....................................................................................................... 18
4.1 Layout structure AlarmControl.......................................................... 18
4.2 Layout structure FunctionTrendControl ............................................ 20
4.3 Layout structure OnlineTableControl ................................................ 21
4.4 Layout structure OnlineTrendControl ............................................... 23
Siemens AG 2013 All rights reserved

4.5 Layout structure RulerControl .......................................................... 24

5 References .................................................................................................... 26
5.1 Bibliography..................................................................................... 26
5.2 Internet links .................................................................................... 26
6 History .......................................................................................................... 27
Copyright

Customizing WinCC Controls

V2.1, Entry ID: 48398362 5
 1 Automation Task
1.1 Requirement

1 Automation Task
1.1 Requirement
Customizing WinCC controls according to individual requirements is frequently
required. Touch screen operation can be taken as an example, where the standard
control buttons are too small.
It is often desirable to adapt the appearance of the controls to the individual project
layout.
Figure 1-1 shows symbolically that the standard buttons are too small for touch
screen input.

Figure 1-1
Siemens AG 2013 All rights reserved
Copyright

Customizing WinCC Controls

6 V2.1, Entry ID: 48398362
 2 Automation Solution
2.1 Overview of customizing options

2 Automation Solution
2.1 Overview of customizing options
This document facilitates the customization of WinCC controls. You thus have the
option to customize the following properties of the controls:
Buttons (size and layout)
Grids, e.g. in AlarmControl (individual icons, also dependent on values)
Scrollbar (style)

In Figure 2-1, however, the buttons have been customized, facilitating their
operation through a larger representation

Figure 2-1
Siemens AG 2013 All rights reserved
Copyright

Delimitation
This application does not include a description of the operation and use of WinCC.

Customizing WinCC Controls

V2.1, Entry ID: 48398362 7
 2 Automation Solution
2.2 Required hardware and software components

2.2 Required hardware and software components

This application was generated with the following components:

Standard software components

Table 2-1
Component No. Order number Note
WinCC V7.2 (RC) 1 6AV63.1-....7-2...

Sample files and projects

The following list includes all files and projects that are used in this example.
Table 2-2
Component Note
WinCC_Control_customizing.doc This document.
OriginalIcons.zip The standard WinCC icons.
Customizing.zip Newly created sample icons.
ProjectCustomizedControls.zip WinCC sample project
Siemens AG 2013 All rights reserved
Copyright

Customizing WinCC Controls

8 V2.1, Entry ID: 48398362
 3 Configuration
3.1 Customizing the toolbar

3 Configuration
3.1 Customizing the toolbar
General
The operation and customization of the toolbar is the same for all WinCC controls.

Standard configuration
In the standard configuration, various buttons can be selected and their order be
arranged. Moreover, hotkeys can be assigned, via which the functions connected
with the buttons are called. It is possible to create user-defined buttons that trigger
certain events when being clicked on.
Figure 3-1
Siemens AG 2013 All rights reserved
Copyright

In the standard configuration, the toolbar graphics cannot be modified. The user-
defined buttons only have numbers and therefore have no significance to the user.

Customizing WinCC Controls

V2.1, Entry ID: 48398362 9
 3 Configuration
3.1 Customizing the toolbar

The size of the buttons is much too small for use on displays that are operated
manually via a touch screen. In the standard configuration, this size cannot be
modified.

Creating a subfolder for individual layouts

The standard WinCC installation creates the folder "CCAxControlSkins" in the
directory "C:\Programs (x86)\Common Files\Siemens\bin\".

Within this folder, a separate folder with the name of the control must be created
for each control the toolbar buttons of which are to be changed. For AlarmControl,
the folder is named "AlarmControl".
Create a subfolder at the above-mentioned path ("NewButton"), in which the
individual layouts for the toolbar can be stored.

Note Generally, please note that the "CCAxControlSkins" folder is PC-based and is
therefore not necessarily available on the WinCC client. This must be taken into
account especially when using multi-user systems or the "WebNavigator" option.

Note The file and folder names stated in the following must be precisely adhered to so
that the icons are displayed correspondingly by the controls.
Siemens AG 2013 All rights reserved

In the description, the data format "png" is used as an example. The "gif" and
"jpg" formats are also permissible.

Note Basically, it is not necessary to create all of the mentioned graphic files when
creating a new layout. For all files that are not available, the standard control
settings will be used.
Copyright

Overview of the subfolders for the various controls

Table 3-1
No. Control
1. AlarmControl
2. FunctionTrendControl
3. OnlineTableControl
4. OnlineTrendControl
5. Scrollbar
6. TrendRulerControl

Selecting the modifications

In order to visualize the effects of the modifications made, the selection of the
layout has to be changed via the configuration dialog of the control (in this case,
AlarmControl).
Once the "NewButton" folder has been created in the above-mentioned directory,
its name is stated in the list of layouts.

Customizing WinCC Controls

10 V2.1, Entry ID: 48398362
 3 Configuration
3.1 Customizing the toolbar

Figure 3-2
Siemens AG 2013 All rights reserved
Copyright

Customizing WinCC Controls

V2.1, Entry ID: 48398362 11
 3 Configuration
3.1 Customizing the toolbar

3.1.1 Customizing the size of the buttons

The "IconsBackground.png" file defines the size of the buttons. Since the toolbar
buttons are square, the maximum of the side lengths is read out of
"IconsBackground.png" and set as the height and length of the buttons. The thus
set size is fixed and cannot be changed through other graphics.
With this customization, you can set the size of the buttons according to your
needs.
Figure 3-3
Siemens AG 2013 All rights reserved
Copyright

Customizing WinCC Controls

12 V2.1, Entry ID: 48398362
 3 Configuration
3.1 Customizing the toolbar

3.1.2 Customizing the button graphics

Basic procedure
In order to customize the graphics, the "IconsNormal.png" file must be created in
the "Toolbar" folder. In this file, the individual graphics of the buttons must be
inserted successively (see the following figure). (The file for disabled buttons is
"IconsDisabled.png".)
Figure 3-4

The "IconsNormal.png" file can be customized as desired and replaced with new
graphics for the buttons. To use new graphics, the files "IconsNormal.png" and
"IconsDisabled.png" must be customized. This customization of the graphics can
be implemented with any graphic program.
The control then loads the file, cuts it into the single graphics, and displays the cut
parts on the buttons.

Example of customized button graphics

In order to display enlarged buttons, the graphics "IconsNormal.png" and
"IconsDisabled.png" must be enlarged.
Siemens AG 2013 All rights reserved

Figure 3-5
Copyright

3.1.3 Modifying user-defined buttons

The user-defined buttons are only provided with graphics that are numbered from
one through to nine. The numbers have no significance for the user. Moreover,
only nine user-defined buttons can be created, after that only dashed boxes will be
displayed.

Customizing WinCC Controls

V2.1, Entry ID: 48398362 13
 3 Configuration
3.2 Customizing grids

Figure 3-6

Customized graphics of the user-defined buttons are created in the same manner
as the standard buttons described before.
After having created and renamed the files, store them in the "Toolbar" folder.

3.1.4 Customizing the divider/dividing space

The divider and the left space before the buttons start can also be customized. In
order to modify the space around the divider, create the "Space.png" file and store
it in the "Toolbar" folder.
The width of this graphic is used as width of the dividing space. To modify the left
margin, you can create the "Left.png" file. A margin as wide as "Left.png" will be
created to the left of the start of the buttons.
Siemens AG 2013 All rights reserved

Figure 3-7
Copyright

3.2 Customizing grids

The grid (table element) can be customized for AlarmControl. In standard layout,
text and in certain columns also icons are displayed in the cells.
Basically, for each control with a table, you can determine in the configuration
dialog for each column whether the content is to be displayed as a text or as an
icon.
The selection for AlarmControl is shown in the following figure. In this case, the
status is displayed as a text and as an icon.

Customizing WinCC Controls

14 V2.1, Entry ID: 48398362
 3 Configuration
3.2 Customizing grids

Figure 3-8
Siemens AG 2013 All rights reserved
Copyright

Customizing WinCC Controls

V2.1, Entry ID: 48398362 15
 3 Configuration
3.2 Customizing grids

The status content is displayed both as text and as icon. If there are any
comments, there is also an icon displayed.

Modifying the standard icons

By way of customizing it is possible to display different icons in the cells dependent
on the values.
For that purpose, analogous to the modification of the toolbar appearance, a folder
with the name of the new layout must be created in "CCAxControlSkins". In this
example, the "TableIcons" folder is created.
In this folder, a subfolder for the control (here: "AlarmControl") and in that the folder
"GridIcons" must be created. In "GridIcons", separate folders are created for each
column of the table in which icons are to be displayed.
The name of the folder is the same as the object name of the message block1. To
activate the new icons, the "TableIcons" layout is selected in the configuration
dialog.
In this example, the Status column icons included in the standard layout are
replaced. The "State" folder is created for that purpose. This folder must include
graphics with the respective status names2 (in English). For states having a
corresponding graphic in this folder, the new icon is displayed in the table cell when
this state occurs.
Figure 3-9
Siemens AG 2013 All rights reserved
Copyright

It is not possible to display icons in the Date and Time columns.

To assign icons to message numbers, each numerical value can be assigned a
graphic. For example, the respective number is highlighted in a certain color. The
graphic names (in the "Number" folder) for five are then "5.png", for example. If an
icon is defined for a specific interval rather than for a single value, the graphic
name for an interval, for example 50 to 100, is "50_100.png", the limits being
included in the interval.
Since the graphic icons are highly flexible it might make sense to display the icons
only, without any text, for example to visualize a filling level. For cells containing
text, for example Point of error, a graphic file has to be defined for each text that
can be displayed. The Point of error column provides the option to visualize to the
user at which points in the plant an error message occurred. If an error occurs in
the tank, for example, a tank icon can be displayed; if it occurs in a valve, a
corresponding valve component can be displayed.

1
An overview of all message blocks and their object names is provided in the Appendix.
2
An overview of all values that Status and further columns can take is provided in Appendix.

Customizing WinCC Controls

16 V2.1, Entry ID: 48398362
 3 Configuration
3.3 Customizing the scrollbar

Figure 3-10

3.3 Customizing the scrollbar

You can customize the scrollbar of the WinCC controls. For this purpose, the
graphic files the scrollbar is composed of must be replaced.
Siemens AG 2013 All rights reserved

In the following, first of all the standard scrollbar is shown, which is displayed if no
modifications have been made.

Figure 3-11

Analogous to toolbar customization, a "Scrollbar" folder is created in the directory

Copyright

"C:\Programs\Common Files\Siemens\BIN\CCAxControlSkins\NewButton", for

customizing the scrollbar. There, the folders "horizontal" and "vertical" folders are
created.
Within these folders, numerous individual files must be created or customized, of
which the scrollbar is composed at runtime. One example of a customized scrollbar
is shown in the following figure.

Figure 3-12

Customizing WinCC Controls

V2.1, Entry ID: 48398362 17
 4 Appendix

4 Appendix
4.1 Layout structure AlarmControl
Toolbar graphics
Table 4-1
Values (name of the graphic) Description
IconsBackground.png Size of the toolbar icons
IconsDisabled.png Disabled icons
IconsDisabledEx.png Disabled user-defined icons
IconsNormal.png Icons
IconsNormalEx.png User-defined icons
Left.png Left margin in the toolbar
Space.png Space between the icons

Assignment of the toolbar buttons

Table 4-2
Siemens AG 2013 All rights reserved

Function Object ID (sequence in IconsNormal.png)

Help 1
Configuration dialog 2
Message list 3
Short-term archive list 4
Long-term archive list 5
Blocked items list 6
Copyright

Hit list 7
List of alarms to hide 8
Acknowledgement of central detectors 9
Single acknowledgement 10
Group acknowledgement 11
AutoScroll 12
Selection dialog 13
Display option dialog 14
Blocked items dialog 15

Print 17
Emergency acknowledgement 18
First alarm 19
Previous alarm 20
Next alarm 21
Last alarm 22
Infotext dialog 23
Comment dialog 24
Loop In Alarm 25

Customizing WinCC Controls

18 V2.1, Entry ID: 48398362
 4 Appendix

Function Object ID (sequence in IconsNormal.png)

Block alarm 26
Release alarm 27
Hide alarm 28
Show alarm 29
Sorting dialog 30
Time base dialog 31
Copy lines 32
Connect backup 33
Disconnect backup 34
Export data 35
First page 36
Previous page 37
Next page 38
Last page 39

Assignment of the user-defined toolbar buttons

Siemens AG 2013 All rights reserved

Table 4-3
Function Object ID (sequence in IconsNormalEx.png)
User-defined 1 1001
User-defined 2 1002
User-defined X 100X

Table 4-4
Copyright

Folder (object name in Values (name of the Description

message block) graphic)
Date No icons possible
Time No icons possible
Duration No icons possible
SumWin No icons possible
State Come Received
ComeQuit Received and
acknowledged
Go Present
Info Information
Lock Blocked
Quitstate Quit Acknowledgement
QuitEmergency Emergency
acknowledgement
QuitHorn Horn acknowledgement
QuitSystem System acknowledgement
Number Numerical value as name of
the graphic (e.g., "1.png",
"5.png")

Customizing WinCC Controls

V2.1, Entry ID: 48398362 19
 4 Appendix

Folder (object name in Values (name of the Description

message block) graphic)
Class Error Error
Unknown Unknown
System System
Type Error Error
Warning Warning
Alarm Alarm
AGCPU No icons possible Name of the displayed
variable as name of the
graphic
Tag
Reporting Yes Logging available
No No logging available
Comment Yes Comment available
No No comment available
Infotext Yes Infotext available
No No infotext available
LoopInAlarm Yes Loop In Alarm available
Siemens AG 2013 All rights reserved

No No Loop In Alarm available

Computername Displayed computer name
as name of the graphic
Username Displayed user name as
name of the graphic
Priority Numerical value as name of
the graphic (e.g., "1.png",
"5.png")
Copyright

Text1 to Text 10 Displayed text as name of

the graphic
Value1 to Value10 Numerical value as name of
the graphic (e.g., "1.png",
"5.png")

4.2 Layout structure FunctionTrendControl

Toolbar graphics
Table 4-5
Values (name of the graphic) Description
IconsBackground.png Size of the toolbar icons
IconsDisabled.png Disabled icons
IconsDisabledEx.png Disabled user-defined icons
IconsNormal.png Icons
IconsNormalEx.png User-defined icons
Left.png Left margin in the toolbar
Space.png Space between the icons

Customizing WinCC Controls

20 V2.1, Entry ID: 48398362
 4 Appendix

Assignment of the toolbar buttons

Table 4-6
Function Object ID (sequence in IconsNormal.png)
Help 1
Configuration dialog 2
Ruler 3
Zoom section 4
Zoom +/- 5
Zoom x axis 6
Zoom y axis 7
Shift trend range 8
Shift axis range 9
Original view 10
Select data connection 11
Select trends 12
Select time range 13
Previous trend 14
Next trend 15
Siemens AG 2013 All rights reserved

Start / Stop 16
Print 17
Connect backup 18
Disconnect backup 19
Export data 20
Copyright

Assignment of the user-defined toolbar buttons

Table 4-7
Function Object ID (sequence in IconsNormalEx.png)
User-defined 1 1001
User-defined 2 1002
User-defined X 100X

Grid
There is no grid available.

4.3 Layout structure OnlineTableControl

Toolbar graphics
Table 4-8
Values (name of the graphic) Description
IconsBackground.png Size of the toolbar icons
IconsDisabled.png Disabled icons

Customizing WinCC Controls

V2.1, Entry ID: 48398362 21
 4 Appendix

Values (name of the graphic) Description

IconsDisabledEx.png Disabled user-defined icons
IconsNormal.png Icons
IconsNormalEx.png User-defined icons
Left.png Left margin in the toolbar
Space.png Space between the icons

Assignment of the toolbar buttons

Table 4-9
Function Object ID (sequence in IconsNormal.png)
Help 1
Configuration dialog 2
First data set 3
Previous data set 4
Next data set 5
Last data set 6
Edit 7
Siemens AG 2013 All rights reserved

Copy lines 8
Select data connection 9
Select columns 10
Select time range 11
Previous column 12
Next column 13
Start / Stop 14
Copyright

Print 15
Define statistics range 16
Calculate statistics 17
Connect backup 18
Disconnect backup 19
Export data 20

Assignment of the user-defined toolbar buttons

Table 4-10
Function Object ID (sequence in IconsNormalEx.png)
User-defined 1 1001
User-defined 2 1002
User-defined X 100X

Grid
Display of icons not possible.

Customizing WinCC Controls

22 V2.1, Entry ID: 48398362
 4 Appendix

4.4 Layout structure OnlineTrendControl

Toolbar graphics
Table 4-11
Values (name of the graphic) Description
IconsBackground.png Size of the toolbar icons
IconsDisabled.png Disabled icons
IconsDisabledEx.png Disabled user-defined icons
IconsNormal.png Icons
IconsNormalEx.png User-defined icons
Left.png Left margin in the toolbar
Space.png Space between the icons

Assignment of the toolbar buttons

Table 4-12
Function Object ID (sequence in IconsNormal.png)
Help 1
Siemens AG 2013 All rights reserved

Configuration dialog 2
First data set 3
Previous data set 4
Next data set 5
Last data set 6
Ruler 7
Zoom section 8
Copyright

Zoom +/- 9
Zoom time axis 10
Zoom value axis 11
Shift trend range 12
Shift axis range 13
Original view 14
Select data connection 15
Select trends 16
Select time range 17
Previous trend 18
Next trend 19
Start / Stop 20
Print 21
Define statistics range 22
Calculate statistics 23
Connect backup 24
Disconnect backup 25
Export data 26
Relative axis 27

Customizing WinCC Controls

V2.1, Entry ID: 48398362 23
 4 Appendix

Assignment of the user-defined toolbar buttons

Table 4-13
Function Object ID (sequence in IconsNormalEx.png)
User-defined 1 1001
User-defined 2 1002
User-defined X 100X

Grid
Display of icons not possible.

4.5 Layout structure RulerControl

Toolbar graphics
Table 4-14
Siemens AG 2013 All rights reserved

Values (name of the graphic) Description

IconsBackground.png Size of the toolbar icons
IconsDisabled.png Disabled icons
IconsDisabledEx.png Disabled user-defined icons
IconsNormal.png Icons
IconsNormalEx.png User-defined icons
Left.png Left margin in the toolbar
Copyright

Space.png Space between the icons

Assignment of the toolbar buttons

Table 4-15
Function Object ID (sequence in IconsNormal.png)
Help 1
Configuration dialog 2
Ruler window 3
Statistics range 4
Statistics 5
Print 6
Export print 7

Customizing WinCC Controls

24 V2.1, Entry ID: 48398362
 4 Appendix

Assignment of the user-defined toolbar buttons

Table 4-16
Function Object ID (sequence in IconsNormalEx.png)
User-defined 1 1001
User-defined 2 1002
User-defined X 100X

Grid
Display of icons not possible.
Siemens AG 2013 All rights reserved
Copyright

Customizing WinCC Controls

V2.1, Entry ID: 48398362 25
 5 References

5 References
5.1 Bibliography
This list is not complete and only represents a selection of relevant references.
Table 51
Subject Title
/1/ STEP7 Automatisieren mit STEP7 in AWL und SCL (Automating
with STEP7 in STL and SCL)
Hans Berger
Publicis MCD Verlag
ISBN 3-89578-341-2
/2/

5.2 Internet links

This list is not complete and only represents a selection of relevant information.
Table 52
Subject Title
Siemens AG 2013 All rights reserved

\1\ Reference to the http://support.automation.siemens.com/WW/view/en/48398362

entry
\2\ Siemens I IA/DT http://support.automation.siemens.com
Customer Support
\3\
Copyright

Customizing WinCC Controls

26 V2.1, Entry ID: 48398362
 6 History

6 History
Table 61
Version Date Modifications
V1.0 xx.xx.20xx First version
V1.1 07.12.2009 Corrected headers and footers
V2.1 13.06.2013 New version WinCC 7.2
Siemens AG 2013 All rights reserved
Copyright

Customizing WinCC Controls

V2.1, Entry ID: 48398362 27