Advanced Graphics Application Help

MS-ADVGRF-0

Building Technologies & Solutions LIT-1201850

www.johnsoncontrols.com
2019-10-14 Release 10.1
 Contents
Introduction.................................................................................................................................... 3
Contents
Summary of Changes.................................................................................................................... 3

Advanced Graphics Application Overview................................................................................... 3

Scalable Vector Graphics (SVG).......................................................................................................... 3

Professional or Standard Edition of Microsoft Visio Software....................................................... 3

Advanced Graphics Generation Application.................................................................................... 3

Menus......................................................................................................................................... 5

Toolbar....................................................................................................................................... 5

Preferences................................................................................................................................ 5

Precache Feature...................................................................................................................... 6

Action Codes.............................................................................................................................. 7

User Actions............................................................................................................................... 7

Dynamic Features..................................................................................................................... 7

Expression Builder............................................................................................................................... 9

Expression Syntax..................................................................................................................... 9

Logic Functions....................................................................................................................... 11

AGA Binder......................................................................................................................................... 13

Graphics Example Stencil................................................................................................................. 14

Binding and Aliasing......................................................................................................................... 21

User Graphics Tool............................................................................................................................ 24

Advanced Graphics Viewing............................................................................................................. 24

Workflow............................................................................................................................................. 24

Advanced Graphics Steps............................................................................................................ 26

Creating and Editing an Advanced Graphic (Overview)............................................................... 26

Configuring Graphics Example Shapes................................................................................ 26

 Working with the Precache Definition.................................................................................. 27

Adding Action Codes to a Shape........................................................................................... 28

Configuring Action Codes...................................................................................................... 29

Configuring Action Codes for a Return Fan Shape Example............................................. 51

Inserting an Advanced Graphic to the UGT................................................................................... 56

Viewing a Graphic.............................................................................................................................. 57

Troubleshooting........................................................................................................................... 58

Related Documentation............................................................................................................... 67

Software terms............................................................................................................................. 67

Product warranty.......................................................................................................................... 68

Patents........................................................................................................................................... 68

Index.............................................................................................................................................. 69

ii Advanced Graphics Application Help

Introduction
Welcome to the Advanced Graphics Application Help.
This Help system describes how to configure and use the AGA to create system graphics for
the Metasys® MicrosoftVisio™ 2003, 2007, or 2010 software (32-bit versions only). The Advanced
Graphics Application is not supported for use with either Microsoft Visio 2013 or Visio for Office 365.
system. This Help system assumes the user has knowledge of Scalable Vector Graphics (SVG) and
how to use the UGT and the Professional or Standard edition of

Summary of Changes
No technical changes were made to the document for this release.

Advanced Graphics Application Overview

The Advanced Graphics Application is an enhanced graphics creation package that provides
dynamic graphic capabilities such as animation, color changing, and flashing for the Metasys
system. The package includes a dynamic example stencil library that is an add-on to the
Professional or Standard edition of Microsoft Visio 2003, 2007, or 2010 software.
When you create an advanced graphic using the Graphics Example stencil, the graphic is bound
to system data through the SCT database. After the graphic file is saved, it is inserted as a Graphic
object into the Metasys system navigation tree.
Advanced graphics are viewed from the Metasys system Site Management Portal (SMP) UI
framework. With a more comprehensive representation of facility support systems, building
operators can easily monitor the health of the system on a more intuitive interface.

Scalable Vector Graphics (SVG)

The SVG file format is an XML-based web standard and is viewable and editable in any text editor,
much like HTML documents. The World Wide Web Consortium (www.w3.org) maintains the SVG
specification. The Advanced Graphics Application complies with the SVG specification for dynamic
SVG graphics. Besides the ability to save SVG files, the Advanced Graphics Application can also save
a Zipped Scalable Vector Graphic (SVGZ) file, which is a compressed SVG file.

Professional or Standard Edition of Microsoft Visio Software

The Advanced Graphics Application is designed to work with the Professional or Standard edition
of Microsoft Visio 2003, 2007, or 2010 software (32-bit versions only), which refers to symbols as
shapes. Visio drawings use the Visio Drawing (VSD) file format. The Professional or Standard edition
of Microsoft Visio 2003, 2007, or 2010 software includes a stencil sheet mechanism that allows you
to create stencil libraries. The Advanced Graphics Application includes the Graphics Example stencil,
a library of dynamic HVAC components.
Important: The Advanced Graphics Application is not supported for use with either Microsoft
Visio 2013 or Visio for Office 365.

Advanced Graphics Generation Application

The Advanced Graphics Application is an add-on graphics generation program used to create
animated graphics in the Professional or Standard edition of Microsoft Visio 2003, 2007, or
2010 software. Access the Advanced Graphics Application by selecting Tools > Add-Ons >
AGAActionCodeAddOn in the Professional or Standard edition of Microsoft Visio 2003, 2007, or 2010

Advanced Graphics Application Help 3

software. With this add-on application you can configure the dynamic capabilities for graphics using
Action Codes (User Actions and Dynamic Features), the Expression Builder, and the AGA Binder. See
Figure 1.
The Advanced Graphics Add-On screen consists of three distinct sections: A, B, and C (Figure 1). Use
Section A to select the user actions and dynamic features you want to define. After you make these
choices, use Section B to select which of the checked actions or dynamic features you want to work
with. When you make your selections, Section C reveals any required parameters for that action
or dynamic feature. For example, Figure 1 shows the parameters for the Left Click action code. For
details on this process, see Adding Action Codes to a Shape.

Figure 1: Advanced Graphics Add-On Screen

Table 1: Advanced Graphics Screen Callouts

Callout Name
1 Menus
2 Toolbar
3 List of Selected Action Codes
4 User Actions
5 Dynamic Features

Note: To keep the Advanced Graphics Add-On screen always open while defining user actions
and dynamic features, right-click a blank spot on the graphic away from the Add-On screen.
Then, if you are using Visio 2003, select View > Custom Properties Window. The Custom
Properties Window appears. If you are using Visio 2007 or 2010, select Data > Shape Data.
Dock the window. Now, the Add-On screen remains displayed while you work with the various
shapes on the graphic, and your changes are saved immediately.

4 Advanced Graphics Application Help

Menus

The following table describes the options of the Advanced Graphics Application menus.
Table 2: Menu Options
Menu Option Description
Saves the current graphic file in SVG or SVGZ format to a location
Save (Ctrl+S)
on the hard disk or on the network to store the graphic.
File
Save As (F12) Saves the current graphic file under a new name.
Exit (Alt+F4) Closes the application.
Graphics
Launches the AGA Binder.
Binding (Ctrl+G)
Preferences
Tools Launches the AGA Preferences dialog box.
(Ctrl+E)
Precache (Ctrl
Launches the AGA Precache window.
+P)
Online Help
Launches the Advanced Graphics Application Help.
(Ctrl+F1)
Help
Displays information about the application, including copyright
About AGA
notice.

Toolbar

The following table describes the toolbar buttons of the Advanced Graphics Application.
Table 3: Toolbar Buttons
Button Description
Saves the current graphic file in SVG or SVGZ format to a location on
the hard disk or on the network to store the graphic.

Launches the AGA Binder.

Preferences

The Advanced Graphics Application launches dialog boxes to verify certain actions to guide you
through the program. For example, a dialog box appears asking whether you want to save your
changes when you exit the Advanced Graphics Application. Once you become familiar with the
application, you can turn off some of these messages from the Preferences menu. Figure 2 shows
and Table 4 describes the options of the Preferences dialog box.

Advanced Graphics Application Help 5

Figure 2: AGA Preferences Dialog Box

Table 4: AGA Preferences Dialog Box

1
Option Description
1
Prevents the warning message from appearing
when selecting a different shape in the
Hide warning on shape selection in Visio
Professional or Standard edition of Microsoft
Visio 2003, 2007, or 2010 software.
When selected, applies any changes that have
Always Apply Changes not been applied; otherwise, the program
discards the changes.
Closes the Advanced Graphics Application
Hide warning on closing the editor
without a warning message.
Always Save Changes Saves all changes without a warning message.
Prevents the warning message from appearing
when selecting multiple shapes in the
Hide warning on multiple shape selection
Professional or Standard edition of Microsoft
Visio 2003, 2007, or 2010 software.
Prevents the warning message from appearing
when deleting a shape in the Professional or
Hide warning on deletion of shape in Visio
Standard edition of Microsoft Visio 2003, 2007,
or 2010 software.
1 Table 12 lists the warning messages that appear in the Advanced Graphics Application. Table 12 also points out the
messages that disappear when you use the Preferences options described here.

Precache Feature

The Precache feature allows you to retrieve the values of objects used in your drawing before the
graphic is rendered, which improves graphic performance. These values are placed in Advanced
Graphics memory immediately when you open the graphic in the SMP UI. The drawing is then
rendered and the values of all objects appear. If you do not use the Precache feature, the object
values are retrieved after the graphic appears, which slows down graphic performance. Overuse
of the Precache feature may also slow down the system; therefore, we recommend that you specify
only the most important objects in the Precache window.

6 Advanced Graphics Application Help

For more information, see Working with the Precache Definition.

Action Codes

An Action Code is the coding information in a shape that specifies the animated presentation of
data. For example, you can create an animated spray for a duct humidifier using Action Codes.
Action Codes include User Actions and Dynamic Features.

User Actions

The Advanced Graphics Application triggers the defined dynamic feature in a shape to occur
when a user acts upon the shape. Table 5 describes the user actions configurable in the Advanced
Graphics Application.
Table 5: User Actions
User Action Description
A left mouse click on a shape.
Left Click
Example: ShowObjWindow(‘ADS1:NAE1/N2-1.AHU4.OA-T’);
A middle mouse click on a shape.
Middle Click
Example: setlv(‘show_legend’,true);
A right mouse click on a shape.
Right Click
Example: ShowCmdWindow(‘ADS1:NAE1/N2-1.AHU4.ZN-T’);
The mouse is clicked over a shape.
Mouse Down
Example: setlv(‘mouse_down_on_temp’,true);
The mouse moves around a shape.
Mouse Move Example: setlv(‘mouse_move_on_map_X’,evt.clientX);
setlv(‘mouse_move_on_map_Y’,evt.clientY);
The mouse moves over a shape.
Mouse Over
Example: setlv(‘mouse_over_room4’,true);
The mouse is released on a shape.
Mouse Up
Example: setlv(‘mouse_down_on_temp’,false);
The mouse moves off a shape.
Mouse Out
Example: setlv(‘mouse_over_room4’,false);

See the Creating and Editing an Advanced Graphic (Overview) section for the overall process of
creating an advanced graphic. Specifically, see the Adding Action Codes to a Shape and Configuring
Action Codes sections for details on how to add and configure action codes.

Dynamic Features

The dynamics included in the shape deliver the dynamic capabilities for the shape. The following
table describes the dynamics available in the Advanced Graphics Application.

Advanced Graphics Application Help 7

Table 6: Dynamic Features
Dynamic Feature Description
Hides and displays the shape so it appears to fade in and out of sight
Animate Hide
continuously at a defined rate.
Increases and decreases the size of the shape so it appears to stretch
Animate Scale
and return to normal size continuously at a defined rate.
Allows multiple JavaScript statements for advanced functionality. This
Custom Actions
option allows you to manually type the coding.
Changes the color of the shape from a list of colors. For example, the
Discrete Color shape changes from yellow to red when the Analog Value goes from
Low Alarm to High Alarm.
Makes the shape change from one color to another. For example,
Flash the shape flashes between two colors continuously if the value goes
beyond a maximum point.
Hide Makes the shape disappear.
Links a URL to the shape and opens in a separate window. For
Hyper Link
example, the shape jumps to a user guide or Help file.
Include Attaches a JavaScript file to a shape.
Move Moves the shape from one location on the graphic to another.
Launches another advanced graphic file or item (for example, an
Navigate
Analog Value window).
Rotates the shape clockwise the specified number of degrees around
Rotate
an axis.
Scale Changes the size of a shape.
Set Fill Changes the fill color of a shape.
Attaches a sound file (.wav) to a shape. For example, the shape makes
Sound
a sound if the device reaches abnormal values.
Changes the color of a shape to a color between two defined colors
Span Color based on a numeric value. For example, the shape appears purple
halfway between red and blue.
Makes the shape spin clockwise or counterclockwise on its axis at a
Spin
defined rate.
SVG Tag Attribute Adds advanced SVG coding to the shape.
Changes the string in a text box based on the value of an expression.
Text
For example, the text box displays the Present Value of an object.
Changes the color of a shape among three colors based on the value
of a variable. For example, a Temperature Bulb changes from blue
Three State Span Color to yellow to red as the temperature changes from -18°C (0°F) to 21°C
(70°F) to 43°C (110°F). A common color scheme is from green to
yellow to red.
Tooltip Adds Tooltip text to a shape.

See the Creating and Editing an Advanced Graphic (Overview) section for the overall process of
creating an advanced graphic. Specifically, see the Adding Action Codes to a Shape and Configuring
Action Codes sections for details on how to add and configure action codes. For background

8 Advanced Graphics Application Help

information on JavaScript, consult a reference book, such as JavaScript: The Definitive Guide by David
Flanagan.

Expression Builder

The Expression Builder allows you to build expressions to bind data to a shape using Graphic Object
References. The Expression Builder is shown in Figure 3 and described in Table 7.

Expression Syntax

The syntax for an expression depends on which action code or dynamic feature you have selected;
however, for the logic functions, there is a common syntax that applies:
Logic Function(‘Site Director:NxE Name/Point Reference.Attribute ID’,me);
Example for reading the present value of a zone temperature:
bsv(‘ADS1:NAE1/N2-1.ZN-T.85’,me);
The Logic Function is an abbreviation of the action that the statement is to perform. For example,
bsv means read a bound string value. Table 8 explains each of the valid logic functions.
The Site Director Name and NxE Name, along with the Point Reference, describe the location and
name of the point. A colon separates the Site Director and NAE/NCE names, which usually consist of
an ADS:NxE combination. The Point Reference is separated from the NxE by a forward slash.
The Attribute ID is a number that the Metasys system uses to identify a particular attribute. For
example, the attribute number for the Present Value of any object is 85. Other popular attribute
numbers are 512 (Status), 28 (Description), and 2390 (Name). The Expression Editor determines
the attribute ID when you select the object’s attribute. If no attribute ID or an invalid attribute ID is
specified, an error in the Java® console occurs when you display the graphic during runtime.
Product internationalization is the reason that attribute IDs are used instead of attribute names.
For a list of all attributes with their IDs, refer to the Metasys System Enumeration Sets Technical
Bulletin (LIT-12011361).
The me keyword at the end of the statement is a convention used by the Advanced Graphics
Application to enable the dynamic feature to sign up for any change in value of the monitored
attribute. For example, if the feature is Discrete Color, the me keyword allows for a change in color
to occur when the status of the linked attribute changes.

Advanced Graphics Application Help 9

Figure 3: Expression Builder

Table 7: Expression Builder

Option Description
Click the button to insert its logical operation
into the Generated Expression field.

Operator Buttons

Note: You can also use the NOT (!) and

TERNARY (?) operators by editing the
generated expression.
Provides a list of user logic function templates
that read or write bound values or local
variables. Bound values are connected to
an object that exists in the Metasys system
Read/Write bound values or Local variables
database, whereas local variables are values
that can be referenced by expressions in the
graphic. See Table 8 for descriptions of the logic
functions.
Enter the local variable or Object Reference of
the field point for which you want the selected
Object Reference/Local Variable logic function template to operate. Click the
Lookup button to bind data using the AGA
Binder.

10 Advanced Graphics Application Help

Table 7: Expression Builder
Option Description
Displays the expression (based on the Read/
Write bound values or Local variables selection
Generated Expression
and the Object Reference/Local Variable text)
after clicking Build.

Logic Functions

Logic functions aid in programming the dynamic features of a shape. Logic functions trigger
dynamics in the shape based upon the attached system data. Insert logic functions using the
Expression Builder. The following table describes the logic functions available in the Advanced
Graphics Application.
Table 8: Logic Functions
Variable Script Description
Reads an Object Reference in the NAE/NCE/
NIE or Application and Data Server (ADS)/
Extended Application and Data Server (ADX),
and returns a floating value.

Note: Use this function to retrieve

the precise value of an attribute (15
Read a bound floating point significant digits). For example, you
bfv
attribute value could use it for converting temperature
calculations (°F to °C) or for providing a
value to non-textual action types such
as Discrete Color.

Example:

bfv('ADS1:NAE1/N2-1.AHU4.RM-T.85, me)
Reads an Object Reference in the NAE/NCE/
NIE or ADS/ADX, and returns a Boolean
value.

Note: Use this function to determine

Read a bound Boolean attribute whether an object is in a specific state
bbv (for example, on/off or alarm/normal).
value
This logic function converts the text to a
Boolean true or false value.

Example:

bbv('ADS1:NAE1/N2-1.AHU4.SF-S.85, me)

Advanced Graphics Application Help 11

Table 8: Logic Functions
Variable Script Description
Reads an Object Reference in the NAE/NCE/
NIE or ADS/ADX, and returns an integer
value.

Note: Use this function in cases where

you do not want to translate the state/
Read a bound integer attribute mode/type set (enumeration) value of
biv
value an object to text. For example, use this
option to compare the object’s status
(high alarm to low alarm).

Example:

biv('ADS1:NAE1/N2-1.AHU4.AV1.85, me)
Reads an Object Reference in the NAE/NCE/
NIE or ADS/ADX, and returns a string value.

Note: Use this function to display the

state of an object as text. Enumerated
attributes are returned as text instead
of numbers (for example, Clean/Dirty
instead of 0/1). Analog attributes are
Read a bound string value bsv returned as rounded values with units
(for example, 74.2 Deg F instead of
74.1873547683635.) The bsv script is
commonly used with the Text action
code.

Example:

bsv('ADS1:NAE1/N2-1.AHU4.FILTER.28, me)
Reads a local variable, and returns a floating
Read a local floating point value lfv
value.
Read a local boolean point Reads a local variable, and returns a Boolean
lbv
value value.
Reads a local variable, and returns an integer
Read a local integer point value liv
value.
Reads a local variable, and returns a string
Read a local string point value lsv
value.
Allows you to assign a color from a color
selection window. The Expression Builder
can also use an RGB (red/green/blue)
number given in hexadecimal format to
Select Color —
identify the color. This format contains #
and three sets of numbers representing the
color intensity of red, green, and blue (for
example, red would be #340000).
Sets a local value setlv Modifies the value of a local variable.

12 Advanced Graphics Application Help

Table 8: Logic Functions
Variable Script Description
Displays the command window of the
Show Command Window ShowCmdWindow
specified item/object.
Displays the default view/window of the
Show Object Window ShowObjWindow
specified item/object.

See the Creating and Editing an Advanced Graphic (Overview) section for the overall process of
creating an advanced graphic. Specifically, see the Using the Expression Builder section for details
on how to build expressions.

AGA Binder

The AGA Binder assists you in building expressions by logging in to and selecting field points and
references from the SCT. Figure 4 shows the AGA Binder with the References tab active, and Table 9
describes the AGA Binder menus and tabs. The fully qualified object reference of the selected item/
object is copied to the Microsoft Windows clipboard so you can paste it into the expression.

Figure 4: AGA Binder

Table 9: AGA Binder

Menu/Tab Item Description
Displays the archives in the
SCT Archives
SCT.
Displays the Navigation Tree
References of the selected SCT archive for
choosing field point references.

Advanced Graphics Application Help 13

Table 9: AGA Binder
Menu/Tab Item Description
File Exit (Ctrl+Q) Closes the AGA Binder.
Launches the SCT Login dialog
box to log in to the local SCT
or an SCT on the network. To
Login (Ctrl+L) activate and use the features
of the AGA Binder, you must
first log in to the SCT using this
menu item.
Actions Refreshes the data appearing
Refresh Archives (Ctrl+R) in the AGA Binder to match the
current archives.
Displays the field points for the
Get Field Points (Ctrl+G)
device.
Launches the Attribute dialog
Show Attributes (Ctrl+H) box that lists the attributes of
the selected object.

See the Creating and Editing an Advanced Graphic (Overview) section for the overall process of
creating an advanced graphic. Specifically, see the Using the AGA Binder section for details on how
to bind data to shapes.

Graphics Example Stencil

The Graphics Example stencil contains prebuilt dynamic shapes for creating dynamic system
graphics. Use the Professional or Standard edition of Microsoft Visio 2003, 2007 or 2010 software
and the Advanced Graphics Generation Add-On to modify the shapes to suit the needs of the
facility. Table 10 lists the sample shapes and their prebuilt action codes. For more information on
the action codes, see Table 5 and Table 6.

14 Advanced Graphics Application Help

Table 10: Graphics Example Shapes
Shape Shape Name Action Codes
• Left Click—displays the default view/window of the
object

• Right Click—displays the command window of the

object

• Animate Hide—displays/hides the text label when in

high/low alarm
Differential • Discrete Color—displays a different color for the
(Diff) Pressure 1
Present Value text box based on the object’s status

1
• Sound—plays a sound when in high/low alarm

• SVG Tag Attribute—sets the object opacity

• Text—displays the Present Value of the object

• Tooltip—displays the object name

• Left Click—displays the default view/window of the
object

• Right Click—displays the command window of the

object

• Animate Hide—displays/hides the text label when in

high/low alarm
Humidity • Discrete Color—displays a different color for the
Sensor 1
Present Value text box based on the object’s status

• Sound—plays a sound when in high/low alarm

• SVG Tag Attribute—sets the object opacity

• Text—displays the Present Value of the object

• Tooltip—displays the object name

Advanced Graphics Application Help 15

Table 10: Graphics Example Shapes
Shape Shape Name Action Codes
• Left Click—displays the default view/window of the
object

• Right Click—displays the command window of the

object

• Mouse Out—hides the yellow command and status

box

• Mouse Over—displays the yellow command and status

box

• Animate Hide—displays/hides the text label when in

Return Fan
2
high/low alarm
2
• Discrete Color—displays a different color for the
1
Present Value text box based on the object’s status

• Hide—hides the yellow command and status box

• Span Color—changes color between red and green to

indicate low and high alarm

• SVG Tag Attribute—sets the object opacity

• Text—displays the Present Value of the object

16 Advanced Graphics Application Help

Table 10: Graphics Example Shapes
Shape Shape Name Action Codes
• Left Click—displays the default view/window of the
object

• Right Click—displays the command window of the

object

• Mouse Out—hides the tooltip

• Mouse Over—displays the tooltip

• Animate Hide—displays/hides the text label when in

high/low alarm
Right • Discrete Color—displays a different color for the
Horizontal 1
Present Value text box based on the object’s status
(Horz) Water
Pump
• Discrete Color—changes the impeller red when off
and green when on

• Flash—changes the impeller color between white and

red to indicate low and high alarm

• Spin—moves the impeller clockwise when running

• SVG Tag Attribute—sets the object opacity

• Text —displays the Present Value of the object

• Tooltip—displays the object name

• Left Click—displays the default view/window of the
object

• Right Click—displays the command window of the

object

• Animate Hide—displays/hides the text label when in

high/low alarm

RS9100 • Discrete Color—displays a different color for the

1
Present Value text box based on the object’s status

• Sound—plays a sound when in high/low alarm

• SVG Tag Attribute—sets the object opacity

• Text—displays the Present Value of the object

• Tooltip—displays the object name

Advanced Graphics Application Help 17

Table 10: Graphics Example Shapes
Shape Shape Name Action Codes
• Left Click—displays the default view/window of the
object

• Right Click—displays the command window of the

object

• Mouse Out—hides the yellow command and status

box

• Mouse Over—displays the yellow command and status

box

• Animate Hide—displays/hides the text label when in

Supply Fan
2
high/low alarm

• Discrete Color—displays a different color for the

1
Present Value text box based on the object’s status

• Hide—hides the yellow command and status box

• Span Color—changes color between red and green to

indicate low and high alarm

• SVG Tag Attribute—sets the object opacity

• Text—displays the Present Value of the object

• Left Click—displays the default view/window of the
object

• Right Click—displays the command window of the

object

• Animate Hide—displays/hides the text label when in

high/low alarm
Temperature • Discrete Color—displays a different color for the
(Temp) Sensor 1
Present Value text box based on the object’s status

• Sound—plays a sound when in high/low alarm

• SVG Tag Attribute—sets the object opacity

• Text —displays the Present Value of the object

• Tooltip—displays the object name

18 Advanced Graphics Application Help

Table 10: Graphics Example Shapes
Shape Shape Name Action Codes
• Left Click—displays the default view/window of the
object

• Right Click—displays the command window of the

object

• Animate Hide—displays/hides the text label when in

high/low alarm

T-4000 • Discrete Color—displays a different color for the

1
Present Value text box based on the object’s status

• Sound—plays a sound when in high/low alarm

• SVG Tag Attribute—sets the object opacity

• Text—displays the Present Value of the object

• Tooltip—displays the object name

• Left Click—displays the default view/window of the
object

• Right Click—displays the command window of the

object

• Animate Hide—displays/hides the text label when in

high/low alarm

TE-6700 • Discrete Color—displays a different color for the

1
Present Value text box based on the object’s status

• Sound—plays a sound when in high/low alarm

• SVG Tag Attribute—sets the object opacity

• Text—displays the Present Value of the object

• Tooltip—displays the object name

Advanced Graphics Application Help 19

Table 10: Graphics Example Shapes
Shape Shape Name Action Codes
• Left Click—displays the default view/window of the
object

• Right Click—displays the command window of the

object

• Animate Hide—displays/hides the text label when in

high/low alarm

TC9100 Stat • Discrete Color—displays a different color for the

1
Present Value text box based on the object’s status

• Sound—plays a sound when in high/low alarm

• SVG Tag Attribute—sets the object opacity

• Text—displays the Present Value of the object

• Tooltip—displays the object name

• Left Click—displays the default view/window of the
object

• Right Click—displays the command window of the

object

• Animate Hide—displays/hides the text label when in

high/low alarm

TMZ • Discrete Color—displays a different color for the

1
Present Value text box based on the object’s status

• Sound—plays a sound when in high/low alarm

• SVG Tag Attribute—sets the object opacity

• Text —displays the Present Value of the object

• Tooltip—displays the object name

20 Advanced Graphics Application Help

Table 10: Graphics Example Shapes
Shape Shape Name Action Codes
• Left Click—displays the default view/window of the
object

• Right Click—displays the command window of the

object

• Mouse Out—hides the tooltip

• Mouse Over—displays the tooltip

• Animate Hide—displays/hides the text label when in

high/low alarm

• Discrete Color—displays a different color for the

1
Water Pump Present Value text box based on the object’s status

• Discrete Color—changes the impeller red when off

and green when on

• Flash—changes the impeller color between white and

red to indicate low and high alarm

• Spin—moves the impeller clockwise when running

• SVG Tag Attribute—sets the object opacity

• Text—displays the Present Value of the object

• Tooltip—displays the object name

1 Where 0=White, 10=Yellow, 15=Yellow, 30=Red, 34=Red, 70=Gray, 108=#8000, and 112=Black.
2 The Return Fan and Supply Fan shapes have Cmd Name, Cmd Desc, Sts Name, and Sts Desc labels with Text action
codes. Cmd Name and Cmd Desc reference the command output object for the mechanical device. Sts Name and Sts
Desc reference the status input object for the mechanical device.

Binding and Aliasing

The Advanced Graphics Application provides two methods for creating advanced graphics and
binding data to shapes. The first method is to use the Graphics Example shapes as defined and
modify the object references in the shape’s custom properties (Visio 2003) or shape data (Visio 2007
and 2010). The second method is to create your own custom shapes or use the Graphics Example
shapes and modify the action codes to create customized dynamic shapes.
The shapes in the Graphics Example stencil have custom properties or shape data entries on their
right-click menus. The object reference of all the shape’s action codes can be set using the custom
properties (Figure 5) or shape data (Figure 6 and Figure 7). See the Configuring Graphics Example
Shapes section for details on how to edit the custom properties or shape data.

Advanced Graphics Application Help 21

Figure 5: Custom Properties on a Temperature Sensor (Visio 2003)

Figure 6: Shape Data on a Pre-Heat Coil (Visio 2007)

22 Advanced Graphics Application Help

Figure 7: Shape Data on a Temperature Sensor (Visio 2010)

If you choose to modify the action codes of a shape from the Graphics Example stencil, the custom
properties or shape data of that shape do not function after editing the action codes using the
Advanced Graphics Application. If you want to change any part of an existing Graphics Example
shape (for example, you want to keep all of the dynamics configured, but you want to change or
add a dynamic), you cannot modify the custom properties or shape data to indicate the object
reference for that shape. You must use the Advanced Graphics Application to add the object
reference to each of the defined action codes and make the desired action code changes or
additions. The Configuring Action Codes for a Return Fan Shape Example section describes how to
configure an existing Graphics Example shape to use a different action code and how to add the
object references to the defined action codes.
For information on creating new shapes and adding them to new stencils, refer to the Professional
or Standard edition of Microsoft Visio 2003, 2007, or 2010 software documentation. Then, add the
new shape to your advanced graphic and use the action codes to create the desired dynamics. For
details on configuring action codes, see the Adding Action Codes to a Shape section.
Aliased graphics employ a technique of string substitution in object references to allow a single
graphic to be used with multiple mechanical systems. For example, create a single graphic to use
for all Variable Air Volume (VAV) controllers, then create an alias to use for the other graphics. For
an example on how to create an aliased graphic, see the Creating an Aliased Graphic section.

Advanced Graphics Application Help 23

User Graphics Tool

The Metasys system includes a User Graphics Tool (UGT) that accepts standard graphics. The
graphics provide a visual representation of the monitored systems and enable you to quickly check
the status of systems and recognize unusual conditions. You can design graphics to allow you
to navigate through buildings, floors, and other areas, viewing the building systems and control
processes.

Advanced Graphics Viewing

The SMP UI displays advanced graphics with real-time controller field point data, and allows
building operators to command and update points. Advanced graphics allow you to use a wider
range of dynamics in your system graphics. After selecting an advanced graphic in the Metasys
system navigation tree, the advanced graphic appears in the SMP UI.
In the SMP UI, advanced graphics do not offer the functionality and buttons present in the UGT. If
you click the Edit button, a toolbar appears that allows you to replace the current graphic with a
new advanced graphic using Set Advanced Graphic or clear the current advanced graphic using
the Clear button.
Figure 8 shows an advanced graphic viewed in the SMP UI. See Viewing a Graphic.

Figure 8: Advanced Graphic

Workflow
Figure 9 shows the workflow for creating and viewing advanced graphics.

24 Advanced Graphics Application Help

Figure 9: Advanced Graphics Workflow Diagram

Advanced Graphics Application Help 25

Advanced Graphics Steps
Creating and Editing an Advanced Graphic (Overview)

Use this procedure to create graphics using existing shapes in the Graphics Example stencil with
the Advanced Graphics Application and Visio Professional 2003, 2007, or 2010 software. Both of
these procedures require you to work with the Visio software source file, and then place the new
graphic in the Metasys system or replace the existing graphic with a new graphic. See the Workflow
section.
Note: If desired, create and save any new shapes and stencils for use in your graphic as
instructed in the Professional or Standard edition of Microsoft Visio 2003, 2007, or 2010
software product documentation.

1. In the Professional or Standard edition of Microsoft Visio 2003, 2007, or 2010 software, open
an existing graphic or create a new graphic (Visio drawing in VSD format). Use the shapes in
the Graphics Example stencil and other stencil libraries to create the graphic in the drawing
workspace.
Note: To access the Graphics Example stencil, select File > Shapes > Graphics Example.

2. Configure the shapes for the preferred dynamic features and bind the graphic with field point
data.

3. Log in to the SMP UI.

- To bind data to existing shapes in the Graphics Example stencil, see the Configuring
Graphics Example Shapes section.

- To use the Precache feature, see Working with the Precache Definition.

- To configure and bind data to shapes using action codes, see the Adding Action Codes to
a Shape section.
Note: If you want to create an aliased graphic (for example, one graphic used for all
VAVs), see the Creating an Aliased Graphic section.

4. If you are creating a new graphic, insert a graphic object into the SMP UI and import the
advanced graphic. See the Inserting an Advanced Graphic to the UGT section.
5. If you are replacing an existing advanced graphic with a new advanced graphic, display the
advanced graphic you are replacing and go to Step 10 in Inserting an Advanced Graphic to
the UGT.

Configuring Graphics Example Shapes

About this task:
Use this procedure to configure the custom properties of the shapes in the Graphics Example sten-
cil. Graphics Example shapes are already configured for dynamic capabilities. Modify the custom
properties to bind the shapes to field point data.

1. If you are using Visio 2003, right-click the shape and then click Shape > Custom Properties.
The Custom Properties dialog box appears. See Figure 5. If you are using Visio 2007 or 2010,
right-click the shape and then click Data > Shape Data. The Shape Data dialog box appears. See
Figure 7.

26 Advanced Graphics Application Help

2. Use the AGA Binder to locate and copy the fully qualified object reference you want to bind to
the shape. For details on how to use the AGA Binder, see the Using the AGA Binder section.

Note: Do not enter attribute-level references when using this method.

3. Paste the fully qualified object reference in the ObjectReference field of the Custom Properties
or Shape Data dialog box.

4. Click OK.

5. From the Visio software File menu, select Save Advanced Graphics to save the changes to the
graphic in the SVG or SVGZ file.

Note: Alternatively, you can click Save in the Advanced Graphics Application or select Save
from the Advanced Graphics Application File menu.
The first time you save the graphic, the Save As dialog box appears. Select a location on the
hard disk or on the network to store the graphic. Type a name for the graphic in the File name
box. Then select SVG or SVGZ format and click Save.

6. On the Visio software File menu, click Save to save the changes to the Visio drawing in VSD
format. The VSD file is the file format used by the Professional or Standard edition of Microsoft
Visio 2003, 2007, or 2010 software. The VSD drawing is the file to open when you want to edit
a graphic using the Professional or Standard edition of Microsoft Visio 2003, 2007, or 2010
software and the Advanced Graphics Application.

Note: Make sure you click an empty space on the drawing workspace before saving. If one of
the shapes in the graphic is selected, the application only saves changes to that shape.

Working with the Precache Definition

About this task:

1. On the Tools menu, click Precache. The Precache window appears.

Advanced Graphics Application Help 27

Figure 10: Precache Window

2. Add the objects you want to precache while using the Advanced Graphics Application.

Note:
To delete all items in the Precache definition, click Delete Precache. If you click Delete Pre-
cache and apply the changes, there is no undo. The Precache is emptied.

If you would like to delete one item from the list, manually remove the item from the list by
selecting it and pressing the Delete key.

3. Click Apply Changes to save the settings.

Adding Action Codes to a Shape

About this task:

Use this procedure to add dynamic capabilities, such as spinning, flashing, and rotating, to a shape.

1. In the Professional or Standard edition of Microsoft Visio 2003, 2007, or 2010 software, select a
shape.

2. On the Tools menu, click Add-Ons > AGAActionCodeAddOn. The Advanced Graphics Application
main screen, ActionCode AddOn Form, appears. See Figure 1.

3. Click to select the check boxes for the preferred User Actions and Dynamic Features for the
shape. The selected User Actions and Dynamic Features appear in the Action Codes drop-down
menu. See Table 5 and Table 6 for information on each User Action and Dynamic Feature.

28 Advanced Graphics Application Help

4. In the Action Codes box, select and configure the User Actions and Dynamic Features assigned
to the shape. The configuration menus for the Action Codes appear in the top panel of
the Advanced Graphics Application screen. See the Configuring Action Codes section for
information on how to configure each of the Action Codes. Some of the Action Codes use the
Expression Builder and the AGA Binder. See the Using the Expression Builder and the Using the
AGA Binder sections for information on how to create expressions and bind data.

5. Click Apply Changes after configuring all Action Codes for the shape.

6. On the Visio software File menu, click Save Advanced Graphics to save the changes to the
graphic in the SVG or SVGZ file.

Note: Alternatively, you can click the Save button in the Advanced Graphics Application or
select Save from the Advanced Graphics Application's File menu.
The first time you save the graphic, the Save As dialog box appears. Select a location on the
hard disk or on the network to store the graphic. Type a name for the graphic in the File name
box. Then select SVG or SVGZ format and click Save.

7. On the Advanced Graphics File menu, click Exit to close the Advanced Graphics Application.

8. Perform Step 1 through Step 7 for each shape in the graphic that you want to animate.

Note: You can configure individual action codes on parts of the graphic and then group them
together in Visio software and configure action codes for the grouped section as well.

9. On the Visio software File menu, click Save to save the changes to the Visio drawing in VSD
format. The VSD file is the file format used by the Professional or Standard edition of Microsoft
Visio 2003, 2007, or 2010 software. The VSD drawing is the file to open when you want to edit
a graphic using the Professional or Standard edition of Microsoft Visio 2003, 2007, or 2010
software and the Advanced Graphics Application.

Note: Make sure you click an empty space on the drawing workspace before saving. If one of
the shapes in the graphic is selected, the application only saves changes to that shape.

10. Go to Step 3 in the Creating and Editing an Advanced Graphic (Overview) section.

Configuring Action Codes

Action Codes are the coding information in a shape that specify the animated presentation of data.
Use combinations of Action Codes to create an animation for your shapes. See the Action Codes
section and User Actions for descriptions of the Action Codes, and see the following sections for
help on how to configure the Action Codes.

Animate Hide

About this task:

In the following example, Animate Hide changes a shape to appear and disappear repeatedly every
2 seconds when the current alarm status of a zone temperature is either Low Alarm or High Alarm.

Advanced Graphics Application Help 29

Figure 11: Animate Hide Dynamic Feature Configuration

1. In the Action Codes box, click Animate Hide.

2. Select the amount of time in seconds you want the animation to occur on the Duration menu.

3. Type the desired logic function expression in the Begin Animation Expression text box or click
Expression to use the Expression Builder. For more information, see Table 8 and the Using the
Expression Builder section.

Animate Scale

About this task:

In the following example, Animate Scale resizes a shape (between the specified maximum and mini-
mum scale values) repeatedly every 2 seconds based on the present value of a cooling tower status
point. For example, if the cooling tower is On, the animation starts. If the cooling tower is Off, the
animation stops.

Figure 12: Animate Scale Dynamic Feature Configuration

1. In the Action Codes box, click Animate Scale.

2. Select the maximum and minimum levels of scaling (range = 0-1,000) for the shape’s x-axis and
y-axis in the Maximum ScaleX, Minimum ScaleX, Maximum ScaleY, and Minimum ScaleY
menus.

30 Advanced Graphics Application Help

 Note: Click the Preview buttons and look at the drawing in Visio software to see how the
scaling appears for the maximum and minimum selections. For example, if you select 2 for
the maximum scale for the x-axis and y-axis, the shape appears double its original size in the
drawing. The Preview button changes to Restore after you click it. Click Restore to return the
shape to its original size.

3. Click the amount of time in seconds that you want the animation to occur on the Duration
menu. The duration time is spanned equally between the specified minimum and maximum
scaling limits.

4. Type a logic function expression in the Begin Animation Expression text box or click
Expression to use the Expression Builder. For more information, see Table 8 and the Using the
Expression Builder section.

Custom Actions

About this task:

In the following example, a timer update function is created to set the current date and time equal
to a local variable called the_time.

Figure 13: Custom Actions Dynamic Feature Configuration

1. In the Action Codes box, click Custom Actions.

2. Type JavaScript code in the User Logic text box or click Expression to use the Expression
Builder. For more information, see the Using the Expression Builder section.

Note: AGA does not check syntax, so be sure that the JavaScript code you enter is correct. If
it contains errors, an exception occurs and appears in the Java console when the graphic is
executed at runtime. For background information on JavaScript, consult a reference book, such
as JavaScript: The Definitive Guide, Fifth Edition by David Flanagan.

Discrete Color

About this task:

In the following example, Discrete Color switches the color of a shape based on the current status
of a zone temperature as follows: Normal (0) is white; Low Warning (10) or High Warning (15) is Yel-
low; Low Alarm (30) or High Alarm (34) is Red.

Advanced Graphics Application Help 31

Figure 14: Discrete Color Dynamic Feature Configuration

1. In the Action Codes box, click Discrete Color.

2. Click in the Insert Color box. The Color selection dialog box appears.

3. Select a color and click OK. The color appears in the Insert Color box.

4. Type a numeric value for the Insert Color option in the Numeric Value text box.

5. Click Add to assign the data to the color. The Number/Color table displays the option.

Note: Click Update to make changes or click Remove to delete a Number/Color pair.

6. Follow Step 2 through Step 5 to assign numeric values to each additional color you want to
display. The following steps apply to the shape as a whole.

7. Click fill or stroke in the Apply To box.

Note: Click stroke for the outline color of the shape, or click fill for the fill color of the shape.

8. Type a numeric expression in the Color Selection Expression text box or click Expression to
use the Expression Builder. For more information, see the Using the Expression Builder section.

Flash

About this task:

In the following example, Flash makes a shape appear to flash between white and red repeatedly
every 2 seconds based on the value of a refrigeration alarm.

32 Advanced Graphics Application Help

Figure 15: Flash Dynamic Feature Configuration

1. In the Action Codes box, click Flash.

2. Click in the Color A box. The Color selection dialog box appears.

3. Select a color and click OK. The color appears in the Color A box.

4. Click in the Color B box. The Color selection dialog box appears.

5. Select a color and click OK. The color appears in the Color B box.

6. Click fill or stroke in the Apply To box.

Note: Select stroke for the outline color of the shape, or select fill for the fill color of the
shape.

7. Select the amount of time in seconds that you want the animation to occur in the Duration
box. Duration is the time between each color change while flashing is occurring.

8. Type an expression in the Begin Flash Expression text box or click Expression to use the
Expression Builder. For more information, see the Using the Expression Builder section.
The flashing begins when the expression evaluates to True and stops when the expression
becomes False.

Hide

About this task:

In this example, Hide causes an image to disappear if the specified expression evaluates to True.

Advanced Graphics Application Help 33

Figure 16: Hide Dynamic Feature Configuration

1. In the Action Codes box, click Hide.

2. Type an expression in the Hiding Expression text box or click Expression to use the
Expression Builder. For more information, see the Using the Expression Builder section.

Hyper Link

About this task:

In the following example, Hyper Link tells the browser to open a new window and display the John-
son Controls® company website (http://www.johnsoncontrols.com) when the user clicks the shape
that is assigned this action code.

Figure 17: Hyper Link Dynamic Feature Configuration

1. In the Action Codes box, click Hyper Link.

2. Type the target in the Target Window text box. For example, typing the word new in the
Target Window text box opens the link in a new window.

3. Type the URL in the URL text box, including the http:// prefix. The new window opens and
displays the specified website when the shape is clicked during runtime.

34 Advanced Graphics Application Help

Include

About this task:

In the following example, the specified Include (JavaScript) file executes the script on the graphic
selected. For example, if you create a JavaScript file to display time and include the file with a text
box, when the graphic appears in the Site Management Portal UI, the time appears in the text box.

Figure 18: Include Dynamic Feature Configuration

1. In the Action Codes box, click Include.

2. Type the path for the JavaScript file in the JavaScript File text box or click Browse to navigate
to and select the file.

Left Click

About this task:

In the following example, the Focus window for the OA-T object appears when you click the shape
once.

Figure 19: Left Click User Action Configuration

1. In the Action Codes box, click Left Click.

2. Type a logic function script in the On Click User Logic text box or click Expression to use the
Expression Builder. For more information, see Table 8 and the Using the Expression Builder
section.

Advanced Graphics Application Help 35

3. Select the number of times (1 = single click and 2 = double click) that the user must left-click the
shape before the logic function script executes from the Click Count menu.

Middle Click

About this task:

In the following example, the show_legend variable is set to True when you click the middle mouse
button on a three-button mouse.

Figure 20: Middle Click User Action Configuration

1. In the Action Codes box, click Middle Click.

2. Type a logic function script in the On Click User Logic text box or click Expression to use the
Expression Builder. For more information, see Table 8 and the Using the Expression Builder
section.

Mouse Down

About this task:

In the following example, the mouse_down_on_temp variable is set to True when you click the
mouse button.

Figure 21: Mouse Down User Action Configuration

1. In the Action Codes box, click Mouse Down.

36 Advanced Graphics Application Help

2. Type a logic function expression in the On Mouse Down User Logic text box or click
Expression to use the Expression Builder. For more information, see Table 8 and the Using the
Expression Builder section.

Mouse Move

About this task:

In the following example, two variables are set to the X and Y screen positions of the mouse when-
ever you move the mouse.

Figure 22: Mouse Move User Action Configuration

1. In the Action Codes menu, click Mouse Move.

2. Type a logic function expression in the On Mouse Move User Logic text box or click
Expression to use the Expression Builder. For more information, see Table 8 and the Using the
Expression Builder section.

Mouse Out

About this task:

In the following example, a variable is set whenever you move the mouse off a shape.

Figure 23: Mouse Out User Action Configuration

1. In the Action Codes box, click Mouse Out.

Advanced Graphics Application Help 37

2. Type a logic function expression in the On Mouse Out User Logic text box or click Expression
to use the Expression Builder. For more information, see Table 8 and the Using the Expression
Builder section.

Mouse Over

About this task:

In the following example, a variable is set whenever you move the mouse over a shape.

Figure 24: Mouse Over User Action Configuration

1. In the Action Codes box, click Mouse Over.

2. Type a logic function expression in the On Mouse Over User Logic text box or click Expression
to use the Expression Builder. For more information, see Table 8 and the Using the Expression
Builder section.

Mouse Up

About this task:

In the following example, a variable is set whenever you release the mouse button.

Figure 25: Mouse Up User Action Configuration

1. In the Action Codes box, click Mouse Up.

38 Advanced Graphics Application Help

2. Type a logic function expression in the On Mouse Up User Logic text box or click Expression
to use the Expression Builder. For more information, see Table 8 and the Using the Expression
Builder section.

Move

About this task:

In the following example, a shape is moved a certain percentage based on the present value of a
zone setpoint.

Figure 26: Move Dynamic Feature Configuration

1. In the Action Codes box, click Move.

2. Type a numeric expression in the Move Percentage Expression text box or click Expression to
use the Expression Builder. For more information, see the Using the Expression Builder section.

3. In the Visio drawing, move the shape’s control handle (the small yellow diamond) to the
location to which you want the shape to move when the value of the object is 100. When the
value of the object is 0, it moves to its pasted-down position. When the value of the object is
between 0 and 100, the shape moves in a straight line proportional to the 0 and 100 positions.
For example, a value of 50 moves the shape halfway between position 0 and position 100.

Navigate

About this task:

In the following example, a shape is assigned to navigate to the VAV graphic when you click it. Two
local variables with values are also passed into the opened graphic.

Advanced Graphics Application Help 39

Figure 27: Navigate Dynamic Feature Configuration

1. In the Action Codes box, click Navigate.

2. Type a valid reference in the Graphic Object Reference text box.

Note: Alternatively, use the AGA Binder to obtain a valid Graphic Object Reference and paste
it into this field. See the Using the AGA Binder section for information on how to use the AGA
Binder.

3. Type a name for the window of the referenced graphic in the Window Title text box.

Note: If this name is already assigned to an existing window, the existing window is replaced
by the new window. If the word new is entered in the Window Title text box, a new window
specified by the graphic reference appears while the existing window remains open. If no
name is entered, the window containing the Navigate action is replaced.

4. Type a local variable name in the Local Variable text box.

5. Type a value in the Local Value text box.

6. Click Add to assign the value to the variable. The Local Variable/Local Value table displays the
option.

Note: Click Update to make changes or click Remove to delete a Local Variable/Local Value
pair.

Right Click

About this task:

In the following example, the Command window for the ZN-T object displays when you right-click
the shape.

40 Advanced Graphics Application Help

Figure 28: Right Click User Action Configuration

To configure the Right Click Action Code:

1. In the Action Codes box, click Right Click.

2. Type a logic function script in the On Click User Logic text box or click Expression to use the
Expression Builder. For more information, see Table 8 and the Using the Expression Builder
section.

Rotate

About this task:

In the following example, a shape rotates between 0 and 360 degrees based on the present value of
the Volts-A object.

Figure 29: Rotate Dynamic Feature Configuration

1. In the Action Codes box, click Rotate.

2. Type a numeric expression in the Rotation Angle Expression text box or click Expression to
use the Expression Builder. For more information, see the Using the Expression Builder section.

Advanced Graphics Application Help 41

3. In the Visio drawing, move the shape’s center of rotation pin to a location. Rotation occurs
clockwise around the center of the rotation pin, where the four major rotation points are 0, 90,
180, 270, and 360. For example, if the value is 90, the shape rotates clockwise 90 degrees from
the rotation pin.

Scale

About this task:

In the following example, a shape is scaled on the x- and y-axis based on the present value of the
Water-Level object.

Figure 30: Scale Dynamic Feature Configuration

1. In the Action Codes box, click Scale.

2. Select a value for Scale X and Scale Y indicating the levels of scaling for the x-axis and y-axis.
The scale number is a percentage, in which 0 is a reduction of 100% of original size along the x-
or y-axis, 1 is no increase in size, 2 is an increase of 100% of original size (double), 3 is a 200%
increase (triple), and so forth.

Note: Click Preview and look at the drawing in Visio software to see how the scaling appears
for the selection. For example, if you select 2 for the scale for the x-axis and y-axis, the shape
appears double its original size in the drawing. The Preview button changes to Restore after
you click it. Click Restore to return the shape to its original size. The Preview operation has no
effect on the saved drawing.

3. Type a numeric expression in the Percent Scale Expression text box or click Expression to use
the Expression Builder. For more information, see the Using the Expression Builder section

Set Fill

About this task:

In the following example, a shape is specified to fill in with the color Red.

42 Advanced Graphics Application Help

Figure 31: Set Fill Dynamic Feature Configuration

1. In the Action Codes box, click Set Fill.

2. Type an expression in the User Logic text box. The name of the color or hex equivalent must
be surrounded by single quotes (Figure 31). Alternatively, you can click Expression to use
the Select Color option in the Expression Builder. For more information, see the Using the
Expression Builder section.

Sound

About this task:

In the following example, a sound file called ding.wav is specified to play once when the sound
expression evaluates to True.

Figure 32: Sound Dynamic Feature Configuration

To configure the Sound Action Code:

1. In the Action Codes box, click Sound.

2. Type the path of the sound file in the File Name text box or click Browse to navigate to and
select the file.

3. Select the number of times the sound file should repeat from the Repeat Count menu or click
in the box to select Indefinite to repeat the sound continuously.

Advanced Graphics Application Help 43

4. Type an expression in the Begin Playing Sound Expression text box or click Expression to use
the Expression Builder. For more information, see the Using the Expression Builder section.

Span Color

About this task:

In the following example, a shape is specified to span between the colors Red (0) and Blue (100)
based on the present value of the ZN-T object.

Figure 33: Span Color Dynamic Feature Configuration

To configure the Span Color Action Code:

1. In the Action Codes box, click Span Color.

2. Click in the Low Color box. The Color selection dialog box appears.

3. Select a color for the lower limit and click OK. The color appears in the Low Color box.

Note: The Low Color Limit value is 0, and colors with values lower than 0 automatically take on
the value 0.

4. Click in the High Color box. The Color selection dialog box appears.

5. Select a color for the higher limit and click OK. The color appears in the High Color box.

Note: The High Color Limit value is 100, and colors with values greater than 100 automatically
take on the value 100.

6. Click stroke or fill in the Apply To box.

Note: Click stroke for the outline color of the shape, or click fill for the fill color of the shape.

Note: Click Preview to display the Color Preview dialog box (Figure 34). With this dialog box
opened, use the slider bar to show how the color gradient changes between the Low Color and
High Color selections. For example, if you selected red for the Low Color and blue for the High
Color, the color appears purple halfway between red and blue (50 on the preview bar). Click
Ok to exit the preview.

44 Advanced Graphics Application Help

Figure 34: Color Preview Dialog Box

7. Type an expression in the Color Expression text box or click Expression to use the Expression
Builder. For more information, see the Using the Expression Builder section.

Spin

About this task:

In the following example, a shape is specified to spin clockwise when the present value of the SF-
S object is On for a duration of one revolution per second, and to stop spinning when the object is
Off.

Figure 35: Spin Dynamic Feature Configuration

1. In the Action Codes box, click Spin.

2. Click Clockwise or Counter-Clockwise as the Direction to spin the shape.

3. Type an expression or integer in the Spin Duration Expression text box or click Expression to
use the Expression Builder. A value of 1 defines a spin rate of approximately one revolution per
second; 2 is one revolution every 2 seconds, 3 is one revolution every 3 seconds, and so forth.
For more information on expressions, see the Using the Expression Builder section.

4. Type an expression in the Spin Enable Expression text box or click Expression to use the
Expression Builder. For more information, see the Using the Expression Builder section.

SVG Tag Attribute

About this task:

In the following example, the SVG tag attribute Opacity is set to 0.0.

Advanced Graphics Application Help 45

Figure 36: SVG Tag Attribute

1. In the Action Codes box, click SVG Tag Attribute.

2. Type the name of the attribute in the Name text box.

3. Type a value for the attribute in the Value text box.

Text

About this task:

In the following example, the string value of the ZN-T object is displayed for the text object inside
the shape.

Figure 37: Text Dynamic Feature Configuration

1. In the Action Codes box, click Text.

2. Type an expression in the Text Expression text box or click Expression to use the Expression
Builder. For more information, see Table 8 and the Using the Expression Builder section.

Three State Span Color

About this task:

In the following example, a shape is specified to span between the colors Blue (0), Gray (50), and
Red (100) based on the present values of a monitored room temperature (ZN-T) and its setpoint

46 Advanced Graphics Application Help

(ZN-SPT). When the temperature is 4 degrees below setpoint, the color is blue; when the tempera-
ture is 4 degrees above setpoint, the color is red.

Figure 38: Three State Span Color Dynamic Feature Configuration

To configure the Three State Span Color Action Code:

1. In the Action Codes box, click Three State Span Color.

2. Click in the Low Color box. The Color selection dialog box appears.

3. Select a color for the lower limit and click OK. The color appears in the Low Color box.

Note: The Low Color Limit value is 0, and colors with values lower than 0 automatically take on
the value 0.

4. Click in the Medium Color box. The Color selection dialog box appears.

5. Select a color for the medium value and click OK. The color appears in the Medium Color box.

6. Click in the High Color box. The Color selection dialog box appears.

7. Select a color for the higher limit and click OK. The color appears in the High Color box.

Note: The High Color Limit value is 100, and colors with values greater than 100 automatically
take on the value 100.

8. Click stroke or fill in the Apply To box.

Note: Click stroke for the outline color of the shape, or click fill for the fill color of the shape.

Note: Click Preview to display the Color Preview dialog box (Figure 39). With this dialog box
opened, use the slider bar to show how the color gradient changes between the Low, Medium,
and High Color selections. For example, if you selected red for the Low Color and green for the
Medium Color, the color appears brown halfway between red and green (25 on the preview
bar). Click Ok to exit the preview.

Advanced Graphics Application Help 47

Figure 39: Color Preview Dialog Box

9. Type an expression in the Color Expression text box or click Expression to use the Expression
Builder. For more information, see the Using the Expression Builder section.

Tooltip

About this task:

In the following example, a shape displays a tooltip box displaying the name of the ZN-T object in
the Arial font. We recommend that you select the Arial font, since this is a popular font present on
most computers, and any unusual fonts might not be available on the client computer.

Figure 40: Tooltip Dynamic Feature Configuration

1. In the Action Codes box, click Tooltip.

2. Type an expression in the Tooltip Text text box or click Expression to use the Expression
Builder. For more information, see the Using the Expression Builder section.

Using the Expression Builder

About this task:

Use the Expression Builder to add expressions when configuring the Action Codes used to animate
shapes. For more information on the Expression Builder, see the Expression Builder section.

1. In the Action Code configuration section of the screen, click Expression. (For example, see the
Expression button in Tooltip.) The Expression Builder appears. See Figure 3 and Table 7.

48 Advanced Graphics Application Help

2. Select a value or variable template option from the Read/Write bound values or Local variable
menu. See Table 8 for information on the logic function scripts.

3. Type the Object Reference or Local Variable in the Object Reference/Local Variable text box.

Note: Alternatively, you can click the Lookup button (ellipses) to launch the AGA Binder and
build an expression. See the Using the AGA Binder section.

4. Click Build. The Expression Builder builds the expression and displays it in the Generated
Expression text box.

Note: The Add Operator menu provides a list of commonly used logical operations to use in
building logical expressions. To add on to the expression, select an operator from the Add
Operator menu and repeat Steps 2 through 4.

Note: The NOT (!) and TERNARY (?) operators are also available for use by editing the
generated expression.

5. Click OK.

Using the AGA Binder

Use the AGA Binder to build an expression to bind data to a shape.

Important: To use the AGA Binder, the SCT must be accessible from the computer being used
to create the advanced graphic.

Important: The NAE/NCE/NIE or ADS/ADX database must be uploaded to the SCT before you
can use the AGA Binder to access points.

1. Click the graphics binding icon in the toolbar or select Graphics Binding from the Tools menu.
The AGA Binder appears (see Figure 4).
Note: You can also launch the AGA Binder from the Expression Builder screen by clicking
the Lookup button next to the Object Reference/Local Variable text box. Figure 3 points
out the Lookup button.

2. From the Actions menu, select Login. The SCT Login screen appears (Figure 41).

Figure 41: SCT Login Screen

Advanced Graphics Application Help 49

3. Type the host name in the Hostname text box.
Note: If the SCT is installed on your computer, use localhost as the Hostname. If the SCT
is on a server or different computer, type the IP address or host name of that machine.

4. Type your user name in the Username text box.

5. Type your password in the Password text box.

6. Click OK. If the host name, user name, and password you entered are correct, the AGA Binder
logs in to the SCT, and data becomes available in the SCT Archives and References tabs of
the AGA Binder. If the host name, user name, or password you entered is incorrect, an error
message displays. Click OK and try logging in again.

7. Double-click an archive database. The Reference tab becomes active displaying data from the
selected archive.

8. Navigate to and select an item or point to reference. Figure 4 shows the AGA Binder with the
References tab active and NAE-SIX selected with a single-click.
9. Single-clicking an item in the Reference tab’s Navigation Tree copies the item’s reference
data into the Windows clipboard. Double-clicking an item launches the Attribute dialog
box allowing you to select an attribute level reference. (If this Attribute dialog box does
not appear, see Troubleshooting.) Select the attribute from the drop-down list and click Ok
to copy the reference.

Figure 42: Attributes Dialog Box

Note: When you copy the attribute level reference, the attribute portion of the reference
changes to the number assigned to it in the Attributes Set. For example, the Present Value
attribute is designated as 85. To look up other attributes, refer to the Metasys System
Enumeration Sets Technical Bulletin (LIT-12011361).
Select an attribute level reference when editing shapes using action codes. When editing a
shape using the Custom Properties dialog box (Visio 2003) or Shape Data (Visio 2007 and
Visio 2010), do not select an attribute to reference.

10. Return to the Expression Builder or return to the main screen of the Advanced Graphics
Application and display an Action Code in the top panel of the screen.

11. Right-click in the text box to add the reference and select Paste. The reference appears in the
selected location.

12. For the Expression Builder, click Build to display the expression in the Generated Expression
text box and click Ok.

50 Advanced Graphics Application Help

13. To close the AGA Binder, select Exit from the AGA Binder’s File menu.

Creating an Aliased Graphic

About this task:

Use this example and Figure 43 to guide you in creating aliased graphics. This example describes
how to create a single graphic to use for all VAVs in a system. This method allows you to create
one graphic normally and then create an alias to use for the other graphics. See the Adding Action
Codes to a Shape section for details on adding action codes.
To create an aliased graphic (VAV example):

1. Create a general VAV graphic and bind data to a specific VAV controller normally.

2. Revisit each dynamic and perform the following tasks:

a. Highlight the portion of the object reference that represents the controller object (for
example, highlight VAV-1 in ‘ADS:NAE/N2-1.VAV-1.ZN-T.85’).

b. Replace the highlighted portion with the following text:

c. ‘ + lsv (‘VAV’, me) + ‘

where VAV is the name of the Local Variable to be defined in a Navigate action code
that contains the substitute VAV controller name.
3. Create another graphic with a floor plan containing shapes configured to navigate to the VAV
graphic.

For each navigation shape, use the Navigate action code to add a Local Variable named VAV with a
Local Value that contains the name of the VAV controller at the navigation shape’s location.

Figure 43: Aliased Graphic Example

Configuring Action Codes for a Return Fan Shape Example

About this task:

The following example shows how to configure the action codes of a Return Fan shape to change
colors to indicate when the fan is on or off. Use this example as a guide in defining dynamics for
your shapes. See the Creating and Editing an Advanced Graphic (Overview) section for information
on the processes. See the Graphics Example Stencil section for a list of the Return Fan action codes.
In this example, the Hide, Mouse Over, and Mouse Out action codes do not require modification.
The other action codes must be updated with valid object references.

Advanced Graphics Application Help 51

To configure action codes for a Return Fan shape:

1. In the Professional or Standard edition of Microsoft Visio 2003, 2007, or 2010 software, open or
create your graphic (Visio drawing in VSD format).

2. Add the Return Fan shape from the Graphics Example to a location in your graphic (Figure 44).

Figure 44: Return Fan Shape

3. Click just the red portion of the Return Fan shape and launch the Advanced Graphics Add-On
Application. Notice that Span Color is selected in the Dynamic Features section.

4. Remove the Span Color selection.

5. Click Discrete Color in the Dynamic Features portion of the screen.

6. From the Action Codes menu, click Discrete Color. The Discrete Color action code
configuration appears.

7. Follow the instructions in the Discrete Color section to add a red fill color (0) and a green fill
color (1). The red indicates the fan is off and the green indicates the fan is on.

8. Click the Expression button. The Expression Builder appears. See the Using the Expression
Builder section for details.

9. In the Read/Write bound values or Local variables menu, click Read a bound integer attribute
value.

10. Click the Lookup button to launch the AGA Binder.

11. Follow the instructions in the Using the AGA Binder section to log in to the SCT and select the
reference to the Present Value attribute of the RA Fan (Figure 45).

52 Advanced Graphics Application Help

Figure 45: Return Fan Present Value Reference in AGA Binder

12. Return to the Expression Builder screen and paste the reference in the Object Reference/Local
Variable text box (Figure 46).

Figure 46: Expression Builder Configuration

13. Click Build. The expression appears in the Generated Expression text box (Figure 47).

Advanced Graphics Application Help 53

Figure 47: Expression Builder Configuration Complete

14. Click OK.

15. On the Advanced Graphics Add-On screen, notice the expression is inserted in the Color
Selection Expression text box (Figure 48).

Figure 48: Discrete Color Configuration

16. Click Apply Changes.

17. In the Visio software File menu, click Save Advanced Graphics to save the changes to the
graphic in the SVG or SVGZ file.

18. Click the text box below the Return Fan label and launch the Advanced Graphics Add-On
Application. Notice that Text is selected in the Dynamic Features section.

19. In the Action Codes menu, select Text. The Text action code configuration appears with
an expression already defined. You need to replace the 0 in the expression with an object
reference (Figure 49).

54 Advanced Graphics Application Help

Figure 49: Text Action Code—Return Fan Label Configuration

20. Click the Lookup button to launch the AGA Binder.

21. Follow the instructions in the Using the Expression Builder section to log in to the SCT and click
the reference to the RA Fan.

22. Return to the Advanced Graphics Add-On screen, highlight the 0 in the existing expression, and
paste the new reference in its place (Figure 50).

Figure 50: Text Action Code—Return Fan Label Configuration Complete

23. Click Apply Changes.

24. In the Visio software File menu, select Save Advanced Graphics to save the changes to the
graphic in the SVG or SVGZ file.

25. Repeat Steps 18 through 24 to add valid references to the remaining action codes. Cmd Name
and Cmd Desc reference the command output object for the fan. Sts Name and Sts Desc
reference the status input object for the fan. This example uses the following expressions for
the remaining action codes:

- Text for Cmd Name—'Cmd Name: ' + bsv('CAMPUS-ADS1:NAE1/N2-1.AHU-1.RA Fan

Command.2390', me);

Advanced Graphics Application Help 55

 - Text for Cmd Desc—'Cmd Desc: ' + bsv('CAMPUS-ADS1:NAE1/N2-1.AHU-1.RA Fan
Command.28', me);

- Text for Sts Name—'Sts Name: ' + bsv('CAMPUS-ADS1:NAE1/N2-1.AHU-1.RA Fan

Status.2390', me);

- Text for Sts Desc—'Sts Desc: ' + bsv('CAMPUS-ADS1:NAE1/N2-1.AHU-1.RA Fan

Status.28', me);

- Left Click—ShowObjWindow('CAMPUS-ADS1:NAE1/RA Fan');

- Right Click—ShowCmdWindow('CAMPUS-ADS1:NAE1/RA Fan');

- Animate Hide—(bsv('CAMPUS-ADS1:NAE1/RA Fan.512',me)=='High Alarm')?true:

(bsv('CAMPUS-ADS1:NAE1/RA Fan.512',me)=='Low Alarm')?true:false

- Discrete Color for Present Value Text Box - biv(‘CAMPUS-ADS1:NAE1/RA Fan.85’,me);

26. From the Visio software File menu, select Save to save the changes to the Visio drawing in VSD
format.

27. Log in to the SMP UI or SCT UI.

28. Insert a graphic object into the SMP UI or SCT UI and import the advanced graphic. See the
Inserting an Advanced Graphic to the UGT section.

29. View the graphic (Figure 51). Left-click the fan to display the RA Fan focus window. Right-click
the fan to open the RA Fan command window. See the Viewing a Graphic section.

Figure 51: Return Fan On and Off

Inserting an Advanced Graphic to the UGT

About this task:

Use this procedure to insert a graphic object into the User Graphics Tool and attach an advanced
graphic file to the object using the Insert Graphic Wizard. In order to attach the graphic file, the file
must be accessible, either locally or remotely via a mapped network drive. For more information on
how to insert a Graphic object, refer to the Wizards section of the Metasys SMP Help (LIT-1201793).

1. Log in to the SMP UI.

56 Advanced Graphics Application Help

2. Select the location in the Navigation Tree where you want to store your graphic.

3. In the Insert menu, select Graphic. The Insert Graphic Wizard appears with the Destination
screen open.

4. If you clicked the location for your graphic in Step 2, that location appears as the default
destination. If not, or if you have decided to place the graphic in a different location, select the
destination for your new graphic and click Next. The Insert Graphic Wizard Identifier screen
appears.

5. Give the graphic a unique name and click Next. The Insert Graphic Wizard Configure screen
appears.

6. Make sure the information on the Configure screen is correct and click Next. The Insert
Graphic Wizard Summary screen appears.

Note: The Description and Object Category attributes are optional, but can be used to help
you remember the purposes for the different graphics.

7. Make sure the information on the Summary screen is correct and click Finish.

8. In the Action menu in the SMP UI, click Refresh on all tabs to make sure that you can see your
new graphic object in the navigation tree.

9. Double-click the graphic object to display it in the display panel.

10. On the Graphic tab, click Edit.

11. Click the Set Advanced Image button. The Open dialog box appears.

12. Browse to and select the SVG or SVGZ file you want to attach to this Graphic object.

13. Click Open.

14. Click Save to insert the Graphic object into the database.

15. Go to the Viewing a Graphic section.

Viewing a Graphic

You view an advanced graphic in the SMP UI, not the Advanced Graphics Application.

1. Double-click the advanced graphic in the SMP UI (ADS/ADX/NAE/NCE). The advanced graphic
opens in the user interface framework (see Figure 8). The advanced graphic retrieves object
reference values from the associated devices, for example, the NAE/NCE or the ADS.

2. Monitor and command the system according to the graphic’s configuration. For example, if a
shape is configured to launch the Command window (using ShowCmdWindow), you can send a
command to the referenced device. To zoom, use Table 11.
Table 11: Zooming in an Advanced Graphic
Key Stroke/Mouse Action Zoom Function
Ctrl + shift + right-click Return to initial view.

Advanced Graphics Application Help 57

Table 11: Zooming in an Advanced Graphic
Key Stroke/Mouse Action Zoom Function
Ctrl + right-click + drag the mouse Rotate the image.
Ctrl + left-click + drag the mouse Zoom to the zoom selection box.
Shift + right-click + drag the mouse Start interactive zoom.
Shift + left-click + drag the mouse Pan over the image.

See Advanced Graphics Viewing.

Troubleshooting
The following table lists possible problems and the warning messages that appear in the Advanced
Graphics Application and describes their solutions.
Table 12: Troubleshooting and Warning Messages
Problem, Error, or Pop-Up Message Solution
Occurs when there is an error in the action
codes defined for that shape. Double-click the
Java console icon. Look for the AGAException
(shape ID) message. If this message appears,
there is an error in the action codes for that
A shape dynamic does not work in the Adobe shape.
SVG Viewer (runtime mode).
In the Professional or Standard edition of
Microsoft Visio 2003, 2007, or 2010 software,
select that shape. Launch the Advanced
Graphics Application. Check the action codes for
syntax errors and modify as needed.
To improve performance, split up complex
graphics into multiple graphics or redesign
Advanced graphics display slowly.
graphics to reduce complexity and remove
unnecessary components.
Release 3.0 or later does not support SMIL
Release 3.0 or later Advanced Graphics animation. Release 3.0 or later Advanced
Application does not show Synchronized Graphics Application supports only those SMIL
Multimedia Integration Language (SMIL) functions that the Action Code Editor generates.
animation in my graphic. If you add SMIL to your graphics, you may lose
functionality in your advanced graphic.
Release 3.0 or later Advanced Graphics
You cannot create ActiveX controls with Application does not provide access to the entire
the Release 3.0 or later Advanced Graphics suite of Windows Internet Explorer Application
Application. Programming Interfaces (APIs), including those
that allow you to create ActiveX controls.
Appears while saving the SVG file and the
[Action code name] is configured
specified action code is configured improperly.
improperly. Do you want to delete the
Click Yes to delete the action code or click No
action codes? Click Yes to delete,
to remove the shape selection. Reconfigure the
Click No to deselect the shape
action code and save the file as an SVG.

58 Advanced Graphics Application Help

Table 12: Troubleshooting and Warning Messages
Problem, Error, or Pop-Up Message Solution
Appears when you attempt to launch the
An Application instance of Action Code Advanced Graphics Application Add-On when
AddOn is already running. the add-on is already running. Click OK and
select the existing add-on screen.
Appears when you attempt to save an advanced
[C:\Documents and Settings
graphic with the same file name as an existing
\hpd240\Desktop\all.svg] already
graphic. Click Yes to overwrite the existing file.
exists. Do you want to replace it?
Click No to save the file under a different name.
Appears when you select Actions > Show
Attributes in the AGA Binder when the network
is down, or when the computer with SCT is
running a version of MicrosoftSQL Server with
Could not retrieve Attributes!
non-default or named instance. Make sure that
the default Metasys user name MetasysSysAgent
and default password are enabled. Click OK and
try again.

Advanced Graphics Application Help 59

Table 12: Troubleshooting and Warning Messages
Problem, Error, or Pop-Up Message Solution
Appears when you select Actions > Show
Attributes in the AGA Binder when the Release
8.1 version of AGA is installed on an SCT
computer with SCT version 11.1. AGA cannot
access the SCT archive database because the
default Metasys user name has a dynamic and
encrypted password.

To work around this issue, add a new user with

Windows login authentication to the SCT archive
database.

1. On the SCT computer, open SQL

Management Studio, and connect to the
SCT computer. Or, use Remote Desktop
Connection and access the SCT computer to
open and connect to the SCT computer.

2. In the Object Explorer, expand the

Database folder and then expand the SCT
archive database folder.

3. Right-click the Security folder and select

New > User.

Could not retrieve Attributes! 4. In the Database User—New window, select

Windows user from the User type drop-
down menu. The Select User or Group
dialog box appears.

5. Type in the username in the Enter the

objects name to select field. Click Check
Names.

6. Click OK.

7. Enter the same username in the Login

name field.

8. For the Default schema field, click the

browse button. The Select Schema dialog
box appears.

9. Click the Browse button next to the Enter

the object names to select field. The
Browse for Objects dialog box appears.

10. Select the db_owner option and click OK.

11. Click OK in the Database User—New

window.

60 Advanced Graphics Application Help

Table 12: Troubleshooting and Warning Messages
Problem, Error, or Pop-Up Message Solution
Appears when you click Apply Changes and
Double quotes cannot be entered in the specified action code field contains double
[action code name field]. quotation marks. Click OK and edit the action
code using only single quotation marks.
Appears when you select a Graphics Example
shape in the Professional or Standard edition
of Microsoft Visio 2003, 2007, or 2010 software
and launch the Advanced Graphics Add-On. This
message also appears when you change from
one Graphics Example shape to another. Click
Editing any Graphics Example shape may OK to proceed and edit the shape as desired for
destroy some of the special features your advanced graphic.
of the shape.
Note: If you choose to modify the action
codes of a shape from the Graphics
Example, the custom properties of that
shape do not function after editing the
action codes using the Advanced Graphics
Application.
Appears when you select an action code in
the Advanced Graphics Application, but there
Error while checking the ActionCode is no Visio drawing open. Click OK. Close the
Checkbox. Advanced Graphics Application. Open a Visio
drawing and launch the Advanced Graphics
Application.
Appears when you attempt to add an existing
Item already exists
item into the Navigate dynamic list. Click OK.
Appears when you click Apply Changes, and the
Please add the elements in the
Discrete Color action code contains no items in
listview.
the list view. Click OK and add items to the list.
Appears when:
• you click OK on the SCT Login screen of the
AGA Binder after entering incorrect login
information. Click OK and verify that the
Hostname, Username, and Password you
Please check the Hostname, Username
entered are valid and correct.
and Password
• you click OK on the SCT Login screen of the
AGA Binder after not entering any login
information. Close the application and
relaunch the AGA Binder.
Appears when you select field points in the AGA
Please check the network connection
Binder when the system is not in the network.
and try again!
Click OK and check the connection.

Advanced Graphics Application Help 61

Table 12: Troubleshooting and Warning Messages
Problem, Error, or Pop-Up Message Solution
Appears when you click Apply Changes and
the SVG Tag Attribute dynamic contains
Please enter alphanumeric characters.
invalid characters. Click OK and make sure all
First character should be an alphabet.
characters are alphanumeric, where the first
character must be alphabetic.
Appears when you click Apply Changes and the
Please enter a valid javascript file. Include dynamic has an invalid JavaScript file.
Click OK and attach a valid file.
Appears when you click Apply Changes and the
Sound dynamic has an invalid sound file. The
Please enter a valid sound file.
valid format is .wav. Click OK and attach a valid
file.
Appears when you click Apply Changes and the
Please enter a valid URL starting with
Hyper Link dynamic has an invalid link. Click OK
“http://”
and enter a valid link.
Appears when you click OK in the Expression
Builder without entering valid data in the Object
Please enter a value in the Object Reference/Local Variable text box. Click OK and
Reference/Local Variable text box enter a valid object reference/local variable in
the Expression Builder’s Object Reference/Local
Variable text box.
Appears when you click Apply Changes and
Please enter the value in [action code the specified action code field contains no
name field]. expression. Click OK and enter the value in text
expression.
Appears when you attempt to launch the
Advanced Graphics Application without opening
a drawing in the Professional or Standard
Please open a Visio Drawing and select
edition of Microsoft Visio 2003, 2007, or 2010
a Shape before launching AGA Action
software. Click OK. Open the Visio drawing,
Code AddOn.
select a shape, and launch the Advanced
Graphics Application as instructed in this Help
system.
Appears when you select Actions > Show
Attributes in the AGA Binder without first
Please select a field point.
selecting a field point. Click OK and select a field
point.
Appears when you attempt to launch the
Advanced Graphics Add-On Application without
first selecting a shape in the Visio 2003, 2007,
Please select a valid shape to
or 2010 software. Click OK and select a shape
continue.
in Professional or Standard edition of Microsoft
Visio before launching the Advanced Graphics
Application.

62 Advanced Graphics Application Help

Table 12: Troubleshooting and Warning Messages
Problem, Error, or Pop-Up Message Solution
Appears when you select Actions > Get Field
Please select an archive. Points in the AGA Binder without first selecting
an archive. Click OK and select an archive.
Appears when you select more than one shape
in the Professional or Standard edition of
Microsoft Visio 2003, 2007, or 2010 software
and attempt to launch the Advanced Graphics
Application. Click OK. Select one shape in Visio
and launch the Advanced Graphics Application
Please select only one Shape. as instructed in this Help system.

Note: This message does not appear if you

have the Hide warning on multiple shape
selection option of the AGA Preferences
dialog box selected. See the Preferences
section.
Appears when you select items in the Discrete
Color list view and click Apply Changes without
Please update the items.
first clicking the Update or Remove button. Click
OK and update or remove the items.
Appears when you click Apply Changes in the
Advanced Graphics Application and a required
field for the configuration is missing. Verify that
Required Field
the mandatory details for all of the selected
action codes have been entered. There should
be no empty fields.
Appears while saving the file with action codes
Some of the action codes were
configured improperly and the program deleted
deleted as they were not completely
the incorrect action codes. Click OK. Check that
configured.
the shape has action codes configured properly.
Appears when you open the shape sheet and
attempt to launch the Advanced Graphics
Application Add-On screen. Click OK and select
a shape in the Professional or Standard edition
of Microsoft Visio 2003, 2007, or 2010 software
The active window in Visio must be a drawing workspace before launching the
drawing window with a selected shape Advanced Graphics Application.
for this Addon to work.
Note: After this warning message appears,
the Error while checking the Action Code
Checkbox warning appears. See Error
while checking the ActionCode
Checkbox in this table.

Advanced Graphics Application Help 63

Table 12: Troubleshooting and Warning Messages
Problem, Error, or Pop-Up Message Solution
Appears in the Advanced Graphics Application
every 15 minutes if the program is not properly
licensed. Click OK and activate the Advanced
The application is not licensed. Graphics Application license online with
Please contact Johnson Controls your product key or offline with your license
support group for further details. activation file. Refer to the Software Activation
Manager Help (LIT-12012389) for further details.
For help, contact your local Johnson Controls
representative.
Appears when you exit or cancel out of the
Advanced Graphics Add-On Application without
saving. Click Yes if you want to save the
changes. Click No if you do not want to save
The current form is being closed. Do the changes. Click Cancel to go back to the
you want to save the changes? Advanced Graphics Add-On Application.

Note: This message does not appear if you

have the Always Save Changes option of
the AGA Preferences dialog box selected.
See the Preferences section.
Appears when you close a Visio drawing
without saving. Click Yes if you want to save the
changes. Click No if you do not want to save the
changes. Click Cancel to go back to the Visio
The current Visio drawing is being drawing.
closed. Do you want to save the
changes? Note: This message does not appear if
you have the Hide warning on closing
the editor option of the AGA Preferences
dialog box selected. See the Preferences
section.
The Expression Builder is being Appears when you exit or cancel out of the
closed. The changes done in the Expression Builder without applying your
Expression Builder will not be changes. Click Yes to proceed without saving.
reflected, if you proceed further. Do Click No to return to the Expression Builder and
you want to continue? save/apply your changes.
Appears when you attempt to save a graphic
and the Sound dynamic has an invalid sound
file. The valid format is .wav. Click OK and attach
The Sound File associated with SOUND a valid file.
Action [path_to_file] is invalid.
This error also appears if you enter a valid wav
file with the incorrect file name or path. Click OK
and correct the file name or path of the wav file.

64 Advanced Graphics Application Help

Table 12: Troubleshooting and Warning Messages
Problem, Error, or Pop-Up Message Solution
Appears when you select a different shape in
the Visio drawing without saving the changes
you made to the first shape. Click Yes if you
There has been a change in selection want to apply the changes. Click No if you do
in the Visio drawing and some changes not want to apply the changes.
were made to the earlier selection. Do
Note: This message does not appear if
you want to apply the changes?
you have the Hide warning on shape
selection in Visio option of the AGA
Preferences dialog box selected. See the
Preferences section.
Appears when you click off of the previously
selected shape in the Visio drawing and a
shape is not selected. Click OK and select a
shape in the Professional or Standard edition of
There is no shape selected. Please Microsoft Visio 2003, 2007, or 2010 software.
select a shape to continue.
Note: This message does not appear if
you have the Hide warning on deletion
of shape in Visio option of the AGA
Preferences dialog box selected. See the
Preferences section.
Appears when the Professional or Standard
Visio process has been terminated AGA edition of Microsoft Visio 2003, 2007, or 2010
ActionCode AddOn is exiting. software is forced to close (for example, from
the Task Manager).
Appears when you attempt to log in to an SCT
You must first choose an SCT host for
without entering a host. Click OK and enter a
the AGA to login to
host.

Advanced Graphics Application Help 65

Table 12: Troubleshooting and Warning Messages
Problem, Error, or Pop-Up Message Solution
Appears because Internet Information
Services (IIS) on the Windows Server 2008
or later operating system is asked to open a
file with an extension that is not registered
with IIS. Symptoms of this situation include
a nonresponsive Internet Explorer web
browser and a progress bar that never reaches
completion.

To register your SVG and SVGZ files:

1. In Control Panel on the Advanced Graphics

Application computer, select Administrative
Tools > Internet Information Services (IIS)
Manager. The Internet Information Services
(IIS) Manager window appears.

2. In the navigation tree on the left, navigate

to the (local computer) > Sites > Default
Web Site.
404 Not Found
3. In the Default Web Site Home window,
double-click MIME Types.

4. In the Actions window, click Add.

5. In the Add MIME Type window, type SVG

in the File name extension field and type
image/svg+xml in the MIME type field.

6. Click OK.

7. In the Actions window, click Add.

8. In the Add MIME Type window, type SVGZ

in the File name extension field and type
image/svg+xml in the MIME type field.

9. Click OK.

10. Close the Internet Information Services (IIS)

Manager window.

66 Advanced Graphics Application Help

Table 12: Troubleshooting and Warning Messages
Problem, Error, or Pop-Up Message Solution
Release 3.0 or later Advanced Graphics
Application does not allow any syntax errors in
the SVG and does not draw graphics with syntax
problems.

The Release 3.0 or later Advanced Graphics

Application may make rendering errors with
certain types of SVG. For example, graphics like
the following may experience problems:

• Five rectangular diagonal gradients

You are having syntax and rendering (Visio software fill patterns 31–35) appear
errors with the Release 3.0 or later transparent when you view the advanced
Advanced Graphics Application. graphic in the SMP UI.

• Line endings (arrowheads) created in Visio

graphics software do not appear when you
view the advanced graphic in the SMP UI.

• Embedded OLE objects may experience

problems, including Computer Aided Drafting
(CAD) artwork that has not been ungrouped,
Windows MetaFile data that has not been
ungrouped, or command buttons from the
Microsoft Controls palette.

Related Documentation
Table 13: Related Information
For Information On See Document
Installing the Advanced Graphics Advanced Graphics Application Installation Guide
Application software (LIT-12011525)
User Graphics Tool (UGT) section of the Metasys® Site
How to use the User Graphics Tool
Management Portal Help (LIT-1201793)
How to license the Advanced
Software Manager Help (LIT-12012389)
Graphics Application software
Metasys system Metasys® System Configuration Guide (LIT-12011832)
Metasys system terms and acronyms Metasys System Extended Architecture Glossary (LIT-1201612)

Software terms
Use of the software that is in (or constitutes) this product, or access to the cloud, or
hosted services applicable to this product, if any, is subject to applicable terms set forth at
www.johnsoncontrols.com/techterms. Your use of this product constitutes an agreement to such
terms.

Advanced Graphics Application Help 67

Product warranty
This product is covered by a limited warranty, details of which can be found at
www.johnsoncontrols.com/buildingswarranty.

Patents
Patents: http://jcipat.com

© 2019 Johnson Controls. All rights reserved. All specifications and other information shown were current as of document
revision and are subject to change without notice.
 Index

A Set Fill .................................................... 42

Index
Sound .................................................... 43
Action Codes .............................................................. 7

Span Color ............................................ 44

Action Codes

Spin ........................................................ 45
Adding ................................................... 28
SVG Tag Attribute ................................. 45
Animate Hide ........................................ 29
Text ........................................................ 46
Animate Scale ....................................... 30
Three State Span Color ........................ 46
Configuring ........................................... 29
Tooltip ................................................... 48
Custom Actions .................................... 31

Discrete Color ....................................... 31

Adding Action Codes ................................... 28
Example ................................................. 51

Flash ....................................................... 32 Advanced Graphics Menus ........................... 5

Hide ....................................................... 33
Advanced Graphics Toolbar .......................... 5
Hyper Link ............................................. 34

Include ................................................... 35 AGA Binder ............................................ 13, 49

Left Click ................................................ 35

Aliasing ................................................... 21, 51
Middle Click ........................................... 36

Mouse Down ......................................... 36

Animate Hide ........................................... 7, 29
Mouse Move ......................................... 37

Mouse Out ............................................ 37 Animate Scale .......................................... 7, 30

Mouse Over .......................................... 38

Animating ...................................................... 28
Mouse Up .............................................. 38
B
Move ...................................................... 39

Navigate ................................................ 39
bbv ................................................................. 11
Right Click ............................................. 40

Rotate .................................................... 41 bfv .................................................................. 11

Scale ....................................................... 42
 Index

Binder ............................................................ 13
Discrete Color .......................................... 7, 31

Binding ............................................ 13, 21, 49

Dynamics

biv .................................................................. 11 Animate Hide .......................................... 7

Animate Scale ......................................... 7

Bound Boolean Attribute Value .................. 11
Custom Actions ...................................... 7

Bound Floating Point Attribute .................. 11 Discrete Color ......................................... 7

Flash ......................................................... 7
Bound Integer Attribute Value ................... 11
Hide .......................................................... 7

Hyper Link ............................................... 7

Bound String Value ...................................... 11
Include ..................................................... 7

bsv .................................................................. 11 Move ........................................................ 7

Navigate .................................................. 7
Building Expressions ................................... 48
Rotate ...................................................... 7
C
Scale ......................................................... 7

Set Fill ...................................................... 7

Configuration Example ................................ 51
Sound ...................................................... 7

Configuring Action Codes ........................... 29 Span Color .............................................. 7

Spin .......................................................... 7
Create
SVG Tag Attribute ................................... 7
Aliased Graphic .................................... 51
Text .......................................................... 7
Graphic .................................................. 26
Three State Span Color .......................... 7

Tooltip ...................................................... 7
Custom Actions ....................................... 7, 31

D E

Edit
Differential Pressure .................................... 14
 Index

Graphic .................................................. 26 Graphics Example ....................................... 14

Example Configuration ................................ 51 Graphics Example Shapes ........................... 14

H
Expression Builder ......................................... 9

Building Expressions ........................... 48 Hide .......................................................... 7, 33

Generated Expression ........................... 9

Humidity Sensor ........................................... 14

Operators ................................................ 9

Read/Write Bound Values ..................... 9

Hyper Link ................................................ 7, 34
Read/Write Local Variables ................... 9
I

Expressions ................................................... 48
Importing ...................................................... 56
Example ................................................... 9

F Include ..................................................... 7, 35

Fan ................................................................. 14 Insert Graphic Wizard .................................. 56

L
Flash ......................................................... 7, 32

G lbv .................................................................. 11

Graphic Left Click ........................................................ 35

Aliasing ........................................... 21, 51

lfv ................................................................... 11
Binding .................................... 13, 21, 49

Creating ................................................. 26 Link ........................................................... 7, 34

Editing ................................................... 26
liv .................................................................... 11
Importing .............................................. 56

Viewing .................................................. 57
Local Boolean Point Value ........................... 11
 Index

Local Floating Point Value ........................... 11 O

Local Integer Point Value ............................ 11 Object Reference ............................................ 9

P
Local String Point Value .............................. 11

Precache Definition ................................................. 27

Local Value .................................................... 11 Precache Feature ...................................................... 6

Preferences ................................................................ 5
Logic .............................................................. 11

Pump ............................................................. 14
lsv ................................................................... 11
R
M

References ............................................. 13, 49

Menus .............................................................. 5

Return Fan .................................................... 14

Middle Click ................................................... 36

Right Click ..................................................... 40

Mouse Down ................................................. 36

Right Horizontal Water Pump ..................... 14

Mouse Move ................................................. 37

Rotate ....................................................... 7, 41
Mouse Out .................................................... 37

RS9100 ........................................................... 14
Mouse Over .................................................. 38
S
Mouse Up ...................................................... 38

Scalable Vector Graphics ............................... 3

Move ......................................................... 7, 39

Scale ......................................................... 7, 42
N

Scripts ............................................................ 11
Navigate ................................................... 7, 39
 Index

SCT Archives .......................................... 13, 49 SVG ................................................................... 3

Select Color ................................................... 11 SVG Tag Attribute ................................... 7, 45

Sensor ............................................................ 14 Syntax .............................................................. 9

T
Set Fill ....................................................... 7, 42

T-4000 ............................................................ 14
setlv ................................................................ 11

TC9100 Stat ................................................... 14

Shapes ........................................................... 14

Adding Action Codes ........................... 28 TE-6700 .......................................................... 14

Animating .............................................. 28

Temperature Sensor .................................... 14

Show Command Window ............................ 11

Text ........................................................... 7, 46

Show Object Window ................................... 11

Three State Span Color ........................... 7, 46

Sound ....................................................... 7, 43

TMZ ................................................................ 14

Span Color ............................................... 7, 44

Toolbar ............................................................ 5
Three State ............................................ 46

Tooltip ...................................................... 7, 48
Spin ........................................................... 7, 45

troubleshooting ...................................................... 58

Stat ................................................................. 14
U

Stencil ............................................................ 14
UGT ......................................................... 24, 56

Importing a Graphic ............................ 56

Supply Fan .................................................... 14

User Actions
 Index

Left Click .................................................. 7

Middle Click ............................................. 7

Mouse Down ........................................... 7

Mouse Move ........................................... 7

Mouse Out .............................................. 7

Mouse Over ............................................ 7

Mouse Up ................................................ 7

Right Click ............................................... 7

User Graphics Tool ............................... 24, 56

Variables ........................................................ 11

Viewing ..................................................................... 24

Viewing .......................................................... 57

Water Pump .................................................. 14

Wizard ............................................................ 56

Zoom .............................................................. 57