You are on page 1of 96

User Guide

Visual T&D
Diagram Editor
For use with Visual T&D software version 4.2R2 or later.
All brand and product names appearing in this document are the trademark or registered trademark
of their respective holders.

© 2015 Eaton – All rights reserved.


The information in this document is subject to change without notice.

Eaton’s Cooper Power Systems


Energy Automation Solutions
1990 5th Street
Suite 220
Levis, Quebec
Canada G6W 5M6
Phone: +1.418.830.5800
Fax: +1.514.227.5256
Email: PSMO-sales@eaton.com
Web: http://www.cooperpower.com

Technical Support: eas-support@eaton.com

MN914002EN, Version 18
Contents
1 Introduction 1
1.1 Getting Assistance .................................................................................................1
1.2 Related Documentation .........................................................................................1
1.3 Changing Visual T&D Display Language .............................................................2

2 The Basics 3
2.1 Operation Modes ...................................................................................................3
2.1.1 Switching Between Operation Modes .....................................................3
2.2 Creating a Diagram................................................................................................4
2.2.1 Setting up the Current Page Properties....................................................4
2.2.2 Setting up the Current Page Grid Properties ...........................................5
2.2.3 Adding Basic Shapes to Your Diagram ..................................................6
2.2.3.1 The Drawing Toolbar .......................................................... 6
2.2.3.2 Adding a Line to Your Drawing .......................................... 7
2.2.3.3 Adding a Polygon to Your Drawing .................................... 7
2.2.3.4 Adding a Rectangle to Your Drawing ................................. 8
2.2.3.5 Adding a Polycurve to Your Drawing ................................. 8
2.2.3.6 Adding a Closed Curve to Your Drawing ........................... 8
2.2.3.7 Adding an Ellipse or a Circle to Your Drawing .................. 8
2.2.3.8 Adding a Text Label to Your Drawing ................................ 9
2.2.3.9 Adding an Image to Your Drawing ..................................... 9
2.2.4 Working with Overlapping Shapes .........................................................9
2.2.5 Selecting Shapes.................................................................................... 10
2.2.6 Moving Shapes ...................................................................................... 11
2.2.7 Modifying Shapes ................................................................................. 11
2.2.7.1 Using the Mouse to Change the Size of a Shape ............... 11
2.2.7.2 Adjusting the Size of a Shape ............................................ 11
2.2.7.3 Moving the Vertices of a Complex Shape ......................... 12
2.2.8 Rotating Shapes ..................................................................................... 12
2.3 Organizing Shapes in the Drawing ...................................................................... 13
2.3.1 Selecting the Shapes to Organize .......................................................... 13
2.3.2 Aligning Shapes .................................................................................... 14

Visual T&D Diagram Editor User Guide •i


2.3.3 Making Shapes the Same Size .............................................................. 14
2.3.4 Distributing Shapes Evenly ................................................................... 14
2.4 Grouping Shapes ................................................................................................. 15
2.5 Connecting Shapes .............................................................................................. 16
2.5.1 Adding Connection Points .................................................................... 16
2.5.2 Linking the Shapes ................................................................................ 16
2.5.3 Adjusting an Orthogonal Link............................................................... 17
2.6 Setting up Shape Properties ................................................................................. 17
2.6.1 General Properties ................................................................................. 18
2.6.2 Image Properties.................................................................................... 19
2.6.3 Line Drawing Properties ....................................................................... 19
2.6.4 Color Fill Properties .............................................................................. 20
2.6.5 Text Properties ...................................................................................... 21
2.6.6 Font Properties ...................................................................................... 22
2.6.7 Changing Properties of Grouped Shapes............................................... 22
2.6.8 Changing the Properties of Individual Shapes of a Group .................... 23
2.7 Saving and Loading Diagrams ............................................................................ 23
2.7.1 Saving a Diagram to a File .................................................................... 23
2.7.2 Saving a Diagram on the Server ............................................................ 24
2.7.3 Opening a Diagram from a File............................................................. 24
2.7.4 Opening the Diagram Stored on the Server ........................................... 24

3 Working with Data 25


3.1 Variables and Data Points ................................................................................... 25
3.2 Animation Effects ................................................................................................ 25
3.2.1 Animation Basics: The Switch Example ............................................... 26
3.2.1.1 Drawing the Shapes for the Open Switch .......................... 26
3.2.1.2 Drawing the Shapes for the Closed Switch ....................... 26
3.2.1.3 Grouping the Components ................................................. 27
3.2.1.4 Defining the Animation Effects ......................................... 27
3.2.1.5 Running the Animation ..................................................... 28
3.2.2 Animation Properties ............................................................................ 29
3.2.3 Working with Animation Expressions .................................................. 30
3.2.3.1 The Expression Editor ....................................................... 30
3.2.3.2 Arithmetic Operators ......................................................... 30
3.2.3.3 Relational Operators .......................................................... 31
3.2.3.4 Logical and Binary Operators............................................ 31

• ii Contents
3.2.3.5 Functions ........................................................................... 32
3.2.3.6 Constants ........................................................................... 34
3.2.3.7 Special-Purpose Logical Points ......................................... 34
3.2.4 The Show Value Effect ......................................................................... 34
3.2.5 The Change Color Effect....................................................................... 35
3.2.6 The Show Text Effect ........................................................................... 36
3.2.7 The Hide Effect ..................................................................................... 37
3.2.8 The Flash Effect .................................................................................... 37
3.2.9 The Scale Effect .................................................................................... 38
3.2.10 The Move Effect ................................................................................... 39
3.2.11 Combining Effects ................................................................................ 40
3.2.12 Using the Full Screen Display Setting .................................................. 41
3.3 Animation Effects Specific to the SMP Gateway HMI ....................................... 42
3.3.1 The Show Point Setting Effect .............................................................. 42
3.4 Interactions .......................................................................................................... 42
3.4.1 The Control Interaction ......................................................................... 43
3.4.2 Setting up a Control Interaction on a Shape .......................................... 43
3.4.3 The Open Page Interaction .................................................................... 45
3.4.4 Setting up an Open Page Interaction on a Shape ................................... 45
3.5 Interactions Specific to the SMP Gateway HMI ................................................. 46
3.5.1 The Alarm Commands Interaction ........................................................ 46
3.5.2 Setting up an Alarm Commands Interaction ......................................... 47
3.6 Using Diagram Editor in the Standalone HMI Mode .......................................... 48
3.6.1 The Kiosk Mode.................................................................................... 48
3.7 Designing Diagrams for the SMP Gateway HMI ................................................ 48
3.7.1 Using Diagram Editor from SMP Manager........................................... 49
3.7.2 Exporting a Diagram for the SMP Gateway HMI ................................. 50

4 Sharing Diagram Components 51


4.1 Creating and Managing Shape Libraries ............................................................. 51
4.1.1 Creating a New Shape Library .............................................................. 52
4.1.2 Adding Shapes to Libraries ................................................................... 53
4.1.3 Creating Library Folders ....................................................................... 53
4.1.4 Moving Shapes to a Different Folder or Library ................................... 54
4.1.5 Renaming Libraries and Folders ........................................................... 54
4.1.6 Renaming Shapes .................................................................................. 54
4.1.7 Deleting Libraries and Folders .............................................................. 54

Visual T&D Diagram Editor User Guide • iii


4.1.8 Deleting Shapes ..................................................................................... 54
4.2 Adding Library Shapes to a Diagram .................................................................. 55
4.2.1 Adding Linked Shapes .......................................................................... 55
4.2.2 Adding Unlinked Shapes ....................................................................... 55
4.3 Working with Shape Versions ............................................................................. 55
4.3.1 Updating Shapes in a Library ................................................................ 56
4.3.2 Updating the Shapes in a Drawing ........................................................ 56
4.4 Importing and Exporting Parts of a Diagram....................................................... 57
4.4.1 Exporting Parts of a Diagram ................................................................ 57
4.4.2 Importing Parts of a Diagram ................................................................ 58
4.5 Working with Aliases .......................................................................................... 58
4.5.1 Using Aliases in Animation Expressions .............................................. 59
4.5.2 Manually Assigning Aliases to Variables ............................................. 59
4.5.3 Automatically Assigning Aliases to Variables ...................................... 60
4.5.3.1 Using the ResolveByName Procedure............................... 61
4.5.3.2 Using the ResolveFromFile Procedure .............................. 63
4.6 Examples of Basic Shapes in the Libraries.......................................................... 64
4.7 Working with Pages ............................................................................................ 66
4.7.1 The Types of Pages in a Diagram ......................................................... 66
4.7.2 Managing the Pages in Your Diagram .................................................. 66
4.7.3 Adding a Page or Changing Properties of an Existing Page ................. 67
4.7.4 Displaying the Pages of a Multiple-Page Diagram ............................... 69
4.7.5 Using a Single Diagram Page to Monitor Multiple Devices ................. 71

5 Working with Scripts 77


5.1 Diagram Editor Events ........................................................................................ 77
5.1.1 Events and Operation Modes ................................................................ 77
5.1.2 The Click Event..................................................................................... 78
5.1.3 The Double-Click Event........................................................................ 78
5.1.4 The Mouse Enter event ......................................................................... 79
5.1.5 The Mouse Leave Event ........................................................................ 79
5.1.6 The Add Shape to Diagram Event ......................................................... 80
5.1.7 The Resolve Aliases Event .................................................................... 80
5.2 The Diagram Editor Object Model ...................................................................... 80
5.3 The Visual Basic Wizard ..................................................................................... 81
5.3.1 Creating a New Module ........................................................................ 81
5.3.2 Creating a New Procedure..................................................................... 81

• iv Contents
5.3.3 Assigning Procedures to Events and Shapes ......................................... 82
5.4 The Visual Basic Integrated Development Environment .................................... 83
5.4.1 Starting the Visual Basic Editor ............................................................ 84

Visual T&D Diagram Editor User Guide •v


Figures
Figure 2-1 Basic shapes in Visual T&D Diagram Editor ............................................................... 6
Figure 2-2 Complex shapes created by grouping shapes together................................................ 15
Figure 2-3 Difference between the Link and Orthogonal Link tools ........................................... 17

Visual T&D Diagram Editor User Guide • vii


Tables
Table 2-1 Page properties ............................................................................................................. 4
Table 2-2 Page grid properties ...................................................................................................... 5
Table 2-3 Drawing tools ............................................................................................................... 7
Table 2-4 Property types available for each shape/tool .............................................................. 18
Table 2-5 General properties of a shape ..................................................................................... 19
Table 2-6 Additional general properties of an image shape ........................................................ 19
Table 2-7 Line drawing properties of a shape ............................................................................. 20
Table 2-8 Fill properties of a shape ............................................................................................ 21
Table 2-9 Text properties of a shape ........................................................................................... 21
Table 2-10 Font properties of a shape ........................................................................................... 22
Table 3-1 Animation properties of a shape ................................................................................. 29
Table 3-2 Expression editor controls .......................................................................................... 30
Table 3-3 Arithmetic operators ................................................................................................... 31
Table 3-4 Relational operators .................................................................................................... 31
Table 3-5 Logical and binary operators ...................................................................................... 32
Table 3-6 Functions .................................................................................................................... 33
Table 3-7 Constants .................................................................................................................... 34
Table 3-8 Special-purpose logical points .................................................................................... 34
Table 3-9 Show value animation effect settings ......................................................................... 35
Table 3-10 Change color animation effect settings ....................................................................... 36
Table 3-11 Show animation effect settings ................................................................................... 37
Table 3-12 Hide animation effect settings .................................................................................... 37
Table 3-13 Flash animation effect settings ................................................................................... 38
Table 3-14 Scale animation effect settings ................................................................................... 39
Table 3-15 Move animation effect settings ................................................................................... 40
Table 3-16 Show Point Setting animation effect settings ............................................................. 42
Table 4-1 Assign Aliases window controls ................................................................................. 60
Table 4-2 Pages window controls ............................................................................................... 67
Table 4-3 Add Page window - Settings and controls for the Action tab ..................................... 69
Table 5-1 Click event handler parameters .................................................................................. 78
Table 5-2 Double-Click event handler parameters ..................................................................... 79

Visual T&D Diagram Editor User Guide • ix


Table 5-3 Mouse Enter event handler parameters ....................................................................... 79
Table 5-4 Mouse Leave event handler parameters...................................................................... 80
Table 5-5 Add Shape to Diagram event handler parameters ....................................................... 80
Table 5-6 Resolve Aliases event handler parameters .................................................................. 80
Table 5-7 Event Handlers window controls ................................................................................ 83

•x Tables
1 Introduction

The Visual T&D family of products is specially designed to integrate a large variety of data
sources and provide you with a unified view of all the devices in a power substation.
With Visual T&D Diagram Editor, you can easily:
 Create basic shapes that represent various devices.
 Use shapes to create diagrams that represent the devices in the substation and how they are
interconnected.
 Associate data points with shape display properties and create animated diagrams that
represent the current state of a process.
 Create libraries of standard shapes and diagram pages that speed up the substation
configuration process.
 Associate shapes with Microsoft ® Visual Basic ® for Applications (VBA) scripts and
implement sophisticated control functions.
Visual T&D Diagram Editor is the companion product to Visual T&D Explorer and is part of
Cooper Power Systems’ Yukon family of products.

1.1 Getting Assistance


If you have any question regarding the performance, application or testing of any component of
this Cooper Power Systems product, do not hesitate to contact us. Our staff will be pleased to
assist you.
Technical Support
Eaton’s Cooper Power Systems
Energy Automation Solutions

Email: eas-support@eaton.com
Phone: +1.763.595.7775
Toll Free: +1.800.815.2258

Business hours are from 8 a.m. and 5 p.m. CST, Monday to Friday.

1.2 Related Documentation


The following Cooper Power Systems documents contain additional information on other product
components and the various shape libraries that are provided with Diagram Editor:

Visual T&D Diagram Editor User Guide •1


 Visual T&D Installation Guide, MN914009EN.
This document contains all the information required to install, configure and perform the
maintenance of a Visual T&D server.
 Visual T&D Explorer User Manual, MN914001EN.
This document presents the Visual T&D Explorer, an application providing immediate access
to all Visual T&D data points in real time, in a variety of formats, with minimum
configuration effort. It also explains how to configure these data points and the various real-
time and historical views, but also how to set up alarms and events based on these data points'
values.
 Visual T&D Diagram Editor Developer’s Reference, MN914003EN.
This document provides a complete reference manual for programming Visual T&D Diagram
Editor in Visual Basic.
 Visual T&D Basic Shapes Libraries Reference Manual, MN914004EN.
This document presents the different shapes that are available in the Library Manager library,
along with additional implementation and usage details.
 Visual T&D Substation Shapes Libraries Reference Manual, MN914005EN.
This document presents the different shapes, more specific to substations, which are available
in the Library Manager libraries.

1.3 Changing Visual T&D Display Language


You can change the display language of Visual T&D applications through Visual T&D Explorer
and Diagram Editor.

To change the display language:


 From the Tools menu, click Switch language, and then click the preferred language (French
or English).

Running Visual T&D Explorer and Diagram Editor instances will be closed, and re-opened in
the selected language.

•2 Chapter 1: Introduction
2 The Basics

Visual T&D Diagram Editor is a complete drawing program that provides all the tools and
functions required to create high-quality interactive diagrams. If you already own a Windows-
based drawing program, you will immediately feel at ease with Diagram Editor.
In this chapter, you will learn how to use the drawing tools to create shapes that represent the
various components or devices in your diagram.
In the subsequent chapters, you will get acquainted with the more advanced aspects of the program
and learn how to animate the shapes in the drawing according to the values of the data points
provided by the Visual T&D server.

2.1 Operation Modes


Diagram Editor provides two modes of operation.
 Design mode.
While you design your diagram, you use the drawing tools and command menus to create
your diagrams.

Unless it is specified otherwise, the instructions and procedures described in this document
apply to the Design mode.
 Animation mode.
When the diagram is animated, the program connects to the Visual T&D server and animates
the diagrams according to the values of the data points and the effects you have programmed.
When Diagram Editor is started via Visual T&D Explorer, it automatically enters the Animation
mode.
When Diagram Editor is started via Windows’ start menu, the user is prompted to enter its Visual
T&D account credentials to connect to the server. If the user provides this information and
connects to a server, Diagram Editor enters the Animation mode; otherwise, it enters the Design
mode.

2.1.1 Switching Between Operation Modes


You can easily switch between both modes of operation.

To switch between the Design mode and the Animation mode:


 Click the Animation menu.
 If the Run command is selected, Diagram Editor is in the Animation mode.
 To enter the Design mode, click Run.

Visual T&D Diagram Editor User Guide •3


 If there is no checkmark beside the Run command, Diagram Editor is in the Design mode.
 To enter the Animation mode, click Run.

2.2 Creating a Diagram


To create a diagram, you use drawing tools to place various shapes and text labels on a drawing
surface. Diagram Editor provides you with an empty drawing surface. You can select the size of
the drawing surface and specify a background color. You can also overlay the drawing surface
with a grid to help you align shapes.
Your diagram can contain one or more pages. Each page itself is a diagram that will either be
displayed in a separate window or occupy the full screen.
To learn how to work with multiple pages, see “Working with Pages”, page 66.

2.2.1 Setting up the Current Page Properties


Each page has its own set of properties, including width, height, and background color.

To set up the current page properties:


 From the View menu, choose Page Properties.

The Display tab contains the following properties:

Object Description
Name Specifies the name of the page

Width Sets the width of the page.

Height Sets the height of the page.

Zoom when run Changes the default zoom setting for the page when the diagram is run. You can
choose a pre-defined setting or enter a percentage in the box.

Background color Selects the background color.

Table 2-1 Page properties

 Adjust the properties as required, and then click OK to save them.

•4 Chapter 2: The Basics


Note: The Action tab is explained more in details in the “Adding a Page or Changing
Properties of an Existing Page” section, page 67.

2.2.2 Setting up the Current Page Grid Properties


The page grid also has its own set of properties.

To set up the current page grid properties:


 From the View menu, choose Grid.

The following table describes the properties that can be specified:

Object Description
Show grid Activates the display of the grid.

Snap to grid Activates snapping so that shape vertices are automatically pulled towards the
diagram grid points.

Angle snap Activates rotation snapping so that shapes can be rotated in fixed increments
only.

Grid color Selects the color used to display the grid.

Grid spacing Sets the horizontal and vertical grid spacing using pixels.

Table 2-2 Page grid properties

 Adjust the properties as required, and then click OK to save them.

Visual T&D Diagram Editor User Guide •5


2.2.3 Adding Basic Shapes to Your Diagram

Figure 2-1 Basic shapes in Visual T&D Diagram Editor

Note: You can set the default shape properties by choosing the Default Properties
command from the Shape menu.

To add a shape to your diagram, you simply use the mouse to select a tool from the Drawing
toolbar and then draw the required shape.

2.2.3.1 The Drawing Toolbar


The Drawing toolbar provides a set of tools that you can use to add new shapes to the drawing or
modify existing shapes. The shape of the mouse pointer changes according to the tool you select.

Tool Description
Pointer The Pointer tool moves or selects shapes and shape vertices.

Selection The Selection tool selects shapes enclosed within a rectangular area.

Edit Vertices The Edit Vertices tool moves individual points in a polygon or polycurve.

Properties The Properties button displays the Shape Properties window for the selected
shape.

Line The Line tool draws a line between two mouse positions.

Polygon The Polygon tool draws a closed polygon defined by the points clicked with the
mouse.

•6 Chapter 2: The Basics


Tool Description
Rectangle The Rectangle tool draws a closed rectangle between two mouse positions.

Polycurve The Polycurve tool draws a curved line passing through the points clicked with
the mouse.

Closed Curve The Closed Curve tool draws a closed shape passing through the points clicked
with the mouse.

Ellipse The Ellipse tool draws a circle or ellipse between two mouse positions.

Text The Text tool inserts a text label in the drawing.

Image The Image tool inserts an image file in the drawing. Supported formats are:
bitmaps (.BMP), icons (.ICO), Graphics Interchange Format (.GIF) and JPEG.

Connection Point The Connection Point tool inserts a connection point object that is used to
anchor a link between two shapes in the drawing. The connection point must be
grouped with an object.

Link The Link tool draws a line between two connection points. The line is anchored
to the objects and is redrawn if the objects are moved.

Orthogonal Link The Orthogonal Link tool draws a line between two connection points. The line
is composed of horizontal and vertical segments only; it is anchored to the objects
and is redrawn if the objects are moved.

Table 2-3 Drawing tools

Details specific to each shape type are presented in the following sections.

2.2.3.2 Adding a Line to Your Drawing


The Line tool draws a line between two mouse positions.

To add a line:
 Select the Line tool from the Drawing toolbar.
 Press the left mouse button at the starting position of the line.

Tip: Press the SHIFT key before pressing the mouse button to limit the mouse
movement to either the horizontal or vertical direction.

 Drag the mouse to the end position of the line.

2.2.3.3 Adding a Polygon to Your Drawing


The Polygon tool draws a closed polygon defined by the points clicked with the mouse.

To add a polygon:
 Select the Polygon tool from the Drawing toolbar.
 Click the left mouse button at the successive vertex positions of the polygon.
 Double-click the left mouse button to stop entering vertex points.

Visual T&D Diagram Editor User Guide •7


2.2.3.4 Adding a Rectangle to Your Drawing
The Rectangle tool draws a closed rectangle between two mouse positions.

To add a rectangle:
 Select the Rectangle tool from the Drawing toolbar.
 Press the left mouse button at one of the corner positions.

Tip: Press the SHIFT key before pressing the mouse button to draw a square.

 Drag the mouse to the intended position of the diagonally opposite corner.

2.2.3.5 Adding a Polycurve to Your Drawing


The Polycurve tool draws a curved line passing through the points clicked with the mouse.

To add a polycurve:
 Select the Polycurve tool from the Drawing toolbar.
 Click the left mouse button at the positions of the successive points of the polycurve.
 Double-click the mouse to enter the last point.

Note: You must enter at least four points to define a polycurve.

2.2.3.6 Adding a Closed Curve to Your Drawing


The Closed Curve tool draws a closed shape passing through the points clicked with the mouse.

To add a closed curved:


 Select the Closed Curve tool from the Drawing toolbar.
 Click the left mouse button at the position of the successive points of the curve shape.
 Double-click the mouse to enter the last point.

Note: You must enter at least four points to define a closed curve.

2.2.3.7 Adding an Ellipse or a Circle to Your Drawing


The Ellipse tool draws a circle or ellipse between two mouse positions.

To add an ellipse or a circle:


 Select the Ellipse tool from the Drawing toolbar.
 Press the left mouse button.

Note: Press the SHIFT key before pressing the mouse button to define a circle.

 Drag the mouse.


 The program draws an ellipse within the boundaries of the mouse movement.

•8 Chapter 2: The Basics


2.2.3.8 Adding a Text Label to Your Drawing
The Text tool inserts a text label in the drawing.

To add a text label:


 Select the Text tool from the Drawing toolbar.
 Press the left mouse button at one of the corner positions.

Tip: Press the SHIFT key before pressing the mouse button, to draw a square text
label.

 Drag the mouse to the intended position of the diagonally opposite corner.

Note: Use the Text tab of the Properties command of the Shape menu, to set the text
display properties.

2.2.3.9 Adding an Image to Your Drawing


The Image tool inserts an image file in the drawing. Supported formats are: bitmaps (.BMP),
icons (.ICO), Graphics Interchange Format (.GIF) and JPEG.

To add an image:
 Click on the Image tool on the Drawing toolbar.
 In the Open window, browse and select the image file, and then click Open.

The Image tool icon is added to the mouse pointer, to indicate that an image is pending
insertion.

Note: If you clicked on the page prior to clicking the Image tool, the image will be
inserted at this location, as soon as you click Open.

 Click the left mouse button to add the image to the drawing.

Tip: Use the General tab of the Properties command of the Shape menu to set the
background transparency color.

2.2.4 Working with Overlapping Shapes


Diagram Editor remembers the order in which you add shapes to the drawing. You can consider
that the shapes are stacked and that the most recent shape added is at the top of the stack. The
shapes at the bottom of the stack are drawn first and may be hidden by shapes at the top.
You manage the order of shapes in the stack by using commands from the Shape menu or buttons
on the Structure toolbar.

To move a shape up in the stacking order:


 Use the Pointer or Selection tool to select the shape.

Visual T&D Diagram Editor User Guide •9


 Choose Bring to Front from the Order command in the Shape menu or on the Structure
toolbar.

The object will be brought up to the top of the stack, in front of all others.
 Choose Bring Forward from the Order command in the Shape menu or on the Structure
toolbar.

The object will be brought up one level in the stack.

To move a shape down in the stacking order:


 Use the Pointer or Selection tool to select the shape.
 Choose Send to Back from the Order command in the Shape menu or on the Structure
toolbar.

The object will be sent to the bottom of the stack, behind all others.
 Choose Send Backward from the Order command in the Shape menu or on the Structure
toolbar.

The object will be brought down one level in the stack.

2.2.5 Selecting Shapes


The Drawing toolbar provides you with two different tools that you can use to select shapes in the
drawing: the Pointer tool and the Selection tool.
The Selection tool provides you with a means to select shapes that are difficult to select using the
Pointer tool. With the Selection tool, you can click on a shape without selecting it. Only the
shapes that are within the area where you drag the mouse will be selected.
Most of the commands in Diagram Editor apply to the shapes selected in the drawing. Selected
shapes are displayed differently, so that you can easily locate and modify them.

To select a shape using the Pointer tool:


 Select the Pointer tool on the toolbar.
 Click the tool in the drawing to select the topmost shape at the mouse position.
OR
 Click the Pointer tool in an empty area of the drawing and drag the mouse to select all the
shapes within the area.

To select a shape using the Selection tool:


 Select the Selection tool on the toolbar.
 Click the tool in the drawing, and drag the mouse to select all shapes within the area.

To add a shape to the selection (regardless of the tool):


 Press the SHIFT key or the CTRL key, and click on a shape to add it to those already
selected.
OR
 Press the CTRL key, and drag the mouse in the drawing to add all the shapes in the area to
those already selected.

• 10 Chapter 2: The Basics


To remove a shape from the selection:
 Press the SHIFT key and click on a selected shape to unselect it.

2.2.6 Moving Shapes


You can use either the mouse or the keyboard to move shapes in the drawing.

To move shapes using the mouse:


 Use the Pointer or Selection tool to select the shapes you want to move.
 Click on the selected shapes and drag them to the desired location.

To move shapes using the keyboard:


 Use the Pointer or Selection tool to select the shape you want to move.
 Use the keyboard arrow keys to "nudge" the selected shape in any direction.

When you use nudging commands, movement is not confined to the grid.

Note: Nudging commands are also available through the Position command in the
Shape menu, and via the Nudge toolbar.

2.2.7 Modifying Shapes


You can easily modify any shape by moving the end points, the vertices or the bounding rectangle.
A simple shape, such as a line, is composed of two end points and a single segment. More
complex shapes, such as polygons, are composed of vertices and segments. Rectangles and
ellipses are defined by a bounding rectangle.

2.2.7.1 Using the Mouse to Change the Size of a Shape


When you select a shape, the program displays the shape's selection handles. To modify the size of
the shape, simply move these handles.

To change the size of a shape using the mouse:


 Use the Pointer or Selection tool to select the shape you want to resize.
 Click on a selection handle and use the mouse to drag the shape to the new size.

Tip: The shape of the mouse pointer changes to indicate the direction in which you
can move the selection handle.

2.2.7.2 Adjusting the Size of a Shape


If you find it difficult to adjust the size of a shape using the mouse, you can use commands from
the Sizing toolbar to increase or decrease the size of a shape one pixel at a time.

Visual T&D Diagram Editor User Guide • 11


To adjust the size of a shape:
 Use the Pointer or Selection tool to select the shape you want to modify.
 Select Increase Width or Decrease Width from the Sizing toolbar to enlarge or reduce the
width of the shape by one pixel.
 Select Increase Height or Decrease Height from the Sizing toolbar to enlarge or reduce the
height of the shape by one pixel.

Note: Sizing commands are also available from the Shape menu.

When you use sizing commands, movement is not confined to the grid.

Note: You can also use the keyboard to resize a shape. To do so, select the shape,
then hold down the CTRL key and a keyboard arrow key at the same time. The
top left-hand corner of the shape will remain in the same position, while the rest
of the shape will move in the direction of the arrow until you release the two keys.

2.2.7.3 Moving the Vertices of a Complex Shape


With the Edit Vertices tool, you can modify the vertices and segments of a complex shape such as
a polygon, polycurve or closed curve.

To move the vertices of a complex shape:


 Use the Pointer or Selection tool to select the shape you want to modify.
 Select the Edit Vertices tool from the Drawing toolbar.
 Click on one of the vertices of the shape and drag it to the new position.

Tip: The shape of the mouse pointer changes to indicate a vertex that you can drag.

2.2.8 Rotating Shapes


Diagram Editor provides tools that you can use to change the orientation of a shape, via the
Rotation toolbar:

 The Free Rotate tool rotates a shape at any angle.


 The Rotate Left and Rotate Right commands change the orientation of the shape in fixed
90° increments.
 The Flip Vertical and Flip Horizontal commands flip the shape around either the vertical or
the horizontal geometric axis, to provide a mirror image.

Note: A shape rotates around its center of rotation, which is located at the center of the
shape’s selection rectangle.

• 12 Chapter 2: The Basics


To rotate a shape at any angle:
 Use the Pointer or Selection tool to select the shape.
 Select the Free Rotate command on the Rotation toolbar or in the Shape menu.
 Click in the shape and drag the mouse until the shape is at the required angle.

The shape will rotate in 15-degree increments, if you have selected Angle snap in the Grid
Properties window.

Note: The shape of the mouse pointer changes to indicate positions where the rotation
tool can be used to grab and rotate the shape.

To rotate a shape in 90° increments:


 Use the Pointer or Selection tool to select the shape.
 Select the Rotate Right command on the Rotation toolbar or in the Shape menu to rotate the
shape 90° to the right.
OR
 Select the Rotate Left command on the Rotation toolbar or in the Shape menu to rotate the
shape 90° to the left.

To flip a shape:
 Use the Pointer or Selection tool to select the shape.
 Select the Flip Horizontal command on the Rotation toolbar or in the Shape menu to flip the
shape around the horizontal axis.
OR
 Select the Flip Vertical command on the Rotation toolbar or in the Shape menu to flip the
shape around the vertical axis.

2.3 Organizing Shapes in the Drawing


Typically, your diagrams will include a large number of shapes. Diagram Editor provides you with
commands to assist you in aligning, sizing or spacing the shapes in your drawing.

2.3.1 Selecting the Shapes to Organize


Before using shape organization commands, you must first select the shapes to organize. With the
sizing and alignment commands, one of these shapes will be used as a reference to which the
others will be matched.

To select the shapes to organize:


 Select the shapes you want to organize by clicking on the shapes with the Pointer tool while
holding down the SHIFT key. The last shape you select will be used as the reference.

OR

Use the Pointer or Selection tool to select all the shapes in an area of the drawing. The
reference shape will be the topmost shape in the stacking order.

Visual T&D Diagram Editor User Guide • 13


Tip: When you select multiple shapes, you can identify the reference shape by the
selection handles, which are gray instead of white.

2.3.2 Aligning Shapes


The Align commands available from the Tools menu move the shapes you have selected so that
they are all aligned with the reference shape.

To align selected shapes:


 Select the shapes to align, saving the reference shape for last.
 Select the Align Left, Align Center, and Align Right commands in the Tools menu or on the
Alignment toolbar to align the shapes vertically.
 Select the Align Top, Align Middle, and Align Bottom commands in the Tools menu or on
the Alignment toolbar to align the shapes horizontally.

2.3.3 Making Shapes the Same Size


The Layout toolbar contains commands that can make all selected shapes the same size as the
selected reference shape.

To make selected shapes the same size:


 Select the shapes whose size must change, saving the reference shape for last.
 Select the Make Same Width command in the Tools menu or on the Layout toolbar to
change the size of the shapes so that they match the width of the reference shape. The left side
of the shapes remains in the same position.
 Select the Make Same Height command in the Tools menu or on the Layout toolbar to
change the size of the shapes so that they match the height of the reference shape. The tops of
the shapes remain in the same position.
 Select the Make Same Size command in the Tools menu or on the Layout toolbar to change
the size of the shapes so that they match the size of the reference shape. The top left corners
of the shapes remain in the same position.

2.3.4 Distributing Shapes Evenly


The Layout toolbar also contains commands that can distribute shapes evenly, either on a
horizontal or vertical axis.

To distribute selected shapes evenly:


 Select the shapes to distribute, saving the reference shape for last.

• 14 Chapter 2: The Basics


 Select the Distribute Horizontally command in the Tools menu or on the Layout toolbar to
change the position of the shapes so that they are equally distributed between the leftmost and
rightmost selected shapes.
 Select the Distribute Vertically command in the Tools menu or on the Layout toolbar to
change the position of the shapes so that they are equally distributed between the topmost and
bottommost selected shapes.

2.4 Grouping Shapes


Your diagrams will most probably contain complex pieces of equipment, such as transformers and
alternators. While you can easily draw a transformer with a number of curved lines, it will take
you a long time to create your drawing if you need to represent a large number of similarly
complex shapes.
The Group command creates a new complex shape by grouping simple shapes together. Once
shapes are grouped, you manage the group as if it were a simple shape and you can apply the usual
commands to move, copy, rotate or align shapes.

Figure 2-2 Complex shapes created by grouping shapes together

Shapes are grouped together using the Structure toolbar.

To group shapes together:


 Select the shapes to group.
 Select Group on the Structure toolbar, or from the Grouping command on the Shape menu.

Visual T&D Diagram Editor User Guide • 15


Note: When you add shapes to an existing group, you create a new group containing
the original group and the new shapes.

To ungroup shapes:
 Select the shape to ungroup.
 Select Ungroup on the Structure toolbar, or from the Grouping command on the Shape
menu.

Note: When you ungroup a shape that contains groups, only the most recent grouping
is unmade, and the previous groups remain.

2.5 Connecting Shapes


Most diagrams are composed of shapes that are connected together by lines to indicate some kind
of relationship. When you use the Line tool to connect two shapes, Diagram Editor has no
knowledge of the relationship between the shapes. If you move a shape, the line is left dangling
and you have to repair the drawing. As a result, the Line tool should not be used for the matter of
connecting shapes together.
The Link tool draws a line between connection points of two shapes. When you connect two
shapes using the Link tool, the shapes remain connected even when they are moved.

2.5.1 Adding Connection Points


Before you can use the Link tool, you must first add connection points to your shapes using the
Connection Point tool, and then group each connection point to its shape.

To add a connection point to a shape:


 Select the Connection Point tool from the Drawing toolbar.
 Add the connection point at the required position in the shape.
 Use the Pointer or Selection tool to select both the shape and the connection point.
 Select Group on the Structure toolbar, or from the Grouping command in the Shape menu.

2.5.2 Linking the Shapes


The Link tool on the Drawing toolbar draws a straight line between two connection points. The
Orthogonal Link tool also draws a line between two connection points; however the line is not
diagonal but consists rather of horizontal and vertical segments.

• 16 Chapter 2: The Basics


Figure 2-3 Difference between the Link and Orthogonal Link tools

To link two shapes together:


 Select the Link tool on the Drawing toolbar.

OR

Select the Orthogonal Link tool on the Drawing toolbar.


 Click on the connection point of the first shape.
 Click on the connection point of the second shape.

Tip: The shape of the mouse pointer changes when it passes over a connection point.

2.5.3 Adjusting an Orthogonal Link


The Link tool draws a straight line between two connection points: the path of this line cannot be
modified.
The Orthogonal Link tool draws a line composed of horizontal and vertical segments. The path
of the line can be adjusted by moving the vertices between the segments.

To adjust an orthogonal link:


 Use the Pointer tool to select the link between the two shapes.
 Use the mouse to drag the selection handles to the required position.

Tip: The shape of the mouse pointer changes to indicate when you can drag a
selection handle.

2.6 Setting up Shape Properties


You can specify how the shapes should be drawn by setting the properties of the shapes. Not all
Properties are grouped by types; only types that are applicable can be specified, for a given shape.
The following table summarizes the shape properties available for each type of shape/tool.

Shape/Tool Line Fill Text Font Animation


Line √ √

Visual T&D Diagram Editor User Guide • 17


Shape/Tool Line Fill Text Font Animation
Polygon √ √ √

Rectangle √ √ √

Polycurve √ √

Closed Curve √ √ √

Ellipse √ √ √

Text √ √ √ √ √

Image √

Connection Point √

Link √ √

Orthogonal Link √ √

Table 2-4 Property types available for each shape/tool

To set up the properties of a shape:


 Select the shape.
 From the Shape menu, choose Properties.

In the Shape Properties window, adjust the properties as required. The content of each tab is
presented in details in the following sections.
 Once finished, click OK to apply the change and close the window.

2.6.1 General Properties


The General tab of the Shape Properties window allows the specification of general settings that
apply to all types of shapes.

• 18 Chapter 2: The Basics


Property Description
Name Sets the name of the shape.
By default, Diagram Editor names the shape according to its type; use this field to
give it a more significant name, such as the name of the device on your site that
the shape represents.

Type Indicates the basic type of the shape. This setting is read-only and is displayed for
information purpose.

Table 2-5 General properties of a shape

Note: Shapes created with the Image tool contain additional fields described under
"Image Properties", page 19.

2.6.2 Image Properties


The General tab of the Shape Properties window contains additional fields when the shape is an
image inserted in the diagram using the Image tool.

Object Description
Transparent Indicates whether the image background is to be transparent or opaque. If you
select transparent, you must select the transparency color.

Transparency color Indicates the color that is considered transparent. All pixels with this color will be
removed from the image and the background will show through.

Table 2-6 Additional general properties of an image shape

2.6.3 Line Drawing Properties


The Line tab of the Shape Properties window allows the specification of line drawing properties
for all shapes that are line-based or that have a contour.

Visual T&D Diagram Editor User Guide • 19


Object Description
Color Selects the line drawing color.

Transparent Specifies that the line is to be invisible. Use this attribute to remove the contour
of filled shapes. When you select this option, all other line properties are
disabled.

Style Sets the line drawing style.

Thickness Sets the line drawing thickness. This field is available for solid lines only.

Table 2-7 Line drawing properties of a shape

2.6.4 Color Fill Properties


The Fill tab of the Shape Properties window allows the specification of properties that are
specific to closed shapes.

Object Description
Foreground color Sets the drawing color of a closed shape. If the Hatch setting is set to No Hatch,
the shape will be filled with a solid color. If a hatch pattern is selected, this color
will be used to draw the lines of the hatching pattern.

• 20 Chapter 2: The Basics


Object Description
Transparent fill Indicates that the shape is transparent. When selected, all other fill properties are
deactivated and ignored.

Background color If a hatch pattern is selected, this color will be used to fill the areas between the
lines of the hatching pattern.

Transparent If a hatch pattern is selected, the areas between the lines of the hatching pattern
background will be transparent.

Hatch Selects the hatch pattern to be applied to the shape.

Table 2-8 Fill properties of a shape

2.6.5 Text Properties


The Text tab of the Shape Properties window allows the specification of text properties of shapes
created with the Text tool. Font properties can be found in the Font tab.

Box Description
Text Text label displayed by the shape.

Multiple lines Indicates that the text can be displayed on multiple lines. If not selected, the text
will be truncated to the width of the shape.

Automatically If selected, the shape will be automatically enlarged if the text does not fit in the
enlarge the shape to shape.
display text

Word wrap Breaks the text over multiple lines, on word boundaries. Only available if
Multiple lines is selected.

Horizontal Specifies whether the text should be left-aligned, centered or right-aligned.


alignment

Vertical alignment Specifies whether the text should be displayed at the top, center or bottom of the
shape.

Table 2-9 Text properties of a shape

Visual T&D Diagram Editor User Guide • 21


2.6.6 Font Properties
The Font tab of the Shape Properties window allows the specification of font properties for
shapes created with the Text tool.

Object Description
Font Selects the name of the font to be used to display the text shape.

Font style Selects the font style: Regular, Bold, Italics, or Bold Italics.

Size Selects the font size.

Underline Indicates that the text is to be underlined.

Strikethrough Indicates that a line is to be drawn through the text.

Text color Selects the text display color.

Table 2-10 Font properties of a shape

2.6.7 Changing Properties of Grouped Shapes


When you group shapes together, Diagram Editor creates a new complex shape containing the
grouped shapes. The Shape Properties window can then be used to change the properties of every
shape in the group.

To change properties of a group of shapes:


 Use the Pointer or Selection tool to select the grouped shape.
 Choose the Properties command from the Shape menu.

The Shape Properties window displays the tabs that apply to the grouped shapes.
 Change any property and the modification will be applied to all the shapes in the group.

Note: The Shape Properties window will not display the correct property values if the
shapes in a group have different values for the same properties. However, if you
select a new value, this new value will be applied to all shapes.

• 22 Chapter 2: The Basics


 Click OK to apply the changes.

2.6.8 Changing the Properties of Individual Shapes of a Group


You may need to change the properties of individual shapes of a group. While it is always possible
to ungroup the shapes in order to do so, Diagram Editor provides a much simpler method. The
Grouping window displays the hierarchy of groups and allows you to access the properties of
individual shapes.

To change the properties of individual shapes of a group:


 Use the Pointer or Selection tool to select the grouped shape.
 On the Shape menu, click Grouping, and then click Show.

The Grouping window displays a hierarchical view of all the shapes in the group. If a group
contains other groups, they are displayed as branches in the tree. Each shape is identified by
the value entered as the Name property in the General tab of the Shape Properties window.

 Select the shape or the group (branch) of shapes to be modified.


 Click Properties to display the Shape Properties window for the selected item.

2.7 Saving and Loading Diagrams


The diagrams you create and edit with Diagram Editor are stored as files on your Windows
workstation. As with all programs, you manage your files using the commands of the File menu.
Once you have completed the diagram to your satisfaction, you can also save it on the computer
on which the Visual T&D server is running. A diagram on the server is available to all the
computers connected to the server.
The Diagram Editor program automatically loads and displays the diagram stored on the selected
server. You can also retrieve the diagram from the server and save it as a file on your own
computer.

2.7.1 Saving a Diagram to a File


Before the diagram is ready to be uploaded to the server, it can be saved to a file without being
pushed to the server.

Visual T&D Diagram Editor User Guide • 23


To save the current diagram to a file:
 From the File menu, choose Save or Save As.
 Enter the name of the diagram, and select the folder in which you want to save it.

Note: By default, all diagram files are stored in the Diagrams folder, within the Client
folder.

2.7.2 Saving a Diagram on the Server


You can save a diagram file on the Visual T&D server so that Diagram Editor will load it
automatically when it starts.

Note: Only users who have been assigned editing privileges can save a diagram file on
the Visual T&D server.

To save a diagram on the server:


 From the Server menu, choose Save to Server.

The diagram file will be saved on the server and made available to all computers connected to
the server.

Warning: Saving the current diagram to the server overwrites the diagram associated
with the current site configuration.

2.7.3 Opening a Diagram from a File


If a diagram is currently being edited and was saved to a file, use the following procedure to
reopen it.

To open a diagram file:


 From the File menu, choose Open.
 Select the folder and the diagram you want to open.

Note: Diagram Editor can only edit one diagram file at a time. If there already is an
open diagram, you will be prompted to save any changes.

2.7.4 Opening the Diagram Stored on the Server


When editing a diagram that is stored on the server, it must first be opened from the server.

To open the diagram stored in the Visual T&D server:


 From the Server menu, choose Open Site Diagram.

Note: Diagram Editor can only edit one diagram file at a time. If there already is an
open diagram, you will be prompted to save pending changes, if any.

• 24 Chapter 2: The Basics


3 Working with Data

The most important feature of Visual T&D Diagram Editor is its ability to create diagrams that
represent the operation of a process in real time.
In the previous chapters, you learned how to use Diagram Editor tools to create shapes and
diagrams. In the following sections, you will learn how to connect to the Visual T&D server,
access data points and create animated diagrams that change according to the values of these
points.

3.1 Variables and Data Points


The Visual T&D server manages the data acquisition and control hardware, and provides a real-
time image of the monitored process. The server manages a configuration database that identifies
all of the points defined to monitor and control the process. Based on the configuration data, the
server scans the available data points and provides up-to-date values to the Visual T&D Explorer
and Visual T&D Diagram Editor programs.
For each data point, the server provides the following information that can be used to determine
the display of shapes in your diagrams:
 The tag name of the data point, which you will use to access the value.
 The value of the data point, which you can display or use to control shape properties.
 The quality of the data, which indicates whether the data is valid.
 The tags, which you use to store status information for each data point. For each data point,
you can store 16 tags that contain a TRUE or FALSE value.
 Alarm conditions on the data point.
From Diagram Editor, you can connect to the server and retrieve the list of all available data
points. In the program, we refer to these data points as variables. When you design your diagrams,
you will use the variables in expressions that control the way shapes are displayed.

3.2 Animation Effects


All the shapes you create in Visual T&D Diagram Editor have static properties that indicate how
they are displayed in the diagram, their color, the thickness of the lines and their text attributes. A
shape can also have dynamic properties that become active when Diagram Editor enters the
Animation mode.
For instance, you can use a text shape to display either a static label or the results of the evaluation
of an expression. The expression can refer to the value of a variable associated with a data point.
The display of a variable is a very basic animation effect. You can also design more complex

Visual T&D Diagram Editor User Guide • 25


effects, whereby a shape flashes or changes colors if a variable exceeds a threshold. Shapes can
appear, disappear or even be resized according to the results of expressions.
In the following sections, you will learn how to create expressions that refer to variables and how
to use these expressions to create various animation effects.

3.2.1 Animation Basics: The Switch Example


Before going into all the details of the various types of animation, we will illustrate how to set up
a very simple animation effect.
Many electrical diagrams include shapes that represent open or closed switches. In the example
that follows, we will create a two-position switch that is displayed in green when open and red
when closed.

In a typical process control system, one or two data points would be used to indicate the state of
the switch. In our example, we will assume that there is a single data point called SW_OPEN that
is TRUE when the switch is open.

3.2.1.1 Drawing the Shapes for the Open Switch


A complex shape is needed to depict the switch in the open position.

To draw the shape for the open switch:


 Use the Ellipse tool to draw the connection pads of the switch.
 Use the Line tool to draw the line in the open position.
 Use the Properties command in the Shape menu to display the shape properties.
 Use the Line and Fill tabs of the Shape Properties window to set the line thickness and to set
the color to green.

3.2.1.2 Drawing the Shapes for the Closed Switch


A complex shape is also required to depict the switch in the closed position. To save time, you
will modify a copy of the open switch.

To draw the closed switch shape:


 Use the Pointer or Selection tool to select the components of the open switch.
 Choose Copy from the Edit menu.
 Click in the diagram at the approximate position where you want to copy the shape.
 Choose Paste from the Edit menu.
 Select the Pointer tool, and move the end point of the line to create the closed shape.
 Use the Line and Fill tabs of the Shape Properties window to set the color to red.

• 26 Chapter 3: Working with Data


3.2.1.3 Grouping the Components
Next step is to group the separate switch components together, before grouping both switch
depictions (open and closed) together as a single complex shape.

To group shapes:
 Use the Pointer or Selection tool to select all the components of the open switch.
 From the Shape menu, choose Grouping, and then choose Group.
 Use the Properties command from the Shape menu and enter a significant name, such as
Open, for the grouped shape.
 Repeat the above steps for the components of the closed shape and name the group Closed.
 Use the Pointer tool to move both shapes until they overlap exactly.
 Use the Pointer or Selection tool to select both the open and closed shapes.
 From the Shape menu, choose Grouping, and then choose Group.
 Use the Properties command in the Shape menu and enter a significant name, such as
Switch, for the grouped shape.

You should then have a group (Switch) containing two other groups (Open and Closed).

To display the shape hierarchy:


 From the Shape menu, choose Grouping, and then choose Show.

3.2.1.4 Defining the Animation Effects


To animate the shape, you will hide the Closed switch group when the SW_OPEN variable is
TRUE, and you will hide the Open switch group when the SW_OPEN variable is FALSE.

To define the animation:


 Use the Pointer or Selection tool to select the shape.
 From the Shape menu, choose Properties.
 In the Shape Properties window, select the Animation tab.

Visual T&D Diagram Editor User Guide • 27


 Select the Closed group.
 Click Add and select the Hide animation.
 Enter the following string in the Expression field in order to hide the shape when the data
point indicates that the switch is open:

SW_OPEN
 In the Description field, enter a significant name for the animation, such as:

Hide if open
 Click OK.
 Select the Open group.
 Click Add and select the Hide animation.
 Enter the following string in the Expression field in order to hide the shape when the data
point indicates that the switch is closed:

NOT(SW_OPEN)
 In the Description field, enter a significant name for the animation, such as:

Hide if closed
 Click OK to close Animation window, and OK again to close the Shape Properties
window.
 If you want to save the drawing, choose Save from the File menu.

3.2.1.5 Running the Animation


You have now defined all the steps of your animation and are ready to run it.

To switch to Animation mode:


 From the Animation menu, choose Run.

Note: Since data point name SW_OPEN does not exist on the Visual T&D server, the
Unresolved Aliases and Nonexistent Variables window will open. Click Ignore
to continue.

• 28 Chapter 3: Working with Data


To stop the animation and return to Design mode:
 From the Animation menu, choose Run to clear the checkmark besides this menu command.

This will stop the animation.


In the following sections, we will describe various animation effects that you can use to display
values or modify the display of your shapes in the diagram.

3.2.2 Animation Properties


The Animation tab of the Shape Properties window allows the definition of animation effects for
the selected shape. To learn how to access the Shape Properties window, see “Setting up Shape
Properties”, page 17.

Object Description
Grouping Displays the name of the selected shape or the hierarchical view of all the shapes
in the group. If a group contains other groups, they are displayed as branches in
the tree.
The operations you perform in the window apply to the selected shape or group
of shapes.

Animation order Displays the list of animation effects selected for the current shape or group of
shapes.

Add Displays the list of animation effects available for the selected shape. The
program displays a window in which you will specify the animation parameters.

Edit Allows the editing of the selected animation effects.

Move Up Moves the selected effect upwards in the list.

Move Down Moves the selected effect downwards in the list.

Delete Removes the selected effect from the list.

Table 3-1 Animation properties of a shape

Visual T&D Diagram Editor User Guide • 29


3.2.3 Working with Animation Expressions
An expression may be as simple as the name of a variable or it may contain complex conditional
calculations. The expression must be properly constructed and contain no syntax errors, or an error
will be reported when you animate the diagram.

3.2.3.1 The Expression Editor


The Expression Editor is a tool that simplifies entering the expressions that are used to control the
animation effects. The Expression box and buttons appear as part of the window that is displayed
when you select a particular type of animation (hide, change colors, flash, etc.), through the
Animation tab of the Shape Properties window.

Control Description
Expression Used to enter and edit the expression to be evaluated. You can enter the
expression directly from the keyboard or use the buttons to insert variable names,
arithmetic or logical operators, etc.

Arithmetic Used to select and enter arithmetic operators in the expression.

Relational Used to select and enter relational operators in the expression.

Logical and Binary Used to select and enter logical and binary operators in the expression.

Functions Used to select and enter functions in the expression.

Constants Used to select and enter logical constants in the expression.

Variables and Used to select and enter variable names and aliases in the expression. The
Aliases variables are the data points configured in the server. Aliases are names that are
used when you create generic shapes. Aliases must be associated with variables
before the diagram can be animated. See “Working with Aliases”, page 58.

Table 3-2 Expression editor controls

Here are some examples of valid expressions:

NOT (SW_OPEN)
QualityOf(MA) = TRUE
NOT (TagOf(Mo_25-4.TS, 9) OR TagOf(Mo_25-4.TS, 10))
The following sections present the various operators and functions that can be entered as part of an
expression.

3.2.3.2 Arithmetic Operators


You can use the following arithmetic operators in expressions:

• 30 Chapter 3: Working with Data


Operator Description
+ Calculates the sum of the left and right operands.

- Calculates the difference between the left and right operands.

* Calculates the product of the left and right operands.

/ Divides the left operand by the right operand.

% Obtains the remainder of the division of the left operand by the right operand.

() Expressions are evaluated according to standard operator precedence. Parentheses


are used to group sub-expressions and control the order in which expressions are
evaluated.
1 + 2 * 3 evaluates to 7
(1 + 2) * 3 evaluates to 9

Table 3-3 Arithmetic operators

3.2.3.3 Relational Operators


You can use the following relational operators in expressions:

Operator Description
< Evaluates to TRUE if the left operand is less than the right operand.

> Evaluates to TRUE if the left operand is greater than the right operand.

<= Evaluates to TRUE if the left operand is less than or equal to the right operand.

>= Evaluates to TRUE if the left operand is greater than or equal to the right
operand.

= Evaluates to TRUE if the left operand is equal to the right operand.

!= Evaluates to TRUE if the left operand is different from the right operand.

Table 3-4 Relational operators

3.2.3.4 Logical and Binary Operators


Logical operators are used to combine the results of logical expressions such as comparisons.
Binary operators are used to manipulate the individual bits of expressions or data points.
You can use the following logical and binary operators in expressions:

Operator Description
Logical AND Evaluates to TRUE if the left and right operands are both TRUE.

Logical OR Evaluates to TRUE if either the left or right operand is TRUE.

Logical NOT Evaluates to TRUE if the value to the right is FALSE.

Binary AND Calculates a bitwise AND between the left and right operands.
For instance, 12 BAND 5 evaluates to 4 (1100 BAND 0101 is 0100).

Visual T&D Diagram Editor User Guide • 31


Operator Description
Binary OR Calculates a bitwise OR between the left and right operands.
For instance, 12 BOR 5 evaluates to 13 (1100 BOR 0101 is 1101).

Binary XOR Calculates a bitwise XOR between the left and right operands.
For instance, 12 BXOR 5 evaluates to 9 (1100 BXOR 0101 is 1001).

Binary NOT Calculates a bitwise NOT of the value to the right.


For instance, BNOT 0 evaluates to -1 (BNOT …0000 is …1111).

Table 3-5 Logical and binary operators

3.2.3.5 Functions
You can use the following built-in functions in expressions:

Function Description
ABS( x ) Calculates the absolute value of x.

POW( x, y ) Calculates the value of x to the power of y.

QualityOf( point name ) Evaluates to TRUE if the value of the specified data point
is valid.

TagOf (point name ) Calculates the integer value of all tag bits for the specified
data point name.

TagOf( point name, x ) Calculates the Boolean value of tag bit x of the specified
data point name.

GetTagTypeCount( point name ) Returns the number of different tag types between all tags
that are currently set for the specified data point.
For example, if three Information tags and one All
control inhibited tag are currently set for a given point,
this function will returns 2.

GetTagCount( point name ) Calculates the total number of tags currently set for the
specified data point name.

GetPriorityTagType( point name ) Returns the type of the highest priority tag for the specified
data point.
Possible values are:
 TAG_TYPE_NONE if no tag exists for the data point;
 TAG_TYPE_INFORMATION for an information tag;
 TAG_TYPE_ALL_CONTROL_INHIBITED for a control
inhibition tag.

TagTypeFromName( type name ) Returns the Index of a tag type, as specified in the Tag
Types settings of a site configuration in Visual T&D
Explorer.

GetTagCountByType( point name, tag Calculate the total number of tags of a given type that are
type index) currently set on a given data point; the tag type is specified
using its Index, as specified in the Tag Types settings of a
site configuration in Visual T&D Explorer.

• 32 Chapter 3: Working with Data


Function Description
GetTagCountByGroup( point name, group Calculate the total number of tags of a given group that are
index ) currently set on a given data point; the group is specified
using its index, which is the Group setting specified for
the tag types of a site configuration in Visual T&D
Explorer.

GetPriorityTagTypeByGroup( point name, Returns the Index of the highest priority tag set on a given
group index ) data point, between all tags of a specified group; the group
is specified using its index, which is the Group setting
specified for the tag types of a site configuration in
Visual T&D Explorer.

IsAlarmAcknowledged( point name, type) Evaluates to TRUE if the alarm of the specified type for
the specified data point has been acknowledged.
Use the ALARM_TYPE_ALL parameter to test for all
alarm conditions.
You can use the ALARM_BINARY_STATE,
ALARM_LEVEL_LOW, ALARM_LEVEL_HIGH and
ALARM_BAD_QUALITY parameters to test for specific
alarm conditions.

IsAlarmActive( point name, type) Evaluates to TRUE if an alarm of the specified type is
currently displayed for the specified data point. If TRUE,
you can use the AlarmStateOf function to determine if the
alarm condition still exists.
Use the ALARM_TYPE_ALL parameter to test for at least
one alarm condition.
You can use the ALARM_BINARY_STATE,
ALARM_LEVEL_LOW, ALARM_LEVEL_HIGH and
ALARM_BAD_QUALITY parameters to test for specific
alarm conditions.

IsAlarmDisabled( point name) Evaluates to TRUE if there is an alarm currently disabled


for the specified data point.

IsAlarmSilent( point name) Evaluates to TRUE if there is an alarm currently set as


silent for the specified data point.

IsAlarmPermanent( point name) Evaluates to TRUE if there is an alarm currently set as


permanent for the specified data point.

AlarmStateOf( point name, type) Evaluates to TRUE if the alarm condition of the specified
type for the specified data point still exists. Evaluates to
FALSE if the alarm condition is returned to normal.
Use the ALARM_TYPE_ALL parameter to test for at least
one alarm condition.
You can use the ALARM_BINARY_STATE,
ALARM_LEVEL_LOW, ALARM_LEVEL_HIGH and
ALARM_BAD_QUALITY parameters to test for specific
alarm conditions.

GetAlarmPriority( point name) Returns the alarm priority level for the specified data point.

Table 3-6 Functions

Visual T&D Diagram Editor User Guide • 33


3.2.3.6 Constants
You can use the following built-in constants in expressions:

Constant Description
TRUE Represents a logical true value. Any value other than 0
is considered true.

FALSE Represents a logical false value. A value of 0 is


considered false.

ALARM_BINARY_STATE Represents an alarm triggered when a binary point


becomes TRUE.

ALARM_LEVEL_LOW Represents an alarm triggered when the value of an


analog data point falls below the lower threshold.

ALARM_LEVEL_HIGH Represents an alarm triggered when the value of an


analog data exceeds the upper threshold.

ALARM_BAD_QUALITY Represents an alarm triggered when the quality of a data


point turns bad.

ALARM_TYPE_ALL Represents all possible alarm conditions.

TAG_TYPE_NONE No tag is defined at the moment.

TAG_TYPE_ALL_CONTROL_INHIBITED Represents a control inhibition tag.

TAG_TYPE_INFORMATION Represents an information tag.

ALARM_PRIORITY_NONE Indicates that a given data point is not configured to


generate alarms.

Table 3-7 Constants

3.2.3.7 Special-Purpose Logical Points


Visual T&D Diagram uses internal logical (system) points to represent the state of internal
information. Just as with physical points, you can declare these logical points in different types of
animation. These points are local to the Visual T&D Diagram HMI.

Logical Point Description


__sys_alarmSoundEnabled Logical point that indicates whether the sound is enabled. Its value
will be TRUE if the sound is enabled, and FALSE if the sound is
disabled.

__sys_alarmSoundTriggered Logical point that indicates whether the sound has been triggered. Its
value will be TRUE if the sound is triggered and FALSE if the sound
has not been triggered. (The sound is triggered whenever a new alarm
enters the system.)

Table 3-8 Special-purpose logical points

3.2.4 The Show Value Effect


The Show Value animation effect replaces the label of the selected text display shape with the
result of the expression evaluation.
You will typically use this effect to display the value of a data point, or of one of its tags.

• 34 Chapter 3: Working with Data


When you select this type of effect, you must provide the following settings in the Animation –
Show Value window:

Setting Description
Description Sets the name of the animation effect.

Expression The expression to be evaluated. The program displays logical values as True or
False, while it displays numerical values with the requested number of decimal
places.

Decimal places Indicates the number of digits that will be displayed, after the decimal. If you
specify 0, there will be no decimal point.

Table 3-9 Show value animation effect settings

3.2.5 The Change Color Effect


The Change Color animation effect changes the display color of the selected display shape when
the expression evaluates to TRUE.
The result of the effect depends on the type of shape. Shapes with closed areas will be filled with
the selected color. Lines and text will be displayed in the selected color.
You will typically use this effect to display a shape with a special color to indicate that it is active
or that a value has reached a given threshold.
When you select this type of effect, you must provide the following settings in the Animation –
Change Color window:

Visual T&D Diagram Editor User Guide • 35


Setting Description
Description Sets the name of the animation effect.

Expression The expression to be evaluated. The shape will change colors if the condition
evaluates to TRUE.

Color Selects the color.

Table 3-10 Change color animation effect settings

3.2.6 The Show Text Effect


The Show Text animation effect replaces the label of the selected text display shape with a
different label when the expression evaluates to TRUE.
You will typically use this effect to display a label or message whenever a data point tag is active
or when a value reaches a given threshold.
When you select this type of effect, you must provide the following settings in the Animation –
Show Text window:

• 36 Chapter 3: Working with Data


Setting Description
Description Sets the name of the animation effect.

Expression The expression to be evaluated. The original text label will be replaced with the
new value if the condition evaluates to TRUE.

Text Text label to be displayed when the condition is TRUE.

Table 3-11 Show animation effect settings

3.2.7 The Hide Effect


The Hide animation effect removes a shape from the display when the expression evaluates to
TRUE.
You will typically use this effect to conditionally hide or display shapes according to the value of
a data point or a tag.
When you select this type of effect, you must provide the following settings in the Animation –
Hide window:

Setting Description
Description Sets the name of the animation effect.

Expression The expression to be evaluated. The shape is hidden if the condition evaluates to
TRUE.

Table 3-12 Hide animation effect settings

3.2.8 The Flash Effect


The Flash animation effect provides two different ways for a shape to flash in the drawing. The
shape either changes colors, or appears and disappears.
You will typically use this effect to indicate a special situation that requires user intervention.
When you select this type of effect, you must provide the following settings in the Animation –
Flash window:

Visual T&D Diagram Editor User Guide • 37


Setting Description
Description Sets the name of the animation effect.

Expression The expression to be evaluated. The shape flashes if the condition evaluates to
TRUE.

Type Selects the type of animation effect:


 The Hide effect alternately shows the shape and then removes it from the
display.
 The Color effect alternately shows the shape in its original color and in the
specified color.

Speed Selects the speed of the animation effect:


 If you specify Fast, the animation takes place once per second.
 If you specify Slow, the animation takes place once every 2 seconds.

Table 3-13 Flash animation effect settings

3.2.9 The Scale Effect


The Scale animation effect changes the size of a shape according to the value of an expression.
You will typically use this effect to create sophisticated indicators, such as moving bar charts or
thermometer displays.
When you select this type of effect, you must provide the following settings in the Animation –
Scale window:

• 38 Chapter 3: Working with Data


Setting Description
Description Sets the name of the animation effect.

Expression The expression to be evaluated. The size of the shape changes according to the
value of the expression.

Expression range Indicates the minimum and maximum range of values of the expression.

Scaling range Indicates the scaling that will be applied to the shape, as a percentage of the
current size. A value of 100% represents the original size of the shape, while a
value of 0 makes the shape disappear.
The minimum value indicates the scaling that will be applied when the expression
is equal to or less than the minimum Expression range value.
The maximum value indicates the scaling that will be applied when the
expression is greater than or equal to the maximum Expression range value.

Dimensions to be Selects the dimensions of the shape that will be resized: width or height.
scaled

Anchor point Selects the part of the shape that remains stationary when the shape is resized.

Table 3-14 Scale animation effect settings

3.2.10 The Move Effect


The Move animation effect changes the position of a shape according to the value of an
expression. The shape keeps its original size and is moved within the area you specify.
You will typically use this effect to create sophisticated indicators, such as moving slider controls
or moving gauges.
When you select this type of effect, you must provide the following settings in the Animation –
Move window:

Visual T&D Diagram Editor User Guide • 39


Setting Description
Description Sets the name of the animation effect.

Expression The expression to be evaluated. The position of the shape within the movement
area changes according to the value of the expression.

Expression range Indicates the minimum and maximum values of the expression.

Horizontal Indicates whether the shape is to be moved horizontally and if so, by how many
movement range pixels.
Specifies by how many pixels the shape is to be moved when the expression is
greater than or equal to the maximum Expression range value.

Vertical movement Indicates whether the shape is to be moved vertically and if so, by how many
range pixels.
Specifies by how many pixels the shape is to be moved when the expression is
greater than or equal to the maximum Expression range value.

Direction Selects the direction of movement of the shape within the specified area.

Table 3-15 Move animation effect settings

Tip: To assist you, the program displays the outline of the movement area on the
diagram while you edit the parameters of this animation effect.

3.2.11 Combining Effects


You can assign any number of animation effects to a shape. In Animation mode, the program
evaluates the expression associated with each effect and performs all applicable animation. Thus,
you can create a shape that changes colors based on a value and then starts flashing when a
threshold is exceeded.

• 40 Chapter 3: Working with Data


Note: When more than one effect of the same type becomes enabled, it is the last one
in the list that is applied. You can use the Move Up and Move Down buttons on
the Animation tab of the Shape Properties window, to move the effects around
in the list.

3.2.12 Using the Full Screen Display Setting


In the Animation mode, a Full Screen display setting is available. When a diagram is displayed
using this setting, the application window’s title bar, menu bar, and toolbar disappear completely,
leaving only the diagram itself and the status bar.

To view the diagram in Full Screen:


 From the View menu, choose Full Screen.

OR

Press the F11 key.

To revert to the normal display setting:


 Press the F11 key.

Visual T&D Diagram Editor User Guide • 41


3.3 Animation Effects Specific to the
SMP Gateway HMI
This section presents the animation effects that only work in SMP Gateway HMI diagrams.

3.3.1 The Show Point Setting Effect


The Show Point Setting animation effect replaces the label of the selected text display shape with
the value of a specific setting of an SMP Gateway point when the expression evaluates to TRUE.
When you select this type of effect, you must provide the following settings in the Animation –
Show Point Setting window:

Setting Description
Description Sets the name of the animation effect.

Expression The expression to be evaluated. The setting value is displayed when the
expression evaluates to TRUE.

Data Point The name of the SMP Gateway point for which the value of one of its setting will
be displayed in the shape.

Setting The name of the point setting as specified in SMP Config.

Table 3-16 Show Point Setting animation effect settings

3.4 Interactions
An interaction is similar to an animation effect, except that it must be triggered by a user, by
clicking a shape.

• 42 Chapter 3: Working with Data


Historically, operator interactions with Visual T&D diagrams were handled using VBA code,
which required coding and scripting abilities from the diagram designers. Moreover, VBA code is
not supported in the SMP Gateway HMI.

3.4.1 The Control Interaction


Control interactions allow operators to perform a control operation on an analog or binary output
point by clicking on a diagram shape that is mapped to this point.
The Control interaction supports the Select-Before-Operate (SBO) and Direct-Execute control
operation types. For binary output points, it supports the Open/Close and Pulse execution types;
for analog output points, only analog setpoint operations are supported.
When a control interaction is triggered, a control window appears; its content depends on the type
of output point (analog or binary) and the execution type (setpoint, open/close, or pulse). The
following screenshot shows a control window example for an Open/Close control interaction:

If the configured operation is a Select-Before-Operate (SBO) control operation, an additional


control window is displayed to confirm the operation, as shown in the following screenshot:

Both control windows are customizable at configuration time.

3.4.2 Setting up a Control Interaction on a Shape


To set up a Control interaction on a diagram shape:
 Use the Pointer or Selection tool to select the shape.
 From the Shape menu, choose Interaction.

Visual T&D Diagram Editor User Guide • 43


 Under Configuration, click Add, and then click Control.

 In the Description box, type a name for the interaction; this name will be displayed at the top
of the control window.
 In the Control Type box, select the type of control operation to perform through this control
interaction.
 In the Data Point box, type the name of the binary or analog output point to control; you can
also select the point from the provided list.

• 44 Chapter 3: Working with Data


Note: If the diagram is intended for the SMP Gateway HMI, the point list will only be
available if Visual T&D Diagram Editor has been launched from SMP Manager or
is connected to the Visual T&D server. In the latter case, the current server site
configuration must include the SMP Gateway data source that will run the
diagram in order to have access to the point list.

 In the Execution Type box, select the execution type of the control operation.
 If the execution type is Pulse, type the Pulse Duration, in milliseconds, in the corresponding
box.
 Under Operation Buttons Style, modify the appearance of the control window for the Select
or Direct Execute operation, if required.

For each button:


 Type the button name in the Label box.
 Select the text color in the Text box.
 Select the button color in the Background box.
 If the control operation to perform is of the SBO type, modify the appearance of the control
confirmation window, if required, under Confirmation Buttons Style.
 Click OK to close the Control Configuration window, and then click OK again to close the
Shape Properties window.

3.4.3 The Open Page Interaction


As its name suggests, the Open Page interaction allows users to open another page from the
currently displayed page.

Note: Open Page interactions cannot be set up on shapes of pages that use renaming
tables (i.e. “dynamic pages”).

3.4.4 Setting up an Open Page Interaction on a Shape


To set up an Open Page interaction on a diagram shape:
 Use the Pointer or Selection tool to select the shape.
 From the Shape menu, choose Interaction.

Visual T&D Diagram Editor User Guide • 45


 Under Configuration, click Add, and then click Open Page.

 In the Description box, type a short description for this interaction, or keep the one proposed
by default; this description will be used as the interaction instance name that will appear in the
Interaction tab of the Shape Properties window.
 Click OK to close the Animation – Open page window, and then click OK again to close the
Shape Properties window.

3.5 Interactions Specific to the SMP Gateway HMI


This section presents the interactions that only work in SMP Gateway HMI diagrams.

3.5.1 The Alarm Commands Interaction


Alarm Commands interactions allow operators to perform alarm management operations on data
points by clicking on a diagram shape that is mapped to these points.

• 46 Chapter 3: Working with Data


3.5.2 Setting up an Alarm Commands Interaction
To set up an Alarm Commands interaction on a diagram shape:
 Use the Pointer or Selection tool to select the shape.
 From the Shape menu, choose Interaction.

 Under Configuration, click Add, then SMP Gateway, and then click Alarm Commands.

 Click OK to close the Shape Properties window.

Note: When the Alarm Command Interaction is setup, all data points related to the
animation of the shape are eligible to alarm management on the right side panel
of the diagram page.

Visual T&D Diagram Editor User Guide • 47


3.6 Using Diagram Editor in the Standalone HMI
Mode
When Visual T&D is configured to run as standalone HMI, all the usual Windows’ user interface
functions are disabled, so that the end user can only use Visual T&D.
For additional information about Visual T&D’s Standalone HMI mode, refer to the Visual T&D
Explorer User Manual.
In Visual T&D’s Standalone HMI mode, Diagram Editor is always started in the Animation mode.
You can always switch between this mode and the design mode, by following the steps described
in “Switching Between Operation Modes”, page 3, except if Diagram Editor is configured to run
in the Kiosk mode.

3.6.1 The Kiosk Mode


An additional mode is also available while in the Standalone HMI mode: the Kiosk mode. When
Diagram editor is in the Kiosk mode:
 you cannot switch to the Design mode: the diagram is always animated;
 all contextual menus are disabled; however, the F1 key, which triggers the online help, is
functional;
 the diagram is always displayed using the Full Screen display setting.
The Kiosk mode cannot be activated at runtime: its activation must be specified during the
Standalone HMI mode configuration process. For additional details, refer to the Visual T&D
Explorer User Manual.

3.7 Designing Diagrams for the SMP Gateway


HMI

Visual T&D Diagram Editor can also be used to design diagrams intended for the SMP Gateway
HMI. Such diagrams must be exported to the SMP Gateway HMI Package (.hmi) file format
before they can be uploaded on the SMP Gateway. Visual T&D Diagram Editor is not part of the
standard SMP Manager installation. However, when installed, the program is automatically
detected by SMP Manager which supports Visual T&D Diagram Editor launching; an icon is
placed in the SMP Manager Toolbar for this purpose.

Note: The SMP Gateway HMI feature is presented in details in the SMP Gateway User
Manual, MN912001EN.

Most of the diagram features supported by Visual T&D are also supported in the SMP Gateway
HMI, but with some limitations and constraints.
The following features are not supported:
 Visual Basic® for Applications (VBA) code.
 Animation expressions that use tag functions.
 Animation expressions that use the following alarm functions:
 IsAlarmSilent

• 48 Chapter 3: Working with Data


 GetAlarmPriority
 Inhibition tags.
 Bitmap (BMP) image files that include transparency information and Enhanced Metafile
(EMF) image files.
 The following functions for graphical objects:
 Hatch pattern (Color Fill)
 Rotation
 Multiple Lines (Text) shape properties
 Scale and Move shape animations.
 Pages with shape renaming tables.
If Visual T&D Diagram Editor encounters, during the export, diagram elements that are not
supported by the SMP Gateway HMI, it generates a warning report that can be consulted by the
user.

Note: Visual T&D Diagram Editor does not automatically fix the unsupported elements
that it may encounter during the export. It is the user’s responsibility to analyze
the report and fix the issues according to its own diagram requirements.

A diagram with unsupported elements will run on the SMP Gateway, but may not
behave as expected by the user.

3.7.1 Using Diagram Editor from SMP Manager

The Diagram Editor, when launched from SMP Manager, is called SMP Diagram Editor and is
available only in design mode; animation related functions and access to the server are disabled.
An additional feature sets it apart from the Visual T&D Diagram Editor to enforce single-line
diagram edition in page dimensions that are adapted for the SMP Gateway touchscreen display
area. Therefore, the SMP Diagram Editor has two combo boxes located in the Toolbar. They are
used to resize all the schema pages in order for them to fit exactly in the single-line diagram
display area of the target screen.

The first box allows choosing between two SMP Gateway version ranges:
 SMP Gateway 6.3R1 or later
 SMP Gateway 7.1R1 or later
The second box allows choosing a screen resolution adapted for the touchscreen connected to the
SMP Gateway video port and used for local access. The choices for the screen resolution are the
following:
 800 x 600
 1024 x 768
 1280 x 800
 1280 x 1024

Visual T&D Diagram Editor User Guide • 49


 1366 x 768
 1440 x 900
 1600 x 900
 1680 x 1050
 1920 x 1080

3.7.2 Exporting a Diagram for the SMP Gateway HMI


To export a diagram to the SMP Gateway HMI package file format:
 From the File menu, choose Export for SMP Gateway.
 In the File name box, type a new name for the SMP Gateway package file that will contain
the diagram, or keep the name proposed by default (which corresponds to the site name).
 In the Target version box, select the firmware version of the target SMP Gateway.

Note: If the actual version of the SMP Gateway firmware is not listed, select the closest
earlier version.

 Click Save.
 If the resulting file contains diagram elements that may not be displayed properly, you can
click Yes to display the warning report. Otherwise, click No.
The diagram package file is now ready to be transmitted to the SMP Gateway. For additional
information, refer to the SMP Gateway User Manual, MN912001EN.

• 50 Chapter 3: Working with Data


4 Sharing Diagram
Components

Visual T&D Diagram Editor provides additional features to help you create diagrams based on
standard shapes. The Library Manager libraries provide you with a means to define a set of
standard shapes that you will use for all your diagrams.
In fact, Cooper Power Systems provides different libraries containing shapes adapted to the
platform using them. These libraries are the Common platforms Visual TD and SMP Gateway, the
SMP Gateway and the Visual TD. In these libraries, shapes are sorted in Generic or Substation
branches to allow the user to find them easily according to their functions. These shapes are
animated, so that you can use them to monitor the value or quality of a data point, or to see if any
alarms have occurred and to acknowledge and clear the alarms, or to operate data points in your
diagram.
For example, the Visual TD Library contains one button that opens (sets to off) a binary output
point, and another that closes (sets to on) a binary output point. You could retrieve these two
shapes from the library and add them to your diagram. You would then specify which data point
you want to operate. Thereafter, you would just need to click the buttons directly in your diagram
in order to operate the binary output point. The libraries are discussed in detailed under “Examples
of Basic Shapes in the Libraries”, page 64.
You will undoubtedly use the Library Manager libraries extensively. However, you may also want
to create your own libraries containing shapes and animations that are specific to your diagrams
and are not in the provided Libraries.
Once you have added a shape to a library, you can manage the versions of that shape. Whenever
you modify a shape in a library, you can easily update all the diagrams that use the shape.

4.1 Creating and Managing Shape Libraries


The main user interface to Diagram Editor Shape libraries is the Library Manager window,
which displays available shape libraries and provides commands for managing their contents.
When using the Library Manager, pay close attention to where you select your shapes. The library
Manager contains three main libraries:
 The Common platforms Visual TD and SMP Gateway library, where shapes are
compatible for use with both Visual TD and SMP Gateway HMIs.
 The SMP Gateway library, where shapes are compatible for use only with the SMP
Gateway HMI.
 The Visual TD library, where shapes are compatible for use only with the Visual TD
HMI.

Visual T&D Diagram Editor User Guide • 51


To display the Library Manager window:
 From the Library menu, choose Manager.

The window contains the following boxes and menus:


 Current libraries.
The left side of the window displays a hierarchical view of the currently available libraries.
 Shapes.
The right side of the window displays a list of the shapes available in the selected library or
folder.
 The File menu.
The File menu provides commands to help you manage the libraries and their contents.
 The Shape menu.
The Shape menu provides commands to help you manage the shapes in the libraries.

Note: By default, all libraries are created in the Libraries folder, within the Client
folder.

4.1.1 Creating a New Shape Library


You may want to create your own libraries containing shapes and animations that are specific to
your diagrams and are not in the Library Manager libraries.

To create a new empty shape library:


 From the Library menu, choose Manager.
 In the Library Manager window, choose New from the File menu.
 Enter the name of the new library, and then click Save.

• 52 Chapter 4: Sharing Diagram Components


4.1.2 Adding Shapes to Libraries
Once you have created a new library, you are ready to add your custom shapes to it.

To add a shape to a library:


 Use the Pointer or Selection tool to select the shape in the diagram.
 From the Library menu, choose Add Shape to Library.
 If the diagram contains at least one VBA procedure or function, the Export window opens, so
that you can choose which VBA items you want to save with the shape. When the window
opens, all the VBA items associated with the shape are automatically selected since it is
assumed that you will want to save the shape with in its entirety. You can, however, deselect
one or more VBA items if you so choose. Click Finish to continue.

Note: For additional information about the Export function, see “Exporting Parts of a
Diagram”, page 57.

The program now displays a Save As window, which is actually the Library Manager window
with two additional boxes at the bottom, in which you can enter a name and version for the shape.
The window also allows you to select the library in which you want the shape to be stored.

 Enter a name for the shape.


 Enter the version number of the shape.
 Select the destination library or folder (left pane).
 Click Save.

4.1.3 Creating Library Folders


If your shape library contains a large number of shapes, you can create folders to organize its
contents.

To create a library folder:


 In the Library Manager window, select the library or an existing folder in the left pane of
the window.
 In the Library Manager window, choose New Folder from the File menu.
 Enter the name of the folder, and then click OK.

Visual T&D Diagram Editor User Guide • 53


4.1.4 Moving Shapes to a Different Folder or Library
You can move library shapes from one folder to another or even from one library to another.

To move a shape to a different folder or library:


 From the Library menu, choose Manager to open the Library Manager window.
 Drag and drop the shape to the destination library or folder.

OR

Select the shape you want to move and use the corresponding menu command:
 From the Shape menu, choose Move.

The window title is replaced with Move To, and a Move button appears at the bottom of
the window.
 In the left pane, select the destination library or folder.
 Click Move.

4.1.5 Renaming Libraries and Folders


You can rename your libraries and folders.

To rename a library or folder:


 In the Library Manager window, select the library or folder you want to rename.
 From the File menu, choose Rename.
 Enter the new name, and then click OK.

4.1.6 Renaming Shapes


You can rename the shapes in your libraries.

To rename a shape:
 In the Library Manager window, select the shape you want to rename.
 From the Shape menu, choose Rename.
 Enter the new name, and then click OK.

4.1.7 Deleting Libraries and Folders


You can delete libraries and folders.

To delete a library or a folder:


 In the Library Manager window, select the library or folder you want to delete.
 From the File menu, choose Delete.

4.1.8 Deleting Shapes


You can delete shapes in your libraries.

• 54 Chapter 4: Sharing Diagram Components


To delete a shape:
 In the Library Manager window, select the shape you want to delete.
 From the Shape menu, choose Delete.

4.2 Adding Library Shapes to a Diagram


When you add a library shape to your drawing, Diagram Editor can keep a link between the shape
in the drawing and the shape library. Later on, when you update the shape in the library, Diagram
Editor can automatically update all the shapes that are linked to the library.

Warning: If you choose to add the shape to the drawing without a link, you will be
unable to update the shape from the library. Adding an unlinked shape is
similar to using the Copy and Paste commands.

4.2.1 Adding Linked Shapes


A linked shape gets automatically updated by Diagram Editor when the shape gets updated in the
corresponding library.

To add a linked shape to your drawing:


 In the Library Manager window, select the shape you want to add to your drawing.
 Drag and drop the selected shape onto the drawing, at the desired position.

OR
 Use the corresponding menu command:
 From the Shape menu, choose Add Linked Shape to Drawing.

The shape gets added to your drawing.


 Drag the shape to the desired position.

4.2.2 Adding Unlinked Shapes


An unlinked shape is not updated by Diagram Editor when the corresponding shape gets updated
in the parent library.

To add an unlinked shape to your drawing:


 In the Library Manager window, select the shape you want to add to your drawing.
 From the Shape menu, choose Add Shape to Drawing.

The shape gets added to your drawing.


 Drag the shape to the desired position.

4.3 Working with Shape Versions


The Library Manager keeps track of the versions of your shapes. When you save a shape in a
library, you identify it by its name and version number. When you add a library shape to your
drawing, Diagram Editor stores the version number with the shape. Later on, when you update the

Visual T&D Diagram Editor User Guide • 55


shape in the library, Diagram Editor can automatically update every occurrence of the shape in
your diagrams.
When you add a shape to the library, the program performs the following validations:
 If there is no shape with same name, the new shape is added to the library.
 If there already is a shape with the same name, but with a higher version number, the
operation is refused.
 If there already is a shape with the same name and version number, you will be prompted to
overwrite the library shape. Since both shapes have the same version number, the Update All
Linked Shapes command of the Library menu will not update any other occurrences of the
shape in the diagram.
 If there already is a shape with the same name, but with a lower version number, you will be
prompted to overwrite the library shape.

4.3.1 Updating Shapes in a Library


You can update shapes that are in a library and have been modified on your drawing. This feature
speeds up the process of modifying shapes in a library and spares you from having to save them
again. However, the command is available only if the shape is still linked.

To update a shape in a library:


 Right-click the shape to update, and then choose Update Library from the shortcut menu.

If some Visual Basic modules or pages previously associated with the shape are missing, the
application will display them and will prompt you to provide the new associations.
If your diagram contains a grouped shape that you have stored in a library, and you now change
the structure of the grouped shape by adding a new shape to the group, for example, the Update
Library command will no longer be available for the modified shape.

To update in a library a grouped shape that contains an additional shape:


 Select the shape in the diagram.
 From the Library menu, choose Add Shape to Library.
 In the Save As window, select the original shape.
 Leave the same name in the Name box, enter a new version number in the Version box, and
click Save.

4.3.2 Updating the Shapes in a Drawing


If you have made changes to one or more library shapes, you will want to update any occurrences
of the shape or shapes in your drawing. Only shapes that are linked to the library can be updated.
You can update the linked shapes individually or you can choose to update all the shapes in the
drawing.

To update from the library, a single shape in the drawing:


 Use the Pointer or Selection tool to select the shape to be updated.
 From the Shape menu, choose Update from Library.

To update from the library, all the shapes in the drawing:


 From the Library menu, choose Update All Linked Shapes.

• 56 Chapter 4: Sharing Diagram Components


4.4 Importing and Exporting Parts of a Diagram
Your diagram may contain pages or Visual Basic modules that required significant efforts to
create. You will certainly want to reuse some of these components in other diagrams.
The Export command of the File menu saves complete diagram pages will all their shapes and
Visual Basic modules, in a special type of data file. You can then use the Import command to
merge these pages and modules into any other diagram.

4.4.1 Exporting Parts of a Diagram


Pages and VBA modules can be exported to a file for reuse in another diagram.

To export diagram pages or Visual Basic modules:


 Click Export in the File menu.

The Export wizard appears and shows the pages of the diagram that can be exported.

 Select the diagram page(s) to export.

Note: You cannot export the main page of your diagram. Therefore, the page does not
appear in the list of pages that can be exported.

 Click Next.

The Export wizard then lists all Visual Basic project items of the selected diagram pages.

Visual T&D Diagram Editor User Guide • 57


 Select the items to export.
 Click Finish.
 In the Save As window, enter a name for the file and if need be, select a destination folder
other than the suggested folder (Diagrams).

4.4.2 Importing Parts of a Diagram


Diagram pages and corresponding VBA modules that were previously saved can be imported to
any diagram.

To import diagram pages and VBA modules:


 From the File menu, choose Import.
 In the appropriate folder, select the file to import, and then click Open.

4.5 Working with Aliases


Diagrams you design will most probably contain repetitive shapes. To simplify your task, you will
undoubtedly use the Copy and Paste commands to add multiple copies of a particular shape to the
diagram. However, when you copy a shape you also copy the animation effects, which are all
based on the value of the data points named in the expressions. To create a meaningful diagram,
you would have to edit each animation effect of each shape to change the names of the data points.
Since this approach is not really convenient, Diagram Editor provides a simple method by which
you can create generic shapes that you can then easily associate with any data point. Instead of
directly naming points in the expressions, you will design your animation effects by using
symbolic values that we will call aliases. Before running the animation, you will simply associate
the aliases used in each shape with the real data points that are used to control and monitor your
process.

Note: When a shape containing aliases is copy-pasted, these aliases are automatically
de-allocated, forcing their association with new data points.

If your data points are named according to some systematic naming convention, Diagram Editor
can also provide you with a method for automatically associating aliases with data points.

• 58 Chapter 4: Sharing Diagram Components


4.5.1 Using Aliases in Animation Expressions
You can use an alias in an animation expression in exactly the same manner that you would use a
data point name, except that you surround the alias name with square brackets.
The Variables and Aliases button in the Expression Editor displays the list of all the variables
(data points) known to the server, as well as all the aliases you have defined for a shape. The
aliases are added to the end of the list, and their names are surrounded with square brackets so that
you can easily identify them.
Here are some examples of expressions containing aliases:

[IA]
QualityOf([MA])
NOT (TagOf([TS], 9) OR TagOf([TS], 10))

4.5.2 Manually Assigning Aliases to Variables


Before you can run a diagram that contains aliases, you must assign each alias to a variable, that
is, to a data point.

To manually assign the aliases for a particular shape:


 Use the Pointer or Selection tool to select the shape in the drawing.
 From the Animation menu, choose Assign Aliases.

To manually assign the aliases for all the shapes in your diagram:
 From the Animation menu, choose Assign Aliases.
The program displays the Assign Aliases window. If you selected a particular shape, you will see
the aliases used in that shape; otherwise, you will see a list of all the shapes in your diagram, with
all the aliases used in all the shapes.
In the screenshot below, we selected a particular shape in the diagram, called L3_ION. The shape
animation contains 3 aliases: current, polarity and voltage. We have already mapped current to a
data point called L3_ION_IA, and polarity to a data point called L3_ION_V1_Polarity. We
are in the process of using the drop-down list to choose a data point for voltage. The Resolution
setting is set to Automatic by default, but once you have chosen a data point in the drop-down
list, it is set to Manual to indicate that you have manually assigned the alias to a data point.

Visual T&D Diagram Editor User Guide • 59


Control Description
Shapes If you selected a shape before displaying the window, the Shapes section will
display the group hierarchy of the selected shape; otherwise, it will display all the
shapes in the diagram and their individual group hierarchies.
The Variables and aliases grid displays the list of variables and aliases used in
the selected shapes.

Variable Use the drop-down list to choose a data point for the alias shown in the same row.
An empty cell indicates that no data point has been assigned yet to the alias.

Alias This column lists the names of all the aliases used in the selected shapes.
Note: If you change the name in the Alias column, the name of the alias will also be
changed in the animation expressions that use the alias.

Resolution This column indicates whether the alias will be resolved automatically or
manually. To automatically assign aliases, you will use a Visual Basic procedure
in the Common platforms Visual TD and SMP Gateway library (VBA folder).
See "Automatically Assigning Aliases to Variables", below.

Context This column indicates the name of the shape and the animation effect in which
the alias (or data point, if you did not use an alias in the animation expression) is
used.

Find Displays a window, in which you can enter a name that you want to locate in one
of the columns of the grid.

Replace Displays a window, in which you can enter a name that you want to locate in one
of the columns of the grid, as well as a replacement string.

Table 4-1 Assign Aliases window controls

4.5.3 Automatically Assigning Aliases to Variables


Before it displays a page, Diagram Editor automatically assigns all the aliases that have not been
set manually with the Assign Aliases command.

• 60 Chapter 4: Sharing Diagram Components


You can invoke the automatic alias assignment procedure while you are designing your diagram.
You will do this by using a Visual Basic object in the Common platforms Visual TD and SMP
Gateway library (VBA folder), called the ResolveAlias object. This object contains a VBA
module with 2 scripts that you can use to automatically map aliases to data points in your
diagrams:
 ResolveByName.
This procedure determines the data point name by appending the name of the alias to the
name of the shape. For example, if the shape were called F1_BRK_ and included an
animation expression that used an alias called [CONTROL], the procedure would map the
alias to the data point called F1_BRK_CONTROL.
 ResolveFromFile.
This procedure uses the name of the shape to look up the alias in an external CSV file. You
can use this procedure either when your data point naming convention is too complex for you
to use the ResolveByName procedure, or when the names of the data points are readily
available in an external file.

4.5.3.1 Using the ResolveByName Procedure


You will go through the following steps to resolve aliases using the ResolveByName procedure:
 Insert the ResolveAlias object in the diagram.
 Assign the ResolveByName procedure to the selected shape's Resolve Alias event.
 Choose Resolve Aliases from the Animation menu, to have Diagram Editor automatically
assign the aliases for the selected shape.

To use the ResolveByName procedure to automatically assign aliases to variables:


 Insert the ResolveAlias object in the diagram:
 From the Library menu, choose Manager.
 In the Library Manager window, select the VBA folder in the Common platforms
Visual TD and SMP Gateway library.
 In the right pane, select the ResolveAlias shape and drag-and-drop it onto the diagram.

Note: When you save the diagram, the newly inserted ResolveAlias object becomes
part of the diagram. Thus, you will not have to retrieve the object from the library
the next time you open the diagram.

 Assign the ResolveByName procedure to the selected shape Resolve Alias event:
 Select the shape for which you want to resolve the aliases.

In our example, we have selected an object called SimSS_025_F1_.


This grouped shape contains 3 aliases: [IA], [IB] and [IC], representing the phase
A current, the phase B current, and the phase C current, respectively.
 From the Animation menu, choose Visual Basic Wizard.
 Select Add or modify diagram event handlers, then click Next.
 Select the shape.
 In the Select event handler section, select the Resolve Aliases event, the ResolveAlias
module, and the ResolveByName procedure.

Visual T&D Diagram Editor User Guide • 61


 Click Add.

The Resolve Aliases event handler gets added to the shape's event handlers, as shown in
the Event handlers box at the bottom of the window.

 Click Finish.
 Click Resolve Aliases in the Animation menu, to have Diagram Editor automatically assign
the aliases for the SimSS_025_F1_ shape.

To view the results of the alias resolution:


 From the Animation menu, choose Assign Aliases.

This will display the Assign Aliases window. In our example, we can see that Diagram Editor
has mapped each alias to a data point name consisting of the shape name plus the alias name.

• 62 Chapter 4: Sharing Diagram Components


4.5.3.2 Using the ResolveFromFile Procedure
You will go through the following steps to resolve aliases using the ResolveFromFile procedure:
 Set up a comma-separated file (CSV) that shows the relationship between the aliases and the
data points.
 Insert the ResolveAlias object in the diagram.
 Assign the ResolveFromFile procedure to the shape's Resolve Alias event.
 Click Resolve Aliases in the Animation menu, to have Diagram Editor automatically assign
the aliases for the selected shape.

To use the ResolveFromFile procedure to automatically assign aliases to


variables:
 Set up a CSV file that complies with the following format:
 A header line with the words: shape, alias and point, separated by commas.
 A series of lines containing, on each line:
 the name of a shape;
 the name of an alias;
 the name of the corresponding data point, each enclosed in quotes and separated by
commas.
For example:

shape,alias,point
"F1","IA","SimSS_025_F1_IA"
"F1","IB","SimSS_025_F1_IB"
"F1","IC","SimSS_025_F1_IC"
"F2","IA","SimSS_025_F2_IA"
"F2","IB","SimSS_025_F2_IB"
"F2","IC","SimSS_025_F2_IC"
The remaining steps are identical to those described for the ResolveByName procedure, with the
exception that you will assign the ResolveFromFile rather than the ResolveByName procedure to
the shape's Resolve Alias event. See "Using the ResolveByName Procedure", above.
Note that the ResolveFromFile procedure expects the CSV file to be called Aliases.csv. It
also expects the CSV file to be located in the Temp folder of your hard disk. If you use another
name, such as Maple Grove Aliases.csv, or store the file in some other folder, you must
modify the procedure accordingly.

To change the folderName and fileName of the ResolveFromFile procedure:


 Select the shape to which you have assigned the ResolveFromFile procedure.
 From the Animation menu, choose Visual Basic Editor.
 In the left pane of the Visual Basic Editor window, double-click ResolveAlias in the
Modules folder.
 In the ResolveFromFile procedure, specify the appropriate information for folderName and
fileName.
 If you have an error when resolving aliases, add a schema information file to the data source.

To add a schema information file to the data source:


 Using Notepad, create a new file.

Visual T&D Diagram Editor User Guide • 63


 Paste the following text in the new file:

[NameOfAliasesFile.csv]
ColNameHeader=True
Format=CSVDelimited
DecimalSymbol=.
 Replace the first line to include the name your CSV file.

For example, the first line of the file may look like this:

[Maple Grove Aliases.csv]


 From Notepad’s File menu, choose Save As.
 Browse to the folder containing the CSV file.
 In the Filename box, type schema.ini.
 Select All Files in the Save as type box.
 Click Save.

4.6 Examples of Basic Shapes in the Libraries


Cooper Power Systems provides libraries, which contain frequently used shapes, buttons and
displays. These shapes are animated, so that you can use them to monitor the value or quality of a
data point, or to see if any alarms have occurred and to acknowledge and clear the alarms, or to
operate data points in your diagram.
For example, one library contains a button that opens (sets to off) a binary output point and
another that closes (sets to on) a binary output point. You could retrieve these two shapes from the
library and add them to your diagram. You would then specify which data point you want to
operate. Thereafter, you would just need to click the buttons directly in your diagram in order to
operate the binary output point.
The Library Manager libraries are presented in details in the Visual T&D Basic Shapes Libraries
Reference Manual and in Visual T&D Substation Shapes Libraries Reference Manual that are
provided with Visual T&D.
To help familiarize you with using the Library Manager libraries, we will go through an example.
Our example uses a simulation database and data points that we have in our diagram, but you can
go through the example using data points that exist in your own diagram.
Our diagram contains a binary input point called SimSS_220_L1_ALM1. This is a binary input
point representing an alarm on line 1. We would like to know at a glance, whether the alarm is on
or off. We would also like to know if the quality of the data point is good or bad.
Proceed as follows:
 From the Library menu, choose Manager.
 In the Library Manager window, select the Common platforms Visual TD and SMP
Gateway library, click on the folder called Labels Indicators.
 In the right pane, click the shape called Green-Red Labeled Square, and drag and drop it
onto your diagram.

If you look at the shape properties, you will see that the shape contains three Change Color
animation effects. If you then look at the animation expressions, you will see that the first one

• 64 Chapter 4: Sharing Diagram Components


changes the color of the shape to green if a binary input point with an alias called
[BINARY_INPUT] is on, the second one changes the color to red if the data point is off, and the
third one changes the color to grey if the data point quality is bad.
 With the shape still selected, click the Shape menu, then Grouping, then Show.
 In the Grouping window, select Label and click Properties.
 Select the Text tab.

 Type L1 ALM in the Text box, and then click OK.


 Close the Grouping window.

The shape now looks like this:

 From the Animation menu, choose Assign Aliases, and assign the data point called
SimSS_220_L1_ALM1 to the [BINARY_INPUT] alias (for this procedure, see “Manually
Assigning Aliases to Variables”, page 59).
 From the Animation menu, click Run, to run the animation.

The L1 ALM shape will turn green, red or grey each time there is a change in the state of the
data point.

For the purpose of the test, you can provoke the changes in one of the following ways:
 On the real device, generate a real alarm, then clear the alarm, and then provoke a
communications failure or some other incident that will affect the quality of the data point,
and watch the L1 ALM square change colors.
OR
 If you are authorized to enter Simulation mode:
 Get into simulation mode via the Visual T&D Explorer Tools menu.
 Select the data point in the Real-Time Data view.

Visual T&D Diagram Editor User Guide • 65


 From the View menu, choose Data Point Properties, and directly manipulate the state
and quality of the data point, in order to see the L1ALM shape change colors on your
diagram.
OR
 If you can operate a binary output point that affects the state of the binary input point:
 Drag and drop the Click Open and Click Close shapes from the Buttons folder in the
Substation branch of the Visual TD library onto your diagram.
 Each of these buttons operates a binary output point, and contains an animation that uses
an alias called [BINARY OUTPUT].
 For each button, choose Assign Aliases from the Animation menu, and assign the alias
to the binary output point you are going to operate. In our simulation database, the binary
output point is called SimSS_220_L1_ALM1_CONTROL.

For the alias assignment procedure, see “Manually Assigning Aliases to Variables”,
page 59.
 Click the Click Open and Click Close buttons, and watch the L1 ALM shape change
colors.

4.7 Working with Pages


When you start creating the diagrams for your site, you may feel constrained by the size of the
computer screen. With Visual T&D Diagram Editor, you are not limited to a single diagram page.
Your diagram can be composed of any number of pages that are displayed in the form of
background or pop-up windows. Note that only one page can be displayed in the background
window at a time.
With the display page management features, you will be able to create sophisticated diagrams that
provide increasing levels of detail. The background diagram page can represent the general status
of each device; by clicking on a device, you can display a detailed representation of all significant
device data.

4.7.1 The Types of Pages in a Diagram


If your diagram contains only one page, it will be displayed in the main (background) window of
the program. When you add new pages to your diagram, you will decide whether these pages are
to be displayed in pop-up windows that overlap the background or whether they will be displayed
in the background window.
If you decide to create individual diagrams for each device on the site, you will soon realize that
these diagrams are quite similar and that the only differences are the names of the devices and
their data points. We have already seen that with Diagram Editor, you can create generic shapes
that contain aliases that are automatically or manually assigned to data points. In the same manner,
you can create diagram pages that contain generic shapes that will be dynamically renamed so that
the program can correctly assign the data points.

4.7.2 Managing the Pages in Your Diagram


The Pages window allows you to display, create, modify or delete pages in your diagram.

To display the Pages windows:


 From the View menu, select Pages.

• 66 Chapter 4: Sharing Diagram Components


Control Description
List of pages Displays the list of all the pages in your diagram. The diagram will always
contain at least one page.

Add Adds a new page to the diagram. Displays a window in which you can set the
name and properties of the new page.

Duplicate Makes a copy of the selected page.

Properties Displays a window in which you can modify the name and properties of the
selected page.

Default Set the selected page as the default page.

Delete Removes the selected page from the diagram.

Show Displays the selected page and makes it available for editing.

Table 4-2 Pages window controls

4.7.3 Adding a Page or Changing Properties of an Existing Page


You can add a new page to your diagram, or change the properties of an existing page, through the
Pages window.

To add a new page to your diagram or change the properties of an existing page:
 Click the Add or Properties button in the Pages window.

Visual T&D Diagram Editor User Guide • 67


Note: The Display tab contains the same settings as the Page Properties window. For
additional information about these settings, see “Setting up the Current Page
Properties”, page 4).

 Specify the page name.


 Specify the page width and height.
 Select how much the page will be zoomed in/out when the diagram is run.
 Select the background color.
 Select the Action tab.

 Specify the Action settings, which are presented in details in the following table:

Setting / Control Description


Use background If selected, the page will be displayed in the background window.
window

Create new window If selected, the page will be displayed in a pop-up window.

Use the following If selected, the page will be used to display several pages using shape renaming
shape renaming tables (see List of tables, below).
tables

• 68 Chapter 4: Sharing Diagram Components


Setting / Control Description
List of tables Displays the list of shape renaming tables defined for this page. That is, you will
assign generic names to the shapes on the page, and have the shapes
dynamically renamed via the renaming tables that you define here. Thus, you
create just one page from which you will display several pages. You can,
therefore, use the page to monitor several identical devices, as discussed under
“Using a Single Diagram Page to Monitor Multiple Devices”, page 71.

The box is available only if you selected Use the following shape renaming
tables.

Add Adds the name you entered in the upper box of the Tables section, to the list of
renaming tables assigned to the page.

Delete Deletes the selected table from the list of renaming tables.

Edit Displays the Rename Shapes window, which you can use to rename the shapes
in the table currently selected in the list. The procedure for renaming generic
shapes is outlined under “Using a Single Diagram Page to Monitor Multiple
Devices”, page 71.

Table 4-3 Add Page window - Settings and controls for the Action tab

4.7.4 Displaying the Pages of a Multiple-Page Diagram


The Visual TD library contains two buttons that you can use to open and close the pages in your
diagram. The procedure to follow is simple and is described here using as an example, a diagram
with a main page and 2 additional pages.
 Create a new diagram by choosing New from the File menu.
 Add two new pages, called SEL 351 and SEL 387, which you will use to display
information originating from two relays: a SEL-351 relay located on feeder 1 and a SEL-387
relay located on feeder 2:
 From the View menu, choose Pages.
 In the Pages window, click Add.
 Select the Display tab and enter the page name (SEL 351 or SEL 387).
 Select the Action tab and choose Create new window.
 Click OK.
 Repeat the previous steps for the second page.
 Click Close.
 Add two buttons to your main diagram page, that you will use to open the pages you have just
added:
 From the Library menu, choose Manager.
 Open the Visual TD library, expand the Generic branch
 Click on the Buttons folder.
 Drag and drop the Click Page Open shape onto your diagram.
 Copy and paste the shape, so that you now have 2 page opening buttons on your main
diagram page.
 Set up each button to open the appropriate page:

Visual T&D Diagram Editor User Guide • 69


 Select the first button.
 On the Shape menu, click Grouping, and then click Show.
 In the Grouping window, click Properties.

 In the Shape Properties window, type SEL 351 in the Name box, and click OK

SEL 351 will become the group name of the button shape. The name of the button must
be the exact name that you assigned to the page via the Pages window.
 In the Grouping window, select Label, and then click Properties.
 In the Shape Properties window, select the Text tab.
 In the Text box, type RELAY_F1, and then click OK.

This text will appear on the button. We used RELAY_F1 since we have a relay on Feeder
1 and one on Feeder 2. We could, however, have entered any meaningful text.

 Repeat the procedure for the second button, naming the button SEL 387 and labeling it
RELAY_F2.

Your main diagram page now has these 2 buttons:

• 70 Chapter 4: Sharing Diagram Components


 On the SEL 351 page, add a button to close the page:
 On the View menu, click Pages, and then click Show.
 In the Pages window, select SEL 351, and then click the Show button to display the
page.
 Drag and drop the Click Page Close button from the Visual TD library, in the Buttons
folder located in the Generic branch onto the SEL 351 page.
 Assign a group name of SEL 351 to the button, since the name of the button shape must
match the name of the page.
 Replace the button text with EXIT (or any other text, such as CLOSE or MAIN).
 On the SEL 387 page, add a button to close the page. Call the button SEL 387, and replace
the button text with EXIT.

Now, the SEL 351 and SEL 387 pages each have the following button:

You must save the diagram before running it.


 From the File menu, choose Save.
 Select the folder where you want to save the diagram file and type its filename.
 Click Save.

You are now ready to run your diagram.


 From the Animation menu, choose Run.

The diagram will open on the main page.


 Click the RELAY_F1 button to have the SEL 351 page appear in a pop-up window.
 On the SEL 351 page, click the EXIT button to close the pop-up window.
 Click the RELAY_F2 button to have the SEL 387 page appear in a pop-up window.
 On the SEL 387 page, click the EXIT button to close the pop-up window.

4.7.5 Using a Single Diagram Page to Monitor Multiple Devices


A typical site will contain a large number of similar devices. There are two methods for creating
pages that display detailed information about these devices. The most elaborate method is to create
individual pages for each device. While you may copy the devices from one page to another, you
will still have to rename each shape and reassign the aliases.
Visual T&D Diagram Editor provides a method that greatly simplifies this process. You can create
a single page that is dynamically mapped to the devices when you run the diagram. This approach
saves time and effort not only when you first draw the diagram page, but also if you subsequently
need to make changes to the diagram. You have only one page to change.
To do this, you will follow a few simple steps, which are best explained by an example.
Suppose that you have drawn your main diagram page. You would now like to monitor the data
points of 3 identical ION6200 devices located on lines 1, 2 and 3, respectively. You would like to
have the information for each device appear in a separate pop-up window that you would display

Visual T&D Diagram Editor User Guide • 71


by clicking a button on the main diagram page. You can achieve this by drawing a single page to
represent the ION6200 device.
Proceed as follows:
 Using the View menu Pages command, add a new page named ION6200.
 In the Action tab, select Create new window, and then select Use the following shape
renaming tables.
 Add three-shape renaming tables to the page, to which you assign meaningful names, such as
ION6200_L1, ION6200_L2, and ION6200_L3, respectively.

To add each table:


 Enter a table name in the upper box of the Tables section, and click Add.

The name of the new table gets added to the list shown in the lower box of the Tables
section.

 Click OK.
 Display the new ION6200 page:
 In the Pages window, select the ION6200 page.
 Click Show.
 Add the desired shapes to the page, and use aliases rather than data point names for the
animation effects.

In the example below, we created 3 animated shapes, to which we assigned the following
names:
 Measures.
This shape shows currents, line-to-neutral voltages, and line-to-line voltages.
 CommStatus.
This shape shows the device communication status.
 ExitButton.
This shape is a Visual TD library shape Click Page Close button that we will use to close
the page.

• 72 Chapter 4: Sharing Diagram Components


 In the Pages window, select the ION6200 page, and click Properties.
 In the Modify Page window, select the ION6200_L1 renaming table and click the Edit
button.

Note: If no shape is present on the page, the Edit button is disabled.

 In the Rename Shapes window, rename each shape as shown below:

When you run the animation, aliases used on the page will be resolved using the prefix you
specified here. For example, if the Measures shape has aliases called [IA], [IB], [IC] and
[IAvg], these will be dynamically resolved to ION_L1_IA, ION_L1_IB, ION_L1_IC and
ION_L1_IAvg.
 Click OK to return to the Modify Page window.
 Select the ION6200_L2 renaming table and rename the same three shapes with ION_L2_,
so the aliases can be resolved using the ION_L2_ prefix. Repeat the process for table
ION6200_L3, renaming the three shapes with ION_L3_.
 Display the background page of your diagram.
 From the Library menu, choose Manager.
 Select the Visual TD library, expand the Generic branch.
 Click the Buttons folder, drag and drop three Click Page Open buttons onto your diagram.
 Assign to the first button shape, the name of the first renaming table: ION6200_L1, and
enter the text to be displayed on the button.

Visual T&D Diagram Editor User Guide • 73


 Assign to the second button shape, the name of the second renaming table: ION6200_L2,
and enter the text to be displayed on the button.
 Assign to the third button shape, the name of the third renaming table: ION6200_L3, and
enter the text to be displayed on the button.

The labels on the buttons are arbitrary. The names of the 3 button shapes, however, are not
arbitrary. They must match the names of the 3 shape renaming tables. If you need help
assigning names to the button shapes or modifying the text labels, see “Displaying the Pages
of a Multiple-Page Diagram”, page 69.

 From the Library menu, choose Manager, and then from the Common platforms Visual
TD and SMP Gateway library, under the Generic branch, open the VBA folder, drag and
drop the ResolveAlias shape onto your diagram.
 Add the ResolveByName event handler to each shape on the ION6200 diagram page that
requires alias resolution. For instructions, refer to “Automatically Assigning Aliases to
Variables”, page 60.
 For each of the three pages to be displayed, create a Visual Basic procedure that calls the
Document.OpenPage method to display the diagram page. The parameters of the method
must:
 specify the name of the page to be opened, namely, ION6200 in this example;
 specify the name of the button shape that will be used to open the page.

Note: You will find an in-depth discussion on how to create Visual Basic scripts under
“Working with Scripts”, page 77.

You are now ready to run your diagram.


 In the Animation menu, click Run.
 Click the ION 6200 L1 button to display the ION6200 page in a pop-up window showing
the values for the ION6200 device on line 1, and then click the EXIT button to return to the
main diagram page.
 Click the ION 6200 L2 button to display the ION6200 page in a pop-up window showing
the values for the ION6200 device on line 2, and then click the EXIT button to return to the
main diagram page.
 Click the ION 6200 L3 button to display the ION6200 page in a pop-up window showing
the values for the ION6200 device on line 3, and then click the EXIT button to return to the
main diagram page.

The screenshot below shows the pop-up window for the ION6200 device located on line 2.

• 74 Chapter 4: Sharing Diagram Components


Visual T&D Diagram Editor User Guide • 75
5 Working with Scripts

The basic functions of Diagram Editor are all you need to create sophisticated animated diagrams
that provide you with a basic real-time representation of a monitored process. While this may be
sufficient in many cases, the real power of Diagram Editor becomes available when you use the
built-in Visual Basic language to create scripts that support operator interaction.
The Visual T&D Diagram Editor includes the Microsoft Visual Basic for ApplicationsTM (VBA)
technology. Using this technology, you can create sophisticated diagrams whereby operators can
use the mouse to display detailed views of your site and control the values of the data points.
Each shape you create in a diagram can generate events that launch Visual Basic scripts when the
shapes are added to a diagram or when the operator clicks on them with the mouse. These scripts
can open new diagram pages and access the Visual T&D server to read or write data points in
order to perform sophisticated control operations.

Note: VBA scripts do not work in SMP Gateway HMI diagrams that are designed using
Visual T&D Diagram Editor. In some case, you can achieve the same results
using Interactions (see page 42), which are supported on the SMP Gateway.

5.1 Diagram Editor Events


In order to create interactive diagrams, you will create scripts that are invoked whenever the
operator performs an operation such as clicking or double-clicking on a shape or moving the
mouse over a shape.
When the operator performs such an operation, Diagram Editor generates an event that you can
process by associating it with a Visual Basic procedure in your script. To create the scripts, you
will use the Visual Basic Wizard and the Visual Basic Editor.
The Visual Basic Wizard assists you in managing your Visual Basic project. The Wizard guides
you through the steps required to create new program modules and new Visual Basic procedures.
You will also use the Wizard to associate events and shapes with specific Visual Basic procedures.
Your Visual Basic project can contain as many event handling procedures as you want. You can
create an individual event handler for each shape, or share a single handler for any number of
shapes.

5.1.1 Events and Operation Modes


As described in “Operation Modes”, page 3, Diagram Editor provides two modes of operation: the
Design mode and the Animation mode.
Some Diagram Editor events are designed to support user interaction while in the Animation
mode; some other events are designed to support designer interaction in the Design mode.

Visual T&D Diagram Editor User Guide • 77


5.1.2 The Click Event
When you click on a shape in the Animation mode, Diagram Editor invokes a procedure to
process the event:
Public Function OnClick(DiagramShape As Shape, _
X As Long, Y As Long, _
VirtKeyCode As VIRTUAL_KEY_CODE, _
MouseButton As MOUSE_BUTTON)
' add your code to process the Click event
End Function
The Click event handler has the following parameters:

Parameter Description
DiagramShape The Shape object on which the operator clicked.

X The horizontal position of the mouse in the diagram.

Y The vertical position of the mouse in the diagram.

VirtKeyCode The keyboard keys that were pressed when the shape was double-clicked:
 VKC_NONE.
No keys were pressed.
 VKC_ALT.
The ALT key was pressed.
 VKC_CONTROL.
The CTRL key was pressed.
 VKC_SHIFT.
The SHIFT key was pressed.
A combination of the above keys may have been pressed when the mouse was
clicked.

MouseButton The mouse button that was used to click on the shape:
 MOUSE_LEFT_BUTTON.
The left button was clicked.
 MOUSE_MIDDLE_BUTTON.
The middle button or the wheel was clicked.
 MOUSE_RIGHT_BUTTON.
The right button was clicked.

Table 5-1 Click event handler parameters

5.1.3 The Double-Click Event


When you double-click on a shape in the Animation mode, Diagram Editor invokes a procedure to
process the event:
Public Function OnDoubleClick(DiagramShape As Shape, _
X As Long, Y As Long, _
VirtKeyCode As VIRTUAL_KEY_CODE, _
MouseButton As MOUSE_BUTTON)
' add your code to process the Double Click event
End Function
The Double-Click event handler has the following parameters:

• 78 Chapter 5: Working with Scripts


Parameter Description
DiagramShape The Shape object on which the operator double-clicked.

X The horizontal position of the mouse in the diagram.

Y The vertical position of the mouse in the diagram.

VirtKeyCode The keyboard keys that were pressed when the shape was double-clicked:
 VKC_NONE.
No keys were pressed.
 VKC_ALT.
The ALT key was pressed.
 VKC_CONTROL.
The CTRL key was pressed.
 VKC_SHIFT.
The SHIFT key was pressed.
A combination of the above keys may have been pressed when the mouse was
double-clicked.

MouseButton The mouse button that was used to double-click on the shape:
 MOUSE_LEFT_BUTTON.
The left button was double-clicked.
 MOUSE_MIDDLE_BUTTON.
The middle button or the wheel was double-clicked.
 MOUSE_RIGHT_BUTTON.
The right button was double-clicked.

Table 5-2 Double-Click event handler parameters

Note: You can process both the Click and Double-Click events for a particular shape.
Both events are supported for the same shape and are distinct.

5.1.4 The Mouse Enter event


When the operator moves the mouse over a shape in the Animation mode, Diagram Editor invokes
a procedure to process the event:
Public Function OnEnter(DiagramShape As Shape)
' add the code to process the Mouse Enter event
End Function
The Mouse Enter event handler has the following parameters:

Field Description
DiagramShape The Shape object that the mouse entered.

Table 5-3 Mouse Enter event handler parameters

5.1.5 The Mouse Leave Event


When the mouse leaves a shape in the Animation mode, Diagram Editor invokes a procedure to
process the event:

Visual T&D Diagram Editor User Guide • 79


Public Function OnLeave(DiagramShape As Shape)
' add the code to process the Mouse Leave event
End Function
The Mouse Leave event handler has the following parameters:

Field Description
DiagramShape The Shape object that the mouse left.

Table 5-4 Mouse Leave event handler parameters

5.1.6 The Add Shape to Diagram Event


When you add a library shape to your diagram in the Design mode, Diagram Editor invokes a
procedure to process the event:
Public Function AddShape(DiagramShape As Shape, Page As String)
' add the code to process the Add Shape to Diagram event
End Function
The Add Shape to Diagram event handler has the following parameters:

Field Description
DiagramShape The Shape object added to the page.

Page The name of the diagram page to which the shape is added.

Table 5-5 Add Shape to Diagram event handler parameters

5.1.7 The Resolve Aliases Event


When you select the Resolve Aliases command from the Animation menu in the Design mode,
Diagram Editor invokes a procedure to process the event.
Public Function ResolveAlias(DiagramShape As Shape)
' add the code to process the Resolve Aliases event
End Function
The Resolve Aliases event handler has the following parameters:

Field Description
DiagramShape The Shape object for which you want to resolve the aliases.

Table 5-6 Resolve Aliases event handler parameters

5.2 The Diagram Editor Object Model


The scripts you create execute in an environment consisting of Diagram Editor application, the
current diagram, shapes in the diagram, and the Visual T&D server. The Visual Basic language
provides access to objects that represent these elements. Your script interacts with the environment
by accessing the methods and properties of the objects.
The document entitled Visual T&D Developer Reference explains the Visual T&D Diagram object
model, in detail.

• 80 Chapter 5: Working with Scripts


5.3 The Visual Basic Wizard
The Visual Basic Wizard assists you in managing your Visual Basic for Applications (VBA)
project and in performing the following tasks:
 Creating new modules in the Visual Basic project.
 Creating new procedures in the Visual Basic project.
 Assigning procedures to events and shapes in your diagram.

Note: You do not need to use the Wizard to create modules and procedures. You can
perform these operations with the Visual Basic Editor. However, you must use
the Wizard to assign procedures to shapes and events.

5.3.1 Creating a New Module


You can use the Wizard to create a new Visual Basic module.

To create a new module using the Visual Basic Wizard:


 From the Animation menu, choose Visual Basic Wizard.
 Select Create a new module, and click Next.
 Enter the name of the module, and then click Finish.

Note: You can also create a new module using the Module command from the Insert
menu of the Visual Basic Editor.

5.3.2 Creating a New Procedure


You can use the Wizard to create a new procedure in a Visual Basic module:

To create a new procedure using the Visual Basic Wizard:


 From the Animation menu, choose Visual Basic Wizard.
 Select Add a new procedure, and then click Next.

Visual T&D Diagram Editor User Guide • 81


 Select the destination module in the Create in this module box.
 In the For an event of type box, select the type of event to be processed.

The Wizard will provide the correct parameters according to the type of event.
 Enter the name of the procedure. Your scripts will be easier to read if you select a name that
corresponds to the type of event to be processed, such as OnClick or MyShape_Click.
 Select the type of procedure. Use Function to create a Visual Basic procedure that can return
a result and that you can use in an expression. Use Subroutine to create a procedure that does
not return a result.
 Select the scope of the procedure. Use Public to indicate a procedure that is accessible to all
other procedures in all modules. Use Private to indicate a procedure that is accessible only to
the procedures in the module in which it is declared.
 Enter the parameters (arguments) and return type for the procedure. The contents of this field
are automatically set when you select an event type to be processed.
 Click Next.

The Event Handlers window will open at the end of this procedure creation (see “Assigning
Procedures to Events and Shapes”, below).

Note: You can also create a new procedure using the Procedure command from the
Insert menu of the Visual Basic Editor.

5.3.3 Assigning Procedures to Events and Shapes


You will use the Wizard to assign procedures to events and shapes in your drawing.

To assign procedures to events and shapes using the Visual Basic Wizard:
 From the Animation menu, choose Visual Basic Wizard.
 Select Add or modify diagram event handlers, and then click Next.

• 82 Chapter 5: Working with Scripts


The following table explains all controls available from the Event Handlers window:

Control Description
Select shape Displays the hierarchy of the shape selected in the diagram, or of all available
shapes if none was selected.
Select the shape or group to which you want to assign a procedure.

Event Select the type of event to be processed, between the following:


 Click
 Double-click
 Mouse Enter
 Mouse Leave
 Add shape to diagram
 Resolve alias

Module Select the module that contains the procedure.

Procedure Enter the name of the procedure.

Propagate to parents Indicates whether the event will be propagated upwards in the hierarchy to the
enclosing groups.

Propagate to Indicates whether the event will be propagated downwards in the hierarchy to the
children enclosed groups and shapes.

Add Adds the procedure to the list of event handlers.

Delete Removes the selected procedure from the list of event handlers.

Event handlers Displays the list of event handlers.

Table 5-7 Event Handlers window controls

5.4 The Visual Basic Integrated Development


Environment
Visual T&D Diagram Editor provides a standard integrated development environment (IDE) for
convenient development of the Microsoft® Visual Basic® for Applications (VBA) procedures that
you will require to automate your diagrams.
The development environment is consistent with those found across all VBA-enabled applications
such as Microsoft® Office. If you have used VBA in any of these applications, Diagram Editor’s
environment will be familiar to you.
For complete details on using the development environment and writing procedures, refer to the
VBA online help.

Visual T&D Diagram Editor User Guide • 83


5.4.1 Starting the Visual Basic Editor
The Visual Basic Editor is a built-in part of Diagram Editor.

To start Visual Basic Editor:


 From the Animation menu, choose Visual Basic Editor.
To program the various functions required for your application, refer to the Visual T&D Developer
Reference.

• 84 Chapter 5: Working with Scripts

You might also like