3 win cc flexible 2008 - basics_screens_en

1
WinCC flexible 2008
- Screens
Exercise
Objects
Screens

2
After creating an empty project, one screen is created automatically.
This screen is predefined as start screen. The start screen can be changed
here: Device Settings -> Device Settings -> start screen
Design of a screen
All objects that can be placed on screens can be found in the tools window.
A screen can consist of static and dynamic elements:
Static elements like texts, graphics, do not change during runtime
Dynamic elements change their behaviour or look depending on process
values.
The exchange of process values and user operations between the controller
and the HMI device is done by tags.
© Siemens AG 2008 - Subject to modifications
Industry Sector
2008-06-30 Rainer Uhl Slide 2/25
WinCC flexible 2008 - Screens
Exercise
Objects
The Template
The start screen
Screens
The start screen

3
Industry Sector
Exercise
Objects
The Template
The start screen
Screens
The start screen
´
Festlegung des Startbildes zeigen
Set the start
screen of the
project

4
The template is used to place objects you need in any screen of the project.
The Template
Objects that are placed on the template are visible and useable on each screen of the
project. With the template you do not need to place these objects multiple times on
different screens but only one time on one screen.
Permanent window
The permanent window is defined in the template.
To define the permanent window do the following:
Drag down the line on the upper side of the template. Specify the size of the window and
release the mouse button.
Hint
The permanent window has the advantage that it is an own window and does not need to
be loaded on each screen change.
Industry Sector
Exercise
Objects
The Template
The start screen
Screens
The Template
Use of the template and the permanent window
Define permanent window only one time
Shows objects on any other screen
Permanent window

5
Industry Sector
Exercise
Objects
The Template
The start screen
Screens
The Template
Objects placed
on the
template
Objects placed
on the screen
itself
Use of the
template in
runtime

6
WinCC flexible 2008
- Screens
Exercise
Objects
Screens

7
The Tools window normally is shown when a screen is opened.
If it is not shown you can open it through the menu View -> Tools.
The tools window is divided into different categories.
The simple objects contain all basic objects like vector graphics or buttons.
Vector graphics: Lines, Polygons, Ellipse, Circle, Rectangle
Text Field: For display of static texts
IO – Field: Input/Output of numeric values or text
Date – Time - Field
Graphic IO Field: Display of graphics dependant of process values in runtime
Symbolic IO Field: Display of texts dependant of process values in runtime
Graphics view: Display of single graphics
Button, Switch: Triggering events
Bars: Graphical display of process values
The objects that can be placed on screens depend on the selected device. In the tools window only
the supported objects are shown.
Industry Sector
Exercise
Libraries
Faceplates
Layers
Engineering
Properties
Graphics
Enhanced
Objects
Simple Objects
Objects
Screens
Simple Objects
Simple Objects

8
The Enhanced Objects contain the following elements:
Slider
Clock
Status Force
- Online View and Control of PLC tags
Sm@rtClient – View
- Display and control of other devices
HTML – Browser
User View
Gauge
Trend View
Symbol library
Recipe View
Alarm View
Alarm indicator
Detail View, Motion View, Step View, Unit View
- ProAgent specific views
Industry Sector
Exercise
Libraries
Faceplates
Layers
Engineering
Properties
Graphics
Enhanced
Objects
Simple Objects
Objects
Screens
Enhanced Objects

9
WinCC flexible brings a lot of graphics with the installation.
You can find them in the tools window under Graphics.
Graphics can be placed on a screen by a simple Drag & Drop action. You can also place
graphics directly on existing objects of a screen, e.g. buttons. The properties of the object
then are automatically changed in the right way.
Industry Sector
Exercise
Libraries
Faceplates
Layers
Engineering
Properties
Graphics
Enhanced
Objects
Simple Objects
Objects
Screens
Graphics
Graphics are implemented into existing objects
Drag & Drop directly into a
screen or on an existing
object, e.g. a button

10
Using own graphics
You have the following possibilities to use your own graphics:
Create a link to a graphic folder: The graphics that are in this folder and its subfolders are
displayed in the tools window.
The tool for editing graphics can be opened directly in WinCC flexible
Precondition
a screen editor is opened
the tools window is displayed
Supported graphic file formats: *.bmp, *.ico, *.emf,
*.wmf, *.gif, *.tif, *.jpeg oder *.jpg
Industry Sector
Exercise
Libraries
Faceplates
Layers
Engineering
Properties
Graphics
Enhanced
Objects
Simple Objects
Objects
Screens
Graphics
Simple access to graphics
Start of external editor (e.g. Paint)
Copy graphics
Creating links to own graphic folders

11
The properties of objects are displayed in the property window.
Depending on the selected object the properties are displayed.
Industry Sector
Exercise
Libraries
Faceplates
Layers
Engineering
Properties
Graphics
Enhanced
Objects
Simple Objects
Objects
Screens
Object Properties
The objects have different properties that can be configured

12
In the screen editor all objects can be placed very simple. With the example of an IO field it
is shown here:
Principle
For IO fields, buttons and switches there is only one object in the tools window. The different
settings, behaviour and special properties are set in the properties window of the objects.
Placing an IO – Field
There are different possibilities of placing IO fields on a screen:
- To create the IO field with its default size just select it in the tools window and drag it into
the screen, or select it and click into the screen to place it
- The size of the object can be changed by dragging it with the mouse.
Configuring an IO - Field
The most important settings are shown on the General – tab.
Here you define the type of the object, for example if it should be for input/output or just for
output.
Also the display format is defined here.
Hint
You can insert IO-fields by dragging tags out of the object window into a screen.
This creates an IO-field with a connection to the tag you dragged into the screen.
Industry Sector
Exercise
Libraries
Faceplates
Layers
Engineering
Properties
Graphics
Enhanced
Objects
Simple Objects
Objects
Screens
Engineering
Drag & Drop of an IO Field

13
With a button you can trigger different events during runtime. The button can show static text
or a graphic. The design of the button can be made dynamic by using text – or graphic lists
for the look of the button.
With Button mode you define the mode of the button
Invisible The button is not visible during runtime.
Text Labeling the button with a static text
Textlist process value depending labeling of the button during runtime
Graphic Defining a static graphic for designing the button
Graphiclist process value depending design of the button during runtime
Hint
Drag & Drop of a screen in the project tree into an open screen editor creates a new button
with a screen change function to the corresponding screen during runtime
Industry Sector
Exercise
Libraries
Faceplates
Layers
Engineering
Properties
Graphics
Enhanced
Objects
Simple Objects
Objects
Screens
Engineering
Drag & Drop of a button from the object window
ActivateScreen
event is
automatically
created

14
In the properties of an object you can define different animations to change the behavior of
an object during runtime.
Appearance
With Appearance you can change the colors of an object during runtime depending on
process values.
Diagonal, horizontal oder vertical Movement
You can define only one movement animation for one object.
Direct Movement
The object can be moved in x- and y-direction.
Engineering
The Engineering of movement animations is very easy. When activating a movement an
additional transparent copy of the object and an arrow is displayed. Now you can simply drag
the transparent copy of the object to the end position.
Visibility
Depending on the value of a tag the object can be displayed visible or invisible (hidden).
Industry Sector
Exercise
Libraries
Faceplates
Layers
Engineering
Properties
Graphics
Enhanced
Objects
Simple Objects
Objects
Screens
Engineering
Animation
Select the tag for
the animation
Dragging of the
object to the final
position

15
Creating multiple objects
You can duplicate an object by dragging it with pressed Ctrl – Key and selecting one of the
marked positions in the screenshot above.
All created objects have the same properties.
Industry Sector
Exercise
Libraries
Faceplates
Layers
Engineering
Properties
Graphics
Enhanced
Objects
Simple Objects
Objects
Screens
Creating multiple objects
Duplicating objects
Dragging an object with pressed
<Ctrl>-Key and left mouse button

16
Layers
One screen has 32 different layers. Each layer can contain objects. The order of the layers
is defined by its number. Objects in layer 0 are in the background of the screen, objects in
layer 31 in the foreground. The standard layer for new objects is layer 0.
Principle
One layer is always the active layer. New objects are always placed in the active layer. The
number of the active layer is shown in the toolbar.
Industry Sector
Exercise
Libraries
Faceplates
Layers
Engineering
Properties
Graphics
Enhanced
Objects
Simple Objects
Objects
Screens
Layers
Working with Layers
Object in Layer 31
All Layers visible
Layer of selected
object

17
A Faceplate is a preconfigured group of objects. With faceplates you can extend the count of
available screen objects.
Creating a faceplate
Faceplates are created and edited in the faceplate editor. All faceplates are stored in the
project library.
To create a faceplate just select all graphic objects that are needed for the faceplate. In the
context menu select Create Faceplate to open the faceplate editor.
Industry Sector
Exercise
Libraries
Faceplates
Layers
Engineering
Properties
Graphics
Enhanced
Objects
Simple Objects
Objects
Screens
Faceplates
Faceplates: individual created groups of objects
Less Engineering time
Reusable in other projects

18
Property interface
On the register tab Property interface you define the properties of the faceplate that can be
changed.
This dialog consists of two lists:
The List Faceplate Properties contains all properties, that can be changed when using the
faceplate.
The List Object properties contains the static properties of the faceplate.
Connecting
To make a property access able from the outside, simply select the property and do a drag
& drop action from the inner objects to the interface.
Event interface
Here you define the events the faceplate should perform.
Script
Write a Visual Basic script that is performed in the faceplate.
Industry Sector
Exercise
Libraries
Faceplates
Layers
Engineering
Properties
Graphics
Enhanced
Objects
Simple Objects
Objects
Screens
Faceplates
individual properties
Simple connection with Drag & Drop
Implementing functions and scripts

19
After creating a faceplate it is stored in the project library and can be placed on a screen like
any other object by drag & drop.
Industry Sector
Exercise
Libraries
Faceplates
Layers
Engineering
Properties
Graphics
Enhanced
Objects
Simple Objects
Objects
Screens
Faceplates
Saving the faceplates in the project library
Reusable in other projects

20
Industry Sector
Exercise
Libraries
Faceplates
Layers
Engineering
Properties
Graphics
Enhanced
Objects
Simple Objects
Objects
Screens
Libraries
System libraries preinstalled in the installation folder of WinCC flexible
Content of the
library
Graphics
Project library

21
C:ProgrammeSiemensSIMATIC WinCC flexibleWinCC flexible
SupportLibrariesSystem-Libraries
Industry Sector
Exercise
Libraries
Faceplates
Layers
Engineering
Properties
Graphics
Enhanced
Objects
Simple Objects
Objects
Screens
Libraries
Easy administration of the libraries with categories
Category

22
WinCC flexible 2008
- Screens
Exercise
Objects
Screens

23
Hint
Event for the Buttons: InvertBit
Tag:
“???”
Animation for the circle: Appearance
Tag:
“???”
Type:
Integer
e.g. for
value 0 => background color = red
for
value 1 => background color = green
Industry Sector
Buttons
Exercise
Objects
Screens
Buttons
Create a new screen and name it „Buttons“
Place a button with text, a button with graphic, a switch and an invisible
button
In the background of the invisible button you should place a circle or
something similar
In the tag editor create a new tag with datatype „Bool“. The tag should be
an internal tag
The circle should change its background color depending on the value of
the Boolean tag. You can configure this in the properties of the circle at
animation
When the runtime is started, the circle should change its color on any
button action
You will also need a button on the start screen to change to the screen
„Buttons“

24
Finished the Exercise?
Try placing other Simple Objects to the screen, change properties of placed
objects and see the effects in runtime.
Industry Sector
Buttons
Exercise
Objects
Screens
Buttons
Set the necessary events for the buttons and start the runtime for a test

3 win cc flexible 2008 - basics_screens_en

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie 3 win cc flexible 2008 - basics_screens_en

Ähnlich wie 3 win cc flexible 2008 - basics_screens_en (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

3 win cc flexible 2008 - basics_screens_en