StruxureWare Building Operation

Creating and Configuring Graphics

Tutorial Guide
04-14027-01-en
July 2013
StruxureWare Building Operation
Creating and Configuring Graphics
Tutorial Guide
04-14027-01-en
July 2013
Copyright © 2013 Schneider Electric. All rights reserved.
The Schneider Electric brand and any registered trademarks of Schneider Electric Industries SAS referred to in this guide are the sole property of Schneider
Electric SA and its subsidiaries. They may not be used for any purpose without the owner's permission, given in writing. This guide and its content are
protected, within the meaning of the French intellectual property code (Code de la propriété intellectuelle français, referred to hereafter as "the Code"), under
the laws of copyright covering texts, drawings and models, as well as by trademark law. You agree not to reproduce, other than for your own personal, non-
commercial use as defined in the Code, all or part of this guide on any medium whatsoever without Schneider Electric's permission, given in writing. You also
agree not to establish any hypertext links to this guide or its content. Schneider Electric does not grant any right or license for the personal and non-
commercial use of the guide or its content, except for a non-exclusive license to consult it on an "as is" basis, at your own risk. All other rights are reserved.
Trademarks and registered trademarks are the property of their respective owners.
 Contents

Introduction
1 About This Guide ........................................................... 9
1.1 Purpose of This Guide ................................................................. 11
1.2 How This Guide is Organized ...................................................... 12
1.3 Typographical Conventions ......................................................... 13

2 Additional Information .................................................. 15

2.1 Where to Find Additional Information ........................................... 17
2.2 Regulatory Notices ...................................................................... 18

Tutorial
3 Our Case Study ........................................................... 21
3.1 University X ................................................................................. 23
3.2 Requirements and Specifications ................................................ 26
3.2.1 Devices Used for This Case Study ............................................. 26
3.2.2 Software Used in This Tutorial ................................................... 26
3.2.3 Specifications ........................................................................... 26
3.3 Focus of This Tutorial .................................................................. 27
3.3.1 Pre-existing Database Folders and Programs ............................ 27
3.3.2 Pre-existing Database Objects .................................................. 30

4 Creating a Graphic and Preparing the Editor ................ 31

4.1 Creating a Graphic ...................................................................... 34
4.2 Importing a Components Category ............................................. 36
4.3 Adjusting the Graphic Work Area ................................................. 37

5 Using the Basic Editor Tools to Design a Graphic ......... 39

5.1 Adding a Layer ............................................................................ 42
5.2 Inserting a Picture ...................................................................... 43
5.3 Adding a Component .................................................................. 44
5.4 Adding Text Using the Text Tool .................................................. 47
5.5 Adding Text Using the Textbox tool ............................................. 49
5.6 Drawing a Rectangle ................................................................... 51

6 Creating and Saving Components and Snippets .......... 53

04-14027-01-en, July 2013 Creating and Configuring Graphics

5
 6.1 Adding a Snippet ........................................................................ 56
6.2 Grouping Drawing Objects as a Component ............................... 58
6.3 Saving as a Component .............................................................. 59
6.4 Making Text Content Dynamic .................................................... 62
6.5 Adding an Animated Picture ........................................................ 66
6.6 Making an Animated Picture Dynamic ......................................... 68
6.7 Testing a Graphic in Preview Mode ............................................. 70
6.8 Saving as a Snippet .................................................................... 71
6.9 Adding a Link .............................................................................. 73

7 Working with Graphics in WorkStation ......................... 75

7.1 Importing a Solution .................................................................... 78
7.2 Binding Values Using a Binding Template .................................... 79
7.3 Creating a Panel ......................................................................... 87
7.4 Summary .................................................................................... 91

Creating and Configuring Graphics 04-14027-01-en, July 2013

6
Introduction

The Introduction part contains information on the purpose

of this guide, how this guide is organized, where to find
more information, and information on regulatory notices.
1 About This Guide

Topics
Purpose of This Guide
How This Guide is Organized
Typographical Conventions
 1 About This Guide
1.1 Purpose of This Guide

1.1 Purpose of This Guide

This tutorial provides step-by-step instructions for creating and configuring new
graphics, including creating, customizing, and using Components and Snippets. It
also provides instructions for re-using existing .tgml files.
This tutorial focuses on the following Building Operation Engineering Certification
objectives:
• Create a graphic
• Bind a graphic
• Create a panel

04-14027-01-en, July 2013 Creating and Configuring Graphics

11
1 About This Guide
1.2 How This Guide is Organized

1.2 How This Guide is Organized

This Building Operation Guide is divided into the following parts:

Introduction
The Introduction part contains information on the purpose of this guide, how this
guide is organized, where to find more information, and information on regulatory
notices.

Tutorial
The Tutorial part contains a step-by-step description of how to carry out different
tasks. If you want more information, see WebHelp or the corresponding Building
Operation Guide.
The Tutorial part includes a case study for a fictional customer called University X.
You can decide if you want to follow the example or use the described procedures
as reference information. The case study in this tutorial is an example of a typical
way of configuring Building Operation for a customer. When reading through this
tutorial, you might not have access to the devices, programs, and other files that
are needed for the fictional customer University X. However, the purpose of having
a case study is to see the procedures put in context, so you see how the
procedures could be used when configuring Building Operation, devices, or
programs for your customer.

Creating and Configuring Graphics 04-14027-01-en, July 2013

12
 1 About This Guide
1.3 Typographical Conventions

1.3 Typographical Conventions

Building Operation Guides use the following specially marked texts:

Tip
Helps you understand the benefits and capabilities of the product.

Note
Provides you with supplementary information.

Important
Alerts you to supplementary information that is essential to the completion of a
task.

Caution
Alerts you to a condition that can cause loss of data.

Warning
Alerts you to a condition that can cause product damage or physical harm.

Bold texts:
User interface items, such as property names and buttons, are written in bold, for
example "On the File menu, select New."
Example texts:
All the example related information is indicated by blue lines and bullets.

04-14027-01-en, July 2013 Creating and Configuring Graphics

13
2 Additional Information

Topics
Where to Find Additional Information
Regulatory Notices
 2 Additional Information
2.1 Where to Find Additional Information

2.1 Where to Find Additional Information

All the technical Building Operation information is available online, on WebHelp.
You also find additional information in the Building Operation Guides:
• Hardware Reference Guide
• Plain English and Script Difference Guide
• Function Block Editor and Menta Editor Difference Guide
• WebReports Reference Guide
• WebReports Operating Guide
• System Reference Guide
• Technical Reference Guide
• WorkStation Operating Guide
• IT Reference Guide
• WebStation Operating Guide
• System Upgrade Reference Guide
• Administering Reports Tutorial Guide
• Configuring an Automation Server as a Controller Tutorial Guide
• Creating and Configuring a LonWorks Network with Xenta LonWorks Devices
Tutorial Guide
• Creating and Configuring a Modbus Network Tutorial Guide
• Creating and Configuring Alarms Tutorial Guide
• Creating and Configuring Graphics Tutorial Guide
• Creating and Configuring Schedules Tutorial Guide
• Creating and Configuring Trend Logs Tutorial Guide
• Creating and Configuring Users Tutorial Guide
• Starting a Project Tutorial Guide
• Creating and Configuring a BACnet Network with b3 BACnet Devices Tutorial
Guide
• Creating and Configuring a LonWorks Network with MNL LonWorks Devices
Tutorial Guide

04-14027-01-en, July 2013 Creating and Configuring Graphics

17
2 Additional Information
2.2 Regulatory Notices

2.2 Regulatory Notices

UL 916 Listed products for the Unites States and Canada, Open
Class Energy Management Equipment.

WEEE - Directive of the European Union (EU)

This equipment and its packaging carry the waste of electrical and electronic
equipment (WEEE) label, in compliance with European Union (EU) Directive
2002/96/EC, governing the disposal and recycling of electrical and electronic
equipment in the European community.

CE - Compliance to European Union (EU)

2004/108/EC Electromagnetic Compatibility Directive
This equipment complies with the rules, of the Official Journal of the European
Union, for governing the Self Declaration of the CE Marking for the European Union
as specified in the above directive(s) per the provisions of the following standards:
IEC/EN 61326-1 Product Standard, IEC/EN 61010-1 Safety Standard.

Industry Canada
ICES-003
This is a Class B digital device that meets all requirements of the Canadian
Interference Causing Equipment Regulations.

C-Tick (Australian Communications Authority (ACA))

AS/NZS 3548
This equipment carries the C-Tick label and complies with EMC and radio
communications regulations of the Australian Communications Authority (ACA),
governing the Australian and New Zealand (AS/NZS) communities.

Federal Communications Commission

FCC Rules and Regulations CFR 47, Part 15, Class B
This device complies with part 15 of the FCC Rules. Operation is subject to the
following two conditions: (1) This device may not cause harmful interference. (2)
This device must accept any interference received, including interference that may
cause undesired operation.

Creating and Configuring Graphics 04-14027-01-en, July 2013

18
Tutorial

The Tutorial part contains a step-by-step description of

how to carry out different tasks. If you want more
information, see WebHelp or the corresponding Building
Operation Guide.
The Tutorial part includes a case study for a fictional
customer called University X. You can decide if you want to
follow the example or use the described procedures as
reference information. The case study in this tutorial is an
example of a typical way of configuring Building Operation
for a customer. When reading through this tutorial, you
might not have access to the devices, programs, and other
files that are needed for the fictional customer University X.
However, the purpose of having a case study is to see the
procedures put in context, so you see how the procedures
could be used when configuring Building Operation, devices,
or programs for your customer.
3 Our Case Study

When new knowledge is to be acquired, it is often

advantageous to work with a realistic example. For
this purpose we use a case study, which is basically
the same in all Building Operation Tutorial Guides.

Topics
University X
Requirements and Specifications
Focus of This Tutorial
 3 Our Case Study
3.1 University X

3.1 University X
We are going to install Building Operation as the building management system for
University X. The university is a campus of buildings for which heating and cooling
are supplied from a Central Plant with an underground distribution system. The
case study focuses on the renovation of the Central Plant and the expansion of the
School of Business.

Figure: The School of Business and the Central Plant

The Cooling Plant consists of a single chiller with a primary-secondary pumping
system. The secondary water loop serves four VAV air handling units with chilled
water coils located in the School of Business. The secondary loop has two water
pumps. Only one pump is required for 100 % of the load. The second pump
provides 100 % backup. The secondary pumps are variable speed. The primary
chilled water loop has a single constant volume chilled water pump. The condenser
loop rejects heat by means of a cooling tower. The condenser loop has a single
constant volume condenser water pump. The tower has two constant speed, draw-
through fans to increase the capacity of the tower above the natural draft capacity.
A diverting valve can be used to protect the chiller from condenser water thermal
shock. The water leaving the condenser can be diverted back to the inlet of the
condenser without any cooling effect.

04-14027-01-en, July 2013 Creating and Configuring Graphics

23
3 Our Case Study
3.1 University X

Figure: Cooling Plant diagram

The heating plant consists of two boilers in parallel, each with their own inline
pumps. Much of the time only one boiler is required to meet the load but under
greater load, both boilers will operate at the same time. The flow from the two
boilers comes together in a common supply header. There is a line from the supply
header to the mechanical systems that require a source of hot water. This line has
two constant volume distribution pumps in parallel. Only one is required to meet
the load. The second is back-up and lead-lag is used to alternate which pump
runs. The water returning from the mechanical systems flows into the return header
where it can be pumped by the inline pumps through the boilers. There is a
common line between the supply header and the return header. When the inline
pumps are flowing at a rate that exceeds the distribution pump flow rate, the water
flow in the common line is from the supply header to the return header. When the
distribution pump is flowing at a rate that exceeds the combined inline pump flow
rates, flow in the common line is from the return header to the supply header. Each
boiler has its own self contained control system that interfaces with Building
Operation through a combination of binary electrical control and network variables.
The inline pumps are locally controlled by the self contained control system.

Creating and Configuring Graphics 04-14027-01-en, July 2013

24
 3 Our Case Study
3.1 University X

Figure: Heating Plant diagram

04-14027-01-en, July 2013 Creating and Configuring Graphics

25
3 Our Case Study
3.2 Requirements and Specifications

3.2 Requirements and Specifications

To be able to configure Building Operation for University X, the following devices
and software are used in this tutorial.

3.2.1 Devices Used for This Case Study

The following devices are used for this case study:
• Power Supply, PS-24V
• Automation Server, AS-B or AS-L
• I/O Modules:
– 1 x DI-16
– 1 x DO-FA-12
– 2 x UI-8/AO-4

3.2.2 Software Used in This Tutorial

The following software is used in this tutorial:
• License Administrator, and a valid license
• Enterprise Server
• WorkStation

3.2.3 Specifications
You find specifications in the Building Operation datasheets for Enterprise Server,
WorkStation, PS-24V Power Supply, Automation Server, and I/O Module Family.

Creating and Configuring Graphics 04-14027-01-en, July 2013

26
 3 Our Case Study
3.3 Focus of This Tutorial

3.3 Focus of This Tutorial

The university requires graphics monitoring and controlling the Cooling
Plant. Additionally, they require a Home Page that provides general information, a
main panel graphic for navigation, and a Floor Plan that changes color based upon
the zone temperature.
In this tutorial, you create the Cooling Plant graphic from scratch using TGML
Components and Snippets. You learn how to import animated .gifs, how to use the
basic editor tools, and create custom components and snippets. You use pre-
created .tgml files for the Home Page, Floor Plan, and main panel graphics. Finally,
you bind and link the graphics in WorkStation to enable live data to be displayed
and make navigation possible.

3.3.1 Pre-existing Database Folders and Programs

For University X, the Enterprise Server called University X ES1 has the following
folder structure:

Figure: University X ES1 and its folder structure

The Automation Server called CPlant AS controls the Cooling Plant and Heating
Plant.
CPlant AS has the following folder structure:

04-14027-01-en, July 2013 Creating and Configuring Graphics

27
3 Our Case Study
3.3 Focus of This Tutorial

Figure: CPlant AS and its folder structure

CPlant AS has the following programs for the Cooling Plant:

Creating and Configuring Graphics 04-14027-01-en, July 2013

28
 3 Our Case Study
3.3 Focus of This Tutorial

Figure: CPlant AS and its programs for the Cooling Plant

CPlant AS has the following programs for the Heating Plant:

04-14027-01-en, July 2013 Creating and Configuring Graphics

29
3 Our Case Study
3.3 Focus of This Tutorial

Figure: CPlant AS and its programs for the Heating Plant

3.3.2 Pre-existing Database Objects

For University X, the following objects are available in the Building Operation
database prior to creation and configuration of graphics:
• ...University X ES1/Central Plant Bldg/Energy Meter Trend Chart
.

Creating and Configuring Graphics 04-14027-01-en, July 2013

30
4 Creating a Graphic and
Preparing the Editor

Topics
Creating a Graphic
Importing a Components Category
Adjusting the Graphic Work Area
 4 Creating a Graphic and Preparing the Editor

Our Example
The University X operators require graphics to make it easier to navigate, monitor,
and control the system.
In this chapter, you create graphics in WorkStation and then open the graphics for
editing. You also configure Graphics Editor to make creating the graphics efficient.

04-14027-01-en, July 2013 Creating and Configuring Graphics

33
4 Creating a Graphic and Preparing the Editor
4.1 Creating a Graphic

4.1 Creating a Graphic

You create a graphic object in WorkStation to make a container for the graphic that
you create in Graphics Editor.
For more information, see the Graphics in WorkStation topic on WebHelp.
In this example, you create the Cooling Plant graphic object in WorkStation.

To create a graphic
1. In WorkStation, in the System Tree pane, select the folder or server where
you want to create the graphic. In this example, select ...University X
ES1/Servers/CPlant AS/Graphics.
2. On the File menu, point to New and then click Graphic.
3. In the Name box, type a name for the graphic. In this example, type
“Cooling Plant Graphic.”

4. In the Description box, type a description for the graphic. In this example,
type “Graphic for managing the Cooling Plant.”
5. Click Next.
6. Click Create.

For this example, repeat the procedure to create the following graphic objects:

Creating and Configuring Graphics 04-14027-01-en, July 2013

34
 4 Creating a Graphic and Preparing the Editor
4.1 Creating a Graphic

Table: Graphics

Name Location Description File Name

Floor Plan Graphic ...University X Plan graphic for floor Floor Plan.tgml
ES1/Servers/CPlant one
AS/Graphics

Heating Plant ...University X Graphic for Heating Plant.tgml

Graphic ES1/Servers/CPlant managing the
AS/Graphics Heating Plant

Home Page Graphic ...University X Home Page graphic Home Page.tgml

ES1/Graphics for University X

Banner Graphic ...University X Graphic for the Banner.tgml

ES1/Application/Pan University X header
els

04-14027-01-en, July 2013 Creating and Configuring Graphics

35
4 Creating a Graphic and Preparing the Editor
4.2 Importing a Components Category

4.2 Importing a Components Category

You import a components category into the components library to be able to reuse
the components between different Building Operation projects.
For more information, see the Categories topic on WebHelp.
In this example, you import the Custom Components components category, which
provides components for the Cooling Plant graphic.

To import a components category

1. In Graphics Editor, in the Components pane, right-click and then click
Import.
2. Select the .tgmlcomponentArchive file that contains the components you want
to import. In this example, select Custom
Components.tgmlcomponentArchive.
3. Click OK.

For this example, repeat the procedure to import the Heating Plant and Cooling
Plant component categories by using the following files:
• Cooling Plant.tgmlcomponentArchive
• Heating Plant.tgmlcomponentArchive

Creating and Configuring Graphics 04-14027-01-en, July 2013

36
 4 Creating a Graphic and Preparing the Editor
4.3 Adjusting the Graphic Work Area

4.3 Adjusting the Graphic Work Area

You adjust the graphic work area when you initially edit the graphic in order to
ensure the work area settings, such as graphic size and background color, are
appropriately defined for display in WorkStation.
For more information, see the Components topic on WebHelp.
In this example, you adjust the work area for the Cooling Plant graphic.

To adjust the graphic work area

1. In WorkStation, in the System Tree pane, select the graphic you want to
edit. In this example, select ...University X ES1/Servers/CPlant
AS/Graphics/Cooling Plant Graphic.
2. On the Actions menu, click Edit.
3. In Graphics Editor, in the Objects pane, select the Tgml element.

4. In the Properties pane, in the Background box, select the background

color. In this example, select white (#FFFFF).

5. In the Stretch box, select the the behavior of the graphic when displayed in
WorkStation. In this example, select Uniform.
6. In the Height box, type the value for the height of the work area. In this
example, type “768.”
Continued on next page

04-14027-01-en, July 2013 Creating and Configuring Graphics

37
4 Creating a Graphic and Preparing the Editor
4.3 Adjusting the Graphic Work Area

7. In the Width box, type the value for the width of the work area. In this
example, type “1024.”

8. On the File menu, click Save.

For this example, repeat the procedure to adjust the work area for the Home Page
graphic.
• Location: ...University X ES1/Graphics/Home Page Graphic
• Background: white (#FFFFF)
• Stretch: Uniform
• Height: 768
• Width: 1024

Creating and Configuring Graphics 04-14027-01-en, July 2013

38
5 Using the Basic Editor Tools to
Design a Graphic

Topics
Adding a Layer
Inserting a Picture
Adding a Component
Adding Text Using the Text Tool
Adding Text Using the Textbox tool
Drawing a Rectangle
 5 Using the Basic Editor Tools to Design a Graphic

Our Example
In this chapter, you use layers to maximize engineering efficiency. You also insert
pictures, use pre-existing components, add text, and use drawing tools.

04-14027-01-en, July 2013 Creating and Configuring Graphics

41
5 Using the Basic Editor Tools to Design a Graphic
5.1 Adding a Layer

5.1 Adding a Layer

You add layers to make it easier to select an individual element or groups of
elements in the work area when you edit the graphic. Layers are especially useful
when you use a background graphic in your work area.
For more information, see the Layers topic on WebHelp.
In this example, you create the Background Layer in the Cooling Plant Graphic.

To add a layer
1. In Graphics Editor, on the View menu, click Layers.

2. In the Layers pane, on the Layers toolbar, click the New Layer button .

3. In the layer list, double click the layer name and type the name of the layer.
In this example, type “Background Layer.”

4. Press Enter.
5. On the File menu, click Save.

For this example, repeat the procedure to create the Top Layer layer.

Creating and Configuring Graphics 04-14027-01-en, July 2013

42
 5 Using the Basic Editor Tools to Design a Graphic
5.2 Inserting a Picture

5.2 Inserting a Picture

You insert a picture when you want to add an image, such as a .bmp or .png file,
into a graphic.
For more information, see the Pictures topic on WebHelp.
In this example, you insert the University - X Logo White Background.png picture to
the Background Layer of the Cooling Plant graphic.

To insert a picture
1. In Graphics Editor, in the Layers pane, select the layer where you want to add
the picture. In this example, select Background Layer.
2. On the Drawing toolbar, click Insert Picture.
3. In the work area, click where you want to locate the upper-left corner of the
picture.
4. Select the picture you want to insert into the graphic. In this example,
select ...Project University X\Images\University - X Logo White
Background.png.
5. On the Drawing toolbar, click Select.
6. On the Options toolbar or in the Properties pane, adjust the appearance of
the picture. In this example, use the following picture properties: Left: 818,
Top: 710, Height: 41, and Width: 182.
7. On the File menu, click Save.

For this example, repeat the procedure to add the Cooling Plant Background.png
to the Background Layer. Use the following picture settings:
• Location: ...Project University X\Images\Cooling Plant Background.png
• Left: 7
• Top: 180

04-14027-01-en, July 2013 Creating and Configuring Graphics

43
5 Using the Basic Editor Tools to Design a Graphic
5.3 Adding a Component

5.3 Adding a Component

You add components to the graphic instead of drawing all the drawing objects
yourself to simplify the graphics creation process.
For more information, see the Components topic on WebHelp.
In this example, you add the Cooling Tower component to the Cooling Plant
graphic.

To add a component
1. In Graphics Editor, in the Layers pane, select the layer where you want to add
the component. In this example, select Top Layer.
2. In the Components pane, click the component category tab that contains
the component you want to use. In this example, click Cooling Plant.
3. Select the component you want to add. In this example, select
CoolingTowerFor_gifs.

4. Drag the component to the work area.

Continued on next page

Creating and Configuring Graphics 04-14027-01-en, July 2013

44
 5 Using the Basic Editor Tools to Design a Graphic
5.3 Adding a Component

5. In the Properties pane, in the Name box, type the name of the component.
In this example, type “Cooling Tower.”

Note
You only need to name the drawing object if you will be binding the
object. Naming the object now will help you identify the object later.

6. On the Options toolbar or in the Properties pane, adjust the appearance of

the component. In this example, use the following component properties:
Left: 65 and Top: 140.
7. On the File menu, click Save.

For this example, repeat the procedure to add the following components to the
Cooling Plant graphic:

Table: Cooling Plant Component Category

Component Name Name Property Left Top

Pump Horizontal CdwPStatus 30 360

Flow Right

Pump Horizontal ChwPStatus 21 528

Flow Left

Chiller - Side On - 130 372

EnabledOff ChlrStatus 161 432

3 Port Valve Left - 301 336

Pump Horizontal SecChwP1Status 519 278

Flow Right

Pump Horizontal SecChwP2Status 519 371

Flow Right

2 Port Valve Up - 700 207

2 Port Valve Up - 700 299

2 Port Valve Up - 700 392

2 Port Valve Up - 700 485

04-14027-01-en, July 2013 Creating and Configuring Graphics

45
5 Using the Basic Editor Tools to Design a Graphic
5.3 Adding a Component

Continued
Component Name Name Property Left Top

DP CdwPStatus 49 346

DP ChwPStatus 39 513

DP SecChwP1Status 537 262

DP SecChwP2Status 537 357

DutyStandby SecChwP1Req 437 330

DutyStandby SecChwP2Req 437 423

Table: Custom Components Component Category

Component Name Name Property Left Top

Right Border - 838 33

Home Page Link Home Page 847 45

Heating Plant Link Heating Plant 846 167

Schedules Link Cooling Schedules 851 289

Trend Chart Button Trend Chart 856 420

Report Button Report 856 470

Seq of Ops Button Cooling Seq of Ops 856 520

Logs Button Extended Trend 856 570

Logs

Schneider Electric - 852 640

Logotype - White

Table: Basics Controls Component Category

Component Name Name Property Left Top

Switch ChlrIsBroken 871 613

Switch ChlrAlarmOpRst 908 613

Save your graphic.

Creating and Configuring Graphics 04-14027-01-en, July 2013

46
 5 Using the Basic Editor Tools to Design a Graphic
5.4 Adding Text Using the Text Tool

5.4 Adding Text Using the Text Tool

Text is typically used for adding labels or informative comments within your graphic.
You add a single line of text using the Text tool. Textboxes are used when you need
to wrap text.
For more information, see the Texts and Textboxes topic on WebHelp.
In this example, you add the title of the Cooling Plant graphic.

To add text using the Text tool

1. In Graphics Editor, in the Layers pane, select the layer you want to add the
text on. In this example, select Top Layer.
2. On the Drawing toolbar, click Text.
3. Click in the work area where you want the text to start.
4. Type the text you want to add to the graphic. In this example, type “Cooling
Plant.”

5. Press Enter.
6. On the Drawing toolbar, click Select.

7. On the Options toolbar or in the Properties pane, adjust the appearance of

the text. In this example, use the following text properties: Stroke: Seedling
green (#87D300), FontFamily: Arial, FontSize: 40, Left: 38, and Top: 48.
8. On the File menu, click Save.

For this example, repeat the procedures to add the following text labels on the
Cooling Plant graphic. Use the following text properties, Stroke: Black (#000000),
FontFamily: Arial, and FontSize: 15 px.

Text Left Top

Cooling 162 263

Condenser 170 360

Evaporator 173 475

Chw Pump 28 494

Primary 30 611

04-14027-01-en, July 2013 Creating and Configuring Graphics

47
5 Using the Basic Editor Tools to Design a Graphic
5.4 Adding Text Using the Text Tool

Continued
Text Left Top

Speed 478 278

Speed 478 375

AHU1 771 219

AHU2 771 313

AHU3 771 406

AHU4 771 499

Dynamic Text 76 544

Dynamic Text 574 300

Dynamic Text 574 394

Creating and Configuring Graphics 04-14027-01-en, July 2013

48
 5 Using the Basic Editor Tools to Design a Graphic
5.5 Adding Text Using the Textbox tool

5.5 Adding Text Using the Textbox tool

You add text within a textbox when you want to add several lines of text with
automatic line wrap within a defined area.
For more information, see the Texts and Textboxes topic on WebHelp.
In this example, you add the text label for the condenser pump in the Cooling Plant
graphic.

To add text using the Textbox tool

1. In Graphics Editor, in the Layers pane, select the layer you want to add the
text on. In this example, select Top Layer.
2. On the Drawing toolbar, click Textbox.
3. In the work area, click where you want to locate the upper-left corner of the
textbox.
4. Drag the pointer to where the lower-right corner of the textbox is to end.
5. Type the text you want to add to the graphic. In this example, type
“Condenser Pump.”

6. On the drawing toolbar, click Select.

7. Adjust the size of the textbox.

8. On the Options toolbar or in the Properties pane, adjust the appearance of
the text. In this example, use the following textbox properties: Stroke:
Black (#000000), FontFamily: Arial, FontSize: 15, HorizontalAlign:
Center, Left: 86, Top: 312, Height: 40, and Width: 94.
9. On the File menu, click Save.

For this example, repeat the procedures to add the following wrapped text labels.
Use the following text properties: Stroke: Black, FontFamily: Arial, FontSize:
15, and HorizontalAlign: Center.
• Secondary Pumps
– Left: 502
– Top: 221
– Height: 39
– Width: 106
• AHU Chilled Water Coils
– Left: 665
– Top: 155
– Height: 42

04-14027-01-en, July 2013 Creating and Configuring Graphics

49
5 Using the Basic Editor Tools to Design a Graphic
5.5 Adding Text Using the Textbox tool

– Width: 127

Creating and Configuring Graphics 04-14027-01-en, July 2013

50
 5 Using the Basic Editor Tools to Design a Graphic
5.6 Drawing a Rectangle

5.6 Drawing a Rectangle

You draw a rectangle when you need a four-sided figure with four 90 ° angles and
there is no component that works for this situation.
For more information, see the Drawing Tools topic on WebHelp.
In this example, you draw a rectangle as a part of the data field for the chilled water
pump in the Cooling Plant graphic.

To draw a rectangle
1. In Graphics Editor, in the Layers pane, select the layer you want to draw the
rectangle on. In this example, select Top Layer.
2. On the Drawing toolbar, click Rectangle.
3. In the work area, click where you want the rectangle to begin and drag the
pointer to where you want it to end. In this example, click the white space at
the bottom of the work area.

4. On the Drawing toolbar, click Select.

5. On the Options toolbar or in the Properties pane, adjust the appearance of

the rectangle. In this example, use the following rectangle properties:
Stroke: Grey (#808080), Height: 20, and Width:60.
6. On the File menu, click Save.

04-14027-01-en, July 2013 Creating and Configuring Graphics

51
6 Creating and Saving
Components and Snippets

Topics
Adding a Snippet
Grouping Drawing Objects as a Component
Saving as a Component
Making Text Content Dynamic
Adding an Animated Picture
Making an Animated Picture Dynamic
Testing a Graphic in Preview Mode
Saving as a Snippet
Adding a Link
 6 Creating and Saving Components and Snippets

Our Example
In this chapter, you use pre-existing snippets to control the animation in your
graphic. You also create a custom component and add dynamic text and links to
the graphic.

04-14027-01-en, July 2013 Creating and Configuring Graphics

55
6 Creating and Saving Components and Snippets
6.1 Adding a Snippet

6.1 Adding a Snippet

You add snippets to a graphic to add pre-programmed behaviors, such as colors
changing according to the state of a point or numerically displayed values.
In this example, you add a DynamicValueAndUnit snippet that is used for displaying
the value of several variables in the Cooling Plant graphic.

To add a Snippet
1. In Graphics Editor, in the Layers pane, select the layer where you want to add
the snippet. In this example, select Top Layer.
2. In the Snippet pane, select the snippet category tab that contains the snippet
you want to use. In this example, select Basic Functions.
3. Select the snippet you want to add to the graphic. In this example, select
DynamicValueAndUnit.

4. Drag the snippet to the work area or to a drawing object. In this example,
drag the snippet to the work area and then drag it on top of the data field
rectangle.
5. On the Drawing toolbar, click Select.
Continued on next page

Creating and Configuring Graphics 04-14027-01-en, July 2013

56
 6 Creating and Saving Components and Snippets
6.1 Adding a Snippet

6. On the Options toolbar or in the Properties pane, adjust the appearance of

the snippet. In this example, use the following DynamicValueAndUnit
properties: Decimals: 1, Stroke: Blue (#42B4E6), FontFamily: Arial, and
FontSize: 15.
7. On the File menu, click Save.

04-14027-01-en, July 2013 Creating and Configuring Graphics

57
6 Creating and Saving Components and Snippets
6.2 Grouping Drawing Objects as a Component

6.2 Grouping Drawing Objects as a

Component
You group multiple drawing objects within a graphic as a component for bind
naming and graphics design efficiency. In order to save your work to a components
library for reuse, the drawing elements must be grouped as a component.
In this example, you group the data field rectangle and the DynamicValueAndUnit
snippet as a component.

To group drawing objects as a component

1. In Graphics Editor, in the Layers pane, select the layer that contains the
drawing objects you want to group. In this example, select Top Layer.
2. On the work area, select all drawing objects that you want to group as a
component. In this example, select the data field rectangle and the
DynamicValueAndUnit snippet.
3. Right-click the selected objects, point to Group as, and then click
Component.
4. On the File menu, click Save.

Creating and Configuring Graphics 04-14027-01-en, July 2013

58
 6 Creating and Saving Components and Snippets
6.3 Saving as a Component

6.3 Saving as a Component

You save your components in the Components library so that they are available for
future use.
For more information, see the Components topic on WebHelp.
In this example, you save the previously grouped data field rectangle and the
DynamicValueAndUnit snippet as a component named Numeric Display in the My
Components category.

To save as a component
1. In Graphics Editor, on the work area, select the component you want to save
to highlight it in the Objects pane. In this example, select the data field
component.

2. From the Objects pane, drag the component to the components category
that you want to add the component to. In this example, drag to My
Components.

Important
You have to drag the component from the Objects pane. You can
not drag the component from the work area.

Continued on next page

04-14027-01-en, July 2013 Creating and Configuring Graphics

59
6 Creating and Saving Components and Snippets
6.3 Saving as a Component

3. In the Properties dialog box, in the Name box, type the name you want to
display in the components category. In this example, type “Numeric
Display.”

4. In the Description box, type the description you want to display as the
tooltip in the components category. In this example, type “Displays numeric
presentation with data field.”
5. In the Height box, type the height you want the component to have when it is
added to the work area. In this example, type “20.”
6. In the Width box, type the width you want the component to have when it is
added to the work area. In this example, type “60.”
7. Click OK.
The component is now saved in the Components library for use in the current
graphic and future graphics.

For this example, use the newly created Numeric Display component for adding the
following components to the Cooling Plant graphic. Use the Properties pane to add
the following values:

Name Left Top

ChwrTempRV 68 441

ChwsTempRV 283 441

CdwsTempCV 28 314

DivVlvCmd 263 326

TwrExitTempRV 14 219

CdwrTempCV 313 180

SecChwP1VFDCmd 469 297

SecChwP2VFDCmd 469 394

AHU1VlvPosn 741 196

AHU2VlvPosn 741 289

Creating and Configuring Graphics 04-14027-01-en, July 2013

60
 6 Creating and Saving Components and Snippets
6.3 Saving as a Component

Continued
Name Left Top

AHU3VlvPosn 741 382

AHU4VlvPosn 741 475

Save your graphic.

04-14027-01-en, July 2013 Creating and Configuring Graphics

61
6 Creating and Saving Components and Snippets
6.4 Making Text Content Dynamic

6.4 Making Text Content Dynamic

You make text content dynamic so that the text changes according to the value of
the variable it is bound to. This way you use only one text object to show different
texts depending on the value of the variable.
In this example, you make the text for the chilled water pump dynamic so the text
displays the status of the chilled water pump (Enabled or Off) in the Cooling Plant
graphic.

To make text content dynamic

1. In Graphics Editor, in the Layers pane, select the layer that contains the text
you want to make dynamic. In this example, select Top Layer.
2. In the work area, select the text you want to make dynamic. In this example,
select the text (“Dynamic Text”) to the right of the chilled water pump.
3. In the Object pane, right-click Text, point to New, and then click Bind.

4. In the Properties pane, in the Name box, type the name of the Bind object.
In this example, type “Value.”

Continued on next page

Creating and Configuring Graphics 04-14027-01-en, July 2013

62
 6 Creating and Saving Components and Snippets
6.4 Making Text Content Dynamic

5. In the Attribute box, select Content.

6. In the Objects pane, right-click Bind, point to New, and then click
ConvertValue.
7. In the Properties pane, in the Name box, type a name for the ConvertValue
object. In this example, type “Enabled.”

8. In the AttributeValue box, type the text that you want to display in the
graphic. In this example, type “Enabled.”
Continued on next page

04-14027-01-en, July 2013 Creating and Configuring Graphics

63
6 Creating and Saving Components and Snippets
6.4 Making Text Content Dynamic

9. In the SignalEqualTo box, type the value when the text is to be displayed.
In this example, type “1.”

10. Add more ConvertValue objects to the Bind object, one for each value of the
variable that is to be displayed as text. In this example, create one more
ConvertValue object using the following properties: Name: Off,
AttributeValue: Off, and SignalEqualTo: 0.
11. In the Objects pane, right-click the Text, point to Group as, and then click
Component.
12. In the Properties pane, in the Name box, type the name of the component.
In this example, type “ChwPStatus.”

13. On the File menu, click Save.

For this example, repeat the procedure to make the texts (“Dynamic Text”) for the
secondary chilled water pumps dynamic.

Creating and Configuring Graphics 04-14027-01-en, July 2013

64
 6 Creating and Saving Components and Snippets
6.4 Making Text Content Dynamic

Secondary Chilled Water Pump 1

• Bind:
– Name: Value
– Attribute: Content
• ConvertValue:
– Name: Duty
– AttributeValue: Duty
– SignalEqualTo: 1
• ConvertValue:
– Name: Standby
– AttributeValue: Standby
– SignalEqualTo: 0
• Component:
– Name: SecChwP1Req
Secondary Chilled Water Pump 2
• Bind:
– Name: Value
– Attribute: Content
• ConvertValue:
– Name: Duty
– AttributeValue: Duty
– SignalEqualTo: 1
• ConvertValue:
– Name: Standby
– AttributeValue: Standby
– SignalEqualTo: 0
• Component:
– Name: SecChwP2Req

04-14027-01-en, July 2013 Creating and Configuring Graphics

65
6 Creating and Saving Components and Snippets
6.5 Adding an Animated Picture

6.5 Adding an Animated Picture

You insert an animated picture when you want to add an animated image, such as
a .gif file, into a graphic.
In this example, you add the animated picture Cooling-Tower.gif for Cooling Tower
Fan 1 in the Cooling Plant graphic.

To add an animated picture

1. In Graphics Editor, in the Layers pane, select the layer where you want to add
an animated image. In this example, select Top Layer.
2. On the Drawing toolbar, click Insert Picture.
3. In the work area, click where you want to locate the upper-left corner of the
animated image. In this example, click near the cooling tower.
4. Select the animated picture you want to insert into the graphic. In this
example, select ...Project University X\Images\Cooling-Tower.gif.
5. On the Drawing toolbar, click Select.
6. In the Properties pane, in the Name box, type the name of the animated
image. In this example, type “TwrFan1Cmd.”

Note
You only need to name the drawing object if you will be binding the
object. Naming the object now will help you identify the object later.

7. On the Options toolbar or in the Properties pane, adjust the appearance of

the animated image. In this example, use the following animated image
properties: Left: 75 and Top: 141.
8. On the File menu, click Save.

Creating and Configuring Graphics 04-14027-01-en, July 2013

66
 6 Creating and Saving Components and Snippets
6.5 Adding an Animated Picture

For this example, repeat the procedure to add an animated picture for Cooling
Tower Fan 2. Use the following settings:
• File: ...Project University X\Images\Cooling-Tower.gif
• Name: TwrFan2Cmd
• Left: 195
• Top: 141

04-14027-01-en, July 2013 Creating and Configuring Graphics

67
6 Creating and Saving Components and Snippets
6.6 Making an Animated Picture Dynamic

6.6 Making an Animated Picture Dynamic

You make an animated image dynamic so that the animation can start and stop
according to the value of the variable it is bound to. This way you use the animation
in the image instead of using components.
In this example, you make the animated image for Cooling Tower Fan 1
(TwrFan1Cmd) dynamic so the animation starts and stops according to
TwrFan1Cmd.Value.

To make an animated picture dynamic

1. In Graphics Editor, in the Layers pane, select the layer where you want to
make an animated image dynamic. In this example, select Top Layer.
2. In the work area, select the picture you want to make dynamic. In this
example, select the cooling tower fan to the left.
3. In the Objects pane, right-click AnimatedImage, point to New, and then
click Bind.
4. In the Properties pane, in the Name box, type the name of the Bind object.
In this example, type “TwrFan1Cmd.Value.”

5. In the Attribute box, select Animation.

6. In the Objects pane, right-click Bind, point to New, and then click
ConvertValue.
7. In the Properties pane, in the Name box, type the name of the ConvertValue
object. In this example, type “Start.”

Continued on next page

Creating and Configuring Graphics 04-14027-01-en, July 2013

68
 6 Creating and Saving Components and Snippets
6.6 Making an Animated Picture Dynamic

8. In the AttributeValue box, select Start.

9. In the SignalEqualTo box, type the value that should start the animation.
In this example, type “1.”

10. In the Objects pane, right-click Bind, point to New, and then click Convert
Value.
11. In the Properties pane, in the Name box, type the name of the
ConvertValue. In this example, type “Stop.”
12. In the AttributeValue box, select Stop.
13. In the SignalEqualTo box, type the value that should stop the animation.
In this example, type “0.”
14. On the File menu, click Save.

04-14027-01-en, July 2013 Creating and Configuring Graphics

69
6 Creating and Saving Components and Snippets
6.7 Testing a Graphic in Preview Mode

6.7 Testing a Graphic in Preview Mode

You test the animation, snippets, and other parts of a graphic to ensure it works the
way it is intended to.
For more information, see the Testing topic on WebHelp.
In this example, you test the behavior of the Cooling Tower Fan 1 animation in the
Cooling Plant graphic.

To test a graphic in Preview mode

1. In Graphics Editor, on the menu bar, click Preview to open the graphic in
preview mode.
2. On the menu bar, click View and then click Test.
3. In the Test pane, in the Value column, type the value for the drawing object
for which you want to test the behavior. In this example, type “1” for
TwrFan1Cmd.Value.

4. In the Status column select Forced value.

5. In the work area, check the behavior.

Creating and Configuring Graphics 04-14027-01-en, July 2013

70
 6 Creating and Saving Components and Snippets
6.8 Saving as a Snippet

6.8 Saving as a Snippet

You save your bind objects as snippets in the Snippets library so that they are
available for future use.
In this example, you save the TwrFan1Cmd bind to the My Snippets category as a
snippet named Animation Start Stop.

To save as a snippet
1. In Graphics Editor, in the Objects Pane, select the Bind object that you want
to save to the Snippets library. In this example, select
TwrFan1Cmd.Value.

2. Drag the Bind object to the snippet category that you want to add the snippet
to. In this example, drag to My Snippets.
3. In the Properties dialog box, in the Name box, type the name you want to
display in the snippets category. In this example, type “Animation Start
Stop.”

4. In the Description box, type the description that you want to display as the
ToolTip in the Snippets category. In this example, type “Starts and stops
animation based on a digital value.”
5. Click Ok.
The snippet is now saved in the Snippets library for use in the current graphic and
future graphics.

04-14027-01-en, July 2013 Creating and Configuring Graphics

71
6 Creating and Saving Components and Snippets
6.8 Saving as a Snippet

For this example, use the newly created Animation Start Stop snippet to make the
Cooling Tower Fan 2 picture animation start and stop, by adding the snippet to the
animated image TwrFan2Cmd. Use the Properties pane to change the Bind
Name: TwrFan2Cmd.Value.

Creating and Configuring Graphics 04-14027-01-en, July 2013

72
 6 Creating and Saving Components and Snippets
6.9 Adding a Link

6.9 Adding a Link

You add links to a graphic to open Web sites, applications, or documents from
within WorkStation.
For more information, see the Binds and Links topic on WebHelp.
In this example, you add a link to the Logs button that opens the Extended Trend
Logs folder from the Cooling Plant graphic.

To add a link
1. In Graphics Editor, click the Snippets tab.
2. Select the Basic Functions category.
3. Drag the Link snippet to the drawing object that will be linked to a Web site,
application, or document. In this example, drag the Link snippet to the
Logs button.
4. In the Objects pane, click the Link object.
5. In the Properties pane, in the LinkName box, type the name of the Link
object. In this example, type “Folder.”

6. Click Save.
The link is now added to the graphic and is available for binding in WorkStation.

04-14027-01-en, July 2013 Creating and Configuring Graphics

73
7 Working with Graphics in
WorkStation

Topics
Importing a Solution
Binding Values Using a Binding Template
Creating a Panel
Summary
 7 Working with Graphics in WorkStation

Our Example
In this chapter, you work with graphics in WorkStation to edit the bindings to the
graphics so that live data is displayed. You also bind the links of the graphic to
make navigation possible. For engineering efficiency, you import a custom binding
template that you use to create all the bindings. Finally, you save engineering time
by adding the banner graphic to a panel to make it work for all the graphics.

04-14027-01-en, July 2013 Creating and Configuring Graphics

77
7 Working with Graphics in WorkStation
7.1 Importing a Solution

7.1 Importing a Solution

You import a solution that was created or modified on another Building Operation
server. You can also use the standard copy and paste method to copy solutions to
other file locations on the same server.
For more information, see the Import and Export of Solutions topic on WebHelp.
In this example, you import a file that contains a custom binding template, which
enables you to quickly create the required bindings for the graphics.

To import a solution
1. In WorkStation, in the System Tree pane or List View, select a location
where you want to import a solution. In this example, select ...University
X ES1/System/Binding Templates.
2. On the File menu, click Import.
3. In the Open dialog box, select the file and click Open. In this example,
select University X Graphics Binding Template.xml.
4. In the Import dialog box, resolve any name conflicts listed under Name
conflicts. In this example, there should not be any name conflicts.

5. Click Import.

Creating and Configuring Graphics 04-14027-01-en, July 2013

78
 7 Working with Graphics in WorkStation
7.2 Binding Values Using a Binding Template

7.2 Binding Values Using a Binding

Template
You use binding templates to reduce engineering time when creating bindings.
Binding templates are defined and created for binding patterns that are frequently
reused.

Tip
• When creating bindings, follow the recommended general guidelines: create
bindings between Inputs and Outputs only and do not create bindings to
Public Signals.

For more information, see the Binding Templates topic on WebHelp.

In this example, you bind the Cooling Plant graphic to different variables to show the
variable values in the graphic. You also bind the graphic to different objects to
activate links in the graphic. You use a custom binding template to create all the
required bindings.

To bind values using a binding template

1. In WorkStation, in the System Tree pane, select the object that you want to
bind values to. In this example, select ...University X
ES1/Servers/CPlant AS/Graphics/Cooling Plant Graphic.
2. On the Actions menu, click Edit bindings.
Continued on next page

04-14027-01-en, July 2013 Creating and Configuring Graphics

79
7 Working with Graphics in WorkStation
7.2 Binding Values Using a Binding Template

3. In the binding point browser, drag the object or folder to the binding template
that you want to apply. In this example, drag ...University X
ES1/Servers/CPlant AS to the Graphics Binding Template.

Continued on next page

Creating and Configuring Graphics 04-14027-01-en, July 2013

80
 7 Working with Graphics in WorkStation
7.2 Binding Values Using a Binding Template

4. Select the bindings that you want to create. In this example, keep all
bindings selected.

5. Click OK.
Continued on next page

04-14027-01-en, July 2013 Creating and Configuring Graphics

81
7 Working with Graphics in WorkStation
7.2 Binding Values Using a Binding Template

6. Verify that all bindings are correctly bound. In this example, verify the
bindings against the table below.

7. On the File menu, click Save.

Tip
• To ensure data flow is occurring as intended, use the Watch pane to view
values and monitor changes.

For this example, repeat the procedure to create the remaining bindings for the
Cooling Plant graphic and all the bindings for the following graphics:
Cooling Plant Graphic
Create the remaining bindings for ...University X ES1/Servers/CPlant
AS/Graphics/Cooling Plant Graphic:
• Drag ...University X ES1/Graphics to the Graphics Binding Template.
• Drag ...University X ES1/Central Plant Bldg to the Graphics Binding
Template.
• Drag ...University X ES1/Application to the Graphics Binding
Template.

Creating and Configuring Graphics 04-14027-01-en, July 2013

82
 7 Working with Graphics in WorkStation
7.2 Binding Values Using a Binding Template

Table: Results Verification – Cooling Plant Graphic

Binding Point Binding

AHU1VlvPosn.Value ...University X ES1/Servers/CPlant

AS/Simulation/FieldBus
Variables/Ahu1VlvPosn/Value

AHU2VlvPosn.Value ...University X ES1/Servers/CPlant

AS/Simulation/FieldBus
Variables/Ahu2VlvPosn/Value

AHU3VlvPosn.Value ...University X ES1/Servers/CPlant

AS/Simulation/FieldBus
Variables/Ahu3VlvPosn/Value

AHU4VlvPosn.Value ...University X ES1/Servers/CPlant

AS/Simulation/FieldBus
Variables/Ahu4VlvPosn/Value

CdwPStatus.Value ...University X ES1/Servers/CPlant

AS/Simulation/IO
Variables/CdwPStatus/Value

CdwrTempCV.Value ...University X ES1/Servers/CPlant

AS/Cooling Application/Programs/lnternal
Variables/CdwrTempCV/Value

CdwsTempCV.Value ...University X ES1/Servers/CPlant

AS/Cooling Application/Programs/lnternal
Variables/CdwsTempCV/Value

ChlrAlarmOpRst.Value ...University X ES1/Servers/CPlant

AS/Cooling
Application/Programs/PlantAlams/ChlrAlarm
OpRst

ChlrIsBroken.Value ...University X ES1/Servers/CPlant

AS/Simulation/Cooling Sim/Simulation
Application/ChlrIsBroken

ChlrStatus.Value ...University X ES1/Servers/CPlant

AS/Simulation/IO Variables/ChlrStatus/Value

ChwPStatus.Value ...University X ES1/Servers/CPlant

AS/Simulation/IO
Variables/ChwPStatus/Value

ChwrTempRV.Value ...University X ES1/Servers/CPlant

AS/Simulation/IO
Variables/ChwrTempRV/Value

ChwsTempRV.Value ...University X ES1/Servers/CPlant

AS/Simulation/IO
Variables/ChwsTempRV/Value

DivVlvCmd.Value ...University X ES1/Servers/CPlant

AS/Simulation/IO
Variables/DivVlvCmd/Value

04-14027-01-en, July 2013 Creating and Configuring Graphics

83
7 Working with Graphics in WorkStation
7.2 Binding Values Using a Binding Template

Continued
Binding Point Binding

SecChwP1Req.Value ...University X ES1/Servers/CPlant

AS/Cooling
Application/Programs/SecPLeadLag/SecCh
wP1Req

SecChwP1Status.Value ...University X ES1/Servers/CPlant

AS/Simulation/IO
Variables/SecChwP1Status/Value

SecChwP1VFDCmd.Value ...University X ES1/Servers/CPlant

AS/Simulation/IO
Variables/SecChwP1VfdCmd/Value

SecChwP2Req.Value ...University X ES1/Servers/CPlant

AS/Cooling
Application/Programs/SecPLeadLag/SecCh
wP2Req

SecChwP2Status.Value ...University X ES1/Servers/CPlant

AS/Simulation/IO
Variables/SecChwP2Status/Value

SecChwP2VFDCmd.Value ...University X ES1/Servers/CPlant

AS/Simulation/IO
Variables/SecChwP2VfdCmd/Value

TwrExitTempRV.Value ...University X ES1/Servers/CPlant

AS/Simulation/IO
Variables/TwrExitTempRV/Value

TwrFan1Cmd.Value ...University X ES1/Servers/CPlant

AS/Simulation/IO
Variables/TwrFan1Cmd/Value

TwrFan2Cmd.Value ...University X ES1/Servers/CPlant

AS/Simulation/IO
Variables/TwrFan2Cmd/Value

Cooling Schedules.Folder ...University X ES1/Servers/CPlant

AS/Cooling Application/Schedules

Extended Trend Logs.Folder ...University X ES1/Application/Extended

Trend Logs

Heating Plant.Graphic ...University X ES1/Servers/CPlant

AS/Graphics/Heating Plant Graphic

Home Page.Graphic ...University X ES1/Graphics/Home Page

Graphic

Trend Chart.Energy Meter Trend ...University X ES1/Central Plant

Chart Bldg/Energy Meter Trend Chart

Heating Plant Graphic

Creating and Configuring Graphics 04-14027-01-en, July 2013

84
 7 Working with Graphics in WorkStation
7.2 Binding Values Using a Binding Template

Create the bindings for ...University X ES1/Servers/CPlant

AS/Graphics/Heating Plant Graphic:
• Drag ...University X ES1/Servers/CPlant AS to the Graphics Binding
Template.
• Drag ...University X ES1/Graphics to the Graphics Binding Template.
• Drag ...University X ES1/Central Plant Bldg to the Graphics Binding
Template.

Table: Results Verification – Heating Plant Graphic

Binding Point Binding

Cooling Plant.Graphic ...University X ES1/Servers/CPlant

AS/Graphics/Cooling Plant Graphic

Heating Schedules.Folder ...University X ES1/Servers/CPlant

AS/Heating Application/Schedules

Home Page.Graphic ...University X ES1/Graphics/Home Page

Graphic

Trend Chart.Energy Meter Trend ...University X ES1/Central Plant

Chart Bldg/Energy Meter Trend Chart

Floor Plan Graphic

Create the bindings for ...University X ES1/Servers/CPlant
AS/Graphics/Floor Plan Graphic:
• Drag ...University X ES1/Servers/CPlant AS to the Graphics Binding
Template and then select the following bindings: ../Cooling Plant
Graphic, ~/Cooling Application/Schedules, and ../Heating Plant
Graphic.
• Drag ...University X ES1/Graphics to the Graphics Binding Template.

Table: Results Verification – Floor Plan Graphic

Binding Point Binding

Cooling Plant.Graphic ...University X ES1/Servers/CPlant

AS/Graphics/Cooling Plant Graphic

Cooling Schedules.Folder ...University X ES1/Servers/CPlant

AS/Cooling Application/Schedules

Heating Plant.Graphic ...University X ES1/Servers/CPlant

AS/Graphics/Heating Plant Graphic

Home Page.Graphic ...University X ES1/Graphics/Home Page

Graphic

Home Page Graphic

Create the bindings for ...University X ES1/Graphics/Home Page Graphic:
• Drag ...University X ES1/Servers/CPlant AS to the Graphics Binding
Template.

04-14027-01-en, July 2013 Creating and Configuring Graphics

85
7 Working with Graphics in WorkStation
7.2 Binding Values Using a Binding Template

Table: Results Verification – Home Page Graphic

Binding Point Binding

Business School New Wing.FloorPlan ...University X ES1/Servers/CPlant

AS/Graphics/Floor Plan Graphic

Business School New Wing.Schedules ...University X ES1/Servers/CPlant

AS/Cooling Application/Schedules

Cooling Plant.Graphic ...University X ES1/Servers/CPlant

AS/Graphics/Cooling Plant Graphic

Cooling Schedules.Folder ...University X ES1/Servers/CPlant

AS/Cooling Application/Schedules

Heating Plant.Graphic ...University X ES1/Servers/CPlant

AS/Graphics/Heating Plant Graphic

Banner Graphic
Create the bindings for ...University X ES1/Application/Panels/Banner
Graphic:
• Drag ...University X ES1/Servers/CPlant AS to the Graphics Binding
Template.

Table: Results Verification – Banner Graphic

Binding Point Binding

BannerPanel_004.OaTempCV ...University X ES1/Servers/CPlant

AS/Cooling
Application/Programs/Calibrations/OaTemp
CV

BannerPanel_004.Time.Value ...University X ES1/Servers/CPlant

AS/DateTime

Creating and Configuring Graphics 04-14027-01-en, July 2013

86
 7 Working with Graphics in WorkStation
7.3 Creating a Panel

7.3 Creating a Panel

You create panels to customize framing in a workspace. For example, panels can
display particular graphics or menus that are visible as frames in the WorkStation
Work area.
For more information, see the Panel Components topic on WebHelp.
In our example, you create a panel called Main Panel that will be displayed in the
HVAC Operator Workspace. Instead of including a header on every graphic in the
University X project, the Main Panel will be displayed when any graphic is open and
when the HVAC Operator Workspace is being used.

To create a panel
1. In WorkStation, in the System Tree pane, select in the folder where you want
to create the panel. In this example, select ...University X
ES1/Application/Panels.
2. On the File menu, click New, and then Panel.
3. In the Name box, type a name for the panel. In this example, type “Main
Panel.”

4. In the Description box, type a description for the panel. In this example,
type “Panel used to display University X header in HVAC Operator
Workspace.”
5. Click Next.
Continued on next page

04-14027-01-en, July 2013 Creating and Configuring Graphics

87
7 Working with Graphics in WorkStation
7.3 Creating a Panel

6. Click Add to add an object to the panel. In this example, you add an object
to the panel.

7. In the object type list, select the type of panel component you want to add.
In this example, select Graphic Pane.

8. In the Name box, type a name for the component. In this example, type
“Banner.”
9. In the Description box, type a description for the panel component. In this
example, type “University X banner for all graphics.”
Continued on next page

Creating and Configuring Graphics 04-14027-01-en, July 2013

88
 7 Working with Graphics in WorkStation
7.3 Creating a Panel

10. Click Next.

11. In the Default dock position box, select where the component should be
located. In this example, select Top.
12. In the Initial path box, enter the path to the object you are adding to the
panel. In this example, enter ...University X
ES1/Application/Panels/Banner Graphic.

13. Click Create.

14. In the Work area initial path box, enter the initial object that displays when
viewing this panel. In this example, enter ...University X
ES1/Graphics/Home Page Graphic.
Continued on next page

04-14027-01-en, July 2013 Creating and Configuring Graphics

89
7 Working with Graphics in WorkStation
7.3 Creating a Panel

15. In the Show toolbars box, select Yes to display the toolbar for the object
listed in the initial path. In this example, select No.

16. Click Create.

Creating and Configuring Graphics 04-14027-01-en, July 2013

90
 7 Working with Graphics in WorkStation
7.4 Summary

7.4 Summary
You have now created a graphic for monitoring and controlling the Cooling
Plant. This graphic was created using components, snippets, animated .gifs, text
boxes, and dynamic text. You also created bindings and links in WorkStation so
that live data is displayed and navigation to other graphics is easier.
It is now possible to see the cooling tower fans spinning when they are running, and
view the temperatures and statuses of the cooling plant system. Additionally, you
can click on the links to open other graphics, trend charts, and trend logs.
Additionally, you associated pre-existing .tgml files to the Floor Plan, Home Page,
and main panel graphics and created a panel to reuse the banner graphic for all the
graphics.

04-14027-01-en, July 2013 Creating and Configuring Graphics

91
Schneider Electric | Buildings Division
www.schneider-electric.com/buildings

© 2013 Schneider Electric. All rights reserved.

04-14027-01-en
July 2013