09 Picture Block en

Contents Page
Training aims ...................................................................................................................................... 2

Faceplate technique with picture window and tag prefix Idea ............................................................ 3
Faceplate technique with picture window and tag prefix 4 steps in configuration ............................... 4
Faceplate technique 1st step: Defining a structure type .................... 5
Faceplate technique 2nd step: Creating a structure tag .............. 6
Faceplate technique 3rd step: Configuring a faceplate for motor .............. 7
Faceplate technique 4th step: Using a faceplate in pictures ............ 8
Exercise 1 Part 1 Faceplate technique with picture window and tag prefix ........................................ 9
Exercise 1 Part 2 Faceplate technique with picture window and tag prefix ........................................ 10
Faceplate technique Titles for picture window ................................................................................ 11
Faceplate technique Automatic titles for picture window .. 12
Faceplate technique A picture window for displaying several structure tags ... 13
Exercise 2 A picture window for displaying several structure tags .................................................. 14
Faceplate technique Example with external tags ............................................................................. 15
Faceplate technique Exception for tag prefix ................................................................................ 16
Faceplate technique Adaptations to a structure type ......................................................................... 17
Faceplate technique with faceplate types Idea .................................................................................. 18
Faceplate technique 4th step in configuration: ................................................................................. 19
Faceplate technique with faceplate types 3rd step New faceplate type 1/3 ..................................... 20
Faceplate technique with faceplate types 3rd step Configuring a faceplate type 2/3 ....................... 21
Faceplate technique with faceplate types 3rd step Configuring a faceplate type 3/3 ....................... 22
Faceplate technique with faceplate types 4th step: Faceplate instance 1/2 ........................................ 23
Faceplate technique with faceplate types 4th step: Dynamizing faceplate instance 2/2 .................. 24
Exercise 3 Part 1 Faceplate technique with faceplate types .............................................................. 25
Exercise 3 Part 2 Faceplate technique with faceplate types .............................................................. 26
SITRAIN Training for ST-BWINCCS

Automation and Industrial Solutions Page 1 Faceplates
The participant will:
Learn about the benefits of a faceplate technique
Be able to use the technique "picture window with tag prefix"
Know the possibilities of faceplate types

Faceplate technique
The idea behind a faceplate technique is to create a standard for pictures and then
to be able to use this many times simply. A faceplate for motors, another for valves
and a third for conveyors etc. could be created. The use of a faceplate technique
shortens the configuration times significantly.
Time is also saved later when adaptations are made to a faceplate. The change is
configured once and is effective x times.

1st step: Defining a structure type
All the elements required in HMI are defined. In the example above, 4 elements
were defined.
2nd step: Creating a structure tag
A structure tag is defined for each motor. WinCC then automatically creates the
structure tag elements (Motor1.setpoint_speed, Motor1.actual_speed etc.). This
saves time.
3rd step: Configuring a faceplate
A faceplate is configured like a normal picture only this is typically significantly
smaller. The dynamizations (tag connections, dynamic dialogs, C scripts, VB
scripts, direct connections etc.) are also already configured here.
4th step: Using the faceplate

The faceplate ("small WinCC picture") is inserted in a "large WinCC picture" via
the picture window object. Several and even different faceplates can be inserted.
Only at one point is it defined from which structure tag the values will be displayed.
The individual structure tag elements do not need to be linked (time-saving).

Defining a structure type
In the tag management, in the shortcut menu of "Structure tags" the new structure
types can be defined. After this, elements can be defined in the "Structure type
elements" tab. The properties of an element are, for example, the name, the data
type and external or internal.
External elements If the "External" property is enabled, an "AS offset" must also be entered.
Example: On the controller, there is an FB (function block) for controlling a motor.
In the corresponding instance data block, the data for the relevant motors is
stored.
The value for the setpoint speed is always located at the start of the data block
(e.g. DB1, DBW0), the actual speed is stored starting at byte 18 (e.g. DB1,
DBW18).
According to this structure in the instance data block, the "AS offsets" are then
configured in WinCC:
Element AS offset
Setpoint speed 0
Actual speed 18

Creating a structure tag
Once the structure has been defined this can be stored in the "Structure tags" tab.
If, for example, there are 10 motors in the plant, the structure tags Motor1, Motor2,
... Motor10 are created.
The structure tag elements are created automatically by WinCC.
External elements The example from the previous page is continued:
According to this structure in the instance data block, the "AS offsets" were
configured in WinCC as follows:
Element AS offset
Setpoint speed 0
Actual speed 18
Now a structure tag for Motor1 is created and the start address needs to be
specified: DB1, DBB0
With the offsets and the start address, WinCC can then automatically calculate the
addresses of the individual elements;
Structure tag elements Address
Motor_1.setpoint_speed DB1, DBW0
Motor1.actual_speed DB1, DBW18
The data for Motor2 is located in DB12:

Structure tag elements Address
Motor_2.setpoint_speed DB12, DBW0
Motor1.actual_speed DB12, DBW18
WinCC license If the elements of the structure are external, each element counts as a powertag
related to the required WinCC license.

Configuring a faceplate
The elements defined in the structure type are to be visualized in a small
"standard" picture (faceplate). The actual speed needs to be displayed with a
gauge control and additionally with an I/O field.
To do this, the I/O field is first connected to the structure tag element (here
"Motor1.actual_speed"). Afterwards the configured tag name is manually
shortened by the name of the structure tag (in this case "Motor1") so that only
".actual_speed" remains.
The same procedure needs to be repeated for the gauge control.
This means that the faceplate can be used later for different motors.
Other dynamizations
All types of dynamization can be used. The procedure above applies analogously
to dynamic dialogs, C scripts etc.
In contrast to the scripts, in the dynamic dialog a check is made to establish
whether the tag used also exists in the tag management. A tag ".actual_speed" will
however not exist so that a box with a corresponding note appears. This box can
be closed with the " Ignore" button.

Using the faceplate
To use the "small standard picture" (faceplate), a picture window with the size of
the small picture is inserted in a larger picture. The "small picture" is then
displayed in runtime in this picture window.
To do this, the "Picture name" property of the picture window must be set (here:
"PB_Motor.pdl").
As a further property, "Tag Prefix" is set. Here the name of the structure tag
"Motor1" is added again. As a result, in runtime every tag within this picture
window has a prefix. ".actual_speed" becomes "Motor1.actual_speed" again.
If the values of Motor2 also need to be displayed, the upper picture window must
be copied and only the tag prefix property changed to "Motor2".

Objective In the picture "Motors_with_PB.pdl, the faceplate "PB_Motor.pdl" should be shown
in two different picture windows. The corresponding structure tags will be
addressed via the tag prefix (Motor1. and Motor2.).
Exercise 1. Define a new structure type "Motor type" with the structure elements
setpoint_speed, actual_speed, direction and on_off Take the data types from
slide "1st step: Defining a structure type". To simplify matters, all elements are
internal.
2. Generate the structure tags "Motor1" and "Motor2" based on the
structure type "Motor type as shown in slide "2nd step:Creating a structure tag".
3. With the Graphics Designer, create a new picture with the name
"PB_Motor.pdl" (picture width: 300, picture height: 450).
To display the actual speed, configure an I/O field and a gauge control.
Connect the two objects to the ".actual_speed" tag.
For the setpoint speed, an I/O field and two buttons "+20%" and "-20%"
will be configured. All objects relate to the ".setpoint_speed" tag. The VB script
for "+20%" appears as follows:
Sub OnClick(ByVal Item)
Dim S7
Set S7 = HMIRuntime.Tags(".setpoint_speed")
S7.Read
S7.Value = S7.Value * 1.2
S7.Write
End Sub
The script for "-20%" is very similar (( *0.8 instead of *1.2)
Save the this picture.

Exercise continued
4. With the Graphics Designer, create a new picture with the name
"Motors_with_PB.pdl".
5. Add a button for selecting the Motors_with_PB.pdl picture to the
Start.pdl start picture. Save the modified start screen.
6. In the picture "Motors_with_PB.pdl" place two picture windows. The Geometry
properties are as follows: Position X: 20 or 340, Position Y: 20,
Window width: 300, Window height: 450).
The property Miscellaneous/Picture Name is "PB_Motor.pdl". In both picture
windows.
When you double-click on Picture Name, a box appears with a list of all picture
names.
As the tag prefix select "Motor1" or "Motor2".
7. Save the created pictures (File/Save All).
8. Start WinCC Runtime and test the functionality
of the newly created pictures.

Titles To display a title of a picture window, the property "Title" must be enabled. The
property "Border" is automatically enabled with this, in other words a picture
window with a title and without a border is not possible.
The text that is displayed in the title is stored in the property "Title".
Since the border and the title line require space, the picture is truncated in runtime
at the right and bottom margin. This can be avoided if the "Adapt Picture" property
is enabled. The picture window is then increased in size so that the content can be
displayed 1:1.
With the "Adapt Picture" property, the picture would be displayed smaller and the
picture window would be displayed 1:1. This property can be combined sensibly
with "Sizeable".
Other useful properties are "Movable" (the operator can move the picture window
with the mouse) and "Closable" (an X is displayed at the top right in the picture
window).

Automatic titles
So that after copying picture windows, the title does not need to be adapted
manually, this can be automated.
To do this, the text for the "Title" property is deleted. You then change to the
Events tab. There under Miscellaneous/Object Change, a direct connection is
stored:
Source: this object, property: Tag prefix
Objective: this object, property: Title
With this, at runtime when the picture is being setup, the title is automatically
written with the name of the structure tag stored for the tag prefix.

One picture window Customers often want the values of several motors to be displayed in one picture
window. To do this, the tag prefix e.g. of "Motor1" must be changed to "Motor2".
So that the tags are reread, a change to another picture is also necessary. This is
achieved in the VB script above by switching to invisible and then back to visible.
Alternative C script A C script could appear as follows:

#include "apdefap.h"
void OnClick(char* lpszPictureName, char* lpszObjectName, char*
lpszPropertyName)
{
// Internal Functions/graphics/set/miscs
SetVisible(lpszPictureName,"Picture Window3",0); //Return-Type: BOOL
// Internal Functions/graphics/set/miscs
SetTagPrefix(lpszPictureName,"Picture Window3","Motor2");
SetVisible(lpszPictureName,"Picture Window3",1); //Return-Type: BOOL

}

Objective In the picture "Motors_with_PB.pdl", a third picture window will be inserted. With
the "Motor1" and "Motor2" buttons, it will be possible to decide which motor value
will be displayed in this picture window.
Exercise 1. Copy the first picture window in the "Motors_with_PB.pdl" picture and insert it
as picture window3. Adjust the following properties:
BorderYes
Title Yes
Adapt Window Yes
Movable Yes
Closable Yes
2. Add a direct connection to update the title automatically (for details, see the
slide "Automatic titles for picture window").
3. Add a button with the label "Motor1". Configure a VB script OR a C script to
switch the tag prefix to "Motor1" (for details see the slide "One picture window
to display several structure tags").
4. Create a copy of the Motor1 button and adapt it for Motor2.
Change the labeling and the script.
5. Test the required functionality in runtime.

External tags To simplify matters, the previous example was done with internal tags. In practice,
however, external tags are often required.
Example:
On the controller, there is an FB (function block) for controlling a motor. In the
corresponding instance data block, the data for the relevant motors is stored. The
structure of these instance data blocks can be reproduced in WinCC.
To do this, the "External" property must be enabled for the structure type
elements. In addition to this, an "AS offset" (byte address) and "AS offset bit" need
to be specified.
In the structure tags, the start address of the data needs to be set.
The structure tag elements are created automatically by WinCC and the
addresses are calculated from the start address and the offset.
Note The example above was not created by the configuration engineer but by the tool
"Compile OS". This is only possible with integrated WinCC projects.

Exception Sometimes it is necessary within a picture window with a tag prefix to access a tag
that is not an element of the structure tag.
Example:
Tag prefix is "Motor1", tag on the I/O field is "@CurrentUser"
In runtime WinCC attempts to access "Motor1@CurrentUser" -> this tag very
probably does not exist
Solution:
Tag prefix is "Motor1", tag at the I/O field is "@NOTP::@CurrentUser"
WinCC displays "@CurrentUser" in runtime because the prefix @NOTP (No Tag
Prefix) turns off the tag prefix.
Other possible system prefixes:

@NOSP:: no server prefix
@NOP:: No tag and no server prefix
Changes to the faceplate

In this example, we see a further advantage of this faceplate technique: Can be
changed centrally. This means that adaptations only need to be made at one
location. This adaptation takes effect at the latest after changing to another picture
at all places of use.

Changes to a structure type
Up to WinCC version 7.0 it was not possible to make changes to a structure type
as long as structure tags were defined with this structure type. As of WinCC V7.2,
this behavior has been improved.
Now, if for example a further element is added to the structure type, the structure
tags are now automatically adapted and the new element is added to all existing
structure tags.

Step 1: Defining a structure type
All the elements required in HMI are defined. In the example above, 4 elements
were defined.
Step 2: Creating a structure tag
A structure tag is defined for each motor. WinCC then automatically creates the
structure tag elements (Motor1.setpoint_speed, Motor1.actual_speed etc.). This
saves time.
Step 3: Configuring a faceplate
A faceplate is configured like a normal picture only this is typically significantly
smaller. The dynamizations (tag connections, dynamic dialogs, C scripts, VB
scripts, direct connections etc.) are also already configured here.
Step 4: Using the faceplate

The faceplate ("small WinCC picture") is inserted in a "large WinCC picture" via
the picture window object. Several and even different faceplates can be inserted.
Only at one point is it defined from which structure tag the values will be displayed.
The individual structure tag elements do not need to be linked (time-saving).

Creating a new face plate type
Similar to when creating a picture (*.pdl), almost all graphics objects can also be
used in a faceplate type (*.fpt). You cannot use the object types "connector",
"customized object", "application window", "picture window", "OLE object",
"faceplate instance", the symbols of the HMISymbol library and all of the controls.
Step 1 A new file of the type*.fpt is first created.
Step 2 The required graphics objects are inserted in a picture and adapted.
Step 3 It is useful but is not absolutely necessary to give the objects practical names. This
is helpful in the next configuration step.
Additional options
Within a faceplate type, faceplate-internal tags can be created (Edit -> Edit
Faceplate Tags).
It is also possible to create dynamizations within the faceplate type. Direct
connections of tags from tag management, direct connections, dynamic dialogs, C
scripts are not possible. Only VB scripts can be used.
For this reason dynamizations are often made "from the outside" on the faceplate
instance (see the following pages).

Configuring a faceplate type
Here we define which properties and events will later be available for the faceplate
instance. Tags or for example dynamic dialogs can then later be linked.
Step 1 The configuration screen is opened.
Step 2 Under Objects all the objects existing in this faceplate type are listed. Here, the
practical renaming of these objects that you performed earlier is helpful. After
selecting an object, its properties are displayed in the right-hand window. The
property that will be required later can be dragged to the left-hand window.
Step 3 This is how the result appears after dragging the property.
Step 4 Once again practical renaming here is helpful for later use. Simply click "Rename"
in the shortcut menu.

Result At the top, you can see which properties were made external. From both I/O fields,
the output value was selected so that later the corresponding tags can be linked.
Also the process value for the bar.
It would, for example, also be possible to select the background color of an object
to configure dynamization with this later.
With the events, the mouse click was selected for both buttons.

Faceplate instance A faceplate type can be used by inserting faceplate instances in pictures. To do
this, the faceplate instance object (under Smart Objects) is positioned in the
picture and the fpt file is queried automatically. The fpt file defines the appearance
of the instance (for a motor, for a valve etc.).
Scaling mode One property of the instance is the Scaling mode. This can be "proportional, "1:1"
or "not proportional".
If "1:1" is selected, the size of the instance should be at least as large as the type,
otherwise objects may be clipped.
With "proportional", the height and width of an instance are adapted with an
increase or reduction in the same ratio. There is no distortion.
With "not proportional", the height and width of the type are adapted so that it
completely fills the size of the instance. In this case, objects may be distorted.

Dynamic In the last step, the faceplate instances are dynamized. For both I/O fields and for
the bar, elements of the structure tag Motor1 are linked.
Then two VB scripts were added to increase or reduce the setpoint speed via the
two buttons.
All the types of dynamization are possible for a faceplate instance (also dynamic
dialogs, direct connections, ...).
Effective configuration
If an instance for a second motor now needs to be dynamized, it would not be
effective if several individual tags needed to be linked again and VB scripts
needed to be written.
It is easier simply to copy the instance with dynamizations and then use the "Link"
function to adapt the tag names from Motor1... to Motor2... This also works for tags
used, for example, in C or VB scripts (keep to the rules for cross reference).

Objective In the picture "Motors_with_FPT.pdl", two faceplate instances will be inserted and
dynamized.
Exercise 1. Create a new faceplate type with the name "FPT_Motor.fpt".
2. Add the objects shown on the slide "3rd step: New faceplate type 1/3" and
rename these practically (suggestion see the slide mentioned above:
Bar_actual_speed etc.).
3. Open the configuration dialog (Edit/Configure Faceplate Type) and select the
following properties:
- "Process" property from the bar for the actual value
- the "OutputValue" property of the two I/O fields
Select the following events:
- Click the "+20%" button
- Click the "-20%" button
Rename the selected properties practically. A suggestion can be found on slide
"3rd step: Configuring a faceplate type 3/3"
4. Create a new picture with the name "Motors_with FPT.pdl".
5. Add a button to the start picture to select this picture.
6. Insert the Smart Objects/Faceplate Instance object in the picture
"Motors_with_FPT.pdl". As template select "FPT_Motor.fpt". Set the Scaling
mode property to "1:1" and adapt the size of the instance so that all objects can
be seen.
7. Dynamize the faceplate instance by linking 3 tags and with two VB scripts. For
details see slide "4th step: Dynamizing faceplate instance 2/2"
8. Test the functionality in runtime.
Continued on next page

Exercise continued
9. Return to the Graphics Designer and create a copy of the
existing faceplate instance.
10. Then in the shortcut menu of the copied instance, open the
Linking dialog (Linking -> Tag connections).
11. Go to the "Find and Replace" tab.
12. The connected tags must be relinked from Motor1 to Motor2.
a) Enter the original search text
b) enter the replacement text
c) Since all displayed tags need to be linked, click "Select all". Afterwards, the
two lines are selected.
d) By clicking "Preview", the changed names are displayed in
the Preview column and can be checked.
e) Finally click "Replace". This links the tags.
13. Check the linked tags (also in the VB scripts).

14. Change to WinCC Runtime. After changing pictures, you will see the changed
picture and can test it.
Effective configuration
With this linking function, entire pictures with many objects can be linked. This also
works for tags used in dynamic dialogs, C or VBS scripts (keep to the rules for
cross reference) or in direct connections.

Combination The two options shown of faceplate technique (tag prefix and faceplate types) can
also be combined well. A faceplate instance can be used to display the most
important information for example of a motor in the picture. If all information and
operator input options need to be displayed, the operator clicks on the motor
symbol and a picture window opens showing the data of this motor.
Advantages With the faceplate technique with a tag prefix, there is a disadvantage. If many
small visible picture windows are used in a picture, when a picture is selected, the
tags are first requested from the controller for the first picture window, then from
the second, then from the third etc. This can lead to long picture build times. This
disadvantage does not occur with faceplate instances.
Both the picture shown in the picture window and the faceplate types can be
changed centrally. Only the dynamics linked to the faceplate instance must be
adapted each time. Here, however, the "Linking" function is very helpful.
The faceplate instance also has the advantage that the format can not only be
rectangular but also, for example, round.
The spaces between the objects within the faceplate instance are also transparent
(see Motor4). A picture window cannot be transparent.


09 Picture Block en

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

09 Picture Block en

Uploaded by

Copyright:

Available Formats

Contents Page

Training aims ...................................................................................................................................... 2

SITRAIN Training for ST-BWINCCS

SITRAIN Training for ST-BWINCCS

SITRAIN Training for ST-BWINCCS

4th step: Using the faceplate

SITRAIN Training for ST-BWINCCS

SITRAIN Training for ST-BWINCCS

The data for Motor2 is located in DB12:

SITRAIN Training for ST-BWINCCS

SITRAIN Training for ST-BWINCCS

SITRAIN Training for ST-BWINCCS

SITRAIN Training for ST-BWINCCS

SITRAIN Training for ST-BWINCCS

SITRAIN Training for ST-BWINCCS

SITRAIN Training for ST-BWINCCS

Alternative C script A C script could appear as follows:

SetVisible(lpszPictureName,"Picture Window3",1); //Return-Type: BOOL

SITRAIN Training for ST-BWINCCS

SITRAIN Training for ST-BWINCCS

SITRAIN Training for ST-BWINCCS

Other possible system prefixes:

Changes to the faceplate

SITRAIN Training for ST-BWINCCS

SITRAIN Training for ST-BWINCCS

Step 4: Using the faceplate

SITRAIN Training for ST-BWINCCS

SITRAIN Training for ST-BWINCCS

SITRAIN Training for ST-BWINCCS

SITRAIN Training for ST-BWINCCS

SITRAIN Training for ST-BWINCCS

SITRAIN Training for ST-BWINCCS

Continued on next page

SITRAIN Training for ST-BWINCCS

13. Check the linked tags (also in the VB scripts).

SITRAIN Training for ST-BWINCCS

SITRAIN Training for ST-BWINCCS

You might also like