3 win cc flexible 2008 - basics_screens_en

1

WinCC flexible 2008 - Screens

ExerciseObjectsScreens

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 screenAll 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 runtimeDynamic 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 modificationsIndustry Sector

2008-06-30 Rainer Uhl Slide 2/25WinCC flexible 2008 - Screens

Exercise

Objects

The TemplateThe start screen

Screens

The start screen

3



Exercise

Objects


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 TemplateObjects 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 windowThe 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.

HintThe permanent window has the advantage that it is an own window and does not need to be loaded on each screen change.



Exercise

Objects


Screens

The Template

Use of the template and the permanent windowDefine permanent window only one time Shows objects on any other screen

Permanent window

5



Exercise

Objects


Screens

The Template

Objects placed on the

template

Objects placed on the screen

itself

Use of the template in

runtime

6



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, RectangleText Field: For display of static textsIO – Field: Input/Output of numeric values or textDate – Time - FieldGraphic IO Field: Display of graphics dependant of process values in runtimeSymbolic IO Field: Display of texts dependant of process values in runtimeGraphics view: Display of single graphicsButton, Switch: Triggering eventsBars: 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.



Exercise

LibrariesFaceplatesLayersEngineeringPropertiesGraphics

Enhanced Objects

Simple Objects

Objects

Screens

Simple Objects

Simple Objects

8

The Enhanced Objects contain the following elements:SliderClockStatus Force- Online View and Control of PLC tagsSm@rtClient – View- Display and control of other devicesHTML – BrowserUser ViewGaugeTrend ViewSymbol libraryRecipe ViewAlarm View Alarm indicatorDetail View, Motion View, Step View, Unit View- ProAgent specific views



Exercise


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.



Exercise


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 graphicsYou 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

Preconditiona screen editor is openedthe tools window is displayed

Supported graphic file formats: *.bmp, *.ico, *.emf, *.wmf, *.gif, *.tif, *.jpeg oder *.jpg



Exercise


Enhanced Objects

Simple Objects

Objects

Screens

Graphics

Simple access to graphicsStart 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.



Exercise


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:PrincipleFor 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 – FieldThere 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 - FieldThe 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.HintYou 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.



Exercise


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 buttonInvisible The button is not visible during runtime.Text Labeling the button with a static textTextlist process value depending labeling of the button during runtimeGraphic Defining a static graphic for designing the buttonGraphiclist process value depending design of the button during runtime

HintDrag & 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



Exercise


Enhanced Objects

Simple Objects

Objects

Screens

Engineering

Drag & Drop of a button from the object window

ActivateScreenevent is

automatically created

14

In the properties of an object you can define different animations to change the behavior of an object during runtime.

AppearanceWith Appearance you can change the colors of an object during runtime depending on process values.Diagonal, horizontal oder vertical MovementYou can define only one movement animation for one object.Direct MovementThe object can be moved in x- and y-direction. EngineeringThe 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.VisibilityDepending on the value of a tag the object can be displayed visible or invisible (hidden).



Exercise


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 objectsYou 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.



Exercise


Enhanced Objects

Simple Objects

Objects

Screens

Creating multiple objects

Duplicating objects

Dragging an object with pressed <Ctrl>-Key and left mouse button

16

LayersOne 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.

PrincipleOne 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.



Exercise


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 faceplateFaceplates 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.



Exercise


Enhanced Objects

Simple Objects

Objects

Screens

Faceplates

Faceplates: individual created groups of objectsLess Engineering timeReusable in other projects

18

Property interfaceOn 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.

ConnectingTo 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 interfaceHere you define the events the faceplate should perform.ScriptWrite a Visual Basic script that is performed in the faceplate.



Exercise


Enhanced Objects

Simple Objects

Objects

Screens

Faceplates

individual propertiesSimple connection with Drag & DropImplementing 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.



Exercise


Enhanced Objects

Simple Objects

Objects

Screens

Faceplates

Saving the faceplates in the project libraryReusable in other projects

20



Exercise


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:\Programme\Siemens\SIMATIC WinCC flexible\WinCC flexible Support\Libraries\System-Libraries



Exercise


Enhanced Objects

Simple Objects

Objects

Screens

Libraries

Easy administration of the libraries with categories

Category

22



23

HintEvent for the Buttons: InvertBit

Tag:“???”

Animation for the circle: AppearanceTag:

“???”Type:

Integere.g. for

value 0 => background color = redfor

value 1 => background color = green



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 buttonIn the background of the invisible button you should place a circle or something similarIn 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 animationWhen the runtime is started, the circle should change its color on any button actionYou 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.



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

Technology