C04 - Graphics Builder V2-1

Course T301, Engineering an 800xA System - Advanced

4-1

Chapter 4 Graphics Builder

TABLE OF CONTENTS Chapter 4 Graphics Builder............................................................................................................................................................ 4-1

4.1 General Information............................................................................................................................................................. 4-3 4.1.1 Description .................................................................................................................................................................... 4-3 4.1.2 Objectives...................................................................................................................................................................... 4-3 4.1.3 Reference Documentation............................................................................................................................................. 4-3 4.1.4 Limits............................................................................................................................................................................. 4-3

4.2 Graphic Aspects ................................................................................................................................................................... 4-4 4.2.1 General .......................................................................................................................................................................... 4-4 4.2.2 Graphic Elements.......................................................................................................................................................... 4-5

4.3 Graphic Builder Master Settings.......................................................................................................................................... 4-7 4.3.1 General .......................................................................................................................................................................... 4-7 4.3.2 Options .......................................................................................................................................................................... 4-7 4.3.3 Enable Libraries ............................................................................................................................................................ 4-8 4.3.4 Disable Libraries ........................................................................................................................................................... 4-9 4.3.5 Auto enable Libraries.................................................................................................................................................. 4-10

4.4 Object References .............................................................................................................................................................. 4-12 4.5 Graphics Builder Tools ...................................................................................................................................................... 4-13

4.5.1 Create a Faceplate Element......................................................................................................................................... 4-13 4.5.2 Project Explorer .......................................................................................................................................................... 4-14 4.5.3 Toolbox ....................................................................................................................................................................... 4-15 4.5.4 Properties Window...................................................................................................................................................... 4-17 4.5.5 Expression Builder...................................................................................................................................................... 4-19 4.5.6 Element Browser......................................................................................................................................................... 4-27 4.5.7 National Language Support (NLS)............................................................................................................................. 4-30

4.6 Background colors ............................................................................................................................................................. 4-35 4.6.1 Background Color of Graphic Displays ..................................................................................................................... 4-35 4.6.2 Background Color of Graphic Element Instances...................................................................................................... 4-36 4.6.3 Background Color of Primitive Elements .................................................................................................................. 4-36

4.7 Display Tool....................................................................................................................................................................... 4-37 4.8 Diagnostic Window............................................................................................................................................................ 4-40 4.9 ActiveX Symbol Library.................................................................................................................................................... 4-42

Course T301, Engineering an 800xA System - Advanced

4-2

Engineering an 800xA System - Advanced

4-3

4.1 General Information

4.1.1 Description

Graphics Builder is a tool, which enables configuration of graphic aspects, for example graphic displays, graphic elements and faceplate elements. It is a tool built on Visual Basic.

You can do the following with Graphics:

• Build graphic elements

• Configure faceplates elements

• Configure graphic displays

• View graphics

• Use faceplates for information and control

4.1.2 Objectives

After completion of this chapter you will be able to

• Work with the Graphics Builder

• Modify graphics with the Expression Builder

• Include elements with the Element Browser

• Create a faceplate element

• Deal with the National Language Support (NLS) for your element

• Deal with the background colors

• Deploy graphics with the Deploy Tool

• Insert graphics from the ActiveX Symbol Factory

4.1.3 Reference Documentation

• 800xA Industrial IT Engineering Documentation: Graphics User’s Guide

4.1.4 Limits

• Maximum of 256 element instances in the Graphics Builder (Visual Basic)

• Maximum of 112 different Element Types and Graphic Primitives in a graphic display

Engineering an 800xA System - Advanced Chapter 4 Graphics Builder

4-4

4.2 Graphic Aspects

4.2.1 General

This section describes aspects defined by the Graphics aspect system, commonly called Graphic Aspects. For each graphic aspect, an ActiveX control is implemented using Visual Basic.

The Graphics aspect system defines aspect types:

• Graphic Displays

• Graphic Elements

The major difference is that Graphic Displays are intended to be handled and invoked directly by the process operator, the person that uses graphics for monitoring and control in the run time situation.

Graphic Elements on the other hand are building blocks that are used when configuring graphic displays, or other graphic elements, but also faceplates.

There are some special graphic display and graphic element aspects which are already shaped for their use of work:

• Object Display

• Navigation Display

• Faceplate Element

• Property Element

• Subelement

• Symbol Element

The general presentation for all objects is deal by the Object Display.

The Navigation Display is a display specially made for Navigation Bars.

Aspects of category Faceplate Elements are specifically designed to be used for Faceplate Aspects. They are of the same shape as a graphic element aspect but additional to that they are default sized to fit within the default size of a faceplate view. This avoids unnecessary rescaling.

A Property Element is a generic element, used in faceplate element aspects, which often implements both presentation and input.

A generic graphic element intended for presentation purposes is the Subelement.

The Symbol Element is prepared to create elements of icon type


4-5

4.2.2 Graphic Elements

Graphic Elements are normally created on object types to be reused in graphic displays from the instances in the Control Structure.

4.2.2.1 Graphic Elements Navigation

Graphic elements

• Used for reusable graphic in object types

• Used for navigation

The Graphic element will act as a push button in the display depending on the property “Input Enabled”. If this property is set to true a click on the element will result in a display change. The normal is that the faceplate is shown for process objects. The reason why the faceplate is the selected aspect is that it has been tagged to be the default aspect.

Graphic Display

Control Connection

Graphic Elements

Faceplate

Name

Aspect Key “Default Aspect”

Control Structure

Process Portal A

Functional Structure

Control Connection

Graphic Elements

Reuse

Object Type Structure

Valvetype_1

OPC

Control Connection

Graphic Elements

Instancing

Insert Graphic display


4-6

4.2.2.2 Object Types and Graphic Elements

It is not possible to reference to any object on a higher level. Child objects can be referenced since we can be sure they will exist also in the instance of the object type

4.2.2.3 Graphic Elements Design

When creating a graphic element on an object type you must decide the click behavior for the element. Probably you want the same click behavior in the whole area. This means that if there are reused graphic elements, the property Input Enabled should be set to false on these elements.

Composite objects a result of mirroring from CB

Object type Structure

Graphic Element

Reuse

Graphic display

Graphic elements


4-7

4.3 Graphic Builder Master Settings

4.3.1 General

There are some master settings for the Graphics Builder in the Visual Basic editor. To get access to those settings you have to open the Graphics Builder first.

4.3.2 Options

Select Graphics Builder Options in the Tools menu.

Live Data in design mode enables you to display dynamic data in graphic elements when you are using graphic aspects in design mode.

Advanced Usermode gives you access to more menus and functions in Visual Basic. If you have not selected Advanced User Mode, some menus or menu items are dimmed, which means that they are unavailable.

Debug get access to an additional debug menu.

Show at Startup To show the Element Browser and/or the Expression Builder at start up enable the fitting check box/es.


4-8

4.3.3 Enable Libraries

Subelements and Primitives are grouped together in different Graphic Libraries. To add libraries to the toolbox:

1. Open the Graphic Libraries window in the Tools menu.

2. Select by checking one or more of the listed Libraries.

3. Click on the Apply or OK button. The selected libraries are presented under their respective button in the toolbox.


4-9

4.3.4 Disable Libraries

1. In the Graphics Builder please open the Aspect menu and select the entry Components… .


4-10

2. Disable the library by unmarking the check box in front of the library name.

3. Close the Components dialog with a click onto the OK button.

4.3.5 Auto enable Libraries

If you create a new graphic aspect, e.g. a Graphic Element, and open the Graphics Builder for this element by clicking on the Edit button, the default configuration for this element is opened. This default configuration includes the General and the General Primitives libraries so far.

Of course there are still some other libraries which are needed for working with the Graphics Builder. But in the default configuration you have to include the libraries every time you open a new graphical aspect with the Graphics Builder.

To get a kind of “auto enable” for those libraries you need often, you have to edit the template for these graphical aspects.

1. Browse into the Admin Structure of the Process Portal.

2. Select the path Inventory Objects Aspect Category.

3. Click onto the object Graphic Element. This object is the main object from this kind of Aspect Category. Changes on this object will affect all new created objects of this kind of category.

4. Select the aspect Graphic Element and click onto the Edit button to start the Graphics Builder.


4-11

5. Enable the library Extended Primitives (as described in chapter 4.3.3 Enable Libraries).

6. Save this aspect by clicking the menu entry File Save.

We want to check if the library Extended Primitives is enabled automatically if we create a new Graphic Element.

1. Go into the Functional Structure of the Process Portal.

2. Create a new generic object called TestAutoLibraries.

3. Create a new Graphic Element aspect on the object TestAutoLibraries.

4. Open the Graphics Builder for the Graphic Element aspect by clicking onto the Edit button.

5. Click onto the Extended Primitives tab of the Toolbox menu: The library is enabled.


4-12

4.4 Object References

Object references, in graphic aspects, are either absolute or relative. Following lines shows some examples of how object references are presented:

• Absolute Reference AI.117

• Relative References . .. ./Level ./Tank/Level

Absolute Reference is presented with the name of the referenced object. Absolute References, are the default for references to objects in concrete structures.

Relative Reference is presented with a period, which denotes the invocation object for the graphic aspect, optionally followed an object path. Relative References are always used by graphic aspects in object types. Note that it is not possible to set up a reference from a graphic aspect in an object type to an object that is not part of the object type.


4-13

4.5 Graphics Builder Tools

The Graphics Builder contains some tools for effective working. Not all tools are really tools. Some of them are views on different kind of project parts, e.g. the Project Explorer is a view onto the objects of the project.

4.5.1 Create a Faceplate Element

To get a better practical view onto the single tools we want to create a Faceplate Element for the Function Block Type GenGenerator from the Boiler example. Typically a Faceplate and therefore a Faceplate Element exists on all instances of a Function Block Type. To get this we have to create our Faceplate Element at the Function Block Object Type which is located in the Object Type Structure.

1. Click into the Object Type Structure and select the Function Block Object Type GenGenerator.

2. Add a new aspect of kind Faceplate Element to GenGenerator and name it MainFaceplate.

3. Open the Config View of the MainFaceplate aspect. Please open the Graphics Builder by a click onto the Edit button.


4-14

4. We need the Subelements library in the Graphics Builder later on. For this please open the menu Tools Graphic Libraries and enable the check box for the Subelements library.

4.5.2 Project Explorer

The Project Explorer provides a view onto the single objects of a graphical aspect. Here we can find the main User Control of our Faceplate Element. A click onto the User Control provides some configuration settings which are displayed in the Properties Window.


4-15

The Project Explorer is a Visual Basic Tool and it is rarely needed for the work on faceplates and other graphic aspects.

4.5.3 Toolbox

The Toolbox provides the selected generic elements used to build graphics.

To create an element you have to:

1. Click the icon for the desired generic element (ActiveX control) in the Toolbox.

2. The cursor changes to a crosshair in the Graphic Builder workspace.

3. Place the cursor at any point in Graphics Builder’s workspace.

4. Click and hold the left mouse button.

5. Drag the cursor diagonally to the opposite corner of the bounding rectangle.

6. Release the mouse button. The selected element now appears inside a bounding rectangle in the workspace.

User Control


4-16

4.5.3.1 Create an IBar element

We want to create an IBar for our example Faceplate Element.

1. Select the Subelements library from the Toolbox. Click the IBar element (please have a look at the picture above) and draw the IBar on the User Control.

2. From the Toolbox please select the library Graphic Primitives and draw a AdvantVscale like displayed in the picture below.

3. Draw an AdvantNumeric field as displayed in the picture below.


4-17

4.5.4 Properties Window

The Properties Window is one of the standard windows in Visual Basic. It shows all the properties belonging to the currently active ActiveX control.

Use the Properties Window to assign Constant Values to properties of elements in the configured graphic aspect.

The Properties Window can be opened from the View menu. To set properties for a certain element, it needs to be selected first.

The properties can either be sorted in alphabetic order (with the Alphabetic Tab) or in categories (with the Categorized Tab). The categories are presented as a tree structure. By default, all categories are expanded. The available categories depend on the categories exposed by the control.

4.5.4.1 Edit Properties

We want to change some properties of our IBar element:

1. Click onto the IBar element.

2. Open the Properties Window with a click onto the Properties Window button.


4-18

3. Select the property field ToolTipText the text “Bar”.

4. Click onto the AdvantVscale element and assign the ToolTipText “Scale” to it.

5. Click onto the AdvantNumeric element and assign the ToolTipText “Value” to it.

4.5.4.2 Edit ObjectPropertyRef properties

In the example above we changed some “normal” properties of the IBar. Additional to that there are “special” properties called ObjectPropertyRef properties. The static value assigned to an ObjectPropertyRef property is a reference to an aspect object property.

The ValueRef property of our IBar is such kind of property. We want to connect this property to the counter property of our Function Block Type GenGenerator.

1. Go into the Properties Window of our IBar and select the property ValueRef. Please click onto the “…” button. A new dialog pops up. It shows all the properties of the Function Block Type GenGenerator per default. The Browse button offers an opportunity to select another object and show its properties.

2. Select the property Counter – Function Block and click OK.


4-19

3. Deploy your graphic with a click onto the Deploy button.

4. Click into the Control Structure and open the aspect view of the Function Block FIC2001. Select the MainFaceplate aspect and open the aspect view. Please check the IBar element.

4.5.5 Expression Builder

Use the Expression Builder to assign Expressions to properties of elements in the configured graphic aspect.

Avoid assigning constant values using Expression Builder. It unnecessarily increases the CPU load and in many cases it does not work at all. For constant values you shall use the Properties Window (described in chapter 4.5.4 Properties Window).

4.5.5.1 Overview

The Expression Builder can be opened from the View menu of the Graphics Builder. To set properties for a certain element, it needs to be selected first.

The Expression Builder is used to subscribe for and calculate data, which will be presented in graphic aspects. Subscribe for data, is to trigger the influx of data to the graphic aspect. A relationship between object properties and properties of generic elements is specified.

You have to browse to select entities from the bottom half of the Expression Builder, for example object property references or logical colors. They cannot be written directly in the expressions. The expression language is based on standard Visual Basic.

Please select the IBar of our example and open the Expression Builder by a click onto the menu entries View Expression Builder.


4-20


4-21

4.5.5.2 Working with Expression Builder

We want to create some expressions with the Expression Builder for our example.

For more information see document 3BSE032785_System_Alarm and Event_Reference in Section 5.

Set the range properties of the IBar with the Expression Builder:

1. Select the IBar and open the Expression Builder then.

2. Select the tab card Alphabetic of the Expression Builder.

3. Select the property RangeMax and click into the value field. The field enlarges.

4. Select the tab bar at the button of the Expression Builder and select the tab card Object Property.


4-22

5. In the right column select the entry Settings. Enlarge Settings and select the property Max.

6. Select the subproperty Value from the Subproperty List.

7. A click onto the Insert button will insert the property reference into the RangeMax value field. The expression is created now.


4-23

8. Please repeat the steps for the RangeMin property (connection to the object property Settings Min Value).

Set the Value property of the AdvantNumeric element and set the StartValue/EndValue properties of the AdvantScale element.

1. Select the AdvantNumeric element, open the Expression Builder and select the property Value from the list. Please assign the property Output to it (as displayed in the picture below).


4-24

2. Select the AdvantVScale, open the Expression Builder and select the Categorized tab card.

3. Select the Text category. For EndValue please assign the object property Settings Max Value and for StartValue please assign Settings Min Value.


4-25

4. Deploy the graphic and have a look to the Function Block instance FIC2001. Select the MainFaceplate and open the aspect view for it. The AdvantVScale should go the right min and max values and the AdvantNumeric field should show the correct value.

Change the color of the IBar depending on if a level is reached:

The next task is to change the color of the IBar if the value reaches a level. For this the Expression Builder provides a request statement:

IIF(statement, To do if statement succeeded, To do if statement failed)

• statement: Visual Basic statements are allowed, like AND, OR, NOT. The result of the statement must be TRUE or FALSE.


4-26

• To do if statement succeeded: If the result of the statement succeeded then this value is set to the property.

• To do if statement failed: If the result of the statement failed then this value is set to the property.

Back to the example:

1. Select the IBar in the Graphics Builder and open the Expression Builder for it.

2. Select the property ForegroundColor.

3. Click into the value field of ForegroundColor and insert the statement “IIF(“.

4. Select the Object Property tab card and insert the property Counter into the statement.

5. Behind Counter add the expression “>=” to the statement (as displayed in the picture below).

6. Insert the object property LHight to the statement and add a comma “,” to the statement. The statement shall look like the picture below.

7. The next part of the statement describes the succeeded case. We want to set a color to the ForegroundColor property. All the exiting colors are located at the tab card Color. It is one of the tabs cards located at the button of the Expression Builder. Select the Color tab card of the Expression Builder and select the color category FacePlateColors from the selection box.

8. Select the color Alarm and insert it into the statement. Behind the color name add a comma “,” to the statement.


4-27

9. Select the color OnFeedback from the list and insert it into the statement. Add a closing round bracket “)” to the statement and deploy the graphic.

10. Opent the Function Block FIC2001 from the Control Structure and watch the Faceplate. The color of the IBar should switch to red if the value reaches the level.

4.5.6 Element Browser

When the dynamic information should be added to the display it is easy if to reuse the graphics from the Control structure objects. Use the Element Browser tool to find the objects in the structures.

When an object has been selected, then the Element Browser will list all reusable graphics in a list, where it is possible to select and add the graphic in the display. There isn’t any need of further configuration. The process connection will work as soon you have deployed the display. Only in special cases there is a need for other tools.

4.5.6.1 Create a Graphic Element

We want to create a Graphic Element and add it to the Faceplate Element MainFaceplate with the Element Browser:

1. Go into the Object Type Structure and select the Function Block Type GenGenerator.

2. Add a Graphic Element aspect to GenGenerator and name it TestElement.

3. Open the Graphics Builder for TestElement with a click onto the Edit button.

Reused graphic aspect Working dynamic behavior


4-28

4. Open the Toolbox and open the library Graphic Primitives. Draw a AdvantText element as shown in the picture below.

5. Select the AdvantText element and open the Expression Builder. The AdvantText element shall show the name of the object where it is placed. For that please move to the property Text and insert the object property reference as displayed in the picture below.


4-29

6. Deploy the graphic and select the Function Block instance FIC2001. Open the new Graphic Element TestElement. The view should show the object name which is FIC2001.

7. Please switch back to the MainFaceplate element and therefore the open Graphics Builder. We want to create the TestElement element on the MainFaceplate element. For that please open the Element Browser.


4-30

8. To create the TestElement on the MainElement please select the TestElement from the list and click onto the Add Element button.

9. The TestElement is placed on MainElement. Please move the TestElement so that it looks like the picture below.

10. Deploy the graphic and switch to the Function Block FIC2001 to see how the MainFaceplate looks like now.

4.5.7 National Language Support (NLS)

The NLS support for the Graphics Builder is handled by the NLS Resource Manager aspect. This aspect stores ID’s and therefore the different languages.

We want to deal with NLS in the Graphics Builder and therefore we want to expand our example:

1. Move to the GenGenerator Function Block Type in the Object Type Structure (library GeneratorLib).

2. Add an NLS Resource Manager aspect to GenGenerator.


4-31

3. Open the Config View of the NLS Resource Manager aspect

4. Click the Add…button of the Locale setting and select the language from the selection box. For the language please select English.

5. Click the Add… button of the Resource Id setting and add a new id called Info to the resource manager.

6. Type in “This is a faceplate.” for the Translated text field and click the Apply button.

7. Add a new language to the resources. Click the Add…button for the Locale setting and select the language German.

8. Per default the Translated text for the German language is the same as for the English language. Delete the Translated text and write a German text instead of it: “Dies ist ein Faceplate.”. Click the Apply button then.


4-32

9. Open the Graphics Builder for the MainFaceplate and create a new AdvantText primitive as displayed in the picture below.

10. Open the Expression Builder for AdvantText and select the property Text.

11. Select the tab card NLS Text. Select the NLS Resource Manager aspect of the Function Block Type GenGenerator in the left selection box.

12. Select the NLSID_Info id and click the Insert button.


4-33

13. Deploy the MainElement.

14. Open the Control Panel of your Windows Operating System and select the German language from Regional and Language Options.


4-34

15. To set the new settings to the Plant Explorer you have to close and reopen again. Take a look at the MainFaceplate: The AdvantText box got the German text.


4-35

4.6 Background colors

4.6.1 Background Color of Graphic Displays

The background color of a graphic display is defined by setting the value of the GeneralBackColor property of the displays PgSubscriptionControl object.

Changing the value or assigning an expression to the GeneralBackColor property is done using drop down menu of the property window as displayed in the picture below.

Possible values are…


4-36

4.6.2 Background Color of Graphic Element Instances

Graphic elements that have been created from any of the built-in aspect categories, has a property BackgroundColor (BackColor) that can be used to control the color of instances of these elements.

Possible values are…

4.6.3 Background Color of Primitive Elements

It is often desirable to make the background of graphic primitives, or even entire primitives, to appear invisible. This can be achieved by setting the background color of the primitive to the logical color GeneralBackColor. This sets the color of the primitive to the background color of the graphic element it is part of, making it pseudo transparent.

The GeneralBackColor logical color is special in that it always has the background color value of the graphic display/element in which it is used rather than the color that is globally defined for it.


4-37

4.7 Display Tool

A graphic aspect may consist of information from several other graphic aspects. In the figure you have a graphic display, which contains two graphic elements. These elements include two subelements each.

If a Subelement is changed and deployed, the compiled information in the Graphic Display and the Graphic Elements is wrong, and these items have to be deployed as well.

To help you find graphic aspects that got their information (source code) changed but which have not been deployed, you can use the Display Tool.


4-38

We want to create two new Graphic Displays and want to deploy them with the Display Tool.

1. Open the Functional Structure and browse to the Plant ADVANCED object. Create two new aspects of type Graphic Element here and name them “Test_1” and “Test_2”.

2. Start the Display Tool and open the Functional Structure in the tool.


4-39

3. The Display Tool finds the not deployed graphical aspects. For deploying all aspects in the list please click the button Deploy All In List. Otherwise, if it is needful to deploy only one aspect, please select the aspects with a mouse click. Multiple selections are necessary by holding the SHIFT key of the keyboard. To execute the operation please click the button Deploy Selected.

Please note: The deploying of graphical aspects with the Display Tool could take some time. This depends on the amount of the aspects. Furthermore the browsing into structures with a large amount of objects (e.g. Object Type Structure) takes time as well.


4-40

4.8 Diagnostic Window

The Diagnostics Window shows background information about graphic displays and elements. To display the Diagnostic Window open the context menu of a graphic display or element and choose Diagnostics.

To get more information about the Diagnostic Window please have a look to the document IndustrialIT 800xA – Engineering: Graphics which belongs to the Process Portal installation. View the chapter 8: Maintenance – Diagnostic Window.

RightClick


4-41


4-42

4.9 ActiveX Symbol Library

The 800xA system provides a large library with ActiveX symbols.

We want to create a simple Graphic Element and want to deal with some symbols of the symbol library.

1. Open the Functional Structure and therefore the object Plant ADVANCED.

2. Create a new aspect of category Graphic Display. Please name the aspect “Plant Overview”.

3. Open the Graphics Builder for the aspect Plant Overview.

4. Enable the library Symbol Factory Controls (Tools Libraries).

5. Create a new SFStandard symbol on the User Control area.

6. To open the property pages please open the Context Menu for the SFStandard graphic and select Properties.


4-43

7. Please select a graphic from the category Buildings and click OK then.


4-44

Documents

C04 - Graphics Builder V2-1