Creating and Configuring Graphics Tutorial Guide PDF

StruxureWare Building Operation
Creating and Configuring Graphics

Tutorial Guide
04-15027-01-en
July 2014
StruxureWare Building Operation
Creating and Configuring Graphics
Tutorial Guide
04-15027-01-en
July 2014
Copyright © 2014 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 Project Database Folders and Programs ................ 27
3.3.2 Pre-existing Project Database Objects ...................................... 30
3.3.3 Pre-existing WorkStation for Projects User Accounts ................. 31
4 Creating a Graphic and Preparing the Editor ................. 33

4.1 Logging on to WorkStation for Projects ....................................... 36
4.2 Opening a Project ....................................................................... 38
4.3 Creating a Graphic ...................................................................... 39
4.4 Importing a Components Category ............................................. 41
4.5 Adjusting the Graphic Work Area ................................................. 42
5 Using the Basic Editor Tools to Design a Graphic ......... 45

5.1 Adding a Layer ............................................................................ 48
5.2 Inserting a Picture ...................................................................... 49
5.3 Adding a Component .................................................................. 50
5.4 Adding Text Using the Text Tool .................................................. 53
5.5 Adding Text Using the Textbox tool ............................................. 55
04-15027-01-en, July 2014 Creating and Configuring Graphics

5
5.6 Drawing a Rectangle ................................................................... 57
6 Creating and Saving Components and Snippets .......... 59

6.1 Adding a Snippet ........................................................................ 62
6.2 Grouping Drawing Objects as a Component ............................... 64
6.3 Saving as a Component .............................................................. 65
6.4 Making Text Content Dynamic .................................................... 68
6.5 Adding an Animated Picture ........................................................ 72
6.6 Making an Animated Picture Dynamic ......................................... 74
6.7 Testing a Graphic in Preview Mode ............................................. 76
6.8 Saving as a Snippet .................................................................... 77
6.9 Adding a Link .............................................................................. 79
7 Working with Graphics in WorkStation ......................... 81

7.1 Importing a Solution .................................................................... 84
7.2 Binding Values Using a Binding Template .................................... 86
7.3 Creating a Panel ......................................................................... 94
7.4 Summary .................................................................................... 98
Creating and Configuring Graphics 04-15027-01-en, July 2014

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

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.
Note
The programs and files that are used for the fictional customer University X are
intended for training purposes only.

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.

13
2 Additional Information
Topics
Where to Find Additional Information
Regulatory Notices
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
• Architectural Guidelines
• IT Planning 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
• Finishing 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
• Creating and Configuring a Function Block Program Tutorial Guide
• Creating and Configuring a Script Program Tutorial Guide

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

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

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.

24
3 Our Case Study
3.1 University X
Figure: Heating Plant diagram
Note
The programs and files that are used for the fictional customer University X are
intended for training purposes only.

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
• 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
• Project Configuration Server
3.2.3 Specifications
You find specifications in the Building Operation datasheets for Enterprise Server,
WorkStation, Project Configuration Server, PS-24V Power Supply, Automation
Server, and I/O Module Family.

26
3 Our Case Study
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.
You create and configure the graphics and bindings off site (at the Schneider
Electric office) using WorkStation for Projects.
3.3.1 Pre-existing Project Database Folders and

Programs
For University X, a project called University X Project has been created on the
Project Configuration Server. The University X Project includes an Enterprise Server
and an Automation Server.
The Enterprise Server called University X ES1 has the following folder structure:
Figure: University X ES1 and its folder structure

27
3 Our Case Study
The Automation Server called CPlant AS controls the Cooling Plant and Heating
Plant.
CPlant AS has the following folder structure:
Figure: CPlant AS and its folder structure

CPlant AS has the following programs for the Cooling Plant:

28
3 Our Case Study
Figure: CPlant AS and its programs for the Cooling Plant

CPlant AS has the following programs for the Heating Plant:

29
3 Our Case Study
Figure: CPlant AS and its programs for the Heating Plant
3.3.2 Pre-existing Project Database Objects

For University X, the following objects are available in the project database on the
off-site computer prior to creation and configuration of graphics:
• ...University X ES1/Central Plant Bldg/Energy Meter Trend Chart

30
3 Our Case Study
3.3.3 Pre-existing WorkStation for Projects User

Accounts
For University X, the following WorkStation for Projects user account is available on
the off-site computer:
• Pete

31
4 Creating a Graphic and
Preparing the Editor
Topics
Logging on to WorkStation for Projects
Opening a Project
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 first log on to WorkStation for Projects on the off-site computer
and open the University X Project. You then create graphics in WorkStation for
Projects and open the graphics for editing. You also configure Graphics Editor to
make creating the graphics efficient.

35
4.1 Logging on to WorkStation for Projects

You use WorkStation for Projects to access the Project Configuration Server.
For more information, see the Log on to WorkStation for Projects topic on
WebHelp.
In this example, you log on to the Project Configuration Server on the off-site
computer, using the project user account “Pete”.
To log on to WorkStation for Projects

1. In the Building Operation WorkStation for Projects window, in the User
name box, type the user name. In this example, type “Pete.”
Note
The first time you log on to WorkStation for Projects you need to use
the administrator user account to create a project user account. For
more information, see the Creating a Project Configuration Server
User Account topic on WebHelp.
2. In the Password box, type the password. In this example, type “Pete.”
Continued on next page

36
3. In the Server box, select the hypertext transfer protocol you want to use and
then enter a server name or an IP address. In this example, click HTTPS
and then enter localhost.
4. Select Remember me to have WorkStation for Projects remember your
settings.
5. Click Log on.

37
4.2 Opening a Project
4.2 Opening a Project

You open a project to configure a project or to deploy a project to a server.
For more information, see the Projects topic on WebHelp.
In this example, you open the University X Project on the off-site computer.
To open a project
1. In WorkStation for Projects, in the WorkStation for Projects - Projects
view, select the project that you want to open. In this example, select
University X Project.
2. On the toolbar, click the Open Project button .

The project opens in WorkStation for Projects.

38
4.3 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:

39
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

40
4.4 Importing a Components Category
4.4 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

41
4.5 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.”

42
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

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

47
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.
For this example, repeat the procedure to create the Top Layer layer.

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

49
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.
In this example, you add the Cooling Tower component to the Cooling Plant
graphic.
To add a component
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.


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

the component. In this example, use the following component properties:
Left: 65 and Top: 140.
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

51
Continued
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
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
Switch ChlrIsBroken 871 613
Switch ChlrAlarmOpRst 908 613
Save your graphic.

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

the text. In this example, use the following text properties: Stroke: Seedling
green (#87D300), FontFamily: Arial, FontSize: 40, Left: 38, and Top: 48.
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

53
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

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

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

55
– Width: 127

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

the rectangle. In this example, use the following rectangle properties:
Stroke: Grey (#808080), Height: 20, and Width:60.

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

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

62

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

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

64
6.3 Saving as a Component

You save your components in the Components library so that they are available for
future use.
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.

65
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

66
Continued
Name Left Top
AHU3VlvPosn 741 382
AHU4VlvPosn 741 475
Save your graphic.

67
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.”

68
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.”

69
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.”
For this example, repeat the procedure to make the texts (“Dynamic Text”) for the
secondary chilled water pumps dynamic.

70
Secondary Chilled Water Pump 1

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

71
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

an animated image. In this example, select Top Layer.
2. On the Drawing toolbar, click Insert Picture.
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.
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.

the animated image. In this example, use the following animated image
properties: Left: 75 and Top: 141.

72
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

73
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.”

74
8. In the AttributeValue box, select Start.

9. In the SignalEqualTo box, type the value that should start the animation.
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.

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

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

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

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

79
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 for Projects 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.

83
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 Overview 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.

84
4. Click Import.

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

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

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

88
6. Verify that all bindings are correctly bound. In this example, verify the
bindings against the table below.
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.

89
Table: Results Verification – Cooling Plant Graphic
Binding Point Binding
AHU1VlvPosn.Value ...University X ES1/Servers/CPlant

AS/Simulation/FieldBus
Variables/Ahu1VlvPosn/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

90
Continued
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

91
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/Central Plant Bldg to the Graphics Binding
Template.
Table: Results Verification – Heating Plant Graphic
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

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:
Template and then select the following bindings: ../Cooling Plant
Graphic, ~/Cooling Application/Schedules, and ../Heating Plant
Graphic.
Table: Results Verification – Floor Plan Graphic




Graphic
Home Page Graphic

Create the bindings for ...University X ES1/Graphics/Home Page Graphic:
Template.

92
Table: Results Verification – Home Page Graphic
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




Banner Graphic
Create the bindings for ...University X ES1/Application/Panels/Banner
Graphic:
Template.
Table: Results Verification – Banner Graphic
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

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

94
6. Click the Add button 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.”

95
9. In the Description box, type a description for the panel component. In this
example, type “University X banner for all graphics.”
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.

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

97
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 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. 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.
You used WorkStation for Projects to create and configure the graphics and
bindings off site (at the Schneider Electric office).

98
Schneider Electric | Buildings Division
www.schneider-electric.com/buildings
© 2014 Schneider Electric. All rights reserved.
04-15027-01-en
July 2014

Creating and Configuring Graphics Tutorial Guide PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Creating and Configuring Graphics Tutorial Guide PDF

Uploaded by

Copyright:

Available Formats

StruxureWare Building Operation

Creating and Configuring Graphics

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

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

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

04-15027-01-en, July 2014 Creating and Configuring Graphics

6 Creating and Saving Components and Snippets .......... 59

7 Working with Graphics in WorkStation ......................... 81

Creating and Configuring Graphics 04-15027-01-en, July 2014

The Introduction part contains information on the purpose

1.1 Purpose of This Guide

04-15027-01-en, July 2014 Creating and Configuring Graphics

1.2 How This Guide is Organized

Creating and Configuring Graphics 04-15027-01-en, July 2014

1.3 Typographical Conventions

04-15027-01-en, July 2014 Creating and Configuring Graphics

2.1 Where to Find Additional Information

04-15027-01-en, July 2014 Creating and Configuring Graphics

2.2 Regulatory Notices

WEEE - Directive of the European Union (EU)

CE - Compliance to European Union (EU)

C-Tick (Australian Communications Authority (ACA))

Federal Communications Commission

Creating and Configuring Graphics 04-15027-01-en, July 2014

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

Figure: The School of Business and the Central Plant

04-15027-01-en, July 2014 Creating and Configuring Graphics

Figure: Cooling Plant diagram

Creating and Configuring Graphics 04-15027-01-en, July 2014

Figure: Heating Plant diagram

04-15027-01-en, July 2014 Creating and Configuring Graphics

3.2 Requirements and Specifications

3.2.1 Devices Used for This Case Study

3.2.2 Software Used in This Tutorial

Creating and Configuring Graphics 04-15027-01-en, July 2014

3.3 Focus of This Tutorial

3.3.1 Pre-existing Project Database Folders and

Figure: University X ES1 and its folder structure

04-15027-01-en, July 2014 Creating and Configuring Graphics

Figure: CPlant AS and its folder structure

Creating and Configuring Graphics 04-15027-01-en, July 2014

Figure: CPlant AS and its programs for the Cooling Plant

04-15027-01-en, July 2014 Creating and Configuring Graphics

Figure: CPlant AS and its programs for the Heating Plant

3.3.2 Pre-existing Project Database Objects

Creating and Configuring Graphics 04-15027-01-en, July 2014

3.3.3 Pre-existing WorkStation for Projects User

04-15027-01-en, July 2014 Creating and Configuring Graphics

04-15027-01-en, July 2014 Creating and Configuring Graphics

4.1 Logging on to WorkStation for Projects

To log on to WorkStation for Projects

Creating and Configuring Graphics 04-15027-01-en, July 2014

04-15027-01-en, July 2014 Creating and Configuring Graphics

4.2 Opening a Project

2. On the toolbar, click the Open Project button .

Creating and Configuring Graphics 04-15027-01-en, July 2014

4.3 Creating a Graphic

04-15027-01-en, July 2014 Creating and Configuring Graphics

Name Location Description File Name

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

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

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

Creating and Configuring Graphics 04-15027-01-en, July 2014