Creating and Managing Industrial

Graphics User Guide

© 2020 AVEVA Group plc and its subsidiaries. All rights reserved.

No part of this documentation shall be reproduced, stored in a ret rieval system, or transmitted by any
means, electronic, mechanical, photocopying, rec ording, or otherwise, without the prior written
permission of AVEVA. No liability is assumed with respect to the use of the information contained herein.
Although precaution has been taken in the preparation of this documentation, A VEVA assumes no
responsibility for errors or omissions. The information in this documentation is subject to change without
notice and does not represent a commitment on the part of AVEVA. The soft ware described in this
documentation is furnished under a license agreement. This soft ware may be used or copied only in
accordance with the terms of such license agreement.
ArchestrA, Aquis, Avantis, Citect, DYNSIM, eDNA, EYESIM, InBatch, InduSoft, InStep, Int elaTrac,
InTouch, OASyS, PIPEPHASE, PRiSM, PRO/II, PROV ISION, ROMeo, SIM4ME, SimCentral, SimSci,
Skelta, SmartGlance, Spiral Software, Termis, WindowMaker, WindowViewer, and Wonderware are
trademarks of AVEVA and/or its subsidiaries. An extensive listing of AVEVA trademarks can be found at:
[Link] All other brands may be trademarks of their respective owners.
Publication date: Thursday, February 6, 2020
Contact Information
AVEVA Group plc
High Cross
Madingley Road
Cambridge
CB3 0HB. UK
[Link]
For information on how to cont act sales, customer training, and technical support, see
[Link]
 Creating and Managing Industrial Graphics User Guide

Contents
Chapter 1 About Creating and Managing Industrial Graphics ...................................... 19
Managing Industrial Graphics .................................................................................................. 19
Managing Graphics in the Graphic Toolbox ......................................................................... 20
Managing Graphics in Automation Objects.......................................................................... 20
Re-using Industrial Graphics .................................................................................................... 21
Industrial Graphics and Instantiation ......................................................................................... 21
Creating Industrial Graphics..................................................................................................... 22
The Industrial Graphic Editor Interface ................................................................................ 23
Tools Panel ................................................................................................................. 23
Elements List .............................................................................................................. 24
Properties Editor.......................................................................................................... 24
Animations Summary ................................................................................................... 25
Canvas ....................................................................................................................... 25
Elements .......................................................................................................................... 25
Basic Elements ........................................................................................................... 25
Status Element ............................................................................................................ 26
Windows Common Controls ......................................................................................... 27
Groups ....................................................................................................................... 28
Path Graphics ............................................................................................................. 29
Windows Client Controls .............................................................................................. 29
Properties ......................................................................................................................... 30
Predefined Properties .................................................................................................. 30
Custom Properties ....................................................................................................... 30
Properties of Groups .................................................................................................... 30
Animations ........................................................................................................................ 32
Animation Types.......................................................................................................... 32
Data Sources for Animations ........................................................................................ 34
Animation Capabilities of Groups .................................................................................. 34
Animation States ......................................................................................................... 35
Embedded Graphics ............................................................................................................... 36
Appearance of Embedded Graphics ................................................................................... 36
Changing Embedded Graphics........................................................................................... 37
Embedding and Instantiation .............................................................................................. 37
Graphic Change Propagation ............................................................................................. 38
Size Propagation and Anchor Points................................................................................... 39
Estimating Graphic Performance.............................................................................................. 40
Estimating Graphics' Performance ...................................................................................... 40
Understanding GPI Rating Calc ulations .............................................................................. 42
Elements Category ...................................................................................................... 42
Animations Category ................................................................................................... 43
Styles Category ........................................................................................................... 45
Referenc e Category..................................................................................................... 45
Custom Properties Category ........................................................................................ 45
Scripts Category .......................................................................................................... 46

3
Creating and Managing Industrial Graphics User Guide Contents

Examining a Graphic with a 4.5 GPI Rating ......................................................................... 46

Saving a Graphic that May Impact Runtime Performance ..................................................... 48
Showing Quality and Status ..................................................................................................... 48
Showing Quality and Status with the Status Element ........................................................... 48
Showing Quality and Status by Overriding .......................................................................... 49

Chapter 2 Comparing WindowMaker and Industrial Graphic Editor............................ 51

Comparing WindowMaker and Industrial Graphic Editor Differences between WindowMaker and
the Industrial Graphic Editor .................................................................................................... 51
Elements .......................................................................................................................... 51
Appearance ...................................................................................................................... 51
Enhanced Functionality ..................................................................................................... 51
Usability Enhancements............................................................................................... 51
Style Replication.......................................................................................................... 52
Animation Replic ation .................................................................................................. 52
Element Positioning ..................................................................................................... 52
Group Functionality ..................................................................................................... 52
Extensibility with Custom Properties ............................................................................. 52
Element Styles ............................................................................................................ 53
Miscellaneous Enhancements ...................................................................................... 53
Procedures for Common WindowMaker Tasks and Techniques ................................................. 53
Using Graphics ................................................................................................................. 53
Using the Drawing Area ............................................................................................... 54
Setting the Drawing Area Color .................................................................................... 54
Using Basic Objects..................................................................................................... 54
Using Complex Objects................................................................................................ 54
Using Wizards ............................................................................................................. 55
Using Animations .............................................................................................................. 55
Configuring Data Sources ............................................................................................ 55
Using Data Types ........................................................................................................ 55
Using Animations ........................................................................................................ 57
Using Scripts .................................................................................................................... 58
Using Application Scripts ............................................................................................. 59
Using Key Scripts ........................................................................................................ 59
Using Condition Scripts ................................................................................................ 59
Using Data Change Scripts .......................................................................................... 59
Using Action Scripts..................................................................................................... 60

Chapter 3 Managing Graphics ........................................................................................... 61

Managing Graphics About Industrial Graphics......................................................................... 61
Creating a New Graphic .......................................................................................................... 61
Creating Symbols in the Graphic Toolbox ........................................................................... 62
Creating Symbols in AutomationObject Templates .............................................................. 63
Creating Symbols in AutomationObject Instances ................................................................ 64
Opening Graphics for Editing ................................................................................................... 65
Opening Graphics for Editing Organizing Graphics .................................................................. 65
Creating Graphic Toolsets in the Graphic Toolbox ............................................................... 65
Using Graphic Thumbnails ................................................................................................. 66
Moving Graphics between Graphic Toolsets ....................................................................... 66
Renaming Graphics........................................................................................................... 67
Copying Graphics.............................................................................................................. 67
Renaming Graphic Toolsets ............................................................................................... 67

4
Contents Creating and Managing Industrial Graphics User Guide

Deleting Graphic Toolsets .................................................................................................. 68

Moving Graphic Toolsets ................................................................................................... 68
Customizing Graphic Toolsets............................................................................................ 68
Importing and Exporting Graphics ............................................................................................ 68
Importing Graphics as aaPKG Files .................................................................................... 69
Exporting Graphics ............................................................................................................ 69
Programmatically Exporting and Importing Industrial Graphics, Strings, and References ............. 70
About Programmatic Graphic Export and Imp ort .................................................................. 70
Implementing the GraphicAccess API ........................................................................... 71
GraphicAccess Interface Methods ................................................................................ 71
About Programmatic String and Reference Export and Import .............................................. 72
Implementing the GraphicAccess2 API ......................................................................... 73
GraphicAccess2 Interface Methods .............................................................................. 73
Importing Industrial Graphics from XML Files ...................................................................... 74
Exporting Industrial Graphics to XML Files .......................................................................... 74
Exporting and Importing Overridden Text Strings................................................................. 74
Exporting Overridden Text Strings ................................................................................ 75
Importing Overridden Text Strings ................................................................................ 76
Associating All Galaxy Graphics with an InTouchViewApp ......................................................... 77
Deleting a Graphic .................................................................................................................. 77
Creating Multiple Configurations of a Graphic ........................................................................... 78
Understanding Visual and Functional Graphic Configurations ............................................... 78
Visual Graphic Configurations ...................................................................................... 78
Functional Graphic Configurations ................................................................................ 78
Different Symbol Wizard Work Flows .................................................................................. 78
Create Fixed Size Symbols ...................................................................................................... 79
Use the Symbol Editor to Create Fixed Size Symbols .......................................................... 80
Create a Symbol to Fit a Pane of a Known Size .................................................................. 81
Create a Fixed Sized Symbol for a Known Pane Size .......................................................... 82
More Information About Fixed Size Symbols During Configuration ........................................ 83
Fixed Size Symbol Behavior During Run Time .................................................................... 84
Embedded Graphics ............................................................................................................... 84
Appearance of Embedded Graphics ................................................................................... 85
Changing Embedded Graphics........................................................................................... 85
Configuring Security for Symbols ............................................................................................. 85
Writing to Attributes Configured for Secured or Verified Writes ................................................... 86
Working with the SignedWrite() Function for Secured and Verified Writes ................................... 86
SignedWrite() Run-time Behavior ....................................................................................... 87
SignedWrite() Script Execution Sequence at Run Time .................................................. 88
SignedWrite() Scripting Tips ............................................................................................... 88
Examples of Using the Attribute Parameter in the SignedWrit e() Function ............................. 88
Secured and Verified Write Applied Examples ..................................................................... 90
Viewing a Graphic in Read-Only Mode ..................................................................................... 91

Using the Industrial Graphic Editor...................................................................................... 93

Showing, Hiding and Adjusting Panels...................................................................................... 93
Panning and Zooming the Canvas ........................................................................................... 93
Panning ............................................................................................................................ 93

5
Creating and Managing Industrial Graphics User Guide Contents

Using the Pan and Zoom Window to Pan ...................................................................... 93

Using the Hand Tool to Pan ......................................................................................... 94
Using the Mouse Scroll Wheel to Pan ........................................................................... 94
Zooming ........................................................................................................................... 94
Zooming In to a Specified Point .................................................................................... 95
Zooming Out from a Specified Point.............................................................................. 95
Zooming to the Default Zoom Value .............................................................................. 95
Zooming a Selected Element........................................................................................ 95
Zooming a Specified Area ............................................................................................ 95
Selecting or Specifying a Zoom Value ........................................................................... 96
Using the Pan and Zoom Window to Change the Zoom ................................................. 96
Using the Mouse Scroll Wheel for Zooming ................................................................... 96
Configuring Designer Preferences ............................................................................................ 96
Using the Symbol Wizard Editor ............................................................................................... 97

Working with Graphic Elements ......................................................................................... 101

About Graphic Elements ........................................................................................................ 101
Drawing and Dragging Elements ............................................................................................ 101
Drawing Rectangles, Rounded Rectangles, Ellipses, and Lines .......................................... 102
Drawing Polylines, Polygons, Curves, and Closed Curves ................................................. 102
Drawing 2-P oint Arcs, 2-Point Pies and 2-Point Chords ..................................................... 102
Drawing 3-P oint Arcs, 3-Point Pies, and 3-Point Chords .................................................... 102
Placing and Importing Images .......................................................................................... 103
Drawing Buttons .............................................................................................................. 103
Placing Text .................................................................................................................... 103
Drawing Text Boxes ........................................................................................................ 103
Drawing Status Elements ................................................................................................. 104
Drawing Windows Controls .............................................................................................. 104
Dragging Elements .......................................................................................................... 104
Editing Element Properties .................................................................................................... 105
Selecting Elements ............................................................................................................... 106
Selecting Elements by Mouse Click .................................................................................. 107
Selecting Elements by Lasso ........................................................................................... 107
Selecting All Elements ..................................................................................................... 107
Selecting Elements Using the Elements List...................................................................... 108
Unselecting Elements ...................................................................................................... 108
Inline Editing ......................................................................................................................... 108
Copying, Cutting, and Pasting Elements ................................................................................. 109
Copying Elements ........................................................................................................... 109
Cutting or Deleting Elements ............................................................................................ 110
Duplicating Elements ....................................................................................................... 110
Moving Elements .................................................................................................................. 111
Aligning Elements ................................................................................................................. 112
Aligning Elements Horizont ally ......................................................................................... 112
Aligning Elements Vertically ............................................................................................. 113
Aligning Elements by their Cent er Points .......................................................................... 114
Aligning Elements by their Points of Origin ........................................................................ 114
Adjusting the Spacing between Elements ............................................................................... 114
Distributing Elements....................................................................................................... 115
Making Spac e between Elements Equal ........................................................................... 115

6
Contents Creating and Managing Industrial Graphics User Guide

Increasing Space between Elements ................................................................................ 115

Decreasing Space between Elements............................................................................... 116
Removing All Space between Elements ............................................................................ 116
Resizing Elements ................................................................................................................ 116
Resizing a Single Element with the Mouse ........................................................................ 117
Resizing Elements by Changing Size Properties ............................................................... 117
Resizing Elements Proportionally ..................................................................................... 117
Making Elements the Same Width, Height, or Size ............................................................ 118
Adjusting the z-Order of Elements .......................................................................................... 118
Rotating Elements................................................................................................................. 119
Rotating Elements with the Mouse .................................................................................... 120
Rotating Elements by Changing the Angle Property ........................................................... 120
Rotating Elements by 90 Degrees .................................................................................... 121
Moving the Origin of an Element ............................................................................................ 121
Changing Points of Origin with the Mouse ......................................................................... 121
Changing Points of Origin in the Properties Editor ............................................................. 121
Add Connectors Between Graphic Elements........................................................................... 122
Draw a Connector ........................................................................................................... 123
Adding Connection Points ................................................................................................ 124
Use Connection Points with Embedded Situational A wareness Library Symbols .................. 125
Change Connector Properties .......................................................................................... 127
Change the Type of Connector ................................................................................... 128
Change the Length of a Connector ............................................................................. 129
Change the Shape of a Connector .............................................................................. 129
Flipping Elements ................................................................................................................. 131
Locking and Unlocking Elements ........................................................................................... 131
Making Changes Using Undo and Redo ................................................................................. 132
Working with Groups of Elements .......................................................................................... 133
Creating a Group of Elements .......................................................................................... 133
Ungrouping ..................................................................................................................... 133
Adding Elements to Existing Groups ................................................................................. 134
Removing Elements from Groups ..................................................................................... 134
Editing Components within a Group .................................................................................. 134
Using Path Graphics ............................................................................................................. 135
Creating a Path Graphic .................................................................................................. 135
Breaking the Path of a Path Graphic ................................................................................. 136
Changing a Path Graphic ................................................................................................. 136
Moving Elements in a Path Graphic ............................................................................ 137
Resizing Elements in a Path Graphic .......................................................................... 137
Editing Start and Sweep Angles of Elements in a Path Graphic .................................... 137
Editing Element Control Points in a Path Graphic ........................................................ 138
Swapping the End Points of an Element in a Path Graphic ........................................... 138
Changing the Z-order of an Element in a Path Graphic ................................................ 139
Adding Elements to an Existing Path Graphic.................................................................... 140
Removing Elements from a Path Graphic.......................................................................... 140

Editing Common Properties of Elements and Graphics................................................. 143

Editing the Name of an Element ............................................................................................. 143
Editing the Fill Properties of an Element ................................................................................. 143

7
Creating and Managing Industrial Graphics User Guide Contents

Setting Fill Style .............................................................................................................. 144

Setting Unfilled Style ....................................................................................................... 145
Setting Fill Orientation ..................................................................................................... 145
Setting Fill Behavior ........................................................................................................ 145
Setting Horizontal Fill Direction and Percentage ................................................................ 145
Setting Vertical Fill Direction and Percentage .................................................................... 146
Editing the Line Properties of an Element ............................................................................... 146
Setting Start or End Points of a Line ................................................................................. 146
Setting the Line Weight .................................................................................................... 147
Setting the Line Pattern ................................................................................................... 147
Setting the Line Style....................................................................................................... 147
Setting the Text Properties of an Element ............................................................................... 148
Setting the Displayed Text ............................................................................................... 148
Setting the Text Display Format ....................................................................................... 148
Setting the Text Font ....................................................................................................... 148
Setting the Text Color ...................................................................................................... 149
Setting the Text Alignment ............................................................................................... 149
Substituting Strings ......................................................................................................... 150
Setting Style ......................................................................................................................... 151
Setting a Solid Color........................................................................................................ 151
Setting a Solid Color from the Standard Palette ........................................................... 152
Setting a Solid Color from the Color Disc and Bar ........................................................ 152
Setting a Solid Color with the Value Input Boxes.......................................................... 152
Setting a Solid Color with the Color Picker .................................................................. 153
Setting a Solid Color from the Custom Palette ............................................................. 153
Adding and Removing Colors in the Custom Palette .................................................... 153
Saving and Loading the Custom Palette ...................................................................... 154
Setting a Gradient ........................................................................................................... 154
Setting the Number of Colors for a Gradient ................................................................ 154
Setting the Direction of the Gradient ........................................................................... 155
Changing the Variant of a Gradient ............................................................................. 156
Setting the Color Distribution Shape ........................................................................... 156
Setting the Focus Scales of a Gradient ....................................................................... 157
Setting a Pattern ............................................................................................................. 158
Setting a Texture............................................................................................................. 158
Setting the Style to No Fill ................................................................................................ 159
Setting the Transparency of a Style .................................................................................. 159
Setting the Transparency Level of an Element ........................................................................ 159
Tweaking the Colors and Transparency of a Gradient ............................................................. 160
Loading Graphics with Deprecated Features ........................................................................... 160
Enabling and Disabling Elements for Run -Time Interaction ...................................................... 160
Changing the Visibility of Elements......................................................................................... 161
Editing the Tab Order of an Element ...................................................................................... 161
Using the Format Painter to Format Elements ......................................................................... 162
Editing the General Properties of a Graphic ............................................................................ 163

Working with Element Styles .............................................................................................. 165

Understanding Element Styles ............................................................................................... 165
Galaxy Style Library ........................................................................................................ 165

8
Contents Creating and Managing Industrial Graphics User Guide

Visual Properties Defined by Element Styles ..................................................................... 165

Element Styles in Animations ........................................................................................... 166
Property Style Order of Precedence ................................................................................. 166
Updating Element Styles at Application Run Time ............................................................. 166
Managing Element Styles ...................................................................................................... 166
Importing and Exporting Galaxy Style Libraries ................................................................. 167
Changing Visual Properties of an Element Style ................................................................ 167
Overriding the Element Style Text Properties .............................................................. 167
Overriding the Element Style Fill Properties ................................................................. 168
Overriding the Element Style Line Properties............................................................... 168
Overriding the Element Style Outline Properties .......................................................... 169
Previewing an Element Style ...................................................................................... 170
Resetting an Element Style to Default Values .............................................................. 170
Changing the Visual Properties of User-Defined Element Styles......................................... 170
Applying Element Styles to Elements ..................................................................................... 171
Using the Element Style List ............................................................................................ 171
Using the Properties Grid................................................................................................. 171
Using Format Paint er....................................................................................................... 172
Clearing an Element Style................................................................................................ 172
Selecting an Element Style as a Default for a Canvas ........................................................ 172
Applying Element Styles to Groups of Elements ...................................................................... 173
Setting a Group’s Run-time Behavior to TreatAsIcon ......................................................... 173
Understanding Element Style Behavior wit h a Group of Elements ...................................... 173
Configuring an Animation Using Element Styles ...................................................................... 173
Configuring a Boolean Animation Using Element Styles ..................................................... 173
Configuring a Truth Table Animation with Element Styles................................................... 174
Deleting a Condition from an Animation Truth Table .................................................... 175
Changing the Processing Order of Element Styles in a Truth Table A nimation............... 175

Setting Graphic and Element-Specific Properties ........................................................... 177

About Graphic- and Element-Specific Properties ..................................................................... 177
Setting the Radius of Rounded Rectangles ............................................................................. 177
Setting Line End Shape and Size ........................................................................................... 178
Setting Auto Scaling and Word Wrapping for a Text Box .......................................................... 179
Using Images ....................................................................................................................... 179
Placing an Image on the Canvas ...................................................................................... 179
Setting the Image Display Mode ....................................................................................... 179
Setting the Image Alignment ............................................................................................ 180
Setting the Image Color Transparency .............................................................................. 180
Editing the Image ............................................................................................................ 181
Setting the Image Editing Applic ation ................................................................................ 181
Selecting a Different Image .............................................................................................. 181
Using Buttons ....................................................................................................................... 182
Automatically Scaling Text in Buttons ............................................................................... 182
Wrapping Text in Buttons ................................................................................................. 182
Configuring Buttons with Images ...................................................................................... 182
Editing Control Points ............................................................................................................ 183
Moving Control Points...................................................................................................... 183
Adding and Removing Cont rol Points ............................................................................... 183

9
Creating and Managing Industrial Graphics User Guide Contents

Changing the Tension of Curves and Closed Curves ............................................................... 184

Changing Angles of Arcs, Pies and Chords ............................................................................. 184
Utilizing Sweep Angle Run-Time Properties ...................................................................... 185
Monitoring and Showing Quality and Status ............................................................................ 185
Using Status Elements .................................................................................................... 185
Drawing the Status Element on the Canvas ................................................................. 185
Configuring the Status Element .................................................................................. 186
Setting the Appearance of a Status Element ............................................................... 186
Overriding Element Appearance Depending on Quality and Status of its Attributes .............. 186
Overriding the Text Appearance of Elements to Indicate Non-Good Status or Quality .... 186
Overriding the Fill Appearance of Elements to Indicat e Non-Good Status or Quality....... 187
Overriding the Line Appearance of Elements to Indicate Non-Good Status or Quality..... 187
Adding Outlines to Elements to Indicat e Non-Good Status or Quality ............................ 187
Previewing all Status Appearances ............................................................................. 188
Resetting an Override Appearance to its Default.......................................................... 188
Setting Global Number Styles ................................................................................................ 189
Configure Global Number Styles ...................................................................................... 190
Working with User-defined Global Number Styles.............................................................. 190
Renaming User-defined Global Number Styles ............................................................ 191
Importing and Exporting User-Defined Global Number Styles ....................................... 191
Setting Number Formats by Regional Locales ......................................................................... 191
Design Time Considerations for Numeric Formatting ......................................................... 191
Enter Input Numbers in U.S. Format ........................................................................... 192
Set the Regional Locale of the Comput er Hosting the HMI Software ............................. 194
Select the Regional Settings WindowViewer Option ..................................................... 195
Run-Time Considerations for Formatting Numbers ............................................................ 195
Restrictions of Numeric Formatting by Regional Locale ..................................................... 197
Numeric Strings Enclosed Within Quotation Marks ...................................................... 197
Numbers Passed as Script Parameters ....................................................................... 198
Double-byte Character Languages ............................................................................. 198
Using Windows Common Controls ......................................................................................... 198
Changing Background Color and Text Color of Windows Common Cont rols ....................... 199
Reading and Writing the Selected Value at Run Time ........................................................ 199
Configuring Radio Button Group Controls ......................................................................... 200
Setting the 3D appearance of a Radio Button Group Cont rol ........................................ 200
Setting the Layout of the Radio Button Group Options ................................................. 200
Using Radio Button Group-Specific Properties at Run Time ......................................... 201
Configuring Check Box Controls ....................................................................................... 201
Setting the Default State of a Check Box Control ......................................................... 201
Setting the Caption Text of a Check Box Cont rol ......................................................... 201
Setting the 3D appearance of a Check Box Control ..................................................... 201
Configuring Edit Box Controls .......................................................................................... 202
Setting the Default Text in an Edit Box Control ............................................................ 202
Configuring the Text to Wrap in an Edit Box Co ntrol..................................................... 202
Configuring the Text to be Read-Only in an Edit Box Control ........................................ 202
Configuring Combo Box Controls ..................................................................................... 203
Setting the Type of Combo Box Control ...................................................................... 203
Setting the Width of the Drop-Down List ...................................................................... 203
A voiding Clipping of Items in the Simple Combo Box Control ........................................ 204
Setting the Maximum Number of Items to Appear in the Combo Box Drop-Down List ..... 204
Using Combo Box-Specific Properties at Run Time ..................................................... 204

10
Contents Creating and Managing Industrial Graphics User Guide

Configuring Calendar Controls ......................................................................................... 204

Setting the Number of Calendar Month Sheets ............................................................ 205
Setting the First Day of the Week ............................................................................... 205
Showing or Hiding Today’s Dat e on a Calendar Control ............................................... 205
Setting Title Fill Color and Text Color on a Calendar Control ........................................ 206
Setting the Text Color for Trailing Dat es in a Calendar Control ..................................... 206
Setting the Default Value of the Calendar Control ........................................................ 207
Configuring DateTime Picker Controls .............................................................................. 207
Configuring List Box Controls ........................................................................................... 208
A voiding Clipping of Items in the List Box Control List .................................................. 209
Using a Horizontal Scroll Bar in a List Box Control ....................................................... 209
Using List Box-Specific Properties at Run Time ........................................................... 209

Using Custom Properties .................................................................................................... 211

About Custom Properties ....................................................................................................... 211
Managing Custom Properties ................................................................................................. 211
Adding and Deleting Custom Properties............................................................................ 212
Configuring Custom Properties......................................................................................... 212
Validating Custom Properties ........................................................................................... 213
Clearing the Configuration of Custom Properties ............................................................... 213
Renaming Custom Properties .......................................................................................... 214
Linking Custom Properties to External Sources ................................................................. 214
Overriding Custom Properties .......................................................................................... 214
Reverting to Original Custom Property Values ................................................................... 214
Examples of Using Custom Properties.................................................................................... 215
Using Custom Properties to Show Historical Summary Data .................................................... 215
Analog Statistical Summary Data ..................................................................................... 215
State Statistical Summary Data ........................................................................................ 216
Historical Summary Period............................................................................................... 217
Showing Statistical Summary Dat a ................................................................................... 217
Using Binding in Custom Properties ....................................................................................... 219
Changing the Expression or Reference of a Custom Property at Run Time ............................... 220

Animating Graphic Elements .............................................................................................. 223

About Animations .................................................................................................................. 223
Adding an Animation to an Element ........................................................................................ 223
Reviewing which Animations are Assigned to an Element ........................................................ 223
Showing and Hiding the Animation List ................................................................................... 224
Removing Animations from an Element .................................................................................. 224
Enabling and Disabling Animations ........................................................................................ 224
Validating the Configuration of an Animation ........................................................................... 225
Clearing the Configuration from an Animation ......................................................................... 225
Connecting A nimations with Data S ources .............................................................................. 225
Connecting A nimations with ArchestrA Attributes .............................................................. 226
Connecting A nimations with Element Properties ................................................................ 226
Connecting A nimations with Custom Prop erties ................................................................ 227
Connecting A nimations with InTouc h Tags ........................................................................ 228
Using the InTouch: Tagname Syntax ........................................................................... 229
Connecting A nimations with InTouc hViewA pp Attribut es .............................................. 229

11
Creating and Managing Industrial Graphics User Guide Contents

Using the Galaxy Browser InTouch Tag Browser Tab .................................................. 229
Setting the Input Mode..................................................................................................... 230
Managing Animations ............................................................................................................ 230
Organizing the Animation List........................................................................................... 230
Switching between Anim ations ......................................................................................... 230
Configuring Common Types of Animations ............................................................................. 231
Configuring a Visibility Animation ...................................................................................... 231
Configuring a Fill Style Animation ..................................................................................... 231
Configuring a Boolean Fill Style Animation .................................................................. 232
Configuring a Truth Table Fill Style Animation ............................................................. 232
Configuring a Line Style Animation ................................................................................... 234
Configuring a Boolean Line Style Animation ................................................................ 234
Configuring a Truth Table Line Style Animation ........................................................... 235
Configuring a Text Style Animation ................................................................................... 236
Configuring a Boolean Text Style Animation ................................................................ 236
Configuring a Truth Table Text Style Animation ........................................................... 237
Configuring a Blink Animation .......................................................................................... 238
Configuring an Alarm Border Animation ............................................................................ 238
Understanding Requirements of Alarm Border Animations ........................................... 239
Understanding the Behavior of Alarm Border A nimations ............................................. 239
Configuring Alarm Border Animation ........................................................................... 241
Configuring Optional Alarm Border Animation Characteristics ....................................... 243
Configuring a Percent Fill Horizont al Animation ................................................................. 245
Configuring a Percent Fill Vertical Animation ..................................................................... 247
Configuring a Horizontal Location Animation ..................................................................... 248
Configuring a Vertical Location Animation ......................................................................... 249
Configuring a Width Animation ......................................................................................... 249
Configuring a Height Animation ........................................................................................ 250
Configuring a Point Animation .......................................................................................... 250
Configuring an Orientation Animation ............................................................................... 251
Configuring a Value Display Animation ............................................................................. 252
Configuring a Boolean Value Display Animation .......................................................... 252
Configuring an Analog Value Display Animation .......................................................... 253
Configuring a String Value Display Animation .............................................................. 254
Configuring a Time Value Display Animation ............................................................... 254
Configuring a Name Display Animation ....................................................................... 256
Configuring a Tooltip Animation........................................................................................ 256
Configuring a Disable Animation ...................................................................................... 257
Configuring a User Input Animation .................................................................................. 257
Configuring a User Input Animation for a Discrete Value .............................................. 257
Configuring a User Input Animation for an Analog Value .............................................. 258
Configuring a User Input Animation for a String Value .................................................. 259
Configuring a User Input Animation for a Time Value ................................................... 260
Configuring a User Input Animation for an Elapsed Time Value .................................... 261
Configuring a Horizontal Slider Animation ......................................................................... 262
Configuring a Vertical Slider Animation ............................................................................. 262
Configuring a Pushbutton Animation ................................................................................. 263
Configuring a Pushbutton Animation for a Boolean Value ............................................. 263
Configuring a PushB utton Animation for an Analog Value ............................................ 264
Configuring a PushB utton Animation for a String Value ................................................ 265
Configuring an Action Script Animation ............................................................................. 266
Configuring an Action Script Animation with a "Mouse -Down" E vent Trigger .................. 267
Configuring a Show Symbol Animation ............................................................................. 267

12
Contents Creating and Managing Industrial Graphics User Guide

Configuring a Hide Symbol Animation ............................................................................... 274

Configuring a Hyperlink Animation .................................................................................... 274
Configuring Element-S pecific Animations ............................................................................... 275
Configuring Animation for a Status Element ...................................................................... 275
Restrictions of the Status Element .............................................................................. 275
Configuring a Radio Button Group Animation .................................................................... 276
Configuring a Static Radio Button Group Animation ..................................................... 276
Configuring an Array Radio Button Group Animation .................................................... 276
Configuring an Enum Radio Button Group Animation ................................................... 277
Configuring a Check Box Animation ................................................................................. 278
Configuring an Edit Box Animation ................................................................................... 278
Configuring a Combo Box Animation ................................................................................ 279
Configuring a Static Combo Box Animation ................................................................. 279
Configuring an Array Combo Box Animation ................................................................ 280
Configuring an Enum Combo Box Animation ............................................................... 280
Configuring a Calendar Cont rol Animation ........................................................................ 281
Configuring a DateTime Picker Animation ......................................................................... 281
Configuring a List Box Animation ...................................................................................... 283
Configuring a Static List Box Animation ....................................................................... 283
Configuring an Array List Box Animation ..................................................................... 283
Configuring an Enum List Box Animation .................................................................... 284
Configuring a Trend Pen .................................................................................................. 284
Understanding the Types of Trend Plots ..................................................................... 285
Understanding the Types of Trend Pen Periods ........................................................... 285
Understanding Trend Pen Historical Data Retrieval ..................................................... 286
Changing Trend Pen Properties During Run Time ....................................................... 288
Submitting the Value Changes ......................................................................................... 290
Format Strings in Element -Specific Animations ................................................................. 290
Numbers ................................................................................................................... 290
Dates ........................................................................................................................ 291
Enumerations ............................................................................................................ 293
Format String Examples ............................................................................................. 293
Cutting, Copying and Pasting Animations ............................................................................... 293
Substituting References in Elements ...................................................................................... 294
Adding and Maintaining Graphic Scripts .......................................................................... 297
About Graphic Scripts ........................................................................................................... 297
Predefined and Named Scripts ......................................................................................... 297
Execution Order of Graphic Scripts................................................................................... 297
Security in Graphic Scripts ............................................................................................... 298
Signature Security for Acknowledging Alarms ......................................................................... 298
SignedAlarmAck() Run-time Behavior............................................................................... 298
SignedAlarmAck() Scripting Tips ................................................................................ 299
SignedAlarmAck() A pplied Example ............................................................................ 300
Graphic Script Time outs ................................................................................................. 301
Error Handling................................................................................................................. 301
Configuring the P redefined Scripts of a Graphic ...................................................................... 301
Ensuring Proper OnShow Script Execution ....................................................................... 302
Adding Named Scripts to a Graphic ........................................................................................ 303
Editing Graphic Scripts .......................................................................................................... 303

13
Creating and Managing Industrial Graphics User Guide Contents

Renaming Scripts in a Graphic ............................................................................................... 304

Removing Scripts from a Graphic ........................................................................................... 304
Substituting Attribute References in Scripts ............................................................................ 305
Example of Changing Element Properties using Scripts ........................................................... 305
Using Methods in Scripting .................................................................................................... 305
Configuring Edit Box Methods .......................................................................................... 306
Configuring Combo Box and List Box Methods .................................................................. 306
Adding and Inserting Items into a List.......................................................................... 306
Deleting Items from a List........................................................................................... 307
Finding an Item in a List ............................................................................................. 308
Reading the Caption of a Selected Item in a List .......................................................... 308
Associating Items with Values in a List ........................................................................ 308
Loading and Saving Item Lists.................................................................................... 309

Using Client Controls ........................................................................................................... 311

About Client Controls ............................................................................................................ 311
Importing Client Controls ....................................................................................................... 311
Importing Client Controls ................................................................................................. 312
Example of Installing the ActiveFactory TagPicker Control ........................................... 312
Importing Previously Exported Client Controls......................................................................... 312
Organizing Client Cont rols ..................................................................................................... 313
Embedding Client Cont rols .................................................................................................... 313
Example of Embedding the ActiveFactory TagPicker Client Cont rol .................................... 313
Viewing and Changing the Properties of Client Controls .......................................................... 313
Example of Changing a Property of the ActiveFactory TagPicker Control ............................ 314
Binding Client Cont rol Properties to Attributes or Element References ...................................... 315
Example of Dat a Binding in the ActiveFactory TagPicker Control........................................ 316
Configuring Client Control E vent Scripts ................................................................................. 316
Example of Configuring an E vent Script for the ActiveFactory TagPicker Control ................. 317
Animating Client Controls ...................................................................................................... 318
Exporting Client Controls ....................................................................................................... 318
Securing Client Controls ........................................................................................................ 319
Including Dynamically Loaded Assemblies wit h the Client Control ............................................ 319
Requirements for Both Inclusion Methods ......................................................................... 319
Sample XML for a Dynamically Loaded Assembly List ....................................................... 319
XML Schema for the Dynamically Loaded Assembly List ................................................... 320
Embedding the XML Manifest Resource in the Primary Assembly ...................................... 320
Including the XML Manifest Resource in an External Configuration File .............................. 320
Preventing Dynamically Loaded Assembly Import Issues ................................................... 321
Viewing Additional Client Control Information .......................................................................... 321
Viewing the Client Control Assemblies .............................................................................. 321
Viewing Class Name, Vendor, and Version of a Client Control ........................................... 322
Viewing Objects and Graphics Referencing Client Controls ................................................ 322

Embedding Graphics within Graphics ............................................................................... 325

Embedding Graphics ............................................................................................................. 325

14
Contents Creating and Managing Industrial Graphics User Guide

Renaming Source Graphics and Hosting Objects .................................................................... 326

Editing the Embedded Graphic .............................................................................................. 327
Overriding Custom Properties of the Source Graphic............................................................... 327
Restoring an Embedded Graphic to the Original Size of its Source Graphic .............................. 328
Converting an Embedded Graphic to a Group ......................................................................... 328
Detecting the Sourc e Graphic of an Embedded Graphic .......................................................... 328
Editing the Source of an Embedded Graphic ........................................................................... 329
Cont rolling Size Propagation of Embedded Graphics ............................................................... 329
Setting the Anchor Point of a Source Graphic.................................................................... 329
Showing or Hiding the Anchor P oints of Embedded Graphics ............................................. 330
Enabling or Disabling Dynamic Size Change of Embedded Graphics .................................. 330
Selecting Alternate Graphics and Instances ............................................................................ 331
Selecting Alternate Graphics ............................................................................................ 331
Selecting Alternate Instances ........................................................................................... 331
Detecting and Editing the Containing Object Instance .............................................................. 331
Creating a New Instance of the Containing Obj ect................................................................... 332

Migrating InTouch SmartSymbols ..................................................................................... 333

Importing InTouc h SmartSymbols into an Industrial Graphic .................................................... 333
Restrictions for SmartSymbol Import ...................................................................................... 334
Importing InTouc h Graphics ............................................................................................. 334
Importing Graphical Animation ......................................................................................... 335
Importing Action Scripts ................................................................................................... 337
Mathematical Functions ............................................................................................. 337
String Functions ........................................................................................................ 337
System Functions ...................................................................................................... 337
Miscellaneous Functions ............................................................................................ 337
Importing References ...................................................................................................... 337

Switching Languages for Graphic Elements .................................................................... 339

About Language Switching for Industrial Gr aphics................................................................... 339
Graphic Elements that Support Translation ....................................................................... 339
Animations that Support Translation ................................................................................. 340
Selecting the Language for a Graphic ..................................................................................... 341
Removing a Language for a Graphic ...................................................................................... 341
Creating Elements When Multiple Languages are Defined for a Galaxy .................................... 341
Moving Graphics to Galaxies with Different Language Settings ................................................ 342
How Fonts are Applied at Design Time ................................................................................... 342
Language S witching for Embedded Graphics .......................................................................... 342
String Substitutions and Language Switching .......................................................................... 343
Translating String Custom Properties ..................................................................................... 344
Translating Custom Properties for a Base Graphic ............................................................ 344
Translating Custom Properties for an Embedded Symbol ................................................... 345
Translation Support for Client Controls with Satellite Assemblies .............................................. 345

15
Creating and Managing Industrial Graphics User Guide Contents

Translation Support for ArchestrA Client Controls.................................................................... 346

Importing InTouc h SmartSymbols that Have Translated Data ................................................... 346
Support for Empty Strings ...................................................................................................... 346
Language S witching Example ................................................................................................ 346
Overriding Translated Strings for Industrial Graphics in WindowMak er ..................................... 349
Overriding Translated String Substitutions ........................................................................ 349
Overriding Translated Custom Properties.......................................................................... 349
Language S witching at Run Time........................................................................................... 349
How Languages are Shown in WindowViewer ................................................................... 350
Precedence Rules for Showing the Language and Font ..................................................... 350
Default Language Fonts at Run Time ............................................................................... 351
Switching Languages for Custom Properties at Run Time .................................................. 351
Switching Languages and String Substitutions at Run Time ............................................... 352
Language Settings for Popup Graphics............................................................................. 352
Dynamic Propagation of Language Changes to Popup Graphics .................................. 353
Language Settings and Data Types .................................................................................. 353

Working with the Show/Hide Graphics Script Functions ................................................ 355

About the Show/ Hide Graphic Functions................................................................................. 355
Configuring the Show/Hide Graphic Script Functions ............................................................... 355
Using the Display Graphic Browser and Display Automation Object Browser ....................... 356
Show/ Hide Graphic Script Functions Guidelines ...................................................................... 357
Using the Show/ Hide Script Parameters and Properties ..................................................... 357
Using the Identity Property in the ShowGraphic() Function ........................................... 357
Height and Width Aspect Ratio ................................................................................... 357
Incompatible Graphic Info Properties ........................................................................... 358
Run Time Behavior of the Show/ Hide Graphic Functions ......................................................... 362
Behavior of S howGraphic Windows wit h the Same Identity ................................................ 363
Closing a Graphic ............................................................................................................ 363
Show/ Hide Graphic Script Tips and Examples ........................................................................ 363
Using Predefined and Named Scripts ............................................................................... 364
Cont ainer Script Scenario .......................................................................................... 364
Working with Modal Windows........................................................................................... 365
Using Hierarchical References and Containment Relationships .......................................... 366
Scripting the Owning Object ............................................................................................. 367
Owning Object Scenario 1.......................................................................................... 368
Owning Object Scenario 2.......................................................................................... 370
Assigning Custom Property Values of a Graphic................................................................ 371
Scripting Multiple Symbols ............................................................................................... 372
Multiple Symbols Scenario 1 ...................................................................................... 372
Multiple Symbols Scenario 2 ...................................................................................... 373
Multiple Graphics Scenario 3...................................................................................... 374
Multiple Graphics Scenario 4...................................................................................... 374

Working with the Show/Hide Content Script Functions .................................................. 375

About the ShowContent() Function ......................................................................................... 375
Configuring the Show/Hide Content Script Functions ............................................................... 375
Best Pane Match Algorit hm ................................................................................................... 377

16
Contents Creating and Managing Industrial Graphics User Guide

Cont ent Display Rules ........................................................................................................... 379

Working with Symbol Wizards............................................................................................ 381

Introduction .......................................................................................................................... 381
Understanding the Symbol Wizard Edit or................................................................................ 381
Understanding Choice Groups and Choices ...................................................................... 382
Understanding Symbol Wizard Layers .............................................................................. 382
Defining Graphic Configuration Rules ............................................................................... 383
Examples of Graphic Configuration Rules ................................................................... 384
Designing a Symbol Wizard ................................................................................................... 384
Creating Graphic Choice Groups, Choices, and Options .................................................... 385
Assigning Graphic Configuration Rules ............................................................................. 386
Updating Graphic Layers ................................................................................................. 386
Associating Configuration Elements to Graphic Layers ...................................................... 387
Associating Graphic Elements to Graphic Layers ......................................................... 388
Using Shortcut Menu Commands to Edit Graphic Layer Graphic Elements .................... 388
Associating Custom Properties to Graphic Layers ........................................................ 390
Associating Named Scripts to Graphic Layers ............................................................. 390
Verifying Graphic Configurations ...................................................................................... 391
Using Symbol Wizards in an Application ................................................................................. 392
Embedding Symbol Wizards ............................................................................................ 392
Symbol Wizard Tips and Examples ........................................................................................ 393
Creating Visual Configurations of an Industrial Graphic ...................................................... 393
Planning Symbol Wizard Configurations ...................................................................... 394
Identify Graphic Elements .......................................................................................... 396
Build a Visual Representation of a Symbol W izard ....................................................... 397
Assign Graphic Elements, Named Scripts, and Custom Properties to Graphic Layers .... 399
Specify Rules to select Graphic Layers ....................................................................... 399
Integrating Symbol Wizards wit h Object Wizards ..................................................................... 401

List of Element Properties ................................................................................................... 403

Alphabetical List of Properties ................................................................................................ 403
List by Functional Area .......................................................................................................... 424
Graphic Cat egory Properties ............................................................................................ 425
Appearance Category Properties...................................................................................... 425
Fill Style Group Properties ............................................................................................... 436
Line Style Group Properties ............................................................................................. 439
Text Style Group Properties ............................................................................................. 440
Runtime Behavior Group Properties ................................................................................. 441
Custom Properties Group Properties ................................................................................ 444
Order of Precedence for Property Styles................................................................................. 445

Windows Common Control List Methods ......................................................................... 447

Overview of Windows Common Control List Methods .............................................................. 447

Index ....................................................................................................................................... 451

17
 Creating and Managing Industrial Graphics User Guide

C HAPTER 1
About Creating and Managing Industrial
Graphics
Managing Industrial Graphics
Industrial Graphics are graphics you can creat e to visualize data in an HMI system.
You use the Industrial Graphic Editor to creat e Industrial Graphics from basic elements, such as
rectangles, lines, and text elements. You can also use the Industrial Graphic Editor to embed and
configure an Industrial Graphic from the Graphic Toolbox libr ary of graphics.
After you create an industrial graphic, you can embed it into anot her graphic or an HMI system window
and use it at run time.
You can embed an industrial graphic in a templat e or instanc e of an object (for example, ArchestrA
object), or int o an HMI system window (for example, InTouch HMI using WindowMaker), providing
several ways to visualize object-specific information quickly and easily. Embedding a graphic in a
template means that you can update one graphic and cascade the changes thro ughout your application.
Depending on your development requirements, you can select where and how to store industrial
graphics.
 Create and store graphics as a standard set that you can re -use, such as a generic valve graphic.
 Store graphics as templates if you want to use the graphics in multiple instances at run time.
 Store graphics for use in a specific application.

19
Creating and Managing Industrial Graphics User Guide About Creating and Managing Industrial Graphics

Managing Graphics in the Graphic Toolbox

The Graphic Toolbox enables you to organize your graphics in special folders called toolsets. You can
create a hierarchy of toolsets. You can also move graphics between toolsets.

Note: Graphic names must be unique within the Graphic Toolbox.

Managing Graphics in Automation Objects

You can create Industrial Graphics in AutomationObjects. Each AutomationObject has a Graphics tab to
create, edit, rename, and delete Industrial Graphics. These graphics appear in the Local Graphics list.
When you derive an AutomationObject from a parent AutomationObject that contains graphics, all the
graphics are inherited. Inherited graphics appear in the Inherited Graphics list.

Note: You can only open inherited graphics in the Industrial Graphic Editor in read -only mode.

20
About Creating and Managing Industrial Graphics Creating and Managing Industrial Graphics User Guide

Re-using Industrial Graphics

You can re-use industrial graphics that you create in the Industrial Graphic Editor. For example, graphics
can be re-us ed in AutomationObject templates, AutomationObject instances, or in InTouch windows.
This is called embedding.
Graphic Toolbox

Automation Automation InTouch HMI

Templates Instances

When you derive an AutomationObject template, its industrial graphics are inherit ed by the new instance.
This can be caused by:
 Deriving an instance of the template in the IDE. When you derive an instanc e of an
AutomationObject template that contains graphics, the created instance contains inherit ed graphics.
 Embedding a new industrial graphic in WindowMaker. A new AutomationObject instance is derived
to which the graphic in InTouch WindowMaker then points.
Automation Instance –
Automation Template Instantiated in IDE

Browse and Instantiation caused

Select Template by InTouch can reference

references

InTouch HMI Automation Instance

Industrial Graphics and Instantiation

When you embed an Industrial graphic into an InTouch window and the graphic is contained in an
AutomationObject template, you can easily create a new instance of the Aut omationObject. The
embedded Industrial graphic automatically references the new object. This is usually referred to as
"instantiation".

21
Creating and Managing Industrial Graphics User Guide About Creating and Managing Industrial Graphics

Automation
Automation Template
Instance 1

Originated From

Instantiation caused
by InTouch
Browse and References
Select Instance

References

Automation
Instance 2
InTouch HMI

Creating Industrial Graphics

The Industrial Graphic Editor is the tool you use to create an industrial graphic. First, you select a basic
graphical object, called an element, from a tools panel and place it on the drawing area, called the
canvas. Typical elements are lines, rectangles, ellipses, curves, and so on.
You can t hen change t he appearance of your drawn elements by accessing t heir properties directly or by
graphically manipulating them. You can also change the appearance of an embedded Industrial Graphic
by configuring the associated custom properties.
Finally, you can configure animations for the elements or the graphics.

22
About Creating and Managing Industrial Graphics Creating and Managing Industrial Graphics User Guide

The Industrial Graphic Editor Interface

After you open the Industrial Graphic Editor, you will see the various tools and palettes to create and
customize graphics.

The Industrial Graphic Editor includes the following areas:

 Tool s Panel. This is a collection of elements you use to create your graphic.
 Canvas. This is the area in which you place and edit elements to create a graphic.
 Elements Li st. This list shows you named elements on the canvas in a hierarchical view.
 Language Selector. This list shows the configured languages for the graphic. For more information,
see S witching Languages for Graphic Elements on page 339.
 Properties Editor. This editor shows the properties belonging to one or more currently selected
elements.
 Animation Summary. This area shows you a list of animations belonging to the currently selected
element. It is only visible if an element is selected.
 Symbol Wizard Editor. The Symbol Wizard Editor is a feature of the Industrial Graphic Editor to
create graphics containing multiple visual and functional configurations called Symbol Wizards. For
more information, see Creating Multiple Configurations of a Graphic on page 78.

Tools Panel
The Tools panel contains elements you can select to create your graphic on the canvas.

23
Creating and Managing Industrial Graphics User Guide About Creating and Managing Industrial Graphics

The Tools panel includes:

 Basic objects, such as lines, rectangles, polygons, arcs, and so on.
 A pointer tool to select and move elements on the canvas.
 Windows controls, such as combo boxes, calendar controls, radio button groups, and so on.
 A status element that you can use to show qu ality and status of selected Arc hestrA attribut es.
For more conceptual information, see Elements on page 51.
For more information on how to use elements, see Work ing with Graphic Elements on page 101.

Elements List
The Elements List is a list of all elements on the canvas.

The Elements List is particularly useful for selecting one or more elements that are visually hidden by
other elements on the canvas. You can us e the Elements List to:
 See a list of all elements, groups of elements, and embe dded graphics on the canvas.
 Select elements or groups of elements to work with them.
 Rename an element or a group of elements.

Caution: If you rename an element or a group, the animation references to it do not automatically
update. You must manually change all animation links referencing the old name. For more information,
see Substituting References in Elements on page 294.

Properties Editor
You can use the Properties Editor to view and set properties for the selected element or group of
elements.

For more conceptual information about element properties, see Properties on page 30.
For more information on how to use element properties, see Editing Common Properties of Elements
and Graphics on page 143.

24
About Creating and Managing Industrial Graphics Creating and Managing Industrial Graphics User Guide

Animations Summary
You can use the Animations summary to review, select, and configure the animation behavior of a
selected element.

For an overview of the different animation types, see Animation Types on page 32.
For more information on how to use the animations, see Animating Graphic Elements on page 223.

Canvas
The canvas is your drawing area. You use it as you would in other image editing software by dra wing
elements and changing them to your requirements.

Elements
You use elements to create a graphic. The Industrial Graphic Editor provides the following:
 Basic elements such as lines, rectangles, ellipses, arcs, and so on
 Status element to show a quality status icon
 Windows controls, such as combo boxes, calendar controls, radio button groups, and so on
You can create the following from existing elements on the canvas:
 Groups
 Path graphics
You can embed the following on the canvas:
 Imported Client Controls
 Other graphics

Basic Elements
You can use the following basic elements to create a graphic:
 Open elements, such as lines, H/V lines, polylines, curves, and arcs.

25
Creating and Managing Industrial Graphics User Guide About Creating and Managing Industrial Graphics

 Closed elements, such as rectangle, rounded rectangle, ellips e, polygon, closed curve, pie, and
chord. You can draw arcs, pies, and chords from two points or from three points.

 Text elements, such as buttons, text, and text boxes.

Status Element

The status element provides a graphical representation of the communications status of an attribute or a
tag, and the data quality of the attribute's or tag's value. You can use the status element to monitor and
indicate communications status and data quality of:
 All attributes or tags used in one or more specified animated elements at the same hierarchical level.

26
About Creating and Managing Industrial Graphics Creating and Managing Industrial Graphics User Guide

 One or more specified attributes or tags.

Windows Common Controls

Using Windows common controls, you can add extended user interaction to your graphic. You can use:
 A radio button group to select an option from a mutually exclusive group of options.

27
Creating and Managing Industrial Graphics User Guide About Creating and Managing Industrial Graphics

 A check box to add a selectable option.

 An edit box to add an entry box for text.

 A combo box to select an option from a drop-down list.

 A calendar to use a dat e selection control.

 A date and time picker to select a date and time in a compact format.

 A list box to select one or more options from a list.

Groups
Grouping enables you to combine elements as a unit. Groups can contain elements and ot her groups.
Groups are shown in the Elements List with a default name, such as Group1. They are shown as a
branch in the element hierarchy.

For example, you can create a series of elements that model a valve in your facility. When the valve has
all the properties and animations you want, you can group the elements together.

28
About Creating and Managing Industrial Graphics Creating and Managing Industrial Graphics User Guide

You can then work with the elements as one set of elements or, by selecting the elements in the
Elements List, you can work with the individual elements in the group without having to break the group.
This is called inline editing.
Another advant age of inline editing is that you can easily s elect an individual element graphically without
having to know its element name.

Path Graphics
Path graphics are elements that combine selected open elements, such as lines, H/V lines, polylines,
curves, and arcs, into a single closed graphic element.

A path graphic depends on the:

 Order in which you drew the elements. Each element is linked to the next element by z-order. The
z-order of the elements is the order shown in the Elements List.
 Direction in whic h you drew its elements. The ending point of one element is connected to the
starting point of the next element.
The properties of the elements contained within a path graphic are retained. When you break a path
graphic, the elements it contains appear as they did before you created the path graphic.
A path graphic has the same properties as a rectangle, ellips e, or polygon. These properties are lost
when you break the path.

Windows Client Controls

Windows client controls are .NE T-based cont rols you can use in an Industrial graphic to ex tend its
functionality.
After you embed a client control into a graphic, you can:
 Connect the native properties of the client cont rol to attributes or tags, and element references.
 Configure scripts for client control properties.
 Edit the native properties directly with the Properties Editor.
 Configure and override animations.
If your HMI supports it, you can embed a graphic that contains an embedded client cont rol into your
application and use the functionality of the client control directly in your HMI.
For more information, see Using Client Controls on page 311.

29
Creating and Managing Industrial Graphics User Guide About Creating and Managing Industrial Graphics

Properties
Properties determine the appearance and behavior of an element or the graphic. For example, the width
property determines the width in pixels of the selected element.
There are two types of properties:
 Predefined properties
 Custom properties

Predefined Properties
Properties are specific to the selected element and can vary bet ween elements of different types. All
elements have the following property categories:
 Graphic - the name of the element (or group)
 Appearance - element dimension, location, rot ation, trans parency, and locked status
You can view specific properties for a specific kind of element or group by clicking a drawing tool and
drawing an element.
You set properties at design time. Some properties can be read or written to at run time, such as X, Y,
Width, Height, Visible, and so on. The element type determines which properties are available and can
be read or written at run time.

Custom Properties
You can use custom properties to extend the functionality of a graphic. A custom property can contain:
 A value that can be read and written to.
 An expression that can be read.
 An object attribut e that can be read and written to if the attributes allows being written to.
 A property of an element or graphic.
 A custom property of a graphic.
 A reference to an InTouch tag.
For example, for a tank graphic called TankSym you can create a custom property called TankLevel that
is calculated from an attribute reference to Tank_001.PV. You can then reference the tank level by
[Link].
Custom properties appear in the Properties Editor when no elements are selected. You can edit default
initial values of custom properties in the editor directly or use the Edit Custom Properties dialog box to
do so.
For more information, see Using Custom Properties on page 211.

Properties of Groups
Groups have their own properties you can view and set in the Properties Editor. For most properties,
changing group properties indirectly affects the properties of its contained elements.
You can change the following group properties:
 Name (Name)
 Position (X, Y)
 Size (Width, Height )

30
About Creating and Managing Industrial Graphics Creating and Managing Industrial Graphics User Guide

 Orientation (A ngle)
 Point of Origin (Absolut eOrigin, RelativeOrigin)
 Trans parency (Transparency)
 Locked (Locked)
 Enablement (E nabled)
 Tab Order (TabOrder)
 Tab Stop (TabStop)
 Single Object Treatment (TreatAsIcon)
 Visibility (Visible)

Changing a Group Name

If you change the group name, it has no affect on the contained elements. The contained elements keep
their name.

Changing the Position of a Group

If you change the position of the group, all contained objects are moved with the group. They maintain
the relative position to each other, but their absolute positions change.

Changing the Size of a Group

If you change the size of the group, all contained objects are resized proportionally.

Changing the Orientation of a Group

If you change the angle of the group, all contained objects are rotated with the group around the origin of
the group, so that the group remains visually intact.

31
Creating and Managing Industrial Graphics User Guide About Creating and Managing Industrial Graphics

Changing the Transparency of a Group

If you increase the transparency of the group, all contained objects appear more transparent, but their
own transparency property values do not change. If you change their transparency values, it is in relation
to the transparency level of the group.
For example, if you add an element with 80 perc ent transparency to a group, and then apply 50 percent
transparency to the group, the element appears to have 90 percent transparency.
This is calculated as follows:
1 - (1 - 0.8) * (1 - 0.5) = 0.9
The transparency property values, however, stay unchanged at 80 percent for the element and 50
percent for the group.

Locking the Group

If y ou lock the group, it has no effect on the contained elements. You can still edit the contained elements
in inline editing mode. You cannot move, resize, or rot ate the group.

Run-Time Properties of a Group

If you change the run-time properties of a group, the elements do not inherit the property value of the
group, but they do inherit the behavior of the group.
For ex ample, if you c reat e a group from elements, some of which have their visibility set to true and some
to false, then set the group visibility to false, ALL elements in that group are invisible.
However the Visible property values of the contained elements still maintain their original values (true or
false).

Renaming a Group or its Elements

If you rename an element or a group, the animation references to it are not automatically updat ed. You
must manually change all animation links referencing the old name. For more information, see
Substituting References in Elements on page 294.

Animations
You can use animations to bind the run -time behavior and appearance of elements to ArchestrA
attributes, InTouch tags, custom properties, and other element’s properties.
For ex ample, you can bind the vertical fill of a rectangle to an ArchestrA attribute t hat contains the current
level of a tank.
Animations are specific to the selected element and vary bet ween elements of different types.

Animation Types
There are two types of animations:
 Visualization animations determine the element’s appearance, such as blinking, fill style, percent fill
horizontal, value display, and so on.

32
About Creating and Managing Industrial Graphics Creating and Managing Industrial Graphics User Guide

 Interaction animations determine the element’s behavior, such as horizontal sliders, user input, and
so on.
There are visualization and interaction animations that are specific to certain elements. For example, the
DataStatus animation is specific to the Status element. Element -specific animations also determine
element behavior and appearance.
You can configure the following common animation types:

Animation Type Description

Visibility Shows or hides the element depending on a value or an expression.

Fill Style Specifies the int erior fill style depending on a discrete or analog
expression or one or more conditions.
Line Style Specifies the style and pattern of the element line depending on a
discrete or analog expression or one or more conditions.
Text Style Specifies the style of the element text depending on a discrete or
analog expression or one or more conditions.
Blink Sets the element to blink invisibly or with specified colors depending
on a discrete value or expression.
Element Style Defines a set of visual properties that determine the appearance of
text, lines, graphic outlines, and interior fill shown in Industrial
graphics.

% Fill Horizontal Fills the element wit h color partially from left to right or vice vers a,
depending on an analog value or ex pression.

% Fill Vertical Fills the element with color partially from top to bottom or vice versa,
depending on an analog value or ex pression.
Location Horizontal Positions the element with a horizontal offset depending on an
analog value or expression.

Location Vertical Positions the element with a vertical offset depending on an analog
value or expression.

Width Increases or decreases the element width depending on an analog

value or expression.

Height Increases or decreases the element height depending on an analog

value or expression.

Point Changes the X and Y coordinate values of one or more selected

points on a graphic or graphic element.
Orientation Rotates the element by an angle around its center point or any other
point depending on an analog value or expression.
Value Display Shows a discret e, analog, string value, time value, name or
expression.

Tooltip Shows a value or ex pression as a tooltip when the mouse is moved

over the element.

33
Creating and Managing Industrial Graphics User Guide About Creating and Managing Industrial Graphics

Animation Type Description

Di sable Disables the element’s animation depending on a Boolean value or

expression.

User Input Enables the run-time user to type a Boolean, analog, string, time or
elapsed time value that is then assigned to an attribut e.

Slider Horizontal Enables the run-time user to drag the element left or right and write
back the offset to an analog attribute.
Slider Vertical Enables the run-time user to drag the element up or down and write
back the offset to an analog attribute.
Pushbutton Writes predetermined values to Boolean or analog references when
the user clicks on the element.
Action S cripts Runs an action script when the run -time user clicks on the element.

Show Symbol Shows a specified graphic at a specified position when the run-time
user clicks on the element.
Hide Symbol Hides a specified graphic when the run-time user clicks on the
element.

Data Sources for Animations

The data used for animations can come from various sources. You can configure the animation to point
at these sources. Animation data can come from:
 Attributes of AutomationObjects.
 Predefined properties of an element or graphic.
 Custom properties of a graphic.
 HMI tags.

Animation Capabilities of Groups

By default, a group of elements has limited animation capabilities of its own. For a group you can
configure the following animations:
 Blinking
 Enabling/disabling
 Vertical and horizontal location
 Orientation
 Height and width
 Visibility
However, you can set the TreatAsIcon property value to True. The group is then treated as a single
object and you can configure more animations. These animations take prec edence over animations
defined for the elements within the group.

34
About Creating and Managing Industrial Graphics Creating and Managing Industrial Graphics User Guide

Animation States
Some animations have multiple configuration panels.
A state selection panel appears, where you can select the animation state. Depending on what you
select, the configuration panel is populated differently. The animation state can be a:
 Data type, where the animation is tied to a specific data type.
 Truth table, where the animation is tied to a set of Boolean conditions.

Data Type Animation State

Cert ain animations support configuration of one or more data types. In the configuration panel of an
animation, you can select the data type you want to configure, such as:
 Boolean
 Analog
 String
 Time
 Elapsed Time
 Name
For example, if you select the User Input animation link, the User Input state selection page appears on
the right in the Edit Animations dialog box.

A configuration panel appears below the State s buttons. For example, a configuration panel that is
specific to the user input of a Boolean value.

35
Creating and Managing Industrial Graphics User Guide About Creating and Managing Industrial Graphics

Truth Table Animation State

Cert ain animations support the configuration of a truth table. The trut h table is a collection of up to 100
Boolean conditions you can configure to determine the out put.
You can configure the default appearance for the case that none of the conditions are fulfilled.
The conditions are evaluated from top to bottom of the list. When the first true condition is met, its
assigned appearanc e is the one used and the condition evaluation stops.
For example, you want a text animation to use a different text color depending on the value of a string
attribute, such as a status indicator.

Status indicator Text color

Ready Green

Pending Yellow

Error Red

If you select the Text Style animation link, the Text Style state selection page appears on the Edit
Animations dialog box.

You can click the Truth Table button to configure conditions for the appearance of the text style.

By default the text color is black if none of the conditions are fulfilled at run time.

Embedded Graphics
You can embed graphics into other graphics. Embedding graphics enables you to rapidly develop more
complex graphics with common components.
For example, you can create a single tank graphic, then embed it multiple times in another graphic to
create a graphic representing a collection of tanks.
There is no limit to the number of levels of embedding.

Appearance of Embedded Graphics

Embedded graphics appear in the Elements List. The default name is the same as the source graphic,
followed by a numeric sequenc e.

36
About Creating and Managing Industrial Graphics Creating and Managing Industrial Graphics User Guide

Changing Embedded Graphics

After you embed a graphic, you can change its size, orientation or transparency. You can add a limited
set of animations to the graphic, such as:
 Visibility
 Blink
 Horiz ontal and vertical location
 Width and height
 Orientation
 Disable
 Touch Pushbuttons (Discrete Value, Action, Show Window, and Hide Window)
You can configure its public custom properties, if any exist.
You cannot:
 Change the graphic definition of the embedded graphic from within the hosting graphic.
 Embed a graphic contained in an object creat ed in your HMI s oft ware int o a graphic that is contained
in the Industrial Graphic Editor.
 Create circular referenc es. A circular reference occurs when one graphic (Graphic A) has embedded
within it anot her graphic (Graphic B) that has embedded within it a graphic that directly or indirect
references back to the first graphic (Graphic A).
You can, however, change the embedded graphic by changing its source graphic. The changes you
make propagate to the embedded graphic.

Embedding and Instantiation

You can embed graphics into graphics, object templates, or an object instance if supported by your HMI.
You can store a graphic as a template for use in multiple instances, or create a single instance of the
graphic from the template for specific use.
You can embed graphics contained in a template into graphics contained in other objects. When you do
so, a new object instance is created. You can give it a name, a nd the new instance inherits the graphic,
but does not contain it.

37
Creating and Managing Industrial Graphics User Guide About Creating and Managing Industrial Graphics

You can only embed graphics contained in an object instance into graphics contained in other objects.
The template or instance inherits the graphic, but does not contain it.

Source Symbol Embedded Symbol

Graphic Toolbox Graphic Toolbox

Automation Template Automation Template

Automation Instance Automation Instance

* = generates a new Automation object instance

Graphic Change Propagation

When you make changes and save a graphic, the changes are propagated to any other graphic that
embed that graphic. The Industrial Graphic Editor shows an icon in the status bar below the canvas that
indicates that the source of an embedded graphic changed.

You can accept the change immediately or when you open the graphic again.

Important: You cannot undo/redo the modifications done for a graphic whos e source h as changed and
the propagated change is accepted.

When a graphic is changed, its external size can also be changed. Industrial Graphics support dynamic
size propagation and anchor points that determine how and if size changes are propagated. For more
information about size propagation, see Size Propagation and Anchor Points on page 39.
If the graphic is edited:
 All graphics hosted by templat es and instances that contain embedded instances of this graphic are
also updated.
 All embedded instances of this graphic in your HMI software are also marked for an update.
If the graphic is hosted by an AutomationObject and edited:

38
About Creating and Managing Industrial Graphics Creating and Managing Industrial Graphics User Guide

 All graphics hosted by derived AutomationObjects are als o updated.

 All embedded instances of this graphic in InTouch WindowMaker hosted by derived
AutomationObjects are marked for an update.

Size Propagation and Anchor Points

An anchor point controls how changes in graphic size are propagated to embedded instances. By
default, the anchor point of the graphic is the center point of all elements on the canvas.
This can be done graphically on the canvas, or by setting anchor position properties in the Properties
Editor.
There are two types of anchors:
 Use the Absolut eAnchor property to specify its position as absolute coordinates.
 Use the RelativeAnchor property to specify its position as coordinates relative to the graphic center.
When you embed a graphic, the embedded graphic inherits the anchor point in relation to its own center
point.
You can also set the AnchorFixedTo property. When you make changes to the graphic that affects its
size, the AnchorFixedTo property determines if the absolute position or relative position of the anchor
point is recalculated. This property can have following values:
 Absolute: The absolute anchor point position is unchanged, and the relative anchor point position is
recalculat ed.
 Relative: The absolute anchor point position is recalculated, and the relative anc hor point position is
unchanged.

Note: When you change the AbsoluteA nchor property, the AnchorFixedTo property is set to the value
Absolute. When you c hange the RelativeA nchor property, the Anc horFixedTo property is set to the value
Relative.

39
Creating and Managing Industrial Graphics User Guide About Creating and Managing Indus trial Graphics

You can change t he position of the anchor point of the graphic. This affects the position of the embedded
instances. The anchor points of the embedded instances, however, remain unchanged.
Source Symbol Embedded Symbol

Anchor Point set to: 64,80 Anchor Point embedded at: 110,220

Embedding

Source Symbol Embedded Symbol

Added Element and moved Anchor Point remains at: 110,220

Anchor Point to: 64,80

Propagation

Note: You can change the anchor point of an embedded graphic. This moves the embedded graphic. It
does not change the anc hor point position in relation to the graphic. You can resize or rotate the
embedded graphic. The anc hor point moves in relation to the embedded graphic. You can also use the
AnchorP oint property in the Properties Editor to change the position.

Estimating Graphic Performance

You can gauge the performance of an Industrial graphic at run time using the Graphics Performan ce
Index (GP I). The GPI calculates the estimated call up time when the graphic you are building in the
Industrial Graphic Editor is launched at run time.
Call up time pert ains to the interval between the time the user or system makes a request to show the
pertinent graphic and the graphic appearing on the screen with live data. The calculation is based on
contents of the graphic launched in the InTouch WindowViewer at run time.

Estimating Graphics' Performance

Use the Graphics Performance Index (GP I) window to view estimated performanc e statistics of a graphic
you are building or editing.

Note: The Graphics Performance Index window can also be viewed if using the Symbol Wizard in
Preview mode, and for graphics currently in a non-editable state.

To estimate graphic performance using the Graphics Performance Index

1. Do any of the following in the Industrial Graphic Editor:

40
About Creating and Managing Industrial Graphics Creating and Managing Industrial Graphics User Guide

 On the Graphic menu, click Graphics Performance Index.

 Click the Graphics Performance Index icon on the toolbar.

 Click the GPI: label in the status bar.
 Press Ctrl+P on your keyboard.
 Press P on your keyboard if the Graphics menu is open.
The Graphics Performance Index window appears.

The GP I rating appears in the upper left corner of the Graphics Performance Index window. This
calculation is a figure in the range from 0 to 5, bas ed on the type and number of components
included in the graphic. A rating of 5 indicat es a gra phic call up time less than 1 second. See
Understanding GPI Rating Calc ulations on page 42 for det ails about how the GPI rating is
calculated.

Note: The GPI calculation is based on results from an ideal environment in which required subscriptions
are made to an engine running on scan and appropriate references are established.

1. Click the Details button to expand the window. A list displays showing rows of details for component
types in the graphic that are greater than 0 in size. These details are as follows:

Column Header Relevance

Description Component type

Count Number of items comprising the component

type

Impact Score Call up time in milliseconds for the component

type

Rows are sorted in descending order by Impact Score. You can re-s ort rows by clicking the
designated column header.
2. After reviewing the contents, click OK. You can edit the graphic and test the GPI again using this
tool.

41
Creating and Managing Industrial Graphics User Guide About Creating and Managing Industrial Graphics

Understanding GPI Rating Calculations

GPI rating calculations are based on components in a graphic displayed in WindowViewer on an Intel
Core 2 Duo CPU wit h 4 GB RAM.
All visible graphics on the screen are counted, except for Symbol Wizard graphics, that may be stored in
memory, which reduces the amount of content loaded and rendered at run time. Exceptions to Symbol
Wizard graphic component calculations are documented for the pertinent categories in this section.
A table for each of the following component categories contains pertinent counter types and
corresponding quantities and measured times in milliseconds: Elements, Animations, Styles, Reference,
Custom Property, and Scripts.

Elements Category
Graphic element components are counted individually. Though Symbol Wizard graphics are not
counted, if any graphic element in a Symbol Wizard graphic is set to be visible at design time, it will be
counted at run time.
The following table s hows a list of element component types and the score assigned to each item, based
on the estimated amount of time for processing the specified quantity of eac h component type:

Number of Impact
Element Counter Type Counter Description Items Score

Line Number of Lines 50000 4098

Rectangle Number of Rectangles 50000 1113.4

RoundRectangle Number of Rounded Rectangles 50000 1652.8

Ellipse Number of Ellipses 50000 1381

Button Number of Buttons 50000 3142.2

PolyLine Number of Polylines 50000 6278.4

Curve Number of Curves 50000 7980.2

Polygon Number of Polygons 50000 4465.2

ClosedCurve Number of Closed Curves 50000 7414.6

Image Number of Images 5000 14568.4

Arc Number of Arcs (2 and 3 points) 50000 6500.2

Pie Number of Pies (2 and 3 points) 50000 4696.2

Chord Number of Chords (2 and 3 points) 50000 3798.8

Text Number of Texts 50000 11575.6

42
About Creating and Managing Industrial Graphics Creating and Managing Industrial Graphics User Guide

Number of Impact
Element Counter Type Counter Description Items Score

TextBox Number of Text Boxes 50000 5526.2

Status Number of Statuses 25000 4013.6

RadioButton Number of Radio Buttons 500 3487.6

CheckBox Number of Check Boxes 500 7955.4

EditBox Number of Edit Boxes 500 1557.2

ComboBox Number of Combo Boxes 500 4744.4

Calendar Number of Calendars 500 11729.8

DateTime Number of Date Times 500 3566.8

ListBox Number of List Boxes 500 4166

EmbeddedSymbol Number of Embedded Symbols 50000 9760.8

Group Number of Groups 50000 9631.2

Path Number of Paths 50000 17765.8

TrendPen Number of Trend Pens 2000 3847.4

Animations Category
Animation c omponents are counted individually. The following table shows a list of animation c omponent
types and the score assigned to each item, based on the estimated amount of time for processing the
specified quantity of eac h component type:

Number of Impact
Animation Counter Type Counter Description Items Score

UserInput Number of User Input Animations 50000 5231.8

LineStyle Number of Line Style Animations 50000 1980.4

FillStyle Number of Fill Style Animations 50000 2363

TextStyle Number of Text Style Animations 50000 5034.2

43
Creating and Managing Industrial Graphics User Guide About Creating and Managing Industrial Graphics

Number of Impact
Animation Counter Type Counter Description Items Score

PercentFill Number of Percent Fill Animations 50000 5610.8

(Vertical and Horizontal together)

ValueDisplay Number of Value Display 50000 3054.4

Animations

Orientation Number of Orientation Animations 50000 3776

Visibility Number of Visibility Animations 50000 1290.6

Disable Number of Disable Animations 50000 1256.8

ShowGraphic Number of ShowSymbol 50000 4240.6

Animations

HideGraphic Number of HideSymbol Animations 50000 5001

Location Number of Location Animations 50000 3204.4

(Vertical and Horizontal together)

Size Number of Size Animations 50000 2907

(Vertical and Horizontal together)

ActionScript Number of Action Script Animations 50000 9329

Slider Number of Slider Animations 50000 3091.6

(Vertical and Horizontal together)

Tooltip Number of Tooltip Animations 50000 2480

PushButton Number of Push Button Animations 50000 1076.4

Blink Number of Blink Animations 50000 11349

PointAnimation Number of Point Animations 50000 10220

NamedStyle Number of Element Style 50000 6726.8

Animations

AlarmAnimation Number of Alarm Border 50000 14796.8

Animations

44
About Creating and Managing Industrial Graphics Creating and Managing Industrial Graphics User Guide

Styles Category
Style components are counted individually. The following table shows a list of style component types and
the score assigned to each item, based on the estimated amount of time for processing the specified
quantity of each component type:

Number of Impact
Style Counter Type Counter Description Items Score

SolidFill Number of Solid Fills (Fill or Line usage) 50000 50

PatternFill Number of Pattern Fills (Fill or Line usage) 50000 127.8

TextureFill Number of Texture Fills (Fill or Line us age) 50000 10330.8

LinearGradient Number of Linear Gradients 50000 547.8

RadialGradient Number of Radial Gradients 50000 1337.8

Trans parencies Number of Trans parencies 50000 30

LineP attern Number of Line Patterns 50000 1203.6

LineE nd Number of Line Ends 50000 2117.8

Reference Category
Referenc e components are counted individually. The following table shows a list of reference c omponent
types and the score assigned to each item, based on the estimated amount of time for processing the
specified quantity of eac h component type:

Number of Impact
Reference Counter Type Counter Description Items Score

ExternalReference Number of External References 2000 1942.2

CustomPropReference Number of Custom Property References 50000 3658.2

RuntimePropReference Number of Runtime Property References 50000 7417

Custom Properties Category

Custom property components are counted individually. Though Symbol Wizard graphics are not
counted, if any named custom property in a Symbol Wizard graphic is set to be visible at design time, it
will be counted at run time.
The following table shows a list of custom property component types and the score assigned to each
item, based on the estimated amount of time for proc essing the specified quantity of each component
type:

45
Creating and Managing Industrial Graphics User Guide About Creating and Managing Industrial Graphics

Custom Properties Counter Number of Impact

Type Counter Description Items Score

CustomProperty Number of Custom Properties 50000 3020

CustomPropertyOverridden Number of overridden Custom 50000 3403

Properties

Scripts Category
OnShow and Action scripts are counted individually. Container scripts, which include While Showing,
OnHide, and named scripts, are counted together. Though Symbol Wizard graphics are not counted, if
any named script in a Symbol Wizard graphic is set to be visible at design time, it will be counted at run
time.
The following table shows a list of script component types and the score assigned to each item, based on
the estimated amount of time for processing the specified quantity of each component type:

Number of Impact
Scripts Counter Type Counter Description Items Score

OnShowSmallScript Number of scripts with 10 lines or less 50000 5989.8

OnShowMediumScript Number of scripts with over 10 lines and 50000 17026

under 50 lines

OnShowLargeScript Number of scripts with 50 lines and over 50000 54274

ActionScripts Number of Action Scripts 50000 9329

Cont ainerScripts Number of Cont ainer Scripts 25000 7978.8

Examining a Graphic with a 4.5 GPI Rating

The following table shows values for components in a sample graphic that received a GP I rating of 4.5:

Processing
Config. Capacity per Projected
Category Performance Counter Count second Time (sec.)

Elements Number of Lines (basic style, solid 20 3000 0.01

colors, no transparency)

Number of Curves 30 1000 0.03

Number of Text elements with 10 500 0.02

strikethrough or underline style
(significant impact due to the
expansive draw text API)

46
About Creating and Managing Industrial Graphics Creating and Managing Industrial Graphics User Guide

Processing
Config. Capacity per Projected
Category Performance Counter Count second Time (sec.)

Number of Paths 40 60 0.67

Number of Groups 20 400 0.05

Number of Embedded Graphics 5 350 0.01

Max level of nesting 3 500 0.01

Number of elements with 20 500 0.04

transparency

Number of Calendar elements 0 20 0.00

Animations Number of Percent Fill Animations 2 1000 0.00

Number of animations with a truth 5 1000 0.01

table

Number of ot her animations 10 1000 0.01

Styles Number of Linear Gradients 20 3000 0.01

Number of Radial Gradients 30 1000 0.03

Number of Line Ends 20 400 0.05

Number of non-solid line styles 5 350 0.01

Referenc e Number of External References 2 1000 0.00

Number of local Custom Property 5 1000 0.01

Referenc es

Number of external Custom Property 10 1000 0.01

Referenc es

Number of element Custom Property 0 1000 0.00

Referenc es

CustomProperty Number of Custom Properties 20 1000 0.02

Number of overridden Custom 5 1000 0.01

Properties

Scripts Number of scripts with less than 10 2 1000 0.00

statements

Number of scripts with 11 - 50 5 1000 0.01

statements

Number of scripts with more than 50 10 1000 0.01

statements

47
Creating and Managing Industrial Graphics User Guide About Creating and Managing Industrial Graphics

Processing
Config. Capacity per Projected
Category Performance Counter Count second Time (sec.)

Number of reference ex pressions 5 1000 0.01

Total 1.70

GPI 4.50

Saving a Graphic that May Impact Runtime Performance

When building a graphic or attempting to save a graphic with a GPI rating less than 5.0, the Graphic
Performance Index Warning window appears with information about the GPI rating for the graphic.

You can perform the following tasks in the Graphic Performance Index Warning window:
 Click Continue Saving to save the graphic without additional edits.
 Click Open Graphic Performance Index to open the Graphics Performance Index window.
 Click Cancel to close the Graphic Performance Index Warning window.
 Select the Don’t show thi s warning again check box to prevent this window from displaying for this
graphic in the future.

Note: The option to hide or show this warning window can also be configured in the Graphic Symbol
Designer P references window. For more information, see Configuring Designer P referenc es on page 96.

Showing Quality and Status

To show a specified status or quality at run time, you can:
 Use a Status element (see "Status Element" on page 26) that shows you an icon. It indic ates the
status or quality of specified attribut es or tags directly or those used indirectly in elements.
 Change the appearance of animated elements based on the status and quality of attribut es or tags
they use.

Showing Quality and Status with the Status Element

The Status element cannot monitor attribut es of:
 Elements that are not in the same hierarchy level in the Elements List.
 Elements that use the attributes in scripts.
 Elements that are invisible at run time.
For more information on how to configure status on an element, see Configuring Animation for a Status
Element on page 275.

48
About Creating and Managing Industrial Graphics Creating and Managing Industrial Graphics User Guide

For more information on how to configure the appearance of a status element, see Setting the
Appearance of a Status Element on page 186.

Showing Quality and Status by Overriding

You can override the appearance of animations depending on its configured attributes by:
 Overriding the animation or changing the appearance of the element.
 Drawing an outline around the element.
Overriding the appearance of animations also applies to:
 Elements contained in groups.
 Elements in graphics embedded in other graphics.
Overriding the appearance of animations does not apply to:
 Elements that use the monitored attribute in scripts.
 Elements that are invisible at run time.
For more information, see Overriding Element Appearance Depending on Quality and Status of its
Attributes on page 186.

49
 Creating and Managing Industrial Graphics User Guide

C HAPTER 2
Comparing WindowMaker and Industrial
Graphic Editor
Differences between WindowMaker and the Industrial Graphic
Editor
You can use the Industrial Graphic Editor to do most of the tasks you do in InTouch WindowMaker. You
can also use many of the same shortcut keys.
The Industrial Graphic Editor has features that are not available in InTouch WindowMaker, such as:
 Additional elements.
 Additional and enhanced appearance of the elements.
 Additional and enhanced design-time functionality.

Elements
Elements are the graphical objects you use to create an Industrial Graphic. The Industrial Graphic Editor
provides elements that are not available in InTouch WindowMak er, such as:
 Curves and closed curves.
 Arcs, pies, and chords defined by two or three points.
 Status elements to conditionally show an icon depending on quality and status of attribute data .
 Path graphics that you create by joining line-based elements together to form a new closed element.
 Windows common controls, such as the Calendar control and Date Time Picker control.

Appearance
The Industrial Graphic Editor extends the InTouch graphic configuration. For ex ample, you can use:
 Gradients for line, fill, and text color.
 Patterns for line, fill, and text color.
 Textures for line, fill, and text color.
 Partial transparency.
 Fill behavior in relation to a symbol or screen.

Enhanced Functionality
The Industrial Graphic Editor provides a entire array of enhancements to make your life easier when
creating visualization for your manufacturing environment.

Usability Enhancements
The Industrial Graphic Editor makes it easy to select and configure elements. You can:

51
Creating and Managing Industrial Graphics User Guide Comparing WindowMaker and Industrial Graphic Editor

 Select elements from a list as well as from the canvas. This lets you select elements beneath others
without having to move them.
 View and c hange properties and animation (links) of an element by simply selecting it on the c anvas.
 Edit elements contained in groups and pat h graphics without having to break the group or path
graphic. This is called inline editing.

Style Replication
Using the Format Painter, you can simply apply the style of one element with one click to another
element, even to an element of a different type.

Animation Replication
Using the Industrial Graphic Editor you can copy, cut, and paste animations from one element to another
element, even to an element of a different type.

Element Positioning
The Industrial Graphic Editor extends the positioning feature of InTouch WindowMaker and lets you:
 Distribute elements equally in horizontal or vertical direction.
 Make elements same horizontal and/or vertical size.
 Increase or decrease horizontal or vertical space.
 Remove horizontal or vertical space between elements.
 Lock an element so that you do not accidentally move or edit it.
 Rotate any element at design time by any angle around a center of rotation.
 Apply resizing and rotating to multiple elements at the same time.
 Move the z-order of an element one level backward or forward.
 Align text within text boxes and buttons.

Group Functionality
The Industrial Graphic Editor uses the concept of groups instead of the cell and symbol concepts of
InTouch WindowMaker. You can:
 Embed groups within groups.
 Edit individual elements within a group (o r an embedded group) without breaking up the group.
 Easily remove elements from or add elements to existing groups.

Extensibility with Custom Properties

You can add custom properties to a symbol or embedded symbol. You can connect custom properties to
AutomationObject attributes, element properties, and even InTouch tags. You can use the custom
properties as you would with any pre-defined property at design time and run time.

Note: ArchestrA custom properties referencing InTouch tags that have hyphens in their names will not
work in run time. For example, "InTouch: TAG -1" will not work in run time.

52
Comparing WindowMaker and Industrial Graphic Editor Creating and Managing Industrial Graphics User Guide

Element Styles
Element Styles define one or more of the fill, line, text, blink, outline, and status properties of graphic
elements. Apply an Element Style to a graphic element to set the element to the preconfigured properties
defined in that Element Style. The element’s local properties that are defined in the Element Style are
disabled.
Element Styles help drive standards for screen builders and others who are creating sy mbols.

Miscellaneous Enhancements
Using the Industrial Graphic Editor, you can:
 Access the properties of the elements and custom properties of the symbol through scripting.
 Set the tab order of the elements.
 Use line end styles, such as arrows.
 Dynamically disable specific animations from elements without losing the configuration information.
 Use image meta files and other image formats.
 Use anti-aliasing to improve how the symbol is shown.

Procedures for Common WindowMaker Tasks and

Techniques
Most of the configuration that you do in InTouch WindowMak er can be easily done in the Industrial
Graphic Editor. There are some differences bet ween and similarities of graphics, animations, and
scripts.

Using Graphics
You can use the Industrial Graphic Editor in basically the same way as you use InTouch WindowMaker.
The Industrial Graphic Editor includes a drawing area on which you can place graphical objects to
construct a visual representation of production processes and to provide an interface bet ween a human
and a machine.
Some objects you use in InTouch do not exist in the Industrial Graphic Editor, such as ActiveX controls
and some Wizards. Their functionality is replaced other controls that are more powerful and int egrate
better into the ArchestrA environment.

53
Creating and Managing Industrial Graphics User Guide Comparing WindowMaker and Industrial Graphic Editor

Using the Drawing Area

The drawing area of the Industrial Graphic Edit or is called the canvas. You use it like an InTouch window.
Its maximum size is 2,000 by 2,000 pix els.

Setting the Drawing Area Color

You cannot set the drawing area color in the Industrial Graphic Editor. The drawing area color is
transparent and inherits the color of the environment that the symbol is embedded into.
If you embed an Industrial graphic into an InTouch window, the area between the elements adopts the
color of the InTouch window.

Using Basic Objects

InTouch basic objects such as rectangles, ellipses, and polylines can be drawn in very similar way in the
Industrial Graphic Editor. The basic objects are called elements in the Industrial Graphic Editor.

Using Complex Objects

InTouch objects such as ActiveX c ontrols, Wizards, cells, and symbols do not exist in the Industrial
Graphic Editor.
You can, however, import SmartSymbols into an Industrial Graphic. When you import a SmartSymbol,
the elements and animations of a SmartSymbol are converted.

54
Comparing WindowMaker and Industrial Graphic Editor Creating and Managing Industrial Graphics User Guide

In the Industrial Graphic Editor, you can create groups of elements. Groups maint ain the properties of the
contained individual elements. You can set the TreatAsIcon property of a group to change the behavior
of the group.

Using Wizards
You cannot import InTouch Wizards to an Industrial Graphic or into the Graphic Tool box. Instead, use:
 The Industrial Graphic Library, which you can import into the Graphic Toolbox.
 Windows controls that are part of the Toolbox. You can use:
o Radio button groups
o Check boxes
o Edit boxes
o Combo boxes
o Calendar control
o DateTime picker
o List boxes

Using Animations
You can use animations in the Industrial Graphic Editor to set run-time behavior of the symbols as you
would in InTouch WindowMaker. You can configure one or more animations for an element or symbol.
The data can come from various sources.

Configuring Data Sources

In InTouch WindowMaker, you use the Tagname Dictionary to define variables that hold values. In the
Industrial Graphic Editor, data sources can be:
 ArchestrA AutomationObject attributes.
 Custom properties and inherited properties of the symbol.
 InTouch tags thems elves. The Industrial Graphic Editor uses a special InTouch reference you can
use to directly connect to InTouch tags.

Using Data Types

Industrial graphics use the ArchestrA data types, which are different than InTouch data types.
The following table shows you the data types of both and how they correspond to each other:

InTouch Arche strA Description

Discrete Boolean Boolean value. For example: 0 or 1

Integer Integer Integer value. For example: -4, 7, or 22

55
Creating and Managing Industrial Graphics User Guide Comparing WindowMaker and Industrial Graphic Editor

InTouch Arche strA Description

Real Float or Double Float or double value with different precision.

For example: 3.141, -5.332, or 1.343e+17
Float: 32 bit. IEEE single precision floating point standard,
used when 6-7 significant digits are needed. Default is
NAN.
Double: 64 bit. IEEE doubl e, used when 15-16 significant
digits are needed. Default is NAN.
Message String String value. For example: "Hello World"

n/a DateTime Datetime value. For example: "04/13/2006 [Link].222

AM"

n/a ElapsedTime Float value that represents a time that has elapsed in
seconds. It is shown often in the following format, but is
stored as a float value.
[–][DDDDDD] [HH:MM:]SS[.fffffff]
Values are as follows:
 DDDDDD is from 0 to 999999
 HH is from 0 to 23
 MM is from 0 to 59
 SS is from 0 to 59
 fffffff is fractional seconds to right of the decimal
Elapsed time can be positive or negative.

n/a InternationalizedString A special string data type that can store special
characters.

You can configure Industrial Graphics to retrieve data from the Galaxy.
When the source dat a type is different than the data type it is used for, the data is coerc ed according to
the rules of ArchestrA data coercion and a string value of "-10" is coerced to "True" in the animation.
If you embed this Industrial graphic int o an InTouch window, the data type of the animation link is coerced
according to the InTouch data coercion. The embedded Industrial graphic shows "True" in the InTouch
HMI.
However, if you directly create an discrete animation display link in the InTouch HMI that points at the
original data source, the resulting value can be different.

56
Comparing WindowMaker and Industrial Graphic Editor Creating and Managing Industrial Graphics User Guide

In this example the string value "-10" is shown as "False" in the InTouch HMI.

Using Animations
You configure InTouch animations using the Animation Links dialog box. You can open this dialog box
by double-clicking an InTouch object.
You configure animations in the Industrial Graphic Editor using the Edit Animations dialog box, which
is normally opened by double-clicking an element.
Some of the animation types are different and others have been grouped to simplify configuration. Use
the following table to find the equivalent animation type in the Industrial Graphic Editor:

Industrial Graphic Editor

InTouch Animation Animation

User Inputs - Discrete User Input - Boolean

User Inputs - Analog User Input - Analog

User Inputs - String User Input - String

Sliders - Vertical Slider Vertical

Sliders - Horizontal Slider Horizontal

Touch Pushbuttons - Discrete Value Pushbutton - Boolean

Action Action Scripts

Show Window (not support ed)

Hide Window (not support ed)

Line Color - Discrete Line Style - Boolean

57
Creating and Managing Industrial Graphics User Guide Comparing WindowMaker and Industrial Graphic Editor

Industrial Graphic Editor

InTouch Animation Animation

Line Color - Analog Line Style - Trut h Table

Line Color - Discret e Alarm converted to Line Style

Line Color - Analog Alarm converted to Line Style

Fill Color - Discrete Fill Style - Boolean

Fill Color - Analog Fill Style - Truth Table

Fill Color - Discrete Alarm converted to Fill Style

Fill Color - Analog Alarm converted to Fill Style

Text Color - Discrete Text Style - Boolean

Text Color - Analog Text Style - Truth Table

Text Color - Discrete Alarm converted to Text Style

Text Color - Analog Alarm converted to Text Style

Object Size - Height Height

Object Size - Width Width

Location - Vertical Location Vertical

Location - Horizontal Location Horizontal

Percent Fill - Vertical % Fill Vertical

Percent Fill - Horizontal % Fill Horizontal

Miscellaneous - Visibility Visibility

Miscellaneous - Blink Blink

Miscellaneous - Orientation Orientation

Miscellaneous - Disable Disable

Miscellaneous - Tooltip Tooltip

Value Dis play - Discrete Value Dis play - Boolean

Value Dis play - Analog Value Dis play - Analog

Value Dis play - String Value Dis play - String

Using Scripts
You can configure scripts in Industrial Graphic Editor the same way as you do in InTouch WindowMaker.
There are, however, some small differences:

58
Comparing WindowMaker and Industrial Graphic Editor Creating and Managing Industrial Graphics User Guide

InTouch Script Industrial Graphic Editor Script

Application Script (not available)

Window Script Symbol Predefined Script

Key Script Action Script animation with a key trigger

Condition Script Symbol Named Script with an OnTrue, OnFalse,
WhileTrue or WhileFalse trigger
Data Change Script Symbol Named Script with a DataChange trigger

QuickFunction (not available)

ActiveX E vent Script (not available)

Action Script Action Script animation

Using Application Scripts

In the InTouch HMI, application scripts can be triggered:
 One time when the application starts in WindowViewer.
 Periodically when the application runs in WindowViewer.
 One time when the application shuts down in WindowViewer.
Industrial graphics correspond to InTouch applications and enable you to configure predefined scripts
directly associated with symbol. Such are:
 On Show
 While Showing
 On Hide

Using Key Scripts

You cannot use key scripts in the Industrial Graphic Editor, but you can associate an element with an
action script that is activated by a key combination.

Using Condition Scripts

You can configure a script that runs when a condition is fulfilled by using the Symbol Scripts feature. It
lets you define triggers that run a script when a value or expression:
 Is fulfilled. (WhileTrue)
 Becomes fulfilled. (OnTrue)
 Is not fulfilled. (WhileFalse)
 Becomes no longer fulfilled. (OnFalse)

Using Data Change Scripts

You can configure a script that is run when a value or expression changes by using the Symbol Scripts
feature. It lets you define a trigger that runs a script when a value or expression changes.

59
Creating and Managing Industrial Graphics User Guide Comparing WindowMaker and Industrial Graphic Editor

Using Action Scripts

You can configure Action Scripts in the Industrial Graphic Editor the same way as you would in InTouch
WindowMaker. When t he run-time user interacts with an element, such as wit h the mous e or by pressing
a key, an action script can run.
You use the InTouch action script window to create action scripts.

You use the Industrial Graphic Editor action script window to create action scripts.

You can configure action scripts for individual elements or for the entire symbol.
You can use many of the predefined functions of InTouch WindowMaker in the Industrial Graphic Editor.
For a complete list of InTouch predefined functions that can be used with Industrial Graphics, see
Importing Action Scripts on page 337.
Other InTouch script types, such as application scripts and key scripts, can be configured with ArchestrA
AutomationObjects.

60
 Creating and Managing Industrial Graphics User Guide

C HAPTER 3
Managing Graphics
About Industrial Graphics
This section describes Industrial Graphics, how they are stored in the ArchestrA environment, and how
they are managed from the IDE.
Industrial Graphics are graphical symbols you use to visualiz e data in an InTouch application.
You manage Industrial Graphics from the IDE to:
 Create a new graphic.
 Edit a graphic with the Industrial Graphic Editor.
 Organize graphics within the Graphic Toolbox.
 Duplicat e graphics.
 Import and export graphics.
 Delet e a graphic.
 Configure security for a graphic’s operations.
 Open the graphic in read-only mode with the Industrial Graphic Editor.

Creating a New Graphic

You can create a new graphic in:
 Your HMI graphics repository, such as the Graphic Toolbox, for generic graphics that you frequently
use in different situations. For example, a valve graphic.
 From a template, if object and application templates are supported by your HMI software. Do this if
you want to re-use the graphic in combination with the object functionality. An example is a graphic
representing a specific tank and your production facility has multiple tanks.
 From an object if instantiation is support ed by your HMI soft ware. Do this if you are unlikely to re-use
the graphic in any other situation.
Creating a new graphic using your HMI software will add it to your graphics library. You can then manage
and use your graphics.
 Rename
 Copy
 Move
 Edit the graphic
 Create toolsets - groups of graphics for us e in a particular visualization application or to represent a
group of related devices
 Move graphics bet ween toolsets
 Rename toolsets

61
Creating and Managing Industrial Graphics User Guide Managing Graphics

Creating Symbols in the Graphic Toolbox

You can create a new symbol in the Graphic Toolbox. It is then listed in the Graphic Toolbox with a
proposed default name. You can:
 Rename the symbol.
 Move the symbol.
 Edit the symbol with the Industrial Graphic Editor.
To create a new symbol from the IDE
1. On the Galaxy menu, point to New, and then click Symbol. The Graphic Toolbox appears and a new
symbol is listed.

Note: You can also press CTRL + SHIFT + S to create a new Industrial graphic or right -click and then
select New and Symbol from the shortcut menu.

2. Rename the symbol.

Names must be unique within the entire Graphic Toolbox hierarchy. Valid characters for symbol
names include alphanumeric characters, #, and _ (underscore). Symbol names cannot contain
spaces and the symbol name cannot begin with the $c haracter.
3. Double-click the symbol name. The Industrial Graphic Editor appears.

4. Draw the symbol.

62
Managing Graphics Creating and Managing Industrial Graphics User Guide

Creating Symbols in AutomationObject Templates

You can create a symbol from the Graphics tab in an AutomationObject template. Creating a symbol this
way automatically associates the new symbol with the AutomationObject.
To create a new symbol for an AutomationObject template
1. Open the AutomationObject template. Click the Graphics tab. Any local and inherited symbols are
listed.

2. Click the New Symbol icon. Give the new symbol a name. Names must be unique. Valid characters
for symbol names include alphanumeric characters, $, #, and _ (underscore). Symbol names cannot
include spac es and the symbol name cannot begin with the $ character.
3. If needed, type the description of the symbol in the De scription box.

63
Creating and Managing Industrial Graphics User Guide Managing Graphics

4. Click the symbol name and click Open. The Industrial Graphic Editor appears.

5. Draw the symbol.

Creating Symbols in AutomationObject Instances

You can c reate a symbol from the Graphics tab in an AutomationObject instanc e. Creating a symbol this
way automatically associates the new symbol with the AutomationObject instance.

Note: AutomationObjects can also inherit symbols from their parent template. You can only view an
inherited graphic in read-only mode. Inherited graphics cannot be removed or edited.

64
Managing Graphics Creating and Managing Industrial Graphics User Guide

To create a new symbol for an AutomationObject instance

1. Open the AutomationObject instance. Click the Graphics tab. Any local and inherited symbols are
listed.

2. Click the New Symbol icon. Give the new symbol a name. Names must be unique. Valid characters
for symbol names include alphanumeric characters, $, #, and _ (underscore). Symbol names cannot
include spac es and the symbol name cannot begin with the $ character.
3. If needed, type the description of the symbol in the De scription box.
4. Select the symbol name, and then click Open. The Industrial Graphic Editor appears.
5. Draw the symbol.

Opening Graphics for Editing

Organizing Graphics
You use the library available to your HMI software to organize your graphics by creating a folder
hierarchy as you would with files and folders in Windows Explorer. You can move graphics around within
the folder hierarc hy. These folders are called Graphic Toolsets.

Creating Graphic Toolsets in the Graphic Toolbox

You can create graphic toolsets in the Graphic Toolbox to organize your symbols. For ex ample, you
can create a graphic toolset called "Valves" to store different valve graphics.

65
Creating and Managing Industrial Graphics User Guide Managing Graphics

To create a Graphic Toolset in the Toolbox

1. Open the Graphic Toolbox.
2. Select the graphic toolset under which you want to create a new graphic toolset. Select the Galaxy
name if there are currently no graphic toolsets.
3. On the Galaxy menu, point to New, and then click Graphic Toolset. A new graphic toolset is
created with a default name.
4. Rename the new graphic toolset as needed.

Using Graphic Thumbnails

When you place your mouse cursor over an Industrial Graphic in the Graphic Toolbox, a thumbnail view
of the graphic's displays. This allows you to preview the graphic without opening it.
The graphic thumbnail updates automatically when a change is made. However, thumbnails of graphics
that contain embedded instances of the bas e graphic will not automatically updat e. You must manually
do so by right clicking the graphic and selecting Update Thumbnail.
You can update graphic thumbnails from any of the following levels:
 individual graphic
 Graphic Toolset level
 update all graphics from the root of the Graphic Toolbox
The time it takes to refresh a Graphic Toolset or the Graphic Toolbox is proportional to the number of
graphics each contains. This may take several minutes.

Note: If you have imported a newer version of a client control already embedded in a graphic, res tarting
WindowMaker and updating the graphic thumbnail will not updat e the contents of the newly imported
control. To updat e the graphic with the contents of the new control, edit and save the graphic. The
graphic thumbnail will then reflect the contents of the new control.

Moving Graphics between Graphic Toolsets

You can move graphics from one Graphic Toolset in the Graphic Toolbox to another. Moving graphics
between Graphic Toolsets does not affect its functionality.
To move graphics between Graphic Toolsets in the Graphic Toolbox
1. Open the Graphic Toolbox.
2. Locate the graphic you want to move.
3. Do either of the following:

66
Managing Graphics Creating and Managing Industrial Graphics User Guide

o Drag the graphic to the Graphic Toolset you want to place it in. The graphic moves to the new
Graphic Toolset.
o To move the graphic to the top level in the Graphic Toolset hierarchy, drag the graphic to the
Galaxy name icon.

Renaming Graphics
You can rename a graphic at any time. Renaming a graphic does not affect its functionality.
Graphic names must be unique within the entire hierarchy of the Graphic Toolbox.
To rename a graphic in the Graphic Toolbox
1. Open the Graphic Toolbox.
2. Select the graphic you want to rename.
3. On the Edit menu, click Rename. The graphic name is in edit mode.

4. Type a new unique name for the graphic and click Enter.

Copying Graphics
You can create copies of graphics in the Graphic Toolbox. The copies are suffixed with "_Copy1",
"_Copy2", and so on.
To create a copy of a graphic
1. Select the graphic you want to copy.
2. On the Edit menu, click Duplicate. A copy of the graphic is created.

3. If needed, type a new name for the graphic.

Renaming Graphic Toolsets

You can rename a Graphic Toolset at any time. Renaming a Graphic Toolset does not affect the
functionality of any graphics it contains.
To rename a Graphic Toolset in the Graphic Toolbox
1. Open the Graphic Toolbox.
2. Select the Graphic Toolset you want to rename.

67
Creating and Managing Industrial Graphics User Guide Managing Graphics

3. On the Edit menu, click Rename. The Graphic Tools et name is in edit mode.
4. Type a new unique name for the Graphic Toolset and click Enter.

Deleting Graphic Toolsets

You can delete a Graphic Toolset in the Graphic Toolbox at any time.
You can only delete Graphic Toolsets that do not contain any graphic. Move the graphi cs to another
Graphic Toolset or delete them before deleting the Graphic Tools et.
To delete a Graphic Toolset in the Graphic Toolbox
1. Open the Graphic Toolbox.
2. Select the Graphic Toolset you want to delete.
3. On the Edit menu, click Delete. When a delet e confirmation message appears, click Yes.

Moving Graphic Toolsets

You can move a Graphic Toolset within the Graphic Toolset hierarchy of the Graphic Toolbox. If you
move a Graphic Toolsets, all graphics and Graphic Toolsets it contains are also moved.
To move a Graphic Toolset in the Graphic Toolbox
1. Open the Graphic Toolbox.
2. Locate the Graphic Toolset you want to move.
3. Do either of the following:
o Drag it to the Graphic Tools et you want to place it in. The Graphic Toolset is moved to the new
Graphic Toolset.
o To move the Graphic Toolset to the top level in the Graphic Toolset hierarchy, drag the Graphic
Toolset to the Galaxy name icon.

Customizing Graphic Toolsets

You can hide or show Graphic Toolsets after creating them. You can do this for selected Graphic
Toolsets or for all Graphic Toolsets.
To customize Graphic Toolsets
1. Open the Graphic Toolbox.
2. Right -click the Galaxy icon in the Graphic To olbox, and then click Customize Toolsets. The
Customize Toolsets dialog box appears.
3. Do one or more of the following:
o To hide Graphic Toolsets, clear the check box next to the Toolsets you want to hide.
o To show Graphic Toolsets, check the check box next to the Toolsets you want to show.
o To select or clear all Toolsets, click Check All or Uncheck All.
4. Click Close. The selected Graphic Toolsets are shown or hidden, depending on your settings.

Importing and Exporting Graphics

You can import and export graphics to the graphic libraries associated with your HMI software. Consult
your HMI software user guide for specific information and procedures.

68
Managing Graphics Creating and Managing Industrial Graphics User Guide

Importing Graphics as aaPKG Files

You can import symbols and graphic toolsets from a symbol .aaPKG file.
When you import templates or instances that contain symbols, the symbols are imported with the
template or instance.
When you import all AutomationObjects, the contained symbols and the symbols in the graphic toolsets
are also imported.
To import symbols from a symbol .aaPKG file
1. On the Galaxy menu, point to Import, and then click Object(s). The Import AutomationObject(s)
dialog box appears.
2. Select one or more symbol .aaPKG files you want to import and click Open. The Import
Preferences dialog box appears.

3. Select the appropriat e options for the import and click OK. The symbols and graphic toolsets are
imported.
4. Click Close.

Exporting Graphics
You can export symbols to a symbol .aaPKG file.
When you export templates or instances that contain symbols, the symbols are exported with the
template or instance.
When you export all AutomationObjects, the contained symbols and the symbols in the graphic toolsets
are also exported.
When you export an Aut omationObject that contains symbols, if these symbols contain embedded
Industrial Graphics from the Graphic Toolbox, they are exported along with the symbols associated with
the AutomationObject.
If the symbols contain other Aut omationObjects, the symbols, including any embedded symbols from the
Graphic Toolbox contained in them, and their parent AutomationObject are not exported with the
AutomationObject. They remain as references. Upon import, the system tries to reestablish the
connection with those ex act references in the target Galaxy.

69
Creating and Managing Industrial Graphics User Guide Managing Graphics

To export symbols to a symbol .aaPKG file

1. In the Graphic Toolbox, select the symbols that you want to export.
2. On the Galaxy menu, point to Export, and then click Object(s).
If you are exporting a symbol cont aining embedded symbols associated with an object, you see the
Export Preferences dialog box with an option to include the associated automation objects hosting
the graphics to be exported.
3. Select or clear the checkbox based on whether you want to export the automation objects or not and
click OK.
The Export Automation Object(s) dialog box appears.
4. Browse to the save location and type a name for the symbol .aaPKG file.
5. Click Save. The symbols and their toolset folders are exported.
6. Click Close.

Programmatically Exporting and Importing Industrial

Graphics, Strings, and References
You can use the Arc hestrA GraphicAccess and GraphicAccess2 application programming interfac es
(API) to programmatically export the following to an XML file:
 A symbol from the Industrial Graphic Toolbox to an XML file.
You can use the same API to import a graphic from an XML file to creat e an Industrial graphic in
another galaxy or overwrite an existing graphic. You can also import a graphic XML file created by
another application to an ArchestrA Galaxy.
 All of a graphic's substitutable strings.
 A list of configured references for a selected object.

About Programmatic Graphic Export and Import

The GraphicAccess programmatic API exports or imports an extensive set of properties of an Industrial
graphic. For standard Industrial graphics, an exported or imported graphic can contain the following:
 Custom properties
 Graphic elements
 Connector lines
 Graphic groups
 Graphic animations
 Element styles
 Named scripts
 Predefined scripts
 Overridden text strings
 Numeric format styles
 DataStatus elements
 Trend Pen
 Alarm Client

70
Managing Graphics Creating and Managing Industrial Graphics User Guide

 Trend Client
In addition to the properties of a standard Industrial graphic, an exported or imported Symbol Wizard can
contain the following:
 Wizard Options
 Choic e groups
 Choic es
 Layers
 Rules

Implementing the GraphicAccess API

The GraphicAccess API is implemented by the [Link] file installed in
the following folders bas ed on 32-bit or 64-bit versions of Windows:
 32-bit Windows: \Program Files\ArchestrA\Framework\Bin
 64-bit Windows: \Program Files (x86)\Arc hestrA\Framework\Bin
IGraphicAccess is an interface that is implemented by the [Link] component. IGalaxy
returns the galaxy name and is obtained from the GRAccess API, and is used to log in and connect to the
ArchestrA Galaxy Repository. See the ArchestrA GRAccess Toolk it API User's Guide for further
information about using GRAccess.
IGalaxy, graphic name, and the XML file path are passed as paramet ers to the methods of
IGraphicAccess.

public interface IGraphicAccess

{
/// <summary>
/// Export an ArchestrA Galaxy graphic to Xml file
/// </summary>
/// <param name="galaxy">IGalaxy obtained from GRAccess</param>
/// <param name="graphicName">The graphic name</param>
/// <param name="xmlFilePath">The XML file path</param>
/// <param name="bExportSubstituteStrings">Option to export
SubstituteStrings</param>
/// <returns>Result of the method</returns>
ICommandResult ExportGraphicToXml(IGalaxy galaxy, string graphicName,
string xmlFilePath, bool bExportSubstituteStrings);
}
If t he Galaxy has security enforced, you must first log in to the Galaxy Repository with proper credentials.
Also, the Can Export Graphics and Can Import Graphics Galaxy role permissions must be set active
before attempting an import or export operation.
You can set the Can Export Graphics and Can Import Graphics Galaxy role permissions from the
ArchestrA IDE Configure Security dialog box. For more information about setting Galaxy permissions,
see the Application Server User Guide.

GraphicAccess Interface Methods

The GraphicAccess interface includes separat e graphic export and import methods.
ExportGraphicToXml Method
Exports an Industrial graphic to an XML file. IGalaxy, graphic name, and the XML file path are passed as
parameters of ExportGraphicToXml.

71
Creating and Managing Industrial Graphics User Guide Managing Graphics

Syntax
ICommondResult ExportGraphicToXml(IGalaxy galaxy, string graphicName, string
xmlFilePath);

Parameters
galaxy
IGalaxy obtained from GRAccess, returns galaxy name containing the graphic to export.
graphicName
Name of the graphic to export.
xmlFileP ath
Directory folder to place the XML file containing the exported graphic.
ImportGraphicFromXml Method
Imports a graphic from an existing XML file. IGalaxy, graphic name, the XML file path, and an overwrite
flag are passed as parameters of ImportGraphicfromXml.
Syntax
ICommandResult ImportGraphicFromXml(IGalaxy galaxy, string graphicName, string
xmlFilePath, bool bOverWrite);

Parameters
galaxy
IGalaxy obtained from GRAccess, returns galaxy name to which the graphic will be imported.
graphicName
Name of the graphic to import.
xmlFileP ath
Directory folder location of the XML file.
bOverWrite
Boolean flag that indicates if an existing graphic can be overwritten by an imported graphic with the
same name.
After an import or export operation is complete, the results are set to ICommandResult. A message
appears and indicates if the operation succee ded or failed. For detailed information about the
ICommandResult interface, see the ArchestrA GRAccess Toolk it API User Guide.
A succeeded message only means the import or export operation finished successfully. It does not
indicate the quality of the exported XML file or the imported graphic. Check the SMC log file for any
warning or error messages aft er each export or import operation.

About Programmatic String and Reference Export and Import

The IGraphicAccess2 API exports all of a graphic's substitutable strings to a specified XML file,
regardless of whether some of the strings have been overridden. All graphic strings that appear from a
Ctrl+L or Substitute Strings operation from within the Graphic Editor will be export ed, allowing for bulk
editing of the graphic strings.
The GraphicAccess2 API can also be used to export a list of configured references for a selected object.
The list is exported to a XML string. The API will export the following configured references:
 Mx references
 InTouch tags, including thos e configured from the argument of attribute
Example: attribut e("InTouch:zhmi-abc")
 Custom properties configured with animation links

72
Managing Graphics Creating and Managing Industrial Graphics User Guide

 Client scripts
 Custom property overrides
 Client controls
 All applicable references configured within an embedded graphic, regardless of the number of times
it is embedded

Implementing the GraphicAccess2 API

The GraphicAccess2 API is implemented by the [Link] file installed
in the following folders based on 32-bit or 64-bit versions of Windows:
 32-bit Windows: \Program Files\ArchestrA\Framework\Bin
 64-bit Windows: \Program Files (x86)\Arc hestrA\Framework\Bin
IGraphicAccess2 is implemented by the [Link] component. It is used to export all of a
graphic's substitutable strings to a specified XML file, regardless of whet her some of the strings have
been overridden.
The GraphicAccess2 API can also be used to export a list of configured references for a selected object
to an XML string.
IGalaxy, graphic name, the XML file path, and the substitute strings are passed as parameters to the
methods of IGraphicAccess2.

public interface IGraphicAccess

{
/// <summary>
/// Get references configured on an Industrial graphic
/// </summary>
/// <param name="galaxy">IGalaxy obtained from GRAccess</param>
/// <param name="graphicName">The graphic name</param>
/// <param name="sConfiguredReferencesXML">Returns all the references in
XML format</param>
/// <returns>Result of the method</returns>
ICommandResult GetConfiguredReferences(IGalaxy galaxy, string
graphicName, out string sConfiguredReferencesXML);
}
If t he Galaxy has security enforced, you must first log in to the Galaxy Repository with proper credentials.
Also, the Can Export Graphics and Can Import Graphics Galaxy role permissions must be set active
before attempting an import or export operation.
You can set the Can Export Graphics and Can Import Graphics Galaxy role permissions from the
ArchestrA IDE Configure Security dialog box. For more information about setting Galaxy permissions,
see the Application Server User Guide.

GraphicAccess2 Interface Methods

The GraphicAccess2 interface uses separate met hods to export substitutable strings and configured
references for an Industrial graphic.
ExportGraphicToXml Method
Exports all substitutable strings in an Industrial graphic to a XML file. IGalaxy, graphic name, the XML file
path and Export Substitute Strings option are the parameters for the GraphicAccess2
ExportGraphictoXML method. This API will not export empty strings and strings used in invisible
graphics.

73
Creating and Managing Industrial Graphics User Guide Managing Graphics

Syntax
ICommandResult ExportGraphicToXml(IGalaxy galaxy, string graphicName, string
xmlFilePath, bool bExportSubstituteStrings);
Parameters
galaxy
IGalaxy obtained from the GRAccess and returns galaxy name.
graphicName
Name of the graphic to export.
xmlFileP ath
Directory folder to place the XML file containing the exported graphic.
bExportSubstituteStrings
Option that when set to "True" looks for all substitutable graphic strings, overridden or not
GetConfiguredReferences Method
Exports all of the configured references wit hin an Industrial graphic to a XML file.
Syntax
ICommandResult GetConfiguredReferences(IGalaxy galaxy, string graphicName, out
string sConfiguredReferencesXML );
Parameters
galaxy
IGalaxy obtained from the GRAccess and returns galaxy name containing the graphic object.
graphicName
Name of the graphic wit h references to export.
sGetConfiguredRef erencesX ML
When set to "True" gets a list of configured references associated with the sel ected graphic object.

Importing Industrial Graphics from XML Files

The ImportGraphicFromXml method imports an XML file and creates a graphic in the root folder of the
Industrial Graphic Toolbox. A graphic container instance is created and loads the graphic definition from
the provided XML file. The container then uses its binary serialization to save the binary definition to a
blob. A new graphic is creat ed with GraphicAccess API and the graphic blob is set to the Galaxy attribute
"_VisualElementDefinition".
An XML schema file [Link] is located in the ... \ArchestrA\Framework\Bin folder. The Industrial
Graphic library uses this schema file to validat e the provided XML file before importing it and creating an
Industrial graphic. If an invalid graphic name is specified or the XML file does not validate against the
schema file, the import operation stops immediately without further processing.

Exporting Industrial Graphics to XML Files

During an export operation, the grap hic definition is ret rieved from Galaxy attribute
"_VisualElementDefinition" of the graphic with the specified name. A graphic container instance is
created for the exported graphic definition. XML serialization in the graphic container is used to create
the graphic’s XML file at the specified folder path.

Exporting and Importing Overridden Text Strings

The ArchestrA programmatic API supports overridden text strings in graphics. Typically, a string
substitution is performed on a text string from the Industrial Graphic Editor before exporting the graphic
with the programmatic API. The exported XML file shows the content of overridden and substituted text
strings as elements and attributes of the SubstitutedStrings element.

74
Managing Graphics Creating and Managing Industrial Graphics User Guide

When a graphic is imported using the programmatic API, the graphic shows the text string assigned to
the New attribute of the XML file’s String element. Users can substitute text strings before importing a
graphic by editing the contents of the String element in the exported XML file.

Exporting Overridden Text Strings

After exporting a graphic, the XML file’s String element specifies the original string and the new
substituted string with the Old and New attributes. The Element ID attribute specifies the speci fic text
element to be overridden.
<SubstituteStrings>
<String Old="TextBox1" New="TextBox2" ElementID="A.Text1"/>
<SubstituteStrings>
In this example, the TextBox1 text string was overridden by the new substituted text string TextBox2. The
string substitution occurred in symbol B that substituted the text of the text element in symbol A.
Text strings can be overridden within symbols that are embedded within other symbols. Consider an
example that shows symbol A embedded in symbol B, which is embedded in symbol C. Two string
substitutions are made to a single text element.

The export XML file’s SubstituteStrings element shows the text string override information.
<SubstituteStrings>
<String Old="TextBox2" New="TextBox3" ElementID="B.A.Text1"/>
<SubstituteStrings>
Notice the Old and New attributes show the text strings of the most recent string substitution before
symbol C was exported. Also, the ElementID attribute indicates symbol A containing text element Text1
is embedded in symbol B in the form ElementID="B.A.Text1".

75
Creating and Managing Industrial Graphics User Guide Managing Graphics

The programmatic API can export an embedded symbol containing multiple text elements with the same
text string that is overridden by different string substitutions. Consider an example that shows symbol A
embedded in symbol B. Two string substitutions are made to a single text string in two text elements of
embedded symbol A.

The export XM L file’s SubstituteStrings element shows the text string override information with a String
element for each text override.
<SubstituteStrings>
<String Old="TextBox1" New="TextBox2" ElementID="B.A.Text1"/>
<String Old="TextBox1" New="TextBox3" ElementID="B.A.Text2"/>
<SubstituteStrings>

Importing Overridden Text Strings

An export ed symbol’s text strings can be overridden by editing the SubstituteString elements of the
export XML file before importing the symbol.
The following illustration shows symbol A embedded in symbol B. Symbol A contains three text elements
with text strings. The TextBox1 text string of the Text1 element was overridden to Textbox11. Then,
symbol B was exported using the programmatic API.

The expected SubstituteStrings element in the export XML file should be similar to the following:
<SubstituteStrings>
<String Old="TextBox1" New="TextBox11" ElementID="A.Text1"/>
</SubstituteStrings>
The user edits the export XML file and adds an ent ry to override a text string without using an Element ID
attribute to identify the text element.
<SubstituteStrings>
<String Old="TextBox1" New="TextBox11" ElementID="A.Text1"/>

76
Managing Graphics Creating and Managing Industrial Graphics User Guide

<String Old="TextBox2" New="TextBox22">

</SubstituteStrings>
After importing the symbol, the text strings for the Text2 and Text3 elements are overridden to
TextBox22. Without an ElementID to identify the text element, the string override replaces all text strings
that match the text string specified by the Old attribute.

If the symbol was exported again using the programmatic API, the exported XML file shows that
Element ID attributes have been added to each String element.
<SubstituteStrings>
<String Old="TextBox1" New="TextBox11" ElementID="A.Text1"/>
<String Old="TextBox2" New="TextBox22" ElementID="A.Text2"/>
<String Old="TextBox2" New="TextBox22" ElementID="A.Text3"/>
</SubstituteStrings>

Associating All Galaxy Graphics with an InTouchViewApp

Use Associate Galaxy Graphics in the InTouchViewApp template to configure an "include all Galaxy
graphics" option from the Graphic Toolbox, Template, and Instance objects in the InTouchViewApp. This
option sets the InTouch View Application to include all the graphics t hat have been configured in the
Galaxy whether they have been embedded in the application or not.
All Galaxy graphics will be included when the application is deployed or published. The "include all
Galaxy graphics" option does not apply for export operations.

Note: The term "graphic" includes any symbol or client control present in the Graphic Toolbox, and any
symbols owned or inherited by templates and instances.

Access the Associate Galaxy Graphics dialog from the InTouchViewApp template and right-click
context menu. For more information about associating all Galaxy graphics with an InTouchViewA pp, see
the Application Server User Guide, "Deploying and Running an Application."

Deleting a Graphic
You can delete a graphic that you no longer need. Deleting a graphic removes it completely from the
Industrial Graphic Editor.
 When you delete a graphic, you are shown where the graphic is used. This lets you understand the
impact of deleting the graphic before you actually delete it.
 You cannot delet e a graphic that someone else has open for editing or left checked out.
 If you delete a graphic that is embedded in another graphic, it shows a Not Found message.
To delete a graphic
1. Select the graphic you want to delete and click Delete. The Delete dialog box appears.

77
Creating and Managing Industrial Graphics User Guide Managing Graphics

2. Review the plac es the graphic is being used, and then click Yes.

Creating Multiple Configurations of a Graphic

The Symbol Wizard Editor is a feature of the Industrial Graphic Editor to create multiple configurations of
a graphic. A graphic configuration represents different visual or functional variations of a graphic.
Graphic configurations are created using layers containing associated graphic elements, custom
properties, and named scripts. Based on graphic properties and possible values of these properties,
rules are applied that specify when a layer is part of a graphic configuration.

Understanding Visual and Functional Graphic Configurations

Standard Industrial Graphics show reasonably realistic views of process objects. These graphics can be
modified with the Symbol Wizard to inc orporate multiple visual configurations in a graphic.
Situational Awareness Library graphics are a special set of Industrial Graphics that are available for use
in your HMI software, and are designed using the Symbol Wizard Editor. However, they are protected
graphics and their design cannot be changed. However, you can select Wizard Options from the Symbol
Wizard Editor to select the configurations that are inc orporated into each graphic’s design.

Visual Graphic Configurations

Using an example of a centrifugal pump with separate inlet and outlet pipes, t here are four practical
visual configurations. The pump’s blade housing is common and appears in all possible configurations.
But, the pump’s inlet and outlet pipes can be placed at the left or right in a horizontal direction or at the top
or bottom when the pump is oriented vertically.

Orientation is the visual property that identifies the different configurations of a pump gr aphic. The
attributes associated with the Orientation property are left, right, top, and bottom.

Functional Graphic Configurations

Situational A wareness Library symbols include functional properties in addition to visual properties. For
example, a multi-stage pump symbol includes a Wizard Option to select either a five-stage, three-stage,
or single stage pump in addition to a visual Orientation property to select left or right pump configurations.

Different Symbol Wizard Work Flows

There are two types of ArchestrA users who work with Symbol Wizards:
 Designers are ArchestrA users responsible for creating Symbol Wizards. After verifying that all
configurations built for a graphic are correct, the user saves the Symbol Wizard to the Galaxy library
just like standard Industrial Graphics.

78
Managing Graphics Creating and Managing Industrial Graphics User Guide

For more information about how a user works with the Symbol Wizard, see Using the S ymbol Wizard
Editor on page 97. To get more information about the procedures to create graphic configurations
with the Symbol Wizard, see Designing a S ymbol Wizard on page 384.
 Cons umers embed Symbol Wizards with multiple configurations as part of creating managed
InTouch applications. The Symbol Wizards’s default configuration is selected when a graphic is
embedded.
The Consumer can select a Symbol Wizard configuration based on the needs of the managed
InTouch application. A Consumer selects the needed configuration by changing values or rules in
the Wizard Options area of the Industrial Graphic Editor. For more information about how a
Cons umer works with t he Symbol Wizard, see Using S ymbol Wizards in an A pplication on page 392.

Create Fixed Size Symbols

By default, a symbol attempts to scale to the size of its hosting pane and maintain t he symbol's horizontal
and vertical aspect ratio. A symbol's size created using the Industrial Graphic Editor is determined by a
bounding rectangle around all graphic elements and embedded symbols that compose the symbol. The
size and position of the graphic elements and embedded symbols determines the size of the bounding
rectangle around the symbol.
When a symbol is placed in a layout pane, If the symbol's bounding rectangle exceeds the size of its
hosting pane, the bounding rectangle becomes smaller by reducing the original size of its contents. If the
symbol's bounding rectangle is smaller than the pane size, the bounding rectangle increases and
enlarges the original size of its contents.
Symbols that have a defined fixed size render in run time identically to symbols without a fixed size. A
symbol's size adjusts to the size of the pane while maintaining its aspect ratio as appropriat e. Most
symbols that have a configured fix size are typically placed in a specific target pane of a known size that
enables them to be the rendered exactly as designed in Industrial Graphic Editor without any required
resizing during configuration or run time.

79
Creating and Managing Industrial Graphics User Guide Managing Graphics

Use the Symbol Editor to Create Fixed Size Symbols

After placing a symbol or graphic elements on the canvas of the Symbol Editor, you can set several
properties to specify a fixed size for the symbol. The following screen shot shows how to adjust the fixed
size of a symbol.

The Size property is set to Auto by default, which aut omatically sizes symbols. Set Size to
Fixed to create fixed size symbols. When set to Fixed, the FixedWidth and FixedHeight
properties appear, which show the dimensions of the fixed area of a symbol in pixels.
The symbol's fix ed size width and height values can be ent ered directly in the FixedWidth and
FixedHeight property fields.
 FixedWidth
o Default value = 500
o Maximum value = 7680
o Minimum value = 0
 FixedHeight
o Default value = 500
o Maximum value = 4320
o Minimum value = 0
You can also change the width and height of the symbol's fixed size area by moving the
bondary with its grab handles.
The gray area represents that part of the Symbol Editor canvas that is outside the boundary of
the fixed size area of the symbol.

80
Managing Graphics Creating and Managing Industrial Graphics User Guide

Grab handles on the fixed size boundary can be moved to change the size of the fixed area of
a symbol. The FixedWidth and FixedHeight properties update to show the current width and
height when you move the boundary.
Grab handles are placed at the following locations on the fixed size boundary:
 Top right corner
 Cent er right side
 Bottom right corner
 Bottom center
The thick black line shows the boundary between the Symbol Editor canvas within the fixed
size area of the symbol set by the symbol's FixedWidth and FixedHeight properties and the
canvas area outside the fixed dimension area.
The white area of the Symbol Editor canvas is within the fixed size boundary of the symbol.

You can place graphic elements from the Symbol E ditor's Tools section or embed symbols as you would
normally do when the Size property is set to Auto. As long as the graphics elements or embedded
symbols are plac ed inside the fixed size boundary, the symbol will fit the size of a pane perfectly.
Graphics within the symbol maintain same size, scale, spacing, and white spaces around the graphics
on the canvas specified during design time.

Create a Symbol to Fit a Pane of a Known Size

This topic describes the general sequence of steps to create a fix ed size symbol designed to fit a
ViewApp pane with a known size. This workflow is typical of creating content that will fit exactly within a
pane while editing a ViewApp with the ViewApp Editor.
Important:
The size of a symbol in run time is affected by the res olution of the screen that will show the running
ViewApp and the specified width and height of the layout pane in which the symbol is placed. Also, the
layout Di splay Mode property includes a set of options that determines how content is resized during run
time to fit within the size of a layout pane.
The following procedure describes the steps to create a fixed size symbol that will fit within a pane of a
known size. You should create a fixed size symbol whose width and height matches the resolution of the
screen [Link] should set the the dimensions of the hosting pane to the same si ze as the symbol.
To create a fixed size symbol that fits within a pane of a known size
1. Open the ViewApp in the ViewA pp Editor that will contain the fixed size symbol.
2. Right -click on the pane that will contain the fixed size symbol and select Create Graphic.
A dialog box appears requesting a name for the graphic to be created.
3. Assign a name to the graphic.
The Industrial Graphic Editor opens and the canvas shows the dimensions of the pane that the
request to create a graphic was submitted. The Size property is set to Fixed and the FixedWidth
and FixedHeight properties show the dimensions of the pane in pixels.

81
Creating and Managing Industrial Graphics User Guide Managing Graphics

The white portion of the Industrial Graphic Editor's canvas represents the size of the pane where the
request to create a graphic was submitted. Portions of the canvas to the right and bottom of the white
area are gray. The gray portion of the canvas is the area outside the vertical and horizontal
dimensions of the pane.

4. Place graphic elements and symbols to create a symbol.

5. Save and close the symbol from the Industrial Graphic Editor to return to the ViewApp Editor.
The symbol you created appears in the pane where the request to create a graphic was submitted.
The symbol should fit into the pane at the same size as it was designed in the Industrial Graphic
Editor.
6. Save the ViewA pp and deploy it.
7. Open the deployed ViewA pp
In run time, the ViewApp will show the symbol you creat ed at the same size as it was ori ginally
designed in the Graphic and ViewA pp editors.
The rendered symbol shows:
o The symbol fits in the pane at the same size as it was designed in the Industrial Graphic Editor.
o The symbol's size does not change in run time.
o Any blank spaces around the symbol are maintained and appear in the symbol during run time.

Create a Fixed Sized Symbol for a Known Pane Size

This topic describes the general procedure to create a fixed size symbol that will fit a pane of a known
size even if the pane does not exist when the fixed size symbol is created.
This work flow is typically the case where t wo different employees work on a ViewA pp to update it to
reflect changes in a production environment. The first employee is usually a user who creat es a fixed size
symbol. A second employee will drag and drop the symbol in a pane while editing the ViewApp with the
ViewApp Editor.
To create a fixed size graphic that will fit a pane with a known size
1. The first employee creat es a new symbol and opens it in the Industrial Graphic Editor.

82
Managing Graphics Creating and Managing Industrial Graphics User Guide

The entire canvas area of the Industrial Graphic Editor is enabled to place graphi c elements and
symbols.
2. Configure the symbol to a known pane size.
a. Select the Graphic property Size and set it to Fixed.
The FixedWidth and FixedHeight properties appear after the Size property is set to Fixed.
b. Update the values of Fixed Width and Fixed Height properties to the pixel dimensions of a
pane with a known size.
You can also move the grab handles on the fixed size boundary to set the dimensions of the
symbol.
3. Place the graphic elements and other symbols within the fixed size area of the symbol.
4. If y ou want white s pace around the symbol, adjust the width and height of the symbol t o show a white
margin around the graphic elements and symbols that compose your symbol.
5. Save and close the symbol.
6. The second employee creates a layout to be used in the ViewApp with a pane that is the same size
as the fixed size symbol.
7. Open the ViewApp with the ViewApp Editor.
8. Assign a Screen Profile and the layout cont aining the pane to the ViewApp.
9. Select a screen that contains the layout with the pane of a known size.
10. Select the fixed size symbol created by the first employee and drag and drop it in the pane.
The configured symbol appears in the selected pane of the ViewApp when it is edited by the
ViewApp Editor. The symbol preview shows:
o The symbol fits in the targeted pane wit h the same size as it was designed in the Industrial
Graphic Editor.
o If necessary, the symbol can scale larger or smaller to fit the pane.
o Any white space placed around the symbol while it was created is maintained when the symbol
is placed in a pane.
11. Save the ViewA pp and deploy it
12. Open the running ViewApp.
The running ViewApp shows the fixed size symbol in the target pane at the same size as it was
created in the Industrial Graphic Editor and configured in the ViewApp Editor. The rendered fixed
size symbol graphic shows:
o The symbol fits in t he pane with the same size as it was designed in the Industrial Graphic Editor
o Any white space placed around the fixed size symbol is maintained.

More Information About Fixed Size Symbols During Configuration

Symbols created for a layout pane obtain size dimension from the pane’s size by default. The values
assigned to the FixedHeight and FixedWidth properties aut omatically match the height and widt h of the
pane. Symbols that are designed with its elements placed within the dimension boundaries will fit in the
pane.
When the dimensions of a symbol are changed while editing in the ViewA pp Editor, the following
behaviors are observed:
Fixed Size Symbol Size is Greater Than Pane Size

83
Creating and Managing Industrial Graphics User Guide Managing Graphics

 When the symbol size is larger than hosted pane size, elements placed outside the pane are
included in the configuration view. The symbol's size is reduced t o fit it entirely within the dimensions
of the pane.
 When the FixedWidth and FixedHeight properties of a symbol match the pane size, but there are
graphic elements beyond the symbol's fixed width and height boundaries, the symbol's size is
reduced to fit the graphic elements outside the fixed size area within the dimensions of the pane.
Fixed Sized Symbol Size is Smaller Than Pane Size
When a symbol's fixed size is smaller than the hosted pane size, the symbol's size is increased to fit the
pane size. The size of all of a symbol's graphic elements are increased and appear larger.
Fixed Size Symbol Embedded in Another Symbol
 The embedded fixed size symbol maintains its size configured at design time.
 There will not be any clipping of any white space provided around primitives or embedded symbols
present in the symbol.
 There will not be any scaling of graphics. An exception to this is if the embedded symbol was resized
at design time, the graphic will look scaled.

Fixed Size Symbol Behavior During Run Time

The following list summarizes the key behaviors of fixed size symbols during run time.
 Symbols that have the Size property set to Fixed, render all graphic elements placed within the fixed
size boundary at their configured fixed size at ru n time.
o Symbols do not change size or aspect ratio wit hin the pane that is hosting the graphic symbol.
o Symbols configured to fit exactly within a hosting pane, render to fit exactly within the size of a
pane. The graphic elements in the symbol render at the same size and placement as designed in
the Industrial Graphic Editor.
o The white space around primitives or embedded symbols present in the symbol maint ains its
size and placement within the symbol.
 Fixed size symbols change size or aspect ratio to fit the hosting pane during run time in the following
cases:
o When the symbol's size is larger or smaller than the hosting pane.
o When symbol size is the sam e as the hosting pane but there are graphics that are placed outside
the fixed size boundary configured for the symbol. This includes graphics that are placed on
negative coordinates as well.
o When symbol size is the same as the hosting pane, but graphics t hat are placed on the boundary
of the symbol marked by the size configured for the graphic.
 Embedded symbols follow the same behavior as standard fixed size symbols.

Embedded Graphics
You can embed graphics into other graphics. Embedding graphics enables you to rapidly develop more
complex graphics with common components.
For example, you can create a single tank graphic, then embed it multiple times in another graphic to
create a graphic representing a collection of tanks.
There is no limit to the number of levels of embedding.

84
Managing Graphics Creating and Managing Industrial Graphics User Guide

Appearance of Embedded Graphics

Embedded graphics appear in the Elements List. The default name is the same as the source graphic,
followed by a numeric sequenc e.

Changing Embedded Graphics

After you embed a graphic, you can change its size, orientation or transparency. You can add a limited
set of animations to the graphic, such as:
 Visibility
 Blink
 Horiz ontal and vertical location
 Width and height
 Orientation
 Disable
 Touch Pushbuttons (Discrete Value, Action, Show Window, and Hide Window)
You can configure its public custom properties, if any exist.
You cannot:
 Change the graphic definition of the embedded graphic from within the hosting graphic.
 Embed a graphic contained in an object creat ed in your HMI s oft ware int o a graphic that is contained
in the Industrial Graphic Editor.
 Create circular referenc es. A circular reference occurs when one graphic (Graphic A) has embedded
within it anot her graphic (Graphic B) that has embedded within it a graphic that directly or indirect
references back to the first graphic (Graphic A).
You can, however, change the embedded graphic by changing its source graphic. The changes you
make propagate to the embedded graphic.

Configuring Security for Symbols

You can set IDE security permissions so that at design time, the user cannot:
 Import or ex port symbols.
 Create, modify, or delete symbols in the Graphic Toolbox.
 Create, modify, or delete symbols in any AutomationObject templat e.
 Create, modify, or delete symbols in any AutomationObject instance.
 Create, modify, or delete View Applications, such as InTouchView Applications.
 Deploy or undeploy View Applications, such as InTouchView Applications.
 Edit the configuration of the quality and status display.
To restrict a user, the user must be assigned to a role and the permissions must be assigned to that role,
and security must be enabled. For more information on how to configure security, users, and roles, see
the Application Server User’s Guide.
If t he us er attempts to export a symbol without appropriate permissions, the message "User doesn’t have
permission to ex port graphics object" appears.
If t he us er attempts to import a symbol without appropriate permissions, the message "User doesn’t have
permission to import graphics object" appears.

85
Creating and Managing Industrial Graphics User Guide Managing Graphics

To configure security for symbols

1. On the Galaxy menu, point to Configure, and then click Security. The Configure Security dialog
box appears.
2. Click the Roles tab.
3. In the Roles available list, click the role you want to assign the permissions to.
4. In the General Permissions list, expand the Graphic management permissions.
5. If you want to restrict the user from:
o Importing symbols, clear the Can import graphics check box.
o Exporting symbols, clear the Can export graphics check box.
o Creating, modifying, or deleting symbols within toolsets, clear the Can Create/Modify/Delete
graphics within toolsets check box.
o Creating, modifying, or deleting symbols attached to a template, clear the Can
Create/Modify/Delete attached object graphics in template check box.
o Creating, modifying, or deleting symbols attached to an instance, clear the Can
Create/Modify/Delete attached object graphics in instance check box.
o Creating, modifying, or deleting view applications, clear the Can Create/Modify/Delete
ViewApplications check box.
o Deploying and undeploying view applications, clear the Can Deploy/Undeploy
ViewApplications check box.
o Accessing the edit quality and status display configuration, clear the Can Edit Quality and
Status Indicator Configuration check box.
6. Click OK.

Writing to Attributes Configured for Secured or Verified

Writes
There are several ways to write to an Attribute configured for Secured Write or Verified Write security
classification.
 Any assignment in a script that sets the value of the Attribute, such as
A=B;
where A references an Attribut e that is configured for Secured Write or Verified write security
classification.
 Any action on an animation graphic that alters the value of an Attribute that has Signed Write or
Verified Write security configuration, such as a user input, a slider, an up/down button on a counter,
and ot her such actions.
 A script that uses the SignedWrite() function.
For information specific to the SignedWrite() function, see Work ing with the SignedWrite() Function for
Secured and Verified Writes on page 86.

Working with the SignedWrite() Function for Secured and

Verified Writes

86
Managing Graphics Creating and Managing Industrial Graphics User Guide

This section provides information about the SignedWrite() function, SignedWrite() run-time behavior,
scripting tips, and in-depth script examples.
For SignedWrite() scripting information including script syntax, parameters, and basic script examples,
see the Application Server Scripting Guide.
You can write to an Automation Object attribut e that is configured for Secured Write or Verified Write
security classification by means of the Industrial Graphics SignedWrite() script function.
The SignedWrite() function can be used only in ArchestrA client scripts, not in Application Object scripts,
and only on Attributes that have been configured for Secured Write or Verified Write. Attempting to use
the function on an Attribute not so configured will result in an er ror message at run time.

SignedWrite() Run-time Behavior

At run time, the SignedWrite() function does the following:
1. Checks the target Attribute for Signed Write or Verified Write configuration.
If not so configured, the following error message appears: Operation Failed. Attribute does not
have the correct securi ty cla ssification.
2. Checks Galaxy security.
If the Galaxy is not secured, the following error message appears: Operation Failed. Galaxy is not
secured.
3. There are several ways to write to an Attribute configured wit h Secured Write or Verified Write
security classification, it is possible to have multiple SignedWrite() and other Secured/Verified writes
pending from the same script, or even from multiple scripts running side-by -side.
4. Determines which dialog is required—S ecured Write or Verified Write—and pops up the appropriate
dialog box.
If Smart Cards are enabled, the function displays different versions of the Secured Write and V erified
write dialog boxes.
5. Lists the predefined comments, if any, from the configured Predefined Comments list. Up to 20
comments are supported.
6. Enables comment editing if the Comment_Is_Edit able parameter is configured and comment
enforcement is other than PredefinedOnly.
7. Acquires the user credentials and authenticates them.
If the user credentials are invalid, an error message appears. The function will attempt the writ e only
if the credentials are valid.
8. Checks if comment enforcement is mandatory, and displays an error message if the comment is
empty.
9. Performs the write if user credentials are valid and the comment entry satisfies the comment
enforcement parameter.
10. Provides a return status.
11. Following a Secured or Verified Write a security E vent is written to the event log, including the signee
name, verifier name, if any, Type of write: "Secured Write" or "Verified Write", Comment, if any
entered by user, Reas on Description, if any provided, Field Attribute description, if any, or the Short
Description of the Application Object, if no Field Attribute description exists.
Each call to SignedWrite() is distinct from any other. The success or failure of any individual write does
not affect other attempt ed writes.

87
Creating and Managing Industrial Graphics User Guide Managing Graphics

Entering user credentials for SignedWrite() is distinct from logging on to the client application. The user
can modify attributes configured with Secured or Verified Write even if another user is logged on, without
affecting the session of the logged -on user.

SignedWrite() Script Execution Sequence at Run Time

The SignedWrite() function goes into a queue and the script continues ex ecuting. The function is queued
for operator entry. The script may complete prior to the operator completing the S ecured or Verified Write
operation.
By contrast, the SignedAlarmAck() script function executes completely synchronously, and waits for user
input before proc eeding to the next line in the script.

SignedWrite() Scripting Tips

Using Bound Reference s in SignedWrite()
If the Attribute parameter string evaluates to t he name of a Custom Property and that Custom P roperty is
a bound reference to an Attribute, the SignedWrite() function will write to that indicated Attribute. The
Attribute must have the security classification of Secured Write or Verified Write.
The SignedWrite() function supports Custom Properties that are nested bound references. That is, if the
string evaluates to the name of a Custom Property and that Custom Property is a bound reference to
another Custom Property which itself is a bound reference, the SignedWrite() function will follow through
the chain of bound references until it finds an item that is a value. If that item is an Attribute that has the
security classification of Sec ured Write or V erified Write, the SignedWrite() function will write to that item.
Using SignedWrite() in WhileTrue, WhileFalse, or Periodic Type Scripts
Using the SignedWrite() function with WhileTrue, WhileFalse, or Periodic type scripts can repeatedly
execute the script, causing another secured write dialog box to pop up with each trigger. We do not
recommend using the SignedWrite() function with WhileTrue, WhileFalse, or Periodic types.
Using SignedWrite() with OnShow and OnHide Scripts
We do not recommend using the SignedWrite() function with OnS how and OnHide scripts. This can
cause issues with window functionality, including the window title bar, windows losing correct focus, and
windows opening on top of one another.

Examples of Using the Attribute Parameter in the SignedWrite()

Function
Working from the overall syntax of the SignedWrite() function, the script examples in the following table
illustrate a number of approaches to using the Attribute parameter in the SignedWrite() function.
The following String, Boolean, and Integer user defined attribute conditions apply to the script examples:
 User Defined object UD1_001
 String attribute UD1_001.udString1 with the value "WW". Security classification is set to Secured
Write.
 Boolean attribute UD1_001.secBool1 with the value false. Security classification is set to Secured
Write.
 Integer attribute UD1_001.secInt1 with the value 24. Security classification is set to Secured Write.
 User Defined object UD2_002
String attribute UD2_002.udString2 with a value "UD1_001.udString1" The following custom property
conditions apply to the script examples:
 String custom property CP1 with a reference to UD1_001.udString1

88
Managing Graphics Creating and Managing Industrial Graphics User Guide

 String custom property CP2 with a value "UD1_001.udString1"

 String custom property CP3 with a value "UD1_001"
 Boolean custom property CP4 with a referenc e to UD1_001.secBool1
 Integer custom property CP 5 with a reference to UD1_001.secInt1
 String custom property CP6 with a reference to an attribute on Owning Object UD1_001 as
me.udString1

Script Example Function and Re sult

Uses the CP1 reference UD1_001. udString1

SignedWrite("CP1", "AVEVA", "using
and pokes to it the value "AVEVA".
redirect", true, 0, null);
Result: The value in UD1_001.udString1 will
change from "WW" to "AVEVA".
Resolves CP 2 string value
SignedWrite(CP2, "AVEVA", "using
"UD1_001.udString1" to a reference and
string value", true, 0, null);
pokes to it the value "AVEVA".
Result: The value in UD1_001.udString1 will
change from "WW" to "AVEVA".

Resolves the string " UD1_001.udString1" to a

SignedWrite(CP3+".udString1",
reference and pokes to it the value "AVEVA".
"AVEVA", "using string expression",
true, 0, null); Result: The value in UD1_001.udString1 will
change from "WW" to "AVEVA".
Resolves the string " UD1_001.udString1" to a
SignedWrite("UD1_001.udString1",
reference and pokes to it the value "AVEVA".
"AVEVA", "using constant string",
true, 0, null); Result: The value in UD1_001.udString1 will
change from "WW" to "AVEVA".
Resolves the UD2_002.udString2 string value
SignedWrite(UD2_002.udString2,
"UD1_001.udString1" to a reference and pokes
"AVEVA", "using attribute containing
string", true, 0, null); to it the value "AVEVA".
Result: The value in UD1_001.udString1 will
change from "WW" to "AVEVA".

Resolves the expression to "CP 1" to use the

SignedWrite("CP" + "1", "AVEVA",
"using redirect from string CP1 reference UD1_001.udString1 and pokes
expression", true, 0, null); to it the value "AVEVA".
Result: The value in UD1_001.udString1 will
change from "WW" to "AVEVA".

Uses the CP4 reference UD1_001.secBool1

SignedWrite("CP4", true, "using
and pokes to it the value true.
redirect", true, 0, null);
Result: The value in UD1_001.secBool1 will
change from false to true

89
Creating and Managing Industrial Graphics User Guide Managing Graphics

Script Example Function and Re sult

Uses the CP5 reference UD1_001.sec Int1 and

SignedWrite("CP5", 37, "using
pokes to it the value 37.
redirect", true, 0, null);
Result: The value in UD1_001.secInt1 will
change from 24 to 37

Uses the CP6 reference me.udString1 and

SignedWrite("CP6", "AVEVA", "using
resolves it to UD1_001.udSt ring1 and pokes to
redirect using relative reference",
it the value "AVEVA".
true, 0, null);
Result: That the value in UD1_001.udSt ring1
will change from "WW" to "AVEVA"

Secured and Verified Write Applied Examples

You can c reate a dashboard application to automate routine use of Secured and Verified Write by means
of the SignedWrite() function.
To configure the SignedWrite() script function
1. Open the ArchestrA IDE.
2. Create a symbol and associate it with an attribute configured with Secured Write or Verified Write.
For more information on associating attributes with symbols, see Application Server User’s Guide,
"Creating and Working with UDAs" topic.
3. Add the SignedWrite script function to the symbol. The following editor detail shows the buttons
configured with scripts in the applied example:
4. Configure the scripted functionality you require. Scripts for the buttons shown in the example are as
follows:
a. Hard-coded Dat [Link] UDA: The following example sets the value of 23 to
[Link]. The user optionally can enter a comment, but no pre -defined comment list is
available.
[Link]=SignedWrite("[Link]", 23, "Set the Value",
True, 0, null);
b. Attribute Point er has [Link] UDA: The source to be written to is passed as a parameter to
the function. Attribute_P ointer is a custom property whose value is set to [Link].
The following example sets the value of 23 to [Link]. The user optionally can enter
a comment, but no pre-defined comment list is available.
[Link]=SignedWrite(Attribute_Pointer, 23, "Set the Value",
True, 0, null);
c. Attribute Pointer and Pre-Defined List: The pre-defined comment list is an array. This example
extends the functionality of example b to force the user to enter a comment
(Comment_Enforcement parameter set to 1) and also presents a pre-defined set of comments
linked to the DataUDO.P reDefComments[ ] array.
The following example will set the value of 23 to [Link]. The us er must enter a
comment and may use one from the pre-defined comment list.
[Link]=SignedWrite(Attribute_Pointer, 23, "Set the Value",
True, 1, [Link][]);

90
Managing Graphics Creating and Managing Industrial Graphics User Guide

d. Variable Array: The pre-defined list is a pointer to an array. This example extends the
functionality of example c to force the user to enter a comment (Comment_Enforcement
parameter set to 1) and also presents a predefined set of comments linked to
[Link][ ] array.
The value of custom property CP1 is "[Link][ ]".
The following example will set the value of 23 to [Link]. The us er must enter a
comment and may use one from the pre-defined comment list.
dim xInd as Indirect;
[Link](CP1);
[Link]=SignedWrite(Attribute_Pointer, 23, "Set the Value",
True, 1, xInd);
e. All Parameters Variable: The predefined list array is built into the script. All parameters are
passed as variables.
The following example will set the value of 23 to [Link] . The user must enter a
comment and may use one from the pre-defined comments list.
dim MyList[5] as string;
MyList[1] = "Batch Accepted";
MyList[2] = "Batch Rejected";
MyList[3] = "Batch on Hold";
MyList[4] = "Batch Resumed";
MyList[5] = [Link][4];
[Link]=SignedWrite(Attribute_Pointer,
SignedWrite_Value_Ptr, SignedWrite_Reason, Enable_Edit_Comment,
Comment_Options, MyList[]);

Viewing a Graphic in Read-Only Mode

You can view a graphic in read-only mode if you don’t want to edit it, or if it is checked out by somebody
else.
If you open a graphic in read-only mode, you have access to all functions in the Industrial Graphic Editor
that do not change the graphic.
To view a graphic in read-only mode
1. Select the graphic that you want to view in read-only mode.
2. Click Open Read-Only. The selected graphic opens in the Industrial Graphic Editor.

91
 Creating and Managing Industrial Graphics User Guide

C HAPTER 4
Using the Industrial Graphic Editor
Showing, Hiding and Adjusting Panels
You can edit graphics using the Industrial Graphic Editor. Depending on where the graphic is contained,
you can start the Industrial Graphic Editor from your HMI software:
You can:
 Show and hide Industrial Graphic Editor panels to allocat e more space on the canvas.
 Pan and zoom the canvas to make finer or more granular adjustments to elements.
 Place a grid on the canvas surface to align elements more precisely.
You can hide the Properties Editor and Animation Summary to allocate more space on the canvas.
To show or hide the Properties Editor and Animation Summary panels
 Do either of the following:
o Press ALT + ENTE R.
o On the View menu, click Properties.
You can also adjust the size of the Elements List and Properties Editor.
To adjust the size of panels
1. Drag the dividing line between the panels to specify the new panel size.
2. Release the mouse button and the panels are resized.

Panning and Zooming the Canvas

You can pan and zoom the canvas to make finer visual adjustments to the elements or to get a better
overview of a large graphic.
Use the Pan and Zoom toolbar to pan and zoom.

Panning
You can use the Pan functions of the Pan and Zoom toolbar to do the following:
 Use the Pan and Zoom window to select which part of the canvas appears on the screen.
 Grab the canvas with the Hand tool and move it (Pan).
You can also use the scroll wheel of the mouse to pan up and down in the current canvas display.

Using the Pan and Zoom Window to Pan

You can use the Pan and Zoom window to pan the canvas area.

93
Creating and Managing Industrial Graphics User Guide Using the Industrial Graphic Editor

To use the Pan and Zoom window for panning

1. On the Pan and Zoom toolbar, click the Pan and Zoom window icon. The Pan and Zoom window
appears.
2. In the Pan and Zoom window, move the mouse within the red rectangle. The pointer hand icon
appears.
3. Click and hold the left mouse button down.
4. Drag the mouse. The red rectangle moves with the mouse.
5. Release the mouse button. The area shown in the canvas is changed accordingly.

Using the Hand Tool to Pan

You can use the Hand tool to pan the canvas area. This is equivalent to picking up the canvas and
moving it so that the visible canvas area changes.
To use the Hand tool to pan

1. On the Pan and Zoom toolbar, click the Pan icon.

2. Move the mouse over the canvas. The Hand tool pointer appears.
3. Click the canvas to grab the canvas and keep the mouse button down.
4. Move the mouse to change the area of canvas that is shown.
5. Release the mouse button.

Using the Mouse Scroll Wheel to Pan

You can use the mouse scroll wheel to:
 Pan up or down.
 Pan 360 degrees.
To use the mouse scroll wheel to pan up or down
1. Click the canvas so that no elements are selected.
2. Move the mouse scroll wheel:
o Forward to pan up.
o Backward to pan down.
To use the mouse scroll wheel to pan in any direction
1. Click the canvas so that no elements are selected.
2. Click the mouse scroll wheel. The pointer appears in 360 degrees scroll mode.
3. Move the mouse. The visible area of the canvas is panned accordingly.
4. When you are done, click the canvas.

Zooming
You can use the Pan and Zoom toolbar to:
 Zoom in on a specified point to magnify the current elements.
 Zoom out from a specified point.

94
Using the Industrial Graphic Editor Creating and Managing Industrial Graphics User Guide

 Zoom to the default zoom factor (100 percent).

 Zoom so that the currently selected element is shown ac ross the available canvas area or zoomed to
the maximum value of 500 perc ent.
 Zoom in on an area of the canvas using a "rubber band" selection with your mouse.
 Specify or select a zoom factor.
You can also use the CTRL key and the scroll wheel of the mouse to zoom in and zoom out the current
canvas view.

Zooming In to a Specified Point

You can zoom in by 25 percent of the default scale to any specified point on the canvas.
To zoom in to a specified point

1. Click the Zoom In icon in the toolbar.

2. Move the mouse over the canvas. The Zoom In point er appears.
3. Click the canvas to where you want to zoom in. The canvas is zoomed in at the specified point.

Zooming Out from a Specified Point

You can zoom out by 25 percent of the default scale from any specified point on the canvas.
To zoom out to a specified point
1. Click the Zoom Out icon in the toolbar.
2. Move the mouse over the canvas. The Zoom Out pointer appears.
3. Click the canvas from where you want to zoom out. The canvas is zoomed out from the specified
point.

Zooming to the Default Zoom Value

You can reset the zoom to the default zoom value 100 percent.
To reset the zoom to the default zoom value

 Click the Zoom to Normal icon in the toolbar. The canvas zoom is reset to its default.

Zooming a Selected Element

You can zoom one or more selected elements so that they appear as large as possible in the alloc ated
canvas area. This is useful when you want to make fine adjustments to one or more elements.
To zoom a selected element
1. Select the elements you want to zoom.
2. Click the Zoom To Selection icon in the toolbar. The visible canvas is zoomed so that the selected
elements appear as large as possible.

Zooming a Specified Area

You can zoom a specified area by using the "rubber band" selection method.

95
Creating and Managing Industrial Graphics User Guide Using the Industrial Graphic Editor

To zoom a specified area

1. Click the Rubber Band Zoom icon.
2. Move the mouse over the canvas. The Rubber Band pointer appears.
3. Move the mouse to the top left corner of the area you want to zoom.
4. Hold the left mouse button down and then drag the mouse to the bottom right corner of the area you
want to zoom.
5. Release the mouse button. The area is zoomed to the entire canvas area.

Selecting or Specifying a Zoom Value

You can select a defined zoom value or type a zoom value. Valid values are 25 perc ent to 500 perc ent.
To select or specify a zoom value
 On the Zoom and Pan toolbar, do one of the following:
o Click the zoom value list and select a zoom value.
o Click the zoom value in the zoom value list, type a valid value, and then click Enter.

Using the Pan and Zoom Window to Change the Zoom

You can use the Pan and Zoom window to change the zoom of the canvas.

Note: You can also use the Pan and Zoom window to "scroll" to a different part of the canvas. This is
called panning. For more information, see Panning on page 93.

To use the Pan and Zoom window for zooming

1. On the Zoom and Pan toolbar, click the Pan and Zoom window icon. The Pan and Zoom window
appears.
2. In the Pan and Zoom window, move the mouse over a corner or an edge of the red rectangle.
3. Click and hold the left mouse button down. The corresponding resize pointer appears.
4. Drag the mouse. The red rectangle changes size proportionally.
5. Release the mouse button. The zoom of the canvas is changed accordingly.

Using the Mouse Scroll Wheel for Zooming

You can use the mouse scroll wheel to zoom the canvas area. The canvas is then zoomed on the
midpoint of all selected elements or, if none are selected, on the midpoint of the canvas.
To use the mouse scroll wheel for zooming
 Press and hold the CTRL key and move the scroll wheel:
o Forward to zoom in by a factor of 25 percent of the default zoom value.
o Backward to zoom out by a factor of 25 percent of the default zoom value.

Configuring Designer Preferences

Use the Designer Preferences dialog box to set Industrial Graphic Editor preferences. Preferences can
be configured for the following:
 Grid Settings - The grid helps you precisely place and move elements on the canvas.
 Canvas Settings - The settings for the appearance of the graphic on the canvas can also be
configured.

96
Using the Industrial Graphic Editor Creating and Managing Industrial Graphics User Guide

 Graphics Performance Index Warning window visibility

 Image Editor selection
To open the Designer Preferences dialog window
1. Open the Industrial Graphic Editor.
2. On the View menu, click Preferences. The De signer Preferences dialog box appears.
To configure Grid Settings
1. Click the box next to the Grid color label. The Select Grid Color dialog box appears. For more
information, see Setting a Solid Color on page 151.
2. In the Grid size box, type a value from 1 to 100 to specify the distance in pixels between each line in
the grid.
3. In the Major subdivi sions box, type a value from 1 to 10 to specify the number of major subdivisions
of the grid. Maj or subdivisions are emphasized lines that visually create larger grid cell blocks.
4. Clear or select the Grid vi sible check box to hide or show the grid.
5. Clear or select the Snap to grid check box. With the snap-to-grid option set, when you move
elements or groups on the canvas they are moved to the closest grid intersection. If this option is not
set, you can move the elements freely to any location on the canvas.
To configure Canvas Settings and graphic appearance
1. Click the box next to the Background Color label. The Select Canvas Color dialog box appears.
For more information, see Setting a Solid Color on page 151.
2. Clear or select the S ymbol Smoothing check box. If this option is not set, lines drawn on the canvas
may show jagged edges. With this option set, lines drawn on the canvas show smooth edges.
3. Clear or select the Show Anchor check box. With this option selected, the graphic displays anchor
icons, if anchors were created in the graphic.
To configure Graphic Performance Index Settings
 Clear or select the Show the Graphic Performance Index warning on save check box. If this
option is disabled, the Graphic Performance Index Warning window will not appear when saving a
graphic with a GP I rating calculated to be less than 5. 0. For more information about the Graphics
Performance Index, see Estimating Graphic Perf ormance on page 40."
To select an Image Editor
 Choose the graphic editing tool from the Image Editor menu. If you select Choose Custom Editor,
the Select Image Editing Application window appears so you can make a selection.
To save your settings as default settings
1. Click Save as Default.
2. Click Apply.
3. Click OK.

Using the Symbol Wizard Editor

You can work with the Industrial Graphic Editor feature called the Symbol Wizard Editor to create
graphics with multiple configurations called Symbol Wizards. They create Symbol Wizards with the
Symbol Wizard Editor. You can embed Symbol Wizards and use th e Symbol Wizard Editor to select the
configuration needed for an application.

97
Creating and Managing Industrial Graphics User Guide Using the Industrial Graphic Editor

Start creating a multi-configuration graphic by opening a graphic element or graphic in the Industrial
Graphic Editor. Show the Symbol Wizard Editor by clicking the Symbol Wizard icon from the Industrial
Graphic Editor’s menu bar, selecting it as an option of the View menu, or pressing the Alt+W key
combination.
The Industrial Graphic Editor window updates to show tabbed Symbol Wizard panes at the left of the
window. The top pane shows the graphic elements, named scripts, and custom properties of the graphic
in separate views.
The bottom pane shows tabbed Options and Layers panes. The Options pane shows a hierarchical list
of Choice Groups, Choices, and Options that define graphic properties and the possible values
associated with each property. The Layers pane includes a list of defined graphic layers. Beneath each
layer, separate folders contain the graphic's elements, custom properties, and named scripts associated
with each lay er. You can add, edit, or delet e items associated with the Options and Layers panes.
Symbol Wizard Option Propertie s or Layer Properties panes appear to the right of the canvas area in
the Industrial Graphic Editor window after selecting items from the Options or Layers panes.
Both properties pane shows the name of the selected item and any rule associated with the item. If a
Choic e Group is selected from the Options pane, the Options Propertie s pane also shows the default
value of the Choice Group and a De scription field.
After creating the configurations of a graphic with the Symbol Wizard Editor, use the Symbol Wizard
Preview to verify that all configurations are correct. The Symbol Wizard Preview can be opened by
clicking it from the menu bar, selecting it as an option of the View menu, or pressing the Alt+P key
combination.

After opening Symbol Wizard Preview, the Propertie s pane shows Wizard Options, which includes
drop-down menus to select options to show the different configurations created for the graphic. As
options are selected, the graphic is updated to show the select ed configuration.
The Validation pane shows any script or custom property errors within the graphic. Selecting a listed
error from the Validation pane shows the Custom Properties or Scripts dialog box to identify and
correct an error within the graphic.

98
Using the Industrial Graphic Editor Creating and Managing Industrial Graphics User Guide

After verifying that all graphic configurations are correct, save the graphic into the Graphic Toolbox. For
more information about the Symbol Wizard tasks completed by a user, see Designing a Symbol Wizard
on page 384.
To create an application containing Symbol Wizards, add a graphic to an automation object or create a
new graphic from the Graphic Toolbox. Then, embed a Symbol Wizard. The graphic appears with the
default configuration selected.

The Wizard Options pane shows a set of drop-down lists with configuration options. Select options from
the drop-down lists to change the graphic’s configuration to meet the needs of an application. Finally, edit
and update the custom properties and named scripts that are associated with the multi -configuration
graphic. For more information about the Symbol Wizard tasks , see Using Symbol Wizards in an
Application on page 392.

99
 Creating and Managing Industrial Graphics User Guide

C HAPTER 5
Working with Graphic Elements
About Graphic Elements
This section explains how to work with the common features of graphic elements. For information about
features specific to certain elements such as element properties, see Setting Graphic and
Element-S pecific Properties on page 177.
Graphic elements are basic shapes and controls you can use to create a graphic to your specifications.
You can:
 Draw an element by selecting an element from the Tools panel, placing it on the canvas, and then
configuring its properties.
Select one or more elements on the canvas with the mouse or from the Element list.
 Edit certain elements in a special way called inline editing.
 Copy, cut, paste, and duplicate elements.
 Move elements around on the canvas.
 Align elements to each other.
 Change the spacing bet ween elements.
 Resize elements.
 Change the z-order of elements to change which elements appear on top of others when they
overlap.
 Rotate elements.
 Change the origin of elements to specify around which point the elements are rotat ed.
 Flip elements on their horizontal or vertical axis.
 Lock elements to stop them being moved or changed.
 Undo and redo any number of changes made previously to the graphic.
 Create groups of elements to bind them together.
 Create a path graphic from multiple open line elements.

Drawing and Dragging Elements

You can create elements such as lines, curves, circles, squares, and so on. You can combine these
elements to create complex drawings of all the equipment in your manufacturing environment.
After you draw an element, you can modify its properties. For more information about modifying
properties, see Editing Element Properties on page 105.
Regardless of the kind of element you are drawing, drawing each kind of element is very similar.
After you draw an element, the pointer tool is selected again by default. To draw multiple elements of the
same type, double-click the element in the Tools panel. It remains selected after you draw your first
element of that type. You can press the ESC key to return to the pointer tool again.

101
Creating and Managing Industrial Graphics User Guide Working with Graphic Elements

If you draw or drag an element outside of the visible canvas area to the right or bottom, horizontal and/or
vertical scroll bars appear but the visible area does not follow the mouse. You can later use the scroll
bars to scroll the canvas and see the element you drew or moved.

Drawing Rectangles, Rounded Rectangles, Ellipses, and Lines

You can draw rectangles, rounded rectangles, ellipses, and lines on the canvas.
To draw a rectangle, rounded rectangle, ellipse, or line
1. Click the appropriate icon in the Tool s panel.
2. Click the canvas and drag the shape of the element on the canvas.
3. When you are done, release the mouse button.

Drawing Polylines, Polygons, Curves, and Closed Curves

You can draw polylines, polygons, curves, and closed curves on the canvas.
If you are drawing a closed element, the element automatically closes when you are done drawing.
To draw a polyline, polygon, curve, or closed curve
1. Click the appropriate icon in the Tool s panel.
2. Click the canvas where you want to start the element.
3. Click the next point for the element.
4. Continue clicking until you have all the points you require.
5. When you are done, right-click.
6. You can change the shape of these elements anytime by editing their control points. For more
information, see Editing Control Points on page 183.

Drawing 2-Point Arcs, 2-Point Pies and 2-Point Chords

You can draw 2-point arcs, 2-point pies, and 2-point chords on the canvas.
If you are drawing a closed element, the element automatically closes when you are done drawing.
To draw a 2-point arc, 2-point pie, or 2-point chord
1. Click the appropriate icon in the Tools panel.
2. Click the canvas where you want to start the element and hold the mouse button.
3. Drag the mouse to where you want the element to end.
4. When you are done, release the mouse button.
5. You can change the shape of these elements anytime by editing their control points. For more
information, see Editing Control Points on page 183.

Drawing 3-Point Arcs, 3-Point Pies, and 3-Point Chords

You can draw 3-point arcs, 3-point pies and 3-point chords on the canvas.
If you are drawing a closed element, the element automatically closes when you are do ne drawing.
To draw a 3-point arc, 3-point pie, or 3-point chord
1. Click the appropriate icon in the Tools panel.
2. Click the canvas where you want to start the element.

102
Working with Graphic Elements Creating and Managing Industrial Graphics User Guide

3. Click the canvas in two other places to define the element.

4. You can change the shape of these elements anytime by editing their control points. For more
information, see Editing Control Points on page 183.

Placing and Importing Images

You can plac e an image element on the canvas and import an image int o it.
To draw an image
1. Click the image icon in the Tool s panel.
2. Click the canvas and drag the shape of the image element.
3. Release the mouse button. The Open dialog box appears.
4. Browse to the image file, select it, and then click Open. The image file is loaded into the image
element.

Drawing Buttons
You can draw a button on the canvas. You can configure a button wit h a text label or an image.
For more information on how to configure a button with an image after drawing it on the canvas, see
Configuring Buttons wit h Images on page 182.
To draw a button
1. Click the button icon in the Tools panel.
2. Click the canvas and drag the shape of the button element.
3. Release the mouse button. The button text appears in edit mode.
4. Type a text label for the button and click Enter.

Placing Text
You can plac e text on the canvas.
The text element has no border and no background fill. The text does not wrap. When you type the text,
the size of the Text element expands.
You can also drag the handles of the Text element to resize it.
To place text
1. Click the text icon in the Tools panel.
2. Click the canvas where you want to place the text.
3. Type the single line of text you want.
4. When you are done, do one of the following:
o Click Enter to type a new line of text. This new line is a new element.
o Click the canvas outside the text element.

Drawing Text Boxes

You can draw text boxes on the canvas. Text boxes can have borders and background fill.
You can also configure the text to wrap in the text box. For more information, see Wrapping Text in
Buttons on page 182.

103
Creating and Managing Industrial Graphics User Guide Working with Graphic Elements

To draw a text box

1. Click the text box icon in the Tools panel.
2. Click the canvas where you want to place the text box.
3. Drag a rectangle on the canvas.
4. Release the mouse button. The text appears in edit mode.
5. Type a text label for the text box, and then click Enter.

Drawing Status Elements

You can use the status element to indicate specific quality and status conditions of attribut es.
To draw status elements
1. Click the status icon in the Tools panel.
2. Click the canvas where you want to place the status element.
3. Drag a rectangle on the canvas.
4. Release the mouse button.

Drawing Windows Controls

You can draw Windows controls on the canvas to add a dditional functionality to your graphic. Each of the
Windows controls has specific behavior when it is drawn. For example, you can change the width of a
combo box, but not the height.
To draw a windows control
1. Click the appropriate Windows cont rol icon in the Tool s panel.
2. Click the canvas where you want to place the Windows control.
3. Drag a rectangle on the canvas.
4. Release the mouse button.

Dragging Elements
After you draw elements on the canvas, you can drag them to a new position.
To drag elements on the canvas
1. Select one or more elements.
2. Click one of them and hold the mouse button down.
3. Drag the mouse to the new position.
4. Release the mouse button.

104
Working with Graphic Elements Creating and Managing Industrial Graphics User Guide

Editing Element Properties

You can control the appearance of an element, a group of elements, or multiple elements with functions
on the toolbar and properties shown in the Propertie s Editor of the Industrial Graphic Editor.

Often you can edit an element by changing the values of its properties instead of using the mouse to
perform the same function. This is useful when you want very exact editing, such as when you want to
resize an element to a specific width.
The Propertie s Edi tor shows the properties common to all selected elements.
 Read-only properties appear in grey.
 Non-default values appear in bold.

Note: The Propertie s Edi tor not only supports values, but also allows input of color, font, and file
information in the respective dialog boxes.

Properties are organized in categories so you can find them more easily. The following table shows the
categories:

Property Category Purpose

Graphic Element name or other describing identifiers

105
Creating and Managing Industrial Graphics User Guide Working with Graphic Elements

Property Category Purpose

Appearance Element style, location, size, orientation, offset, transparency and locked
status

Fill Style Any parameters related to the fill appearance of the element

Line Style Any parameters related to the appearance of element lines

Text Style Any parameters related to the appearance of element text

Runtime Behavior Element visibility, tab order and any other element behavior at run time

Custom Properties Additional user-defined properties you can associate with any element

Selecting Elements
You can select one or more graphic elements from the Industrial Graphic Editor canvas by:
 Clicking on them with the mouse.
 Dragging a lasso around them with your mous e.
 Selecting them with a menu option or with a shortcut key.
 Selecting them by name from the Elements list.
When you select an element, handles appear around the border of the element that can be moved to
control the size of the element. You can change the orient ation of a graphic element by moving the
handle connected to the top center border handle.

When you select multiple elements, the last selected element is the primary element . All other previously
selected elements are secondary elements.

106
Working with Graphic Elements Creating and Managing Industrial Graphics User Guide

Selected Element Description

Primary Element Appears with color-filled handles.

Behaves as an active selected element.
Is the point of reference for all operations, such
as aligning or spacing multiple selected
elements.

Secondary Elements Appear with white handles.

Behave as inactive selected elements.
Follow the edits made to the primary element.

To select a group, you must click one of the elements contained in the group.

Selecting Elements by Mouse Click

You can select one or more elements by pressing Shift + clicking. This is particularly useful for selecting
multiple elements that are not necessarily all included in a specified rectangular area on the canvas.
To select an element or multiple elements by mouse click
1. On the canvas, click an element. It bec omes selected.
2. To select furt her elements, press Shift+ click. The other elements become selected.

Note: You can see in the Elements List which elements are selected.

Selecting Elements by Lasso

You can select one or more elements by lassoing them with your mouse. This is useful for selecting
multiple elements within a specified rectangular area on the canvas.
To select elements by lasso
1. On the canvas, click outside any element and hold the mouse button down.
2. Drag the mouse so that the lasso wraps around all elements that you want to select.
3. When you are done, release the mouse button. The elements that are fully enclosed within the lasso
are selected.

Selecting All Elements

You can select all elements using the Select All function.
To select all elements
 On the Edit menu, click Select All. All elements on the canvas are selected.

107
Creating and Managing Industrial Graphics User Guide Working with Graphic Elements

Note: You can also press the F2 key to select all elements.

Selecting Elements Using the Elements List

You can use the Elements List to select any elements on the canvas. The Elements List is particularly
useful for selecting elements behind other elements.
The Elements List shows which elements are currently selec ted. The primary selected element appears
by default in dark blue, the secondary selected elements appear by default in light blue.

Note: The color setting of the Elements List depends on the setting for the Selected Items option in the
operating system’s Display Properties Appearance panel.

To select elements using the Elements List

1. In the Elements Li st, select the element name.
2. To select multiple elements, Ctrl + click the other elements.

Unselecting Elements
You can unselect one or more selected elements. You can do this by clicking on them individually on the
canvas or in the Elements List.
If you want to remove the selected elements in a specified rectangular area, you can use the lasso.
To unselect elements individually
1. Do one of the following:
o Shift + click the selected element on the canvas.
o Ctrl + click the selected element name in the Elements List.
2. Repeat the previous step for all elements you want to unselect.
To unselect elements from a specified rectangular area
1. Shift + click the canvas outside of any element.
2. Drag the mouse so that the lasso surrounds the elements that you want to unselect.
3. Release the mouse button. The selected elements within the lasso are unselected, and the selected
elements outside the lasso remain selected.

Inline Editing
After you place graphic elements on the Industrial Graphic Editor canvas, you can edit them by selecting
them and clicking on them again. This is called inline editing. The following elements support inline
editing.:

Element Use inline editing to

Button, text, text box Edit the text.

Polyline, polygon, curve, Edit the control points.

closed curve

2-point arc, 2-point pie, 2-point Edit the start and sweep angles.
chord, 3-point arc, 3-point pie,
3-point chord

108
Working with Graphic Elements Creating and Managing Industrial Graphics User Guide

Element Use inline editing to

Group Edit the individual elements and groups contained in the group.

Path Edit the control points.

To edit elements with inline editing

1. Select an element by clicking on it or selecting it from the Elements list. Element handles appear
around the border of the element.

2. Click the element again to begin inline editing.

o For buttons, text, and text boxes, the text is selected and you can type new text.
o For polylines, polygons, curves, and closed curves, the control points of the element appear.
Move a control point to change the shape of the element.
You can also add and delete cont rol points. For more information, see A dding and Removing Control
Points on page 183.
o For arcs, pies, and chords, the handles for the start angle and sweep angle appear. Move a
handle to change the start angle and sweep angle.
o For groups, the group handle is replaced with a shaded outline. You can select individual
elements and groups within the group to edit and move them.
3. Click the canvas outside the element to exit from inline editing.

Copying, Cutting, and Pasting Elements

After you draw elements, you have the same cut, copy, and paste options available to y ou as in any ot her
Windows application. However, some of these options behave differently in the Industrial Graphic Editor.
You can also duplicate elements. Duplicating elements lets you quickly make copies of existing selected
elements without first copying or cutting. You can duplicate one or more selected elements at the s ame
time.
When you copy or duplicate elements, all of its properties are copied with the element. If you do not want
the properties to be identical, you must change the properties after you copy.
Locked grouped elements and the path element behave differently when you copy or duplicate them.
If you copy or duplicate:
 A set of elements that are locked, the copy is not locked.
 Grouped elements, the copy is still grouped.
 A path element, the copy is also a path.

Copying Elements
After you sel ect an element, you can copy it by using menu options or you can Ctrl + click.

109
Creating and Managing Industrial Graphics User Guide Working with Graphic Elements

To copy one or more elements

Do any of the following:
 Select one or more elements to be copied on the canvas. On t he Edit menu, click Copy. On t he Edit
menu, click Paste. The paste pointer appears. Click the canvas where you want to place the copy.
 Ctrl + click an element.
 Select one or more elements to be copied on the canvas. Press Ctrl + C. Press Ctrl + V. The paste
pointer appears. Click the canvas where you want to place the copy.

Cutting or Deleting Elements

You can cut elements or groups or you can delete them. Cutting lets you select elements or groups and
remove them from the canvas. You can paste the removed elements or groups.
Deleting elements or groups deletes them from the canvas. You cannot paste deleted elements or
groups.
To cut one or more elements
 Select one or more elements, and then do one of the following:
o On the Edit menu, click Cut.
o Press Ctrl + X.
To cut and paste elements on the canvas
1. Select the element or group.
2. On the Edit menu, click Cut.
3. Do one of the following:
o Click Paste on the Edit menu.
o Press Ctrl + V.
4. Click the canvas location where you want the element or group to be placed.
To delete an element or a group
1. To remove the element or group and not use it in the future, select the element or group.
2. Do one of the following:
o Click Delete on the Edit menu.
o Press Delete on your keyboard.

Duplicating Elements
Duplicating elements enables you to select an element or elements and quickly make copies of them.
You can also specify the amount of overlap when you duplicate.
To duplicate elements
1. Select one or more elements.
2. Do one of the following:
a. Click Duplicate on the Edit menu. The selected element is duplicated and appears offset to the
original element.
b. Press Ctrl + D. The selected element is duplicated and appears offset to the original element.

110
Working with Graphic Elements Creating and Managing Industrial Graphics User Guide

c. Ctrl + click one of the selected elements to duplicate all selected elements. You can keep the
mouse button down and drag them to the new position on the canvas.
To set the overlap when you duplicate
1. Duplicat e an element or elements. The element is copied overlapping the original.
2. Move the duplicated element to the location relative to the original. For example, move the
duplicated element five grid spaces above the original element.
3. Duplicat e the element again. The new duplicate is placed in the same offset you specified in the
preceding step. For example, five grid spaces above the original element.

Moving Elements
After you create elements, you can move them to the location you want on the canvas.
You can move elements or groups by dragging them to the new location or you can open the properties
for the element or group and change the X and Y properties.
If you turned on snap to grid, moving an element or group with the mouse snaps the element or group to
the grid.
If you move an element or group by specifying X and Y coordinates, it does not snap to the grid.
You can move an element or group vertically or horizontally using the keyboard.
To move an element or group using the mouse
1. Select the element or group you want to move.
2. Drag the elements or group to the new location.
To move an element or group by specifying the X and Y properties
1. Select the element or group you want to move.
2. In the Properties Editor, expand Appearance.
3. Do the following:
o In the X box, type the new X location.
o In the Y box, type the new Y location.
4. Click in the canvas or click ENTER.
To move an element or group vertically or horizontally using the mouse
1. Shift + click to select the element or group you want to move.
2. Drag the elements or group to the new location.
To move an element or group vertically or horizontally using the keyboard
1. Select the element or group you want to move.
2. Do one of the following:
o Press the Up or Down arrow keys to move the element or group vertically by one unit in the grid.
o Press the Left or Right arrow keys to move the element or group horizontally by one unit in the
grid.

Note: You can move the element or group by two units in the grid by additionally pressing the Shift key,
by four units by additionally pressing the Ctrl key, and by 10 units by additionally pressing both keys.

To move multiple elements or groups

1. Select the elements and/or groups.

111
Creating and Managing Industrial Graphics User Guide Working with Graphic Elements

2. Move them as you would with one single element. The elements are moved together and maintain
their spatial relationship when moving.

Aligning Elements
After you draw elements, you can align them:
 Horiz ontally so that their top or bottom sides or their center points are horizontally alig ned.
 Vertically so that their left, right, or center points are vertically aligned.
 So that their center points are on top of each ot her.
 So that their points of origin are on top of each other.
When you align elements, the secondary elements are moved so that they align wit h the primary
element. For more information about primary and secondary elements, see Selecting Elements on page
106.

Aligning Elements Horizontally

You can align multiple elements by their top or bottom sides or horizontally on their middle points.
To align elements by their top sides
1. Select all elements that you want to align. Make sure the element you want to align all other elements
to is the primary element.
2. On the Arrange menu, point to Align, and then click Align Top. The sec ondary elements are moved
so that their top sides are aligned with the top side of the primary element.

To align elements by their bottom sides

1. Select all elements that you want to align. Make sure the element you want to align all other elements
to is the primary element.
2. On the Arrange menu, point to Align, and then click Align Bottom. The secondary elements are
moved so that their bottom sides are aligned with the bottom side of the primary element.

112
Working with Graphic Elements Creating and Managing Industrial Graphics User Guide

To align elements horizontally by their center points

1. Select all elements that you want to align. Make sure the element you want to align all other elements
to is the primary element.
2. On the Arrange menu, point to Align, and then click Align Middle. The secondary elements are
moved vertically so that their center points are aligned with the center point of the primary element.

Aligning Elements Vertically

You can vertically align multiple elements on the left, right, or their center points.
To align elements by their left sides
1. Select all elements that you want to align. Make sure the element you want to align all other elements
to is the primary element.
2. On the Arrange menu, point to Align, and t hen click Align Left. The secondary elements are moved
so that their left sides are aligned with the left side of the primary element.

To align elements by their right sides

1. Select all elements that you want to align. Make sure the element you want to align all other elements
to is the primary element.
2. On the Arrange menu, point to Align, and then click Align Right. The secondary elements are
moved so that their right sides are aligned with the right side of the primary element.

113
Creating and Managing Industrial Graphics User Guide Working with Graphic Elements

To align elements vertically by their centers

1. Select all elements that you want to align. Make sure the element you want to align all other elements
to is the primary element.
2. On the Arrange menu, point to Align, and then click Align Center. The secondary elements are
moved horizont ally so that their center points are aligned with the center point of the primary
element.

Aligning Elements by their Center Points

You can align elements by their center points. The center point of one or more elements is the point
halfway between the horizontal and vertical boundaries.
To align elements on their center points
1. Select all elements that you want to align. Make sure the element you want to align all other elements
to is the primary element.
2. On the Arrange menu, point to Align, and then click Align Centers. The secondary elements are
moved so that their center points are placed on top of the center point of the primary element.

Aligning Elements by their Points of Origin

You can align elements by their points of origin. By default, the element’s center point if the point of
origin. But, an element’s center point can be changed. Th e center point is the anchor point of an element
to the canvas.
To align elements on their points of origin
1. Select all elements that you want to align. Make sure the element you want to align all other elements
to is the primary element.
2. On the Arrange menu, point to Align, and then click Align Origins. The secondary elements are
moved so that their points of origins are placed on top of the point of origin of the primary element.

Adjusting the Spacing between Elements

You can adjust the space bet ween elements according to specific rules.

114
Working with Graphic Elements Creating and Managing Industrial Graphics User Guide

You can adjust the spacing between elements in the following ways:
 Horiz ontally - moves the selected elements left or right without changing the vertical positions.
 Vertically - moves the selected elements up or down without changing the horizontal positions.
 Distribution - moves the selected elements so that their center points are distributed in equal
distance to each other.
 Equal spacing - moves the selected elements so that the distance bet ween their edges is equal.
 Increase spacing - moves all selected elements one pixel further away from each other. The primary
element does not move.
 Decrease spacing - moves all selected elements one pixel closer toward each other. The primary
element does not move.
 Remove spacing - removes all space bet ween selected eleme nts so that their edges touch.

Distributing Elements
You can distribute elements so that their center points are distributed in equal distance to each other.
To distribute elements horizontally
1. Select at least three elements.
2. On the Arrange menu, point to Space, and then click Di stribute Horizontal. The s elected elements
are distributed horizontally.
To distribute elements vertically
1. Select at least three elements.
2. On the Arrange menu, point to Space, and then click Distribute Vertical. The selected elements
are distributed vertically.

Making Space between Elements Equal

You can space elements so that the distances between their boundaries are equal.
The difference between making space between elements equal and distributing them is that making
space equal uses the boundaries of the elements, whereas distributing uses the center points. Both do
not necessarily lead to the same result.
To make the horizontal space between elements equal
1. Select at least three elements.
2. On the Arrange menu, point to Space, and then click Make Horizontal Space Equal. The selected
elements are moved so that the horizontal spaces between their boundaries are equal.
To make the vertical space between elements equal
1. Select at least three elements.
2. On the Arrange menu, point to Space, and then click Make Vertical Space Equal. The selected
elements are moved so that the vertical spaces bet ween their boundaries are equal.

Increasing Space between Elements

You can increase space between elements equally.
The primary element does not move. All secondary elements are moved away from the primary element.

115
Creating and Managing Industrial Graphics User Guide Working with Graphic Elements

To increase the horizontal space between elements

1. Select at least two elements.
2. On the Arrange menu, point to Space, and then click Increase Horizontal Spacing. The selected
elements are moved so that the horizontal space bet ween them is increased by one pixel.
3. Repeat the previous step to move the selected elements further away from each other.
To increase the vertical space between elements
1. Select at least two elements.
2. On the Arrange menu, point to Space, and then click Increase Vertical Spacing. The selected
elements are moved so that the vertical space between them is increased by one pixel.
3. Repeat the previous step to move the selected elements further away from each other.

Decreasing Space between Elements

You can dec reas e space bet ween elements equally.
The primary element does not move. All secondary elements move toward t he primary element. You can
move them until the left sides of all elements are aligned.
To decrease the horizontal space between elements
1. Select at least two elements.
2. On the Arrange menu, point to Space, and then click Decrease Horizontal Spacing. The selected
elements are moved so that the horizontal space bet ween them is decreased by one pixel.
3. Repeat the previous step to move the selected elements closer toward each other.
To decrease the vertical space between elements
1. Select at least two elements.
2. On the Arrange menu, point to Space, and then click Decrease Vertical Spacing. The selected
elements are moved so that the vertical space between them is decreas ed by one pixel.
3. Repeat the previous step to move the selected elements closer toward each other.

Removing All Space between Elements

You can remove all space between selected elements so that their boundaries touch.
The primary element does not move. All secondary elements move toward t he primary element. You can
move them until the left and right sides of all secondary elements are aligned.
To remove all horizontal space between elements
1. Select all elements between which you want to remove the spac e.
2. On the Arrange menu, point to Space, and then click Remove Horizontal Spacing. The horizontal
space between all selected elements is removed, so that their boundaries touch.
To remove all vertical space between elements
1. Select all elements between which you want to remove the spac e.
2. On the Arrange menu, point to Space, and then click Remove Vertical Spacing. The vertical space
between all selected elements is removed, so that their boundaries touch.

Resizing Elements
You can resize selected elements by:

116
Working with Graphic Elements Creating and Managing Industrial Graphics User Guide

 Dragging the handles of a single element to increase or decrease its horizontal or vertical size.
 Changing the Width and Height properties of one or more elements using the Properties Editor.
 Proportionally resizing multiple elements.
 Making multiple objects the same width and/or height.
Some elements cannot be resized or can only be resized in certain directions, such as the Calendar
control or DateTime Picker. If the primary element has such restrictions, then any secondary elements
resize proportional to the change in primary element's size and do not resize independently.

Resizing a Single Element with the Mouse

You can resize a single selected element with the mouse.
You can resize most elements to any given width and height, or to a fixed width to height ratio.
To resize a single selected element with the mouse
1. Select an element. The handles of the selected element appear.
2. Drag one of the handles. The object is resized while you drag.
3. Release the mouse button.
To resize a single selected element with the mouse and keeping a fixed width/height
ratio
1. Select an element. The handles of the selected element appear.
2. Press and hold the Shift key.
3. Drag one of the handles. The object is resized while you drag, the width/height ratio stays
unchanged.
4. Release the mouse button and Shift key.

Resizing Elements by Changing Size Properties

You can resize one or more elements by changing the width and/ or height property of the selected
elements.
To resize elements by changing their size properties
1. Select one or more elements.
2. In the Properties Editor, type a value for Width and for Height. The selected elements are resized
accordingly.

Resizing Elements Proportionally

You can resize multiple elements proportionally on the canvas. One element is the primary element you
can use to resize. The secondary elements resize proportionally to the change of the primary element.
To resize elements proportionally
1. Select multiple elements.
2. Drag one of the handles of the primary element. The secondary elements are resized accordingly by
the same percentage.
3. Release the mouse button.
For example, assume the primary element is 100 pixels wide and 50 pixels high. A s econdary element is
200 pixels wide and 20 pixels high.

117
Creating and Managing Industrial Graphics User Guide Working with Graphic Elements

You drag the handle of the primary element so that it is 120 pixels wide (20 percent increase) and 100
pixels high (100 perc ent increase).
Then the secondary element is resized to 240 pixels wide (20 percent increase of the original width of
200 pixels ) and 40 pixels high (100 percent increase of the original width of 20 pixels).

Making Elements the Same Width, Height, or Size

You can make elements the same widt h, height, or size.
To make elements the same width
1. Select at least two elements. Make sure the primary element is the element wit h the target width for
all elements.
2. On the Arrange menu, point to Size, and then click Make Same Width. The widt h of the secondary
elements are resized to the same width as the primary element.
To make elements the same height
1. Select at least two elements. Make sure the primary element is the element with the target height for
all elements.
2. On the Arrange menu, point to Size, and then click Make Same Height. The height of the
secondary elements are resized to the same height as the primary element.
To make elements the same size
1. Select at least two elements. Make sure the primary element is the element with the t arget size for all
elements.
2. On the Arrange menu, point to Size, and then click Make Same Size. The size of the secondary
elements are resized to the same size as the primary element.

Adjusting the z-Order of Elements

The z-order of elements specifies which element appears on top of other elements when the elements
overlap on the canvas. The z-order also determines how the elements of a path graphic connect.
When you place new elements on the canvas, they are placed at the top and can cover all other
elements.
However, you might want to bring certain elements forward so that they are always visible or overlap
certain other elements. Or you may want to use a large background element behind all other elements.
You can:
o Bring one or more elements to the very front.
o Send one or more elements to the very back.
o Bring one or more elements one level forward.
o Send one or more elements one level backward.
You can use the Elements List to see or change the z -order of the elements.

118
Working with Graphic Elements Creating and Managing Industrial Graphics User Guide

To bring selected elements to the front

 On the Arrange menu, point to Order, and then click Bring To Front. The selected elements are
brought to the front. They do not change their relative z-order.

To send selected elements to the back

 On the Arrange menu, point to Order, and then click Send To Back. The selected elements are
sent to the back. They do not change their relative z -order.

To bring selected elements one level forward

 On the Arrange menu, point to Order, and then click Bring Forward.

To send selected elements one level backward

 On the Arrange menu, point to Order, and then click Bring Backward.

Rotating Elements
You can rotate elements to any orientation (0 - 359 degrees):
 Graphically with the rotation handle.
 Numerically by typing the orient ation angle in the Properties Editor.

119
Creating and Managing Industrial Graphics User Guide Working with Graphic Elements

 By rotating in 90 degree increments in a clockwise or counter -clockwise direction.

The element rotates around its point of origin. By default, the point of origin is in the center of the element.
You can move the point of origin to any other location, even outside of the object itself. To change the
point of origin, see Moving the Origin of an Element on page 121.

Rotating Elements with the Mouse

You can rotate one or more elements with the mouse. If you select multiple elements, you can rotate the
primary element. The secondary elements rotate in unison with the primary element.
You can rotate elements:
 Freely in the range 0 to 359 in integer degrees.
 In multiples of 15 degrees.
 In multiples of 45 degrees.
You can rotate an element with the rot ation handle. The rotation handle is a light -blue circle at the top of
a selected element.
To rotate elements freely with the mouse
1. Select one or more elements.
2. Grab the rot ation handle of the primary element.
3. Drag the mouse across the screen. All selected elements are rotated around their own points of
origin as you move the mouse.
4. Release the mouse button.
To rotate elements by multiple of 15 degrees with the mouse
1. Select one or more elements.
2. Grab the rot ation handle of the primary element.
3. Press and hold the Shift key.
4. Drag the mouse across the screen. All selected elements are rotated in multiples of 15 degrees
around their own points or origin as you move the mouse.
5. Release the mouse button and Shift key.
To rotate elements by multiple of 45 degrees with the mouse
1. Select one or more elements.
2. Grab the rot ation handle of the primary element.
3. Press and hold the Ctrl key.
4. Drag the mouse across the screen. All selected elements are rotated in multiples of 45 degrees
around their own points or origin as you move the mouse.
5. Release the mouse button and Ctrl key.

Rotating Elements by Changing the Angle Property

You can change the angle property of one or more selected elements.
To rotate elements by changing the angle property
1. Select one or more elements.
2. In the Properties Editor, type a value in the Angle box.

120
Working with Graphic Elements Creating and Managing Industrial Graphics User Guide

3. Click Enter. The selected elements rotate to the specified angle.

Rotating Elements by 90 Degrees

You can rotate elements in 90 degrees clockwise or counter-clockwise increments.
To rotate elements by multiples of 15 and 45 degrees, see Rotating Elements with the Mouse on page
120.
To rotate elements by 90 degrees clockwise
1. Select one or more elements.
2. On the Arrange menu, point to Transform, and then click Rotate Clockwi se. The selected
elements rotate by 90 degrees clockwise.
To rotate elements by 90 degrees counter-clockwise
1. Select one or more elements.
2. On the Arrange menu, point to Transform, and then click Rotate Counter Clockwise. The
selected elements rotate by 90 degrees counter-clockwise.

Moving the Origin of an Element

You can change the point of origin of any element. The point of origin specifies around whic h point the
element rotates or flips. By default the point of origin is in the center of the element.
You can change the point of origin:
 With the mouse on the canvas.
 By specifying the absolute origin in the Properties Editor.
 By specifying the relative origin in the Properties Editor.

Changing Points of Origin with the Mouse

You can change the point of origin for an element with the mouse.
To change the point of origin for an element with the mouse
1. Select an element on the canvas.
2. Move the mouse over the rotation handle of the element. The point of origin icon for the element
appears.
3. Drag the Point of Origin icon to where you want to place the new point of origin for the element.
4. Release the mouse button.

Changing Points of Origin in the Properties Editor

You can change the absolute or relative point of origin in the Properties Editor.
The absolute point of origin shows the position of the point of origin in relation to the canvas. The
absolute point of origin changes when the element moves.
The relative point of origin shows the position of the point of origin in relation to the center of the element.
The relative point of origin does not change when the element moves.
To change the point of origin in the Properties Editor
1. Select one or more elements on the canvas.
2. In the Properties Editor, do one of the following:

121
Creating and Managing Industrial Graphics User Guide Working with Graphic Elements

o Type the abs olute coordinates in the x, y format for the point of origin.
o Type the relative coordinat es in the x, y format for the point of origin.
3. Click Enter. The points of origin move to the specified absolute position or to the specified position in
relation to the center points of the selected elements.
For example, if you have two elements, you can set the relative point of origin to 10, 10 t o place the points
of origin for both elements 10 pixels to the right and 10 pixels below the corresponding center points of
each element.

Add Connectors Between Graphic Elements

A connector is a line drawn between graphic elements. A connector starts at a connection point on one
graphic element and ends at a connection point on another element. Connectors are particularly useful
for complex graphics like flow diagrams, industrial piping, or electrical wiring diagrams that incorporate
many lines bet ween graphic elements.

Connectors change length or orientation in response to changes to connected graphic elements during
design time or run time. Graphic elements within a graphic can be moved, resized, or rotated and still
maintain the connector between elements.
Connection points are the locations on a graphic element to attach a connector. A default set of eight
connection points appear on the bounding rectangle around a graphic element or an embedded graphic.

You can also add custom connection points to graphic elements or embedded graphics if you want to
place a connector at a different position than on a b ounding rectangle.

One or more control points appear on an Angled connector based on the number of angles in the
connector path. Using your mouse, you can move a control point horizontally or vertically to change the
shape of a connector bet ween the fixed connection points on both graphic elements. By default, a control
point is placed at the int ersection point of each right angle in a connector.

122
Working with Graphic Elements Creating and Managing Industrial Graphics User Guide

Important: Connector lines do not maintain their horizontal and vertical orientation with 90 degree
angles when placed in a graphic whose dimensions exceed 1280 by 1280 pixels. Instead, the connector
will revert to a straight line between connection points.

You can also add control points to a connector if you want to change the shape of its path. For more
information about adding control points to a connector, see Change the Shape of a Connector on page
129.

Draw a Connector
You use the Connector tool to draw a connector between graphic elements. The Connector tool initially
attempts to draw a connector with a minimum number of angles. You can change the shape of the initial
connector path using control points to redraw the path if necessary.
A connector supports Symbol Wizards like any other graphic element. You can associate a connector
with a Symbol Wizard layer by dragging the connector element to the layer during design time. You can
also remove the connector from a layer by removing the connector from the association list. If a
connector is hidden based on the Symbol Wizard’s Wizard Option configuration, the connector does not
appear during run time.
Press the Esc key to cancel drawing a connector. Also, clicking on the Industrial Graphic Editor’s canvas
takes you out of connector drawing mode.
To draw a connector
1. Open a graphic in Industrial Graphic Editor that you want to add a connector.
2. Click once on the Connector icon within the Tool s pane to draw a single connector.
If you want to draw multiple connectors, double click on the Connector icon.
3. Move your mouse over the first graphic element that you want to add a connector.
The default connection points appear when you move your mouse over a graphic element.
4. Place the mouse over the connection point where you want to place the connector on the graphic
element.
A green rectangle appears around the connection point when it is selected.

A start connection point has an automatic offset, which is a perpendicular straight line segment from
the start connection point to the first angle in the connector path. An automatic offset prevents the
connector from following the border of the originating graphic element. No automatic offset is applied
to the terminating connection point on the connected graphic element.

5. Press and hold your left mouse key and drag the mouse to the second graphic element.

123
Creating and Managing Industrial Graphics User Guide Working with Graphic Elements

Connection points appear when you move the mouse over the second graphic element.

6. Release the mouse button when you are over a selected connection point on the second graphic
element.
The connector appears as a line between both graphic elements.
7. If necessary, use connector control points to change the shape of the connector between the
connected graphic elements.

Adding Connection Points

You use the Connection Point tool to place additional connection points at other locations on a graphic
element than the bounding rectangle. Also, you can place custom connection points on an embedded
graphic and connect to them.

Note: Custom connection points are part of the parent graphic element and cannot be grouped. Also,
custom connection points added to a graphic element that is part of a Symbol Wizard layer are shown
when the graphic element is part of the Symbol Wizard’s current configuration.

Press the Esc key to cancel adding a connection point. Also, clicking on the Industrial Graphic E ditor’s
canvas takes you out of connection point addition mode.
To add connection points
1. Open a graphic that you want to add one or more connection points.
2. Click once on the Connection Point icon from the Tool s pane to draw a single connection point on
a graphic element.
If you want to draw multiple connection points, double click on the Connection Point icon.
3. Move your mouse to a location within a graphic element that you want to place a new connection
point.

Note: Connection points can be added wit hin the bounding rectangle of a hosting element of an
embedded graphic.

4. Click once.
The new connection point appears as a green rectangle at the loc ation you selected.
To change the position of a connection point
You can change the position of a connection point that you added to a graphic element or a graphic.
1. Click on the connection point you want to move to select it.
2. Keep the left mouse key pressed.
3. Drag the connection point to a new location and release the mouse key.
The X and Y properties show the coordinate position of the connection point.
You can also change the location of a connection point you added by changing the X and Y
coordinate values assigned to the connection point’s X and Y properties.

124
Working with Graphic Elements Creating and Managing Industrial Graphics User Guide

Use Connection Points with Embedded Situational Awareness Library

Symbols
Situational A wareness Library symbols are protected to prevent them from being modified.
A set of 18 Situational Awareness Library symbols include default connection points based on the most
common locations of equipment connections. These are:
SA_DirectionArrow SA_ParallelControlValve

SA_ElectricalReactor SA_Pump_Blower_RotaryValve

SA_ElectricalTransformer SA_RotatingEquipment

SA_HandS witchSelector SA_Valve_2Way

125
Creating and Managing Industrial Graphics User Guide Working with Graphic Elements

SA_HeatExchanger_Fan SA_Valve_2WayAngle

SA_HVLV_S witch SA_Valve_3Way

SA_MiscellanousEquipment SA_Valve_4Way

SA_MultiStageP ump SA_Valve_And_Damper

126
Working with Graphic Elements Creating and Managing Industrial Graphics User Guide

SA_PageNavigation SA_Valve_Mnemonic

A Symbol Wizard option, ConnectionPoint, enables you to show or hide the connection points in the
Industrial Graphic Editor during configuration. The default value of ConnectionPoint is True.
The ConnectionPoint Wizard Option is tied to other Wizard Options such as Orientation and Type.
Some connection points will be tied to additional Wizard options, and will be available only when that
specific indicator is enabled.
Tips for using connection points with embedded Situational Awareness Library symbols:
 If undesired connectors appear on top of an embedded symbol, use the Order option from the
Arrange menu and select BringToFront for the symbol or SendToBack for the specific connector.
 To eliminate undesired connection elbows, use connector type Straight.

Change Connector Properties

A connector includes a set of Appearance, Line Style, and Runtime Behavior properties. These
properties can be modified during design time.
During run time, you can use animation t o change property values that affect the appearance or behavior
of a connector. For Angled or Straight connectors, you can use Line Style or Element Style animation. A
connection point does not support any type of animation.

Property Description

Appearance Properties
ConnectionTy pe Type of connector (Angled or Straight). Angled is the default, which contains a set
of connector line segments with 90 degree angles bet ween them.

127
Creating and Managing Industrial Graphics User Guide Working with Graphic Elements

Property Description

ElementStyle Element style applied to a connector to change the line color, fill, and pattern. Line
styles can be applied to Angled and Straight types of connectors. None is the
default.

X Horiz ontal coordinate of the left most border of a selected graphic element or
graphic that has an attached connecto [Link] X coordinate value is the number of
pixels between the left vertical border of the Industrial Graphic Editor's canvas area
to the left most border position of the selected graphic element or graphic.
Y Vertical coordinate of the top border of a selected graphic element or graphic that
has an attached connector. The Y coordinate value is the number of pix els between
the top horizontal border of the Industrial Graphic Editor's canvas area to the top of
the selected graphic element or graphic.
Start Read-only X and Y coordinates of a connector’s start point with respect to the
origin at the top left corner of the Industrial Graphic Editor’s canvas.

End Read-only X and Y c oordinates of a c onnector’s end point with respect to the origin
at the top left corner of the Industrial Graphic Editor’s canvas.

Line Style Properties

LineWeight Line weight of an Angled or Straight type of connector. 1 is the default.

LineP attern Line pattern of an Angled or Straight type of connector. Solid is the default.

StartCap Shape of the line start point of an Angled or Straight type of connector. Flat is the
default.
EndCap Shape of line end point of an Angled or Straight type of connector. Flat is the
default.
LineColor Line color of an Angled or Straight type of connector. Black is the default.

Runtime Behavior Properties

Enabled Connector animation is enabled or disabled during run time. Enabled is the default.

Visible Connector is visible or hidden during run time. Visible is the default.

Change the Type of Connector

You can select the type of connector by setting an option for the ConnectionType property in the
Appearance pane of the Industrial Graphic Editor.
The default connector type is Angled, which consists of horizontal and vertical lines with a 90 degree
angle bet ween them. A Straight connector is a straight line bet ween the connection points on different
graphic elements.

128
Working with Graphic Elements Creating and Managing Industrial Graphics User Guide

To change the type of connector

1. Click on a connector to select it.
The Connection Type property appears in the Appearance pane of the Industrial Graphic Editor.
2. Select a connector type from the drop -down list of the Connection property.
The appearance of the selected connector changes to the type you selected.

Change the Length of a Connector

You can change the length of a connector to move it to another connection point on a graphic element or
detach it from a graphic element.

Note: A connector is not required to start or end at a connection point on a graphic element. Connectors
can be drawn on the canvas det ached from any graphic elements.

To change the length of a connector

1. Click on a connector to select it.
The start point of a connector appears as a green circle. A halo appears around the end point.
2. Select either the start or end point of the connector and keep your left mouse key pressed.
3. Drag the start or end point of a connector to a new loc ation and release the mouse key.
The length of the connector changes until you release your mouse key. The Start or End properties
show a new coordinate position based on whether you moved the connector’s start or end point.
You can also change the location of a connector’s start or end points by changing the X and Y
coordinate values assigned to the connector’s Start or End properties.

Change the Shape of a Connector

An Angled connector includes one or more control points that can be moved to change the shape of a
connector.
The movement of c ontrol points is restricted to changing the shape of the connector without changing the
fixed position of the connection points on graphic elements. For example, the two c ontrol points shown in
the figure below are part of an Angled connector. Both control points can be moved horizontally to the
same X coordinate position to change the position of the vertical line segment of the connector.

129
Creating and Managing Industrial Graphics User Guide Working with Graphic Elements

But, the line segments from the connection points of the graphic elements to their adjacent control points
cannot be moved. In the following example, the control points cannot be moved vertically. To maintain
the required right angles bet ween line segments of an Angled connector would require the locations of
the fixed connection points to be moved.

To change the shape of a connector

1. Click on a connector to select it.
A control point appears at the intersection point of each right angle in an Angled connector.
2. Click a control point and keep your mouse key pressed.
The mouse cursor changes to a double arrow to indicate the cont rol point can be moved.
3. Move the control point to change the shape of the connector and release the mouse key.

Delete a Control Point

If you want to remove a control point to change the shape of your connector, you must first reposition a
line segment to ensure the resulting connector path contains only right angles before deleting a control
point.
In the following example, a line segment needs to be repositioned vertically or horizontally to ensure the
connector contains only right angles. After a line segment is repositioned, a control point can be deleted.

To delete a control point

1. Click on a connector to select it.
2. Move a line segment wit hin the connector to ensure the connector path contains only right angles
between its line segments.
3. With your Ctrl key pressed, place your cursor over the control point on the connector you want to
delete.
The appearance of the curs or changes to a pen tip with a minus sign to indicate that a control point
can be deleted from a connector.

130
Working with Graphic Elements Creating and Managing Industrial Graphics User Guide

Note: Control points at the right angles of a connector cannot be deleted. You can only remove
control points on straight line segments.

4. Left click with your mouse to delet e the control point.

The small blue circle on the connector disappears indicating the control point is deleted from the
connector.

Flipping Elements
You can flip elements on their horizontal or vertical axes. The axis for each element is determined by its
point of origin. For more information on how to change the point of origin, see Moving the Origin of an
Element on page 121.
To flip elements vertically
1. Select one or more elements.
2. On the Arrange menu, point to Transform, and then click Flip Vertical. The selected elements are
flipped vertically on their horizontal axis.

To flip elements horizontally

1. Select one or more elements.
2. On the Arrange menu, point to Transform, and then click Flip Horizontal. The selected elements
are flipped horizontally on their vertical axis.

Locking and Unlocking Elements

When you lock elements, they cannot be:
 Moved.
 Resized.
 Rotated.
 Aligned.
 Flipped.
You also cannot change the point of origin in locked elements. To enable these functions again, you
must unlock the elements.

131
Creating and Managing Industrial Graphics User Guide Working with Graphic Elements

To lock elements
1. Select all elements that you want to lock.
2. Do one of the following:
o On the Arrange menu, click Lock.
o In the Properties Editor, set the Locked property to True.
The selected elements appear with lock icons at their handles.
To unlock elements
1. Select all elements that you want to unlock.
2. Do one of the following:
o On the Arrange menu, click Unlock.
o In the Properties Editor, set the Locked property to False.
The lock icons disappear from the handles of the selected elements.

Making Changes Using Undo and Redo

Use the Undo function to reverse an editing change you made to a graphic element in the Industrial
Graphic Editor. After you undo a change, you can also restore the change by using the Redo function.
The Undo and Redo functions appear as icons on the Indus trial Graphic Editor's Edit menu.

You can undo one single change, or any number of changes t hat you have previously made. You can
also redo any number of changes. These can be selected from a list.
To undo a single change
 Do one of the following:
 Press Ctrl + Z.
 On the Edit menu, click Undo.
To redo a single change
 Do one of the following:
 Press Ctrl + Y.
 On the Edit menu, click Redo.
To undo a specified number of previous changes
1. On the toolbar, click the Undo icon. The Undo list appears with one or more descriptions of what
changes were made.

2. Select a change from the list or click the bottom list entry to undo all changes. The changes up to and
including the selected item are undone.

132
Working with Graphic Elements Creating and Managing Industrial Graphics User Guide

To redo a specified number of previously undone changes

1. On the toolbar, click the Redo icon. The Redo list appears with a description of what the undone
changes were.
2. Select a the change from the list or click the bottom list entry to redo all changes. The changes down
to and including the selected item are redone.

Working with Groups of Elements

You can group together multiple elements. This is useful to bind certain element together so that they are
not inadvertently moved. The group is treated as a new element.
You can:
 Create a group from one or more elements.
 Ungroup the elements without losing their original configuration information.
 Add more elements to an existing group.
 Remove elements from a group.
 Edit the elements of a group without having to ungroup them.

Creating a Group of Elements

After you create elements, you can group them. Grouping elements lets you manage the elements as
one unit.
Groups are assigned default names when you create them, such as Group1, Group2, and so on. After
you create a group, you can rename it.
Groups can have properties that are different than the properties of the elements.
To create a group
1. Select the elements you want as part of the new group.
2. On the Arrange menu, point to Grouping, and then click Group. The elements are combined into a
group. The group is listed in the Elements List.
3. Rename the group as required. To do this:
a. In the Elements List, click the group name and click again. The group name is in edit mode.
b. Type a new name and click Enter. The group is renamed.
c. You can also rename a group or elements by changing the Name property in the Properties
Editor.

Ungrouping
After you create a group, you can ungroup it if you no longer want it.
If the group included elements and other groups, when you ungroup, the original elements and groups
again exist as independent items. To ungroup any subgroups, you must select each one and ungroup it
separately.
If you ungroup a set of elements and elements already exist with the names of the grouped elements,
then the newly ungrouped elements are renamed.
To ungroup
1. Select the groups you want to ungroup.

133
Creating and Managing Industrial Graphics User Guide Working with Graphic Elements

2. On the Arrange menu, point to Grouping, and then click Ungroup. The groups is converted to the
original elements. The group name is removed from the Elements List and the element names
appear.

Adding Elements to Existing Groups

After you create a group, you can add elements or other groups to an existing group.
For example, you can combine a group that represents a valve with anot her group that represents a tank
to create a new group that can be called a tank unit.
You can add:
 Elements to groups.
 Groups to the primary selected group.
To add elements to an existing group
 On the canvas, select the group and also elements and groups that you want to add.
 Right -click a selected element or on the group, point to Grouping, and then click Add to Group. The
selected elements are added to the group.

Note: You can also add elements to existing groups by using the Elements List in similar way.

Removing Elements from Groups

After you create a group, you can remove elements from the group. This lets you remove one or more
elements you no longer want in that group.
Removing elements from the group removes them from the canvas. It also removes any scripts or
animations you added to the element.
To remove an element from a group
1. On the canvas, select the group with the elements that you want to remove.
2. Click the group again to enter inline editing mode.
3. Select the elements that you want to remove from the group.
4. Right -click a selected elements, point to Grouping, and then click Remove from Group. The
selected elements are removed from the group.

Note: You can also remove elements from existing groups by using the Elements List in similar way.

Editing Components within a Group

You can edit components within a group without having to dissolve the group. Do this by:
 Selecting the element in Elements List.
 Using the Edit Group command on the shortcut menu.
 Slowly double-clicking to enter inline editing mode.
To edit components within a group by using the Elements List
1. In the Elements List, expand the group that contains the element that you want to edit.
2. Select the element that you want to edit. The element appears selected in the group and the group is
outlined with a diagonal pattern.
3. Edit the element with the Properties Editor, by mouse or by menu according to your requirements.

134
Working with Graphic Elements Creating and Managing Industrial Graphics User Guide

4. Click outside the group.

To edit components within a group by using the Edit Group command
1. On the canvas, select the group that you want to edit.
2. On the menu Edit, click Edit Group ‘GroupName’. The group is outlined with a diagonal pattern.
3. Select the element that you want to edit.
4. Edit the element with the Properties Editor, by mouse, by menu or pop -up menu according to your
requirements.
5. Click outside the group.

Note: If you move the position of an element in a group outside the group, the group size is aut omatically
changed to incorporate the new position of the element.

Using Path Graphics

You can join a set of open elements, such as lines, to create a new closed element. The new closed
element is called a path graphic.
You can:
 Create a path graphic by joining open elements.
 Break the path graphic into its elements.
 Edit the path graphic in its entirety or by editing its elements.
 Add new elements to the path graphic.
 Remove elements from the path graphic.
You can view a path graphic in two modes:
 Element mode shows you the individual elements contained in the path graphic and determine it s
shape. Elements that make up the path graphic are shown as blue lines. The points where the
elements are connected are shown as grey lines.
 Path mode shows you the path graphic in its final rendering, including fill styles and lines styles.
When you are in inline editing mode, you can switch between both modes by pressing the space bar.
This lets you preview the path graphic without leaving the inline editing mode.

Creating a Path Graphic

You can create a pat h graphic from one or more open elements such as lines, polylines, curves, and
arcs.
The path graphic is created according to the start and end points and the z-order of the open elements
that create it.

135
Creating and Managing Industrial Graphics User Guide Working with Graphic Elements

For example, if you draw a line from point A to point B, then an arc from point C to point D, and then join
these elements in a path graphic, the path graphic is described by a straight edge from points A to B, a
straight edge from points B to C, a curved edge from points C to D, and closed by a straight edge from
points D to A.

Note: If the Path Graphic doesn’t appear as you expected after you creat e it, then you can swap the end
points or change the z-order of one or more elements. For more information, see S wapping the End
Points of an Element in a Path Graphic on page 138 and Changing the Z-order of an Element in a Path
Graphic on page 139.

To create a path graphic

1. Select one or more open elements.
2. On the Arrange menu, point to Path, and then click Combine. A new path graphic is created from
the selected open elements.

Breaking the Path of a Path Graphic

You can break the path of a path graphic so that it is broken into its individual open elements. When you
do so, the path graphic loses its unique properties such as fill style and line style.
To break the path of a path graphic
1. Select one or more path graphics.
2. On the Arrange menu, point to Path, and then click Break.

Changing a Path Graphic

You can edit an existing path graphic on the canvas by accessing the individual elements of which it
consists. For each individual element, you can:
 Move.
 Rotate.
 Change size.
 Change start and sweep angles if the elements are arcs.
 Change control points if the elements are curves or polylines.
 Swap the end points of an element in a path graphic.
 Change the z-order or the elements in a path graphic.
The path graphic is updated while you edit the individual elements.

136
Working with Graphic Elements Creating and Managing Industrial Graphics User Guide

Moving Elements in a Path Graphic

You can move elements in a path graphic. If you move an element outside of the path graphic boundary,
the boundary is redrawn to include the moved element.
To move an element within a path graphic
1. Select the path graphic you want to edit.
2. Do one of the following:
a. On the Edit menu, click Edit Path.
b. Slowly double-click the path graphic.
The path graphic appears in element mode.
3. Select the individual element within the pat h graphic you want to move. You can also do this by
selecting the element in the Elements List.
4. Click a solid part of the element and drag it to the new position. The el ement is moved.
5. Click outside the pat h graphic on the canvas. The path graphic is shown in path mode.

Resizing Elements in a Path Graphic

You can resize elements in a path graphics. If you resize an element outside of the pat h graphic
boundary, the boundary is redrawn to include the resized element.
To resize an element within a path graphic
1. Select the path graphic you want to edit.
2. Do one of the following:
a. On the Edit menu, click Edit Path.
b. Slowly double-click the path graphic.
The path graphic appears in element mode.
3. Select the individual element within the pat h graphic you want to resize. You can also do this by
selecting the element in the Elements List.
4. Click and drag any of the resize handles of the selected element. The element is resized.
5. Click outside the pat h graphic on the canvas. The path graphic is shown in path mode.

Editing Start and Sweep Angles of Elements in a Path Graphic

If y our path graphic contains arcs, you can edit the start and s weep angles of these elements. If changing
the angle of an element causes it to overlap the path graphic boundary, the boundary is redrawn to
include the changed element.
To edit start or sweep angle of an element within a path graphic
1. Select the path graphic you want to edit.
2. Do one of the following:
a. On the Edit menu, click Edit Path.
b. Slowly double-click the path graphic.
The path graphic appears in element mode.
3. Select the individual element within the path graphic for which you want to change the start or sweep
angle. You can also do this by selecting the element in the Elements List.

137
Creating and Managing Industrial Graphics User Guide Working with Graphic Elements

4. Click the element again. The element appears in edit mode with its start angle and sweep angle.
5. Click outside the pat h graphic on the canvas. The path graphic is shown in p ath mode.

Editing Element Control Points in a Path Graphic

If your path graphic contains curves or polylines, you can edit the control points of thes e elements. If
changing the cont rol points of the element causes it to overlap the path gr aphic boundary, the boundary
is redrawn to include the changed element.
To edit control points of an element within a path graphic
1. Select the path graphic you want to edit.
2. Do one of the following:
a. On the Edit menu, click Edit Path.
b. Slowly double-click the path graphic.
The path graphic appears in element mode.
3. Select the curve or polyline element within the path graphic for which you want to change the control
points. You can also do this by selecting the element in the Elements List.
4. Click the element again. The element appears in edit mode with its control points.
5. Drag any of the cont rol points to shape the curve or polyline.
6. Click outside the pat h graphic on the canvas. The path graphic is shown in path mode.

Swapping the End Points of an Element in a Path Graphic

The path graphic is created by following the direction in which you draw its elements.
If a path graphic does not appear as expected, this can be caused by drawing an element in a different
direction as intended. You can see this if one of the path graphic edges appears crossed over when
connecting to the previous and next element.

You can fix this by swapping the end points of the element where this appears.
To swap the end points of an element within a path graphic
1. Select the path graphic you want to edit.
2. Do one of the following:
a. On the Edit menu, click Edit Path.
b. Slowly double-click the path graphic.

138
Working with Graphic Elements Creating and Managing Industrial Graphics User Guide

The path graphic appears in element mode.

3. Select the individual element within the path graphic for which you want to swap the end points. You
can also do this by selecting the element in the Elements List.
4. Right -click that element and select Path, Swap End Points on the context menu. The end points of
the selected element are swapped and the path graphic is updated accordingly.
5. Click outside the pat h graphic on the canvas. The path graphic is shown in path mode.

Changing the Z-order of an Element in a Path Graphic

If a path graphic does not appear as expected, this can be caused by drawing an element in a different
z-order as intended. You can see this if one of the path graphic edges jumps across the path graphic
area.

You can fix this by changing the z-order of the element where this appears.

Note: The z-order of elements in a path graphic is only applicable within the path graphic.

To change the z-order of an element within a path graphic

1. Select the path graphic you want to edit.
2. Do one of the following:
a. On the Edit menu, click Edit Path.
b. Slowly double-click the path graphic.
The path graphic appears in element mode.
3. Select the individual element within the pat h graphic for which you want to change the z -order. You
can also do this by selecting the element in the Elements List.

Note: You can see the elements in their z-order in the Elements List. Alternatively, you can select one
from the Elements List and change its z-order.

4. On the Arrange menu, point to Order, and then click:

o Send To Back to send the element to the back of the set of elements of the path graphic.
o Send Backward to send the element one order backward.
o Sent To Front to send the element to the front of the set of elements of the path graphic.
o Send Forward to send the element one order forward.
5. Click outside the pat h graphic on the canvas. The path graphic is shown in path mode.

139
Creating and Managing Industrial Graphics User Guide Working with Graphic Elements

Adding Elements to an Existing Path Graphic

You can easily add elements to an existing pat h graphic. You can add:
 New elements, which you draw while the path graphic is in edit mode.
 Existing elements, which are already on the canvas.
You can only add open elements such as lines, polylines, curves, and arcs to an existing path graphic.
You can only set the origin of a new element within the frame of the existing path graphic. If you click
anywhere outside the path graphic, the edit mode is exited and the element you are drawing is a new
element.
To add new elements to an existing path graphic
1. Select the path graphic to which you want to add a new element.
2. On the Edit menu, click Edit Path. The path graphic appears in element mode.
3. Select the new element you want to add from the Tools panel.
4. Draw the element as you would normally. While you are drawing the element, the path graphic is
updated.

To add existing elements to an existing path graphic

1. Select the path graphic and all elements that you want to add to the path graphic.
2. Right -click a solid part of a selected element, point to Path, and then click Add To Path. The
selected elements are added to the selected path graphic.

Removing Elements from a Path Graphic

You can remove individual elements from a path graphic. The elements are not deleted, but appear
outside the path graphic.
You cannot remove the last element of a path graphic.
To remove elements from a path graphic
1. Select the path graphic from which you want to delete individual elements.
2. On the Edit menu, click Edit Path. The path graphic appears in element mode.

140
Working with Graphic Elements Creating and Managing Industrial Graphics User Guide

3. Shift + click one or more elements to remove.

Note: You can also select the elements to remove from the Elements List by holding CTRL key
during the selection.

4. Right -click any selected element, point to Path, and then click Remove From Path. The selected
element is removed from the path graphic and the path graphic is updated accordingly.

141
 Creating and Managing Industrial Graphics User Guide

C HAPTER 6
Editing Common Properties of Elements
and Graphics
Editing the Name of an Element
Some properties are common to most types of elements, such as fill, line styles, and visibility. You can:
 Edit the name of an element.
 Edit the fill properties of an element.
 Edit the line properties of an element.
 Edit the text properties of an element.
 Set the style.
 Set the transparency level of an element.
 Tweaking colors and style for an element’s gradient style.
 Enable and disable elements for run-time interaction.
 Change the visibility of an element.
 Change the tab order of an element.
 Use the Format Painter to format elements.
 Edit the general properties of a graphic.
The name of an element uniquely identifies the element on the drawing surface.
When you draw a new element on the drawing surface, it is assigned a default name. You can then
change its name in the Properties Editor or the Elements List.
Element names are cas e-insensitive and unique within the s ame element hierarchy. It is possible to have
two elements with the same name if one is, for ex ample, in a group and the other outside that group.
To change an element’s name in the Properties Editor
1. Select the element on the drawing surface.
2. In the Properties Editor, click the value for the Name box.
3. Type a new name and click Enter.
To change an element’s name in the Elements List
1. Select the element in the Elements List.
2. Click the element in the Elements List again.
3. Type a new name and click Enter.

Editing the Fill Properties of an Element

You can configure the following fill properties for an element:

143
Creating and Managing Industrial Graphics User Guide Editing Common Properties of Elements and Graphics

 Fill style as solid color, gradient, pattern or texture

 Unfilled style
 Fill orient ation, relative to the element or to the screen
 Fill behavior, which determines i f the object is to be filled horizontally, vertically, or both
 Horiz ontal fill direction
 Vertical fill direction
 Percent of horizontal fill
 Percent of vertical fill

Setting Fill Style

You can configure the fill style of one or more elements. You can do this to:
 Selected elements on the toolbar.
 Style properties in the Properties Editor.
 Nested style properties, such as just one color of a multi-colored gradient.
To configure the fill style of an element with the toolbar
1. Select one or more elements you want to configure.
2. On the toolbar, click the down arrow to the right of the Fill Color icon. The fill style list appears.
3. Configure the fill color. Do any of the following:
o Click No Fill to configure an empty element.
o Click a predefined solid color in the display.
o Click More Solid Colors to open the style selection dialog box and select a solid color.
o Click Color Picker to select a color from the screen.
4. Configure the fill gradient, pattern, or texture. Do any of the following:
o Click a predefined gradient.
o Click More Gradients to open the style selection dialog box and configure a gradient.
o Click Patterns to open the style selection dialog box and select a pattern.
o Click Textures to open the style selection dialog box and select a texture.
For more information about the style selection dialog box, see Setting Style on page 151.
To configure the fill style by setting style properties
1. Select one or more elements.
2. In the Properties Editor, locate the FillStyle property.
3. Click the browse button to open the style selection dialog box. For more information about the style
selection dialog box, see Setting Style on page 151.
To configure the fill style by setting gradient color style properties
1. Select one or more elements with gradient fill style.
2. In the Properties Editor, locate the Color1, Color2, and Color3 properties.
3. Click the browse button for any of these to set the selected gradient color from the style selection
dialog box. For more information, see Setting Style on page 151.

144
Editing Common Properties of Elements and Graphics Creating and Managing Industrial Graphics User Guide

Setting Unfilled Style

You can configure an element’s unfilled style. The unfilled style of an element determin es the element’s
unfilled portion at design time and run time.
To configure the unfilled style of an element
1. Select one or more elements.
2. In the Properties Editor, click UnfilledStyle.
3. Click the browse button in the UnfilledStyle line. The style selection dialog box appears.
4. Select a solid color, gradient, pattern, or texture. For more information about the style selection
dialog box, see Setting Style on page 151.
5. Click OK.

Setting Fill Orientation

You can configure an element’s fill orientation in the Properties Editor. The fill orientation property
determines if the fill style is relative to the screen or element.
 If relative to the screen, the gradient, pattern, or texture does not rotate with the element.
 If relative to the element, the gradient, pattern, or texture rotates with the element.
To configure an element’s fill orientation
1. Select one or more elements you want to configure.
2. In the Properties Editor, click FillOrientation.
3. From the list in the same line, click RelativeToScreen or RelativeToGraphic.

Setting Fill Behavior

You can set the fill behavior of an element. The fill can be:
 Horiz ontal.
 Vertical.
 Both horizontal and vertical.
To set an element’s fill behavior
1. Select one or more elements you want to configure.
2. In the Properties Editor, set the property FillBehavior to one of the following:
o Horizontal
o Vertical
o Both

Setting Horizontal Fill Direction and Percentage

An element can fill:
 From left to right.
 From right to left.
You can also set the amount you want the element to be horizont ally filled by as a percentage.

145
Creating and Managing Industrial Graphics User Guide Editing Common Properties of Elements and Graphics

To set an element’s horizontal fill direction and percentage

1. Select one or more elements you want to configure.
2. In the Properties Editor, set the HorizontalDirection property to:
o Right to fill from left to right.
o Left to fill from right to left.
3. For the Horiz ontalPercentFill property, type a perc entage (0 - 100) in the value box.

Setting Vertical Fill Direction and Percentage

An element can fill:
 From bottom to top.
 From top to bottom.
You can also set the amount you want the element to be vertically filled by as a percentage.
To set an element’s vertical fill direction and percentage
1. Select one or more elements you want to configure.
2. In the Properties Editor, set the VerticalDirection property to:
o Top to fill from bottom to top.
o Bottom to fill from top to bottom.
3. For the VerticalPercentFill property, type a percentage (0 - 100) in the value box.

Editing the Line Properties of an Element

You can set the line properties for any element that contains lines, such as:
 Lines and polylines.
 Rectangles, rounded rectangles, and ellips es.
 Curves, closed curves, and polygons.
 Arcs, pies, and chords.
 Text boxes.
You can set the:
 Start and end points for lines, arcs, and H/V lines.
 Line weight, which is the thickness of a line.
 Line pattern, which is the continuity of a line. For example, a continuous line, a dotted line, a dashed
line, or a combination.
 Line style, which is the fill style of a line.
 Shape and size of the end points of a line. For more information, see Setting Line End S hape and
Size on page 178.

Note: You can also set the element’s line properties in the Line Format properties group in the
Properties Editor.

Setting Start or End Points of a Line

After you draw a line or H/V line, you can change its start or end points in the Properties Editor.

146
Editing Common Properties of Elements and Graphics Creating and Managing Industrial Graphics User Guide

To set the line or H/V line start or end point

1. Select a line or H/V line.
2. In the Properties Editor, type coordinate values X, Y for the Start or End properties.

Setting the Line Weight

You can set a line weight from 0 pixels to 255 pixels for any element that contains lines. You can set the
line weight using the Format menu, the toolbar, or the LineWeight property in the Properties Editor.

Note: Large line weight settings can cause unexpected behavior, especially with curves and line end
styles.

To set the line weight using the Format menu

1. Select one or more elements.
2. On the Format menu, click Line Weight.
3. To use a predefined line weight, select it from the list.
4. To use another line weight, click More Line Options. The Select Line Options dialog box appears.
In the Weight box, type a new line weight from 0 to 255 and then click OK.

Setting the Line Pattern

You can set the line pattern for any element that contains lines. The line pattern specifies the continuity of
a line (continuous, dotted, dashed) and not its fill properties.
To set the line pattern
1. Select one or more elements.
2. On the Format menu, click Line Pattern.
3. To use a predefined line pattern, select it from the list.
4. To use another line pattern, click More Line Options. The Select Line Options dialog box appears.
In the Pattern list, select a pattern, and then click OK.

Note: You can also set the line pattern by changing the LinePattern property in the Properties Editor.

Setting the Line Style

You can set the line style for any element that contains lines. Setting the line style is similar to setting the
fill style. You can also set the solid color, gradient, pattern, and texture for a line.
To set the line style
1. Select one or more elements.
2. On the toolbar, click the Line Color icon. The line style list appears.
3. Configure the line color. Do any of the following:
o Click a predefined solid color in the display.
o Click More Solid Colors to open the style selection dialog box and select a solid color.
o Click Color Picker to select a color from the screen.
4. Configure the line gradient, pattern, or texture. Do any of the following:
o Click a predefined gradient.
o Click More Gradients to open the style selection dialog box and configure a gradient.

147
Creating and Managing Industrial Graphics User Guide Editing Common Properties of Elements and Graphics

o Click Patterns to open the style selection dialog box and select a pattern.
o Click Textures to open the style selection dialog box and select a texture.
For more information about the style selection dialog box, see Setting Style on page 151.

Note: You can also set the element’s line style in the Properties Editor. If you do this, you can configure
the solid color, gradient, pattern, or texture in the style select ion dialog box. For more information, see
Setting Style on page 151.

Setting the Text Properties of an Element

You can set the following for text, text box, and button elements:
 The text that appears
 The format in which the text appears
 The font of the text
 The alignment of the text
 The text style
You can also substitute strings in text, text box, and button elements.

Setting the Displayed Text

You can set the text of a text element, text box, or button in the canvas or by changing the Text property
in the Properties Editor.
To set the text to display
1. Select the text element, text box or button on the canvas.
2. On the Edit menu, click Edit Text. The selected element appears in edit mode.
3. Type a text string and press Enter.

Setting the Text Display Format

You can configure how values are shown for the text in a text box or button. For example, as a rounded
float with the format #.###.
You can format the text display for the:
 Text element and the button element in the same way as in the InTouch HMI or with the TextFormat
property in the Properties Editor.
 Text box element only with the TextFormat property.
To set the text display format
1. Select a text element, text box, or button.
2. In the Properties Editor, type a format for the TextFormat property.

Setting the Text Font

You can change the font style and font size of a text using:
 The Format menu.
 The Font property in the Properties Editor.
 Lists on the toolbar.

148
Editing Common Properties of Elements and Graphics Creating and Managing Industrial Graphics User Guide

To set the text font, font style, and size

1. Select a text element, a text box, or a button element on the canvas.
2. On the Format menu, click Fonts. The Font dialog box appears.
3. Set the font, font style, size, and effects.
4. Click OK.

Setting the Text Color

You can set the text color as a solid color, a gradient, a pattern, or a texture.

Note: You can also change the text color in the Propertie s Editor with the TextColor property.

To set the text color

1. Select a text element, a text box, or a button element on the canvas.
2. Click the Text Color icon.
3. Configure the text color. Do any of the following:
o Click a predefined solid color in the display.
o Click More Solid Colors to open the style selection dialog box and select a solid color.
o Click Color Picker to select a color from the screen.
4. Configure the text gradient, pattern, or texture. Do any of the following:
o Click a predefined gradient.
o Click More Gradients to open the style selection dialog box and configure a gradient.
o Click Patterns to open the style selection dialog box and select a pattern.
o Click Textures to open the style selection dialog box and select a texture.
For more information about the style selection dialog box, see Setting Style on page 151.

Setting the Text Alignment

You can change the horizontal and vertical positioning of text within a text box element or button
element.
You can also change the positioning for a text element. If the text is modified at design time or run time,
the alignment sets how the element boundary changes to fit around the modified text.

Note: You can also set the text alignment in the Properties Editor by setting the Alignment property.

If the element is a text box or a button, then the text is aligned accordingly.
If the element is a text element and you then modify the text at design time or run time, the text is
anchored to the point of alignment.
 Text right alignments move additional text furt her over to the left.
 Text left alignments move additional text to the right.
 Changes in font size leave the point of alignment unchanged and modify the frame accordingly.
To set the text alignment
1. Select a text element, text box element or button element on the canvas.
2. On the Format menu, point to Text Alignment, and then click the appropriate command:

149
Creating and Managing Industrial Graphics User Guide Editing Common Properties of Elements and Graphics

Click thi s command To

Top Left Align the text at the top left frame handle.

Top Center Align the text at the top middle frame handle.

Top Right Align the text at the top right frame handle.

Middle Left Align the text at the middle left frame handle.

Middle Center Align the text in the middle of the element.

Middle Right Align the text at the middle right frame handle.

Bottom Left Align the text at the bottom left frame handle.

Bottom Center Align the text at the bottom center frame

handle.

Bottom Right Align the text at the bottom right frame handle.

Substituting Strings
You can search and replace strings of any element that have the Text property on your canvas. You can
use the basic mode to replace strings in a list.
You can also use advanced functions, such as find and replace, ignore, case-sensitivity, and wildcards.
You cannot substitute static strings that are used in an Radio Button Group, List Box or Combo Box.
If you substitute strings for a text element in an embedded graphic, that text element is not updat ed if you
change the source graphic's text. For example, an embedded graphic contains a text graphic with the
string "SomeTextHere". You substitute "SomeTextHere" with "MyText". You then changes the source
graphic text from "SomeTextHere" to "NewText". The text in the embedded graphic will still show
"MyText".
To substitute strings in a graphic by using the list
1. Select one or more elements.
2. Do one of the following:
o Press Ctrl + L.
o On the Special menu, click Substitute Strings.
The Substitute Strings dialog box appears.
3. In the New column, type the text to be replaced.
4. Click OK.

150
Editing Common Properties of Elements and Graphics Creating and Managing Industrial Graphics User Guide

To substitute strings in a graphic by using advanced functions

1. Select one or more elements.
2. Do one of the following:
o Press Ctrl + E.
o On the Special menu, click Substitute String s.
The Substitute Strings dialog box appears.
3. Click Find & Replace. The dialog box expands and shows advanced options.
4. Configure the search strings. Do any of the following:
o To find specific strings in the list, type a string in the Find What box and click Find Next to find
the next string.
o To replace a selected found string with another string, type a string in the Replace with box and
click Replace.
o To replace multiple strings, type values in the Find What and Replace with boxes and click
Replace all.
5. Configure the search options. Do any of the following:
o If you want the searc h to be case-sensitive, click Match Case.
o To find only entire words that match your search string, click Match Whole Word Only.
o To use wildc ards, click Use Wildcards. Use an asterisk (*) to search for any sequence of
characters. Use a question mark (?) to search for strings with one variable character.
6. Click OK.

Setting Style
You can set the fill, line, and text style from various places in the Indus trial Graphic Editor using the style
selection dialog box. The style selection dialog box is common to any element for which you can set a
solid color, gradient, pattern, or texture. You can also set the transparency of the style.
Because you can open the style selection dialog box from different places in the Industrial Graphic
Editor, the dialog box header can be different.
Also, not all tabs may be available. For example, for setting one color of a gradient in the Properties
Editor, you can only select a solid color from the style selection dialog box.

Note: For information about working with legacy graphics, see Loading Graphics with Deprecated
Features on page 160.

Setting a Solid Color

You can set a solid color using the Solid Color tab in the style selection dialog box. You can set a solid
color from the:
 Standard palette.
 Color disc and bar.
 Value input boxes.
 Color picker.
 Custom palette.
You can also:

151
Creating and Managing Industrial Graphics User Guide Editing Common Properties of Elements and Graphics

 Add the new color to the custom palette.

 Remove a color from the custom palette.
 Save the custom palette.
 Load a custom palette.

Setting a Solid Color from the Standard Palette

You can set a solid color from the standard palette using the Solid Color tab in the style selection dialog
box. The standard palette is a set of 48 predefined colors you can use to quickly select a solid color.
To set a solid color from the Standard Palette
1. In the style selection dialog box, click the Solid Color tab.
2. In the Standard Palette area, click a color. The new color appears in the New color box on the right
of the dialog box.
3. Click OK.

Setting a Solid Color from the Color Disc and Bar

You can set a solid color using the color disc and bar on the Solid Color tab in the style selection dialog
box. The color disc and bar let you graphically select the color and the luminanc e (brightness).

To set a solid color from the color disc and bar

1. In the style selection dialog box, click the Solid Color tab.
2. Click on the color disk to select a color. The bar is updated and shows the selected color in varying
degrees of luminanc e (brightness).
3. Click on the bar to select a luminance (brightness). The new color appears in the New color box on
the right of the dialog box.
4. Click OK.

Setting a Solid Color with the Value Input Boxes

You can set a solid color by typing values that define the color, such as:
 Red component (0-255).
 Green component (0-255).
 Blue component (0-255).
 Hue (0-255).
 Saturation (0-255).
 Luminance (0-255).

152
Editing Common Properties of Elements and Graphics Creating and Managing Industrial Graphics User Guide

To set a solid color with the value input boxes

1. In the style selection dialog box, click the Solid Color tab.
2. In the Red, Green, Blue, Hue, Sat. and Lum. boxes, type respective values. The resulting color
appears in the New color box on the right of the dialog box and also on the color wheel and bar.
3. Click OK.

Setting a Solid Color with the Color Picker

You can set a s olid color by using the color picker on the Solid Color tab in the style selection dialog box.
The color picker lets you select a color from anywhere on the screen, even outside the IDE application.
To set a solid color with the color picker
1. In the style selection dialog box, click the Solid Color tab.
2. Click the Color Picker button. The color picker point er appears.
3. Select a color from anywhere on the screen by moving the mouse. As you move the mouse, the new
color appears in the New color box on the right of the dialog box.
4. Click the mouse to complet e the color selection.
5. Click OK.

Setting a Solid Color from the Custom Palette

You can set a solid color from the custom palette on the Solid Color tab in the style selection dialog box.
The custom palette is a set of colors that you want to frequently use. You can save the custom palette to
a .pal file or load a custom palette from a .pal file.
To use colors from the custom palette, you must first add them. For more information, see Adding and
Removing Colors in the Custom Palette on page 153.
To set a solid color from the custom palette
1. In the style selection dialog box, click the Solid Color tab.
2. In the Custom Palette area, select a color. The new color appears in the New color box on the right
of the dialog box.
3. Click OK.

Adding and Removing Colors in the Custom Palette

You can add up to 36 solid colors to the custom palette. You can also remove any colors from the c ustom
palette.
You cannot add a color that is already in the custom palette.
To add a solid color to the custom palette
1. In the style selection dialog box, click the Solid Color tab.
2. Add the color. Do any of the following:
o Select a solid color from the custom palette.
o Select a solid color from the color disc and bar.
o Type values for red, green, blue, hue, saturation, and luminance.
o Select a solid color with the color picker.
The new solid color appears in the New color box on the right of the dialog box.

153
Creating and Managing Industrial Graphics User Guide Editing Common Properties of Elements and Graphics

3. Click the add button above Custom Palette. The solid color is added to the Custom Palette area.
To remove a solid color from the custom palette
1. In the style selection dialog box, click the Solid Color tab.
2. In the Custom Palette area, select the solid color you want to remove.
3. Click the delete button above Custom Palette. The solid color is removed from the custom palette.

Saving and Loading the Custom Palette

You can save the current custom palette or load a p reviously saved custom palette. The custom palette
is loaded from or saved to a Windows Palette file (.pal).
After you save or load a custom palette, the .pal file is not connected to the graphic in any way.
To save a custom palette
1. In the style selection dialog box, click the Solid Color.
2. Click the Save Palette button. The Save Palette dialog box appears.
3. Browse to the location where you want to save the custom palette, type a name, and then click Save.
The custom palette is saved as a palette file.
To load a custom palette
1. In the style selection dialog box, click the Solid Color tab.
2. Click the Load Palette button.
3. If you currently have colors in the custom palette, a message appears. Click Ye s to continue and
overwrite the current colors in the custom palette.
4. In the Load Palette dialog box, browse to the location of the palette file, select it, and then click
Open. The custom palette is loaded from the selected file.

Setting a Gradient
You can configure gradients by the:
 Number of colors - 1, 2 or 3.
 Direction - horizontal, vertical, radial, or customized.
 Variant - depending on your selection for the number of colors and direction.
 Color distribution shape - triangular with options to configure the center and falloff.
 Focus scales - width and height.
You set a gradient on the Gradient tab in the style selection dialog box.

Setting the Number of Colors for a Gradient

You can set the number of colors you want to use in a gradient.
 If you use one color, the gradient is between this solid color and a specified shade of black to white.
 If you use two colors, the gradient is between these two colors.
 If you use three colors, the gradient is between these three colors in sequence.
To set a gradient using one color
1. In the style selection dialog box, click the Gradient tab.

154
Editing Common Properties of Elements and Graphics Creating and Managing Industrial Graphics User Guide

2. In the Colors area, click One. A color selection box and a slider for the dark to light selection
appears.
3. Click the color selection box to open the Select Solid Color 1 dialog box. Select a solid color and
click OK. For more information about this dialog box, see Setting a Solid Color on page 151.
4. Move the slider between Dark and Light. The new gradient appears in the New color box on the
right of the dialog box.
5. Click OK.
To set a gradient using two colors
1. In the style selection dialog box, click the Gradient tab.
2. In the Colors area, click Two. Two color selection boxes appear.
3. Click the Color 1 or Color 2 color field to select a color from the style selection dialog box. For more
information about this dialog box, see Setting a Solid Color on page 151.
The new gradient appears in the New color box on the right of the dialog b ox.
4. Click OK.
To set a gradient for three colors
1. In the style selection dialog box, click the Gradient tab.
2. In the Colors area, select Three. Three color selection boxes appear.
3. Click the Color 1, Color 2 or Color 3 color field to select a color from the style selection dialog box.
For more information about this dialog box, see Setting a Solid Color on page 151.
The new gradient appears in the New color box on the right of the dialog box.
4. Click OK.

Setting the Direction of the Gradient

You can configure the direction of the gradient to be one of the following:
 Horiz ontal - from side to side
 Vertical - up and down
 Radial - circular from the center outwards
 Custom angle - across the element at a specified angle
To set a horizontal gradient
1. In the style selection dialog box, click the Gradient tab.
2. In the Direction area, click Horizontal. The new gradient appears in the New color box on the right
of the dialog box.
3. Click OK.
To set a vertical gradient
1. In the style selection dialog box, click the Gradient tab.
2. In the Direction area, click Vertical. The new gradient appears in the New color box on the right of
the dialog box.
3. Click OK.
To set a radial gradient
1. In the style selection dialog box, click the Gradient tab.

155
Creating and Managing Industrial Graphics User Guide Editing Common Properties of Elements and Graphics

2. In the Direction area, click Radial.

3. Set the center location. Do any of the following:
o In the Horizontal and Vertical boxes, type values for the center location.
o Click and drag the center point in the adjacent box.
The new gradient appears in the New color box on the right of the dialog box.
4. Click OK.
To set the custom angle of a gradient
1. In the style selection dialog box, click the Gradient tab.
2. In the Direction area, click Custom.
3. Set the angle. Do any of the following:
o In the Angle text box, type a value for the angle.
o Click and drag the angle bar in the adjacent box.
The new gradient appears in the New color box on the right of the dialog box.
4. Click OK.

Changing the Variant of a Gradient

You can change the variant of a gradient. The variants are alternate gradients with the same colors you
can quickly select.
To change the variant of a gradient
1. In the style selection dialog box, click the Gradient tab.
2. In the Variants area, click on a variant gradient.
The new gradient appears in the New color box on the right of the dialog box.
3. Click OK.

Setting the Color Distribution Shape

You can configure the distribution shape of a triangle gradient with one or two colors.
 In a triangular distribution, the gradient from one color to the next rises and falls at the same rate.
You can also configure the peak and the falloff.
 The peak specifies the offset of the gradient if it has one or two colors.
 The falloff specifies the amplitude of the gradient if it has one or t wo colors.
Additionally, you can configure the cent er point of a radial gradient if it is defined by three colors.
To use a triangular gradient
1. In the style selection dialog box, click the Gradient tab.
2. In the Color Di stribution Shape area, click Triangular. The new gradient appears in the New color
box on the right of the dialog box.
3. Click OK.
To set the peak of a gradient with one or two colors
1. In the style selection dialog box, click the Gradient tab.
2. In the Color Di stribution Shape area, do one of the following:

156
Editing Common Properties of Elements and Graphics Creating and Managing Industrial Graphics User Guide

o Use the Peak slider to specify the peak.

o In the Peak box, type a value from 0 to 100.
The new gradient appears in the New color box on the right of the dialog box.
3. Click OK.
To set the falloff of a gradient with one or two colors
1. In the style selection dialog box, click the Gradient tab.
2. In the Color Di stribution Shape area, do one of the following:
o Use the Falloff slider to specify the peak.
o In the Falloff box, type a value from 0 to 100.
The new gradient appears in the New color box on the right of the dialog box.
3. Click OK.
To set the center point of a radial gradient with three colors
1. In the style selection dialog box, click the Gradient tab.
2. In the Color Di stribution Shape area, do one of the following:
o Use the Center slider to specify the peak.
o In the Center box, type a value from 0 to 100.
The new gradient appears in the New color box on the right of the dialog box.
3. Click OK.

Setting the Focus Scales of a Gradient

You can set the focus scales of a radial gradient. The focus scales acts as a magnification of the
gradient. You can set the height and width of the focus scales.

Height Width Appearance

0 0

50 50

To set the height and width of the focus scales for a gradient
1. In the style selection dialog box, click the Gradient tab.
2. In the Focus Scales area, do one of the following:
o Move the Height & Width slider to specify the height and width.
o In the text box, type the value for the height and width.
The new gradient appears in the New color box on the right of the dialog box.
3. Click OK.

157
Creating and Managing Industrial Graphics User Guide Editing Common Properties of Elements and Graphics

Setting a Pattern
You can set a pattern for an element. The following table describes the pattern options:

Pattern Options

Horiz ontal Simple, Light, Narrow, Dark, Dashed

Vertical Simple, Light, Narrow, Dark, Dashed

Percent 05, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90

Grid Small, Large, Dotted

Checker Board Small, Large

Diagonals Forward, Backward, Dashed Upward/Downward,

Light/Dark/Wide Upward/Downward

Diamond Dotted, Outlined, Solid

Cross Diagonal

Brick Horiz ontal, Diagonal

Confetti Small, Large

Others Zig Zag, Wave, Weave, Plaid, Divot, Shingle, Trellis,

and Sphere

Patterns consist of the foreground color and the background color that you can change.
To set a pattern
1. In the style selection dialog box, click the Pattern tab.
2. Select a pattern. The new pattern appears in the New color box on the right of the dialog box.
3. If you want to change the foreground color of the pattern, click the Foreground color selection box.
The style selection dialog box appears. Select a solid color and click OK.
4. If you want to change the background color of the pattern, click the Background color selection box.
The style selection dialog box appears. Select a solid color and click OK.
For more information about setting a solid color, see Setting a Solid Color on page 151.
5. Click OK.

Setting a Texture
Textures are images you can use as styles for lines, fills and text. You can stretch the image or tile the
image ac ross the entire element to be filled.
To set a texture
1. In the style selection dialog box, click the Textures tab.
2. Click Select Image. The Open dialog box appears. You can import the following image formats:
.BMP, .GIF, .JPG, .JPEG, .TIF, .TIFF, .PNG, .ICO, .EMF. Animated GIF images are not supported.
3. Browse to and select an image file and click Open. The new pattern appears in the New color box on
the right of the dialog box.
4. Configure the size mode. Do one of the following:

158
Editing Common Properties of Elements and Graphics Creating and Managing Industrial Graphics User Guide

o Click Tile to create a pattern that repeats itself.

o Click Stretch to enlarge (or shrink) the pattern across the selected element.
5. Click OK.

Setting the Style to No Fill

You can set the style to "No Fill". For example if you set the fill style of a rectangle element to No Fill, the
background of the rectangle appears transparent.
To set the No Fill style
1. In the style selection dialog box, click the No Fill tab.
The No Fill style appears as a red cross-through line in the New color box on the right of the dialog
box.
2. Click OK.

Setting the Transparency of a Style

You can set the transparency of a solid color, gradient, pattern, or texture.
To set the transparency of a style
1. Open the style selection dialog box.

2. At the bottom of the dialog box, do one of the following:

o Drag the Transparency slider handle left or right to change the transparency percentage.
o In the Transparency text box, type a percentage value.
The new style appears in the New color box.
3. Click OK.

Setting the Transparency Level of an Element

You can set the transparency level of an element. Levels range from 0 percent (opaque) to 100 percent
(trans parent).
Trans parency of a group of elements behaves in a special way.
To set the transparency level of an element
1. Select one or more elements.
2. On the Format menu, click Transparency.
3. To use a predefined level, select it from the list.
4. To use a different level, click More Transparency Levels. The Select Transparency Level dialog
box appears. Type a transparency level in the Transparency text box or use the slider to select a
transparency level.
5. Click OK.

Note: You can also set the transparency level by changing the Transparency property in the Properties
Editor.

159
Creating and Managing Industrial Graphics User Guide Editing Common Properties of Elements and Graphics

Tweaking the Colors and Transparency of a Gradient

You can easily change the colors and trans parency of an element wit h a gradient style.
For example, you can create pipes with a gradient style of different colors. You can change the pipe
color, but still keep the 3-D appearance.
You do this in the Properties Editor using the Color1, Color2, Color3, and Transparency sub-properties.
To tweak the colors and transparency of a gradient
1. Select the element for which you want to change colors or transparency.
2. In the Properties Editor, locate the appropriate style setting. This can be:
o FillColor
o LineColor
o TextColor
o UnFillColor
3. Click the + icon to expand the property. The Color1, Color2, C olor3, and Transparency
sub-properties are shown.
4. Do one of the following:
o Click the color box of one of the color sub-properties.
o Type a new value for the transparency and click Enter.
5. Click the browse button. The style selection dialog box appears.
6. Select a color from the style selection dialog box and click OK. The solid color is applied to the
selected element.

Loading Graphics with Deprecated Features

In recent versions of Micros oft’s renderin g technologies, certain gradient features have been
deprecated. To accommodate and future proof graphics built using the Industrial Graphic Editor, the
affected features have been removed from the configuration environment. Graphics previously
configured with deprecated feat ures will continue to render as expected.
Deprecat ed gradients are as follows:
 Point Based gradient direction
 Bell gradient shape (1 or 2 color selection)
 Radial gradient direction without locked focus
When working with graphics that ha ve been configured with deprecat ed gradients, the Gradient tab in
the style selection dialog box shows Point Based direction, Bell color distribution, and the Focus Scales
lock option disabled. You can choose an available option to enable other available o ptions, and save
your configuration to update the graphic.

Enabling and Disabling Elements for Run-Time Interaction

You can enable or disable elements so that the run time user cannot use any interaction animations,
such as:
 User input.
 Horiz ontal and vertical sliders.
 Pushbuttons.

160
Editing Common Properties of Elements and Graphics Creating and Managing Industrial Graphics User Guide

 Action scripts.
 Showing and hiding graphics.
Other animations such as horizontal fills and tooltips continue to work as expected.
To enable an element for run-time interaction
1. Select one or more elements you want to enable.
2. In the Properties Editor Runtime Behavior group, set the Enabled property to True.
To disable an element for run-time interaction
1. Select one or more elements you want to disable.
2. In the Properties Editor Runtime Behavior group, set the Enabled property to False.

Changing the Visibility of Elements

You can configure elements to be hidden or shown at run time.
The visibility of an element does not affect its animations. E ven when an element is invisible, its
animations continue to be evaluated.
To configure an element to be shown at run time
1. Select one or more elements you want to have shown at run time.
2. In the Properties Editor Runtime Behavior group, set the Visible property to True.
To configure an element to be hidden at run time
1. Select one or more elements you want to have hidden at run time.
2. In the Properties Editor Runtime Behavior group, set the Visible property to False.

Editing the Tab Order of an Element

You can configure the elements on the canvas so that at run time you can us e the Tab key to put each
element in focus in a specified sequence. This sequence is called the tab order.
By default, when you place elements on the canvas, they have a tab order number of 0. Elements with
the same tab order number are placed into focus by tabbing at run time according to their z -order. This
means they are tabbed through at run time according to their position in the Elements List.
You can override the tab order by assigning a unique index number to the TabOrder property of each
element.

161
Creating and Managing Industrial Graphics User Guide Editing Common Properties of Elements and Graphics

Lower tab order numbers take precedence over higher tab order numbers. You must change this value
to determine the tab order sequence.

You must also make sure that the TabStop property of each element is set to true. When the TabStop
property is set to true, you can use the Tab key at run time to switch to the selected element.
To edit the element’s tab order
1. Select the element for which you want to set the tab order.
2. In the Properties Editor, ensure that the TabStop property is set to True.
3. Type a unique value for the TabOrder property.

Using the Format Painter to Format Elements

You can apply formatting of one element to other elements quickly by using the format painter. You can
apply the format of one element:
 One time to other elements.
 In repetitive mode to other elements.
When you use the format painter, it copies the following formats of the element if applicable to the target
elements:
 Font family, size, and style
 Text style, alignment, and word wrap settings
 Line style, weight, pattern, and ends
 Trans parency
 Fill style, orientation, behavior, horizontal percent fill, and vertical percent fill
 Unfilled style
 Horiz ontal and vertical direction properties
You cannot use the format paint er for:
 The status element
 An element that is part of a path

162
Editing Common Properties of Elements and Graphics Creating and Managing Industrial Graphics User Guide

 Groups of elements
 Elements in different hierarc hy groups
To copy the format of an element one time
1. Select the element with the format you want to copy.
2. On the Edit menu, click Format Painter. The pointer appears as the format painter cursor.
3. Select the element you want to apply the format to. The format is applied to the clicked element.

To copy the format of an element in repetitive mode

1. Select the element with the format you want to copy.
2. On the toolbar, double-click the Format Painter icon. The pointer appears as the format painter
cursor.
3. Click each element you want to apply the format to. The format is applied to the clicked element.
4. Repeat Step 3 for any other elements you want to apply the format to.
5. When you are done, press the Esc key.

Editing the General Properties of a Graphic

You can configure the general properties of a graphic. The general properties determine the overall
appearance and behavior of the graphic. You can:
 Add a meaningful description to your graphic.
 Enable anti-aliasing, or smoothing, for your graphic to improve its appearance. The anti-aliasing filter
essentially blurs the elements slightly at the edges.
 Allow or prevent the opening of more than one graphic or display from a graphic. One example is a
graphic with multiple S how Symbol animations. If this option is enabled, you can open more than one
pop-up and each pop-up is modeless.
To edit the description of a graphic
1. Click on the canvas so that no elements are selected.
2. In the Properties Editor, type a meaningful description for the De scription property.
To use smoothing (anti-aliasing) for a graphic
1. Click on the canvas so that no elements are selected.
2. In the Properties Editor, select True for the Smoothing property.
To enable multiple pop-ups for a graphic
1. Click on the canvas so that no elements are selected.
2. In the Properties Editor, select True for the MultiplePopupsAllowed property.

163
Creating and Managing Industrial Graphics User Guide Editing Common Properties of Elements and Graphics

164
 Creating and Managing Industrial Graphics User Guide

C HAPTER 7
Working with Element Styles

Understanding Element Styles

An Element Style defines a set of visual properties that determine the appearance of text, lines, grap hic
outlines, and interior fill shown in Industrial Graphics. An Element Style that is applied to a symbol sets
pre-configured visual property values that take precedence over a symbol’s native visual properties.
Element Styles provide the means for devel opers to establish consistent visual standards in their
ArchestrA applications. An Element Style can define the same visual properties of text, lines, fill, and
outlines for all symbols or graphics that belong to an application.
Likewise, Element Styles can show the current status of an object represent ed by a symbol. For
example, an Element Style animation can be applied to a symbol when an object transitions to an alarm
state.

Galaxy Style Library

A set of Element Styles is provided in the predefined Galaxy Style Library. The predefined values of the
Element Styles in this library can be changed. However, existing Element Styles cannot be renamed or
deleted. Also, new Element Styles cannot be added to the library.

Visual Properties Defined by Element Styles

The following table lists the visual properties of graphic elements defined in an Element Style.
Graphic Element Element Properties

Text  Font family

 Font size
 Font style
 Font color
 Blink On/Off
Fill  Fill color
 Fill gradient
 Fill pattern

165
Creating and Managing Industrial Graphics User Guide Working with Element Styles

Graphic Element Element Properties

 Fill texture
 Blink On/Off
Line  Line pattern
 Line weight
 Line color
 Blink On/Off
Outline  Outline Show/ Hide
 Outline Pattern
 Outline Weight
 Outline Color
 Blink On/Off
An Element Style may not define every visual property. If a property value is not defined in an applied
Element Style, the element’s native style is used and can be changed. However, if an element’s property
value is defined in an applied Element Style, the element’s native properties are disabled and cannot be
changed.

Element Styles in Animations

You can configure an element or a group of elements with Boolean or truth table animations that
determine whet her Element Styles are applied bas ed on evaluat ed conditions or ex pressions. See
Configuring an Animation Using Element Styles on page 173.

Property Style Order of Precedence

To understand the behavior of an element’s properties when an Element Style is applied, you should
understand the order of precedence for the levels at which property styles are applied.

Updating Element Styles at Application Run Time

You can update the Elements Styles applied to sy mbols or graphics included in a running application.
 Updating Element Styles from the IDE
When an application is deployed and updat es were made to the applied Element Styles from the
ArchestrA IDE, those updates will be propagated to the graphic elements in a running application
without requiring WindowViewer to be closed and re-opened.
 Importing an updated Graphic Style Library
Importing an updated Graphic Style Library that includes different applied Element Styles will
propagate those changes to graphic elements in a running application without requiring
WindowViewer to be closed and re-opened.

Managing Element Styles

At the Galaxy level, you can import and export Galaxy Style Libraries containing custom Element Styles
to applications running on other Galaxies. This section describes the tasks to create a set of custom
Element Styles that can be used in other Galaxies.

166
Working with Element Styles Creating and Managing Industrial Graphics User Guide

Importing and Exporting Galaxy Style Libraries

You can import a Galaxy Style Library to load its Element Styles in a Galaxy. You can also modify
Element Styles, and then ex port the Galaxy Style Library as custom user-defined Element Styles.
Optional Galaxy Style Library XML files are locat ed in the
...\Program Files ( x86)\ArchestrA\FrameWork\Bin\AdditionalElementStyles folder. The names of the
XML files suggest the primary color schemes of the Element Styles within each optional Galaxy Style
Library. For more information about importing and exporting Galaxy Style Libraries, see Chapter 3 in the
Application Server User’s Guide.

Changing Visual Properties of an Element Style

You can modify the visual properties of any Element Style in the currently loaded Galaxy Styles Library.
You modify properties by setting overrides on the Element Styles tab in the Configure Galaxy Style
Library dialog box.
In the Configure Galaxy Style Library dialog box., you can:
 Modify the appearance of text by setting overrides for the text font, text size, text style, text color, and
blinking.
 Modify the appearance of graphic fill by setting overrides for fill color and blinking.
 Override the appearanc e of the line pattern, weight, color, and blinking.
 Override the appearanc e of the outline line pattern, weight, color, and blinking.
 Preview the appearance of an Element Style.
 Reset Element Style visual properties to their default values.
To show the current Element Styles of a Galaxy
1. On the Galaxy menu, click Configure and click Galaxy Style Library. The Configure Galaxy Style
Library dialog box appears.
2. Click the Element Styles tab.
The Element Styles tab includes the following fields:
o The Element Style Overrides grid lists the Element Styles included in the library. An X within
grid cells indicates style properties that have been overridden.
o The Preview field shows the appearance of an element when the current Element Style is
applied.
o The Re set to Default button returns all modified Element Styles to their default values.
o The property tabs include relat ed fields to set values for each property defined in the selected
Element Style.

Overriding the Element Style Text Properties

You can modify an Element Style’s text visual properties by setting alternative values for text font, text
color, text style, and blink rate.
To change the appearance of text in an Element Style
1. On the Galaxy menu, point to Configure, and then click Galaxy Style Library. The Configure
Galaxy Style Library dialog box appears.
2. Select an Element Style from the Element Style Overrides list.
3. Click the Text (Ts) tab.

167
Creating and Managing Industrial Graphics User Guide Working with Element Styles

4. To change the font, select Font Override, click the browse button, and select a font from the Font
dialog box.
5. To override the font color:
a. Select Font Color Override.
b. Click the color box.
c. Select a color from the Select Font Color dialog box.
6. To override the text blink behavior:
a. Select Blink.
b. Select a blinking speed from the Speed list.
c. Click the color box to show the Select Blink Color dialog box.
d. Select the color, gradient, pattern, and texture for the blink style.
7. Click OK.

Overriding the Element Style Fill Properties

You can modify an Element Style’s fill visual properties by setting alternative values for fill color and blink
rate.
To override the fill appearance of an Element Style
1. On the Galaxy menu, point to Configure, and then click Galaxy Style Library. The Configure
Galaxy Style Library dialog box appears.
2. Select an Element Style from the Element Style Overrides list.
3. Click the Fill tab.
4. To override the fill style:
a. Select Fill Color Override.
b. Click the color box.
c. Select a style from the Select Fill Color dialog box.
5. To override the fill blink behavior:
a. Select Blink.
b. Select a blink speed from the Speed list.
c. Click the color box.
d. Select a style from the Select Fill Color dialog box.
6. Click OK.

Overriding the Element Style Line Properties

You can modify an Element Style’s line visual properties by setting alternative values for line color, line
pattern, and line weight
To override the line appearance of an Element Style
1. On the Galaxy menu, point to Configure, and then click Galaxy Style Library. The Configure
Galaxy Style Library dialog box appears.
2. Select an Element Style from the Element Style Overrides list.
3. Click the Line tab.

168
Working with Element Styles Creating and Managing Industrial Graphics User Guide

4. To override the line pattern, select Line Pattern Override and select a line pattern from the adjacent
list.
5. To override the line weight, select Line Weight Override and enter a new line weight in the adjacent
box.
6. To override line color properties:
a. Select Line Color Override.
b. Click the color box.
c. Select a color style from the Select Line Color dialog box.
7. To override the line blink behavior:
a. Select Blink.
b. Select a blinking speed from the Speed list.
c. Click the color box.
d. Select a style from the Select Blink Color dialog box.
8. Click OK.

Overriding the Element Style Outline Properties

You can modify an Element Style’s outline vis ual properties by setting alternative values for text font, text
color, text style, and blink rate.
To override the outline appearance of an Element Style
1. On the Galaxy menu, point to Configure, and then click Galaxy Style Library. The Configure
Galaxy Style Library dialog box appears.
2. Select an Element Style from the Element Style Overrides list.
3. Click the Outline tab.
4. Select Show Outline.
5. To set the line pattern, select Line Pattern and select a line pattern from the adjacent list.
6. To set the line weight, select Line Weight and type a line weight in the adjacent box.
7. To set the line style:
a. Click the color box next to Line Color.
b. Select a style from the Select Line Color dialog box.
8. To set the line blink behavior:
a. Select Blink.
b. Select a blinking speed from the Speed list.
c. Click the color box.
d. Select a blink style from the Select Blink Color dialog box.

169
Creating and Managing Industrial Graphics User Guide Working with Element Styles

Previewing an Element Style

The Preview area shows the appearance of an Element Style’s current assigned property values.

To preview an Element Style

1. On the Galaxy menu, point to Configure, and then click Galaxy Style Library. The Configure
Galaxy Style Library dialog box appears.
2. Select the Element Styles tab.
3. Select an Element Style from the Element Style Overrides list.
The Preview field updates to show the appearanc e of the selected Element Style.

Resetting an Element Style to Default Values

You can reset an Element Style to its original default property values.
Note: Resetting an Element Style resets visual properties to their original default values, not to any
previous override settings.

To reset an Element Style to default values

1. On the Galaxy menu, point to Configure, and then click Galaxy Style Library. The Configure
Galaxy Style Library dialog box appears.
2. Select the Element Styles tab.
3. Select one or more Element Styles from the Element Style Overrides list.
4. Click Reset to Default. The selected Element Style properties are reset to their default values.

Changing the Visual Properties of User-Defined Element Styles

The Galaxy Style Library includes a set of 25 user -defined Element Styles. User-defined Element Styles
appear towards the bottom of the list of the Element Style Overrides field and are named
User_Defined_01 to User_Defined_25.

170
Working with Element Styles Creating and Managing Industrial Graphics User Guide

All visual properties of user-defined Element Styles are initially set to default values. Visual properties
can be individually configured for each user-defined Element Style by setting overrides for text, fill, line,
and outline as other predefined Element Styles.

Applying Element Styles to Elements

You can apply Element Styles to one or more graphic elements. Unlike setting Element Style overrides
that change the appearance of an Element Style’s properties, applying an Element Style to a graphic
element overrides the element’s native properties.
Applying Element Styles to elements can help standardize the appearance of those elements in the
Galaxy and show the current state of an object represent ed by a symbol or graphic. For more
information, see Changing Visual Properties of an Element Style on page 167.

Using the Element Style List

The Industrial Graphic Editor menu bar contains an Element Style list to select an Element Style and
apply it to a selected element of a symbol or graphic.
To apply an Element Style to a graphic element
1. Open the symbol or graphic in the Industrial Graphic Editor.
2. Select one or more elements from the graphic or symbol.
3. Select an Element Style from the Element Styles list to apply to the selected elements.

Using the Properties Grid

The Industrial Graphic Editor Properties view contains an Element Style Appearance item to select an
Element Style and apply it to a selected element of a symbol or graphic.
To apply an Element Style from the Properties Editor
1. Open the symbol or graphic in the Industrial Graphic Editor.
2. Select one or more elements from the graphic or symbol.

171
Creating and Managing Industrial Graphics User Guide Working with Element Styles

3. In the Appearance category of the Properties Editor, select an Element Style from the Element
Style list.

Using Format Painter

You can use the Industrial Graphic Editor’s Format Painter to copy an Element Style from one graphic
element to another.
To apply an Element Style using Format Painter
1. Open a symbol or graphic in the Industrial Graphic Editor.
2. Select the element with the Element Style you want to copy.
3. On the Edit menu, click Format Painter. The pointer appears as the Format Paint er cursor.
4. Select the elements you want to apply the Element Style to. The Element Style is applied to the
clicked element.

Clearing an Element Style

When an Element Style is applied to an element, you cannot edit the element’s styles that are contro lled
by the applied Element Style. However, you can clear the application of the Element Style so that all of
the styles can be edited.
To clear an Element Style
1. Select the element.
2. Select None in the Element Style list.

Selecting an Element Style as a Default for a Canvas

You can select an Element Style at the canvas level. The selected Element Style is applied to any
graphic element or groups that you create on the canvas.

172
Working with Element Styles Creating and Managing Industrial Graphics User Guide

Applying Element Styles to Groups of Elements

You can apply an Element Style on a group of elements in the same way that you apply an Element Style
to an element. However, the group’s run -time behavior must be set to TreatAsIcon.

Setting a Group’s Run-time Behavior to TreatAsIcon

To apply an Element Style to a graphic element group, the group’s TreatAsIcon property must be set to
True. Otherwise, the Element Style lists are disabled when an element group is selected.
To set a group’s TreatAsIcon property to true
1. Select the element group to which the Element Style will be applied.
2. On the Propertie s menu, click Run-time Behavior and click TreatAsI con.
3. Select True from the drop-down list.

Understanding Element Style Behavior with a Group of Elements

 The Element Style applied to a group has higher prec edence than the property styles applied to
individual graphic elements in the group.
 If the Element Style applied to a group of elements has undefined property styles, then the element
continues to use its Element Style or element-level settings for undefined property styles.
 If the Element Style that is applied to a group of elements has defined property styles, then those
property styles override the property styles defined at the element level for elements in the group.
 An Element Style cannot be applied to a nested element group.
 If you add an element to a group that has a group -level Element Style applied, the group Element
Style is applied to it.

Configuring an Animation Using Element Styles

You can configure an element or a group of elements with a:
 Boolean animation that applies Element Styles based on a binary True/False condition.
 Truth table animation that applies Element Styles based on a range of possible values.
The truth table animation that applies Element Styles:
 Associates expressions of any data type supported by Application Server or InTouch to an Element
Style.
 Defines as many conditions as required and applies a separate Element Style for each condition
 Defines the conditions to apply an Element Style by specifying a comparison operator
(=, >, >=, <, <=) and a breakpoint, which itself can be a value, an attribut e referenc e, or an
expression.
 Arranges conditions in the order that Element Styles are processed.

Configuring a Boolean Animation Using Element Styles

You can configure an element or a group of elements with a Boolean animation that uses only two
Element Styles.
To configure an element or a group of elements with an Element Style that uses
Boolean animation
1. Open the symbol or graphic in the IDE Industrial Graphic Editor.

173
Creating and Managing Industrial Graphics User Guide Working with Element Styles

2. Select the element or element group.

3. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.
4. Click the Add icon and select Element Style. The Element Style animation is added to the
Animation list and the Element Style state selection panel appears.
5. Click the Boolean button. The Boolean Element Style configuration panel appears.
6. In the Boolean text box, enter a Boolean numeric value, attribute reference, or an expression.
7. Clear ElementStyle in the True, 1, On area or False, 0, Off area if you do not want a different
Element Style for the true or false condition than the default Element Style that is shown in the
Element Style list.
8. In the True, 1, On area, select the Element Style in the list to use when the expression is true.
9. In the Fal se, 0, Off area, select the Element Style in the list to use when the expression is false.
10. Click OK.

Configuring a Truth Table Animation with Element Styles

You can configure an element or a group of elements with a Truth Table animation that selects multiple
Element Styles based on a set of evaluated values or expressions.
To configure an element or a group of elements with an Element Style that uses Truth
Table animation
1. Open the symbol or graphic in the IDE Industrial Graphic Editor.
2. Select the element or group.
3. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.
4. Click the Add icon and select Element Style. The Element Style animation is added to the
Animation list and the Element Style state selection panel appears.
5. Click the Truth Table button. The Truth Table Element Style configuration panel appears. The
Element Style that is applied to the element is shown in the Element Style list at the bottom of the
panel.
6. In the Expre ssion Or Reference area:
o Select the data type of the expression from the list.
o Type a value, attribute reference or expression in the text box.
7. If the data type of the ex pression is string or internationalized string, you can specify to ignore the
case by selecting Ignore Case.
8. In the Truth Table, select the Element Style check box and select the Element Style for one of the
conditions to be defined in the truth table.
9. In the Operator column, select a comparison operator.
10. In the Value or Expression column, type a value, attribute reference, or ex pression.
11. To add other conditions:
a. Click the Add icon. An additional condition is added to the truth table.
b. Select the Element Style check box, select the Element Style for the condition, select an
operator, and enter the condition value or expression.
12. After adding all truth table conditions, click OK.

174
Working with Element Styles Creating and Managing Industrial Graphics User Guide

Truth Table animation is typically used to set Element Styles to the different states of an object. For
example, you can set Truth Table conditions to show different Element Styles that represent the
following alarm conditions:
 When the attribute TankLevel_001.PV is 0 then no Element Style is applied.
 When the attribute TankLevel_001.PV is less than 20, then the Element Style is Alarm_Minor_Dev.
 When the attribute TankLevel_001.PV is greater than the attribut e Standards. TankMax then the
Element Style is Alarm_Major_Dev.

Deleting a Condition from an Animation Truth Table

You can delete a condition from an animation Truth Table to remove the associated Element Style from
the animation.
To delete a condition from a Truth Table animation that uses Element Styles
1. Open the Edit Animations dialog box, Truth Table Element Style panel.
2. Select the condition you want to delete.
3. Click the Remove icon. The condition is removed.

Changing the Processing Order of Element Styles in a Truth Table Animation

You can change the processing order of Element Styles by moving the conditions up or down in the Truth
Table list. The Element Style at the top of the Truth Table list is processed first. The remaining Element
Styles are processed in order based on their position from the top of the list.
To change the processing order of Element Style conditions
1. Open the Edit Animations dialog box, Truth Table Element Style panel.
2. Select the condition you want to move up or down the condition list in order for it to be processed
sooner or lat er.
3. Click the:
o Arrow up icon to move the condition up in the trut h table.
o Arrow down icon to move the condition down in the truth table.

175
 Creating and Managing Industrial Graphics User Guide

C HAPTER 8
Setting Graphic and Element-Specific
Properties
About Graphic- and Element-Specific Properties
You can configure graphic-s pecific and element-s pecific properties. For properties that are common to
all or most elements, see Editing Common Properties of Elements and Graphics on page 143.
You can configure:
 General properties of a graphic.
 Radius of rounded rectangles.
 Shape and end appearance of lines and H/V lines.
 Auto-sizing and word-wrapping in text boxes.
 Image-specific properties.
 Button-specific properties.
 Cont rol points and tension in curves.
 Angles in pies, chords, and arcs.
 Status elements.
 Windows common controls.

Setting the Radius of Rounded Rectangles

You can specify the radius, in pixels, of the corners of rounded rectangles. The radius determines their
"roundness". You can:
 Enlarge or reduc e the radius of t he rounded rectangle on the fly. The easiest way to do this is with the
keyboard.
 Set the radius of the rounded rectangle to a specific value using the Properties Editor.

177
Creating and Managing Industrial Graphics User Guide Setting Graphic and Element-Specific Properties

Rounded rectangles maintain their radius when their size is changed. If the graphic containing rounded
rectangles is embedded into an InTouch window and resized, the radius is not affected. This can have
adverse affects on the graphic representation of your graphic.
To enlarge the radius of a rounded rectangle
1. Select one or more rounded rectangles on the canvas.
2. Press and hold Shift and the + key on the number pad. The radius is enlarged, and the rounded
rectangle bec omes more round.
To reduce the radius of a rounded rectangle
1. Select one or more rounded rectangles on the canvas.
2. Press and hold Shift and the minus (-) key on the number pad. The radius is reduced, and the
rounded rectangle becomes more rectangular.
To set the radius of a rounded rectangle exactly
1. Select one or more rounded rectangles on the canvas.
2. In the Properties Editor, change the value for Radius property and click Enter. The selected rounded
rectangles are updated accordingly.

Setting Line End Shape and Size

You can set the line end shape and size for any element that contains open lines such as lines, H/V lines,
polylines, curves, and arcs.
For a line end, you can set the shape to be an arrowhead, diamond, circle, or square. You can set the
size if the line end shape is an arrowhead.
To set the line end shape
1. Select one or more elements.
2. On the Format menu, click Line Ends.
3. To use a predefined line end shape, select it from the list.
4. To use another line shape, click More Line Options. The Select Line Options dialog box appears.
5. Do the following:
a. In the Line Start list, click a shape for the start of the line.
b. In the Line End list, click a shape for the end of the line.
c. Click OK.
To set the size of the line arrowheads
1. Select one or more open line elements.
2. On the Format menu, click More Line Options. The Select Line Options dialog box appears.
3. Select a size on the Line Start Size list if the line starts with an arrowhead. Valid sizes are: XX Small,
X Small, Small, Medium Small, Medium, Medium Large, Large, X Large, XX Large.
4. Select a size on the Line End Size list if the line ends with a shape.
5. Click OK.

Note: You can also set the line end shapes by changing the StartCap and EndCap properties in the
Properties Editor.

178
Setting Graphic and Element-Specific Properties Creating and Managing Industrial Graphics User Guide

Setting Auto Scaling and Word Wrapping for a Text Box

You can configure a text box to auto scale the text or to word wrap the text within the text box.
 For auto scaling, the text is resized to fit the text box.
 For word wrapping, the text in a text box continues on the next line.
To auto scale the text in a text box
1. Select one or more text boxes.
2. In the Properties Editor, set the AutoScale property to true.
To word wrap the text in a text box
1. Select one or more text boxes.
2. In the Properties Editor, set the WordW rap property to true.

Using Images
You can plac e images on the canvas. This is a two step proc ess:
1. Draw a frame which specifies the target size of the image.
2. Import the image from an image file.
After you place an image on the canvas, you can:
o Set the display mode (ImageStyle).
o Set the image alignment (ImageAlignment).
o Set the transparency color (Has TransparentColor, TransparentColor properties).
o Open the image in an image editing application.
o Select a different image for the image element.

Placing an Image on the Canvas

You can plac e an image on the canvas. The image data must come from an image file. You can import
the following image formats: .BMP, .GIF, .JPG, .JPEG, .TIF, .TIFF, .PNG, .ICO, .EMF.
You cannot use animated GIF images.
To place an image on the canvas
1. In the Tool s panel, select the image icon.
2. Click the canvas where you want to place the image and drag the mouse t o draw a rectangle t hat will
contain your image.
3. Release the mouse button. The Open dialog box appears.
4. Browse to and select an image file, and then click Open. The image is loaded into the image frame.
If the image frame is smaller than the image, the image is cropped to fit into the frame. If the image
frame is larger than the image, the image appears in its original size.

Setting the Image Display Mode

You can set the way the image appears on the canvas.
 In normal mode, the image is not stretched or tiled. You can resize the image frame with the resizing
handles.

179
Creating and Managing Industrial Graphics User Guide Setting Graphic and Element-Specific Properties

 In stretch mode, the image is stretched so that it fills its frame.

 In tile mode, the image is repeated so that a tiled pattern that fills its frame is created.
 In auto mode, the image frame is enlarged or reduced to the image size. The resizing handles are
locked. When the image style of an image element is Auto, you cannot change its size.
To stretch an image to the image frame
1. Select the image element you want to stretch.
2. In the Properties Editor, select ImageStyle.
3. In the list, click Stretch. The image is stretched to the image frame.
To tile an image in an image frame
1. Select the image element you want to tile.
2. In the Properties Editor, select ImageStyle.
3. In the list, click Tile. The image is tiled to fill the image frame.
To set an image frame size to its image size
1. Select the image element you want to adjust.
2. In the Properties Editor, select ImageStyle.
3. In the list, click Auto. The image frame is enlarged or reduced to the image size.

Setting the Image Alignment

The image alignment specifies where the image appears in an image frame. By default, images appear
in the center of the image frame. You can change this setting to one of the following:
 Top left, top center, or top right
 Middle left, center, or middle right
 Bottom left, bottom center, or bottom right

Note: You can also set the image alignment in the ImageAlignment property in the Properties Editor.

To set the image alignment

1. Select the image element with the image you want to align.
2. In the Properties Editor, select ImageAlignment.
3. In the list, click one of the following options: TopLeft, TopCenter, TopRight, MiddleLeft, Centers,
MiddleRight, BottomLeft, BottomCenter o r BottomRight. The image is aligned accordingly in the
image frame.

Setting the Image Color Transparency

You can use image color transparency to specify that a color within an image is partially or entirely
transparent. When you configure image transparency, you must:
 Enable color transparency for images.
 Specify the color that is to be transparent.
Setting the image color transparency is different than setting the transparency of the image element, as it
only applies to one color. Image transparency applies to the entire image.

180
Setting Graphic and Element-Specific Properties Creating and Managing Industrial Graphics User Guide

To enable image color transparency

1. Select the image element.
2. In the Properties Editor, select Ha sTransparentColor.
3. In the list, click True.
To set the transparency color for an image
1. Select the image element.
2. On the Edit menu, click Select Image Transparent Color. The pointer bec omes a color picker.
3. Click the color you want to use as the transparency color. The image is updated wit h the new
transparency color.

Note: You can also select a transparency color with the TransparentColor property in the Properties
Editor. For more information about setting the color, see Setting a Solid Color on page 151.

Editing the Image

You can edit the image in an image element by opening it in an image editing application.
You can specify the image editor by changing the designer preferences. For more information, see
Setting the Image Editing Applic ation on page 181.
To edit an image
1. Select the image element with the image you want to edit.
2. On the Edit menu, click Edit Image. The image is opened with the associated image editing
application.
3. Make changes to the image as needed, save the image and close the image editing application. The
image is updated on the canvas.

Setting the Image Editing Application

You can specify the image editor that opens when you select an image for editing. You can select a
currently registered image editing application or add one.
To set the image editing application
1. On the Special menu, click Preferences. The De signer Preferences dialog box appears.
2. Select an image editor from the Image Editor list.
To add an image editing application
1. On the Special menu, click Preferences. The De signer Preferences dialog box appears.
2. In the Image Editor list, click Choose Custom Editor. The Select Image Editing Application
dialog box appears.
3. Browse to and select the executable file of the image editing application and click Open. The image
editor is added to the list.

Selecting a Different Image

You can change the current image of an image element by selecting a new image.
To select a different image
1. Select the image element with the image you want to change.

181
Creating and Managing Industrial Graphics User Guide Setting Graphic and Element-Specific Properties

2. On the Edit menu, click Select Image. The Open dialog box appears.
3. Browse to and select an image file, and then click Open. The image is loaded into the image frame.

Note: You can also select a different image by clicking the browse button in the Image property in the
Properties Editor .

Using Buttons
You can add a text caption or an image to buttons that belong to Industrial Graphics. If a button includes
a text caption, you can:
 Automatically scale the font size
 Configure the text to wrap within the button

Automatically Scaling Text in Buttons

You can aut omatically scale text so that the font size is adapted to the button size.
To automatically scale text in buttons
1. Select the button element on the canvas.
2. In the Properties Editor, set the AutoScale property to True.

Wrapping Text in Buttons

You can wrap text in buttons.
To wrap text in buttons
1. Select the button element on the canvas.
2. In the Properties Editor, set the WordWrap property to True.

Configuring Buttons with Images

You can use buttons with an image in Industrial Graphics.
 The "up" image appears after a button is released and returns to the up position during run time
 The "down" image appears after a button is pressed and locks in the down position during run time
You can edit an up image or a down image aft er you assign it to a button.
To use a down image or up image on a button
1. Select the button element on the canvas.
2. In the Properties Editor, select Image in the property ButtonStyle list.
3. Click the brows e button of the UpImage property and select an image in the Open dialog box. This is
the image that appears on the button by default and also when the button is released.

182
Setting Graphic and Element-Specific Properties Creating and Managing Industrial Graphics User Guide

4. Click the browse button of the DownImage property and select an image in the Open dialog box.
This image appears after the button is clicked.
To edit an up image or a down image of a button
1. Right -click the button element on the canvas. The context menu appears.
2. Click Edit Button Image, then click one of the following:
o Edit Up Image
o Edit Down Image
The up image or down image is opened in the default image editor.
3. Edit the image.
4. Save the image and close the image editor. The up image or down image is updated.

Editing Control Points

Cont rol points determine the shapes of polylines, polygons, curves, and closed curves. To change the
shape of thes e elements after they have been placed on the canvas, you can:
 Move individual control points.
 Add or remove control points.

Moving Control Points

After you place a polyline, polygon, curve, or closed curve on the canvas, you can change its shape by
editing its control points.
To move the control points of a polyline, polygon, curve, or closed curve
1. Select the polyline, polygon, curve, or closed curve.
2. On the Edit menu, click Edit Control Points. The cont rol points of the element are shown.
3. Click a control point you want to change and drag it to the new location. The element is updated
accordingly.
4. Repeat the previous step for all control points you want to change.

Adding and Removing Control Points

You can add or remove control points from polylines, polygons, curves, and closed curves.
To add control points to a curve or closed curve
1. Select the curve or closed curve.
2. On the Edit menu, click Edit Control Points. The cont rol points of the element are shown.
3. Press and hold the Shift key.
4. Move the mouse over the curve or closed curve at the point you want to add a control point. The
pointer appears as a pen with a plus graphic.
5. Click the curve or closed curve. The control point is added to the curve or closed curve.
6. Repeat the last step for any other cont rol points you want to add.
7. When you are done, release the Shift key.
To delete control points from a curve or closed curve
1. Select the curve or closed curve.

183
Creating and Managing Industrial Graphics User Guide Setting Graphic and Element-Specific Properties

2. On the Edit menu, click Edit Control Points. The cont rol points of the element are shown.
3. Press and hold the Shift key.
4. Move the mouse over the control point you want to remove. The pointer appears as a pen with a
minus graphic.
5. Click the control point. The control point is removed from the curve or closed curve.
6. Repeat the last step for any other cont rol points you want to remove. You must have at least two
control points.
7. When you are done, release the Ctrl key.

Changing the Tension of Curves and Closed Curves

After you place a curve or a closed curve, you can change its tension. The tension specifies how tightly
the curve bends through the control points. Valid range are float values from 0 (tightly) to 2 (loosely).

Note: You can also change the tension of a curve or closed curve by changing the value for the Tension
property in the Properties Editor.

To edit the tension of a curve or closed curve

1. Select the curve or closed curve.
2. In the Properties Editor, type a float value from 0 to 2 for the Tension property.

Changing Angles of Arcs, Pies and Chords

After you place an arc, pie, or chord, you can change the start and sweep angles of elements. You can
change the angles to any integer degree from 0 to 359. When you change the angles, you can press the
Shift and Ctrl keys to make the angle snap to multiples of 15 or 45 degrees.
You can also move the start angle and sweep angle at the same time. The object appears to be rotated
around its arc/pie/chord center point while keeping the same center point angle.

Note: You can also change the start or sweep angle of an arc, pie or chord in the StartAngle or
SweepAngle properties in the Properties Editor. For more information, see Utilizing S weep Angle
Run-Time Properties on page 185.

To change the start or sweep angle of an arc, pie, or chord

1. Select the arc, pie, or chord.
2. On the Edit menu, click Edit Start and Sweep Angles. The start and sweep angle handles appear
on the selected element.
3. If you want to the angle to be multiples of 15 degrees, press and hold the SHIFT key.
4. If you want to the angle to be multiples of 45 degrees, press and hold the CTRL key.
5. Grab the start angle or the sweep angle handle and drag it to the new location. The element is
updated accordingly.
To change the start and sweep angles of an arc, pie, or chord together
1. Select the arc, pie, or chord.
2. On the Edit menu, click Edit Start and Sweep Angles. The start and sweep angle handles appear
on the selected element.
3. Select the start angle or the sweep angle handle and keep the mouse button down.
4. Press and hold the Alt key.
5. If you want additionally either angles to be multiples of 15 degrees, press and hold the Shift key.

184
Setting Graphic and Element-Specific Properties Creating and Managing Industrial Graphics User Guide

6. If you want additionally either angles to be multiples of 45 degrees, press and hold the Ctrl key.
7. Drag the mouse. The start angle and sweep angle are changed accordingly.
8. When you are done, release the mouse button and then any keys.

Utilizing Sweep Angle Run-Time Properties

The 2 and 3 point arc, pie, and chord graphic elements contain StartAngle and SweepAngle
Appearance properties. These properties can be assigned values in a client script that change during
run time to show moving sweep angle or start angle lines as part of arc, pie, and chord graphic elements.
Sweep angle run-time properties are well suited for showing a current value within a range of possible
values. For example, the movement of a chord sweep angle can show a pie chart with fill that indicates
the current time within a repetitive period. Or, the movement of an arc sweep angle can represent a
pointer to the current value within a range of possible values like a tachometer.
To configure sweep angle run-time properties
1. Place an arc, pie, or chord graphic object on the Industrial Graphic Editor canvas.
2. Select the graphic element to show its Properties attributes.
3. Assign StartAngle and SweepAngle properties as values of a client script that change based on
run-time events.

Monitoring and Showing Quality and Status

You can configure your graphic to show non -good status and quality of attributes or tags in different
ways:
 A status element shows a specific icon depending on the quality and status of configured attributes,
tags or elements.
 The text, fill, or line appearance of elements is overridden depending on the quality and status of the
attributes and tags they reference.
 Elements are drawn with an outline depending on the quality and status of the attributes they
reference.

Note: Quality and status elements might not be supported by all HMIs. Refer to "Working with the
Industrial Graphic Editor" in your HMI help for more information.

Using Status Elements

Status elements show a specified graphic depending on the quality and status of:
 Attributes and tags configured for specific animated elements.
 One or more specified attributes or tags.
You can assign status elements to an animation in three steps:
1. Draw the status element on the canvas.
2. Associate the status element with animated elements on the canvas and/or attribut es that provide
the quality and status data to be monitored.
3. If needed, configure the appearance of the status element.

Drawing the Status Element on the Canvas

You can easily place a status element on the canvas to show an icon that indicates quality and status of
attributes or tags contained in selected animat ed elements and/or specified attribut es and tags.

185
Creating and Managing Industrial Graphics User Guide Setting Graphic and Element-Specific Properties

You do this as you would with any other element. For more information, see Drawing and Dragging
Elements on page 101.

Configuring the Status Element

You can associate the status element with:
 Animated elements that use attributes and tags that provide the quality and status that is to be
monitored.
 Attributes and tags that provide the quality and status to be monit ored.
In both cases, the appearance is set by the settings in your HMI application. For example, in ArchestrA it
is set in the Quality and Status tab of the Configure Galaxy Style Library dialog box.
For more information on how to configure this animation, see Configuring A nimation for a Status Element
on page 275.

Setting the Appearance of a Status Element

You can set the appearance of a status element depending on the quality and status of its referenc ed
attributes and tags and/or attributes and tags used in its referenc ed elements.
You can also preview the appearance of a status element. For more informati on, see Previewing all
Status Appearances
You can reset the appearance of a status element to its default. For more information, see Resetting an
Override Appearance to its Default on page 188.

Overriding Element Appearance Depending on Quality and Status of

its Attributes
You can configure any animated element to appear differently depending on the quality and status of its
associated attributes and tags if your HMI application s upports it.
For animated elements, you can:
 Override the appearanc e of the text font, style, and blinking.
 Override the appearanc e of the fill style and blinking.
 Override the appearanc e of the line style, weight, pattern, and blinking.
 Preview all status appearances in one dialog box.
 Reset the status appearanc es to their defaults.
 Use an outline to indicate a specified status or quality.

Note: Instead of overriding the appearance of elements on the canvas, you can use a status element.
The status element shows an icon representing quality and status of monitored attributes and tags.

Overriding the Text Appearance of Elements to Indicate Non-Good Status or

Quality
If your HMI application supports it, you can configure the text appearance of animated elements with
attributes that have non-good status or quality are overridden with a specific text appearanc e.

186
Setting Graphic and Element-Specific Properties Creating and Managing Industrial Graphics User Guide

Overriding the Fill Appearance of Elements to Indicate Non-Good Status or

Quality
If your HMI application supports it, you can configure the fill appearance of animated elements with
attributes that have non-good status or quality are overridden with a specific fill appearance.

Overriding the Line Appearance of Elements to Indicate Non-Good Status or

Quality
You can configure a Galaxy so that the line appearanc e of animat ed elements with attributes that have
non-good status or quality are overridden with a specific line appearance.
To override the line appearance of elements specified by a Status element
1. On the Galaxy menu, point to Configure, and then click Galaxy Style Library. The Configure
Galaxy Style Library dialog box appears.
2. Click the Quality and Status tab.
3. Select Enable Quality and Status Di splay.
4. Select a status or quality from the Status Style Overrides list.
5. Click the Line (Ls) tab.
6. To override the line pattern, select Line Pattern Override and select a line pattern from the adjacent
list.
7. To override the line weight, select Line Weight Override and type a new line weight in the adjacent
box.
8. To override the line color:
a. Select Line Color Override.
b. Click the color box.
c. Select a line color from the Select Line Color dialog box. For more information, see Setting
Style on page 151.
9. To override the line blink behavior:
a. Select Blink.
b. Select a blinking speed from the Speed list.
c. Click the color box.
d. Select a line blink color from the Select Blink Color dialog box. For more information, see
Setting Style on page 151.
10. Click OK.

Adding Outlines to Elements to Indicate Non-Good Status or Quality

You can configure the Galaxy so that animated elements with attribut es that have non-good status or
quality are shown with an outline.
To add outlines to elements to indicate non-good status or quality
1. On the Galaxy menu, point to Configure, and then click Galaxy Style Library. The Configure
Galaxy Style Library dialog box appears.
2. Click the Quality and Status tab.

187
Creating and Managing Industrial Graphics User Guide Setting Graphic and Element-Specific Properties

3. Select Enable Quality and Status Di splay.

4. Select a status or quality from the Status Style Overrides list.
5. Click the Outline (Ol) tab.
6. Select Show Outline.
7. To set the line pattern, select Line Pattern and select a line pattern from the adjacent list.
8. To set the line weight, select Line Weight and type a line weight in the adjacent box.
9. To set the line style:
a. Click the color box next to Line Color.
b. Select a line color from the Select Line Color dialog box. For more information, see Setting
Style on page 151.
10. To set the line blink behavior:
a. Select Blink.
b. Select a line blink speed from the Speed list.
c. Click the color box.
d. Select a line blink color from the Select Blink Color dialog box. For more information, see
Setting Style on page 151.

Previewing all Status Appearances

You can preview the appearance of all status overrides by showing the S tatus Legend dialog box.
To preview all override appearances
1. On the Galaxy menu, point to Configure, and then click Galaxy Style Library. The Configure
Galaxy Style Library dialog box appears.
2. Click the Quality and Status tab.
3. Click Preview Legend. The Status Legend dialog box appears.
4. Click Close.

Resetting an Override Appearance to its Default

For any status, you can reset the default appearance:
 Text, fill, and line overrides.
 Outline settings.
 Status element settings.
To reset a status or quality to its default appearance
1. On the Galaxy menu, point to Configure, and then click Galaxy Style Library. The Configure
Galaxy Style Library dialog box appears.
2. Click the Quality and Status tab.
3. Select a status or quality from the Status Style Overrides list.
4. Click Reset to Default. All text, fill, and line overrides, status element icons, and outline settings are
reset to their defaults.

188
Setting Graphic and Element-Specific Properties Creating and Managing Industrial Graphics User Guide

Setting Global Number Styles

The Configure Galaxy Style Library dialog box includes the Format Style s tab. Format Style s
provides options to individually configure Galaxy-wide styles for common types of numbers used in
industrial applications.
Each global number style is assigned a unique name, which cannot be changed. A number style can be
applied by name in design time and run time for an analog data type in User Input and Value Display
animations. Also, grouped elements support global number styles.

The Format Style list includes a set of styles that can be individually configured to create customized
number styles. The Real number format is the default for the user defined styles.
The Format Style s dialog box also includes fields to specify characters that appear during run time that
indicate bad quality data or data that exceeds a fixed width field.
Based on the selected number style, the following fields appear on the Format Styles dialog box to
change the default properties.
 Fixed Width
Appears for every number format style. When selected, the lengt h of a number cannot exceed the
text length of the text element (Text, TextBox, or Button) in design time. Numbers that exceed design
time text length will show the special character specified in the Value too large for Fixed Field.
For the Real number style, the length of the fractional part of the number is truncated t o fit the design
time length. If the length of the number is still too large after removing the entire fractional part, then
the number will show the special character specified in the Value too large for Fixed Field.
 Precision
Appears for the Real, FixedDecimal, and Exponential number styles. Precision sets the possible
number of digits in the fractional part of a number to the right of the decimal point and c an be set from
0 to 8.

189
Creating and Managing Industrial Graphics User Guide Setting Graphic and Element-Specific Properties

 Bits From and To

Appear for the Hex and Binary number formats. Bits From sets the starting bit position (0-31) of a
hex or binary number shown during run time. To sets the ending bit position of a hex or binary
number shown during run time.

Configure Global Number Styles

You can configure a global number style by changing the values assigned to the properties for each type
of number.
To configure a global numeric format style
1. On the Galaxy menu, point to Configure, and then click Galaxy Style Library. The Configure
Galaxy Style Library dialog box appears.
2. Click the Format Styles tab to show numeric format options.

3. Select a numeric format style from the Format Style s list.

The Format Style s dialog box updates to show options for Fixed Width, Precision, Bits From, or
To based on the selected format style.
4. Update the fields shown for the selected format style.
5. Click OK to save the changes to the global number style.

Working with User-defined Global Number Styles

The Galaxy Style Library includes a set of 25 user -defined number styles. User-defined styles appear
towards the bottom of the list of the Format Style s list and are named UserDefined1 to UserDefined25.

190
Setting Graphic and Element-Specific Properties Creating and Managing Industrial Graphics User Guide

Renaming User-defined Global Number Styles

Rename a style to provide a descriptive name, to provide a group of related styles names, or to suit any
other specific application needs. You can rename user -defined Format Styles in Managed InTouch as
well as in a InTouch Modern Application.
The renamed style will appear during configuration. For example, the renamed style will appear in the
Industrial Graphic Editor when configuring an animation using Number Styles.
The renamed style will function the same during run time as it did prior to the name chan ge.
To rename a user-defined element style
1. In the Arc hestrA IDE, click Galaxy on the menu, then click Configure, then click Galaxy Style
Library. The Configure Galaxy Style Library window appears.
2. On the Format Style s tab, navigate to the user-defined style you want to rename.
3. Use a mouse click, such as a "soft click" or a right-click, to select the style name and enable the text
box for editing.
4. Enter your new style name.

Importing and Exporting User-Defined Global Number Styles

You can import and export your renamed user -defined Number Style as a normal part of the Galaxy Style
Library. For more information, see Importing and Exporting Galaxy Style Libraries on page 167.

Setting Number Formats by Regional Locales

The format of numbers varies by country. In the United States, a period represents the decimal point of
an analog number and a comma is the thousand separator. In other countries, the purpose of the
characters may be different. Germany uses a comma to represent the decimal point and a period to
represent the thousand separator.
Industrial graphic numeric values can display thousands and decimal separators that match the numeric
format of the country specified as the Home location of the computer running an HMI software
application.
Numeric formatting by regional locale applies only to Industrial graphic number displays and input
numbers included as part of your HMI software applications.
Numeric formatting by regional locale can be applied to an application containing:
 User Input animation
 Value Dis play animation
 Tooltip animation
 Windows Client Controls (RadioB ox, ComboBox, and ListBox)
 SecuredWrite dialog
 VerifiedWrite dialog
 SignedWrite dialog

Design Time Considerations for Numeric Formatting

During design time, you must make the following preparations to show numbers in a regional locale:
 Enter numbers according to the the U.S. format in design time, e.g. #,###.##
 Set the regional locale of the computer running your HMI software

191
Creating and Managing Industrial Graphics User Guide Setting Graphic and Element-Specific Properties

 Select the Regional Settings in Industrial Graphics option if support ed by your HMI software

Enter Input Numbers in U.S. Format

The Industrial Graphic Editor enables you to specify a number format during design time using a format
string for User Input and Value Display animations.

Both animation types include a Text Format field. When Text Format is set to Format String, you must
enter a text string that represents the format of numbers shown during run time.

Important: During design time, numeric format strings must be specified in a United States format.

During design time, a numeric format string or numeric value must follow the United States number
format.
 The decimal point in a number is a period.

192
Setting Graphic and Element-Specific Properties Creating and Managing Industrial Graphics User Guide

 The thousand separator in a number is a comma.

In the example above, the design-time numeric format strings within the red box at the left comply with
the U.S. number format. But during run time, User Input and Value Display animation show numbers in
the correct format of the country specified by the computer’s Regional setting.

193
Creating and Managing Industrial Graphics User Guide Setting Graphic and Element-Specific Properties

Set the Regional Locale of the Computer Hosting the HMI Software
To enable numeric formatting by regional locale, the computer on which your HMI software is installed
must have its region set to the country in which you want Industrial graphic numbers to be formatted.

The Region setting is accessible from the Windows Control Panel. If you want to display Industrial
graphic numbers in a non-U.S. format, select the Formats tab and select a country in the Format field.

194
Setting Graphic and Element-Specific Properties Creating and Managing Industrial Graphics User Guide

Select the Regional Settings WindowViewer Option

InTouch WindowMaker includes a WindowViewer Advanced Format Regional Settings configuration
option.

To enable numeric formatting by regional locale, the Regional Settings option must be selected during
design time to format Industrial graphic numbers to the country selected in the Region setting. By
default, the Regional Settings option is disabled.

Note: WindowViewer checks the OS Regional Settings only on startup. This means that you may need
to restart WindowViewer if you do either of the following:
1) Select the Regional Settings option while WindowViewer s running.
2) Change the OS Regional Settings while WindowViewer is running with the Regional Settings option
selected.

Run-Time Considerations for Formatting Numbers

The following analog number format styles support numeric formatting by regional locale during run time:

195
Creating and Managing Industrial Graphics User Guide Setting Graphic and Element-Specific Properties

 Custom
 Real
 FixedDecimal
 Integer
 Exponential

Important: During run time, numbers are entered in the format of the selected country.

The following figure shows the analog number 123 456.558857 formatted to the German regional locale
during run time by the different numeric format styles:

A thousand separator is not required when entering a number or specifying a format string. But, if a
thousand separat or is used during run time, it must be placed in the correct location in a specified
number or with User Input animation.
The thousand separator appears in the following numeric format styles:
 Real
 Fixed Decimal
 Integer
 Custom configured as Real, Fixed Decimal, or Integer

196
Setting Graphic and Element-Specific Properties Creating and Managing Industrial Graphics User Guide

During run time, if your HMI software provides software keypads, you can include comma, period, and
thin space keys to enter numbers in a User Input animation data entry field that match the format of the
computer’s regional loc ale. The following illustration shows a typical software keypad. The software
keypad, if supported by your HMI soft ware, might vary in appearance.

Restrictions of Numeric Formatting by Regional Locale

There are several restrictions of numeric formatting by regional locale that you must consider for the
visualization applications you build with your HMI software.

Numeric Strings Enclosed Within Quotation Marks

A numeric string enclosed within quotation marks cannot be converted to the number format of another
regional locale because of the ambiguity interpreting the thousand separator character.
Example:
"4000. 654" in the U.S. regional setting is four thousand.
"4000. 654" in the Germany regional setting is over four million.

197
Creating and Managing Industrial Graphics User Guide Setting Graphic and Element-Specific Properties

Important: A numeric string is not supported and cannot be converted to the number format of another
regional locale.

Numbers Passed as Script Parameters

Scripts containing the SignedWrite() function experience similar problems interpreting the thousand
separator character when a numeric string is passed as a parameter within quotation marks.
Example:
SignedWrite("AO1.PV1","8.456,56","",true,1,null);
The numeric value is enclosed within quotation marks as a string dat a type and the comma thousand
separator character is interpreted as a parameter delimit er. If the computer running a visualization
application regional locale is set to Germany, the script incorrectly writes 8.46 to an attribute.
Alternative Solution:
Use a custom property with an analog dat a type instead of a string.
SignedWrite("AO1.PV1", CP1,"",true,1,null);
where CP1=8.456,56 is set by the user at run time.

Double-byte Character Languages

Double-byte character languages like Chinese or Japanese provide narrow or wide character sets. The
Windows default setting is to show narrow characters in Chinese or Japanese languages. The decimal
point and digital grouping characters can be shown wit h a narro w double-byte character set. However,
the comma or period characters cannot be shown with a wide double -byte character set.

Using Windows Common Controls

You can add the following Windows common controls to your graphic:
 Radio button group
 Check box
 Edit box
 Combo box
 Calendar control
 DateTime picker
 List box
You can place these Windows common controls as you would any other element by selecting them from
the Tool s panel. You click on the canvas to position a common cont rol and, with exception of the
calendar cont rol, drag the rectangle to set of the cont rol.
After placing the control on the canvas, you can then configure:
 Background color and text color (with exception of the DateTime Picker control).
 Other control -specific properties in the Properties Editor.
 Cont rol-s pecific animations.
 The common Value property in scripting to read from and write to the Windows common control at
run time.

198
Setting Graphic and Element-Specific Properties Creating and Managing Industrial Graphics User Guide

Changing Background Color and Text Color of Windows Common

Controls
You can change the background color and text color of all Windows common controls with exception of
the DateTime Picker control.
The background color and text color of the Windows common controls can be only solid colors, not
gradients, patterns, nor textures.
To set the background color of a Windows common control
1. Select the Windows common control.
2. In the Properties Editor, click the browse button of the Fill Color property. The Select Fill Color
dialog box appears.
3. Select a solid color and click OK. For more information, see Setting a Solid Color on page 151. The
Windows common control background color changes accordingly.
To set the text color of a Windows common control
1. Select the Windows common control.
2. In the Properties Editor, click the browse button of the TextColor property. The Select Text Color
dialog box appears.
3. Select a solid color and click OK. For more information, see Setting a Solid Color on page 151. The
Windows common control text color changes accordingly.

Reading and Writing the Selected Value at Run Time

You can use the Value property that is common to all Windows common controls. It is not visible in the
Properties Editor. You can use the value property in a script or other animation links.
The following table shows you the data type, a description on how the value property is used, and an
example for each Windows common control.

Control Data Type Description Example

Radio Button Boolean, Reads the value of the [Link]

Group Integer, selected item, or selects e = "Mixing";
Real or the item with that value if it
String exists.

Check Box Boolean Sets or reads the checked [Link] = 1;

status.

Edit Box String Sets or reads the text [Link] = "Hello

contents. World";

Combo Box Integer Reads the value of the [Link] = 5;

selected item, or selects
the item with that value if it
exists.

Calendar Time Sets or reads the selected [Link] =

date. "11/15/2006 [Link]
AM";

199
Creating and Managing Industrial Graphics User Guide Setting Graphic and Element-Specific Properties

Control Data Type Description Example

DateTime Picker Time Sets or reads the selected [Link] =

date and time. "11/15/2006 [Link]
PM";
List Box Integer Reads the value of the [Link] = "John
selected item, or selects Smith";
the item with that value if it
exists.

Configuring Radio Button Group Controls

You can use a Radio Button Group control element to exclusively select an option from a group of
options at run time.
You can set the:
 3D appearance of buttons.
 Layout of the radio button group options.
You can also use properties that are specific to the Radio Button Group cont rol in scripting. At run time
you can access the script to view and modify the Radio Button Group control.

Setting the 3D appearance of a Radio Button Group Control

You can set the 3D appearance of a radio button gr oup control. This affects how the option circles
appear.
Three-dimensional appearance

Flat appearance in same color as option text

To set the 3D appearance of a radio button group control

1. Select the radio button group control.
2. In the Properties Editor, select from the list for the ControlStyle property:
o Click ThreeD for a three-dimensional appearance.
o Click Flat for a flat two-dimensional appearance in the same color as the option text.

Setting the Layout of the Radio Button Group Options

You can set the layout of the radio button group options in a vertical or horizontal direction.

To set the layout of the radio button group options

1. Select the radio button group control.

200
Setting Graphic and Element-Specific Properties Creating and Managing Industrial Graphics User Guide

2. In the Properties Editor, select from the list for the Layout property:
o Click Vertical to arrange the options under each other.
o Click Horizontal to arrange the options next to each other.

Note: You can set this option also in the radio button group animation dialog box.

Using Radio Button Group-Specific Properties at Run Time

You can use properties that are specific to the Radio Button Group control at run-time. These properties
are:
 Count - returns the number of radio buttons in the Radio Button Group control.
 SelectedValue - reads the value of the selected item, or selects the item with that value if it exists.
These properties are available when you browse for a Radio Button Group control in your HMI's
attribute/tag browser.

Configuring Check Box Controls

You can use a Check Box control for users to reset a Boolean attribute during run time.
You can set the following properties of the Check Box control:
 Default state, checked or unchecked.
 Caption text of the Check Box control button.
 3D appearance of the Check Box control button.

Setting the Default State of a Check Box Control

You can set the default state of a check box control to be checked or unc hecked.
To set the default state of a check box control
1. Select the Check Box control.
2. In the Properties Editor, select from the list for the Checked property:
o Click False to use an unchecked check box by default.
o Click True to use a checked check box by default.

Setting the Caption Text of a Check Box Control

You can set the caption text of a Check Box control.
To set the caption text of a Check Box control
1. Select the Check Box control.
2. In the Properties Editor, type a text string in the Caption property value box.

Setting the 3D appearance of a Check Box Control

You can set the appearance of the check box within the control to be either flat or three -dimensional.
Three-dimensional appearance

201
Creating and Managing Industrial Graphics User Guide Setting Graphic and Element-Specific Properties

Flat appearance in same color as caption text

To set the 3D appearance of a Check Box control

1. Select the check box control.
2. In the Properties Editor, select from the list for the ControlStyle property:
o Click ThreeD for a three-dimensional check box.
o Click Flat for a flat two-dimensional check box in the same color as the caption text.

Configuring Edit Box Controls

You can use an Edit Box control to c reate a box during run time in which users can enter text or view text.
You can configure the following properties of an Edit Box control:
 Set the default text.
 Wrap text to the next line in the edit box at design time and run time.
 Configure it so that the run-time text is read-only.

Setting the Default Text in an Edit Box Control

You can set the default text that appears in an edit box control during run time.
To set the default text in an Edit Box control
1. Select the edit box control.
2. In the Properties Editor, type a text in the Text property. The text appears in the edit box control at
design time. At run time, it can be overwritten with the value of a configured attribute.

Configuring the Text to Wrap in an Edit Box Control

You can configure the edit box control to wrap text at design time and run time. This lets you view and
type strings in a more compact way.
To configure text-wrapping in an edit box control
1. Select the edit box control.
2. In the Properties Editor, select from the list for the Multiline property:
o Click True to enable text-wrapping at run time.
o Click False to disable text-wrapping at run time.

Configuring the Text to be Read-Only in an Edit Box Control

You can configure the Edit Box control to only show text at run time and prevent the run -time user from
writing back to the associated attribute.
To configure the text to be read-only in an Edit Box control
1. Select the edit box control.
2. In the Properties Editor, set the ReadOnly property to True.

Note: To enable writing back to the associated attribute at run time, you can set the ReadOnly property
to False.

202
Setting Graphic and Element-Specific Properties Creating and Managing Industrial Graphics User Guide

Configuring Combo Box Controls

You can use Combo Box controls to select an option from a foldable list.

You can configure:

 Drop-down type of combo box control.
 Width of the drop-down list.
 Integral height flag of the drop-down list to avoid clipping of the items in simple combo box controls.
 Maximum number of items to appear in the drop-down list.
You can also use properties that are specific to the Combo Box control in scripting. At run time, you c an
access the script to view and modify the items in the Combo Box control.

Setting the Type of Combo Box Control

You can use one of the following combo box control types:
 Simple - no drop-down list, values can be ent ered
 DropDown - has a drop-down list, values can be entered
 DropdownList - has a drop-down list, values cannot be entered
To set the type of Combo Box control
1. Select the combo box control.
2. In the Properties Editor, select from the list for the DropDownType property:
o Simple
o DropDown
o DropDownList

Setting the Width of the Drop-Down List

You can set the widt h of the expanded drop -down list when t he user clicks on it. This setting can be used
to save space of the folded combo box control at run time.
Typically you set the drop-down list width greater than the width of the combo box on the c anvas.

If you set the drop-down list width smaller than the combo box control width on the can vas, the
drop-down list is the same width as the combo box control.
To set the width of the combo box drop-down list
1. Select the combo box control.

203
Creating and Managing Industrial Graphics User Guide Setting Graphic and Element-Specific Properties

2. In the Properties Editor, type a width value in the DropDownWidth property value box.

Avoiding Clipping of Items in the Simple Combo Box Control

You can avoid clipping of items in the simple combo box control list by setting the Int egralHeight property
to true. The combo box list height is then changed to ensure that no items appear clipped.

To avoid clipping of items in the drop-down list

1. Select the combo box control.
2. In the Properties Editor, select True as the value for the IntegralHeight property.

Setting the Maximum Number of Items to Appear in the Combo Box Drop-Down
List
You can limit the number of items that appear at any given time in the combo box drop -down list.
To set the maximum number of items to appear in the drop-down list
1. Select the combo box control.
2. In the Properties Editor, type the maximum number as a value for the MaxDropDownItem s
property.

Using Combo Box-Specific Properties at Run Time

You can use properties that are specific to the Combo Box control at run time.
 The count property returns the number of items in a Combo Box control.
 The NewIndex property returns the index of the last item added to the Combo Box list.
These properties are available when you browse for a Combo Box control in your HMI's attribut e/tag
browser.

Configuring Calendar Controls

You can use the Calendar cont rol to select a date from one or more monthly calendar sheets.
You can:
 Set the number of calendar month sheets to be shown.
 Set the first day of the week.
 Show or hide today’s date on the bottom of the control.
 Set the fill and text colors of the calendar title.
 Set the text color for trailing dates.
 Set the date value of the Calendar Control that is used as default at run time.

204
Setting Graphic and Element-Specific Properties Creating and Managing Industrial Graphics User Guide

Setting the Number of Calendar Month Sheets

You can set the number of calendar month sheets to be shown by specifying the number of month
columns and month rows. The number of columns and rows in the calendar control depends on the font
size and the width of the calendar control.
For example, you can show six months in a calendar control by specifying two columns and three rows.

To set the number of calendar month sheets

1. Select the Calendar cont rol.
2. In the Properties Editor, configure the calendar properties:
o For the CalendarColumns property, specify the number of columns in the calendar control.
o For the CalendarRows property, specify the number of rows in the calendar control.

Setting the First Day of the Week

You can s et the first day of the week for the calendar control. This is the day that appears on the most left
column of each calendar month sheet.
You can set it to:
 The default as defined by the operating system.
 Any day of the week.
To set the first day of the week
1. Select the Calendar cont rol.
2. In the Properties Editor, select from the list for the FirstDayOfWeek property:
o Click Default to use the operating system setting.
o Click the day of the week.

Showing or Hiding Today’s Date on a Calendar Control

You can show or hide today’s date on the bottom of a calendar control

205
Creating and Managing Industrial Graphics User Guide Setting Graphic and Element-Specific Properties

To show or hide today’s date on the bottom of a calendar control

1. Select the Calendar cont rol.
2. In the Properties Editor, set the ShowToday property to one of the following:
o True to show today’s date
o False to hide today’s date

Setting Title Fill Color and Text Color on a Calendar Control

You can set the title fill color and title text color on a calendar control.
Changing the title fill color also affects the:
 Color of the week days.
 Fill color of the indication box of today’s date.
When you change the title text color, this also affects the text color of the indication box of today’s date.

To change the title fill color of a Calendar control

1. Select the Calendar cont rol.
2. In the Properties Editor, click the browse button for the TitleFillColor property. The Select
FillColor dialog box appears. For more information, see Setting Style on page 151.
3. Select a color and click OK. The title fill color is changed accordingly.
To change the title fill color of a Calendar control
1. Select the Calendar cont rol.
2. In the Properties Editor, click the browse button for the TitleTextColor property. The Select
FillColor dialog box appears. For more information, see Setting Style on page 151.
3. Select a color and click OK. The title text color is changed accordingly.

Setting the Text Color for Trailing Dates in a Calendar Control

You can set the text color for dates outside the month for any month sheet in a calendar control.
To set the text color for trailing dates
1. Select the Calendar cont rol.
2. In the Properties Editor, click the browse button for the TrailingTextColor property. The Select
Text Color dialog box appears. For more information, see Setting Style on page 151.
3. Select a color and click OK. The text color of the trailing dates is changed accordingly.

206
Setting Graphic and Element-Specific Properties Creating and Managing Industrial Graphics User Guide

Setting the Default Value of the Calendar Control

You can set the default value of the Calendar Control. The default value is a dat e that the control uses
when it is shown the first time.
To set the default value of the calendar control
1. Select the Calendar cont rol.
2. In the Properties Editor, set the DefaultValue property to the date value you want to use as default
at run time.

Configuring DateTime Picker Controls

Use the DateTime Picker control to select a date or time.

You can configure the DateTime Picker control to show:

 A long format, such as Friday, August 11, 2008.
 A short format, such as 8/11/2008.
 Just the time, such as [Link] PM.
 A custom time format, such as 8/11/2008 [Link] PM.
You can also set the default value of the DateTime Picker control.
To set the long date format
1. Select the DateTime Picker control.
2. In the Properties Editor, set the Format property to Long.
To set the short date format
1. Select the DateTime Picker control.
2. In the Properties Editor, set the Format property to Short.
To set only time display
1. Select the DateTime Picker control.
2. In the Properties Editor, set the Format property to Time.
To set a custom date/time format
1. Select the DateTime Picker control.
2. In the Properties Editor, set the Format property to Custom.
3. Type the time format in the value box for the Custom Format property. Use the following letters as
placeholders:
h The one or two-digit hour in 12-hour format.

hh The two-digit hour in 12-hour format. Single digit values are

preceded by a zero.
H The one or two-digit hour in 24-hour format.
HH The two-digit hour in 24-hour format. Single digit values are
preceded by a zero.

207
Creating and Managing Industrial Graphics User Guide Setting Graphic and Element-Specific Properties

t The one-letter AM/PM abbreviation ("AM" is shown as "A").

tt The two-letter AM/PM abbreviation ("AM" is shown as "AM").

m The one or two-digit minute.

mm The two-digit minute. Single digit values are preceded by a
zero.
s The one or two-digit seconds.
ss The two-digit seconds. Single digit values are preceded by a
zero.
d The one or two-digit day.

dd The two-digit day. Single digit day values are preceded by a

zero.
ddd The three-character day-of-week abbreviation.
dddd The full day-of-week name.
M The one or two-digit month number.
MM The two-digit month number. Single digit values are preceded
by a zero.
MMM The three-character month abbreviation.
MMMM The full mont h name.
y The one-digit year (2001 is shown as "1").
yy The last two digits of the year (2001 is shown as "01").
yyyy The full year (2001 is shown as "2001").
You can use any other characters, except "g" in the property. These characters then appear at design
time and run time in the control.
To set the default value in a DateTime Picker control
1. Select the DateTime Picker control.
2. In the Properties Editor, set the DefaultValue property to the date and time value you want to use as
default at run time.

Configuring List Box Controls

You can create a list box for us ers to select an option from a scrollable list during run time.
You can:
 Configure the list box to avoid clipping of its contained items. When you set the Integral Height flag,
the list box control is resized so that no items are clipped.
 Specify if you want the control to be scrollable in horizontal direction at run time. This enables the
user to see the full text if the item captions are wider than the control itself.
 Use properties that are specific to the List Box control in scripting. At run time you can access the
script to view and modify the items in the List Box control.

208
Setting Graphic and Element-Specific Properties Creating and Managing Industrial Graphics User Guide

Avoiding Clipping of Items in the List Box Control List

In the list of a List Box control, some items may appear vertically clipped. You can configure the List Box
control to avoid this clipping by setting the IntegralHeight property.
To avoid clipping of items in the List Box control
1. Select the list box control.
2. In the Properties Editor, select True as value for the IntegralHeight property.

Using a Horizontal Scroll Bar in a List Box Control

You can configure a horizontal scroll bar in a List Box Control so that at run time the user can scroll the
list horizontally to see items that are wider than the control.
To configure a horizontal scroll bar
1. Select the List Box control.
2. In the Properties Editor, select True as value for the HorizontalScrollbar property.

Using List Box-Specific Properties at Run Time

You can use properties that are specific to the List Box control at run time.
 The Count property ret urns the number of items in a List Box control.
 The NewIndex property returns the index of the last item added to the List Box list.
 The SelectedValue property reads the value of the selected item, or selects the item with that value
if it exists.
 The TopIndex property returns the index of the top most item in the list.
These properties are available when you browse for a List Box control in your HMI's attribute/tag
browser.

209
 Creating and Managing Industrial Graphics User Guide

C HAPTER 9
Using Custom Properties
About Custom Properties
You can configure and use custom properties to extend the functionality of symbols and use them in
combination with the HMI soft ware attributes or tags. You can us e binding with custom properties to
dynamically change the reference of a custom property.

Data Type:
- Boolean
- Integer
- Float
- Double
- String
- Time Default Value:
- Elapsed Time - Value
- Reference (Element or Attribute)
- Expression

Custom Property 1

Description

Custom Property 2
Symbol
Custom Property 3 Visibility:
- Public Custom Property
...

- Private Custom Property

Custom Property N

You can associate custom properties with functionality you want exposed and that you want to be
reusable. You can also use custom properties to connect an embedded graphic to attributes and tags in
your HMI software.

Managing Custom Properties

You manage all custom properties of a graphic using the Edi t Custom Propertie s dialog box.
From the Custom Properties dialog box, you can:
 Add and delete custom properties.
 Set the types and data types of custom properties.
 Set the default values of custom properties.
 Determine the visibility of each custom property.
 Add a description for each custom property.
 Validate and clear custom properties.
You can also:

211
Creating and Managing Industrial Graphics User Guide Using Custom Properties

 Rename custom properties.

 Link custom properties to external sources.
 Override custom properties with new values.
 Revert custom property values to their default values.

Adding and Deleting Custom Properties

You can add and delete custom properties from a graphic.
To add a custom property
1. Click the canvas to cancel any selected elements.
2. On the Special menu, click Custom Propertie s. The Edit Custom Propertie s dialog box appears.
3. Click the Add icon. A new line is added in the custom properties list.
4. Type a name for the new custom property and click Enter.
You can see the name of the graphic and the custom property in the header of the dialog box.
o If the graphic includes an embedded graphic, the name of the custom property cannot be the
same as the name of the embedded graphic or of an element of the embedded graphic.
o If the graphic includes a script, the name of the custom property and a nested class property in
the script cannot be the same.
5. Configure the custom property on the right side of the Edit Custom Properties dialog box. For more
information, see Configuring Custom Properties on page 212.
6. Click OK.
To delete a custom property
1. Click the canvas to cancel any selected elements.
2. On the Special menu, click Custom Propertie s. The Edit Custom Propertie s dialog box appears.
3. Select the custom property you want to delete and click the Remove icon. When a message appears
requesting confirmation to delet e the custom property, click Yes. The custom property is removed
from the custom properties list.
4. Click OK.

Configuring Custom Properties

You can configure custom properties when you create them or at a later point of time.
To configure a custom property
1. Click the canvas of the graphic.
2. On the Special menu, click Custom Propertie s. The Edi t Custom Propertie s dialog box appears.
3. Select the custom property you want to edit. The configuration for the selected custom property
appears at the right of the dialog box.

Note: The header of the configuration area shows the graphic name on the right, fo r example
"Symbol_001," and it shows the custom property name on the left, for example "MyCustomProperty." Its
reference in a script would be "Symbol_001.MyCustomP roperty."

4. In the Data Type list, click the data type of the custom property. You can select one of the following:
Data Type Graphic

212
Using Custom Properties Creating and Managing Industrial Graphics User Guide

Boolean

Double

Elapsed Time

Float

Integer

String

Time

5. If you want to:

o Make the property read-only at design time and prevent further changes to it when the graphic is
embedded into another graphic, click the Lock icon.
o Make the property read-only at run time and prevent its value being c hanged, click the Lock icon.
6. In the Default Value box, type a literal value, referenc e, or expression or browse for a reference
using the Brow se icon.
7. If the selected data type is String, Time or Elapsed Time, you can click the T icon or tag icon.
o Select the T icon to indicate that the default value is a static value.
o Select the tag icon to indicate that the default value is a reference to a value.
8. In the Vi sibility box, configure how the graphic is visible. Do one of the following:
o Click Public if you want the custom property to be visible and can be used in a source graphic if
the graphic is embedded.
o Click Private if you want the custom property to be hidden and no reference be made to it
outside of the defining graphic.
9. In the De scription box, type a meaningful description for the custom property.

Validating Custom Properties

You can validate custom properties to track down and avoid configuration errors.
To validate a custom property
1. Click on the canvas to cancel any selected elements.
2. On the Special menu, click Custom Propertie s. The Edi t Custom Propertie s dialog box appears.
3. Select the custom property you want to validate and click the Validate icon. Required boxes are
highlighted by a red box, possible errors appear in the status area under the custom properties list.

Clearing the Configuration of Custom Properties

You can clear the configuration of custom properties. This resets the properties to their default values.
To clear the configuration of a custom property
1. In the Edit Custom Properties dialog box, select the custom property.
2. Click the Clear icon. The configured values are reset to their default values.

213
Creating and Managing Industrial Graphics User Guide Using Custom Properties

Renaming Custom Properties

You can rename custom properties.
To rename a custom property
1. In the Edit Custom Properties dialog box, select the custom property.
2. Click the custom property again. The custom property is in edit mode.
3. Type the new custom property name and click Enter. The custom property is renamed.

Note s:
If the graphic includes an embedded graphic, the name of the custom property cannot be the same as
the name of the embedded graphic or of an element of the embedded graphic.
If the graphic includes a script, the name of the custom property and a nested class property in the script
cannot be the same.

Linking Custom Properties to External Sources

You can link custom properties of a graphic directly to external sourc es by:
 Configuring objects that point to external sourc es and then point the custom property at the
corresponding attribute referenc e.
 Configuring a special reference syntax to your HMI software in the Default Value box. When you
embed the graphic into a window in your HMI soft ware, the referenced tags connect to the tags of
your HMI software.

Note: ArchestrA custom properties referencing InTo uch tags which have hyphens in their names will not
work in run time. For example, "InTouch: TAG -1" will not work in run time.
The “InTouch: ” prefix is not needed for an InTouch Standalone application with Industrial Graphics. Tag
browsing and runtime tag binding will work without the “InTouch:” prefix.

Overriding Custom Properties

You can override the custom property default values of embedded graphics within graphics in the
Industrial Graphic Editor or your HMI software.

Note: When you override the custom property, it appears bold in the custom property list.

You can override the following custom property values:

 Default value
 Visibility, but only from public to private, not privat e to public
 Description
 Locked state
 String mode setting
You cannot override the data type of a custom property.

Reverting to Original Custom Property Values

After you override a c ustom property value, you can revert to the original custom property value. This can
be done for overridden custom properties of embedded graphics in other graphics and in your HMI
software.

214
Using Custom Properties Creating and Managing Industrial Graphics User Guide

To revert to the original custom property value

 In the Edit Custom Propertie s dialog box, click the Revert icon. The custom property value reverts
to its original value.

Examples of Using Custom Properties

Possible uses for using custom properties are:
 A "TankLevel" custom property of type Writable Attribute can be given a value of "[Link]".
 A "MaxFillLevel" Custom Property of type Expression can be given a value of "[Link] -
200".

Using Custom Properties to Show Historical Summary Data

You can add a custom property to reference historical data collected over a specified period during run
time. The Historian can transform this data to create a set of analog or state statistics that can be shown
by Industrial graphic animation during run time.
For example, consider an example of a temperature met er graphic that shows an optimal temperature
range and you would like to know what the average temperature has been over the last 15 minutes. You
can add a Value Display animation that shows the average temperature derived from analog
temperature dat a saved in the Historian and referenced by a custom property.

Analog Statistical Summary Data

A custom property analog reference can subscribe to statistics from analog data collected over a defined
summary period and saved to the Historian. The following table lists the analog historical statistical data
that can be specified for a custom property.

Analog
Statistical
Data Description

A verage A time-weighted average calculated from values within a summary period. The
average is calculated at the end of the summary period.

Count A value count calculated from values within a summary period. The count is
calculated at the end of the summary period.

First The first value that occurs within a summary period based on the actual timestamp
within the summary period.

Integral An integral value calculated from values within a summary period. The integral is
calculated at the end of the summary period.

Maximum The first maximum value that occurs within a summary period.

215
Creating and Managing Industrial Graphics User Guide Using Custom Properties

Analog
Statistical
Data Description

Minimum The first minimum value that occurs within a summary period.

PercentGood The ratio of labeled "good" quality data to all dat a within the summary period. The
ratio is expressed as a percentage in the range 0 to 100. PercentGood is calculated
at the end of the summary period.

StdDev Time weighted standard deviation calculated from values within a summary period.
The value is calculated using time weighted sums (Integrals) and time weighted
sums of squares (IntegralOfSquares) values.

Last The last value that occurred in the summary period based on the actual timestamp
within the summary period.

State Statistical Summary Data

The Historian stores and retrieves values, where eve ry value gets stored with some timestamp and
associated quality. This triplet of value, timestamp, and quality is called V TQ and constitutes the smallest
addressable piece of data in the Historian data model.
State summary statistics summarize the states of a value. Four different state value data types are
possible: analog (integer), Boolean, string, and Null.

Note: Possible Boolean state values are 0 or 1. True or False strings are not supported.

A custom property state reference can subscribe to state s tatistics from the Historian as static text, an
expression or reference, an aggregate function name, minutes, and state value.
The Historian returns the V TQ for one cycle of a specified state. The quality returned is always
OpcQuality. The time returned is always the summary period start time. Value and Time differ bas ed on
the aggregate function.
The following table lists state historical statistical data that can be specified for a custom property.

State
Statistical
Data Description

A verage A verage time a state occurred and completed within a summary period. A partial state
within a summary period is ignored for an average calculation. (StateTimeA vgContained)

Minimum Minimum time a state occurred and completed within a summary period. A partial state is
ignored. (StateTimeMinContained)

Maximum Maximum time a state occurred wit hin a summary period. (StateTimeMax)

216
Using Custom Properties Creating and Managing Industrial Graphics User Guide

State
Statistical
Data Description

Count Number of times a state occurred and completed wit hin a summary period. A partial state is
not counted. (StateCountContained).

Percent Percentage of the summary period that a state occurred. (StateTimePercent)

Total Total time a state occurred within a summary period. (StateTimeTot al)

Historical Summary Period

An Industrial graphic custom property can show historical statistics from Historian dat a over a defined
summary period. During design time, you must specify the summary period to collect Historian summary
data by entering values for the Duration and StartTime options shown on the Edit Custom Properties
dialog box.
These assigned values are passed as input parameters of the new custom property. A value in minut es
must be assigned to the Duration option.
The StartTime option can be left blank. Auto refresh is applied if a StartTime value is not specified.
 If a start time is not specified, then the start and end times of the summary period are calculat ed as:
Start Time = Current Time - Duration
End Time = Current Time
 If a start time is specified, then the start and end times of the summary period are calculated as:
Start Time = StartTime option value
End Time = Start Time + Duration
The Duration option can accept a negative number when a start time is specified. When Duration is
assigned a negative number, the start time input parameter value becomes the end time of the summary
period. The start time is calculated using the formula shown below:
End Time = Start Time assigned option value
Start Time = End Time + Duration (in this case it is negative value)
Duration can accept values from 1 minut e to 10080 minutes, which is one week. StartTime must be
within datetime Min and Max Value. During run time, history summary data is auto refreshed at an
interval that is 25 percent of its duration length when a StartTime value is not specified.

Showing Statistical Summary Data

The following procedure ex plains how to specify custom property options to subscribe to historical
statistical data. Before completing this procedure, you must have object or other data that is saved to the
Historian and enabled for statistics.
To show historical summary data using custom properties
1. Open the Industrial Graphic Editor.
2. Add a custom property to an Industrial graphic.
a. Click the canvas to cancel any selected elements.

217
Creating and Managing Industrial Graphics User Guide Using Custom Properties

b. On the Special menu, click Custom Propertie s. The Edit Custom Properties dialog box
appears.
c. Click the Add icon. A new line is added in the custom properties list.
d. Type a name for the new historical summary custom property and click Enter.
e. You can see the names of the graphic and custom property in the header of the dialog box.
3. Select Hi storySummary from the Data Type field.

Important: The History Summary data type only works with ArchestrA object attributes intended for
InTouch OMI ViewApps or InTouch HMI managed applications. Do not attempt to use custom
properties assigned the History Summary data type in InTouch HMI Modern applications.

The Edit Custom Propertie s dialog box updates to show fields specific to the Hi storySummary
data type.

4. Enter a reference to dat a saved in the Historian in the Reference Name field.
The icon to the left of the Reference Name field toggles input to the field as Static Text or
Expression or Reference mode.
Auto-Detect
The Historian server is auto-det ected from the AppEngine on which the reference attribute is
running. For example, if the Reference Name field is set to UDO.UDA1, the reference is set to the
Historian server name configured for the AppE ngine on which UDO is running.
Expression
When an expression or reference is typed in the Reference Name field, a connection is made to the
specified Historian Server. The reference can be an external reference like an object attribut e or a
custom property.

Note: A reference cannot be made to historical data from an InTouch tag.

5. Select the type of historical statistics by selecting an option from the drop -down list of Hi story
Statistics.
A verage is the default type of historical statistic. The following table shows the historical statistics
options for analog and state summary data.

218
Using Custom Properties Creating and Managing Industrial Graphics User Guide

Hi storical Statistics Analog Hi stori cal Data State Historical Data

A verage l l

First l

Minimum l l

Maximum l l

Count l l

StdDev l

Integral l

PercentGood l

Percent l

Total l

Last l

6. Set the length of the summary historical period in minutes by entering a value in the Duration field.
Acceptable Duration values are from 1 to 10080 and the default is 5. Duration can be specified as an
integer, an expression, or a reference. For more information about possible Duration values, see
Historical Summary Period on page 217.
7. Set the start time of the of the summary period in the StartTime field.
A start time can be specified as static text, an expression, or a reference. The default start time is the
current time.
A time for StartTime is optional and can be left blank. Auto refresh is applied if a StartTime value is
not specified.
For more information about setting a start time, see Historical Summary Period on page 217.
8. Set the type of Historian summary dat a in the State field.
A State value can be expressed as an integer constant, static text, an expression, or a reference.
If a string value is provided, then string state summary data is queried from the Historian. If an integer
value is entered, the Historian query is for analog state summary data. If a Boolean state summary
value is provided, the State value must be 0 or 1.
State can be left empty. If empty, the default query is for analog summary data.
To get summary historical data for a Null state, enter "NULL" in the State field. The query checks for
OpcQuality equal to opcnull and StringValue "NULL" in the result.

Using Binding in Custom Properties

ArchestrA object scripting supports a type called "Indirect". It enables you to bind a variable to a
reference and read and writ e to it. This is done using the BindTo() method.

Note: The BindTo() method binds a variable to a reference as long as the graphic is shown.

For example, the local script variable pt r is defined and bound to the reference ud1_001.Int1.

219
Creating and Managing Industrial Graphics User Guide Using Custom Properties

dim ptr as indirect;

[Link]("ud1_001.Int1");
Within the same script you can use the indirect variable pointer to read from and write to the attribute
ud1_001.Int1.
Industrial Graphics also use scripting in the same way as the scripting of Application Server.
However, as an Industrial graphic can be embedded into an InTouch window and run anonymously, the
time it takes to connect to the referenc e can be longer than one scan cycle.
For that reason, you cannot use the indirect variable immediately after it is bound to a reference to read
from and writ e to it.
dim ptr as indirect;
[Link]("ud1_001.Int1");
ptr = 42;
In the example, the value 42 cannot be written to the referenc e ud1_001.Int 1 as the binding takes longer.
To avoid this problem, you can modify your Industrial graphic script to write the value after it is ensured
that the binding is complete. The completion of the binding is indicated by the quality of the indirect
variable.
You can configure a loop in the script to query for the quality and use the indirect variable to read from
and write to the reference when its quality is good.

Note: Make sure to include an exit condition in your script, so that the script does not hang if the binding
cannot be made.

The following example script shows you how to do this:

dim ptr as indirect;
dim timeout;
[Link]("ud1_001.Int1");
while (IsGood(ptr)==0); {if quality not good}
timeout=timeout+1; {increase the timer}
if timeout>10000 then {if timer reaches threshold}
exit while; {continue script execution}
endif;
endwhile; {otherwise just loop for a while}
ptr=42; {try to write to value to the reference}
A while loop is included in the script before the first write attempt. The while loop provides additional time
for the graphic to connect to the reference. If the quality is good, then the script exits from the while loop.

Note: Similar behavior can occur when you try to bind to a reference of an object that is hosted on a
different AppEngine.

Changing the Expression or Reference of a Custom Property

at Run Time
You can change the expression or referenc e of a custom property at run time by calling the
SetCustomPropertyValue() method on the graphic using a client script:
SetCustomPropertyValue([Link] name, [Link] value, [Link]
isConstant);
You can select this method using the Element Browser from within the Industrial Graphic Editor. This
method is supported only for ArchestrA client scripts.
This method has three parameters:
 name - Name of the custom property to be modified on the graphic. This parameter is of type string,
and it can be a referenc e or a constant.

220
Using Custom Properties Creating and Managing Industrial Graphics User Guide

 value - The new value to be set. This parameter is of type string, and it can be an expression,
reference, or constant. If the value is given in quot es ("), then the value is consi dered a constant. If
the value is given wit hout quotes, then the value of the expression is considered a reference.
 isConstant - A flag that indic ates whet her the new value will be evaluated as a constant or a
reference. This parameter is of type B oolean. If it is set to True (1), then the new value will be treated
as a constant. If it is set to False (0), then the new value will be treat ed as a reference. This
parameter only applies when the value parameter is a reference or constant and the c ustom property
specified in the name parameter is a string or time type. This parameter has no meaning if the
custom property is an integer, float, Boolean, or double type.

Note: The isConstant parameter does not override the type of input for the value parameter. The value
parameter itself can be either a constant or a reference depending on whether it is enclosed in quot es.
The isConstant parameter is only determining how t he actual value (c oming from the value parameter) is
evaluated.

The whole expression or reference of the custom property is replaced with the new value, regardless if it
is overridden or not. No partial replacement is supported.
Only public custom properties on the graphic can be changed.
When the method ex ecutes, it overrides any modifications done by previous IOSet RemoteReference()
calls from a native InTouch script.
For an example of configuring the custom property as a reference, say you have a Motor_001 object with
the string field attribute name State that stores the current state of the motor ("Running" or "Stopped").
You also have an Industrial graphic that has the string data type custom property MotorState. The
following script code will set the MotorState custom property to Motor_ [Link] in run-time:
[Link]("MotorState","Motor_001.State",False);
As a result of the call, the function will set the string custom property [Link] to
"Motor_001.State" as a reference. The string custom property [Link] will resolve that
reference and update its value with the reference value ("Running" or "Stopped").
For an example of configuring the custom property as a constant, say you have a Motor_001 object with
the Boolean field attribute State that reflects the current state of the motor (True or False). You also have
an Industrial graphic that has the string data type custom property MotorState. The following script code
causes the MotorState c ustom property to hold the state of equipment —"Running" or "Stopped"—as text
based on the value returned for Motor_001:
IF Motor_001.State THEN
[Link]("MotorState","Running",True);
ELSE
[Link]("MotorState","Stopped",True);
ENDIF;
As a result of the call, the function will set the string custom property [Link] to "Running"
or "Stopped," depending on the vaue of Motor_001.State.

221
 Creating and Managing Industrial Graphics User Guide

C HAPTER 10
Animating Graphic Elements
About Animations
You can use animations to change the appearance of graphic elements at run time. Animations are
driven by data that comes from attribute or tag values and expressions as well as element properties.
You can use:
 Visualization animations such as visibility, fill style, line style, text style, blinking, percent fill
horizontal, percent fill vertical, horizontal location, vertical location, width, height, orientation, value
display or tooltip.
 Interaction animations such as disable, user input, horizontal slider, vertical slider, pushbutton,
action script, show graphic or hide graphic.
 Element-specific animations for the Status element and Windows common control elements.
Each element in your Industrial graphic can have one or more animations. You can disable and enable
individual animations. You can also cut, copy and paste animations between elements. Only animations
supported by the target element are pasted.
You can also substitute references and strings in animations.

Note: Not all animations are available for all element types. Some animations do not make logical sense,
such as line style with a text element. You cannot select or copy these invalid combinations.

Adding an Animation to an Element

You can add one or more animations to a single element in your Industrial graphic.
To add an animation to an element
1. Select the element to which you want to add an animation.
2. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.
You can also add an animation from the Animation Summary in the lower right corner of the
Industrial Graphic Editor.
3. Click the Add icon. The list of animations appears.
4. Select an animation from the list. The animation is added t o the A nimation list. You can configure the
selected animation from the Edit Animations dialog box.

Note: Depending on the animation type, you may get an animation state selection panel instead. For
more information, see Reviewing which Animations are Assigned to an Element on page 223.

Reviewing which Animations are Assigned to an Element

You can review which animations are assigned to an element and change the number of animations or
their configuration at the same time.

223
Creating and Managing Industrial Graphics User Guide Animating Graphic Elements

To review which animations are assigned to an element

1. Select the element. The assigned animations appear in the Animation Summary in the lower right of
the Industrial Graphic Editor.
You can also review which animations are assigne d to an element by double-clicking it.
2. Select an animation to view further information on how the element is configured with t hat animation.

Showing and Hiding the Animation List

You can show or hide the Animation list. If you hide the Animation list, the configuration space expands,
giving you more space to configure the animations.
To hide the Animation list
 In the Edit Animations dialog box, click the Hide icon. The Animation list hides and the
configuration space expands.
To show the Animation list
 In the Edit Animations dialog box, click the Show icon. The Animation list appears and the
configuration space reduces to its default width.

Removing Animations from an Element

You can remove an animation from an element by using the Edit Animations dialog box. You can
remove animations from an element for:
 Individual animations
 All animations at the same time
To remove an animation from an element
1. Select the element in which you want to remove an animation.
2. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.
You can also remove an animation from the Animation Summary in the lower right of the Industrial
Graphic Editor.
3. Select the animation you want to remove from the Animation list.
4. Click the Remove icon. A message appears.
5. Click Yes. The animation is removed from the list and no longer associated with the element.
To remove all animations from an element
1. Select one or more elements from which you want to remove all animations.
2. Do one of the following:
o Right -click, point to Animations and then click Clear.
o On the Edit menu, point to Animations, and then click Clear.
All animations are removed from the selected elements.

Enabling and Disabling Animations

You can enable or disable animations for an element. When you disable an animation, its configuration is
not lost. This lets you see, for example, each animation independently from each ot her.
To disable an animation
1. Select the element with the animation you want to disable.

224
Animating Graphic Elements Creating and Managing Industrial Graphics User Guide

2. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.
You can also disable animations from the Animation Summary in the lower right corner of the
Industrial Graphic Editor.
3. Locate the animation you want to disable from the Animation list on the left of the dialog box.
4. Select Di sabled from the list of that row.
5. Repeat for any other animations you want to disable and click OK when you are done.
To enable an animation
1. Select the element with the animation you want to enable.
2. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.
You can also enable animations from the Animation Summary of the Industrial Graphic Editor.
3. Locate the animation you want to enable from the Animation list.
4. Select Enabled from the list of that row.
5. Repeat for any other animations you want to enable and click OK when you are done.

Validating the Configuration of an Animation

You can validate the configuration of an animation. If the configuration contains an error, an exclamation
mark appears next to the Animation icon.
Examples of animation configuration errors include:
 Animation is disabled
 Syntax errors such as data mismatches
 Required values not specified
 Specified values out of valid range
To validate the configuration of an animation
1. Select the element that contains the animations you want to validate.
2. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.
3. Select the animation you want to validate.
4. Click the Validate icon. The currently selected animation is validated. Possible errors are
highlighted.

Clearing the Configuration from an Animation

You can clear all data from the configuration boxes of an animation and reset the settings to their
defaults.
To clear all data from the configuration boxes of an animation
1. In the Edit Animations dialog box, select the animation.
2. In the configuration panel, click the Clear icon. All data from the configuration boxes is cleared and
the settings are reset to their defaults.

Connecting Animations with Data Sources

You can connect animations to
 ArchestrA attributes

225
Creating and Managing Industrial Graphics User Guide Animating Graphic Elements

 Element properties
 Custom properties
 InTouch tags
For some input boxes, you can specify if the configuration is a static value or a reference by setting the
input mode.

Connecting Animations with ArchestrA Attributes

You connect the element animation and appearance with an ArchestrA attribute. The ArchestrA attribute
provides values at run time that control the behavior and appearance of the element.
For example, a rectangle element fill animation can be connected to the run -time value of the ArchestrA
attribute Tank_001.PV.
You can brows e all A rchestrA attributes, Element Properties, and InTouch tags with t he Galaxy Browser.
You can select InTouch tags directly from the Galaxy Browser when working within the animation editor
or the script editor. For more information, see Using the Galaxy Browser InTouch Tag Brows er Tab on
page 229.
To connect animations to attribute references using the Galaxy Browser
1. Select the element.
2. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.
3. Select the animation from the Animation list.
4. Select the parameter.
5. Click the browse button. The Galaxy Browser appears.
6. Click the Attribute Brow ser tab.
7. Select an AutomationObject from the list shown in the left pane. The attributes associated with the
selected AutomationObject are shown in the right pane.
8. Select an attribute from the right pane and click OK. The selected attribute referenc e appears in the
configuration box.
9. Repeat for any other animation parameters. Click OK when you are done.

Connecting Animations with Element Properties

You can connect the element animation and appearance with a property of any element on the canvas.
You can browse the properties of all elements on the canvas with the Galaxy Brows er.
You cannot connect animations to properties of elements that are part of an embedded gra phic on the
canvas. You can connect animations to the public custom properties of embedded symbols.
To connect animations to element property references using the Galaxy Browser
1. Select the element.
2. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.
3. Select the animation from the Animation list.
4. Select the parameter.

226
Animating Graphic Elements Creating and Managing Industrial Graphics User Guide

5. Click the browse button. The Galaxy Browser appears.

6. Click the Element Browser tab to show the Element Browser page.

7. Click the Element Browser tab to show the Element Browser page.
8. From the Elements List, select an element. The right pane shows the properties of the selected
element.
9. Select a property and click OK. The selected element and property appears in the configuration box.

Connecting Animations with Custom Properties

You can connect and element animation and appearance with a custom property of:
 The current graphic
 An embedded graphic on the canvas

227
Creating and Managing Industrial Graphics User Guide Animating Graphic Elements

To connect animations to element property references using the Galaxy Browser

1. Select the element.
2. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.
3. Select the animation from the Animation list.
4. Select the parameter.
5. Click the browse button. The Galaxy Browser appears.
6. Click the Element Browser tab. The Element Brow ser tab appears.

7. From the Elements List on the left, select the graphic. The right pane shows the custom properties
and ot her properties of the selected graphic.
8. Select a custom property and click OK. The selected custom property appears in the configuration
box.

Connecting Animations with InTouch Tags

You can connect an element animation and appearance to an InTouch tag. The InTouch tag provides
values at run time that control the animation and appearance of the element.
You can connect an element animation to an InTouch tag by:
 Configuring a reference with the intouch:tag syntax. This syntax is not required for referencing tags
in an InTouch HMI stand-alone application using Industrial Graphics.
 Using a custom property and configuring the custom property in the embedded Industrial graphic in
InTouch to reference an InTouc h tag. For more information, see the AVEVA InTouch HMI and
ArchestrA Integration Guide.
 Configuring an ArchestrA attribute reference to the managed InTouchViewA pp object that contains
the InTouch tags as attributes. The InTouchViewApp object uses the functionality of an
InTouchP roxy object.
 Configuring an ArchestrA attribute reference to an InTouchP roxy object that contains the InTouch
tags as items. This is a special case of configuring an ArchestrA attribute reference.

228
Animating Graphic Elements Creating and Managing Industrial Graphics User Guide

Using the InTouch:Tagname Syntax

When you use the intouch:tagname syntax, the animation connects to the InTouch tag of the node the
graphic is used. There are some restrictions on how you can use this syntax:
 Unlike in Application Server, you cannot use true and false as Boolean values. Use 1 and 0 instead.
 If you want to make a reference to an InTouch SuperTag, use the following syntax instead:
attribute("intouch:SuperTag\Member")

Connecting Animations with InTouchViewApp Attributes

To be able to brows e for InTouch tags, you must first:
 Create a managed InTouch application by deriving an InTouc hViewA pp template and configuring it
in WindowMaker.
 Derive an instance of the InTouchViewA pp derived template.
The InTouch tags are represented by attributes of the InTouchViewApp object instance.

Using the Galaxy Browser InTouch Tag Browser Tab

You can select InTouch tags directly from the Galaxy Brows er when configuring a reference requiring an
InTouch tag for an Industrial graphic animation or client script.
When invoked from either the animation editor or the script editor, the Galaxy Browser displays an
InTouch Tag Brow ser tab in line with the Attribute Brow ser and Element Browser tabs.
The InTouch Tag Brow ser tab lists all InTouchViewApp instanc es and templates for the current Galaxy
in the left pane. The right pane displays the InTouch tags for the selected InTouchViewApp. The
DotFields: list box will display the dotfields associated with the selected tag.
The Dotfields list box below the right pane enables you to specify dotfields for the selected tag.
The InTouch Tag Browser tab behaves as follows:
 The InTouch Tag Browser functionality is available only from the animation editor or the script editor.
 The Galaxy Browser reads InTouch tags from the Tagname Dictionary.
 The Tagname Dictionary component is installed and available to the Galaxy Browser whether or not
InTouch HMI is installed.
 Tags are refreshed only when the Galaxy Browser is closed and reopened.
 All tags remain in memory until you close and reopen the Galaxy Browser.
 If the InTouchViewA pp is checked out by the current user, then the Galaxy Browser reads the latest
Tagname Dictionary content of that InTouc hViewA pp.
 If the InTouchViewA pp is checked in and is accessed by any user, then the Galaxy Brows er always
reads the checked-in version of the Tagname Dictionary.
 If the InTouc hViewA pp is checked out by a user other than the current user, the Galaxy Browser
reads the most recently checked in Tagname Dictionary of that InTouchViewApp.
 If you select an InTouchViewApp template, the output reference string syntax is
<InTouch:selectedTag>. If you select an InTouchViewApp instance, the output reference string
syntax is <SelectedInTouc hViewA ppInstanc [Link]>.
To connect animations to InTouch tags
1. Select the element.

229
Creating and Managing Industrial Graphics User Guide Animating Graphic Elements

2. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.
3. Select the animation from the Animation list.
4. Select the parameter.
5. Click the browse button. The Galaxy Browser appears.
6. Click the InTouch Tag Brow ser tab to show the InTouch Tag Brow ser page.
7. Select the InTouchViewApp object that corresponds to the managed InTouc h application. The right
panel shows the InTouch tags.
8. Select a tag and click OK. The selected ArchestrA reference to an InTouch tag appears in the
configuration box.

Setting the Input Mode

In some boxes you can enter a value or expression that uses static and/or references to attributes and
element properties. Boxes that support both input methods have an Input Mode selection icon.
Select:
 Static Mode input icon to specify literal static value or expression such as 3.141 or "Test".
 Reference Mode input icon to specify a reference to an attribute or element property such as:
Tank_001.PV.

Note: To use static string values with or without references in Reference mode, you can enclose them
with double-quotes such as: "Description: "+Tank _001.Desc

Managing Animations
You can easily manage animations in the Edit Animations dialog box. You can:
 Change the way the list of animations appears.
 Switch easily between multiple animations of an element.
You can also do this for the Animation Summary in the lower right corner of the Industrial Graphic Editor.

Organizing the Animation List

You can organize the list of animations alpha betically or by category.
To organize the Animation list
 In the Edit Animations dialog box, click the:
 Alphabetic sort icon to sort alphabetically.
 Category icon to sort by category.

Switching between Animations

If you configure more than one animation for an element, you can easily switch between their
configuration panels without having to use the Animation list. This is particularly useful when the
Animation list is hidden.
To switch between animations
 In the Edit Animations dialog box, on the configuration panel click the left or right arrow icon.
The configuration panel changes to the configuration panel of the previous or next animation.

230
Animating Graphic Elements Creating and Managing Industrial Graphics User Guide

Configuring Common Types of Animations

E very animation type has its own set of configuration parameters. This section shows you how to
configure eac h type of animation and what references it can use.
You can configure:
 Visualization animations such as:
o Visibility animations
o Fill style, line style or text style animations
o Blink animations
o Alarm Border animations
o Horiz ontal or vertical percent fill animations
o Horiz ontal or vertical location animations
o Width or height animations
o Point animations
o Orientation animations
o Value display animations
o Tooltip animations
 Interaction animations such as:
o Disable animation
o User input animation
o Horiz ontal and vertical slider animations
o Pushbutton animations
o Action script animations
o Show or hide animations

Configuring a Visibility Animation

You can configure an element with a visibility animation.
To configure an element with a visibility animation
1. Select the element.
2. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.
3. Click the Add icon and select Visibility. The visibility animation is added to t he Animation list and the
Visibility configuration panel appears.
4. In the Boolean box, type a Boolean numeric value, attribute reference or ex pression.
5. Select True, 1, On if you want the element to show, when the expression is true, otherwise select
False, 0, Off.

Configuring a Fill Style Animation

You can configure an element with a:
 Boolean fill style animation.
 Truth table fill style animation.

231
Creating and Managing Industrial Graphics User Guide Animating Graphic Elements

The truth table fill style animation lets you:

 Associate expressions of any data type supported by ArchestrA with a fill style.
 Define as many fill styles as you require and associate each one with a condition.
You can define the conditions by specifying an comparison operator (=, >, >=, <, <=) and a breakpoint,
which itself can be a value, an attribute reference, or an expression.
You can add conditions, delete conditions, and also change the order in whic h the conditions are
processed.

Configuring a Boolean Fill Style Animation

You can configure an element with a discrete fill style animation.
To configure an element with a Boolean fill style animation
1. Select the element.
2. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.
3. Click the Add icon and select Fill Style. The fill style animation is added t o the A nimation list and the
Fill Style state selection panel appears.
4. Click the Boolean button. The Boolean Fill Style configuration panel appears.
5. In the Boolean box, type a Boolean numeric value, attribute reference or ex pression.
6. Clear Color in t he True, 1, On area or False, 0, Off area if you do not want a different fill style for the
true or false condition than the default fill style.
7. In the True, 1, On area, click the color box to configure the fill color when the expression is true. The
Select FillColor dialog box appears. For more information, see Setting Style on page 151.
8. In the Fal se, 0, Off area, click the color box to configure the fill color when the expression is false.
The Select FillColor dialog box appears. For more information, see Setting Style on page 151.
9. Click OK.
To set default fill style in a Boolean fill style animation
1. Open the Edit Animations dialog box, Boolean Fill Style panel.
2. In the Element Fill Style area, click the color box to select a style from the Select FillColor dialog
box.
To use default fill style in a Boolean fill style animation
1. Open the Edit Animations dialog box, Boolean Fill Style panel.
2. Clear Color to use the corresponding default fill style.

Configuring a Truth Table Fill Style Animation

You can configure an element with a fill style animation based on a truth table.
To configure an element with a truth table fill style animation
1. Select the element.
2. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.
3. Click the Add icon and select Fill Style. The fill style animation is added to the A nimation list and the
Fill Style state selection panel appears.
4. Click the Truth Table button. The Truth Table Fill Style configuration panel appears.
5. In the Expre ssion Or Reference area:

232
Animating Graphic Elements Creating and Managing Industrial Graphics User Guide

o Select the data type of the expression from the list.

o Type a value, attribute reference or expression in the text box.
6. If the data type of the ex pression is string or internationalized string, you can specify to ignore the
case by selecting Ignore Case.
7. In the Truth Table, click the color box in the Color column. The Select FillColor dialog box appears.
For more information, see Setting Style on page 151.
8. In the Operator column, select the comparison operator.
9. In the Value or Expression column, type a value, attribute reference, or ex pression.
10. To add further conditions, see To add a condition to a truth table fill style animation.
11. Click OK.
To set the default fill style for a truth table fill style animation
1. Open the Edit Animations dialog box, Truth Table Fill Style panel.
2. In the Element Fill Style area, click the color box. The Select FillColor dialog box appears. For
more information, see Setting Style on page 151.
To use the default fill style in a truth table fill style animation
1. Open the Edit Animations dialog box, Truth Table Fill Style panel.
2. Locate the condition for which you want to set the style to default style.
3. Clear the mark for that condition in the Color column of the truth table. The associated style is the
same as the style for the Element Fill Style.
To add a condition to a truth table fill style animation
1. Open the Edit Animations dialog box, Truth Table Fill Style panel.
2. Click the Add icon. An additional condition is added to the truth table.
3. Configure color, operator and breakpoint value according to your requirements.
To delete a condition from an analog fill style animation
1. Open the Edit Animations dialog box, Truth Table Fill Style panel.
2. Select the condition you want to delete.
3. Click the Remove icon. The condition is removed.
To change the processing order of fill style conditions
1. Open the Edit Animations dialog box, Truth Table Fill Style panel.
2. Select the condition you want to move up or down the condition list in order for it to be processed
sooner or lat er.
3. Click the:
o Arrow up icon to move the condition up in the trut h table.
o Arrow down icon to move the condition down in the truth table.
For ex ample, you want to model an analog fill color animation that describes the following conditions:
o When the attribute TankLevel_001.PV is 0 then the fill style is solid black.
o When the attribute TankLevel_001.PV is smaller than 20, then the fill style is solid red.
o When the attribute TankLevel_001.PV is greater than the attribute [Link] then the
fill style is red with a diagonal pattern.

233
Creating and Managing Industrial Graphics User Guide Animating Graphic Elements

o In all other cases, the fill style is solid blue.

Configuring a Line Style Animation

You can configure an element with a:
 Boolean line style animation.
 Truth table line style animation.
The truth table line style animation lets you:
 Associate expressions of any data type supported by your HMI software wit h a line style.
 Define as many line styles as you want and associate eac h one with a condition.
You can define the conditions by specifying an comparison operator (=, >, >=, <, <=) and a breakpoint,
which itself can be a value, an attribute reference or an expression.
You can add conditions, delete conditions and also change the order in which the conditions are
processed.

Configuring a Boolean Line Style Animation

You can configure an element with a Boolean line style animation. You can use a new style or use all or
parts of the default appearance of a line for:
 Line style.
 Line thickness.
 Line pattern.
To configure an element with a Boolean line style animation
1. Select the element.
2. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.
3. Click the Add icon and select Line Style. The line style animation is added to the Animation list and
the Line Style state selection panel appears.
4. Click the Boolean button. The Boolean Line Style configuration panel appears.
5. In the Boolean box, type a Boolean numeric value, attribute reference or ex pression.
6. In the True, 1, On area, click the Color box to configure the line style when the expression is true.
The Select FillColor dialog box appears. For more information, see Setting Style on page 151.
7. In the Weight box, type a value for the line thickness when the expression is true.
8. From the Pattern list, select a line pattern for the line when the expression is true.
9. Repeat the above steps for the false condition in the False, 0, Off area.
10. Click OK.
To set default line style, thickness and/or pattern in a Boolean line style animation
1. Open the Edit Animations dialog box, Boolean Line Style panel.
2. In the Element Line Style area, select a style, type a value for the width and select a pattern for the
default Boolean line style.
To use default line style, thickness and/or pattern in a Boolean line style animation
1. Open the Edit Animations dialog box, Boolean Line Style panel.

234
Animating Graphic Elements Creating and Managing Industrial Graphics User Guide

2. In the True, 1, On or False, 0, Off areas, clear Color, Weight and/or Pattern to use the
corresponding default style, weight and/or pattern.

Configuring a Truth Table Line Style Animation

You can configure an element with a truth table line style animation.
To configure an element with a truth table line style animation
1. Select the element.
2. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.
3. Click the Add icon and select Line Style. The line style animation is added to the Animation list and
the Line Style state selection panel appears.
4. Click the Truth Table button. The Truth Table Line Style configuration panel appears.
5. In the Expre ssion or Reference box:
o Select the data type of the expression from the list.
o Type a value, attribute reference or expression in the text box.
6. If the data type of the ex pression is string or internationalized string, you can specify to ignore the
case by selecting Ignore Case.
7. In the Truth Table, click the color box in the Color column. The Select FillColor dialog box appears.
For more information, see Setting Style on page 151.
8. Select the truth options. Do one of more of the following:
o In the Weight column, type a value for the line weight.
o In the Pattern column, select a line pattern.
o In the Operator column, select the comparison operator.
o In the Value or Expression column, type a value, attribute reference or expression.
o To add further conditions, see To add a condition to a truth table line style animation.
9. Click OK.
To set the default line style, width or pattern for a truth table line style animation
1. Open the Edit Animations dialog box, Truth Table Line Style panel.
2. In the Element Line Style area, select a style, type a value for the width and select a pattern for the
default truth table line style.
To use the default line style, width or pattern in a truth table line style animation
1. Open the Edit Animations dialog box, Truth Table Line Style panel.
2. Locate the condition for which you want to change the line style, width or pattern.
3. To use the default line style for the condition, clear the mark in the Color column of the truth table.
4. To use the default line width for the condition, clear the mark in the Width column of the truth table.
5. To use the default line pattern for the condition, clear the mark in the Pattern column of the truth
table.
To add a condition to a truth table line style animation
1. In the Edit Animations dialog box, Truth Table Line Style panel, click the Add icon. An additional
condition is added to the truth table.
2. Configure color, weight, pattern, operator and breakpoint value according to your requirements.

235
Creating and Managing Industrial Graphics User Guide Animating Graphic Elements

To delete a condition from an analog line color animation

1. In the Edit Animations dialog box, Truth Table Line Style panel, select the condition you want to
delete.
2. Click the Remove button. The condition is removed.
To change the processing order of line style conditions
1. Open the Edit Animations dialog box, Truth Table Line Style panel
2. Select the condition you want to move up or down the condition list in order for it to be processed
sooner or lat er.
3. Click the:
o Arrow up icon to move the condition up in the trut h table.
o Arrow down icon to move the condition down in the truth table.

Configuring a Text Style Animation

You can configure an element with a:
 Boolean text style animation.
 Truth table text style animation.
The truth table text style animation lets you:
 Associate expressions of any data type supported by your HMI software wit h a text style.
 Define as many text styles as you want and associate each one with a condition.
You can define the conditions by specifying an comparison operator (=, >, >=, <, <=) and a breakpoint,
which itself can be a value, an attribute reference or an expression.
You can add conditions, delete conditions and also change the order in which the conditions are
processed.

Configuring a Boolean Text Style Animation

You can configure an element with a Boolean text style animation.
To configure an element with a Boolean text style animation
1. Select the element.
2. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.
3. Click the Add icon and select Text Style. The text style animation is added to the Animation list and
the Text Style state selection panel appears.
4. Click the Boolean button. The Boolean Text Style configuration panel appears.
5. In the Boolean box, type a Boolean numeric value, attribute reference or ex pression.
6. In the True, 1, On area, click the Color box to configure the text style when the ex pression is true.
The Select FillColor dialog box appears. For more information, see Setting Style on page 151.
7. Click the browse button for the Font box, to select a font, font style and size for the text when the
expression is true.
8. Repeat the above steps for the false condition in the False, 0, Off area.
9. Click OK.

236
Animating Graphic Elements Creating and Managing Industrial Graphics User Guide

To set default text style and/or font in a Boolean text style animation
1. Open the Edit Animations dialog box, Boolean Text Style panel.
2. In the Element Text Style area, select a style and/or a font for the default Boolean text style.
To use default text style and/or font in a Boolean text style animation
1. Open the Edit Animations dialog box, Boolean Text Style panel.
2. In the True, 1, On or False, 0, Off areas, clear Color and/or Font to use the corresponding default
style and/or font.

Configuring a Truth Table Text Style Animation

You can configure an element with a truth table text style animation.
To configure an element with a truth table text style animation
1. Select the element.
2. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.
3. Click the Add icon and select Text Style. The text style animation is added to the Animation list. The
Text Style information page appears.
4. Click the Truth Table button. The Truth Table Text Style configuration panel appears.
o Select the data type of the expression from the list.
o Type a value, attribute reference or expression in the text box.
5. If the data type of the ex pression is string or internationalized string, you can specify to ignore the
case by selecting Ignore Case.
6. In the Truth Table, click the color box in the Color column. The Select FillColor dialog box appears.
For more information, see Setting Style on page 151.
7. Select the truth options. Do one of more of the following:
o Click on the cell in the Font column to select a font.
o In the Operator column, select the comparison operator.
o In the Value or Expression column, type a value, attribute reference or expression.
o To add further conditions, see To add a condition to a truth table text style animation.
8. Click OK.
To set the default text style or font for a truth table text style animation
1. Open the Edit Animations dialog box, Truth Table Text Style panel.
2. In the Element Text Style area, select a style and a font for the default truth table text style.
To use the default text style or font in a truth table text style animation
1. Open the Edit Animations dialog box, Truth Table Text Style panel.
2. Locate the condition for which you want to change the text style or font.
3. To use the default text style for the condition, clear the mark in the Color column of the truth table.
4. To use the default font for the condition, clear the mark in the Font column of the truth table.
To add a condition to a truth table text style animation
1. In the Edit Animations dialog box, Truth Table Text Style panel, click the Add icon. An additional
condition is added to the truth table.

237
Creating and Managing Industrial Graphics User Guide Animating Graphic Elements

2. Configure style, font, operator and breakpoint value according to your requirements.
To delete a condition from a truth table text style animation
1. In the Edit Animations dialog box, Truth Table Text Style panel, select the condition you want to
delete.
2. Click the Remove button.
To change the processing order of text style conditions
1. Open the Edit Animations dialog box, Truth Table Text Style panel
2. Select the condition you want to move up or down the condition list in order for it to be processed
sooner or lat er.
3. Click the:
o Arrow up icon to move the condition up in the trut h table.
o Arrow down icon to move the condition down in the truth table.

Configuring a Blink Animation

You can configure an element with a blink animation. You can specify:
 The blinking speed: slow, medium or fast.
 If the element should blink invisibly or if it should blink with specified colors.
To configure an element with a blink animation
1. Select the element.
2. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.
3. Click the Add icon and select Blink. The blink animation is added to the Animation list and the Blink
configuration panel appears.
4. In the Boolean box, type a Boolean numeric value, attribute reference or ex pression.
5. In the Blink When Expression I s area, select:
o True, 1, On to enable blinking when the expression is true.
o False, 0, Off to enable blinking when the expression is false.
6. In the Blink Speed area, select Slow, Medium or Fast for the blinking speed.
7. In the Blink Attributes area, select Blink Visible With These Attribute s or Blink Invi sible .
8. If you select Blink Vi sible With These Attribute s, you can configure the styles used at run time for
the text, line and fill component of the element. Click on the corresponding color box, and the Select
FillColor dialog box appears. For more information, see Setting Style on page 151.
9. Click OK.

Configuring an Alarm Border Animation

Alarm Border animation shows a highly visible border around a graphic or graphic element when an
alarm occurs. The color and fill pattern of the border indicat es the severity and current state of the alarm,
if supported by your HMI software. Plant operators can quickly recognize alarm conditions when Alarm
Border animation is used

238
Animating Graphic Elements Creating and Managing Industrial Graphics User Guide

Alarm Border animation also shows an indicator icon at the top left corner of the border around a closed
graphic element. For open pie or arc graphic elements, the indicator icon is placed at the top-left most
location of the start and end points.
Alarm severity (1-4) or the current alarm mode (Shelved, Silenced, Disabled) appear as part of the
indicator icon. The indicator icon can be shown or hidden as a configurable option of Alarm Border
animation.
Alarm Border animation adheres to the following precedence rules with other functions that can change
the appearance of a graphic:
1. Quality status
2. Alarm Border animation
3. Element Style animation
4. Style animations
5. Element Style on canvas

Understanding Requirements of Alarm Border Animations

Alarm border animation can be applied to all types of graphics except embedded graphics and nested
groups. Alarm border animation can also be applied to graphic elements and group elements.

Understanding the Behavior of Alarm Border Animations

Alarm Border animation appears around a graphic element based on the current state of the object’s
aggregated alarm attributes, or other configured alarm inputs support ed by your HMI software. The
appearance of the alarm border itself reflects the current alarm state and the user’s interaction with the
alarm.
 A graphic's process value transition into an alarm state.
Alarm Border animation appears around the graphic based on alarm severity with blinking.

239
Creating and Managing Industrial Graphics User Guide Animating Graphic Elements

 The user acknowledges an alarm with the process value still in an alarm state.
Alarm Border animation appears around the graphic without blinking.

 The alarm value returns to normal without the user acknowledging the alarm.
Alarm Border animation remains around the graphic in a defined Return to Normal visual style
without blinking.

 The alarm value returns to normal and the user acknowledges the alarm.
Alarm Border animation no longer appears around a graphic.

 The user suppresses an alarm.

240
Animating Graphic Elements Creating and Managing Industrial Graphics User Guide

Alarm Border animation remains around the graphic in a defined suppressed/disabled visual style
without blinking. The indicator shows the suppressed/disabled alarm mode icon.

 The user silences an alarm

Alarm Border animation remains around the graphic in a defined silenced visual style without
blinking. The indicator shows the silenced alarm mode icon.
A silenced alarm mode takes precedence over an alarm in shelved mode.

 The user shelves an alarm

Alarm Border animation remains around the graphic in a defined shelved visual style without
blinking. The indicator shows the shelved alarm mode icon.

If a new alarm condition occurs when Alarm Border animation appears around a graphic, the animation
updates to show the new alarm state. In the case of aggregation alarms, Alarm Border animation shows
the highest current alarm state.

Configuring Alarm Border Animation

Alarm Border animation can be configured by selecting Alarm Border from the list of Visualization
animations. For Situational Awareness Library symbols, Alarm Border animation can be selected as a
Wizard Option of the graphic.

241
Creating and Managing Industrial Graphics User Guide Animating Graphic Elements

The Alarm Border animation dialog box contains mutually exclusive fields to set the referenced
attributes for aggregate or individual alarms.
Some HMI software supports aggregating alarms from different plant or functional areas. If your HMI
software supports this type of aggregation alarms, you can specify Alarm Border animation by entering
an attribute, object, or tag name in the Use Standard Alarm-Urgency References field of the Alarm
Border dialog box.
The selected object attribut es or tags typically map to the following aggregation alarm attributes:
 AlarmMostUrgentAcked
 AlarmMostUrgentInAlarm
 AlarmMostUrgentMode
 AlarmMostUrgentSeverity
 AlarmMostUrgenShelved
For individual alarms, you can specify Alarm Border animation by entering attribute or obj ect names in
the Use Custom Alarm-Urgency References fields of the Alarm Border dialog box.
 InAlarm Source
Indicates the InAlarm status (True/Fals e) of the most urgent alarm that is in the InAlarm state or
waiting to be Acked. If no alarms are in the InAlarm state or waiting to be Acked, the value is False.
 Acked Source
Indicates the acknowledgement status (True/False) of the most urgent alarm that is in the InAlarm
state or waiting to be Acked. If no alarms are in an InAlarm state or waiting to be Acked, the value is
True, which means no acknowledgement is needed.
 Mode Source
Indicates the alarm mode (Enable/Silence/Disable/Shelved) of the most urgent alarm that is in the
InAlarm state or waiting to be Acked. If alarms are c onfigured for an attribute, but no alarms are in the
InAlarm state or waiting to be Acked, the value is the same
as the AlarmMode of the object.
 Severity Source
Indicates the severity as an integer (1-4) of the most urgent alarm current in an InAlarm state. If no
alarms are in an InAlarm state or waiting to be acknowledged, the value is 0.
 Shelved Source
Indicates the current Shelved status (True/False) of t he most urgent alarm t hat is in the InAlarm state
or waiting to be Acked. If no alarms are in the InAlarm state or waiting t o be Acked, the value is False.
To set Alarm Border animation for individual alarms, specify references to the following alarm attribut es
or tags:
 InAlarm attribute
 Acked attribute
 Mode attribute
 Severity attribute
 Shelved attribute
Alarm Border animation subscribes to these attributes or tags. Based on the alarm state of these
attributes or tags, Alarm Border animation is applied to the graphic element in run time.

242
Animating Graphic Elements Creating and Managing Industrial Graphics User Guide

To configure Alarm Border animation

1. Open a graphic in the Industrial Graphic Editor.
2. Select the graphic to show the graphic elements listed in the Elements pane of the Industrial
Graphic Editor.
3. Select a graphic element from the Elements list to apply Alarm Border animation.
4. Click Add Animation to show the list of animation types.
5. Select Alarm Border from the list of Visualization animations.
The Alarm Border dialog box appears with a set of configuration options.
6. Select either Use Standard Alarm-Urgency References or Use Customized Alarm-Urgency
References.
 To use Standard Alarm-Urgency References
Click Browse and select an attribute, tag, or object name, then Click OK.
Both direct and relative referenc es to an object or tag are supported. An expression cannot be
used to reference the object.
 To use Customized Alarm-Urgency References
Click Browse and select an attribute, a graphic element, or an InTouch tag name for all Source
fields shown beneath Use Customized Alarm Urgency References, then click OK.
All fields must contain values and cannot be left blank. Expressions, external references, and
custom properties can be entered in all fields.
7. Enter a custom property, a constant (True/False), an external reference, or an expression in the
Show Alarm Indicator field to set the condition when an alarm indicator icon is shown or hidden.

Configuring Optional Alarm Border Animation Characteristics

You can complete a set of optional tasks to customize the appearanc e of Alarm Border animation.

Changing Alarm Border Indicator Icons

Alarm border animation shows an indic ator icon at the top left corner of the border with alarm severity as
a number from 1 to 4 if your HMI software supports it. Other indicator images represent alarm
suppressed, silenced and shelved modes.

243
Creating and Managing Industrial Graphics User Guide Animating Graphic Elements

A default Alarm Border indic ator image is assigned to each alarm mode and severity level. The default
images appear in the Image fields of the Alarm and Event Priority Mapping and Hi storization dialog
box. The images are saved in an XML file. For det ails about the location of the file, refer to your HMI
software documentation.

The default Alarm Border indicator images can be replaced by custom images. Supported image file
types include .bmp, .gif, .jpg, .jpeg, .tif, .tiff, .png, .ico and .emf.
To replace Alarm Border indicator images
1. Create Alarm Border indicator images that will replace the default indicat or images.
2. On the Galaxy menu, click Configure and click Alarm Priority Mapping. The Alarm and Event
Priority Mapping and Historization dialog box appears.
3. Click the Search button next to the Alarm Border indicator or mode image to be replaced. The Open
dialog box appears to locate the replac ement Alarm Border indicator images.
4. Go to the folder containing the replacement images.
5. Select an image file and click Open.
6. Verify the new Alarm Border indicator image replaced the original image in the Alarm and Event
Priority Mapping and Historization dialog box.
At run time, Alarm Border animation reads the XML file from the location where it is stored. If images are
not available from the XML file, an Alarm Indic ator does not appear during Alarm Border animation.

Modify Alarm Border Animation Element Styles

The color and fill pattern of alarm borders are set by the Outline properties of a set of AlarmB order
Element Styles. The following table shows the Element Styles applied to Alarm Border animations by
alarm severity and alarm state.

244
Animating Graphic Elements Creating and Managing Industrial Graphics User Guide

The assignment of these Element Styles to alarm conditions cannot be changed. Only the assigned
Element Style’s Outline properties can be changed to modify the line pattern, line weight, and line color
of alarm borders.

Alarm
Severity Alarm State Element Style

1 UnAcknowledged AlarmBorder_Critical_UNACK

1 Acknowledged AlarmBorder_Critical_A CK

1 Return To Normal AlarmBorder_Critical_RTN

2 UnAcknowledged AlarmBorder_High_UNA CK

2 Acknowledged AlarmBorder_High_A CK

2 Return To Normal AlarmBorder_High_RTN

3 UnAcknowledged AlarmBorder_Medium_UNA CK

3 Acknowledged AlarmBorder_Medium_A CK

3 Return To Normal AlarmBorder_Medium_RTN

4 UnAcknowledged AlarmBorder_Low_UNA CK

4 Acknowledged AlarmBorder_Low_A CK

4 Return To Normal AlarmBorder_Low_RTN

All Suppressed AlarmBorder_S uppressed

All Shelved AlarmBorder_S helved

All Silenced AlarmBorder_Silenced

Configuring a Percent Fill Horizontal Animation

You can configure an element with a percent fill horizontal animation.
Besides specifying the expressions that determine how much of the element is filled at run time, you can
also specify:
 Fill direction: from left to right or right to left.
 Unfill color: the style of the background when the element has 0 percent filling.

245
Creating and Managing Industrial Graphics User Guide Animating Graphic Elements

 Fill orientation: if the filling is in relation to the element or to the screen. This affects how the fill
appears if the orientation of the element changes. If t he fill is in relation t o the screen and t he element
or graphic are rotated, the fill remains in relation to the screen.

Note: The fill orientation is a common setting to the percent fill horizontal and percent fill vertical
animations.

You can also preview how the percent fill horizontal animation appears at run time.
To configure an element with a percent fill horizontal animation
1. Select the element.
2. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.
3. Click the Add icon and select % Fill Horizontal. The percent fill horizont al animation is added to the
Animation list and the % Fill Horizontal configuration panel appears.
4. Specify the settings. Do one or more of the following:
o In the Analog box, type an analog value, attribute reference or expression.
o In the Value - At Min Fill box, type an analog value, attribut e reference or expression that
causes the minimum percent of filling at run time.
o In the Value - At Max Fill box, type an analog value, attribut e reference or expression that
causes the maximum percent of filling at run time.
o In the Fill - Min% box, type an analog value, attribute reference or expression to specify the
minimum percent of filling.
o In the Fill - Max% box, type an analog value, attribute reference or expression to specify the
maximum percent of filling.
o In the Colors area, click the:
Fill Color box to select a style from the Select FillColor dialog box. This is the fill style of the
element.
Unfilled Color box to select a style from the Select FillColor dialog box. This is the unfilled fill
style of the element.
For more information, see Setting Style on page 151.
5. In the Direction area, select:
o Right - to fill from left to right.

246
Animating Graphic Elements Creating and Managing Industrial Graphics User Guide

o Left - to fill from right to left.

6. In the Orientation area, select:
o Relative to Graphic - so that the filling is in relation to the element and the filling rotates with the
element.
o Relative to Screen - so that the filling is in relation to the screen and the filling does not rot ate
with the element.
7. You can preview your configuration by using the slider in the Preview area. Drag the slider to see
how different values affect the appearance at run time.
8. Click OK.

Configuring a Percent Fill Vertical Animation

You can configure an element with a percent fill vertical animation.
Besides specifying the expressions that determine how much of the element is filled at run time, you can
also specify:
 Fill direction: from lower to top or top to lower.
 Unfill color: the style of the background when the element has 0 percent filling.
 Fill orientation: if the filling is in relation to the element or to the screen. This affects how the fill
appears if the orientation of the element changes. If t he fill is in relation t o the screen and t he element
or graphic are rotated, the fill remains in relation to the screen.

Note: The fill orientation is a common setting to the percent fill horizontal and percent fill vertical
animations.

To configure an element with a percent fill vertical animation

1. Select the element.
2. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.
3. Click the Add icon and select % Fill Vertical. The percent fill vertical animation is added to the
Animation list and the % Fill Vertical configuration panel appears.
4. In the Analog box, type an analog value, attribute reference or expression.
5. In the Value-At Min Fill box, type an analog value, attribute reference or expression that causes the
minimum percent of filling at run time.

247
Creating and Managing Industrial Graphics User Guide Animating Graphic Elements

6. In the Value-At Max Fill box, type an analog value, attribute reference or expression that causes the
maximum percent of filling at run time.
7. In the Fill-Min% box, type an analog value, attribut e reference or expression to specify the minimum
percent of filling.
8. In the Fill-Max % box, type an analog value, attribute reference or expression to specify the
maximum percent of filling.
9. In the Colors area, click the:
o Fill Color box to select a style from the Select FillColor dialog box. This is the fill style of the
element.
o Unfilled Color box to select a style from the Select FillColor dialog box. This is the unfilled fill
style of the element.
For more information, see Setting Style on page 151.
10. In the Direction area, select:
o Up - to fill from lower to top.
o Down - to fill from top to lower.
11. In the Orientation area, select:
o Relative to Graphic - so that the filling is in relation to the element and the filling rotates with the
element.
o Relative to Screen - so that the filling is in relation to the screen and the filling does not rot ate
with the element.
12. You can preview your configuration by using the slider in the Preview area. Drag the slider to see
how different values affect the appearance at run time.
13. Click OK.

Configuring a Horizontal Location Animation

You can configure an element with a horizontal loc ation animation.
To configure an element with a horizontal location animation
1. Select the element.
2. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.
3. Click the Add icon and select Location Horizontal. The horizontal location animation is added to
the Animation list and the Location Horizontal configuration panel appears.
4. In the Analog box, type an analog value, attribute reference or expression.
5. In the Value-At Left End box, type an analog value, attribut e reference or expression that
corresponds to the offset specified by the Movement-To Left value.
6. In the Value-At Right End box, type an analog value, attribute reference or expression that
corresponds to the offset specified by the Movement-To Right value.
7. In the Movement-To Left box, type an analog value, attribute reference or expression for the
maximum offset to the left.
8. In the Movement-To Right box, type an analog value, attribute reference or expression for the
maximum offset to the right.
9. Click OK.

248
Animating Graphic Elements Creating and Managing Industrial Graphics User Guide

Configuring a Vertical Location Animation

You can configure an element with a vertical location animation.
To configure an element with a vertical location animation
1. Select the element.
2. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.
3. Click the Add icon and select Location Vertical. The vertical location animation is added to the
Animation list and the Location Vertical configuration panel appears.
4. In the Analog box, type an analog value, attribute reference or expression.
5. In the Value - At Top box, type an analog value, attribute reference or expression that corresponds
to the offset specified by the Movement - Up value.
6. In the Value - At lower box, type an analog value, attribute referenc e or expression that corresponds
to the offset specified by the Movement - Down value.
7. In the Movement - Up box, type an analog value, attribute reference or expression for the maximum
offset upwards.
8. In the Movement - Down box, type an analog value, attribut e reference or expression for the
maximum offset downwards.
9. Click OK.

Configuring a Width Animation

You can configure an element with a width animation. You can also specify if the element is to be
anchored to its left, center, right side or origin.
To configure an element with a width animation
1. Select the element.
2. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.
3. Click the Add icon and select Width. The width animation is added to the Animation list and the
Width configuration panel appears.
4. In the Analog box, type an analog value, attribute reference or expression.
5. In the Value-At Min Size box, type an analog value, attribut e reference or expression that
corresponds to the minimum width specified by the Width-Min% value.
6. In the Value-At Max Size box, type an analog value, attribut e reference or expression that
corresponds to the maximum width specified by the Width-Max% value.
7. In the Width-Min% box, type an analog value, attribute reference or expression for the minimum
width in percent of the original element.
8. In the Width-Max% box, type an analog value, attribute reference or ex pression for the maximum
width in percent of the original element.
9. In the Anchor area, select:
o Left - to specify that the left of the element is anchored.
o Center - to specify that the horizontal cent er of the element is anchored.
o Right - to specify that the right side of the element is anchored.
o Origin - to specify that the origin of the element is anchored.
10. Click OK.

249
Creating and Managing Industrial Graphics User Guide Animating Graphic Elements

Configuring a Height Animation

You can configure an element with a height animation. You can also specify if the element is to be
anchored to its top side, middle, lower side or origin.
To configure an element with a height animation
1. Select the element.
2. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.
3. Click the Add icon and select Height. The height animation is added to the Animation list and the
Height configuration panel appears.
4. In the Analog box, type an analog value, attribute reference or expression.
5. In the Value-At Min Size box, type an analog value, attribut e reference or expression that
corresponds to the minimum height specified by the Height-Min% value.
6. In the Value-At Max Size box, type an analog value, attribut e reference or expression that
corresponds to the maximum height specified by the Height-Max % value.
7. In the Height-Min% box, type an analog value, attribute reference or expression for the minimum
height in perc ent of the original element.
8. In the Height-Max % box, type an analog value, attribute reference or expression for the maximum
height in perc ent of the original element.
9. In the Anchor area, select:
o Top - to specify that the top side of the element is anchored.
o Middle - to specify that the vertical center of the element is anchored.
o Lower - to specify that the lower side of the element is anchored.
o Origin - to specify that the origin of the element is anchored.
10. Click OK.

Configuring a Point Animation

Point animation changes the X and Y coordinat e values of one or more selected points on a graphic or
graphic element. During run time, the X and the Y coordinates of a selected point are set to an
expression or reference that evaluates to a calculated real floating point value.
Point animation supports negative floating point values, which may cause the animation to go out of
scope of the visualization window. In the case when a point’s expression evaluates to a null value or
causes an exception, animation stops and the point retains its original value.
The X and Y coordinates of a point can be configured as a pair or individually. If only the X coordinate of
a point is configured, then the Y coordinat e value is kept constant. The animation shows the point o f the
graphic element traversing the X axis. Likewise, if only the Y coordinate of a point is configured, then the
animation shows the point traversing the Y axis with the point’s X axis value held constant.
After selecting point animation, a list of confi gurable points is retrieved from the graphic element based
on the following conditions.
 If the graphic element is a multi-point graphic type (Line, HV/Line, Polyline, Curve, Polygon, Closed
curve), animation control points appear on the graphic element in preview mode.
 If the graphic element is not a support ed multi-point graphic, then the top left X and Y coordinate of
the graphic element is selected as the animation point.
In the case of an element group consisting of several graphic elements, the animation point is the top
left corner of the rectangle around all grouped elements.

250
Animating Graphic Elements Creating and Managing Industrial Graphics User Guide

To configure point animation

1. Open the graphic in Industrial Graphic Editor.
2. Select a graphic element.
3. On the Special menu, click Edit Animations.
The Edit Animations dialog box appears.
4. Click the Add Animation button to show a list of Visualization and Interaction animations.
5. Select Point from the Visualization animation list.
The Point dialog box appears with a list of points and a preview of the points on the graphic. The list
shows each point as a pair of X and Y fields to enter an expression or a referenc e that evaluates to a
floating point value.
6. Select a point from the list of points.
The selected point changes to orange in the preview of the graphic.
7. Enter an expression, constant, or reference in the Point field.
8. Repeat steps 6-7 to animat e other points in the graphic.
9. Save your changes.

Configuring an Orientation Animation

You can configure an element with an orientation animation. You can also:
 Specify a different orientation origin.
 Ignore or accept the design-time orientation of the element on the canvas.
 Preview the orientation at run time with a slider.
To configure an element with an orientation animation
1. Select the element.
2. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.
3. Click the Add icon and select Orientation. The orientation animation is added to the Animation list
and the Orientation configuration panel appears.
4. In the Analog box, type an analog value, attribute reference or expression.
5. In the Value-At CCW End box, type an analog value, attribute reference or expression that
corresponds to the maximum angle in degrees for the counter -clockwise orientation as specified by
the Orientation-CCW value.
6. In the Value-At CW End box, type an analog value, attribute reference or expression that
corresponds to the maximum angle in degrees for the counter-clockwise orientation as specified by
the Orientation-CW value.
7. In the Orientation-CCW box, type an analog value, attribute reference or expression for the
maximum orientation in counter-clockwise direction in degrees.
8. In the Orientation-CW box, type an analog value, attribute reference or expression for the maximum
orientation in clockwise direction in degrees.
9. In the Orientation Offset area, select:
o Replace Current to ignore the design-time orientation of the element as it appears on the
canvas and to use absolute orientation.

251
Creating and Managing Industrial Graphics User Guide Animating Graphic Elements

o Use Current a s Offset Orientation to orientate the element at run time in relation to its
design-time orientation on the canvas.

10. If you use current as offset orientation, you can type an offset value in the text box next to Use
Current a s Offset Orientation. This affects the orientation of the element on the canvas.
11. In the Current Relative Origin area, type values in the dX and dY boxes to specify the rot ation
origin as offset from the element center point. This affects the point of origin of the element on the
canvas.
12. You can preview the orientation and how run-time values affect the appearance of the element, by
dragging the slider in the Preview area.
13. Click OK.

Configuring a Value Display Animation

You can configure an element with a value display animation. You can show:
 A Boolean value as a Message.
 An Analog value.
 A string value.
 A time or date value.
 The tag name, hierarchical name or contained name of the hosting object.

Configuring a Boolean Value Display Animation

You can configure an element to show a Boolean value as a message.
To configure an element with a Boolean value display animation
1. Select the element.
2. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.

252
Animating Graphic Elements Creating and Managing Industrial Graphics User Guide

3. Click the Add icon and select Value Display. The value display animation is added to the Animation
list and the Value Display state selection panel appears.
4. Click the Boolean button. The Boolean Value Display configuration panel appears.
5. In the Boolean box, type a Boolean value, attribut e reference or expression.
6. In the True Message box, type a value, attribute reference or expression for the text display when
the expression is true.
7. In the Fal se Message box, type a value, attribute reference or exp ression for the text display when
the expression is false.
8. Click OK.

Configuring an Analog Value Display Animation

You can configure a text element, TextBox, or button to show an analog value. You can also configure an
analog value display animation for a grouped element when the TreatAsIcon property is True.
To configure an element with an analog value display animation
1. Select the text element, TextBox, Button, or grouped element that you want to configure Analog
Value Dis play animation.
2. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.
3. Click the Add icon and select Value Display. The value display animation is added to the Animation
list and the Value Display state selection panel appears.
4. Click the Analog button. The Analog Value Display configuration panel appears.
5. In the Analog box, type an analog value, attribute reference or expression.
6. Click the Text Format drop-down list and select a global number style.
o Format String is the default numeric format, which includes a text field to enter characters that
specify a number format. For more information about assigning a number format using typed
characters, see Enter Input Numbers in U.S. Format on page 192.
o Selecting custom from the Text Format list shows another drop-down list to select a number
format.
– Fixed Width: Appears on the Analog Value Display dialog box for every Custom number
format. When selected, the run-time number value will not exceed the text length specified
for Value Display animation.
– Precision: Appears on the Analog Value Display dialog box for the Fixed Decimal and
Exponential Custom number formats. Precision sets the precision of the fractional part of
a number to the right of the decimal point.
– Bits From and To: Appear on the Analog Value Display dialog box for the Hex and Binary
number formats. Bits From sets the starting bit position of a hex or binary number shown
during run time. To sets the ending bit position of a hex or binary number shown during run
time.
7. Click OK.
Except for the Format String and Custom text styles, all other text styles are glob al number styles that
do not need further configuration.
For more information about the listed global number formats, see Setting Global Number Styles on page
189.

253
Creating and Managing Industrial Graphics User Guide Animating Graphic Elements

Configuring Value Display Animation with the FormatStyle Property

When Value Display or User Input animation have a text format configured with a number style from y our
HMI software, numeric data shown during run time is formatted in accordance to the numb er style
selected for the animation.
Changes to a number style are not propagated during run time. Any changes to global number styles
become effective only after the HMI soft ware is restarted.
A number style can be changed during run time using the Format Style property. FormatStyle is a text
element run-time property that displays the name of the current applied global number style. The value of
the FormatStyle property can be set as the active number style of Value Display and User Input
animation during run time .
 If the name applied to the FormatStyle property during run time is the name of a global number style,
the text element is reformatted using the new applied number style for Value Display or Us er Input
animation.
 If the FormatStyle property is assigned a value that does not match any global number style, the
value of FormatStyle remains unchanged and a warning message is logged to SMC logger.
 If FormatStyle is set to an empty string, the text format of Us er Input and Value Dis play animation
reverts to the value specified for Text Format during design time.
 If a text element is inside a group in whic h the TreatAsIcon property is set to True, then the group's
text format overrides the first text child element for Value Display or User Input animation.
 If a text element’s FormatStyle property changes in run time, the new number style is used to format
the text element. Because a graphic group does not have TextFormat and FormatStyle properties,
using the FormatStyle property is the only way to change the format of text in run time.

Configuring a String Value Display Animation

You can configure an element to show a string value.
To configure an element with a string value display animation
1. Select the element.
2. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.
3. Click the Add icon and select Value Display. The value display animation is added to the Animation
list and the Value Display state selection panel appears.
4. Click the String button. The String Value Display configuration panel appears.
5. In the String box, type a string value, attribute reference or expression.
6. Click OK.

Configuring a Time Value Display Animation

You can configure an element to show a time value.
Use the following letters to set the time format:

h The one or two-digit hour in 12-hour format.

hh The two-digit hour in 12-hour format. Single digit values are
preceded by a zero.
H The one or two-digit hour in 24-hour format.
HH The two-digit hour in 24-hour format. Single digit values are
preceded by a zero.

254
Animating Graphic Elements Creating and Managing Industrial Graphics User Guide

t The one-letter AM/PM abbreviation ("AM" appears as "A").

tt The two-letter AM/PM abbreviation ("AM" appears as "AM").

m The one or two-digit minute.

mm The two-digit minute. Single digit values are preceded by a zero.

s The one or two-digit seconds.

ss The two-digit seconds. Single digit values are preceded by a
zero.
d The one or two-digit day.
dd The two-digit day. Single digit day values are preceded by a
zero.
ddd The three-character day-of-week abbreviation.
dddd The full day-of-week name.
M The one or two-digit month number.
MM The two-digit month number. Single digit values are preceded
by a zero.
MMM The three-character month abbreviation.
MMMM The full mont h name.
y The one-digit year (2001 appears as "1").
yy The last two digits of the year (2001 appears as "01").
yyyy The full year (2001 appears as "2001").
The format for elapsed time is:
[–][DDDDDD] [HH:MM:]SS[.fffffff]
Use the following letters to set the elapsed time format:
DDDDDD The number of days. Valid values are 0 to 999999.
HH The two-digit hour in 24-hour format. Single digit values are
preceded by a zero. Valid values are 00 to 23.
MM The two-digit month number. Single digit values are preceded
by a zero. Valid values are 00 to 59.
SS The two-digit seconds. Single digit values are preceded by a
zero. Valid values are 00 to 59.
fffffff Optional fractional seconds to right of decimal, and can be one
through seven digits.

Note: You can use any other characters, except "g" in the property. These characters then appear at
design time and run time in the control.

To configure an element with a time value display animation

1. Select the element.
2. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.

255
Creating and Managing Industrial Graphics User Guide Animating Graphic Elements

3. Click the Add icon and select Value Display. The value display animation is added to the Animation
list and the Value Display state selection panel appears.
4. Click the Time button. The Time Value Display configuration panel appears.
5. In the Time or Elapsed Time box, type a time or elapsed time value, attribute reference or
expression.
6. In the Text Format box, type a format for the value output. If you change this value, the TextFormat
property of the element also changes.
7. Click OK.

Configuring a Name Display Animation

You can configure an element to show the tag name, hierarchical name or contained name of the
AutomationObject that is hosting it.
For example if the AutomationObject hosting the graphic is named Valve_001 and V alve_001 is
contained in Pump_001 and has a contained name of InletValve, then configuring an element with the
value display animation with:
 Tag Name shows Valve_001 at run time
 Hierarchical Name shows Pump_001. InletValve at run time
 Contained Name shows InletValve at run time
To configure an element with a name display animation
1. Select the element.
2. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.
3. Click the Add icon and select Value Display. The value display animation is added to the Animation
list and the Value Display state selection panel appears.
4. Click the Name button. The Name Display configuration panel appears.
5. Select:
o Tag Name to show the tag name of the hosting AutomationObject.
o Hierarchical Name to show the hierarchical name of the hosting AutomationObject.
o Contained Name to show the cont ained name of the hosting AutomationObject.
6. Click OK.

Configuring a Tooltip Animation

You can configure an element with a tooltip animation.
To configure an element with a tooltip animation
1. Select the element.
2. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.
3. Click the Add icon and select Tooltip. The tooltip animation is added to the Animation list and the
Tooltip configuration panel appears.
4. In the Expre ssion box, type:
o A static value and make sure the Input Mode icon is set to static.
o An attribute reference or expression and make sure the Input Mode icon is set to attribute or
reference.

256
Animating Graphic Elements Creating and Managing Industrial Graphics User Guide

5. Click OK.

Configuring a Disable Animation

You can configure an element with a disable animation. This lets you disable user interaction with an
element depending on a run-time value or expression.
To configure an element with a disable animation
1. Select the element.
2. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.
3. Click the Add icon and select Di sable. The disable animation is added to the Animation list and the
Di sable configuration panel appears.
4. In the Boolean box, type a Boolean numeric value, attribute reference or ex pression.
5. In the Di sabled When Expression i s area, select:
o True,1, On in which case the element is disabled at run time whenever the expression is true,
and enabled whenever the expression is false.
o False, 0, Off in which case the element is disabled at run time whenever the expression is false,
and enabled whenever the expression is true.
6. Click OK.

Configuring a User Input Animation

You can configure an element with a user input a nimation for the following data types:
 Boolean
 Analog (integer, float, double)
 String
 Time
 Elapsed time

Configuring a User Input Animation for a Discrete Value

You can configure an element with a user input animation for a Boolean value.
To configure an element with a user input animation
1. Select the element.
2. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.
3. Click the Add ic on and select User Input. The user input animation is added to the Animation list and
the User Input state selection panel appears.
4. Click the Boolean button. The Boolean Value User Input configuration panel appears.
5. Specify the options. Do one or more of the following:
o In the Boolean box, type an attribute reference or browse for one by using the browse button.
o In the Message to User box, type a value, attribute reference or expression. This is the text that
appears as prompt on the Boolean value input dialog box at run time.
o In the Prompt - True Message box, type a value, attribute reference or expression. This is the
text that appears on the button that causes the attribute to be set to true.

257
Creating and Managing Industrial Graphics User Guide Animating Graphic Elements

o In the Prompt - False Message box, type a value, attribute reference or expression. This is the
text that appears on the button that causes the attribute to be set to false.
o Specify that the input dialog box appears by pressing a key or key combination. In the Shortcut
area. Select a shortcut key in the Key list. Select CTRL and/or SHIFT to combine the shortcut
key with the CTRL key and/ or SHIFT key.
o If you don’t want the discrete value display element to show the True Message and False
Message, select Input Only.
o In the Di splay Value - True Message box, type a value, attribute reference or expression. This
is the text that appears on the canvas when the associated attribute is true.
o In the Di splay Value - False Message box, type a value, attribute reference or expression. This
is the text that appears on the canvas when the associated attribute is false.
o Make sure that the input modes of all boxes are set correctly. Click the Input Mode icon to set a
static value or an attribute reference or expression.
6. Click OK.

Configuring a User Input Animation for an Analog Value

You can configure an element with a user input animation for an analog value.
To configure an element with a user input animation for an analog value
1. Select the text element, TextBox, Button, or grouped element that you want to configure for User
Input animation.
2. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.
3. Click the Add icon from the Animations pane and select User Input.
User Input is added to the Interaction list and User Input state selection panel appears.
4. Click the Analog button. The Analog Value User Input configuration panel appears.
5. In the Analog box, type an attribut e reference or browse for one by using the brows e button.
6. In the Me ssage to User box, type a value, attribute reference, or expression. This text appears to
prompt for the analog value input dialog box at run time.
7. Make sure that the input mode of the Me ssage to User box is set correctly. Click the Input Mode
icon to set a static value or an attribute reference or expression.
8. If you want to restrict the range of input values, you can do so in the Value Limits area by:
o First selecting Restrict Values.
o Enter values, attribute references, or expressions in the Minimum and Maximum boxes.
9. In the Shortcut area, specify that an Input dialog box appears by pressing a key or key combination.
Select a shortcut key from the Key list. Select CTRL and/or SHIFT to combine the shortcut key with
the Ctrl key and/ or Shift key.
10. Select Input Only to restrict the text of a graphic from showing the current value of the reference
attribute.
If unchecked, the text of a graphic shows the current value of the reference attribute.
11. Select Use Keypad to show a keypad during run time for the user to type a data value.
12. Click the Text Format drop-down list and select a global number format.
For more information about the listed global number styles, see Setting Global Number Styles on
page 189.

258
Animating Graphic Elements Creating and Managing Industrial Graphics User Guide

Format String is the default numeric format, which includes a text entry field to assign a number
format using four characters:
Numeric Format Character Description

Zero, (0) Represents a digit at each specified position of a real number.

Forces leading zeros to the integer part of a number and trailing
zeros to the fractional part of a number.
Pound sign, (#) Represents a digit at that position within a number.
Comma, (,) Inserts a comma at the specifed position of a real number.
Decimal point, (.) Inserts a decimal point at the specified position of a real number.
Except for the Format String and Custom text styles, all other text styles are global number styles
that do not need further configuration.
13. Click OK.

Configuring a User Input Animation for a String Value

You can configure an element with a user input animation for a string value.
To configure an element with a user input animation for a string value
1. Select the element.
2. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.
3. Click the Add icon and select User Input. The user input animation is added to the Animation list
and the User Input state selection panel appears.
4. Click the String button. The String Value User Input configuration panel appears.
5. In the String box, type an attribute reference or browse for one by using the browse button.
6. In the Me ssage to User box, type a value, attribute reference or expression. This is the text that
appears as prompt on the string value input dialog box at run time.
7. Make sure that the input mode of the Me ssage to User box is set correctly. Click the Input Mode
icon to set a static value or an attribute reference or expression.
8. You can specify that the Input dialog box appears by pressing a key or key combination. In the
Shortcut area. Select a shortcut key in the Key list. Select CTRL and/or S HIFT to combine the
shortcut key with the CTRL key and/or SHIFT key.
9. If you don’t want the string value display element to show the string input result on the c anvas, select
Input Only.
10. If you want to use the keypad to type the string value, select Use Keypad.
11. If you select Input Only and want to see placeholders during the input at run time, select Echo
Characters.
12. If you are configuring a password input:
o Select Password.
o Type in the replacement character in the adjacent box.
o Select Encrypt if you want to encrypt the string that holds the password.

Important: Password encryption only works within the context of HMI soft ware applications that
support password encryption. Do not encrypt the string if you want to pass it to an external
security system, such as the operating system or a SQL Server database. The external security
system cannot read the encrypt ed password string and access will fail.

259
Creating and Managing Industrial Graphics User Guide Animating Graphic Elements

13. Click OK.

Configuring a User Input Animation for a Time Value

You can configure an element with a user input animation for a time value.
To configure an element with a user input animation for a time value
1. Select the element.
2. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.
3. Click the Add ic on and select User Input. The user input animation is added to the Animation list and
the User Input state selection panel appears.
4. Click the Time button. The Time Value User Input configuration panel appears.
5. In the Time box, type an attribut e referenc e or browse for one by using the browse button.
6. In the Me ssage to User box, type a value, attribute reference or expression. This is the text that
appears as prompt on the time value input dialog box at run time.
7. Make sure that the input mode of the Me ssage to User box is set correctly. Click the Input Mode
icon to set a static value or an attribute reference or expression.
8. Specify that the Input dialog box appears by pressing a key or key combination. In the Shortcut
area. Select a shortcut key in the Key list. Select CTRL and/or SHIFT to combine the shortcut key
with the Ctrl key and/or Shift key.
9. If you don’t want the time value display element to show the time input result on the canvas, select
Input Only.
10. To use the current date and time as default, select Use Current Date/Time as Default.
11. Select:
o Use Input Dialog to use the Time User Input dialog box at run time to type dat e and time values
in individual boxes.
o Use Calendar to use the Time User Input dialog box at run time to type a date with the calendar
control.
12. If you select Use Input Dialog to type the time value, you can select:
o Date and Time to type date and time.
o Date to only type a date.
o Time to only type a time.
Select Show Seconds if you also want to input seconds.
13. If you want to format your text after input, type a valid text format in the Text Format box. Use the
following letters to set the time format:
h The one or two-digit hour in 12-hour format.
hh The two-digit hour in 12-hour format. Single digit values are
preceded by a zero.
H The one or two-digit hour in 24-hour format.
HH The two-digit hour in 24-hour format. Single digit values are
preceded by a zero.
t The one-letter AM/PM abbreviation ("AM" appears as "A").

260
Animating Graphic Elements Creating and Managing Industrial Graphics User Guide

tt The two-letter AM/PM abbreviation ("AM" appears as "AM").

m The one or two-digit minute.

mm The two-digit minute. Single digit values are preceded by a
zero.
s The one or two-digit seconds.
ss The two-digit seconds. Single digit values are preceded by a
zero.
d The one or two-digit day.
dd The two-digit day. Single digit day values are preceded by a
zero.
ddd The three-character day-of-week abbreviation.
dddd The full day-of-week name.
M The one or two-digit month number.
MM The two-digit month number. Single digit values are preceded
by a zero.
MMM The three-character month abbreviation.
MMMM The full mont h name.
y The one-digit year (2001 appears as "1").
yy The last two digits of the year (2001 appears as "01").
yyyy The full year (2001 appears as "2001").

Note: You can use any other characters, except "g" in the property. These characters then appear at
design time and run time in the control.

14. Click OK.

Configuring a User Input Animation for an Elapsed Time Value

You can configure an element with a user input animation for an elapsed time value.
To configure an element with a user input animation for an elapsed time value
1. Select the element.
2. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.
3. Click the Add ic on and select User Input. The user input animation is added to the Animation list and
the User Input state selection panel appears.
4. Click the Elapsed Time button. The Elapsed Time Value User Input configuration panel appears.
5. In the Elapsed Time box, type an attribute reference or browse for one by using the browse button.
6. In the Me ssage to User box, type a value, attribute reference or expression. This is the text that
appears as prompt on the elapsed time value input dialog box at run time.
7. Make sure that the input mode of the Me ssage to User box is set correctly. Click the Input Mode
icon to set a static value or an attribute reference or expression.
8. Specify that the Input dialog box appears by pressing a key or key combination. In the Shortcut
area. Select a shortcut key in the Key list. Select CTRL and/or SHIFT to combine the shortcut key
with the CTRL key and/or SHIFT key.

261
Creating and Managing Industrial Graphics User Guide Animating Graphic Elements

9. If you don’t want the elapsed time value display element to show the time elapsed input result on the
canvas, select Input Only.
10. Select Use Dialog to use the Elapsed Time User Input dialog box to type the elapsed time value at
run time.
11. If you select Use Dialog to type the elapsed time value, you can optionally select:
Show Days if you also want to input days.
Show Milliseconds if you also want to input milliseconds.
12. Click OK.

Configuring a Horizontal Slider Animation

You can configure an element with a horizontal slider animation. This lets you drag an element at run
time in horizontal direction and write a corresponding value back to an attribute.
To configure an element with a horizontal slider animation
1. Select the element.
2. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.
3. Click the Add icon and select Slider Horizontal. The horizontal slider animation is added to the
Animation list and the Slider Horizontal configuration panel appears.
4. In the Analog box, type an attribut e reference or browse for one by using the brows e button.
5. In the Value - Left Position box, type an analog value, attribute reference or ex pression that
corresponds to the offset specified by the Movement - To Left value.
6. In the Value - Right Position box, type an analog value, attribute reference or expression that
corresponds to the offset specified by the Movement - To Right value.
7. In the Movement - To Left box, type an analog value, attribute reference or ex pression for the
maximum offset to the left in pixels.
8. In the Movement - To Right box, type an analog value, attribute reference or expression for the
maximum offset to the right in pixels.
9. You can select where the cursor is anchored to the element when it is dragged at run time. In the
Cursor Anchor area, select:
o Left to anchor the element at its left.
o Center to anchor the element at its center point.
o Right to anc hor the element at its right side.
o Origin to anchor the element at its point of origin.
10. You can select if position data from the slider is written continuously to the attribute, or only one time
when the mouse button is released. In the Write Data area, select Continuously or On mouse
release.
11. If you want a tooltip to appear on the element showing the current value during dragging, select
Show Tooltip.
12. Preview the movement as it appears in run time by dragging the slid er in the Preview area.
13. Click OK.

Configuring a Vertical Slider Animation

You can configure an element with a vertical slider animation.

262
Animating Graphic Elements Creating and Managing Industrial Graphics User Guide

To configure an element with a vertical slider animation

1. Select the element.
2. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.
3. Click the Add icon and select Slider Vertical. The vertical slider animation is added to t he Animation
list and the Slider Vertical configuration panel appears.
4. In the Analog box, type an attribut e reference or browse for one by using the brows e button.
5. In the Value - Top Position box, type an analog value, attribute reference or expression that
corresponds to the offset specified by the Movement - Up value.
6. In the Value - lower Position box, type an analog value, attribute reference or expression that
corresponds to the offset specified by the Movement - Down value.
7. In the Movement - Up box, type an analog value, attribute reference or expression for the maximum
offset upwards in pixels.
8. In the Movement - Down box, type an analog value, attribut e reference or expression for the
maximum offset downwards in pixels.
9. You can select where the cursor is anchored to the element when it is dragged at run time. In the
Cursor Anchor area, select:
o Top to anchor the element at its top side.
o Middle to anchor the element at its middle point.
o Lower to anchor the element at its lower side.
o Origin to anchor the element at its point of origin.
10. You can select if position data from the slider is written continuously to the attribute, or only one time
when the mouse button is released. In the Write Data area, select Continuously or On mouse
release.
11. If you want a tooltip to appear on the element showing the current value during dragging, select
Show Tooltip.
12. Preview the movement as it appears in run time by dragging the slider in the Preview area.
13. Click OK.

Configuring a Pushbutton Animation

You can configure an element with a pushbutton animation to change Boolean, analog or string
references.

Configuring a Pushbutton Animation for a Boolean Value

You can configure an element with a pushbutton to change a Boolean value.
To configure an element with a pushbutton animation to change a Boolean value
1. Select the element.
2. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.
3. Click the Add icon and select Pushbutton. The pushbutton animation is added to the Animation list
and the Pushbutton state selection panel appears.
4. Click the Boolean button. The Boolean Pushbutton configuration panel appears.
5. In the Boolean box, type a Boolean attribute reference or brows e for one by using the browse
button.

263
Creating and Managing Industrial Graphics User Guide Animating Graphic Elements

6. In the Action list, select:

o Direct so the value becomes true when the element is clicked and the mouse button held. The
value ret urns to false when the mouse button is released.
o Reverse so the value becomes false when the element is clicked and the mouse button held.
The value returns to true when the mouse button is releas ed.
o Toggle so the value becomes true if it is false and false if it is true when the element is clicked.
o Set so the value is set to true when the element is clicked.
o Reset so the value is set to false when the element is clicked.
7. If you select Toggle, Set or Reset as action, you can configure the action to be performed when the
mouse button is released instead of pressed down. To do this, select On button release.
8. If you select Direct, Reverse, Reset or Set as action, you can configure the value to be written:
o Continuously by selecting Continuously while button is pre ssed. Also specify the frequency
the value is to be sent, by typing a value in the Delay between value send box.
o One time by clearing Continuously while button is pre ssed.
9. Specify that the pushbutton action is executed by pressing a key or key combination. In the Shortcut
area. Select a shortcut key in the Key list. Select CTRL and/or SHIFT to combine the shortcut key
with the Ctrl key and/or Shift key.
10. Preview the pushbutton run-time behavior by clicking Button in the Preview area.
11. Click OK.

Configuring a PushButton Animation for an Analog Value

You can configure an element with a pushbutton to set an analog value.
To configure an element with a pushbutton animation to set an analog value
1. Select the element.
2. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.
3. Click the Add icon and select Pushbutton. The pushbutton animation is added to the Animation list
and the Pushbutton state selection panel appears.
4. Click the Analog button. The Analog Pushbutton configuration panel appears.
5. In the Analog box, type an attribut e reference or browse for one by using the brows e button.
6. From the Action list, select:
o Direct so the value becomes Value1 when the element is clicked and the mouse button held.
The value returns to Value2 when the mouse button is released.
o Toggle so the value becomes Value1 if it is Value2 and Value2 if it is Value1 when the element
is clicked.
o Set so the value is set to Value1 when the element is clicked
o Increment so the value is increased by Value1.
o Decrement so the value is decreas ed by Value1.
o Multiply so the value is multiplied with Value1.
o Divide so the value is divided by Value1.
7. In the boxes Value1 and, if applicable, Value2, type analog values, attribute references or
references.

264
Animating Graphic Elements Creating and Managing Industrial Graphics User Guide

8. You can configure the value to be written when the mouse button is released instead. Select On
button release. This does not apply if you select Direct as action.
9. You can configure the value to be written:
o Continuously by selecting the Continuously while button i s pressed. Also specify the
frequency the value is to be sent, by typing a value in the Delay between value send box.
o One time by clearing the Continuousl y while button i s pressed.
This does not apply if you select Toggle as action.
10. Specify that the pushbutton action is executed by pressing a key or key combination. In the Shortcut
area. Select a shortcut key in the Key list. Select CTRL and/or SHIFT to combine the shortcut key
with the CTRL key and/or SHIFT key.
11. Preview the pushbutton run-time behavior by clicking Button in the Preview area. Click the button
multiple times to preview the value changes over a period of time.
12. Click OK.

Configuring a PushButton Animation for a String Value

You can configure an element with a pushbutton to set a string value.
To configure an element with a pushbutton animation to set a string value
1. Select the element.
2. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.
3. Click the Add icon and select Pushbutton. The pushbutton animation is added to the Animation list
and the Pushbutton state selection panel appears.
4. Click the Analog button. The String Pushbutton configuration panel appears.
5. In the String box, type an attribute reference or browse for one by using the browse button.
6. From the Action list, select:
o Direct so the value becomes Value1 when the element is clicked and the mouse button held.
The value returns to Value2 when the mouse button is released.
o Toggle so the value becomes Value1 if it is Value2 and Value2 if it is Value1 when the element
is clicked
o Set so the value is set to Value1 when the element is clicked.
7. In the boxes Value1 and, if applicable, Value2, type string values, attribut e references or references.
8. Make sure that the input modes of the Value1 and Value2 boxes are set correctly. Click the Input
mode icons to set a static values or an attribute references or ex pressions.
9. You can configure the value to be written when the mouse button is released instead. Select On
button release. This does not apply if you select Direct as action.
10. You can configure the value to be written:
o Continuously by selecting the Continuously while button i s pressed. Also specify the
frequency the value is to be sent, by typing a value in the Delay between value send box.
o One time by clearing the Continuousl y while button i s pressed.
This does not apply if you select Toggle as action.
11. Specify that the pushbutton action is executed by pressing a key or key combination. In the Shortcut
area. Select a shortcut key in the Key list. Select CTRL and/or SHIFT to combine the shortcut key
with the Ctrl key and/or Shift key.

265
Creating and Managing Industrial Graphics User Guide Animating Graphic Elements

12. Preview the pushbutton run-time behavior by clicking Button in the Preview area.
13. Click OK.

Configuring an Action Script Animation

You can configure an element with an action script animation.
You can assign multiple action scripts to one element that are activated in different ways such as:

Use thi s... To activate the action script when the...

On Left Click/ Key/Touch Down left mous e button or a specific key is pressed or a
tap on a touc h display.

While Left Click/Key/Touch Down left mous e button or a specific key is pressed and
held or the touch display is tapped and held.

On Left/Key/Touch Up left mouse button or a specific key is released or the

tap is released from a touch display.

On Left Double Click/ Double Tap left mous e button is double-clicked or the touch
display is tapped twice in quick succession.
On Right Click/Long Pre ss right mouse button is pressed or a long press on the
touch display.
While Right Down right mouse button is pressed and held.

On Right Up right button is releas ed.

On Right Double Click right mouse button is double-clicked.

On Center Click center mouse button is pressed.

While Center Click center mouse button is pressed and held.

On Center Up center mouse button is released.

On Center Double Click center mouse button is double-clicked.

On Mouse Over pointer is moved over the element.

On Mouse Leave pointer is moved out of the element.

On Startup element is first shown in WindowViewer.

While Mouse Over pointer is over the element.

Note: To expand the available space for your script, you can use the Expansion buttons to hide the
script header and/or the Animation list.

To configure an element with an action script animation

1. Select the element.
2. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.
3. Click the Add icon and select Action Scripts. The action scripts animation is added t o the Animation
list and the Action Scripts configuration panel appears.

266
Animating Graphic Elements Creating and Managing Industrial Graphics User Guide

4. From the Trigger type list, select the trigger that activates the action script at run time.
5. If you select a trigger type that starts with "While", type how frequently the action script is ex ecuted at
run time in the Every box.
6. If you select the trigger types On Mouse Over or On Mouse Leave , the Every box label shows
After instead. Type a value in the After box. This value specifies after what delay the action script is
executed at run time.
7. Specify a trigger type that involves pressing a key is run by typing a key or key combination. In the
Shortcut area. Select a shortcut key in the Key list. Select Ctrl and/or Shift to combine the shortcut
key with the Ctrl key and/or Shift key.
8. Create your script in the action script window.
9. Click OK.

Configuring an Action Script Animation with a "Mouse-Down" Event Trigger

Action scripts that are activated with a "mouse -down" event (for example, On Left Click/Key/Touch
Down) trigger two separate events:
 A mouse-down event, when the button is pressed.
 A mouse-up event, when the button is released.
As a result, timing issues can occur in if the user holds the button, even momentarily, before releasing it.
These timing issues can affect how a pushbutton graphic is displayed. The pushbutton image may
continue to show as depressed (active state), even a fter the user has released the button.
You can avoid this potential timing issue by using a "mouse -up" trigger instead of the "mouse down." A
"mouse-up" trigger only sends one event (when the button is released), thus eliminating any timing
issues that could result from a delay in the user releasing the button.

Configuring a Show Symbol Animation

You can configure an element with a show symbol animation. A Show symbol animation shows a
specified graphic in a new dialog box, when the element is clicked on.
You can configure:
 Which graphic appears in the new window.
 If the window has a title bar, and if so if it has a caption.
 If the window is modal or modeless.
 If the window has a close button.
 If the window can be resized.
 The initial window position.
 The size of the window.
You can configure the position to be in relation of the:

267
Creating and Managing Industrial Graphics User Guide Animating Graphic Elements

 Desktop, such as at edges, corners, or at cent er.

Top Left Corner Top of Desktop Top Right Corner

of Desktop of Desktop

Desktop

Left Side of Right Side of

Center Desktop
Desktop Desktop

Bottom Left Corner Bottom Right

of Desktop Bottom of Desktop Corner of Desktop

Positioning Related to Desktop Edges and Center

 Window, such as at one of its edges, its corners, its center or above, below, to the left or right. The
window area includes the title bar if it appears.

Above

Top Left Corner Top of Window Top Right Corner

of Window of Window

Window

Left of Left Side of Right Side of Right of

Center Window
Window Window Window Window

Bottom Left Corner Bottom Right

of Window Bottom of Window Corner of Window

Application Below

Positioning Related to Window

268
Animating Graphic Elements Creating and Managing Industrial Graphics User Guide

 Client Area of your HMI software.

 Source Symbol, in which case the Show Symbol window is positioned in relation to the entire source
symbol that contains the element that called the window.

Top of Parent
Symbol Above Top Right Corner
Top Left Corner of Parent Symbol
of Parent
Symbol

Right Side of
Parent Symbol

Left of
Parent Symbol
Right of
Parent
Symbol
Left Side of
Parent Symbol

Bottom Left Corner

of Parent Symbol Bottom Right Corner
Center Parent Below of Parent Symbol
Symbol Bottom of Parent
Parent Symbol Symbol

Positioning Related to Parent Symbol

269
Creating and Managing Industrial Graphics User Guide Animating Graphic Elements

 Parent Element, in which case the Show Symbol window is positioned in relation just to the element
that called the Show Symbol window.

Parent Element

Parent Symbol

Positioning Related to Parent Element

 Mouse, in which case the Show Symbol window is positioned in relation to the pointer coordinates.

Bottom Right Bottom Left

Mouse Position Mouse Position

Top Right Top Left Mouse

Mouse Position Position

Center Mouse
Position

Selected Positionings Related to Mouse Pointer

270
Animating Graphic Elements Creating and Managing Industrial Graphics User Guide

 Desktop coordinates. The graphic is placed in the vicinity of coordinates that relate to the desktop.

Desktop

Vicinity in which the symbol

is shown (depending on the
Position setting)

X, Y Positioning Related to Desktop

 Window coordinates. The graphic is placed in the vicinity of coordinates that relate to the window,
including the title bar if shown.

Desktop

0 X

0
Vicinity in which
the symbol is
Window shown (depending
on the Position
setting)
Y

X, Y Positioning Related to Window

271
Creating and Managing Industrial Graphics User Guide Animating Graphic Elements

 Client Area coordinates. The graphic is placed in the vicinity of coordinates that relate to the client
area.

Desktop
0 X

0
Vicinity in which
the symbol is
shown (depending
on the Position
setting)
Y

Client Area

X, Y Positioning Related to Client Area

To configure an element with a show symbol animation

1. Select the element.
2. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.
3. Click the Add icon and select Show Symbol. The S how Symbol animation is added to the Animation
list.
4. Configure the graphic. Do one or more of the following:
a. In the Reference box, type a graphic name or browse for one by using the browse button.
b. To add a title bar to the graphic, select Has Title Bar.
c. To use the graphic name as window title, select Use Symbol Name for Window Title .
d. Select the window type, Modal or Modeless.
e. To add a Close button, select Ha s Close Button.
f. To add resize controls, select Resizable.
5. Select where you want the window to appear by selecting a position in the Position lists. The first list
contains positions that are in relation to the item of the second list. Select one of the following:
 Center
 Top Left Corner
 Top Right Corner
 Left
 Right of
 Lower
 Below
 Above
 Top
 Left of
 Right Side

272
Animating Graphic Elements Creating and Managing Industrial Graphics User Guide

 Lower Left Corner

 Lower Right Corner
From the second list, select the item the position is referring to:
 Desktop: relative to the entire desktop
 Window: relative to the window.
 Client Area: relative to the client area.
 Parent Symbol: relative to the entire graphic that calls it.
 Parent Element: relative to the element or element group that calls it.
 Mouse: relative to the point er.
 Desktop X,Y: relative to a specified coordinate on the desktop.
 Window X,Y: relative to a specified coordinate of the window.
 Client Area X,Y: relative to a specified coordinate of the client area.
6. If you select De sktop X,Y or Window X,Y or Client Area X,Y as position, type the new coordinat es
in the X and Y value boxes.
7. Select how large you want the window to be in the Size list. You can select:
 Relative to Symbol to make the window size the same as the size of the graphic.
 Custom Width and Height to specify a width and height.
Depending on your selection of the item the graphic is referring to, you can select:
 Relative to Desktop to adjust the window size relative to the size of the desktop.
 Relative to Window to adjust the window size relative to window that contains the graphic that
calls it.
 Relative to Client Area to adjust the window size relative to the client area.
 Relative to Parent Symbol to adjust the window size relative to the size of the graphic that calls
it.
 Relative to Parent Element to adjust the window size relative to the size of the element that
calls it.
8. Continue specifying position information.
a. If you select Relative... as size, enter a scaling percentage in the Scale Symbol box.
b. If you select Custom Width and Height as size, type the new width and height in the W and H
boxes.
c. If you select Desktop, Window, Client Area, Parent Symbol or Parent Element as referred
item, you can configure the object to be stretched horizontally or vertically. Do one or both of the
following:
– Select Stretch symbol to fit ... width and enter a height in the H box.
– Select Stretch symbol to fit ... height and enter a width in the W box.
9. You can specify that the graphic window appears by pressing a key or key combination. In the
Shortcut area:
a. Select a shortcut key in the Key list.
b. Select Ctrl and/or Shift to combine the shortcut key with the CTRL key and/or SHIFT key.
10. Click OK.

273
Creating and Managing Industrial Graphics User Guide Animating Graphic Elements

Configuring a Hide Symbol Animation

You can configure an element with a Hide Symbol animation. The Hide Symbol animation lets you close:
 The current graphic
 A graphic that is shown by a specified element.
To configure an element with a Hide Symbol animation
1. Select the element.
2. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.
3. Click the Add icon and select Hide Symbol. The Hide Symbol animation is added to the A nimation
list and the Symbol Hide configuration panel appears.
4. Select:
o Current Symbol if you want to close the currently shown graphic.
o Symbol shown by an element if you want to close a graphic that appears by that element.
Type the element name in the adjac ent box.
5. You can specify that the graphic window closes by pressing a key or key combination. In the
Shortcut area:
a. Select a shortcut key in the Key list.
b. Select Ctrl and/or Shift to combine the shortcut key with the Ct rl key and/or Shift key.
6. Click OK.

Configuring a Hyperlink Animation

You can configure an element with a hyperlink animation, i.e. a link when clicked will launch the default
browser with a customizable URL. The animation will allow you t o construct a URL animation using static
text, reference or a compound expression.
To configure an element with a hyperlink animation
1. Select the element.
2. On the Special menu, click Edit Animations. The Edit Animation dialog box appears.
3. Click the Add icon and select Hyperlink. The hyperlink animation is added to the Animation list and
the Hyperlink configuration panel appears.
4. The hyperlink can be specified as static text, an expression, or a reference.
o Select the T icon to indicate that it is a static value.
o Select the tag icon to indicate that it is a reference to a value.
5. For a static value type the complet e URL. For example: [Link]
6. For a reference or expression value, open y our HMI's attribut e/tag browser and select a dat a source.
7. You can also form expression that will use tag values in runtime to generate a URL. For example:
"[Link]/search?q=" + CPSearchText
8. Select the Protocol; http or https.
9. You can specify a shortcut by pressing a key or key combination. In the Shortcut area:
o Select a shortcut key in the Key list.
o Select Ctrl and/ or Shift to combine the shortcut key with the Ctrl key and/or Shift key.

274
Animating Graphic Elements Creating and Managing Industrial Graphics User Guide

10. If the value is set as static text, then you can click the Preview button and test the link.
11. Click OK.

Configuring Element-Specific Animations

Some elements have their own unique animation type that can only be used for that element type. You
cannot remove their unique animation, but depending on the element you can add and remove other
common animations.
The elements with specific animations ar e:
 Status element
 Windows common controls

Configuring Animation for a Status Element

You can configure the Status element with a DataStatus animation to indicate quality and status from:
 Attributes and tags used in elements with animatio n.
 Attributes and tags directly.
The appearance of the Status element depends on the settings in the Configure Quality and Status
Di splay dialog box. For more information, see Configuring Animation for a Status Element on page 275.
The DataStatus animation is only used by the Status element and cannot be removed from the Status
element.
To configure a DataStatus animation
1. Select the Status element.
2. On the Special menu, click Edit Animations. The Edit Animations dialog box appears, showing
the DataStat us configuration panel.
3. In the Available Graphic Elements list, select all elements for which you want to monitor their
attribute quality and status.
4. Click the >> button to add them to the Selected Graphic Elements list.
5. Click the Expressi on tab. The Expre ssion panel appears.
6. In the Value or Expression list, type a value or expression that can be a literal, or a reference or
element property.

Tip: You can also browse for the reference by clicking the browse button.

7. To add more values or expressions, click the Add button. An additional row is added for data input.
8. Click OK.

Restrictions of the Status Element

The Status element must be in the same hierarchical level as the animated elements with the attribut es
you want to monitor.

275
Creating and Managing Industrial Graphics User Guide Animating Graphic Elements

If you move elements out of their hierarchical level aft er you associate them with a Status element, for
example, by grouping them, their attributes are no longer monitored.

To avoid this problem, move a new Status element in the hierarchical level you want to monitor, or
associate it directly with the attributes you want to monitor.

Configuring a Radio Button Group Animation

The Radio Button Group animation is only used by the Radio Button Group element.
You can create a:
 Static radio button group - uses static captions and values that you define in the c onfiguration panel.
 Array radio button group - uses captions and values contained in an AutomationObject array.
 Enum radio button group - uses captions and values contained in an enum data type of an
AutomationObject.

Configuring a Static Radio Button Group Animation

You can configure a radio button group with static values and captions.
To configure a static radio button group animation
1. Select the radio button group element.
2. On the Special menu, click Edit Animations. The Edit Animations dialog box appears and the
Static Radio Button Group configuration panel appears on the right side.
3. In the Reference box, type an attribute reference that is to be tied to the selected value at run time.
You can select when to submit the value changes. For more information, see Submitting the Value
Changes on page 290.
4. In the Static Values and Captions list, configure the captions of the radio button group and also the
values that correspond to them to:
o Add an option - click the Add icon.
o Delete an option - select it in the list and click the Remove icon.
o Move an option up the list - select it in the list and click the Arrow up icon.
o Move an option down the list - select it in the list and click the Arrow down icon.
5. To use the values themselves as captions, select Use Values as Captions.
6. Orientate the radio button group in vertical or horizontal direction. Select Vertical or Horizontal.
7. Click OK.

Configuring an Array Radio Button Group Animation

You can configure a radio button group with values from an array and captions.

276
Animating Graphic Elements Creating and Managing Industrial Graphics User Guide

To configure an array radio button group animation

1. Select the radio button group element.
2. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.
3. Click the Array button. The Array Radio Button Group configuration panel appears on the right
side.
4. In the Reference box, type an attribute reference that is to be tied to the selected value at run time.
You can select when to submit the value changes. For more information, see Submitting the Value
Changes on page 290.
5. In the Array Reference box, type or browse for an array attribute. The Array Values and Captions
list shows the values from the array reference.
6. To define your own captions, clear Use Values as Captions and type them in the list.
7. To format the value before it appears as a caption, type a text format string in the Format box, for
example #.###. Preceding zeroes are ignored if the array data type is numeric.
8. Set Items Sorting to:
o None to show the items in the order they are in the array attribute.
o Ascending to show the items sorted in ascending order.
o Descending to show the items sorted in descending order.
9. Orientate the radio button group in vertical or horizontal direction. Select Vertical or Horizontal.
10. Click OK.
For example, you want to creat e a Radio Button Group in your symbol with the following options. The
values to be written to the target attribute are contained in the user -defined attribute array called Options
of an AutomationObject called UD.

Option Value to be written

Open 1

Close 2

Hold 3

Report Error 4

Unknown 99

Configuring an Enum Radio Button Group Animation

You can configure a radio button group with values from an enum attribute and captions.
To configure an enum radio button group animation
1. Select the radio button group element.
2. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.
3. Click the Enum button. The Enum Radio Button Group configuration panel appears on the right
side.
4. In the Enum Reference box, type an enum attribute reference. The Enum Values and Captions list
shows the values from the enum reference.
277
Creating and Managing Industrial Graphics User Guide Animating Graphic Elements

You can select when to submit the value changes. For more information, see Submitting the Value
Changes on page 290.
5. To define your own captions, clear Use Values as Captions and type them in the list.
6. Set Items Sorting to:
o None to show the items in the order they are in the enum attribute.
o Ascending to show the items sorted in ascending order.
o Descending to show the items sorted in descending order.
7. Orientate the radio button group in vertical or horizontal direction. Select Vertical or Horizontal.
8. Click OK.

Configuring a Check Box Animation

The Check Box animation is only used by the Check Box element.
To configure a Check Box animation
1. Select the Check Box element.
2. On the Special menu, click Edit Animations. The Edit Animations dialog box appears and the
Check Box configuration panel appears on the right side.
3. In the Checked value - Boolean box, type an attribute reference. The attribute reference is tied to
the selected state of the check box control at run time.
You can select when to submit the value changes. For more information, see Submitting the Value
Changes on page 290.
4. To set the caption of the check box at run-time, select Override caption at Runtime with the
following expression and type a string value or attribute reference or expression in the String
Expression box.
5. Click OK.

Configuring an Edit Box Animation

The Edit B ox animation is only used by the Edit Box element. You cannot remove this animation from the
Edit Box element, but you can add cert ain common animations.
You can also use Edit Box-specific methods in scripting to get and set the text at run time. You can
browse these methods in your HMI's attribute/tag browser with the Edit Box selected. For more
information on these methods, see Configuring Edit Box Methods on page 306.
To configure an Edit Box animation
1. Select the Edit Box element.
2. On the Special menu, click Edit Animations. The Edi t Animations dialog box appears and the Edit
Box configuration panel appears on the right side.
3. In the String Reference box, type an string attribute reference. The string attribute reference is tied
to the text in the edit box at run time.
You can select when to submit the value changes. For more information, see Submitting the Value
Changes on page 290.

Tip: Use the On Trigger Condition option to set when the Edit Box element writes the run-time value to
the reference. This avoids a conflict between the run-time value of the Edit Box and run-time value of the
reference.

4. In the Configuration area, select:

278
Animating Graphic Elements Creating and Managing Industrial Graphics User Guide

o Multiline to wrap the text into multiple lines in the edit box.
o Read-Only to use the edit box to only show text and not allow text input.
o Maximum Length to limit the maximum numbers of characters you can type in the edit box
control. You can specify the maximum number in the Characters box.
5. Enter a default text in the Text box.

Configuring a Combo Box Animation

The Combo Box animation is only used by the Combo Box element.
You can create a:
 Static combo box - uses static captions and values that you define in the configuration panel.
 Array combo box - uses captions and values contained in an array if supported by your HMI
software.
 Enum combo box - uses captions and values contained in an enum dat a type if support ed by your
HMI software.
You can also use Combo Box-specific methods in scripting to perform various functions at run time. You
can browse thes e methods in your HMI's attribute/tag browser with the Combo Box selected.
For more information on these methods, see Configuring Combo Box and List Box Methods on page
306.

Configuring a Static Combo Box Animation

You can configure a combo box with static values and captions.
To configure a static combo box animation
1. Select the combo box element.
2. On the Special menu, click Edit Animations. The Edit Animations dialog box appears and the
Static Combo Box configuration panel appears on the right side.
3. In the Reference box, type an attribute reference that is to be tied to the selected value at run time.
You can select when to submit the value changes. For more information, see Submitting the Value
Changes on page 290.
4. In the Static Values and Captions list, configure the captions of the combo box and also the values
that correspond to them:
 Add an option - click the Add icon.
 Delete an option - select it in the list and click the Remove icon.
 Move an option up the list - select it in the list and click the Arrow up icon.
 Move an option down the list - select it in the list and click the Arrow down icon.
5. Specify how you want to use captions. Do one of more of the following:
 To use the values themselves as captions, select Use Values as Captions.
 To alphabetically sort the captions, select Sorted.
 To enable duplicate captions, select Allow Duplicates.

Note: If you clear Allow Duplicates and click OK, all duplicate captions are removed from
combo box on the canvas. The captions are case-insensitive, so that for example "item1" is
considered a duplicate of "It em1". The removal of the duplicat e items is reflected when you
re-open the Edit Animations dialog box.

279
Creating and Managing Industrial Graphics User Guide Animating Graphic Elements

6. Select the type of combo box from the Type list. Select:
 Simple - at run time you can type a value, or select one by using arrow up and arrow down
buttons. However, you cannot see the list of values.
 DropDown - at run time you can type a value, or select one from the list.
 DropDownLi st - at run time you can only select a value from the list, but not type one.
7. Click OK.

Configuring an Array Combo Box Animation

You can configure a combo box with values from an array and captions.
To configure an array combo box animation
1. Select the combo box element.
2. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.
3. Click the Array button. The Array Combo Box configuration panel appears on the right side.
4. In the Reference box, type an attribute reference that is to be tied to the selected value at run time.
The Array Values and Captions list shows the values from the array reference.
You can select when to submit the value changes. For more information, see Submitting the Value
Changes on page 290.
5. To define your own captions, clear Use Values as Captions and type them in the list.
6. If you want to format the value before it appears as a caption, type a text format string in the Format
box, for example #.###. Preceding zeroes are ignored if the array dat a type is numeric.
7. Set Items Sorting to:
o None to show the items in the order they are in the array attribute.
o Ascending to show the items sorted in ascending order.
o Descending to show the items sorted in descending order.
8. Click OK.

Configuring an Enum Combo Box Animation

You can configure a combo box with values from an enum attribute and captions.
To configure an enum combo box animation
1. Select the combo box element.
2. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.
3. Click the Enum button. The Enum Combo Box configuration panel appears on the right side.
4. In the Enum Reference box, type an enum attribute reference. The Enum Values and Captions list
shows the values from the enum reference.
You can select when to submit the value changes. For more information, see Submitting the Value
Changes on page 290.
5. To define your own captions, clear Use Values as Captions and type them in the list.
6. Set Items Sorting to:
o None to show the items in the order they are in the enum attribute.
o Ascending to show the items sorted in ascending order.
o Descending to show the items sorted in descending order.

280
Animating Graphic Elements Creating and Managing Industrial Graphics User Guide

7. Click OK.

Configuring a Calendar Control Animation

The Calendar Control animation is only used by the Calendar Control element. The Calendar Cont rol
date format depends on the regional settings of the operating system.
To configure a Calendar control animation
1. Select the Calendar cont rol element.
2. On the Special menu, click Edit Animations. The Edit Animations dialog box appears and the
Calendar configuration panel appears on the right side.
3. In the Date Reference box, type a Time attribute reference that is to be tied to the selected value at
run time.
You can select when to submit the value changes. For more information, see Submitting the Value
Changes on page 290.
4. To restrict the date the user can select at run time, specify limits as follows:
o In the MinDate box, type a lower limit for the date.
o In the MaxDate box, type an upper limit for dat e.
5. To show some dates as bold, in the Bolded Date s box, type a reference that points to an attribute
array with time data type.
6. To show today’s date on the calendar control, select Show Today.
7. To change the colors of the calendar control, click in the Calendar Colors area the following color
boxes:
o Month Background
o Month Trailing Forecolor
o Title Background
o Title Foreground
The Select FillColor dialog box appears and you can select a solid color.
8. Click OK.

Configuring a DateTime Picker Animation

The DateTime Picker animation is only used by the DateTime Picker element.
To configure a DateTime Picker animation
1. Select the DateTime Picker control element.
2. On the Special menu, click Edit Animations. The Edit Animations dialog box appears and the
DateTime Picker configuration panel appears.
3. In the Time Reference box, type a Time attribute referenc e that is to be tied to the selected value at
run time.
You can select when to submit the value changes. For more information, see Submitting the Value
Changes on page 290.
4. To set the datetime format, select one of the following from the Format list:
 Long to show the date and time in the long format of the operating system, for example:
Thurs day, August 03 2006.

281
Creating and Managing Industrial Graphics User Guide Animating Graphic Elements

 Short to show the date and time in the short format of the operating system, for example:
8/3/2006.
 Time to show just the time in the time format of the operating system, for example: [Link] PM.
 Custom to specify your own time format. Use the following letters to set the time format:
h One or two-digit hour in 12-hour format.
hh Two-digit hour in 12-hour format. Single digit values are
preceded by a zero.
H One or two-digit hour in 24-hour format.
HH Two-digit hour in 24-hour format. Single digit values are
preceded by a zero.
t One-letter AM/PM abbreviation ("AM" appears as "A").

tt Two-letter AM/PM abbreviation ("AM" appears as "AM").

m One or two-digit minute.

mm Two-digit minute. Single digit values are preceded by a zero.

s One or two-digit seconds.

ss Two-digit seconds. Single digit values are preceded by a zero.

d One or two-digit day.

dd Two-digit day. Single digit day values are preceded by a zero.

ddd Three-character day -of-week abbreviation.

dddd Full day-of-week name.
M One or two-digit month number.
MM Two-digit month number. Single digit values are preceded by a
zero.
MMM Three-character month abbreviation.
MMMM Full month name.
y One-digit year (2001 appears as "1").
yy Last two digits of the year (2001 appears as "01").
yyyy Full year (2001 appears as "2001").

Note: You c an use any other characters, except "g" in the property. These characters then appear at
design time and run time in the control.

5. To restrict the date the user can select at run time, you can specify limits in the:
 MinDate box - type a lower limit for the date.
 MaxDate box - type an upper limit for date.
6. To change the colors of the calendar control that drops down, click in the Calendar Colors area the
following color boxes:

282
Animating Graphic Elements Creating and Managing Industrial Graphics User Guide

 Month Background
 Month Trailing Forecolor
 Title Background
 Title Foreground
The Select FillColor dialog box appears and you can select a solid color.

Configuring a List Box Animation

The List Box animation is only used by the List Box element.
You can create a:
 Static list box - uses static captions and values that you define in the configuration panel.
 Array list box - uses captions and values contained in an array if supported by your HMI software.
 Enum list box - uses captions and values contained in an enum data ty pe if supported by your HMI
software.
You can also use List Box-specific methods in scripting to perform various functions at run time. You can
browse these methods in your HMI's attribute/tag browser with the List Box selected.
For more information on these methods, see Configuring Combo Box and List Box Methods on page
306.

Configuring a Static List Box Animation

You can configure a list box with static values and capt ions.
To configure a static list box animation
1. Select the list box element.
2. On the Special menu, click Edit Animations. The Edit Animations dialog box appears and the
Static List Box configuration panel appears on the right side.
3. In the Reference box, type an attribute reference that is to be tied to the selected value at run time.
You can select when to submit the value changes. For more information, see Submitting the Value
Changes on page 290.
4. In the Static Values and Captions list, configure the captions of the list box and als o the values that
correspond to them. To:
o Add an option - click the Add icon.
o Delete an option - select it in the list and click the Remove icon.
o Move an option up the list - select it in the list and click the Arrow up icon.
o Move an option down the list - select it in the list and click the Arrow down icon.
5. Specify how you want to use captions. Do one of more of the following:
o If you want to use the values thems elves as captions, select Use Values as Captions.
o If you want to alphabetically sort the captions, select Sorted.
o If you want to allow duplicat e captions, select Allow Duplicates.
6. Click OK.

Configuring an Array List Box Animation

You can configure a list box with values from an array and captions.

283
Creating and Managing Industrial Graphics User Guide Animating Graphic Elements

To configure an array list box animation

1. Select the list box element.
2. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.
3. Click the Array button. The Array List Box configuration panel appears on the right side.
4. In the Reference box, type an attribute reference that is to be tied to the selected value at run time.
You can select when to submit the value changes. For more information, see Submitting the Value
Changes on page 290.
5. In the Array Reference box, type or browse for an array attribute. The Array Values and Captions
list shows the values from the array reference.
6. To define your own captions, clear Use Values as Captions and type them in the list.
7. To format the value before it appears as a caption, type a text format string in the Format box, for
example #.###. Preceding zeroes are ignored if the array data type is numeric.
8. Set Items Sorting to:
o None to show the items in the order they are in the array attribute.
o Ascending to show the items sorted in ascending order.
o Descending to show the items sorted in descending order.
9. Click OK.

Configuring an Enum List Box Animation

You can configure a list box with values from an enum attribute and captions.
To configure an enum list box animation
1. Select the radio button group element.
2. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.
3. Click the Enum button. The Enum Li st Box configuration panel appears on the right side.
4. In the Enum Reference box, type an enum attribute reference. The Enum Values and Captions list
shows the values from the enum reference.
5. You can select when to submit the value changes. For more information, see Submitting the Value
Changes on page 290.
6. To define your own captions, clear Use Values as Captions and type them in the list.
7. Set Items Sorting to:
o None to show the items in the order they are in the enum attribute.
o Ascending to show the items sorted in ascending order.
o Descending to show the items sorted in descending order.
8. Click OK.

Configuring a Trend Pen

A Trend Pen shows a succession of process values as a trend line consisting of current and historical
data updated at a minimum of one second intervals. A trend line gives operators a quick vis ual snapshot
of a process value over a defined period.

284
Animating Graphic Elements Creating and Managing Industrial Graphics User Guide

Understanding the Types of Trend Plots

You can configure two types of Trend Pen plots. A Line plot draws a line between each successive data
point during the trend period.

A Step Line plot draws a horizontal line from a trend data point to the time of the next point on the trend’s
X-axis, and then draws a vertical line to the data point. A Step Line plot is the default for a Trend Pen.

Understanding the Types of Trend Pen Periods

A trend time period is the interval of process values shown on the X-axis of the trend during run time,
which consists of a start time, end time, and a duration.
 The Start Time and duration properties are read/write.
 The EndTime property is a read-only value that the system calculates by adding the duration to the
start time.
You can configure two types of Trend Pen periods.
 Moving time period
In a Moving trend period, the start time of a trend period is the current time, and the end time is the
duration of the time period from the start time. When the period ends, the next period begins. The
start time for the next period is set to the end time of the previous trend period.
 Fixed time period
In a Fixed trend period, the start time is initially the current time. The start time of a trend period does
not change automatically, but can be specified by a script using the Start Time property.
The end time of a Fixed trend period is set by the duration of the trend from the specified start time of
the period.
End Time = Start Time + Duration

285
Creating and Managing Industrial Graphics User Guide Animating Graphic Elements

Understanding Trend Pen Historical Data Retrieval

When an application cont aining a Trend P en starts running in WindowViewer, a Historian query retrieves
data for the entire Trend Pen period. Real -time dat a is plotted on the trend line during the period that
historical dat a is being retrieved. After ret rieving historical data, it is added to real -time data to back fill the
trend line for the entire period.
The following procedure shows the steps to configure a Trend Pen. Typically, configuring a Trend Pen
includes several steps to place the Trend Pen next to a meter graphic to visually indicate the Trend Pen
plot shows the changes in the graphic’s process value over time.
To configure Trend Pen
1. Click Trend Pen from the Graphic Toolbox.
The cursor changes to a cross hair when plac ed over the Industrial Graphic Editor canvas area.
2. Place the cursor over the canvas at the position you want to set as a horizontal boundary of the
Trend Pen plot.
3. Pressing the left mouse button, drag the cursor to create a rectangle.
The horizont al and vertical boundaries of the Trend Pen graphic rectangle represent the drawing
area of Trend Pen plot during run time. The horizontal axis of the graphic rectangle represents the
time period of the trend. The vertical axis represents the range of the trend’s possible values.

4. Release the left mouse key after sizing the rectangle to the height and width that you want to
represent as the trend area.
The Trend Pen dialog box appears when the mouse key is released. You can als o show the Trend
Pen dialog box by double-clicking on the Trend Pen graphic or selecting Edit Animations from the
Special menu.
5. Enter a reference in the Reference field.
The reference is the data source that appears as the value shown by the trend, whic h can be an
external referenc e like an object’s attribute, an InTouch analog tag value, or a custom property.
Constants and expressions are not allowed.
6. Select Hi storian or InTouch Log Hi story/LGH for the Historic al Source. If you select Historian
proceed with Step 8.
7. On selecting InTouch Log Hi story/LGH you can use the icon against the UNC Path to toggle input
to the field as an Expression or Static text.
a. If you select the Expression mode, you can click the ellipsis button to launch your HMI's
attribute/tag browser and select a Custom property, attribute or tag.
b. If you select the Static Text mode, you can click the ellipsis button to launch the file browser
where you can specify the LGH file name.
8. Select Auto-Detect or Expression for the method to identify the loc ation of the Historian.
Auto-Detect
The Historian server is auto-det ected from the AppEngine on which the reference attribute is
running. For example, if the Reference field is set to UDO.UDA1, then Auto-Detect is set to the
Historian server name configured for the AppE ngine on which UDO is running. Auto -Detect is only
valid for Application Server References.

286
Animating Graphic Elements Creating and Managing Industrial Graphics User Guide

Expression
When an expression or referenc e is entered in the Server Name field, the Trend P en connects to the
specified Historian Server.
The icon to the left of the Server Name field toggles input to the field as an expression or Static Text
mode.
A Trend Pen only shows live data if the Server Name field is left blank in Expre ssion mode.
9. Select Moving or Fixed as the type of trend time period.
Moving
The start time of a trend period is the current time, and the end time is the duration of the time period
from the start time. The start time for the next period is set to the end time of the previous trend
period.
Fixed
In a Fixed trend time period, the StartTime and EndTime properties do not change automatically.
The start time of a trend period is the c urrent time initially. The Start Time property can be changed by
a script.
The EndTime property of a trend period (both Moving and Fixed) is read-only. The end time of a
trend period is calculated from the specified start time and duration of the period.
10. Set the X-axis time period of the trend line in the Duration (Minute s) field.
The trend time period can be specified as a constant, an external reference, an expression, or
custom property. If a floating point number is entered, the period is rounded up t o the nearest minute.
The minimum trend period is 1 minute and the maximum period is 10080 minutes (1week).
11. Select Auto-Range or Clip out of Range Values for the scaling method to place process values on
a trend line.
If Auto-Range is selected, the Min Range and Max Range fields are disabled. The Y-axis of the
trend line is automatically adjusted to show the full range of trend values within the upper and lower
boundaries of the Trend Pen graphic.
If Clip out of Range Values is selected, the Min Range and Max Range fields are enabled. Min
Range and Max Range set the lower and upper limits of the trend’s Y-axis value range. Both fields
can be set to constants, external references, or custom properties.
When a value exceeds the trend’s minimum or maximum limits using Clip out of Range Values, the
trend line is truncated at the limit of the value range and appears as a horizontal line for the period
when the process value is out of trend’s value range.
12. From Plot Type, select Step Line or Line as the type of trend plot.
o A Step Line plot draws a horizontal line from a trend data point to the time of the next data point
on the trend’s X-axis, and then draws a vertical line to the dat a point.
o A Line plot draws a line directly to each successive point wit hin the trend period.

287
Creating and Managing Industrial Graphics User Guide Animating Graphic Elements

Changing Trend Pen Properties During Run Time

A Trend Pen contains a collection of properties whose values can be modified during run time to change
the visual and functional characteristics of a trend. The following illustration is one example of a browser
or explorer typically available in HMI soft ware to search for attributes or tags, the values of which can be
changed at run time.

The following properties are typically modified during run time to change the vis ual and functional
characteristics of a Trend Pen.

MinValue Property
During run time, the value of the MinValue property can be modified to change the minimum meas ured
value shown by a trend. During run time, MinValue can be a read/write or a read only property based on
the value assigned to the Trend Pen’s Y Axis Range option during design time.
 When Y Axis Range is set to Auto-Range during design time
The minimum meas ured value shown by a trend is set to the minimum value of dat a received from
the Historian or from current data during the trend period. MinValue is read only.
 When Y Axis Range is set to Clip out of range values during design time.
The minimum meas ured value shown by a trend is set to a minimum limit set from the Min Range
option during design time.
MinValue is read/ write and can be changed during run time. When MinValue is changed during run
time, the trend line is redrawn based on the values assigned to the MinV alue and MaxValue
properties.
When the values assigned to MinValue and MaxValue properties are the same, the trend’s Y Axis
Range automatically changes to Auto-Range.

288
Animating Graphic Elements Creating and Managing Industrial Graphics User Guide

MaxValue Property
During run time, the value of the MaxValue property can be modified to change the maximum measured
value shown by a trend. During run time, MaxValue can be a read/write or a read only property based on
the value assigned to the Trend Pen’s Y Axis Range option during design time.
 When Y Axis Range is set to Auto-Range during design time
The maximum measured value shown by a trend is set to the maximum value of data received from
the Historian or from current data during the trend period. MaxValue is read only.
 When Y Axis Range is set to Clip out of range values during design time
The maximum measured value shown by a trend is set to a maximum limit set from the Max Range
option during design time.
MaxValue is read/ write and can be changed during run time. When MaxValue is changed during run
time, the trend line is redrawn based on the values assigned to the MinV alue and MaxValue
properties.
When the values assigned to MinValue and MaxValue properties are the same, the trend’s Y Axis
Range automatically changes to Auto-Range.

StartTime Property
During run time, the value of the Start Time property can be modified to change the start time of a trend
period based on the value set to the Trend Pen Time Period during design time.
 When Time Period is set to Fixed during design time
The default value assigned to the Start Time property is the time when the Trend Pen first appears in
the WindowViewer, also the start time changes as time passes. StartTime is read/write and can be
changed during run time. When value of Start Time changes, the Trend Pen re plots the trend using
new StartTime value.
 When Time Period is set to Moving during design time
The value set to the StartTime property is the current system date and time. StartTime is read only.

PlotType Property
During run time, the value of the PlotType property can be modified to change the type of trend plot.
 When PlotType is 0, the Trend Pen plot type is Step Line. The default.
 When PlotType is 1, the Trend Pen plot type is Line.
The value of PlotType is ignored if the value is neither 0 nor 1.
When the value of PlotType changes in run time, trend data is retrieved again before drawing the trend.

TimeMode Property
During run time, the value of the TimeMode property can be modified to change the type of trend time
period.
 When TimeMode is 0, the trend time period mode is Moving. The end time of the trend is the current
time. The default.
 When TimeMode is 1, the trend time period mode is Fixed. The start time of the trend is when the
Trend Pen first appears in the WindowViewer, also the start time changes as time passes.
The value of TimeMode is ignored if the value is neither 0 nor 1.

289
Creating and Managing Industrial Graphics User Guide Animating Graphic Elements

When the time period changes from Moving to Fixed during ru n time, the trend’s start time and end time
remain the same before switching, and the data remains as well. When the time period changes from
Fixed to Moving during run time, data is retrieved again before drawing the trend. The trend’s start and
end times are adjusted automatically by Moving mode.

FillTrend Property
During run time, you can us e the FillTrend property to change the appearance of the area below the
trend pen curve.
The FillTrend property can also be modified using scripts. For example [Link] =
not [Link];
The Fill Property in Fill Style animation, Element Style animation, or Element Style will now apply to the
FillTrend property according to the general element style precedent rules.
For more information on the Fill Style animation, see Setting Fill Style on page 144.
For more information on Element Style animation, see Configuring an Animation Using Element Styles
on page 173.

Note: The FillTrend property can be enabled during design or runtime. In runtime the color will default to
white, if no color is selected in design time.

Submitting the Value Changes

You can configure a Windows common control to write the data:
 Immediately when it is selected in the control at run time.
 When a specified Boolean expression becomes true.

Note: The Boolean expression is a trigger that det ermines when the value is written from the control to
the tag or attribute. If the value changes in the tag or attribute, then the value is written to the control,
regardless of the trigger setting or condition.

To submit value changes immediately

1. Open the Windows common control in the Edi t Animations dialog box.
2. In the Submit Value Changes area, select Immediately.
To submit value changes after a Boolean expression becomes true
1. Open the Windows common control in the Edit Animations dialog box.
2. In the Submit Value Changes area, select On Trigger Condition.
3. In the Boolean Expression box, type a Boolean expression or browse for a Boolean attribute.

Format Strings in Element-Specific Animations

Some element-s pecific animations support format strings that specify the format of data during run time
when a graphic is displayed. Element specific -animations enable you to change t he style of the dis played
data without changing the graphic in the editor, either interactively through the use of static text or by
referencing strings within data items, thereby making the format dynamic. A format string consists of one
or more identifiers that define the output.

Numbers
The following table lists the basic number formatting.

290
Animating Graphic Elements Creating and Managing Industrial Graphics User Guide

Example Output Example Output

Identifier Type Format for "1.42" for "-12400"

c Currency {0:c} $1.42 -$12,400

d Decimal (whole number) {0:d} Error -12400
e Scientific {0:e} 1.420000e+000 -1.240000e+004
f Fixed point {0:f} 1.42 -12400.00
g General {0:g} 1.42 -12400
n Number with commas for {0:n} 1.42 -12,400
thousands
r Round trip {0:r} 1.42 Error
x Hexadecimal {0:x4} Error cf90
The following table lists the custom number formatting.

Example Output
Identifier Type Format for "1500. 42" Note s

0 Zero placeholder {0:00. 0000} 1500.4200 Pads with zeroes.

# Digit placeholder {0:(#).##} (1500).42
. Decimal point {0:0.0} 1500.4
, Thousand separator {0:0,0} 1,500 Must be between two
zeroes.
,. Number scaling {0:0,.} 2 Comma adjacent to Period
scales by 1000.
% Percent {0:0%} 150042% Multiplies by 100, adds %
sign.
e Exponent placeholder {0:00e+0} 15e+2 Many exponent formats
available.
; Group separator Used to separat e multiple
formats in one string format
(for example, including
parentheses around a
string if the value is
negative; see Format
String Examples on page
293).

Dates
Date formatting is dependent on the system’s regional settings; the example strings here are for the U.S.
The following table lists the basic date formatting.

291
Creating and Managing Industrial Graphics User Guide Animating Graphic Elements

Identifier Type Example

d Short dat e 10/12/ 2002

D Long date December 10, 2002

t Short time 10:11 PM

T Long time [Link] 29 PM

f Full date and time December 10, 2002 10:11 PM

F Full date and time December 10, 2002 [Link] PM

(long)
g Default date and time 10/12/ 2002 10:11 PM

G Default date and time 10/12/ 2002 [Link] PM

(long)
M Month day pattern December 10
r RFC1123 date string Tue, 10 Dec 2002 [Link] GMT
s Sortable date string 2002-12-10T[Link]
u Universal sortable, 2002-12-10 [Link]Z
local time
U Universal sortable, December 11, 2002 [Link] AM
GMT
Y Year month pattern December, 2002
The following table lists the custom date formatting.

Example
Identifier Type Format Output

dd Day {0:dd} 10
ddd Day name {0:ddd} Tue
dddd Full day name {0:dddd} Tuesday
f, ff, … Second fractions {0:fff} 932
gg, … Era {0:gg} A.D.
hh 2-digit hour {0:hh} 10
HH 2-digit hour, {0:HH} 22
24-hr format
mm Minute 00-59 {0:mm} 38
MM Month 01-12 {0:MM} 12
MMM Month abbreviation {0:MMM} Dec
MMMM Full month name {0:MMMM} December

292
Animating Graphic Elements Creating and Managing Industrial Graphics User Guide

Example
Identifier Type Format Output

ss Seconds 00-59 {0:ss} 46

tt AM or PM {0:tt} PM
yy Year, 2 digits {0:yy} 02
yyyy Year {0:yyyy} 2002
zz Time zone offset, {0:zz} -05
2 digits
zzz Full time zone offset {0:zzz} -05:00
: Separator {0:hh:mm:ss} [Link] 20
/ Separator {0:dd/MM/yyyy} 10/12/ 2002

Enumerations
Identifier Type

g Default (flag names if available, otherwise decimal)

f Flags always
d Integer always
x Eight-digit hex

Format String Examples

The following string is an example of a currency string:
[Link]("{0:$#,##0.00;($#,##0.00);Zero}", value);
This string example will out put values as follows:
 $1,240.00 if passed 1243.50.
 ($1,240.00) if passed -1243.50.
 The string Zero if passed the number zero.
The following string is an example of a phone number string:
[Link]("{0:(###) ###-####}", 8005551212);
This string example will out put (800) 555-1212.

Cutting, Copying and Pasting Animations

You can cut, copy and paste animations and their configuration between different elements. This is
useful when you want to duplicate the animations of one element such as a line, to a different type of
element such as a polyline.
If you try to paste an animation to an element that is already configured with that animation, or does not
support this animation, a message appears informing you why you cannot paste the animation.
To copy and paste animations between elements
1. Select the element from which you want to copy the animations.

293
Creating and Managing Industrial Graphics User Guide Animating Graphic Elements

2. On the Edit menu, point to Animations, and then click Copy.

3. Select one or more elements to which you want to paste the animations.
4. On the Edit menu, point to Animations, and then click Paste. The animation links are copied from
the source element to the target elements.
To cut and paste animations between elements
1. Select the element from which you want to cut the animations.
2. On the Edit menu, point to Animations, and then click Cut.
3. Select one or more elements to which you want to paste the animations.
4. On the Edit menu, point to Animations, and then click Paste. The animation links are removed from
the source element and copied to the target elements.

Substituting References in Elements

You can search and replace references used by any element on your canvas. You can use:
 basic mode by replacing strings in a list.
 advanced functions such as find and replace, ignore or respect case-sensitivity and wildcards.
To substitute references in a graphic by using the list
1. Select one or more elements.
2. Do one of the following:
o Press Ctrl + E.
3. On the Special menu, click Substitute References.
The Substitute Reference s dialog box appears.
4. In the New column, type the reference to be replaced.
5. Click OK. All references are substituted accordingly in the elements.
To substitute references in a graphic by using find and replace functions
1. Select one or more elements.
2. Do one of the following:
o Press Ctrl + E.
o On the Special menu, click Substitute References.
The Substitute Reference s dialog box appears.
3. Click Find & Replace. The dialog box expands and shows find and replace parameters.
4. Specify your find and replace options. Do one of more of the following:
o To find specific references in the list, type a string in the Find What box and click Find Next to
find the next string.
o To replace a selected found string with another string, type a wstring in the Replace with box
and click Replace.
o To replace multiple references, type values in the Find What and Replace with boxes and click
Replace all.
o To specify the search is case-sensitive, select Match Ca se.
o To find only entire words that match your search string, select Match Whole Word Only.

294
Animating Graphic Elements Creating and Managing Industrial Graphics User Guide

o To use wildc ards, select Use Wildcards. Valid wildcards are "*" (asterisk) and "?" (question
mark).
"*" indicates any number of variable characters. For example. "s*" t o search for all strings
starting with "s".
"?" indicates one single variable character. For example, "M_7?t" to search for all strings that
start with "M_7" and end with "t" and have ex actly 5 characters.
5. Click OK. All text strings are substituted accordingly in the elements.

295
 Creating and Managing Industrial Graphics User Guide

C HAPTER 11
Adding and Maintaining Graphic Scripts
About Graphic Scripts
You can associate scripts to your graphics. Scripts can add animation to a graphic or its elements that
can be executed in run time.

Caution: If you configure scripts that affect more than element and graphic animation, the script
processing may affect performance.

You can:
 Configure the predefined scripts of a graphic.
 Add named scripts to a graphic.
 Edit existing named or predefined scripts in a graphic.
 Rename named scripts in a graphic.
 Remove named scripts from a graphic.
 Substitute references in named or predefined scripts.
 Use element methods in named or predefined scripts.
The autocomplete feature is available in the Graphic Editor script editor.

Predefined and Named Scripts

Predefined graphic scripts run:
 One time when the graphic is shown or opened: On Show
 Periodically while the graphic is showing: While Showing
 One time when the graphic is hidden or closed: On Hide
 Any combination of the above
Named graphic scripts enable any number of scripts to run that are triggered by values or expressions
during runtime :
 Being true: While True
 Being false: While False
 Transitioning from false to true: On True
 Transitioning from true to false: On Fal se
 Change in value and/ or quality: DataChange
The name of named scripts can be up to 32 characters in length, contain at least one letter, and contain
special characters, such as #, $, and _.

Execution Order of Graphic Scripts

When the graphic is showing, the scripts run in the following order:

297
Creating and Managing Industrial Graphics User Guide Adding and Maintaining Graphic Scripts

1. On Show script.
2. Named scripts, not necessarily in the orde r that they appear in the list.
Any named script that is triggered by the DataChange trigger type runs the first time when the reference
is subscribed to. This behavior is different than the DataChange trigger behavior of Application Server
scripts and can take considerable time in intermittent net works.

Note: A named script will not run if the script is triggered by the DataChange trigger type and is bound to
an InTouch tag whose quality is Initializing, or whose quality is Bad and category is not OK.

Security in Graphic Scripts

If the graphic script attempts to write to attributes or tags with Secured Write or Verified Write security
classification, the script execution stops and the authentication dialog box appears.
After you enter correct authentication information, the graphic script continues execution.

Note: This feature applies only if Secured and Verified Writes are supported by your HMI software
application.

Signature Security for Acknowledging Alarms

SignedAlarmAck() is a script function for Industrial Graphics to acknowledge one or more alarms on
attributes or tags that optionally require a signature depending on whether any of the indicated alarms
falls within a designated priority range. If so, the user must perform an aut hentication of the operatio n to
acknowledge the alarms.
For information about SignedAlarmAck() script function syntax, paramet ers, and to see script examples,
see the SignedAlarmAck().

Note: This feature requires that your HMI soft ware supports SignedAlarmAcks.

SignedAlarmAck() Run-time Behavior

At run time, the SignedAlarmAck() function does the following:
1. The function checks whether a signature is required on the alarms to be acknowledged.
a. It checks if the parameter Signature_Reqd_for_Range is true.
b. If so, it checks if security is enabled on the Galaxy.
c. If so, it checks the Priority for each designated alarm and compares it against the indicated
priority range. If any of the designat ed alarms falls within the priority range, a signature is
required.
d. If none of the designated alarms falls within the priority range, but no one is logged in, a
signature is required.
e. If no alarm is waiting for an acknowledgement, the function will do nothing, but will return a value
indicating that no alarms are waiting for acknowledgement.
2. If none of the indicat ed alarms requires a signature, the function displays a simple pop-up
acknowledgement dialog.
a. When the user clicks OK, the function writes the acknowledgement comment to the AckMsg
attribute of each of the alarms identified in the Alarm_List parameter.
The system identifies the logged-on user, if any, as the one who acknowledged all of the alarms.

298
Adding and Maintaining Graphic Scripts Creating and Managing Industrial Graphics User Guide

b. If the user has permission to acknowledged alarms, or the galaxy is unsecured, the alarms are
marked as having been acknowledged.
c. If the acknowledgement fails, there is no direct feedback to the user. The status of the alarms,
however, will show that they have not been acknowledged.
3. If any of the indicated alarms requires a signature and is waiting for an acknowledgement, the
function displays a pop-up acknowledgement dialog that requires a signature.
a. This dialog has edit fields for the us er's credentials: name, password, and domain. By default,
the user displayed is the logged-in user, if any. Otherwise, it is blank. All of these fields can be
edited.

Note: If the security mode is ArchestrA Galaxy security, then the domain displayed is
"ArchestrA" and cannot be edited.

If Smart Cards are not enabled, the mode buttons for selecting Smart Card or password
authentication are disabled.
b. The user enters the acknowledgement comment, if enabled, and the user’s credentials.
c. The function validates the user's credentials.
d. If the user credentials are invalid the function displays an error message.
When the user clicks OK on the error message, the function re-displays the alarm authentication
dialog, and allows the us er to try again.
When the dialog is re-displayed, it shows the same user's name, domain, and acknowledgement
comment as were entered, but the password or Smart Card P IN field is blank. The user may then
re-try the authentication or cancel.
e. If the user credentials are valid, the function writes the acknowledgement comment to the
AckMsg attribute of each of the alarms identified in the Alarm_List parameter.
The system identifies the authorizing user as the one who acknowledged all of the alarms,
including those that do not require a signature.
If the user has permission to acknowledgement alarms, the alarms are marked as having been
acknowledged.
If the acknowledgement fails, there is no direct feedback to the user. The status of the alarms,
however, will show that they have not been acknowledged.
4. The function provides a return value, and writes an information message in the Logger if an error
occurs or the operation is canceled.
For information on run-time behavior and the sequence of executing script operations, see SignedWrit e()
Script Execution Sequence at Run Time.

SignedAlarmAck() Scripting Tips

SignedAlarmAck() and Alarm Configuration
You can use the SignedAlarmAck() function only in client scripts supported by your HMI software.
SignedAlarmAck() with OnShow and OnHide Scripts
We do not recommend using the SignedAlarmAck() function with OnS how and OnHide scripts. This can
cause issues with window functionality, including the window title bar, windows losing correct focus, and
windows opening on top of one another.
SignedAlarmAck() with While True Scripts

299
Creating and Managing Industrial Graphics User Guide Adding and Maintaining Graphic Scripts

We do not recommend using the SignedAlarmAck() function in a While True s cript type. A signed alarm
acknowledgement requires user interaction. If you want to use a While True type script, it must be set to
an execution time of 30-sec onds or longer to allow the user to enter the required information.

SignedAlarmAck() Applied Example

You can create a dashboard application to aut omate routine use of the SignedAlarmAck() function.
To configure signature required for alarm acknowledgement
1. Use the Industrial Graphic Editor to create a graphic. Embed the graphic elements you require, such
as buttons, Alarm Control, alarm acknowledgement and commenting configuration, and comment
text boxes. Examples are shown in the following illustration.
If you embed an Alarm Cont rol, as shown in this example, enable Require s ACK Signature in the
Runtime Behavior animation to require a signat ure for alarm acknowledgement.
2. Add the SignedAlarmAck() script function as required. The following Industrial Graphi c Editor detail
shows two buttons configured with action scripts:

3. Configure the scripted functionality you require. Scripts for the buttons shown in the example, plus
scripts for other possible button functions, are as follows:
a. The alarm list and all other parameters are hard-coded into the script function.
The following example requests acknowledgement of three alarms. If the alarms are within the
priority range 1-500 an authentication signature will be required. The comment is disabled from
the operator.
ReturnCode = SignedAlarmAck ("[Link] [Link]
[Link]", True, 1, 500, "Ack Tank Level", False, "Acknowledge
Alarms", "Please Acknowledge the Tank Level Alarms");
b. The alarm list is passed as a parameter to the script from a string type Custom Property.
The following example is the same as example 4a above, except that the alarm list is a
parameter pointing to a string type Custom Property which has concatenated the names of the
alarms.
ReturnCode = SignedAlarmAck (TankLevel_Alarm_List, True, 1, 500, "Ack Tank
Level", False, "Acknowledge Alarms", "Please Acknowledge the Tank Level
Alarms");
c. The alarm list is passed as a parameter to the script from an Attribute which is an array of strings.

300
Adding and Maintaining Graphic Scripts Creating and Managing Industrial Graphics User Guide

The following example is the same as example 4a above, except that the alarm lis t is a
parameter pointing to a string type array Attribute which has eac h of the alarm names as an
array element.
ReturnCode = SignedAlarmAck ([Link][], True, 1, 500, "Ack
Tank Level", False, "Acknowledge Alarms", "Please Acknowledge the Tank
Level Alarms");
d. The alarm list is passed as a parameter to the script from an Attribut e which is an array of
strings. All other parameters are passed as script variables.
ReturnCode = SignedAlarmAck( [Link][], EnableAckSig,
FromPriority, ToPriority, Default_Ack_Comment, Comment_Is_Editable,
Title_Bar_Caption, Message_Caption);

Graphic Script Time outs

To avoid infinite loops in a graphic script, a time-out limit can be set in which FOR loops must complete
execution. If a script loop does not complete exec ution wit hin the time-out limit, WindowViewer
automatically terminates the loop and writes a message to the Logger.
The time-out limit is checked only at the NE XT statement of the loop. Therefore, the first iteration of the
loop is always executed, even if it exceeds the time-out limit.
To change the time out for a graphic script
1. In WindowMaker, on the Special menu, point to Configure and click WindowViewer. The
WindowViewer Properties dialog box appears.
2. Click the Managed Application tab.
3. In the Script timeout (m sec) box, type a time-out value in milliseconds. Valid values are from 1 to
360,000.
4. Click OK.

Error Handling
A graphic script does not run if it contains a syntax error. When the graphic is loaded, a message is
written to the Logger.

Configuring the Predefined Scripts of a Graphic

You can configure the predefined scripts of a graphic. The predefined scripts can consist of:
 A script that runs one time when the graphic opens (On Show).
 A script that runs periodically as long as the graphic is open (While Showing).
 A script that runs one time when the graphic closes (On Hide).

Note: The Predefined Scripts animation cannot be deleted. It can contain scripts for each trigger type
On Show, While Showing and On Hide.

To configure the predefined scripts for a graphic

1. Open the graphic in the Industrial Graphic Editor.
2. On the Special menu, click Scripts. The Edit Scripts dialog box appears.
3. In the Trigger Type list, click:
o On Show to configure a script that runs one time when the graphic opens.

301
Creating and Managing Industrial Graphics User Guide Adding and Maintaining Graphic Scripts

If you create an OnShow script that uses a custom property bound to a tag, there is no guarantee
that the tag data is valid when the script runs. This is bec ause of the asynchronous nat ure of data
subscriptions within some HMI soft ware. Your script should first test the quality and status of the
tag value before it is used in the rest of the script.
When the On Show trigger type is selected, the field that appears to the right of the Type list
becomes a Data Timeout field. For more information about using t his field, see Ensuring P roper
OnShow Script Execution on page 302.
o While Showing to configure a script that runs periodically while the graphic is open.
o On Hide to configure a script that runs one time when the graphic closes.
4. If you configured a While Showing script, type a time period in milliseconds in the Period box. This
specifies after how many milliseconds the action script is executed.

Note: If you set the While Showing period too low, system performance may dec rease.

5. Type your script in the main edit box. The script syntax is the same as the syntax of
AutomationObject scripting.

Note: If the graphic includes a custom property, the name of the custom property and a nested class
property in the script cannot be the same.

6. Select external data using your HMI's browser or explorer.

7. When you are done, click OK. The script editor c hecks the syntax of the script and may inform you of
invalid syntax. Click:
o Ye s to save changes even if the script contains errors.
o No to cancel the changes and close the script dialog box.

Ensuring Proper OnShow Script Execution

When an OnShow script includes external referenc es to tags, it is possible that the data from these tags
is not yet available when the OnShow script runs. As a result, the script might not work properly.
To avoid this situation, you can enter a value in the Data Timeout field. For the duration of the data
time-out period, the system checks for the presence of the external referenc e data. After all external
reference data is present, the system executes the OnShow script.
If the data time-out period expires before all external data is pres ent, the OnShow script is executed.
However, the script might not work properly.
The default value in the Data Timeout field is:
 For new Industrial Graphics, 1,000 ms.
 For some HMI symbols, 0 ms; that is, the presenc e of ex ternal reference dat a is not checked. Verify
the behavior of your HMI software.
The maximum data time-out value is 30,000 ms.
Note the following issues regarding OnShow scripts and the Data Timeout function:
 The Data Timeout function is not available for the other trigger script types. It would be rare for
external referenc e data to not be available in time for those scripts.
 The execution of the OnS how script is not delayed if there is an invalid reference (t hat is, the
reference's quality is Bad).
 Named scripts are blocked until the OnShow script has completed, so some could be missed. For
example, the named script OnDataChange might not run for the first few updates.

302
Adding and Maintaining Graphic Scripts Creating and Managing Industrial Graphics User Guide

 Delay ed OnS how scripts within nested embedded graphics might run out of order for the di fferent
nested levels. If t he outer-most level is delayed but the inner levels are not delayed and are executed
immediat ely, the order of execution will be changed.

Adding Named Scripts to a Graphic

You can add named scripts to a graphic. A named script runs:
 One time when the specified values, data or expressions change.
 Periodically if the values or expressions meet a certain criterion, such as being true.
E very named script can contain only one trigger type.
To add a named script to a graphic
1. Open the graphic in the Industrial Graphic Editor.
2. On the Special menu, click Scripts. The Edit Scripts dialog box appears.
3. Click the Add icon. A new entry is created in the Named Scripts list.
4. Type a name for the named script. The name appears on the right panel as header.
5. In the Expre ssion box, do one of the following:
o Type an expression, value or reference.
o Browse for a reference.
The expression acts as data sourc e for the script trigger.
6. In the Trigger list, click:
o WhileTrue to trigger the script periodically when the expression is true.
o WhileFalse to trigger the script periodically when the expression is false.
o OnTrue to trigger the script one time when the ex pression becomes true from false.
o OnFalse to trigger the script one time when the expression becomes false from true.
o DataChange to trigger t he script one time when the expression or its quality changes. Select the
Quality Changes check box to trigger the script when the quality of the specified expression
changes.
7. If you want to specify how often the script is run when the trigger condition is fulfilled, type a time
delay in milliseconds in the Trigger Period box.
8. If you want to specify by how much the evaluated value must change before the script runs, type a
deadband value in the Deadband box.
9. Type your script in the main edit box.
10. Use the Script Function Browser and Attribute Browser to select external data.
11. Click OK. The script editor validates the syntax of the script and identifies any errors. Click:
o Ye s to save changes even if the script contains errors.
o No to cancel the changes and close the script dialog box.

Editing Graphic Scripts

You can edit predefined and named graphic scripts.
To edit graphic scripts
1. Open the graphic in the Industrial Graphic Editor.

303
Creating and Managing Industrial Graphics User Guide Adding and Maintaining Graphic Scripts

2. On the Special menu, click Scripts. The Edit Scripts dialog box appears.
3. Select the script from the list. The right pane shows the script configuration.
4. If you are editing a predefined script, select the script trigger from the TriggerType list:
o On Show if the action script you want to edit runs one time after the graphic opens.
o While Showing if the action script you want to edit runs periodically while the graphic is open.
o On Hide if the action script you want to edit runs one time when the graphic closes.
5. Edit the action script in the script box.
6. Click OK.

Renaming Scripts in a Graphic

You can rename named scripts in a graphic. When you rename the named script, the functionality of the
script does not change.
To rename a named script
1. Open the graphic in the Industrial Graphic Editor.
2. On the Special menu, click Scripts. The Edit Scripts dialog box appears.
3. In the Named Scripts list, click the script you want to rename.
4. Click the script again. It appears in edit mode.
5. Enter a new name for the script and click Enter. The script is renamed.

Removing Scripts from a Graphic

You can remove predefined or named scripts from a graphic.
To remove predefined scripts from a graphic
1. Open the graphic in the Industrial Graphic Editor.
2. On the Special menu, click Scripts. The Edit Scripts dialog box appears.
3. Select Predefined Scripts from the list.
4. In the Trigger type list, click:
o On Show if the action script you want to remove runs one time after the graphic opens.
o While Showing if the action script you want to remove runs periodically while the graphic is
open.
o On Hide if the action script you want to remove runs one time after the graphic closes.
5. Delet e all the script content in the script box.
6. Click OK.
To remove named scripts from a graphic
1. Open the graphic in the Industrial Graphic Editor.
2. On the Special menu, click Scripts. The Edit Scripts dialog box appears.
3. Select the named script from the list.
4. Click the Remove icon. A message appears.
5. Click Yes. The script is removed.

304
Adding and Maintaining Graphic Scripts Creating and Managing Industrial Graphics User Guide

Substituting Attribute References in Scripts

You can substitute attribute references in scripts in the same way as you would with attribute references
in elements. For more information, see Substituting References in Elements on page 294.

Example of Changing Element Properties using Scripts

You can change some properties of elements using scripting. This lets you configure additional run -time
behavior to your elements in addition to design-time animation of those elements.
When you write scripts for the graphic or for one of its elements, you can use your HMI's attribute/tag
browser to show and select a:
 Property of an element
 Custom property of the graphic
If a reference is not unique, the following order applies:
1. Dimensioned variable references
2. Graphic properties references
3. Custom property references
4. Object attribute referenc es
To select an element property or a graphic custom property
1. Open your HMI's attribut e/tag brows er. It shows the element names and the properties of the
selected element.
2. Select an element or graphic from the list. The right pane shows the accessible properties of the
selected element or graphic.
3. Select a property from the right pane and click OK. The reference appears in the script window.

Using Methods in Scripting

Some elements, such as the Edit Box, Combo Box and List Box controls, support methods in scripting.
These methods can be used to perform various functions on the elements themselves at run time.
You can see the properties and methods supported by any given element by opening your HMI's
attribute/tag browser and selecting the element.

305
Creating and Managing Industrial Graphics User Guide Adding and Maintaining Graphic Scripts

You can use the methods of the:

 Edit Box control to save and load the text at run time to and from a file.
 Combo Box and List Box controls to access and change the contents of their lists at run time.

Configuring Edit Box Methods

You can use the methods of an Edit Box control to:
 Save the contained text at run time to a file.
 Load text into the control from a file at run time.
To save the contained text in an Edit Box control
 In an action script, use the following method:
[Link](FileName);
where ControlName is the name of the Edit Box control and FileName is the name of the file in
which to save the contents of the control.
The text contained in the control at run time is saved to the specified file.
If you only specify a file name, the file is saved by default in the user folder of the operating system. For
example: c:\documents and settings\username.
To load text into an Edit Box control from a file
 In an action script, use the following method:
[Link](FileName);
where ControlName is the name of the Edit Box control and FileName is the name of the file you
want to load the text from.
The text contained in the file is loaded into the run time contents of the Edit Box control.
If you only specify a file name, by default, the file is expected to be in the user folder of the operating
system. For example: c:\documents and settings\username.

Configuring Combo Box and List Box Methods

The Combo B ox and List Box controls have methods that you can use to access and change the items in
the list at run time. Typically, you configure an action script to access these methods.
You can:
 Add and insert items into the list.
 Delet e individual or all items from the list.
 Find an item in the list.
 Get the item caption based on a specified index.
 Associate the items with values.
 Load items from and save items to a file.

Adding and Inserting Items into a List

You can add an individual item:
 To the end of the list.
 Above the currently selected item.

306
Adding and Maintaining Graphic Scripts Creating and Managing Industrial Graphics User Guide

To add an item to a Combo Box or List Box list

 In an action script, use the following method:

[Link]("ItemCaption");
where ControlName is the name of the Combo Box or List Box control and ItemCaption is the
new item you want to add.
The item is added to the end of the list.

Note: You can specify an additional parameter writeToSelectedItem in the .AddItem function for
Combo Box controls. If writeToSelectedItem is false, the newly added Item is not written to the
reference configured in the Combo box’s Selected Item Value. For example:
Cont [Link](" ItemCaption", bool writeToSelectedItem);

To insert an item in a Combo Box or List Box list

 In an action script, use the following method:

[Link]("ItemCaption");
where ControlName is the name of the Combo Box or List Box control and ItemCaption is the
new item you want to insert.
The item is inserted above the currently selected item in the list.

Deleting Items from a List

You can delete:
 An individual item from a list.
 The selected item from a list.
 All items from a list.
If items cannot be deleted from a list at run time, no warning message is shown. Such items include
Combo Box and List Box controls configured with enums or arrays.
To delete an individual item from a Combo Box or List Box list
 In an action script, use the following method:
[Link](Index);
where ControlName is the name of the Combo Box or List Box control and Index is the index of
the item you want to delete. The first item of the list has an index of 0.
The item at the specified index is deleted, subsequent it ems are moved up the list.
To delete the selected item from a Combo Box or List Box list
 In an action script, use the following method:
[Link]();
where ControlName is the name of the Combo Box or List Box control.
The selected item is deleted, subsequent items are moved up the list.
To delete all items from a Combo Box or List Box list
 In an action script, use the following method:
[Link]();

307
Creating and Managing Industrial Graphics User Guide Adding and Maintaining Graphic Scripts

where ControlName is the name of the Combo Box or List Box control.
All items of the control are deleted.

Finding an Item in a List

You can find an item in a Combo Box or List Box list. You specify the item caption, and the met hod
returns the index number of the first item found. Otherwise, the method returns -1.
Finding an item in a Combo Box or List Box list
 In an action script, use the following method:

Index = [Link]("ItemCaption");
where ControlName is the name of the Combo Box or List Box control and ItemCaption is the
caption of the item you are looking for.
The index is set to -1 if the item is not found, otherwis e it contains the index of the first found item.
The first item of the list has an index of 0.

Reading the Caption of a Selected Item in a List

You can read the caption of a selected item in a Combo Box or List Box list.
Reading the caption of a selected item in a Combo Box or List Box list
 In an action script, use the following method:
Caption = [Link](Index);
where ControlName is the name of the Combo Box or List Box control. Index is the index of the
item for which you want to read the caption. The first item of the list has an index of 0.
Caption contains the item caption of the specified index.

Associating Items with Values in a List

You can associate items with values in a Combo Box or List Box control. This is the same as using a
secondary index system to identify items in the list.
You can:
 Set item data, which associates an item with a value
 Get item data, which returns the value that is associated with an item
To set item data in a Combo Box or List Box list
 In an action script, use the following method:
[Link](Index,Value);
where ControlName is the name of the Combo Box or List Box control, Index is the index of the
item that you want to set and Value is the value you want to assign t o the item. The first item of the list
has an index of 0.
To get item data in a Combo Box or List Box list
 In an action script, use the following method:
Value = [Link](Index);
where ControlName is the name of the Combo Box or List Box control and Index is the index of
the item for whic h you want to get the value. The first item of the list has an index of 0.
Value contains the value that is assigned to the item.

308
Adding and Maintaining Graphic Scripts Creating and Managing Industrial Graphics User Guide

Loading and Saving Item Lists

You can load and save all items in a list from and to a file.
To load the item list for a Combo Box or List Box control from a file
 In an action script, use the following method:
[Link](FileName);
where ControlName is the name of t he Combo Box or List Box control and FileName is the name of
a file on the local harddrive or on the net work.
If you only specify a file name, the file is expected to be in the users folder. For example:
c:\documents and settings\username.
The list contained in the file is loaded and, if valid, the current list is overwritten.
To save the item list for a Combo Box or List Box control to a file
 In an action script, use the following method:
[Link](FileName);
where ControlName is the name of t he Combo Box or List Box control and FileName is the name of
a file on the local harddrive or on the net work.
If you only specify a file name, the file is saved to the users folder. For example, c: \documents and
settings\username.
The list is saved to the specified file.

309
 Creating and Managing Industrial Graphics User Guide

C HAPTER 12
Using Client Controls
About Client Controls
You can:
 Import and embed client controls into a graphic.
 View and edit the properties of the client control.
 Bind the properties of the client control with attributes and element references.
 Configure scripts for client control.
 Animate client controls.
 Export a client control.
 Configure a client control with security.
 Ensure that dynamically loaded assemblies are included with the primary client control assembly
when an application is deployed
 View additional client control information such as the files the client control uses and what objects
and graphics are using the client control.
For information on language switching for client controls, see S witching Languages for Graphic
Elements on page 339.
Client controls give you functionality contained in .NE T controls you can use in graphics. To use this
functionality, you must:
 Import the .DLL file that contains one or more client controls. The client cont rol is imported into the
Graphic Toolbox.
 Browse and embed one or more of the client controls into a new or existing graphic. The client
controls appear as elements.
 View and edit the ex posed client control properties.
 Bind the client control properties to attributes, graphic custom properties or tags. Do this usi ng dat a
binding animation.
 Configure scripts for client control. Do this using the animation.
You can then use the graphic containing the embedded client control in your HMI software.

Importing Client Controls

You can import client controls into the Industrial Graphic Editor from .NE T Dynamic Link Library (.DLL)
files.
After importing client controls, you can organize them in the Industrial Graphic Editor as you would wit h
Industrial Graphics. For more information, see Organizing Client Controls on page 313.
You can also import client controls that have previously been exported in an ArchestrA package
(.aaPKG) file.

311
Creating and Managing Industrial Graphics User Guide Using Client Controls

If you import a newer version of a client control that you are already using in your HMI soft ware as
embedded Industrial graphic, you need to restart the HMI software.

Importing Client Controls

You can import one or more client cont rols from .DLL files. The client controls can be contained in one
single .DLL file or span multiple files.
To import a client control, you must have security permissions to import graphic objects.

Note: If you select .NET .DLL files that do not contain client controls, the import process ignores these
and continues at the next .DLL file.

To import client controls

1. In the IDE on the File menu, point to Import, and then click Client Control. The Import Client
Control(s) dialog box appears.
2. Select one or more .NE T . DLL files that contain the client controls you want to import and click Open.
The Import Preferences dialog box appears.
3. Select the appropriate options for the import and click OK. The Import Client Control(s) dialog box
appears.
4. When the client controls are import ed, click Close. The imported client cont rols appear in the
Graphic Toolbox.

Note: If the import fails, a message indicates the error in the Import Client Control(s) dialog box.

Example of Installing the ActiveFactory TagPicker Control

If you install ActiveFactory 9.2 (or higher), you can install the client controls of one of the ActiveFactory
*.DLL files. You can then use these controls to create an Industrial Graphic that contains the
ActiveFactory TagPicker.
To install the ActiveFactory TagPicker client control
1. Open the IDE.
2. On the File menu, point to Import, and then click Client Control. The Import Client Control(s)
dialog box appears.
3. Browse to the C:\Program Files\Common Files\ArchestrA folder, select the
aaHistClient [Link] file and click Open. The Import Preferences dialog box appears.
4. Select the appropriat e options for the import and click OK.
5. When the import is complete, click Close.
6. Open the Graphic Toolbox and expand the Galaxy node. aaTagPicker is listed as a client control.

Importing Previously Exported Client Controls

You can import one or more previously exported client cont rols from an Arc hestrA package file (.aaPKG).
Previously the client controls may have been:
 Exported without a graphic or an object instance or template.
 Embedded in a graphic and the graphic was exported.
 Embedded in a graphic and contained in an object instance or template and the object was exported.

312
Using Client Controls Creating and Managing Industrial Graphics User Guide

To import a previously exported ArchestrA package containing one or more client

controls
 Import the exported client controls the same way as you would import an AutomationObject
(.aaPKG). For more information, see the Application Server User’s Guide.

Organizing Client Controls

You can organize the client controls within the Graphic Toolbox the same way as you would with
Industrial Graphics. You can:
 Rename client controls.
 Move client controls in and out of Graphic Toolsets.
 Delet e client controls.
For more information, see Organizing Graphics on page 65 and Importing and Exporting Graphics on
page 68.

Embedding Client Controls

You can embed an installed client control into a graphic as you would embed a graphic within anot her
graphic.
We recommend that you not overlap client controls with other elements on the canvas. Otherwise, the
client controls may not work correctly.
To embed a client control into an Industrial graphic
1. On the Edit menu, click Embed Graphic Symbol. Your HMI's attribute/tag browser appears.
2. Browse to the location that cont ains the client control.
3. Select a client control from the right panel and click OK. The pointer changes to paste mode.
4. Click on the canvas where you want to embed the client control. The client control is placed onto the
canvas.

Example of Embedding the ActiveFactory TagPicker Client Control

If you install ActiveFactory 9.2 (or higher), follow the steps of the Example of Installing the ActiveFactory
TagPick er Control on page 312. Then do the following:
1. Create a new graphic in the Graphic Toolbox.
2. Open the graphic in the Industrial Graphic Editor.
3. On the Edit menu, click Embed Graphic Symbol.
4. Select aaTagPicker and click OK.
5. Click on the canvas near the top left corner. The ActiveFactory TagPicker cont rol is placed on the
canvas.

Viewing and Changing the Properties of Client Controls

When you embed a client control into a graphic, the native properties of the client control are imported
into the Properties Editor in the Mi sc group.
Also the element container of the client control has properties such as:
 Name
 X, Y, Width, Height, AbsoluteOrigin, RelativeOrigin, and Locked

313
Creating and Managing Industrial Graphics User Guide Using Client Controls

 FillColor
 TextColor and Font
 Enabled, TabOrder, TabStop, and Visible
The element container properties override the native properties of the client cont rol.
You can view and change the properties of the control in the Properties Editor.
To view or change the properties of a client control
1. Select the embedded client control on the canvas.
2. In the Properties Editor, locate a:
o Cont ainer property in the property categories Graphic, Appearance, Fill Style, Text Style or
Runtime Behavior.
o Native property in the Mi sc property category.
3. View or change the locat ed property.
To reset a client control back to its original size
 On the Edit menu, click Control - Original Size. The AutoSize property is set to False.

Example of Changing a Property of the ActiveFactory TagPicker

Control
Install and embed the ActiveFactory TagPicker Control into a graphic as described in:
 Example of Installing the ActiveFactory TagPick er Control on page 312.
 Example of Embedding the ActiveFactory TagPick er Client Cont rol on page 313.
In this example the " Tag Picker" caption of the TagPicker control is hidden.
1. Select the embedded ActiveFactory TagPicker client cont rol. The Properties Editor shows all
properties of the client control.
2. In the Mi sc property category, locate the property HideCaption.
3. Assign the value True to it and click Enter. The caption " Tag Picker" of the ActiveFactory TagPicker
client control is hidden.

314
Using Client Controls Creating and Managing Industrial Graphics User Guide

Binding Client Control Properties to Attributes or Element

References
You can bind the properties of an embedded client control to attribut es or element references. This lets
you use attributes and element references as source and consumer of data for the client control
properties. You do this with the Data Binding animation.

The Data Binding table contains the following information:

 Name - name of the client control property
 Type - the .NE T data type of the property
 Value - the default value of the client control property
 Direction - indic ates if the property is read/ write or just read-only
read/writ e property

read-only property

write-only property

 Reference - the attribute or element reference the property is bound to

Note: You cannot remove the Data Binding animation.

To bind a client control property with an attribute or element reference

1. Double-click the embedded client control on the canvas. The Edit Animations dialog box appears
and the Data Binding animation is selected by default.
2. Locate the client cont rol property that you want to bind with an attribute or element reference.

315
Creating and Managing Industrial Graphics User Guide Using Client Controls

3. Double-click the Reference box.

4. Do one of the following:
o Type an attribute or element reference.
o Browse for an attribute or element reference by clicking the Brow se button.
5. Repeat above for any other properties you want to bind.
6. Click OK.

Example of Data Binding in the ActiveFactory TagPicker Control

Install and embed the ActiveFactory TagPicker control into a graphic as described in:
 Example of Installing the ActiveFactory TagPick er Control on page 312.
 Example of Embedding the ActiveFactory TagPick er Client Cont rol on page 313.
In this example, the Boolean graphic custom property HCV controls the visibility of the ActiveFactory
TagPicker caption.
Do the following:
1. Create a Boolean custom property and rename it HCV.
2. In the Industrial Graphic Editor, double-click the embedded ActiveFactory TagPicker control.
3. From the list of properties in the Data Binding configuration area, locate the HideCaption property.
4. Double-click the Reference box of the HideCaption property.
5. In your HMI's attribute/tag browser, select the HCV custom property and click OK.
The HideCaption property is now assigned to the element reference HCV.
6. Click OK.
7. Place a button on the canvas and configure it with a Boolean pushbutton animation that toggles the
custom property HCV.
8. Save and close the graphic.
9. Embed the graphic in a managed InTouch application and test the data binding by clicking on the
button in WindowViewer. When you do so, the visibility of the caption of the TagPicker cont rol is
toggled.

Configuring Client Control Event Scripts

You can configure a script that is executed when a client control event occurs. You do this using the
Event animation.
To configure a script for a client control event
1. Double-click the embedded client control on the canvas. The Edit Animations dialog box appears.
2. In the animation list, click Event. The right panel shows the configuration.
3. In the Event list, select the event for which you want to execute a script. The Parameters list shows
for the selected event:
o Type: the data type of each parameter.
o Name: the name of each parameter.
4. In the script area, write the event script.
5. If y ou want to insert an event parameter in your script, click the Select Event Parameter icon. Select
the paramet er. The paramet er name is inserted into the script at the cursor position.

316
Using Client Controls Creating and Managing Industrial Graphics User Guide

6. If you want to configure scripts for other, select the event from the Event list. The script area is
cleared and you can write the script for the newly selected event.
7. When you are done, save and close.

Example of Configuring an Event Script for the ActiveFactory

TagPicker Control
Install and embed the ActiveFactory TagPicker control into a graphic as des cribed in:
 Example of Installing the ActiveFactory TagPick er Control on page 312.
 Example of Embedding the ActiveFactory TagPick er Client Cont rol on page 313.
In this example, when one of the tags is picked by double -clicking on it, a message is logged in the Log
Viewer.
First however, you need to:
 Import the script function library from the file aaHistClient [Link].
 Configure a connection to a valid and running Historian Server.
To import the script functions from [Link]
1. On the Galaxy menu, point to Import, then click Script Function Library. The Import Script
Function Library appears.
2. Browse to the aaHistClient [Link] and select it. This file is by default in the C: \Program
Files\Common Files\ArchestrA\ folder.
3. Click Open. The import starts and finishes wit h a message.
4. Click OK.
To connect the TagPicker control to the Historian Server
1. On the canvas, place a button next to the TagPicker control.
2. Double-click the button. The Edit Animations dialog box appears.
3. Add an Action S cripts animation to the animation list.
4. In the script area, type the following script:

Dim NewServer as [Link];

Dim statusMessage as String;
NewServer = [Link]("MyHistorian");
[Link] = "MyUserName";
[Link] = "MyPassword";
[Link]( statusMessage );
LogMessage ("Connection" + statusMessage);
5. In the script, replace the strings MyHistorian, MyUserName and MyPassword with the Historian
server name, a valid user name, and a password to connect to the server.
6. Close the Edit Animations dialog box.
You can now configure the client control event to log a message every time the user picks one or more
tags by double-clicking on them:
1. In the Industrial Graphic Editor, double-click on the embedded ActiveFactory TagPicker control.

317
Creating and Managing Industrial Graphics User Guide Using Client Controls

2. In the animation list, click Event.

3. In the Event list, click the OnTagsPicked event.
4. In the script area, type the following:
LogMessage("User picked one or more tags.");
5. Save and close the Edit Animations dialog box.
6. Save and close the Industrial Graphic Editor.
7. Embed the graphic in a managed InTouch application.
8. Switch to run-time and connect to a valid IndustrialSQL Server sourc e.
9. Double-click on one of the tags in the TagPicker cont rol.
10. Check the SMC Log Viewer. The message "User picked one or more tags" appears.

Animating Client Controls

E very client control has these animation types:
 Data binding animations determine which attributes and element references can read and write to
the client control.
 E vent animations assign scripts to individual client control.
You can add the following animations that correspond to the supported client control container
properties.
 Visibility
 Fill Style
 Text Style
 Location Horizontal
 Location Vertical
 Width
 Height
 Tooltip
 Disable
If you configure thes e animations, the resulting behavior and appearance overrides the behavior and
appearance given by the native properties of the client control.
To add animation to embedded client controls
1. Double-click the embedded client control on the canvas. The Edit Animations dialog box appears.
2. Add animations as you would with any other element.

Exporting Client Controls

You can export client controls as ArchestrA package files (.aaPKG). You can ex port them:
 Directly from the Industrial Graphic Editor.
 Indirectly when you export graphics that reference them.
You can import the client controls again from exported .aaPKG files.

318
Using Client Controls Creating and Managing Industrial Graphics User Guide

To export client controls directly as ArchestrA package files

1. In the Graphic Toolbox, select one or more client controls that you want to export.
2. On the Galaxy menu, point to Export, and then click Object(s).
3. Follow the general procedure for exporting AutomationObjects. For more information, see the
Application Server User’s Guide.

Securing Client Controls

The client controls use the same security setting as the graphics. You can set the security for client
controls and graphics in the Security panel of the IDE. For more information, see Configuring Securit y
for Symbols on page 85.

Including Dynamically Loaded Assemblies with the Client

Control
When the primary client control assembly is imported into the galaxy during an application’s deployment,
the system identifies all statically-linked dependent assemblies and imports them into the galaxy as well.
However, if the client control contains dynamically loaded assemblies, these assemblies are not
automatically loaded in the galaxy.
There are two methods for ensuring that the client control’s dynamically loaded assemblies are included
in the galaxy when the primary assembly is imported:
 By including the list of dynamically loaded assemblies in an XML manifest resource that is
embedded in the primary assembly. The advant age of this method is that the required configuration
information is packaged with the assembly, so no any other packing mechanism is required.
 By including the list of dynamically loaded assemblies in an external XML configuration file that is
stored in the same directory as the primary assembly.

Note: Both methods can be used simultaneously to provide redundancy, in the event that one of the
dynamically loaded assembly lists is missing a required assembly.

Requirements for Both Inclusion Methods

 All dynamically loaded assemblies, as well as all non -system static dependencies of these
dynamically loaded assemblies, must be stored in the same directory as the primary assembly.
 If a dynamically loaded assembly is loading another assembly dynamically, then the other assembly
must be included as a dynamically loaded assembly of the primary assembly. This is a requirement
because the system will not search rec ursively for static or dynamic dependencies.

Sample XML for a Dynamically Loaded Assembly List

A sample list of dynamically loaded assemblies in XML format is shown below. The XML list format is the
same for an embedded manifest resource or an external configuration file.
<?xml version="1.0" encoding="utf-8"?>

<Root>

<DependentFiles>

<DependentFile>

<FileName>[Link]</FileName>

</DependentFile>

<DependentFile>

<FileName>[Link]</FileName>

</DependentFile>

<DependentFile>

319
Creating and Managing Industrial Graphics User Guide Using Client Controls

<FileName>[Link]</FileName>

</DependentFile>

</DependentFiles>

</Root>

XML Schema for the Dynamically Loaded Assembly List

The following XML schema is applicable for the dynamically loaded assembly XML list whether the list is
provided as an embedded manifest resource or an external configuration file.
<?xml version="1.0" encoding="utf-8"?>
<xs:schema attributeFormDefault="unqualified" elementFormDefault="qualified"
xmlns:xs="[Link]
<xs:element name="Root">
<xs:complexType>
<xs:sequence>
<xs:element minOccurs="1" maxOccurs="1" name="DependentFiles">
<xs:complexType>
<xs:sequence>
<xs:element minOccurs="1" maxOccurs="unbounded"
name="DependentFile">
<xs:complexType>
<xs:sequence>
<xs:element minOccurs="1" maxOccurs="1"
name="FileName" type="xs:string"/>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>

Embedding the XML Manifest Resource in the Primary Assembly

To embed the XML manifest resource in the primary assembly
1. In Visual Studio, add the XML list file to the client control assembly project. Any file name can be
used, but the name must have the extension .aaCFG.
2. Change the Build Action property value to Embedded Resource.
After compilation, the XML will be available in the assembly as an embedded manifest resource file.
During the client control import operation, the system will read any embedded XML manifest resources
with the extension .aaCFG. The system will then import any listed assemblies that are stored in the same
location as the primary assembly.

Including the XML Manifest Resource in an External Configuration File

To include the XML manifest resource in an external configuration file
1. Create the XML list file using the same root name as the primary assembly but with the extension
.aaCFG. For example, if the primary assembly name is [Link], then the configuration file
name would be My Cont [Link].
2. Store the file in the sam e directory as the primary assembly.

320
Using Client Controls Creating and Managing Industrial Graphics User Guide

During the client control import operation, the system will look for a file that has the same root name as
the primary assembly but with the extension .aaCFG and in the directory in which the primary assembly
is stored. If this file is found and an embedded XML manifest resourc e exists, the system will consolidate
the two lists to eliminate duplicate entries. The system will then import any listed assemblies that are
stored in the same location as the primary assembly.

Preventing Dynamically Loaded Assembly Import Issues

Refer to the following guidelines to prevent issues with importing the dynamically loaded assemblies.
 Make sure that the XML is valid. Invalid XML in the embedded manifest resource or t he configuration
file will result in the entire client control import operation for the selected primary assembly to be
canceled.
 All assemblies on which the dynamically loaded assemblies are directly or indirectly dependent must
be included in t he same directory as the primary assembly and included in the XML list. If t he system
is unable to locate and load any of the direct or indirect dependencies, the entire client control import
operation for the selected primary assembly will fail.
 If a dynamically loaded assembly is going to load another assembly dynamically, make sure that the
other assembly is included in the XML list. If any such assemblies are not included in the primary
assembly’s manifest resource or configuration file, the import operation will succeed. However,
these indirectly loaded assemblies will not be imported, which can result in the client control not
behaving correctly during execution.

Viewing Additional Client Control Information

You can view:
 Which .DLL files, or assemblies, are used for the client control.
 The class name, vendor, and version.
 Which Industrial Graphics use the client control.
This information is contained in the Client Control Properties panels.
The client control properties are different than the properties of the embedded client control. The client
control properties can be viewed in the IDE directly. The properties of the embedded client cont rol can be
viewed in the Properties Editor of the Industrial Graphic Editor.

Viewing the Client Control Assemblies

You can view which Client Control .DLL files, or assemblies, are used for the client control.
To view the client control assemblies
1. In the Industrial Graphic Editor, select the client control.

321
Creating and Managing Industrial Graphics User Guide Using Client Controls

2. On the Galaxy menu, click Properties. The Propertie s dialog box appears.

3. On the General tab, you can view:

o The Primary Assembly, which is the main .DLL file.
o Additional Assemblies, which are linked to the main .DLL file and automatically loaded.

Viewing Class Name, Vendor, and Version of a Client Control

You can view the class name, vendor, and version of a client cont rol in its Properties panel.
To view the class name, vendor, and version of a client control
1. In the Graphic Toolbox, select the client control.
2. On the Galaxy menu, click Properties. The Propertie s dialog box appears.
3. Click the General tab.

Viewing Objects and Graphics Referencing Client Controls

You can view which Industrial Graphics are using a given client control. This can be viewed in the
Properties dialog box of the client control.
To view objects and graphics referencing a client control
1. In the Industrial Graphic Editor, select the client control.
2. On the Galaxy menu, click Properties. The Propertie s dialog box appears.

322
Using Client Controls Creating and Managing Industrial Graphics User Guide

3. Click Referenced By. The list of objects and graphics using the client control is shown.

323
 Creating and Managing Industrial Graphics User Guide

C HAPTER 13
Embedding Graphics within Graphics
Embedding Graphics
You can embed graphics into other graphics. This lets you split your visualization into modules and
re-use already defined graphics. For example, you can create a valve graphic and embed it multiple
times into a tank graphic.
When you embed a graphic into another graphic, you are creating a link to the original graphic. Any
changes to the original graphic are propagated to all embedded instances.
You can:
 Embed a graphic within another graphic.
 Edit an embedded graphic.
 Restore an embedded graphic to the original size of its source graphic.
 Convert the embedded graphic to a graphic.
 Detect the sourc e of an embedded graphic.
 Edit the source of an embedded graphic.
 Override the custom properties of the source graphic.
 Cont rol the size propagation of an embedded graphic.
 Select an alternate or same graphic of an alternat e object instance as source.
 Edit the object that contains the source graphic.
 Create a new instance of the object that contains the source graphic.

Source Symbol
Source Properties

Source Animations

Symbol
Embed

Embedded Symbol
Source Properties Properties
can override
Source Animations Animations

You can embed graphics from the Industrial Graphic Editor into other graphics.

325
Creating and Managing Industrial Graphics User Guide Embedding Graphics within Graphics

When you embed a graphic, the animation links and scripts are inherited from the source graphic. You
can only change the animations and scripts in the source graphic and all changes are propagated to the
embedded graphic.
The embedded graphic appears with its original name appended by a number. The number is increased
by one if you embed the same graphic again.

Note s:
If you embed graphics that have elements outside of the coordinates (0,0) and (2000,2000), the
embedded graphic clips these elements.
The name of the embedded graphic cannot be t he same as a custom property of the graphic in which it is
being embedded.
The embedded graphic and the graphic in which it is being embedded cannot include elements that have
the same name.

To embed source graphics from the Industrial Graphic Editor

1. On the Industrial Graphic Editor Edi t menu, click Embed Graphic Symbol. Your HMI's attribute/tag
browser appears.
2. Select a source graphic.
3. Click OK. The pointer appears in paste mode.
4. Click on the canvas to place the graphic.
To embed source graphics contained in an object template
1. On the Industrial Graphic Editor Edit menu, click Embed Graphic Symbol. Your HMI's attribute/tag
browser appears.
2. Select the object template that contains the source graphic.
3. Select the graphic and click OK. The Create Instance dialog box appears.
4. Type a name for the new instanc e in the New Instance Name box and click OK. The new instance of
the object is created and the pointer appears in paste mode.
5. Click on the canvas to place the graphic.
To embed source graphics contained in an object instance
1. On the Industrial Graphic Editor Edit menu, click Embed Graphic Symbol. Your HMI's attribute/tag
browser appears.
2. Select the object instance that contains the source [Link] I
3. Select the source graphic and click OK. The pointer appears in paste mode.
4. Click on the canvas to place the graphic.

Renaming Source Graphics and Hosting Objects

Generally, if you rename source graphics or their hosting objects, embedded graphics update their
references to the updat ed name of the renamed source graphic or hosting object.
However, if you are using relative references and you rename the contained name of the referenced
object, the references to the embedded graphic are broken.
You can identify embedded graphics that may cause a problem by clicking on the embedded graphics
and viewing the S ymbolReference property from the P roperties Editor. If the SymbolReferenc e property
contains relative references such as me or my Container, renaming the contained name of the referenced
object causes the reference to be broken.

326
Embedding Graphics within Graphics Creating and Managing Industrial Graphics User Guide

Also, if any instance of the hosting object is checked out, when you change the contained name of the
referenced object, even after you check-in the instance:
 The change is not propagated to the instance.
 Validating the object does not indicate an error.

Editing the Embedded Graphic

After you embed a source graphic into anot her graphic, its animations are inherited from the source
graphic. The animation of the embedded graphic is controlled by the source graphic.
The embedded graphic itself has certain animations you can configure. The animations override the
animations of the source graphic for the embedded graphic. These are:
 Visibility
 Blink
 Location Horizontal
 Location Vertical
 Width
 Height
 Orientation
 Disable
Furthermore you can override the following animations if you change the TreatAsIcon property of the
embedded graphic to True:
 Tooltip
 User Input
 Slider Horizontal
 Slider Vertical
 Pushbutton
 Action Scripts
 Show Symbol
 Hide Symbol
To override the configured animations of an embedded graphic
1. Select the embedded graphic.
2. In the Properties Editor, change the value for the TreatAsIcon property to True.

Overriding Custom Properties of the Source Graphic

You can override the value and description of a custom pro perty of the embedded graphic if the custom
property’s visibility is set to Public in the source graphic.
You cannot add, delete, or rename any custom properties of an embedded graphic or change the data
type. However, you can:
 Revert the value and description of the custom property to its default as defined in the source
graphic.

327
Creating and Managing Industrial Graphics User Guide Embedding Graphics within Graphics

 Set the visibility of the custom property. This has an effect if the graphic containing the embedded
graphic is embedded into another graphic.
To override the value and description of a custom property
1. Select the embedded graphic on the canvas.
2. On the Special menu, click Custom Propertie s. The Edit Custom Propertie s dialog box appears.
3. Select the custom property you want to override with a new value or description.
4. In the Default Value box, type a new value.
5. In the De scription box, type a new description.
To revert the value and description of a custom property
1. Select the embedded graphic on the canvas.
2. On the Special menu, click Custom Propertie s. The Edi t Custom Propertie s dialog box appears.
3. Select the custom property you want to revert.
4. Click the Revert icon. The value and description of the selected custom property are reverted to the
value and description of the same custom p roperty in the source graphic.

Restoring an Embedded Graphic to the Original Size of its

Source Graphic
You can restore an embedded graphic to its original size as it is defined in the object or in the Industrial
Graphic Editor.
To restore an embedded graphic to its original size
1. Select the embedded graphic that you want to restore to its original size.
2. On the Edit menu, point to Embedded Symbol, and then click Symbol - Original Size. The
embedded graphic is restored to the original size of its source graphic.

Converting an Embedded Graphic to a Group

You can convert an embedded graphic to a gro up. A converted graphic is no longer associated wit h its
source graphic. All configuration of the embedded graphic is pres erved.
If you convert an embedded graphic to a group:
 Scripts of the embedded graphic are not converted.
 You can optionally move the custom properties to the group.
 Relative references of the embedded graphic are no longer valid.
To convert an embedded graphic to a group
1. Select the embedded graphic that you want to convert to a group.
2. On the Edit menu, point to Embedded Symbol, and then click Convert To Group. The embedded
graphic is converted to a group.

Detecting the Source Graphic of an Embedded Graphic

You can view the source of an embedded graphic by using the SymbolReference property.
To detect the source of an embedded graphic
1. Select the embedded graphic on the canvas.

328
Embedding Graphics within Graphics Creating and Managing Industrial Graphics User Guide

2. In the Properties Editor, view the SymbolReferenc e property to see what object or environment
contains the source and the name of the source graphic itself. This can be:
o Symbol:SymbolName.
o Symbol:[Link]

Editing the Source of an Embedded Graphic

You can edit the source of an embedded graphic by opening it in a new session of the Industrial Graphic
Editor.
To edit the source of an embedded graphic
1. Select the embedded graphic.
2. On the Edit menu, point to Embedded Symbol, and then click Edit Symbol. The source of the
embedded graphic is opened in a new session of the Industrial Graphic Editor.
3. Edit the source graphic as needed and click Save and Close. The new session of the Industrial
Graphic Editor is closed and the Symbol Changed icon appears in the status bar.
4. Double-click the Symbol Changed icon. The change is reflected in the embedded graphic.
If you do not accept the change, the embedded graphic is updated the next time you open it in the
Industrial Graphic Editor.

Controlling Size Propagation of Embedded Graphics

You can control the way that size changes of the source graphic are propagated to its embedded
instances, which are embedded graphics. For example, a size change is:
 Resizing one of the elements in the source graphic so that the graphic boundary changes.
 Adding elements to or removing elements from the sourc e graphic so that the graphic’s boundary
changes.
This feat ure is called dy namic size change and can be enabled or disabled.

Setting the Anchor Point of a Source Graphic

You can set the position of the anchor point of a source graphic. The anchor point of a source graphic is
by default the center point of all elements on the canvas.
You can change the position of the anchor point:
 Numerically by typing the absolute or relative anchor point position values in the Properties Editor.
 Graphically by dragging the anchor point on the canvas.
To change the position of the anchor point numerically
1. Click on the canvas.
2. In the Properties Editor, type position values X,Y for:
o AbsoluteAnchor property, where the position is relative to the top left corner of the canvas 0,0.
o RelativeAnchor property, where the position is relative to the center point of all elements on the
canvas.
The anchor point is changed accordingly. The AbsoluteAnchor and RelativeAnchor property
values are updated accordingly.
To change the position of the anchor point graphically
1. Click on the canvas.

329
Creating and Managing Industrial Graphics User Guide Embedding Graphics within Graphics

2. In the Properties Editor, click the AbsoluteAnchor or RelativeAnchor property label. The anchor
point of the graphic is shown.
3. Drag the anchor point to the new position. The AbsoluteAnchor and RelativeAnchor property
values are updated accordingly.

Showing or Hiding the Anchor Points of Embedded Graphics

You can show or hide the anchor points of embedded graphics. An anchor point shows the current
absolute anchor position of the embedded graphic on the canvas.
To show or hide the anchor point of an embedded graphic
 On the toolbar, click the Show/Hide Embedded Symbol Anchor Points icon. The anchor of the
embedded graphic appears or disappears.

Enabling or Disabling Dynamic Size Change of Embedded Graphics

You can enable or disable the dynamic size change of embedded graphics. The anc hor poi nts of the
embedded instances are not changed by any size change to the source graphic.
If the source graphic size changes and the dynamic size change is enabled, the embedded graphic size
adapts accordingly. If the dynamic size change is dis abled, the emb edded graphic size does not change.
In both cases the anchor points of its embedded instances do not move on the canvas.

Source Symbol
Changed

Source Symbol (Original) Source Symbol (Changed)

With
Dynamic
Size
Propagation

Embedded Symbol Embedded Symbol

(Original) (Propagated)

Without Dynamic
Size Propagation

Embedded Symbol
(Propagated)

330
Embedding Graphics within Graphics Creating and Managing Industrial Graphics User Guide

To enable or disable dynamic size change of an embedded graphic

1. Select the embedded graphic on the canvas.
2. On the toolbar, click the Enable/Disable Dynamic Size Change icon. The dynamic size change is
enabled or disabled.

Selecting Alternate Graphics and Instances

If your embedded graphic is contained in an object instance, you can:
 Use another graphic that is contained in the same object instance.
 Use the same graphic that is contained in a different object instance, in which case the animation
links in the graphic are redirected.

Selecting Alternate Graphics

You can select an alternate graphic of the same object instance to embed. The following properties are
retained:
 Position and size
 Animations applied to the embedded graphic
 Override information (the TreatAsIcon property)
You can only select alternate graphics for embedded graphics contained in object instances.
To select an alternate graphic
1. Select the embedded graphic on the canvas.
2. On the Edit menu, point to Embedded Symbol, and then click Select Alternate [Link]
HMI's attribut e/tag brows er appears.
3. If available, select an alternate graphic that is contained in the same instanc e and click OK. The
embedded graphic is updated with the new alternate graphic.

Selecting Alternate Instances

You can select an alternate instance of the object that contains the same embedded graphic. When you
select an alternate graphic to embed, the following properties are retained:
 Position and size
 Animations applied to the embedded graphic
 Override information (the TreatAsIcon property)
To select an alternate instance
1. Select the embedded graphic on the canvas.
2. On the Edit menu, point to Embedded Symbol, and then click Select Alternate Instance. Your
HMI's attribut e/tag brows er appears with a list of all instances that contain the same graphic.
3. Select an instance and click OK. All internal references of the embedded graphic updat e to point at
the alternate instanc e. The name of the embedded graphic updates to reflect that it is pointing at a
different instance.

Detecting and Editing the Containing Object Instance

You can det ect and edit the object instance that contains the embedded graphic.

331
Creating and Managing Industrial Graphics User Guide Embedding Graphics within Graphics

To detect the object instance that contains the source graphic

1. Select the embedded graphic.
2. In the Properties Editor, locate the OwningObject property. Its value contains the name of the object
that contains the source graphic.

Note: You can write to this property at run time to force the embedded graphic to point to a different
object in its references contained in animation links.

To edit the object that contains the source graphic

1. Select the embedded graphic.
2. On the Edit menu, point to Embedded Symbol, and then click Edit Instance. The object instance
opens for editing in the IDE.
3. Edit the instance as needed and save your changes.

Creating a New Instance of the Containing Object

You can create a new instance of the object that contains an embedded graphic. The following properties
of the graphic are ret ained:
 Position and size
 Animations
 Override information (the TreatAsIcon property)
To create a new instance of the object that contains an embedded graphic
1. Select the embedded graphic.
2. On the Edit menu, point to Embedded Symbol, and t hen click New Instance. The Create Instance
dialog box appears.
3. Type a name for the new instance in the New Instance Name box and click OK. The new instance of
the object is created and the references and name of the embedded graphic are updated to point at
it.

332
 Creating and Managing Industrial Graphics User Guide

C HAPTER 14
Migrating InTouch SmartSymbols
Importing InTouch SmartSymbols into an Industrial Graphic
You can use InTouch SmartSymbols in Industrial graphics by importing (migrating) them. The
SmartSymbol appearance and configuration is imported and converted to animation configuration.
The imported SmartSymbol can:
 Be added to the existing elements on the canvas.
 Replace the existing elements on the canvas.
Generally, you can import any InTouch SmartSymbol into an Industrial Graphic.

Note: The SmartSymbol can contain objects that cannot be imported, or can be imported but have
limited functionality. For a full list of these objects, see Restrictions for SmartS ymbol Import on page 334.

To import an InTouch SmartSymbol into an Industrial Graphic

1. Open the Industrial Graphic Editor.
2. On the Special menu, click Import InTouch SmartSymbol. The Find InTouch Application
Wizard appears.
3. If your InTouch application is in a different folder than the default, click the browse button to browse
for the path to the InTouch application.
4. Select Find Applications. The Search Root box shows the path under which all applications are to
be searc hed.
5. If your InTouch application is not under the specified Search Root path, change the Search Root
path by typing a new start folder for the search or brows ing for one.
6. Click Find. All InTouch applications contained in the specified Search Root folder are found and
listed.
7. Select the application from which you want to import SmartSymbols and click Next. The Select
InTouch SmartSymbol dialog box appears.
8. Browse to the location of the SmartSymbol in the SmartSymbol hierarchy, select the SmartSymbol
that you want to import, and then click OK.
If you already have elements on the canvas, a dialog box appears prompting if you want to replace
the existing elements. Click:
o Ye s if you want to delete the existing elements and import the SmartSymbol on an empty
canvas.
o No if you want to keep the existing elements and import the SmartSymbol.
9. If the SmartSymbol contains fonts that are currently not installed on the operating system, the Edit
Font Mapping dialog box appears.
You can click Continue to accept the suggested font mapping, or change the font mapping for each
individual font. To do this:
a. Click the font name in the Mapped Font column. A browse button appears.
b. Click the browse button. The Supported Font Selection dialog box appears.

333
Creating and Managing Industrial Graphics User Guide Migrating InTouch SmartSymbols

c. Select a font from the list and click OK. The selected font appears in the Mapped Font column.
d. Repeat the steps for any other font you want to map to another font.

Note: If you want to save the mapping for the next time you import a SmartSymbol, check Save
mapping.

10. The SmartSymbol is imported and appears on the canvas.

Restrictions for SmartSymbol Import

When you import an InTouch SmartSymbol, the following configuration is imported:
 InTouch graphics
 Graphical animations
 Scripts
 Referenc es

Importing InTouch Graphics

The following tables shows you InTouc h graphics that:
 Can be imported without any problem.
 Can be imported but are changed in their functionality or lose some functionality in the process.
 Cannot be imported.
The following InTouc h graphics can be import ed without any problem:

Industrial
InTouch Graphic
Graphic Element Note s

Rectangle Rectangle

Rounded Rounded
Rectangle Rectangle

Ellipse Ellipse

Line Line

H/V Line Line Smart Symbols convert H/V lines to Lines.

Therefore, ArchestrA can only generat e
lines.

Polyline Polyline

Polygon Polygon

Text Text

Bitmap Bitmap

Cell Group ArchestrA property "Treat as Icon" = false.

334
Migrating InTouch SmartSymbols Creating and Managing Industrial Graphics User Guide

Industrial
InTouch Graphic
Graphic Element Note s

Symbol Group ArchestrA property "Treat as Icon" = true.

Button Button

The following InTouc h graphics can be import ed, but are changed in their functionality or lose some
functionality in the process:

Industrial
InTouch Graphic
Graphics Element Note s

Wizard\ Elements When grouped in a SmartSymbol, it

appears as a group of elements.

SmartSymbol Elements When grouped in another Smart Symbol,

it is broken down into a cell, losing its
SmartSymbol properties.

The following InTouc h graphics cannot be imported, as they cannot be added to a SmartSymbol:

Industrial
InTouch Graphic
Graphic Element Note s

RealTime n/a Cannot be added to a SmartSymbol.

Trend

Historical n/a Cannot be added to a SmartSymbol.

Trend

ActiveX n/a Cannot be added to SmartSymbol. This

Cont rols would include all ActiveX alarm controls
(Alarm DB View, Alarm Viewer, and so
on)

Importing Graphical Animation

When you import an InTouch SmartSymbol, all data configured in InTouch animations is imported to
ArchestrA animations. InTouch animations and ArchestrA animations often have a different name, but
perform the same function.
The following table shows you which animations correspond to each other:

InTouch Animation Link Arche strA animation

User Inputs - Discrete User Input

335
Creating and Managing Industrial Graphics User Guide Migrating InTouch SmartSymbols

InTouch Animation Link Arche strA animation

User Inputs - Analog User Input

User Inputs - String User Input

Sliders - Vertical Slider Vertical Slider

Sliders - Horizontal Slider Horiz ontal Slider

Touch Pushbuttons - Discrete Value Pushbutton

Touch Pushbuttons - Action Action Scripts

Touch Pushbuttons - Show Window not supported

Touch Pushbuttons - Hide Window not supported

Line Color - Discret e Line Style

Line Color - Analog Line Style

Line Color - Discret e Alarm Line Style

Line Color - Analog Alarm Line Style

Fill Color - Discrete Fill Style

Fill Color - Analog Fill Style

Fill Color - Discrete Alarm Fill Style

Fill Color - Analog Alarm Fill Style

Text Color - Discrete Text Style

Text Color - Analog Text Style

Text Color - Discrete Alarm Text Style

Text Color - Analog Alarm Text Style

Object Size - Height Height

Object Size - Width Width

Location - Vertical Location Vertical

Location - Horizontal Location Horizontal

Percent Fill - Vertical % Fill Vertical

Percent Fill - Horizontal % Fill Horizontal

Miscellaneous - Visibility Visibility

Miscellaneous - Blink Blink

Miscellaneous - Orientation Rotation

336
Migrating InTouch SmartSymbols Creating and Managing Industrial Graphics User Guide

InTouch Animation Link Arche strA animation

Miscellaneous - Disable Disable

Miscellaneous - Tooltip Tooltip

Value Dis play - Discrete Value Value Dis play

Value Dis play - Analog Value Value Dis play

Value Dis play - String Value Value Dis play

Importing Action Scripts

When you import a SmartSymbol, all action scripts associated with objects in SmartSymbol are imported
as well. An action script in a SmartSymbol becomes a script animation in an Industrial Graphic.
Most of the predefined InTouch functions (QuickScripts) are imported.

Mathematical Functions
The following mathematical functions in InTouch WindowMak er are support ed by the Industrial Graphic
Editor:
Abs, ArcCos, ArcSin, ArcTan, Cos, Exp, Int, Log, LogN, Pi, Round, Sgn, Sin, Sqrt,
Tan, Trunc

String Functions
The following string functions in InTouch WindowMaker are supported by the Industrial Graphic Editor:
Dtext, StringASCII, StringChar, StringCompare, StringCompareNoCase,
StringFromGMTTimeToLocal, StringFromIntg, StringFromReal, StringFromTime,
StringFromTimeLocal, StringInString, StringLeft, StringLen, StringLower,
StringMid, StringReplace, StringRight, StringSpace, StringTest, StringToIntg,
StringToReal, StringTrim, StringUpper, Text, wwStringFromTime

System Functions
The following system functions in InTouch WindowMak er are supported by the Industrial Graphic Editor:
ActivateApp

Miscellaneous Functions
The following miscellaneous functions in InTouch WindowMaker are supported by the Industrial Graphic
Editor:
DateTimeGMT, LogMessage, SendKeys, WWControl

Importing References
When you import a SmartSymbol, the following changes are made to tags and references:

InTouch
SmartSymbol Industrial Graphic Example

Local Tags Prefix ed with " InTouch:" Real Memory Tag " Tank Level1" is converted
keyword to "InTouch: Tank Level1"

337
Creating and Managing Industrial Graphics User Guide Migrating InTouch SmartSymbols

InTouch
SmartSymbol Industrial Graphic Example

Local Tags with Prefix ed with " InTouch:" Discrete Memory Tag " [Link]"
dotfields keyword is converted t o "InTouc h:TankLevel1. InAlarm"

SuperTags Prefix ed with " InTouch:" Real Supertag member "Reactor1\ Level" is
keyword. You need to converted to "InTouch:Reactor1\Level". You
manually enclose the need to change the expression manually as
expression by the follows:
following syntax:
attribute("InTouc h:Reactor1\ Level");
attribute("...");

I/O References Prefix ed with " InTouch:" Integer I/O Tag "Testprot:i00" is convert ed to
keyword "InTouch: Testprot:i00"

Galaxy References "Galaxy:" prefix is Galaxy Reference "galaxy:Pump1.Valve1" is

removed converted to "Pump1.Valve1"

The following items are imported with functional change:

InTouch SmartSymbol Industrial Graphic Example

Galaxy:Object Tagname. "Galaxy:" prefix is "Galaxy:[Link].#VString4" is converted to

Property.#VString removed but #VString is "[Link]"
not supported. Applies
also for #VString1,
#Vstring2, #VString3 and
#VString4

Galaxy:Object Tagname. "Galaxy:" prefix is "Galaxy:[Link].#ReadSts" is converted to

Property.#ReadSts removed but #ReadSts is "[Link]"
not supported

Galaxy:Object Tagname. "Galaxy:" prefix is "Galaxy:[Link].#WriteSts" is convert ed to

Property.#WriteSts removed but #WriteSts is "[Link]"
not supported

Galaxy:Object Tagname. "Galaxy:" prefix is "Galaxy:Selection.Sel1.#E numOrdinal" is

Property.#EnumOrdinal removed but converted to "Selection.Sel1"
#EnumOrdinal is not
supported

338
 Creating and Managing Industrial Graphics User Guide

C HAPTER 15
Switching Languages for Graphic Elements
About Language Switching for Industrial Graphics
This section describes how to switch the language shown for Industrial Graphics, the effects of different
language settings between the IDE and an individual Industrial Graphic, and language switching
behaviors for certain features, such as embedded graphics, custom properties, and string substitution.
The language settings of the IDE control which languages are available to graphics. Y ou cannot add a
language at the graphic level. Languages are only added at the Galaxy level using the IDE.

Galaxy1

Symbol1
* English
French

* English
French

* = Default
Using the Industrial Graphic Editor, you select which of the IDE -configured languages you want to show
for your graphic. By default, text for the graphic is shown in the default language and font for the IDE.
You export text for translation using the IDE.

Graphic Elements that Support Translation

The following table describes the graphic elements that support translation. Element fonts are fonts set
using the Property Editor and Industrial Graphic Editor tools.

Graphic Element Type of Translation Supported

Text Element Text, Font

TextBox Element Text, TextFormat, Font

Button Element Text, TextFormat, Font

Radio Button Group Element Font

CheckBox Element Font

EditBox Element Font

ComboBox Element Font

ListBox Element Font

Calendar Element Font

339
Creating and Managing Industrial Graphics User Guide Switching Languages for Graphic Elements

Graphic Element Type of Translation Supported

DateTime Picker Element Font

Embedded Symbol String substitutions and overridden custom

properties defined as static strings

Client Control Element Font

Base Symbol Custom Properties defined as static strings

Animations that Support Translation

The following table lists the user translation support for animations. When you switch the language at
design time or run time, the following portions of the animation change accordingly.

Animation Type of Translation Supported

ValueDisplay (Boolean Static string in the True Message of the Boolean type.
Type)
Static string in the False Message of the Boolean type.

UserInput Static string in the Message to User for all types.

Static string in the True Prompt for Boolean type.
Static string in the False Prompt for Boolean type.
Static string in the True Message for Boolean type.
Static string in the False Message for Boolean type.

ToolTip Only the static string in the tooltip animation can be translated.

ShowSymbol Only the static string in the title of the ShowSymbol animation can be
translated when the Use Symbol Name for Window Title option is
unchecked.
PushButton (String Only the static strings in the Value1 and Value2 of the String type
Type) Pushbutton animation can be translated. No other types of PushB utton
animations can be translated.
Radio Button Only the captions of individual radio button items in the Static type, Array
type, or Enum type RadioButton animations can be translated when the
Use Values as Captions option is unchecked.

CheckBox Only the caption string of the CheckBox animation can be translated
when the Override the caption with the following expression option
is unchecked.
EditBox The configuration text of the EditBox animation can be translated only
when the EditBox data source is left empty. If a data source is provided,
the EditBox text cannot be exported for translation.

340
Switching Languages for Graphic Elements Creating and Managing Industrial Graphics User Guide

Animation Type of Translation Supported

ComboBox Only the captions of individual combo box items in the Static type, Array
type, or Enum type ComboBox animation can be translated when the
Use Values as Captions option is unchecked.

ListBox Only the captions of the individual list box items in the Stat ic type, Array
type, or Enum type ListBox animation can be translat ed when the Use
Values as Captions option is unchecked.

Selecting the Language for a Graphic

When you select a language for a graphic, all graphic elements show the translat ed text associated with
the selected language, if it is available. You can switch languages even if you open the graphic in
read-only mode.
You can only select languages that are currently configured for the IDE.

Note: The current element creation font does not change when you switch to a different language.

To select the language for a graphic

1. Open the graphic in the Industrial Graphic Editor.
2. In the Language s panel, select the language from the list.

Removing a Language for a Graphic

If you remove a language from the IDE, the language is still available for a graphic until you specifically
remove it.
You cannot remove a language from a graphic if the language is configured at the IDE level.
To remove the language for a graphic
1. Open the graphic in the Industrial Graphic Editor.
2. On the Special menu, point to Configure and then click Locales. The Configure Languages dialog
box appears.
3. Select the language to remove and click Remove.
4. Click OK.

Creating Elements When Multiple Languages are Defined for a

Galaxy
You must select the default language for the Galaxy before you create a new graphic element. You
cannot create an element if you have a secondary language selected in the Industrial Graphic Edi tor.
This includes:
 Duplicating an element
 Pasting an element
 Embedding a graphic
 Grouping or ungrouping elements
 Combining paths

341
Creating and Managing Industrial Graphics User Guide Switching Languages for Graphic Elements

 Breaking paths
 Import an InTouch SmartSymbol
 Convert a graphic to a group

Moving Graphics to Galaxies with Different Language

Settings
If you import a graphic into a different Galaxy, any translation that already exists for the graphic is
retained; however, only languages that are configured for the new Galaxy are available for use.
If you open a graphic that does not contain the default language of the Galaxy, then the default language
is added to the list of languages for that graphic and is set as the new default language of the graphic.
The text strings from the last saved default language of that graphic are transferred over to the new
default language of the graphic.
For example, if a graphic only has the French language configured and is opened in a Galaxy where
English is the default language, the French strings are trans ferred over to the English language when the
graphic is opened, and English is made the default language for the graphic. The French language still
exists for the graphic, but it will no longer be the default language.
If a previously imported graphic has English and French configured with Frenc h as the default language
and the graphic is opened in a Galaxy with English as the default language, the default language for the
graphic is set to English.
If you open a graphic in read-only mode, no changes are made to the graphic 's language settings to
reflect the language settings of the Galaxy.
We recommend that you validate templates and instances that have graphics after migrating them to a
new Galaxy and before exporting localizations.

How Fonts are Applied at Design Time

When you create a graphic element that supports visible text, it is created in the default language of the
Galaxy. The font used is the last font persisted in the editor. However, if you provide a specific translation
for an element in a secondary language, the Galaxy -configured font for the language is applied to the
element.
For example:
1. You configure three languages: English (Default, Font = Arial), French (Font = Courier New) and
German (Font = Times New Roman).
2. You open a graphic S1 in the English language. The editor default is Arial. You create a textbox in
English. It is created wit h the Arial font.
3. You switch to German and translate the text. The font changes to Times New Roman, which is the
font configured for German. The original font size and style remains the same.
4. You switch to Frenc h. The font is Arial because the text in Frenc h is not translated yet.

Language Switching for Embedded Graphics

When you embed a graphic into another graphic, any translations are also loaded for the embedded
graphic. Switching the language for a graphic also switches the language for all embedded graphic.
For example, a graphic S1 contains a text graphic with the tex t "English String." English is the default
language. The text is set to "French String" for the French language. The following steps describe
language switching for the embedded graphic:
1. You embed the graphic S1 into the graphic S2.

342
Switching Languages for Graphic Elements Creating and Managing Industrial Graphics User Guide

You see the text showing the "Englis h String."

2. You switch the language to French in the editor of S2.
The text in the embedded graphic S1 switches to "French String."
If you convert an embedded graphic to a group, any translations defined for the embedded graphic are
migrated to the new elements created in the graphic. If the embedded graphic supports languages that
are not defined in the base graphic, those translations are removed during the conversion.
If you open a graphic containing one or more embedded graphics and the current language of the
Industrial Graphic Editor is not available in the embedded graphics, then the embedded graphic use the
Galaxy-configured default language, if available. If the Galaxy -configured default language is not
available, then the embedded graphic use the last saved default language of that graphic.
For example:
1. You creat e graphic S1 with French and German languages. The default language for the Galaxy is
German.
2. You embed S1 inside S2 and then save and close S2.
3. You change the Galaxy default language to French.
4. You add English as another language.
5. If you open the graphic S2 in the English language, then the graphic S1 is shown using the French
text. This is because French is the Galaxy-configured default language.
Embedded graphics support translations for custom properties. For more information on translating
custom properties, see Translating String Custom Properties on page 344.
Embedded graphics also support translations for string substitutions. For more information on translation
and string substitutions, see String Substitutions and Language S witching on page 343.

String Substitutions and Language Switching

You can substitute strings for textual elements within the graphic. For general information about string
substitution, see Substituting Strings on page 150.
If you perform a first-time string substitution on an embedded graphic in the primary language, that
substitution is shown in the secondary languages. You can then perform a substitution in the secondary
language to creat e a string substitution specific to the secondary language.
If you perform a first-time string substitution on an embedded graphic in a secondary language, the
substitution is also applied to the primary language, because the translat ed string that previously existed
for the primary language is no longer valid. Because the primary language val ue is changed in the
graphic, this string applies to all secondary languages configured. You can then perform a second
substitution in the primary language, which will apply to all secondary languages except the ones that
have had a specific substitution set.
If you perform a string substitution in a secondary language with an existing string substitution in the
primary language, the new substitution is applied to the secondary language only.
The following design time and run-time rules are applied during a language switch to properly update an
embedded graphic with the current substitutions for the language:
1. Apply the string substitutions from the default language.
2. Apply the string substitutions from the secondary language, if switching to a secondary language.
For example, an embedded graphic contains a text graphic with the text "English String." English is the
default language. The following steps describe how changing the language affects string substitution for
the embedded graphic:

343
Creating and Managing Industrial Graphics User Guide Switching Languages for Graphic Elements

1. While editing in the default language, you select an embedded graphic and open the string
substitution dialog box.
2. You can see the old column with a value of "English String."
3. You replace the "English String" with "New E nglish String."
4. You close the string substitution dialog box.
5. You switch to the French language.
6. You open the string substitution dialog box and see the string "New E nglish String" in the old column.
7. You now replace the "New English String" with "New French String."
8. You close the string substitution dialog box.
9. You switch to the German language.
10. You open the string substitution dialog box and see the string "New E nglish String" in the old column.
11. You now replace the "New English String" with "New German String."
12. You close the string substitution dialog box.
13. You switch to the French language.
14. You open the string substitution dialog box and see the string " New French String" in the old column.
If you select an alternate graphic, the string substitutions made on the initial symbol are reapplied to the
new graphic across all languages.
The behavior of ArchestrA client control string substitutions are the same as the embedded graphics.

Translating String Custom Properties

You can translate custom properties that are defined as static strings.
If the custom property is configured wit h a reference, then that reference applies across all languages in
the graphic. If you change that referenc e in any language to a static string, that string is set for all
languages, and you can provide specific translations in the other languages.
For example, you create a custom property CP1 of type string with a default value of "Hello." You can
now translate this custom property. You switch to another language in the editor and modify the default
value of CP1 to UD1.str1 (changed from string to reference). Now CP 1 cannot be translated. If you go
back and change CP1 from a reference to a string, you can translate it again. The value you place in the
default value is the value shown for all other languages if you do not specify a different string in that
language.
When the custom property dialog box opens, it shows the ap propriate translat ed values for the constant
string custom properties, as determined by the translation precedence rules. For more information on
these rules, see Precedence Rules for Showing the Language and Font on page 350.

Translating Custom Properties for a Base Graphic

New custom properties you create can be translated specifically for the graphic, provided that:
 They are configured as string custom properties.
 The default language value of the custom property is a static string (as opposed to a reference).
For example:
1. While editing the default language, you create a new custom property called CP1 with a data type of
string.
2. You enter the value "English String" as the custom property value.

344
Switching Languages for Graphic Elements Creating and Managing Industrial Graphics User Guide

3. You close the custom property dialog box to save the changes.
4. You switch to the French language.
5. You open the custom property dialog box and see the string "English String."
6. You can now enter a specific string for French in the CP1 custom property. You cannot enter a
reference in the French language.

Translating Custom Properties for an Embedded Symbol

You can translate custom properties exposed in an embedded symbol if the overridden value is a
constant string. This also applies if the base value is a reference and is overridden to a constant string.
All the translations for a single overridden custom property must be constant string values. The first
localized overridden value in one local is propagat ed to all the other locales as the default overridden
value.
For example:
1. While editing the default language, you select an embedded symbol and open the custom property
dialog box.
2. You can see a constant string custom property called "CP1" with a value of "English String."
3. You close the custom property dialog box.
4. You switch to the French language.
5. You open the custom property dialog box and see the string "English String."
6. You can now enter, for example, "Overridden French String" string for French in the CP1 custom
property. You cannot ent er a reference in the French language.
7. If you switch to English Language, you see "Overridden Frenc h String" as the default overridden
value.

Translation Support for Client Controls with Satellite

Assemblies
A satellite assembly is a .NET Framework assembly that contains resources specific to a given
language. You can place the resources for different languages in different assemblies, and the correct
assembly is loaded into memory if the run -time user views the application in that language.
If you import a client control wit h satellite assemblies, then the satellite assemblies are also imported.
The translation support for client controls with satellite assemblies is as follows:

Scenario Behavior of Client Control

Design Time - The Industrial Graphic Editor only supports English.

Industrial Graphic The application locale has no effect on how the client
Editor controls are shown.

Design Time - The localized version of the InTouch HMI being used
WindowMaker determines how the client controls are shown.

Run Time - The localized version of the InTouch HMI being used
WindowViewer determines how the client controls are shown. The
application locale has no effect on how the client
controls are shown.

345
Creating and Managing Industrial Graphics User Guide Switching Languages for Graphic Elements

When you export text for translation, the base font information for client controls is not included. You
need to use satellite assemblies to control this information.

Translation Support for ArchestrA Client Controls

ArchestrA client controls, such as the ArchestrA Alarm Control, support the following types of translation:
 ArchestrA client controls with satellite assemblies work similar to other types of client controls.
 ArchestrA client controls support translated string substitutions. For more information on translated
string substitution, see S witching Languages and String Substitutions at Run Time on page 352.
The number and type of strings used by the ArchestrA client control is specific to the control.
When you export text for translation, the base font information for ArchestrA client controls is not
included. You need to use satellite assemblies to control this information.

Importing InTouch SmartSymbols that Have Translated Data

You can import InTouch SmartSymbols having translated data into the Industrial Graphic Editor. All the
language dat a in a SmartSymbol is imported into the Industrial Graphic, including:
 Configured languages.
 Translat ed content for graphic elements (text and font)
 Translat ed animation links.
After you import, you can view the language data in the Industrial Graphic Editor at design time or in
InTouch WindowViewer at run time.
For example, you import a SmartSymbol with language data for French and German. After the import,
the French and German languages are added to the Industrial Graphic, if they do not already exist.
The language switching behavior at run time matches the behavior of the original SmartSymbol. Any
variation in the default font usage at run time between Industrial Graphics and native InTouch graphics is
resolved during the SmartSymbol import. During the import, elements that have translations but not a
translated font are detected and their font set to the Galaxy -configured font for that language.

Support for Empty Strings

You cannot substitute an empty string in the primary locale. You must use space charact ers. When you
set an empty string for a primary locale, the empty string is propagated to all other locales that do not
have translations.
Performing a first time substitution of an empty string in a secondary locale puts a space character in the
primary and the current locale. The remaining locales will match the primary value if they do not already
have a specific value.
If a primary locale cont ains an empty string, it will be exported for translation.
If you substitute an empty string for a secondary loc ale, the element shows as empty. However, if you
switch to the primary locale and then back to the secondary locale, the element shows the primary string
substitution again.

Language Switching Example

The following table describes the effects of language switching on the various parts of the system. In this
example:
 The Galaxy is configured with two languages: English and French.
 The default language in the Galaxy is English.

346
Switching Languages for Graphic Elements Creating and Managing Industrial Graphics User Guide

 There are various graphics configured in the Galaxy, some of which contain partial or mismatched
language configurations compared to the Galaxy’s configured languages.

Effect on the
Languages Effect on Elements Effect on Elements
Configured for that contain Engli sh that contain French
Action the Graphic Translations Translations

You open a new graphic. English language None None

is added to the
graphic.

You open an existing None None None

graphic that only has
English defined.

You open an existing English language Frenc h strings are Frenc h strings are
graphic that only has the is added to the transferred into the marked as specific
Frenc h language defined. graphic. English language. translations for
Frenc h.

You open an existing English language German strings are None

graphic that only has the is added to the transferred into the
German language defined. graphic. English language.
German strings are
marked as specific
translations for
German.

You change a text string in None New string is set for None
the English language. the English language.

You switch to the French Frenc h language None The default language
language for the first time in is added to the strings are shown
a graphic that only had the graphic. unless a specific
English language. Frenc h translation
exists.

You change a string while None None The new string is set
viewing the French as the specific
language. translation for the
Frenc h language and
used for display.

You creat e a new text None The new element's None

element in a graphic that string value is saved
has English only while for translation.
viewing the English
language.

347
Creating and Managing Industrial Graphics User Guide Switching Languages for Graphic Elements

Effect on the
Languages Effect on Elements Effect on Elements
Configured for that contain Engli sh that contain French
Action the Graphic Translations Translations

You delete an element with None English translations Frenc h translations

translations in English and are removed. are removed.
Frenc h.

You copy animations from None English animation Frenc h animation

an element. translation strings are translation strings are
put into the clipboard. put into the clipboard.

You paste animations to an None English animation Frenc h animation

element. translation strings are translation strings are
put into the put into the
destination destination
animations. animations.

You clear animations for an None English animation Frenc h animation

element. strings are removed. strings are removed.

You copy and paste None German strings are None

elements from a placed in the English
German-only graphic into a language.
graphic containing English
and French.

You copy and paste None English strings from None

elements from an Englis h the source graphic are
and German graphic into a copied during the
symbol containing English paste. The German
and French. strings are dropped.

You export the French The French English strings are If s pecific strings exist
language, having never language is added exported in the for French, they are
switched to the French to the graphic for "Phrase" XML exported in the
language. the purposes of attribute field. "Translation" XML
the export. The field.
language is not
saved back to the
graphic during the
export.

348
Switching Languages for Graphic Elements Creating and Managing Industrial Graphics User Guide

Effect on the
Languages Effect on Elements Effect on Elements
Configured for that contain Engli sh that contain French
Action the Graphic Translations Translations

You import the French The French None Any translations

language. language is provided in the import
added. are marked as
specific translations
for the French
language. If the
translation is empty,
the default language
value is shown.

You convert a graphic to a Same logic as Same logic as Same logic as

group. copy/paste. copy/paste. copy/paste.

You delete the German German is None None

language. removed.

Overriding Translated Strings for Industrial Graphics in

WindowMaker
After you embed an Industrial Graphic into an InTouch window, you can override the translations for:
 Strings on the substitutable graphic elements within the Industrial Graphic.
 String type custom properties on the Industrial Graphic.
To translate these overrides, you must export and import the strings for the managed InTouch
application.

Overriding Translated String Substitutions

After you export the managed InTouch application using the IDE, all the string substitution overrides are
exported into an InTouc hViewA pp dictionary file.
After you import the translated InTouchViewApp dictionary file, you can view the translated string
overrides in InTouch WindowViewer at run time.

Overriding Translated Custom Properties

After you export the managed InTouch application using the IDE, all the custom property overrides are
exported into an InTouc h ViewA pp dictionary file.
After you import the translated InTouchViewApp dictionary file, you can view the translated custom
properties in InTouch WindowViewer at run time.

Language Switching at Run Time

At run time, languages can be switched in the following ways:
 Using the InTouch script function S witchDisplayLanguage() from an InTouch script only.

349
Creating and Managing Industrial Graphics User Guide Switching Languages for Graphic Elements

 Setting the value of the $Language system tag within an InTouch or ArchestrA script.
 Selecting the language from the Special menu. For managed InTouc h applic ations, the list of
languages shown is based on the languages configured in the Galaxy.

How Languages are Shown in WindowViewer

At run time, Industrial Graphics are shown in the language set for InTouch WindowViewer.
If the Industrial Graphic’s language does not match the WindowViewer language setting, the language
shown is the language that was the default language for the graphic when it was last saved.
For example, an InTouch Window has three different embedded Industrial Graphics: S1, S2, and S3.
 S1 has a Text graphic with French and German languages configured.
 S2 has Textbox graphic with only German language configured.
 S3 has a Button graphic with English and Spanish languages configured. S3 has two client scripts.
The first script switches the language to Chinese, and the second script switches the language to
Spanish.
English is the default language. The following steps show how the translated graphics are shown:
1. Set the language to French in the WindowViewer.
The Text in S1 shows the "French String."
The Textbox in S2 shows the "German String."
The Button in S3 shows the "English String."
2. Run the first client script on graphic S3.
The Button in S3 still shows "English String."
3. Run the second client script on graphic S3.
The Button in S3 shows "Spanis h String."
4. Set the language to German in the WindowViewer.
The Text in S1 shows the "German String."
The Textbox in S2 still shows the "German String."
The Button in S3 shows the "English String."

Precedence Rules for Showing the Language and Font

All elements and animations that can be translated follow these precedence rules for showing the
translated text:
1. The default language holds the master language text for the translation.
2. The secondary languages use the default language's text if no specific translation exists for the
secondary language.
3. If a specific translation value exists for a secondary language, that text is shown instead of the
default language's text.
The precedence rules for which font to use for a graphic element that supports visual text are as follows:
1. If there is no text translation for an element, the element shows the text in the default languag e.
2. If there is a specific translation in the secondary language and no translated font specified for the
element, the element shows text using the font specified in the Galaxy for that language.

350
Switching Languages for Graphic Elements Creating and Managing Industrial Graphics User Guide

3. If there is a specific translation in the secondary language and a specific font set for the element, the
element shows the text using the specific font.
For example:
1. You creat e a TextBox element on a graphic with the text "English String." The Galaxy -configured
languages are English with Arial font and German with Tahoma font.
2. You switch over to the German Language. The TextBox element still shows "English String" wit h the
Arial font.
3. You change "English String" to "German String." Because there is now a translation for this string,
the TextBox shows "German String" with the Tahoma font.

Default Language Fonts at Run Time

InTouch WindowViewer uses the default font for a given language if an element has a translation but no
translated font specified. For Industrial Graphics, the font element of the default Galaxy language is
used.

Switching Languages for Custom Properties at Run Time

Embedded Industrial graphics and Industrial Graphics embedded in the InTouch HMI can contain
translated custom properties.
When you switch to a language for the first time, the translated overrides of the custom properties are
loaded from the dictionary file of the Industrial Graphic's overrides.
After switching to a new language in the InTouch WindowViewer, the translated custom properties are
updated based on the switched language. All the animations/scripts that subscribe to a custom property
are notified of the value change and the animation/script values are updated accordingly.
For example:
 Graphic S1 has a constant string custom property CP1.
 S1 has two languages configured: English and Frenc h. English is the default language. The English
is "English CP1."
 CP1 has the French translation, "Frenc h CP1." S1 has two graphic elements: Textbox and Button.
 Each graphic has a value display animation that subscribes to CP1.
 An InTouch Window has two embedded graphics of S1.
 The second instance of S1 has the translated CP1 override in Frenc h ("French Override CP1" ) and
German ("German Override CP 1").
The following steps describe how the translat ed custom properties are shown.
1. Set the language to French in WindowViewer.
The value display animation of Textbox and Button in the first instance of S1 shows "French CP1."
The value display animation of Textbox and Button in the second instance of S1 shows "French
Override CP 1."
2. Set the language to German in the WindowViewer.
The value display animation of Textbox and Button in the first instance of S1 shows "English CP 1."
The value display animation of Textbox and Button in the second instance of S1 shows "German
Override CP 1."

351
Creating and Managing Industrial Graphics User Guide Switching Languages for Graphic Elements

Switching Languages and String Substitutions at Run Time

An embedded Industrial Graphic and Industrial Graphic embedded into InTouch can contain translated
string substitutions. All the graphic elements that contain the translated string substitutions are updated
based on the current language setting.
For example:
 Graphic S1 has two graphic elements: Textbox and Button. S1 has two languages configured:
English and French. The strings are "Englis h String" and "French String." English is the default
language.
 The Textbox element has a French string substitution, "French Sub String." The Button element has
an English substitution, "English Sub String."
 An InTouch window has two embedded graphics of S1. The second instance of S1 has the
translated string substitution overrides for Textbox and Button in French ("French Override Sub
String") and German ("German Override Sub String").
The following steps describe how the translat ed string substitutions are shown.
1. Set the language to French in WindowViewer.
o The text of Textbox and B utton in the first instance of S1 shows "French S ub String" and "English
Sub String," respectively.
o The Text of Textbox and Button in the second instance of S1 shows "French Override String."
2. Set the language to German in the WindowViewer.
o The Text of Textbox and Button in the first instance of S1 shows "English String" and "English
Sub String," respectively.
o The Text of Textbox and Button in the second instance of S1 shows "German Override String."

Language Settings for Popup Graphics

At run time, all popup graphics are shown using the current language setting for WindowViewer. The
popup graphic always tries to show the current language, even if the graphic opening the pop-up does
not support the language.
For example, a graphic S1 is configured with French and German languages. The following steps show
how the current language setting updates:
1. Switch the language from French to German in WindowViewer.
The current language setting is to German.
2. Open a popup graphic S2 from the graphic S1.
The graphic S2 is shown using the German language. If graphic S2 does not have German language
configured, then it is shown using its last saved default language.
3. Close the popup graphic S2.
4. Change the Language property of the graphic S1 to French. The current language setting of the
InTouch WindowViewer is now German, and the language setting of the graphic S1 is French.
5. Open a popup symbol S2 from the graphic S1.
The graphic S2 is shown using the French language. If graphic S2 does not have French language
configured then it is shown using its last saved default language.

352
Switching Languages for Graphic Elements Creating and Managing Industrial Graphics User Guide

Dynamic Propagation of Language Changes to Popup Graphics

When you change the language setting of WindowViewer, the change dynamically propagates to all
popup graphics. This includes both modal and modeless popup graphics.
For example, graphic S1 is configured with French and German languages. WindowV iewer is set to
show the French language. The following steps show how the language is updat ed for the popup
graphic:
1. You open a modeless popup graphic S2 from the graphic S1.
2. You open a modeless popup graphic S3 from the graphic S2.
3. You open a modeless popup graphic S4 from the graphic S1.
The graphics S1, S2, S3, and S4 are shown using the French language.
4. You change the language to German.
The graphics S1, S2, S3 and S4 now show the German language. If the popup graphic does not
support the German language, it is shown using the last saved default language of that popup
graphic.

Language Settings and Data Types

All data and graphics are shown by ArchestrA as English formatted data types, regardless of the
language being shown, the operating system on which the InTouch HMI is installed, or the translated
version of the InTouch HMI you are using.

353
 Creating and Managing Industrial Graphics User Guide

C HAPTER 16
Working with the Show/Hide Graphics
Script Functions
About the Show/Hide Graphic Functions
The Show/Hi de Graphic script functions enable you to write Industrial Graphics scripts to display a
graphic as a pop-up window and close the pop-up window.
The Show/Hide Graphics script functions are in addition to the Show/Hide Symbol animation feature,
which enables you to display a graphic as a pop -up window through graphic animation. The Show/ Hide
Symbol animation feature remains unchanged. You can use Show/Hide Symbol animation and the
Show/ Hide Graphic script functions together. For more information, see Run Time Behavior of the
Show/ Hide Graphic Functions on page 362.
Like the Show/Hide Symbol animation feature, you can control the properties of the graphic through the
Show Graphic feature. You can configure the script to specify:
 Which graphic will appear as the pop-up window.
 Whether the window will have a title bar.
 The initial position of the pop-up window.
 Whether the window can be resized.
 Whether the window will be modal or modeless.
 The relative position of the pop-up window.
 Passing the owning object to the graphic that you want to display.
 Values of the custom properties of the graphic.
You can use the HideSelf script function for Industrial Graphics to close the displayed graphic f rom within
the graphic 's own script.
You can use the HideGraphic() script function to close any displayed graphic given its Identity.
The ShowGraphic(), HideGraphic(), and HideSelf() functions are available in managed or published
InTouch applications only.

Configuring the Show/Hide Graphic Script Functions

You must first include a script that contains the ShowGraphic function to display a graphic as a pop -up
window at run time. You can also include a script that contains the HideGraphic or HideSelf functions.
The HideGraphic script function allows you to close any Industrial Graphic, displayed through the
ShowGraphic script function. The HideSelf script function allows you to close the graphic, displayed by
either the ShowGraphic script function or the ShowSymbol animation.

Important: The ShowGraphic function can be used in a symbol’s action script, named script and
pre-defined script. Although the system allows you to include it in a server script, such as Start Up, On
Scan, Off Scan, Shut Down and Execute, you will not be able to execute the function at run time.

The HideGraphic script function can be called from any Industrial Graphic being us ed in the InTouch
application.

355
Creating and Managing Industrial Graphics User Guide Working with the Show/Hide Graphics Script Functions

To include a script that contains the Show/Hide Graphic functions within a graphic
animation action script
1. Open the ArchestrA IDE.
2. Create a graphic or open an existing graphic.
3. Draw a graphic, and then double-click it to open the Edit Animations page.
4. Open the action script editor.
5. Click the Di splay Script Function Browser icon. The S cript Function Brow ser appears.
6. In the Graphic Client list, click the required script function, and then click OK. The script is added to
the graphic script editor. If you add the ShowGraphic script function, the following code snippet is
added:
Dim graphicInfo as [Link];
[Link] = "<Identity>";
[Link] = "<SymbolName>";
ShowGraphic( graphicInfo );

Note: You can click Help to view the Help after you have selected any Graphic Client script function.

7. Modify the script. The Identity and GraphicName are required properties and must be specified.
a. You can use the Di splay Graphic Brow ser to set the value for the Graphic Name property.
b. You can use the Di splay Automation Object Brow ser to set the OwningObject property.
For more information, see Using the Display Graphic Brows er and Display Automation Object
Browser on page 356.
For details on the scripts and samples, see Show/ Hide Graphic Script Functions Guidelines on page
357.

Using the Display Graphic Browser and Display Automation Object

Browser
You can use the Di splay Graphic Brow ser to select a graphic in the Graphic Toolbox, Instanc es, and
Relative References. You can select a graphic and insert it into the script editor.
You can use the Di splay Automation Object Brow ser to select an automation object and add it as an
owning object. The browser displays all automation objects in the galaxy, arranged in a tree structure.
The browser also displays the object containment relationship. You can select an automation object and
insert it into the script editor.

Note: The automation object that you have insert ed will be placed within double quotes.

To select a graphic or reference name

1. On the script editor, click the Di splay Graphic Brow ser icon. Your HMI's attribute/tag browser
appears.
2. Select the graphic, and then click OK. The graphic is added to the script editor.
To select an automation object as the owning object
1. On the script editor, click the Di splay Automation Object Brow ser icon. Your HMI's attribut e/tag
browser appears.
2. Select the automation object, and then click OK. The automation object is added to the script editor.

356
Working with the Show/Hide Graphics Script Functions Creating and Managing Industrial Graphics User Guide

Show/Hide Graphic Script Functions Guidelines

The following sections provide script tips and guidelines, followed by scripting scenarios:
 Using the Show/ Hide Script Parameters and Properties on page 357
 Show/ Hide Graphic Script Tips and Examples on page 363
For information about script syntax and parameters along with basic script examples, see the Application
Server Scripting Guide.

Using the Show/Hide Script Parameters and Properties

The following sections provide guidelines for using the Show/Hide Graphic script parameters:
 Using the Identity Property in the ShowGraphic() Function on page 357
 Height and Width Aspect Ratio on page 357
 Incompatible GraphicInfo Properties on page 358

Using the Identity Property in the ShowGraphic() Function

The Identity must be unique across the InTouch application. If you want to add the HideGraphic script
function, you must use the same Identity as a parameter that you have used in the ShowGraphic script.
The HideSelf script function does not have any parameter.
The following table lists the various scenarios where you can use the Identity property with the
ShowGraphic () function and their results in run time:

Scenario Result in Run Time

You have ex ecuted two ShowGraphic The first pop-up window is closed and a new
scripts for the same graphic using the same one opens, displaying the same graphic.
Identity.

You have ex ecuted two ShowGraphic The first pop-up window displaying the first
scripts for two different graphics, but using graphic is closed and a new one opens,
the same Identity. displaying the second graphic.

You have ex ecuted two ShowGraphic Two pop-up windows are opened, displaying
scripts for the same graphic, but using the same graphic.
different Identity properties.

You have ex ecuted two ShowGraphic Two pop-up windows are opened, displaying
scripts for two different graphics with the two different graphics.
different Identity properties.

During configuration, the system validat es only the syntax of the script. Validation of graphic and Identity
existence occurs only at run time.

Height and Width Aspect Ratio

In order to maintain aspect ratio, you can specify either the height or width of a pop-up window using the
CustomizedWidt hHeight property. The system calculates the unspecified property based on the
graphic's aspect ratio.
If a pop-up window has a title bar, the system adjusts the size of the pop -up window so that the graphic
retains its aspect ratio.

357
Creating and Managing Industrial Graphics User Guide Working with the Show/Hide Graphics Script Functions

Example 1: Graphic is 100 x 100. If you specify height = 200, then the height of the content = 200 - 26
(title bar height) = 174, and width of the content = 174. The same algorithm is applied to adjust the width,
based on the adjusted height.
Example 2: Graphic is 100 x 100. If you specify width = 200, then the width of the content = 200, and
height of the content = 200. The same algorit hm is applied to adjust the width, based on the adjusted
height. The height of the container = 200 (height of the content) + 26 (height of the title bar) = 226.
If the pop-up window has a title bar, then the graphic is 100 x 100. If height = 200, then the height of the
content = 200, and width of the content = 200. The same algorithm is applied to adjust the widt h, based
on the adjusted height.
If the script contains the StretchWindowToScreenHeight property, but does not cont ain the Width
property, the system adjusts the width of the pop-up window.
If the script contains the StretchWindowToScreenWidth property, but does not contain the Height
property, the system adjusts the height of the pop -up window.

Incompatible GraphicInfo Properties

When you call ShowGraphic wit h an incompatible combination of GraphicInfo properties, you will see the
following warning message at run time:
ShowGraphic <Identity Name>. <Graphic name>.<script name> conflicting
parameters used in script: <Parameter1>, <Parameter2>
For example, the following incompatible properties result in a window with both Width and Height equal
to 0:
[Link] =
[Link];
[Link] = [Link];
In this example, a WindowRelativePosition of WindowXY is incompatible with a size RelativeTo of
Desktop.
The following table shows incompatible property combinations. Shaded cells indicate incompatible
GraphicInfo property combinations in addition to those s pecified in the Incompatible Properties column.

Window Relative Size: Incompatible

Posi tion Relative To Properties Note s

Desktop Graphic X
Y
Width
Height

Desktop Desktop X
Y
Width
Height

Desktop CustomizedWidt hHei X

ght
Y
ScalePercentage

358
Working with the Show/Hide Graphics Script Functions Creating and Managing Industrial Graphics User Guide

Window Relative Size: Incompatible

Posi tion Relative To Properties Note s

Window Graphic X
Y
Width
Height

Window Desktop X RelativeTo should

be Window
Y
Width
Height

Window CustomizedWidt hHei X

ght
Y
ScalePercentage

ClientArea Graphic X
Y
Width
Height

ClientArea Desktop X RelativeTo should

be ClientArea
Y
Width
Height

ClientArea CustomizedWidt hHei X

ght
Y
ScalePercentage

ParentGraphic Graphic X
Y
Width
Height

ParentGraphic Desktop X RelativeTo should

be ParentGraphic
Y
Width
Height

359
Creating and Managing Industrial Graphics User Guide Working with the Show/Hide Graphics Script Functions

Window Relative Size: Incompatible

Posi tion Relative To Properties Note s

ParentGraphic CustomizedWidt hHei X

ght
Y
ScalePercentage

ParentElement Graphic X
Y
Width
Height
ParentElement Desktop X
Y
Width
Height
ParentElement CustomizedWidt hHei X
ght
Y
ScalePercentage
Mouse Graphic X
Y
Width
Height
StretchWindow
ToScreenWidth
StretchWindow
ToScreenHeight

Mouse Desktop X RelativeTo should

be Desktop
Y
Width
Height
StretchWindow
ToScreenWidth
StretchWindow
ToScreenHeight

360
Working with the Show/Hide Graphics Script Functions Creating and Managing Industrial Graphics User Guide

Window Relative Size: Incompatible

Posi tion Relative To Properties Note s

Mouse CustomizedWidt hHei X

ght
Y
Width
Height
StretchWindow
ToScreenWidth
StretchWindow
ToScreenHeight
DesktopXY Graphic Width
Height
StretchWindow
ToScreenWidth
StretchWindow
ToScreenHeight

DesktopXY Desktop Width Conflicting

WindowRelative
Height
Position and
StretchWindow RelativeTo
combination
ToScreenWidth
StretchWindow
ToScreenHeight
DesktopXY CustomizedWidt hHei ScalePercentage
ght
StretchWindow
ToScreenWidth
StretchWindow
ToScreenHeight
WindowXY Graphic Width
Height
StretchWindow
ToScreenWidth
StretchWindow
ToScreenHeight
WindowXY Desktop Width Conflicting
WindowRelative
Height
Position and
StretchWindow RelativeTo
ToScreenWidth combination
StretchWindow
ToScreenHeight

361
Creating and Managing Industrial Graphics User Guide Working with the Show/Hide Graphics Script Functions

Window Relative Size: Incompatible

Posi tion Relative To Properties Note s

WindowXY CustomizedWidt hHei ScalePercentage

ght
StretchWindow
ToScreenWidth
StretchWindow
ToScreenHeight

ClientAreaXY Graphic Width

Height
StretchWindow
ToScreenWidth
StretchWindow
ToScreenHeight
ClientAreaXY Desktop Width Conflicting
WindowRelative
Height
Position and
StretchWindow RelativeTo
ToScreenWidth combination
StretchWindow
ToScreenHeight
ClientAreaXY CustomizedWidt hHei ScalePercentage
ght
StretchWindow
ToScreenWidth
StretchWindow
ToScreenHeight

Run Time Behavior of the Show/Hide Graphic Functions

The Show/Hide Graphic script functions exhibit the following behavior:
 The graphic, configured wit h the ShowGraphic script function, behaves like a ShowSymbol
animation pop-up window, rather than a typical HMI pop-up window.
 You can configure a graphic with both the ShowA nimation and ShowGraphic scripts together. If you
execute the two scripts at run time, two pop-up windows open, displaying the same or different
symbols. The two pop-up windows are independent of each other.
 You can open, close, and manage the graphic from across symbols and across the entire HMI
application.
 Unlike ShowSymbol animation, there is no parent/child relationship between the window that
launched the graphic and the graphic launc hed by the ShowGraphic() script function. For more
information, see Closing a Graphic on page 363.
 You cannot us e the Close Window dialog box or similar dialog provided by your HMI software at run
time to close the pop-up windows displayed by the ShowGraphic script function. For more
information, see Closing a Graphic on page 363.

362
Working with the Show/Hide Graphics Script Functions Creating and Managing Industrial Graphics User Guide

 Any graphic displayed by ShowGraphic script function or ShowSymbol animation always remains in
front of HMI application run-time windows, except pop-up windows that might be supported by your
HMI software. Even if you click a run-time HMI window, the window remains behind these graphics.
 If your HMI software supports memory caching, enabling in-memory graphics caching in HMI
run-time memory properties will keep ShowGraphic and ShowSymbol animation popup symbols
cached in mem ory. The system tracks the order in which graphics are closed in order to determine
their age. If a user-defined in-memory limit is exceeded, the system automatically removes the oldest
popup symbols in the in-memory graphics cache except those defined in high-priority windows. If
you display a graphic with the ShowGraphic script function or with ShowSymbol animation, the HMI
run time will perform a memory health check if supported by your HMI soft ware.

Behavior of ShowGraphic Windows with the Same Identity

ShowGraphic pop-up windows attempting to open a pop -up window with the same Identity exhibit the
following behavior with the predefined scripts OnHide, OnShow, and WhileShowing:
 A ShowGraphic function wit hin an OnShow script will be blocked if a ShowGraphic pop-up window
with the same Identity is already displayed.
 A ShowGraphic function wit hin an WhileShowing script will be blocked if a ShowGraphic pop-up
window with the same Identity is already displayed.
 A ShowGraphic function wit hin an OnHide script will be blocked if a ShowGraphic pop-up window
with the same Identity is already displayed.
No error or warning messages will appear in the logger when script execution is blocked as described.
With the Graphic Cache memory option enabled, calling ShowGraphic pop-up windows with same
identity name, if the graphic is modal to the modal graphic behind it, calling the ShowGraphic function
cannot change this symbol to be modeless to the current modal graphic. For more information, see
Work ing with Modal Windows on page 365.

Closing a Graphic
You can close a graphic, displayed using the ShowGraphic script function, by executing the
HideGraphic() or HideS elf() script functions, by clicking the Close Window button of the graphic pop-up
window if configured, or by closing your HMI software run time display. You cannot close the graphic by
closing the HMI configuration window or the graphic that launched the graphic.
Windows opened by the ShowGraphic() script function or ShowSymbol animation are loaded
dynamically and are not exposed at run time. You cannot close these windows using your HMI software
run-time Close Window dialog box.

Show/Hide Graphic Script Tips and Examples

The Show/Hide Graphic script functions allow for a wide range of scripted uses. The following sections
provide in-context tips and examples of script applications:
 Using Predefined and Named Scripts on page 364
 Work ing with Modal Windows on page 365
 Using Hierarchical References and Containment Relationships on page 366
 Scripting the Owning Object on page 367
 Scripting Multiple Symbols on page 372

363
Creating and Managing Industrial Graphics User Guide Working with the Show/Hide Graphics Script Functions

Using Predefined and Named Scripts

You can use the Show/ Hide Graphic script functions inside cont ainer scripts. Container scripts refers to
predefined scripts and named scripts. Predefined scripts include OnShow, WhileShowing, and OnHide.
Named scripts include WhileTrue, WhileFalse, OnTrue, OnFalse, and DataChange. For more
information, see Predefined and Named Scripts on page 297, Configuring the Predefined Scripts of a
Graphic on page 301, and Adding Named Scripts to a Graphic on page 303.

Important: Although you can use the Show/Hide Graphic script functions inside container scripts, you
cannot use ShowGraphic() in WhileTrue or periodic scripts such as WhileShowing.

Container Script Scenario

The following scenario illustrates the use of Show/ Hide Graphic script functions inside a container script:
You want to automatically show a graphic upon closing the graphic already showing. This entails
creating a ShowGraphic script for one graphic, then creating a ShowGraphic script for a second graphic
inside an OnHide predefined script.
To execute the container script scenario
1. Create a graphic, such as a pump, called "symbol01" and another "symbol02".
2. Add a button named "Close" to symbol01 on the Industrial Graphic Editor canvas, and add an action
script to the button:
HideSelf();
3. Add a button named "Show Pump" in symbol02 on the Industrial Graphic Editor canvas and add an
action script to show the graphic, as in the following script example:
Dim graphicInfo as [Link];
[Link] = "showpump_script001";
[Link] = "symbol01";
[Link] = [Link];
[Link] =
[Link];
[Link] = [Link];
ShowGraphic( graphicInfo);
4. Add an OnHide script in symbol01. In the script editor, add a ShowGraphic function for t he second
graphic, symbol02, as in the following script example:
Dim graphicInfo as [Link];
[Link] = "showpump_script001";
[Link] = "symbol02";
[Link] = [Link];
[Link] =
[Link];
[Link] = [Link];
ShowGraphic( graphicInfo);
The ShowGraphic for your second graphic is now configured inside the predefined (container) script .
5. Go to run time and open the window containing the "show pump" button.

364
Working with the Show/Hide Graphics Script Functions Creating and Managing Industrial Graphics User Guide

a. Click the "show pump" button. Symbol01 displays.

b. Click the "close button" on symbol01. Symbol02 now displays in place of symbol01.
In this scenario, you configure and demonstrate a ShowGraphic script inside a predefined script, and use
it to automatically display a second graphic upon closing the first.
By extension, you can configure more graphics the same way, accessing a sequence o f graphics at run
time with only one button occupying your display. You can use other container scripts, such as OnShow
and WhileS howing, as well as named scripts in the same manner.

Working with Modal Windows

If you have opened a modal pop-up window using the ShowGraphic() script function, the system cannot
execute the rest of the script. You must close the window to allow the system to execute the rest of the
script.
If you have opened multiple modal pop -up windows, you cannot click or close the modal window stacked
in the middle of the modal chain. The system will maintain the modal chain to allow pending or
unprocessed scripts to proc ess before the graphic can close. Attempts to close a window beneath a
modal window are blocked.
The following examples 1 and 2 illustrate modal window behavior using the ShowGraphic() function.
The following example 3 illustrates a specific scenario of working with modal windows with the same
identity name using the ShowGraphic() function while the Graphic Cache memory feat ure is enabled.
Example 1: Modeless Symbol1 (S1) opens modeless Symbol2 (S 2) using a ShowGraphic() script
function. Modeless graphic S2 opens modal Symbol3 (S3) using a ShowGraphic script function. In this
scenario:
 S2 cannot complete its script and close (HideSelf) until S3 closes.
 You cannot close S2 using the close window button.
 You cannot close S2 using a HideGraphic (S2) script function from another window until the modal
graphic S3 closes and the S2 script completes.
 You cannot close S2 using a ShowGraphic (S2) script function with the same Identity until the modal
graphic S3 closes and the S2 script completes.
 You can close S1 using a HideGraphic (S1) script function from another window because the
subsequent graphic S2 is modeless.
Example 2: Modeless Symbol1 (S1) opens modal Symbol2 (S2) using a ShowGraphic() script function.
Modal graphic S2 opens modal Symbol3 (S3) using a ShowGraphic script function. In this scenario:
 S1 cannot complete its script and close (HideSelf) until S2 closes.
 S2 cannot complete its script and close (HideSelf) until S3 closes.
 You cannot close S1 or S2 using the close window buttons.
 You cannot close S2 using a HideGraphic (S2) script function from another window until the modal
graphic S3 closes.
 You cannot close S1 using a HideGraphic (S1) script function from another window until the modal
graphic S2 closes.
 You cannot close S2 using a ShowGraphic (S2) script function with the same Identity until the modal
graphic S3 closes.
 You cannot close S1 using a ShowGraphic (S1) script function with the same Identity until the modal
graphic S2 closes.

365
Creating and Managing Industrial Graphics User Guide Working with the Show/Hide Graphics Script Functions

 You can close S3 using a HideGraphic script function from another window, or by using the close
window button if enabled.

Note: Although you can close a graphic by opening another graphic with the same Identity, effectively
replacing the original graphic, we recommend that you do not use the same Identity as a graphic opened
with ShowGraphic in a modal dialog.

Example 3: With the Graphic Cache memory feature enabled, a ShowSymbol (SS ) has a button to show
graphic Symbol1 (S1) (modal), and another button to show graphic Symbol1 (S 1) (modeless). S1 is
configured to open Symbol2 (S 2) with the ShowGraphic() function. In this scenario:
 Click show graphic button S1(modeless) to open pop -up S1. Click the ShowGraphic() button in S1 to
open pop-up S2 with title "Graphic01".
 User can enter input into S2.
 With the pop-up open, click the show graphic button S1(modal). Pop-up S1 will open. Click the
ShowGraphic () button in S1. Pop-up S2 will open with the title "Graphic01". The already open
Graphic01 pop-up window will be replaced.
 With the Graphic Cache memory feature enabled, S1 cannot change from being modal to SS to
being modeless to SS.
 User cannot ent er input to S2.
 Alternatively, close S2 opened from modeless S1, then open modal S1, and click the ShowGrap hic()
button to open S2, "Graphic01".
 User can enter input to S2.
For more information about example 3, see Behavior of ShowGraphic Windows with the Same Identity
on page 363.

Using Hierarchical References and Containment Relationships

Placing one or more Aut omationObjects within another AutomationObject results in a collection of
AutomationObjects organized in a hierarchy that matches the application model, allows for better naming
and manipulation, and for more precise scripting.
Using hierarchical references in scripts makes use of the fully qualified name of a cont ained object,
including the container object's TagName.
The following table provides generic examples of using hierarchical references and containment
relationships in scripts.

Without Hierarchical References With Hierarchical References

GraphicName = GraphicName =
"[Link] [Link] +
[Link] ".ContainedObjectHierachy
Name"; [Link]";
GraphicName = [Link] +
".ContainedObjectHierarchy
[Link]";

GraphicName = GraphicName =
"[Link]"; [Link] +
".SymbolName";
GraphicName = GraphicName =
"[Link]"; [Link] +

366
Working with the Show/Hide Graphics Script Functions Creating and Managing Industrial Graphics User Guide

Without Hierarchical References With Hierarchical References

".SymbolName";

GraphicName = GraphicName = [Link]

"[Link]"; + ".SymbolName";

An example of a Hierarc hicalName is a valve object with a contained name of "Inlet" within a reactor
named "Reactor1". The valve object would have "Reactor1. Inlet" as the HierarchicalName.
The valve object would also have a unique TagName distinct from its HierarchicalName, such as
"Valve101".
Another example of a HierarchicalName is a level transmitter with the TagName "TIC101" placed within
a container object called "Reactor1" and given the name" Level" within that container. This results in the
HierarchicalName "[Link]".

Scripting the Owning Object

The owning object in a ShowGraphic script function resolves only relative references. Any absolute
reference is not affected by the owning object. The owning object is independent of the graphic definition.
The relative reference is resolved by the object that hosts the script. For example, where Graphic Name =
"me.S1" or "Obj1.S1", and OwningObject = "Obj2", the owning object resolves only the relative reference
in the graphic S1.
Consider a scenario where there are two automation object instances, "Reactor_001" and
"Reactor_002" in a user galaxy. Both instances have four user-defined attributes, int1, int2, real1 and
real2, and the graphic S1.
The graphic (Reactor_001.S1) has the follo wing UDA references:
 Me.int1 (relative reference)
 Me.real1 (relative reference)
 Reactor_001.int 2 (absolute reference)
 Reactor_001. real2 (absolute reference)
If you configure Reactor_001.S1 with the ShowGraphic script ("me.S1" or "Reactor_001.S1",
OwningObject = "Reactor_002") and ex ecute the script at run time, the system displays Reactor_001.S1,
though the relative reference within this graphic points to Reator_002 object.
In such a case:
 The graphic always opens from only the host automation object inst ance, here "Reactor_001".
 The GraphicName property can be set to relative reference, absolute reference or the Graphic
Toolbox graphic name. If a relative reference is used in the GraphicName property, then the graphic
will always open from only the host automation object instance, here "Reactor_001". If an absolute
reference or Graphic Toolbox graphic name is used in the GraphicName property such as
"Reactor_001.S1" or "S1", then the system will search for such graphic by its name.
 The relative references for Me.int1, Me.real1 is redirected to Reactor_002.
 The absolute references for Reactor_001.int 2 and Reactor_001.real2 come from Reactor_001 only,
and are not redirected to Reactor_002.
Relative references (such as me.int1) used in custom property override on embedded symbols would
resolve to the owning object of the embedded graphic. Whereas the relative references used in container
scripts would resolve to the owning object of the graphic where the script is configured.

367
Creating and Managing Industrial Graphics User Guide Working with the Show/Hide Graphics Script Functions

The following examples illustrate a couple of scenarios where you may need to use the ShowGraphic
function to work with owning objects.

Owning Object Scenario 1

You need to monitor several similar field devices at run time, but do not want all the object windows open
at the same time, as this consumes system resources and clutters the display. You can use
ShowGraphic () with the OwningObject feature to rapidly switch back and forth between displays using a
single interface element — a pushbutton configured with ShowGraphic() script function.
You can use the following script for the purpose:
Dim graphicInfo as [Link];
[Link] = "Overview_" + Cp1;
[Link] = "Reactor_001.Overview";
[Link] = cp1;
ShowGraphic( graphicInfo );
Where cp1 = "Reactor_001", "Reactor_002", or "Reactor_003". Object Reactor_001, Reactor_002, and
Reactor_003 derive from the same template $Reactor.
At run time, click the ShowGraphicOverview pushbutton to open the graphic. You can change
Reactor_001 to Reactor_002 to switch between the two graphics, illustrated in the following sequenc e.

368
Working with the Show/Hide Graphics Script Functions Creating and Managing Industrial Graphics User Guide

Displaying "Reactor_001":

Switched to display "Reactor_002" using the configured button:

369
Creating and Managing Industrial Graphics User Guide Working with the Show/Hide Graphics Script Functions

Owning Object Scenario 2

You need to monitor and mai ntain connection to several different dat a acquisition servers, but do not
want to keep all server property windows open at all times. You can use ShowGraphic() with the
OwningObject feature to switch back and forth bet ween server status displays using a s ingle interface
element (pus hbutton).
You can use the following script for the purpose:
Dim graphicInfo as [Link];
[Link] = "Display_" + cp2;
[Link] = "DDESL";
[Link] = cp2;
ShowGraphic( graphicInfo );
Where cp2 = "DDESLTest_001", "DDESLTest_002", and DDESL is the Graphic Toolbox graphic.
DDESLTest_001 DDESLTest_001 are the automation object instances.
At run time, click the ShowGraphicDDESL pushbutton to open the graphic. You can change
DDESLTe st_001 to DDESLTe st_002 to switch bet ween the two graphics, illustrated in the following
sequence.

370
Working with the Show/Hide Graphics Script Functions Creating and Managing Industrial Graphics User Guide

Displaying server DDESL Test_001:

Switched to display DDESL Test_002 using the configured button:

Assigning Custom Property Values of a Graphic

Custom properties of a graphic can be set to values when a graphic is shown by ShowGraphic ()
containing the CustomProperties property.

371
Creating and Managing Industrial Graphics User Guide Working with the Show/Hide Graphics Script Functions

The parameters of CustomProperties are the c ustom property name, assigned value, and the Is Constant
Boolean flag that indicates if the custom property value is a constant. Any parameter that has default
value in the GraphicInfo is optional. If no input value is specified for these parameters, the default values
are used at run time. Any parameter except the Enum data type can be a constant, reference, or
expression.
These parameters are specified as an array of values using the CustomPropertyValuePair[] array. The
array index starts at 1.
Use a script similar to the following t o assign values to a symbol’s custom properties. In this example, "i1"
is string Identity and the graphic "S1" contains custom properties CP 1 and CP2. When S 1 is shown
during run time, CP1 is assigned a constant value of 20 and CP 2 is assigned the current value of the
reference [Link].
Dim graphicInfo as [Link];
Dim cpValues [2] as [Link];
cpValues[1] = new
[Link]("CP1", 20, true);
cpValues[2] = new
[Link]("CP2",
"[Link]", false);
[Link] = "i1";
[Link] = "S1";
[Link] = "UserDefined_001";
[Link] = "Graphic01";
[Link] = false;
[Link]=cpValues;
ShowGraphic( graphicInfo );

Scripting Multiple Symbols

You can use the ShowGraphic script function to launch multiple windows from the same interface
element, like a pushbutton. The following examples illustrate scenarios, where you may need to use the
Show Graphic function to work with multiple symbols.

Multiple Symbols Scenario 1

You need to open several graphics using the same int erface element, such as a pushbutton.
You can use the following script for the purpose:
Dim graphicInfo as [Link];
[Link] = "i1";
[Link] = "AnalogHiLo";
[Link] = true;
[Link] = "Analog Meter 1";
[Link] = true;
[Link] = [Link];
[Link] = [Link];
ShowGraphic( graphicInfo );

[Link] = "i2";
[Link] = "AnalogHiLo";
[Link] = true;
[Link] = "Analog Meter 2";
[Link] = true;
[Link] = [Link];
[Link] = [Link];
ShowGraphic( graphicInfo );

[Link] = "i3";

372
Working with the Show/Hide Graphics Script Functions Creating and Managing Industrial Graphics User Guide

[Link] = "AnalogHiLo";
[Link] = true;
[Link] = "Analog Meter 3";
[Link] = true;
[Link] = [Link];
[Link] = [Link];
ShowGraphic( graphicInfo );

Note: If you want to open multiple pop-up windows, only the last pop-up window can be modal. All other
pop-up windows should be modeless. If any other pop-up window is modal, then the script will be
blocked after the first modal pop-up window is opened. For more information, see Work ing with Modal
Windows on page 365.

At run time, click the ShowGraphicMultipleSymbols pushbutton to open all the symbols:

Multiple Symbols Scenario 2

You want to open several graphics using the same interface element, such as a pushbutton. You also
want to select the graphic position and the graphic name using int erface elements, like combo boxes.
You can configure a combo box on the Edit Animations page. The combo box values can be used as
index values for the window location paramet er. At run time, you can dynamically select the values for
the window location using this combo box.
You can use the following script for the purpose:

dim popup as [Link];

dim MyInt as Integer;
[Link] = [Link];
IF [Link] == 2 THEN
[Link] = "Top Left";
[Link] = "Top Left Corner";
ENDIF;
IF [Link] == 4 THEN
[Link] = "TopRight";
[Link] = "Top Right Corner";
ENDIF;
IF [Link] == 9 THEN
[Link] = "BottomLeft";
[Link] = "Bottom Left Corner";
ENDIF;
IF [Link] == 11 THEN

373
Creating and Managing Industrial Graphics User Guide Working with the Show/Hide Graphics Script Functions

[Link] "BottomRight";
[Link] = "Bottom Right Corner";
ENDIF;
[Link] = [Link];
[Link] = 300;
[Link] = 300;
MyInt = StringToIntg( [Link] );
[Link] = MyInt;
ShowGraphic( popup );

Note: In the script, [Link] = MyInt substitutes the explicit reference with the integer
index. SelectedSymbol is the combo box for dynamically selecting the graphic at run time and
SelectedPosition is the combo box for dy namically selecting the window location.

At run time, click the ShowGraphic pushbutton to open all the symbols. You can select the graphic in the
Select a graphic list. You can also select the location of the graphic in the Select a position list.

Multiple Graphics Scenario 3

You want the Graphics in relative position with the graphic.
You can use the following script for the purpose:
Dim graphicInfo as [Link];
[Link] = "i1";
[Link] = "S1";
[Link]= [Link];
ShowGraphic(graphicInfo);

Multiple Graphics Scenario 4

You want the graphic in relative position with the window.
You can use the following script for the purpose:
Dim graphicInfo as [Link];
[Link] = "i1";
[Link] = "S1";
[Link]= [Link];
ShowGraphic(graphicInfo);

374
 Creating and Managing Industrial Graphics User Guide

C HAPTER 17
Working with the Show/Hide Content Script
Functions

About the ShowContent() Function

Note: The Show/Hide Content() script functions are for use with InTouch OMI ViewA pps only. These
functions cannot be used with InTouch HMI applications.

The Show/Hide Cont ent() script functions let you write scripts for In Touch OMI lay outs, Industrial
Graphics, Application Server objects to display a graphic, layout, or external content item (for example, a
web page, video, or text file) inside a specific pane wit hin an InTouch OMI ViewApp. The Show/Hide
Cont ent() script functions are complementary to the Show/ Hide Graphic script functions and the
Show/ Hide Symbol animation feat ure.
 Use the Show/ Hide Graphic script functions to load or hide a graphic in a modal or modeless popup,
in an InTouch HMI application or an InTouch OMI ViewApp.
 Use the Show/Hide Content script functions to load or hide a graphic, layout, or an external content
item into a pane in an InTouch OMI ViewApp.
The Show/Hide Cont ent functions let you specify:
 The specific content to show or hide in a pane.
 The pane in which to show or hide the content.
 The screen that contains a pane in which to show or hide the content.
 The type of content you want to show or hide.
 Any property overrides to apply when showing the content.
 Whether to confine the search for a pane in which to show or hide the content to the source screen,
the primary screen, or to search all screens, and whether to search in the top level layout or a nested
(embedded) layout.

Configuring the Show/Hide Content Script Functions

Use the Show/Hide Content functions in layout scripts, Industrial Graphic scripts, or Application Server
object scripts to populate a pane wit h a specific graphic, layout, or external content object in an InTouch
OMI ViewApp. You can call the same script multiple times to refresh content, or to show the cont ent in a
different pane. If you choose to display the same content in different panes, you can alter its settings
through the P arameterOverride parameter.
If ShowContent calls the same content item while it is open, ShowContent searches for open content
items that match the specified parameters in the call. Any matching items are closed and then reopened.
If the content has changed, the latest changes are shown when the content is redisplayed.

Important: The Show/HideContent functions can be used in a graphic or layout action script, named
script and pre-defined script. Although the system allows you to include it in a server script, such as Start
Up, On Scan, Off Scan, Shut Down and Execute, you will not be able to execute the function at run time.

375
Creating and Managing Industrial Graphics User Guide Working with the Show/Hide Content Script Functions

To include a script that contains the Show/Hide Content functions within a script
1. Open the ArchestrA IDE.
2. Open a new or existing graphic or layout.
 To add a layout script, click the Script tab.
 To add a graphic script, create a graphic, and then double-click it to open the Edit Animations
page, then open the script editor and click the Di splay Script Function Browser icon. The
Script Function Browser appears. IClick the ShowContent() script function in the Graphic
Client list, and then click OK. The following code snippet is added:
Dim contentInfo as [Link];
[Link] = "<ContentName>";
ShowContent( contentInfo );

Note: You can click Help to view the Help after you have selected any Graphic Client script function.

3. Modify the script as needed. ContentInfo is a predefined structure that contains data members listed
below. Content is the only required parameter. For more information about the Show/Hide Content,
see the AVEVA Scripting Guide.
 Content: name of the content (graphic, layout, or external content object) to be loaded into the
pane. Content is a string and is the only required parameter.
 Name: name property of the content. This is automatically created when the content is added to
the layout.
 ScreenName: name of the screen that contains the pane in which to load the content.
ScreenName is a string.
 SearchScope: when ScreenName is not specified, SearchScope determines whic h screens
within the Screen Profile are searched for a pane in which to place the content. SearchScope is
an enum that can be set to one of the following values:
– Self: This is the default. Searches for matching content within the panes of the layout from
which the ShowContent call was made. Self will search from a nested (embedded) layout, if
the call was made from that layout. The remaining S earc hScopes search ONLY the top level
if there are nested layouts.
– AllScreens: Searches the top level layout on all screens, starting with the source screen,
then the primary screen, and then any remaining screens in alphabetical order. The search
stops as soon as a matching pane is found. If a matching pane is not found, Content is
placed in the default pane of the source screen.
– SourceScreen: Searches the top level layout only in the source screen (the screen that
made the ShowContent call).
– PrimaryScreen: Searches the top level lay out only in the primary screen, as designated in
the Screen Profile.
 PaneName: name of the pane in which to load the content. PaneName is a string.
 ContentType: specifies the type of content to be loaded. The Content Type can be matched
against the Cont ent Type designation that was set for a pane. Content Type is a string.
 PropertyOverrides: specifies overrides for custom properties. This parameter is only valid if a
graphic is the designated content. It is not valid if a layout has been designated.
PropertyOverrides is a ValuePair structure.
 OwningObject: specifies an automation object as an owning object.
Example
Dim contentInfo as [Link];

376
Working with the Show/Hide Content Script Functions Creating and Managing Industrial Graphics User Guide

Dim cpValues [2] as [Link];

cpValues[1] = new [Link]("CP1", "20", true);
cpValues[2] = new [Link]("CP2", "[Link]",
false);

[Link] = "S1";
[Link] = "Overview";
[Link] = "Enterprise";
[Link] = "Pane1";
[Link] = "Wall";
[Link] = cpValues;

[Link] = [Link];

ShowContent ( contentInfo );

Best Pane Match Algorithm

When some or all of the optional parameters are not provided or are invalid, ShowContent follows a set of
rules to determine in which pane the specified content should placed. In addition, the SearchScope
parameter can be used to limit which screens will be searched for a pane.
 If S earchScope is set to SourceScreen, only the screen that made the ShowContent call is searched.
If no matching pane is found, Cont ent is loaded into the default pane of the Sourc eScreen.
 If SearchScope is set to PrimaryScreen, only the primary screen in the Screen Profile is searched. If
no matching pane is found, Content is loaded into the default pane of the PrimaryScreen.
 If SearchScope is set to AllScreens, every screen contained in the Screen Profile can be searched.
This is the default behavior. Searches progress as follows and stop at the first match:
o SourceScreen
o PrimaryScreen
o Any additional screens are searched in alphabetical order.
o If no matching pane is found, Cont ent is loaded into the default pane of the Sourc eScree n.
 If SearchScope and ScreenName are not specified and ShowContent is called from an embedded
layout:
o ShowContent searches locally for a matching pane within the embedded layout.
 If SearchScope or ScreenName is specified and ShowContent is called from an embedded lay out:
o ShowContent searches for a pane globally and uses the SearchScope and/or ScreenName
settings to determine which screens within the Screen Profile associated wit h the ViewA pp will
be searc hed.
Order of Precedence for Determining Content Placement
Cont ent is the only required parameter. Three values are also checked according to the following order
of precedenc e to determine placement of the content:
1. PaneName: optional parameter
2. Cont ent Type: optional paramet er
3. Type of content: this is part of the Cont ent definition and is not specified in the ShowContent call.

377
Creating and Managing Industrial Graphics User Guide Working with the Show/Hide Content Script Functions

Search Steps (SearchScope not specified or set to AllScreens)

Scenario 1: PaneName Assumes SearchScope not set or set to AllScreens. Otherwise,
search is confined to the named screen.
PaneName is specified
1. Search SourceScreen for PaneName.
2. If not found, search PrimaryScreen for PaneName.
3. If not found, search any additional screens in alphabetical
order for PaneName.
The search stops as soon as a matching PaneName is found.
Scenario 2: ContentType Assumes SearchScope not set or set to AllScreens. Otherwise,
search is confined to the named screen.
PaneName is not specified OR
matching PaneName not found 1. Search SourceScreen for a pane that supports the
AND Content Type is specified Cont ent Type.
2. If not found, search PrimaryScreen for pane that supports
the Content Type.
3. If not found, search any additional screens in alphabetical
order for a pane that supports the Content Type.
The search stops as soon as a pane that supports the
Cont ent Type is found.
Scenario 3: Type of content Assumes SearchScope not set or set to AllScreens. Otherwise,
search is confined to the named screen.
PaneName is not specified OR
matching PaneName not found 1. E valuate type of content for the specified Content.
AND Content Type not
2. Search SourceScreen for a pane that supports the type of
specified or not found
content.
3. If not found, search PrimaryScreen for pane that supports
the type of content.
4. If not found, search any additional screens in alphabetical
order for a pane that supports the type of content.
The search stops as soon as a pane that supports the type of
content is found.
Scenario 4: No matching When SearchScope is not set or set to AllScreens:
pane If no match is found using PaneName, Content Type, or type of
content, Content is loaded into the default pane of the
No matches found from
SourceScreen.
previous searches (scenarios 1
through 3) When SearchScope is set to SourceScreen:
Only the SourceScreen is searched and if no match is found,
Cont ent is loaded into the default pane of the SourceScreen.
When SearchScope is set to PrimaryScreen:
Only the PrimaryScreen is searched, and if no match is found,
Cont ent is loaded into the default pane of the PrimaryScreen.

378
Working with the Show/Hide Content Script Functions Creating and Managing Industrial Graphics User Guide

Content Display Rules

The way content is displayed differs slightly between panes that are configured as single content panes
versus those configured as multi-content panes. The differences are described below. Pane
configuration (single or multi -content) is set by opening the Presentation Style selector at the top left of
the pane in the Layout Editor. See Set the Presentation Style of a Pane in the System Platform Help for
additional information about single and multiple content modes.

If t here are multiple S howContent() calls, but with different parameters, each ShowContent() call opens a
different pane or tab. The content in each pane or tab is configured with the parameters that are specified
in the call.
Content Di splay Rule s – Single Content Pane
If the pane already contains content, the existing content is closed and the content specified by
ShowContent () then is loaded into the pane. This occurs even if the existing content is the same as the
specified content.
Content Di splay Rule s – Multi-Content or Tabbed Pane
For panes that are configured as multiple-content or tabbed panes,the exact behavior will depend on the
structure of the pane.
 If the specified Content is already open in the pane or a tab, the pane or tab remains open and the
existing Cont ent is replaced with a new instance of the same Content.
 If the pane or tab has been split (that is, contains child panes), or contains a nested layout, existing
panes and/or tabs remain open, and the specified content is loaded into a new tab or pane and the
focus is set to the new tab or pane.
o This is true as long as the number of tabs or child panes is less than t he maximum available. The
default setting allows up to 20 panes or tabs, but you can increase this to 50.
o If the maximum number of tabs or child panes has been reached, the pane that has been
updated last (oldest content) is closed and a new tab or pane is opened in its place.

379
 Creating and Managing Industrial Graphics User Guide

C HAPTER 18
Working with Symbol Wizards
Introduction
The Industrial Graphic Editor includes the Symbol Wizard Editor, which can be used to create reusable
configurable graphics called Symbol Wizards. For example, a single pump symbol can be created with
the Symbol Wizard Editor that includes different visual pump configurations based on the orientation of
inlet and outlet pipes. Another example of a Symbol Wizard is the Situational Awareness Library pump
graphic. Situational Awareness Library graphics are designed using the Symbol Wizard E ditor. However,
they are protected graphics and their design cannot be changed. But, you can select Wizard Options
from the Symbol Wizard Editor to select the configurations that are incorporated into each graphic’s
design.

Incorporating multiple configurations in a single graphic reduces the number of graphics needed to
develop an application.

Understanding the Symbol Wizard Editor

After enabling the Symbol Wizard Editor, the Industrial Graphic Editor window updates to show Symbol
Wizard Editor panes at the left of the window.
 Beneath the Tool s pane, separate tabbed panes show the graphic elements, custom properties, and
named scripts that belong to a graphic.

381
Creating and Managing Industrial Graphics User Guide Working with Symbol Wizards

 The tabbed Options pane shows a hierarc hical list of Choice Groups, Choices, and Options that
define graphic configurations.

The Options pane includes buttons to add, delete, and reorder Choice Groups, Choices, and
Options.
 The tabbed Layers view includes a list of defined graphic layers. Beneat h each layer, separate
folders contain the graphic’s elements, custom properties, and named scripts associated with the
layer. A graphic 's elements, custom properties, and named scripts are assigned to graphic layers by
dragging them to corresponding folders in the Layers view.

Understanding Choice Groups and Choices

The Symbol Wizard Editor Options pane includes buttons to create Choice Groups, Choices, and
Options.
 A Choice Group represents a unique property of a graphic and appears as the top level property
node in the Options view.
 A Choice represents a possible value or attribute of a Choice Group property. Choices are indented
beneath the associated Choice Group node in the Options view. Choices are mutually exclusive and
only one choice can be selected from a Choice Group for a single configuration of a graphic.
An item shown in the Options view list can be moved by selecting it, and then clicking the Up or
Down arrow. If no Choice is specified as the default value for a Choice Group, the first Choice added
to the Choice Group is always the default value.
In the example of an centrifugal pump graphic, one possible Choice Group is Orientation for the different
configurations of inlet and outlet pipes. The Left, Right, Bottom, and Top choices appear as the
associated Choice attributes of the Orientation Choice Group.

Understanding Symbol Wizard Layers

Symbol Wizard layers associate graphic elements, custom properties, and named scripts to a unique
graphic configuration defined by a rule. When the rule is True, the layer’s graphic elements, custom
properties, and named scripts are part of the Symbol Wizard’s confi guration.

382
Working with Symbol Wizards Creating and Managing Industrial Graphics User Guide

In the example of a centrifugal pump graphic, a rule determines the orientation of the pump’s inlet and
outlet pipes. When the rule for the Right configuration is True, the Right layer containing the inlet and
outlet pipes is part of the graphic’s configuration.

The blade housing does not belong to a lay er because it is common to all pum p graphic configurations.
Graphic elements of a graphic that do not belong to a layer appear in all graphic configurations. As a
result, the pump’s blade housing appears in the Left, Right, Top, and Bottom configurations of the pump
by default.
Likewise, adding graphic elements, custom properties, and named scripts to a layer without a rule results
in these elements appearing in all graphic configurations. Each layer must have a defined rule that
specifies a True condition when the set of graphic elements, custom properties, and named scripts are
part of a graphic configuration.
Associating graphic elements, named scripts, and custom properties to graphic layers involves working
with the Symbol Wizard Editor Layers pane shown to the left of the graphic canvas.

Defining Graphic Configuration Rules

A rule defines an expression that det ermines if a given choice or option and its associated graphic layer
is visible or hidden based on the evaluation of the rule to true or false.
Rules can consist of a single expression or compound expressions using Boolean keywords or operator
characters:

Boolean Keywords AND, OR, NOT

Operator Characters  Period (.)

A period concatenates a Choice Group to a Choice in a hierarchical
expression.
 Pipe (|)
A pipe evaluates to a Boolean OR.
 Ampersand (& )
An ampersand evaluates to a Boolean AND.
 Exclamation point (!)
An exclamation point evaluates to a Boolean NOT.
 Parentheses ( )
A compound expression enclosed within parentheses is evaluated before
other expressions in a rule

383
Creating and Managing Industrial Graphics User Guide Working with Symbol Wizards

Any other unlisted keywords or operator characters in a rule are treated as part of the references.
 Compound expressions that include a Boolean keyword must include blank spaces around the
keyword.
ConditionA OR ConditionB
 Compound expressions that include an operat or character that evaluates to a Boolean condition do
not require blank spaces.
ConditionA |ConditionB
 A property attribute must be referenced by its hierarchal Choice Group name.
Choic [Link]
 Rules cannot reference a Choice Group alone. Rule expressions must reference Choices within a
Choic e Group.
Choic [Link].
 When an Option is renamed, the name change is updated in all referenced rule expressions.
 An Option or a Choice can be deleted only if no graphics are associated with their default layers.

Examples of Graphic Configuration Rules

The following examples explain how rules specify the layers that belong to a Symbol Wizard
configuration.
 [Link]&Has Tach. True
When this rule is True, the Symbol Wizard’s configuration includes a layer containing a pair of pipes
with the inlet pipe orient ed to the left and a tachometer.
 [Link] AND Has Tach. True
This rule is the same as the preceding rule except that a Boolean keyword is used rather than an
operator character. Not e the blank spaces before and after the Boolean keyword in the rule.
 Orientation. Right& Has [Link]
When this rule is True, the Symbol Wizard’s configuration includes a layer containing a pair of pipes
with the inlet pipe orient ed to the right and a layer that does not include a tachometer.
 (Orientation. Top& Has Tach. True)|([Link]& Has Tach. True)
When this rule is True, the Symbol Wizard’s configuration includes two layers containing pipes with
inlet pipe oriented at the top or the bottom. Both pipe layers include a tachometer. The selected
option of the Orientation Wizard Option determines which pipe layer appears in the configuration.
For more practical examples of creating rules, see Symbol Wizard Tips and Examples on page 393.

Designing a Symbol Wizard

The process of creating and implementing a Symbol Wizard has two workflows:
 The first work flow, referred to as a desig ner workflow, uses the Symbol Wizard Editor to creat e
Symbol Wizards containing multiple configurations.
 The second workflow, referred to as a consumer workflow, embeds a Symbol Wizard and then
configures it for use in an HMI application.

384
Working with Symbol Wizards Creating and Managing Industrial Graphics User Guide

Creating Graphic Choice Groups, Choices, and Options

The following list summarizes the tasks that need to be completed in a designer workflow to creat e a
Symbol Wizard containing multiple configurations.
 Define a graphic’s Choice Groups, their Choices, and Options
 Assign rules to Choice Groups, Choices, and Options
 Associate graphic elements, custom properties, and named scripts to graphic layers
 Verify each graphic configuration with Symbol Wizard Preview
After planning the possible configurations for a graphic, Designers should know the properties and the
possible attributes associated with each configuration. Designers create Choice Groups, Choices, and
Options to define a graphic’s properties and attributes.

Important: Situational Awareness Library symbols have predefined Choice Groups, Choices, and
Options.

To create graphic choice groups, choices, and options

1. In the IDE, create a copy of a graphic in the Industrial Graphic Editor for which you want to create
multiple configurations.
You can also build an entirely unique symbol from scratch and create multiple configurations of it
with Symbol Wizard.
2. Check out and open the copied graphic in the Industrial Graphic Editor’s canvas drawing area.
3. Click the Symbol Wizard icon shown on the Industrial Graphic Editor menu bar.
You can also show Symbol Wizard by pressing Alt+W or selecting it as an option from the View
menu.
The Industrial Graphic Editor updates to s how the Symbol Wizard Editor’s tabbed panes at the left of
the window.
4. Click the Options tab.
5. Click Add Choice Group to create a Choice Group.
A Choice Group folder appears in the Options window.
6. Rename the Choice Group to assign an easily identifiable name of a property used in a graphic
configuration.
Creating a Choice Group automatically sets it to rename mode. You can also manually rename a
Choic e Group by right-clicking on the Choice Group and select Rename from the menu.
7. Repeat steps 5-6 to create as many Choice Groups as needed to define all properties of a graphics
that determine its configurations.
8. Select a Choice Group folder and click Add Choice to add a choice beneath the select Choice
Group.
9. Rename the Choice to assign an easily identifiable name of a property attribute used in a graphic
configuration.
10. Repeat steps 8-9 to assign all possible Choice attribut es to the Choic e Groups.
11. Click Add Option to add an Option, which appears in the window at the same hierarchical level as
Choic e Groups.
12. Right -click the Option and select Rename to assign a name.
13. Repeat steps 11-12 to create as many Options needed to define a graphic’s configurations.

385
Creating and Managing Industrial Graphics User Guide Working with Symbol Wizards

Assigning Graphic Configuration Rules

In a designer work flow, you can specify rules for a graphic's defined Choices and Options. Choice
Groups should not be included in graphic configuration rules.
These rules determine the graphic elements, custom properties, and scripts that belong to a graphic
configuration. For more information about rule syntax, see Defining Graphic Configuration Rules on page
383.
To define graphic configuration rules
1. Show the selected graphic in the Industrial Graphic Editor with the Symbol Wizard enabled.
2. Select a Choice from the Options view.
The Properties view updates to show Option Properties fields. The Name field shows the name of
the Choice you selected from the Options view. The Rule field is blank.
3. If necessary, enter a rule for the Choice.

Important: Not all Choices require rules. Specify only those rules necessary to create graphic
configurations. Choices without rules are always visible.

4. Repeat steps 2-3 to specify rules for the remaining Choices of the graphic.
5. Select an Option from the Options view.
The Name field of t he Option Properties view updates to show the name of the Option you selected
from the Options view.
6. Enter a rule for the Option that defines the conditions to show or hide the Choice Groups and
Choic es in a configuration.
7. Enter True or False in the Default Value field to set the Option as part of the graphic’s default
configuration or not.
8. In the De scription field, enter a description of the Option.
The description appears when the Consumer embeds the graphic and clicks on the option to
configure it.
9. Repeat steps 5-8 to specify rules and optional default values for the remaining Options of the
graphic.

Updating Graphic Layers

Symbol Wizard automatically creates a set of default layers that match the hierarchical set of Choices
and Options defined for a graphic. Each Choice layer has an assigned default rule containing the
expression [Link] that defines an attribute of a graphic’s property.
The default rule for an Option layer is simply the name of the Option itself. Renaming an Option
automatically renames any layer rules that reference the Option.
In a designer work flow, you can update lay ers by adding layers to or deleting lay ers from the set of
default layers. Also, layers can be renamed and the default rule assigned to a layer can be changed.

Important: Updating graphic layers may not be necessary if the default set of layers created for Choices
and Options can create all graphic configurations.

If a graphic layer is renamed, it loses the link to the Option. When the Option name is updated, the layer
name will not get updat ed with changed Option name.
To add or delete a graphic layer
1. Show the selected graphic in the Industrial Graphic Editor with the Symbol Wizard selected.

386
Working with Symbol Wizards Creating and Managing Industrial Graphics User Guide

2. Click the Layers tab to show the list of layers.

3. To add a layer, do the following:

a. Click the Add Layer icon above the Layers list.

You can also add a layer by right-clicking within the layers list to show the action menu and
selecting Add.
The new layer appears at the bottom of the list with an assigned default name.
b. Click on the new layer to select it.
c. Rename the new layer.
Creating a layer aut omatically sets it to rename mode. You can also manually rename a layer by
right-clicking on the layer and select Rename from the menu.
4. To delet e a layer, do the following:

a. Click on the layer within the list to be deleted.

b. Delet e the layer by clicking the Delete Layer icon above the Layers list or right clicking to show
the context menu and selecting Delete.
To update a layer rule
1. Show the selected graphic in the Industrial Graphic Editor with the Symbol Wizard selected.
2. Click the Layers tab to show the list of layers.
3. Select a layer from the list whose rule needs to be updat ed.
The Layer Properties view appears and shows the current rule assigned to the selected layer
Choic e or Option.
4. Click within the Rule field to select it.
5. Update the rule.
6. Click Save to save the changes to the layer rule.

Associating Configuration Elements to Graphic Layers

The basic workflow to associate graphic elements, custom properties, or named scripts to a graphic layer
consists of these general steps:
1. Select a graphic layer from the Layers view.
2. Select items from the tabbed Elements, Named Scripts, and Custom Properties views to
associate with the selected layer.

Note: Multiple graphic elements, custom properties, or named scripts can be s elected using the Shift
key to select a range of listed items or the Ctrl key to select individual items from a list.

3. Drag and drop the selected graphic elements, custom properties, or scripts into the Layers view.
Configuration elements can be associated with a graphic layer by two methods:
 Acti ve layer method: Select the check box to the left of the layer name. Then, drag and drop the
configuration element anywhere wit hin the Layers view. The configuration element is automatically
associated to the correct folder of the active layer.

387
Creating and Managing Industrial Graphics User Guide Working with Symbol Wizards

 Direct folder method: Select a layer and expand it to show the folders for the different types of
configuration elements. Then, drag and drop the configuration element directly on the folder that
matches the type of configuration element.

Associating Graphic Elements to Graphic Layers

Graphic elements show the visual properties of a graphic. In a designer workflow, you must associate
graphic elements to the defined layers of a graphic.
To associate graphic elements to graphic layers
1. Show the symbol with the Symbol Wizard Editor selected.
2. Click the Elements tab to show the graphic elements that belong to the graphic.
3. Click the Layers tab.
4. Activate a layer from the Layers view by selecting the check box next to the layer.
If you prefer to add graphic elements directly to a layer’s Graphic Elements folder with the direct
folder method, simply click the layer name from the list to select it.
5. Click the box to the left of the check box to expand the lay er view and show the Graphic Elements
folder.
6. Click on the graphic element in the Elements view to be associated with the active graphic layer.
You can also select the symbol element group by clicking it on the displayed graphic.
7. Using standard Windows drag and drop technique, drag the gra phic element from the Elements
view and drop it anywhere within the Layers view.
If you are using the direct folder method, you must drop the graphic element directly on the selected
layer’s Graphic Elements folder.
The selected element appears beneath the active layer’s Graphic Elements folder.
8. Repeat steps 6-7 to select all element groups that belong to the graphic layer.
You can also select multiple graphic elements from the Elements view and drop them as a set.
9. Repeat steps 4-8 to select all elements for the different layers of a graphic.
The Show/Hide icon appears to the left of the Graphic Elements folder in the Layers view. Clicking
the icon shows or hides the graphic elements in a layer’s Graphic Elements folder on the graphic
itself.
10. Click the Show/Hide icon to verify the graphic elements associated to a layer are correct for the
graphic configuration.
11. Save your changes to the graphic.

Using Shortcut Menu Commands to Edit Graphic Layer Graphic Elements

The Symbol Wizard Editor provides a set of shortcut menu commands to add graphic elements to
graphic layers or remove them from layers. Using shortcut commands makes it easier to add or remove
graphic elements when a complex Symbol Wizard c ontains many graphic elements and layers.
Adding Graphic Elements to Active Symbol Layers
Adding graphic elements to an active layer involves selecting an active layer, selecting one or more
graphic elements, and then using the Add To Active Layers shortcut command.

Note: All graphic elements should be created for all Symbol Wizard configurations before adding them to
graphic layers.

388
Working with Symbol Wizards Creating and Managing Industrial Graphics User Guide

To add graphic elements to graphic layers

1. Show the graphic wit h Symbol Wizard Editor selected.
2. From the Layers pane, select the check box next to graphic layer to make it active.
If you want to add a graphic element to multiple layers, select the check box next to each layer to
make them active.
3. Select the graphic element to be added from the displayed Sy mbol Wizard.
The graphic element can also be selected from the Elements pane.
4. Show the Symbol Wizard shortcut commands by right-clicking on the selected graphic element on
the graphic or right-clicking on the graphic element name from the Elements pane.

5. Click Add to Active Layers.

6. Verify the graphic element has been added to the active layers.
Removing Graphic Elements from Graphic Layers
Removing graphic elements from graphic layers follows a similar sequence of steps as adding graphic
elements to layers. The Symbol Wizard shortcut menu includes separat e commands to remove graphic
elements from all layers or only from a selected layer.
To remove graphic elements from graphic layers
1. Show the graphic wit h Symbol Wizard Editor selected.
2. From the Layers pane, select the check box next to the graphic layer that contains a graphi c
element to be removed.
Selecting a layer is not necessary if the graphic element will be removed from all layers. Also, if a
layer is not selected, the Remove From Layer command shows a list of layers that include the
selected graphic element to be remo ved.
3. Select the graphic element to be added from the displayed Symbol Wizard.
The graphic element can also be selected from the Elements pane.
4. Show the Symbol Wizard shortcut commands by right-clicking on the selected graphic element on
the graphic or right-clicking on the graphic element name from the Elements pane.

389
Creating and Managing Industrial Graphics User Guide Working with Symbol Wizards

5. Click Remove From All Layers or Remove From Layer based on whether the graphic element
should be removed from all layers or only the selected layer.
If a layer has not been selected, the Remove From Layer command shows a list of layers that
include the graphic element selected to be removed. Click a layer from the list to remove a graphic
element.

6. Verify the graphic element has been removed from the selected layers.

Associating Custom Properties to Graphic Layers

Associating custom properties to a graphic layer uses a procedure similar to associating graphic
elements. Selected custom properties are dragged and dropped on the Custom Properties folder to
associate them to a graphic layer. You can associate custom properties to layers with the active layer or
directory folder met hods.
To associate custom properties to graphic layers
1. Open the selected graphic in the Industrial Graphic Editor with the Symbol Wizard selected.
2. Click the Custom Properties grid to show the locally defined custom properties of the graphic.
Custom properties of embedded graphics are not listed.
3. Click the Layers tab.
4. Select a layer from the Layers view to add custom properties by selecting the check box next to the
layer.
5. Click the box to the left of the check box to expand the layer view and show the Custom Properties
folder.
6. Click on a custom property in the Custom Properties view that belongs to the selected graphic
layer.
7. Using standard Windows drag and drop technique, drag the custom property from the Custom
Properties view and drop it on the Custom Propertie s folder.
The selected custom property appears beneat h the Custom Propertie s folder.
8. Repeat steps 6-7 to select all custom properties that belong to the graphic laye r.
9. Repeat steps 4-7 to select the remaining custom properties for the different layers of a graphic.
10. Save your changes to the graphic.

Associating Named Scripts to Graphic Layers

Associating named scripts to a graphic layer uses a similar procedure to associate graphic elements or
custom properties. You can associate named scripts to layers with the active layer or directory folder
methods.
To associate named scripts to graphic layers
1. Show the selected graphic in the Industrial Graphic Editor with the Symbol Wizard selected.
2. Click the Named Scripts tab to show the scripts associated with the graphic.
3. Click the Layers tab.
4. Select a layer from the Layers view by selecting the check box next to the layer.

390
Working with Symbol Wizards Creating and Managing Industrial Graphics User Guide

5. Click the box to the left of the check box to expand the lay er view and show the Named Scripts
folder.
6. Click on a script in the Named Scripts view that belongs to the selected graphic layer.
7. Using standard Windows drag and drop technique, drag t he script from the Named Scripts view and
drop it on the Named Scripts folder
The selected script appears beneath the Named Scripts folder.
8. Repeat steps 6-7 to select all scripts that belong to the graphic layer.
9. Repeat steps 4-7 to select the remaining scripts for the different layers of a graphic.
10. Save your changes to the graphic.

Verifying Graphic Configurations

After creating the different configurations of a graphic, you can use the Symbol Wizard Preview to verify
each configuration works as designed. Also, you can validate the graphic to identify any invalid
references to other objects or values.
To verify graphic configurations
1. Open the graphic created with Symbol Wizard in the Industrial Graphic Editor.

2. Click Symbol Wizard Preview shown on the menu bar of the Industrial Graphic Editor.
You can also open the Symbol Wizard Preview as a View menu option or by pressing Alt+P.
The Industrial Graphic E ditor updates to show the Wizard Options view with a set of drop-down lists
to select different graphic property attribut es and options. The default graphic configuration should
be selected.

3. Select the different combinations of property values and view options from Wizard Options fields.

391
Creating and Managing Industrial Graphics User Guide Working with Symbol Wizards

4. Verify the graphic that appears is correct for the specified configuration Choices and Option rule.

5. Click the Validation icon to see if the graphic contains any invalid references.
The Validation view lists any invalid references within the graphic that need to be corrected.
Invalid references also include referenc es to properties or elements in hidden graphic layers.

Using Symbol Wizards in an Application

Symbol Wizards are stored in a Galaxy library just like standard Industrial Graphics. When you select a
graphic and embed it into an HMI application, the graphic’s default configuration is selected.
In a cons umer workflow, you can change a Symbol Wizard’s configuration by changing the values
assigned to the graphic’s properties from the Symbol Wizard’s Wizard Options section of the
Properties view. Aft er selecting a graphic configuration and changing any properties, save the graphic.
The Symbol Wizard appears as the configuration you have selected . A Symbol Wizard’s configuration
cannot be changed during application run time.

Embedding Symbol Wizards

In a cons umer workflow, you embed Symbol Wizards from the Industrial Graphic Editor. Embedding a
Symbol Wizard is similar to embedding a standard Industrial Graphic.
A Symbol Wizard appears with its default configuration when it is embedded. The Consumer c an select
another configuration by changing the configuration values shown in the Wizard Options section of the
Properties view.
To embed a graphic
1. Create a new graphic or add a graphic to your HMI application.
2. Open the symbol to show the Industrial Graphic Editor.
3. On the Edit menu, click Embed Graphic.

You can also click the Embed Graphic icon from the menu bar.
Your HMI's attribute/tag browser appears.
4. Locate the folder containing the Symbol Wizard.
5. Click the graphic to select it and click OK.
6. Position the pointer at the location where the Symbol Wizard should be placed.
7. Click once to embed the Symbol Wizard.
An embedded Symbol Wizard appears with handles on the Industrial Graphic Editor canvas to show
that it is selected.

392
Working with Symbol Wizards Creating and Managing Industrial Graphics User Guide

8. Select the graphic’s configuration by selecting values for the various options shown in the Wizard
Options view.

9. Rename the graphic.

10. Right -click on the graphic and select Custom Properties from the menu.
The Edit Custom Propertie s dialog box appears with the set of custom properties defined for the
Symbol Wizard.
11. Configure the custom properties with the required references for the application.
12. Press [F10] to show the Edit Scripts dialog box.
13. Verify if any changes need to be made to the graphic’s named scripts to run within the application.
14. Save the changes made to the graphic.

Symbol Wizard Tips and Examples

This section describes a practical example of creating a Symbol Wizard. The example explains how to
modify an centrifugal pump graphic to create a Symbol Wizard with Wizard Options that represent
different orientations of inlet and outlet pumps for a tank farm application. The Symbol Wizard also
includes a Wizard Option to show or hide a pump tachometer.

Creating Visual Configurations of an Industrial Graphic

Complete the following tasks to create a Symbol Wizard:
 Plan the different configurations of a graphic and select a default configuration that represents the
base Symbol Wizard.

393
Creating and Managing Industrial Graphics User Guide Working with Symbol Wizards

 Identify the graphic elem ents needed to create each graphic configuration.
 Add graphic elements, named scripts, and custom properties for each configuration.
 Create graphic layers to group graphic elements, named scripts, and custom properties
 Specify rules to select the layers needed to create each Symbol Wizard configuration

Planning Symbol Wizard Configurations

The first step in creating a Symbol Wizard is to identify the different configurations that should be
included in a symbol. In the example of a centrifugal pump, a Symbol Wizard should represent a pump
that has the inlet pipe at the left, right, top, and bottom of the pump’s central housing. Also, the Symbol
Wizard should be able to show or hide a tachometer for each orientation of the centrifugal pump.

After identifying all of the different configurations of a Symbol Wizard, identify the unique properties of
each configuration. The example of a centrifugal pump includes two properties: inlet pipe orientation and
whet her a tachomet er is shown with a pump or not.
The next step is to identify the properties and associated attributes for each configurat ion of the symbol.

Symbol
Configuration Configuration Properties and Attribute s

Orientation=Left
Has Tach=False

Orientation=Left
Has Tach= True

Orientation= Right
Has Tach=False

Orientation= Right
Has Tach= True

394
Working with Symbol Wizards Creating and Managing Industrial Graphics User Guide

Symbol
Configuration Configuration Properties and Attribute s

Orientation= Top
Has Tach=False

Orientation= Top
Has Tach= True

Orientation=Bottom
Has Tach=False

Orientation=Bottom
Has Tach= True

Using the Symbol Wizard Editor, create the Choice Groups and Choices needed to repres ent all
properties and attributes of a Symbol Wizard.
In the ex ample of a centrifugal pump, the Choice Groups are Orient ation and Has Tach. The Orientation
Choic e Group includes Left, Right, Top, and Bottom Choices, which are the possible attributes of a
pump’s inlet pipe. The Has Tach Choice Group includes Boolean True or False Choices that indicate
whet her a configuration includes a tachometer or not.

Initially, the top listed Choice is the default for a Choice Group. To assign another listed Choice as the
default value for the Choice Group, assign the Choice in Default Value field of the Option Propertie s
pane.

395
Creating and Managing Industrial Graphics User Guide Working with Symbol Wizards

If the desired base configuration of a centrifugal pump has pipes oriented to the right and includes a
tachometer, then Right should be assigned as the default Orientation Choice and True assigned as the
default Has Tach Choice.
Planning Tips
 Always decide the different configurations that should be incorporated into a Symbol Wizard as the
first step.
 Identify those properties that define a symbol’s configurations. These properties will be specified as
the Choice Groups when building configurations with the Symbol Wizard Editor.
Identify all attributes of each property that define a symbol's configurations. These attributes will be the
child Choices of the parent Choice Groups.
Select a default Symbol Wizard configuration at the planning stage to identify the symbol elements,
named scripts, and custom properties that you want to include in the base configuration.

Identify Graphic Elements

Graphic elements are the graphics, named scripts, custom properties, and animations included wit h
each configuration of a Symbol Wizard. The first step is to identify the graphic elements that need to be
created for each Symbol Wizard configuration.
The following table shows the graphic elements needed to create a Symbol Wizard of a centrifugal
pump.

Configuration
Graphic Properties and
Configuration Attribute s Required Graphic Elements

Orientation=Left Graphic elements:

Has Tach=False  InletLeft
 OutletRight

Orientation=Left Graphic elements:

Has Tach= True  InletLeft
 OutletRight
 MeterLeft

Orientation= Right Graphic elements:

Has Tach=False  InletRight
 OutleftLeft

Orientation= Right Graphic elements:

Has Tach= True  InletRight
 OutleftLeft
 MeterRight

Orientation= Top Graphic elements:

Has Tach=False  InletTop
 OutletBottom

396
Working with Symbol Wizards Creating and Managing Industrial Graphics User Guide

Configuration
Graphic Properties and
Configuration Attribute s Required Graphic Elements

Orientation= Top Graphic elements:

Has Tach= True  InletTop
 OutletBottom
 MeterTop

Orientation=Bottom Graphic elements:

Has Tach=False  InletBottom
 Outlet Top

Orientation=Bottom Graphic elements:

Has Tach= True  InletBottom
 Outlet Top
 MeterTop

Identification Tips
 Assign short descriptive names to graphic elements. Default names are created for layers by
concatenating Choice Group and Choice names. Shorter names reduce the number of Option and
Layer rules that will extend bey ond the borders of Rule field of the Symbol Wizard Editor.
 Use a standard naming convention for the graphic elements of a Symbol Wizard. Using a standard
naming convention groups similar functional graphic elements toget her in the list shown in the
Elements pane. This makes it easier to find grap hic elements when a Symbol Wizard contains many
graphic elements. Also, the names of layers appear in alphabetic order.

Build a Visual Representation of a Symbol Wizard

The major steps to add the necessary graphic elements to a Symbol Wizard consist of the following:
1. Check out and open an instance of a graphic from the Industrial Graphic Editor in the Industrial
Graphic Editor, or create a new graphic.
2. Create the graphic elements required for each Symbol Wizard configuration by doing one of the
following:
o Embed ot her graphics from the Industrial Graphic Editor into the symbol.

397
Creating and Managing Industrial Graphics User Guide Working with Symbol Wizards

o Duplicat e graphic elements from the symbol and edit them as necessary for each Symbol
Wizard configuration.

In the example of the centrifugal pump Symbol Wizard, an meter has been embedded into
centrifugal pump graphic, and then duplicat ed for the different configuration positions. The inlet and
outlet pipes are created by duplicating the graphic pipe elements from the centrifugal pump graphic.
3. Rename each graphic element to easily associate it with a Symbol Wizard configuration.

4. Position the graphic elements to accurately represent the different visual representations of each
configuration of a Symbol Wizard.
Visualization Tips
 If the same graphic element will be placed at different positions within a Symbol Wizard based on
different configurations, create a copy of the graphic element for each position. Each graphic
element can be placed into a separate layer, making it easier to specify rules to show the element at
the desired position.
 If a graphic element included in a specific Symbol Wizard configuration consists of two or more
elements, group the elements toget her. Grouping related elements makes it easier to assign
graphics to Symbol Wizard layers.

398
Working with Symbol Wizards Creating and Managing Industrial Graphics User Guide

Assign Graphic Elements, Named Scripts, and Custom Properties to Graphic

Layers
By default, the Layers pane shows a layer for eac h Choice Group/Choice combination listed in the
Options pane. In the example of a centrifugal pump Symbol Wizard, there are unique layers for each
orientation of the inlet pipe of the pump graphic. Inlet and outlet graphic element pairs are added to each
Orientation layer.

Layers need to be added for the left, right, and top positions of t he tachometer when the HasT ach Choice
Group is True. Copies of the embedded tachometer graphic are added to the TachLeft, TachRight, and
TachTop layers, which map to the different positions of the tachomet er shown in the pump Symbol
Wizard. The TachFalse layer does not contain any graphic elements because it selects the Symbol
Wizard configurations without a tachometer.
Layer Tips
 Use the Active Layer method to quickly drag and drop elements, scripts, and custom properties to a
layer folder. Selected elements can be dropped any where wit hin the Layers view and automatically
placed in the correct folder of the active layer.
 If not created by default, create an empty layer wit hout graphic elements for a Choice Group with
Boolean True/False Choices. This makes it easier to write layer rules to hide graphic elements when
a Choice Group is False.
 After adding graphic elements to a layer, toggle the Show/Hide icon on and off to verify the correct
graphic elements have been added to the layer.
 Toggle the Expand All/Collapse All button above the Layers pane to show or hide all of the folders
beneath each layer.

Specify Rules to select Graphic Layers

A default rule is assigned to eac h layer based on the Choice Group Choice pair. In the example of the
centrifugal pump Symbol Wizard, the Orientation Choice Group layer rules map directly to Wizard
Options choices. Selecting an Orient ation option displays the graphic elements of the selected layer in
the pump’s configuration.

The default layer rules to show or hide the tachomet er must be modified. In the case of the Left or Right
pump orientation, the lay er rules must select the appropriate Orientation layer and tachometer layers.
The TachLeft and TachRight layer rules include an AND statement that selects the tachometer and the
Symbol Wizard’s pipe orientation:
TachLeft: [Link]&Has Tach. True

399
Creating and Managing Industrial Graphics User Guide Working with Symbol Wizards

TachRight: Orientation. Right&Has Tac [Link]

The layer rule to select the Top and Bottom Orientation configurations with a tachometer is more
complex because t he position of the tac hometer is the same in both orientations. The TachTop lay er rule
includes separat e Top and Bottom compound expressions joined with an OR statement.
(Orientation. Top& Has Tach. True)|([Link]& Has Tach. True)
Using Symbol Wizard Preview, verify each set of layer rules defines only a single unique Symbol Wizard
configuration. Rule errors become apparent whe n a Symbol Wizard includes elements from ot her
configurations, or elements are missing.

Symbol Wizard Wizard Options and Corre sponding Active

Configuration Configuration Layer Rules

[Link]&Has [Link]

[Link]&Has Tach. True

Orientation. Right& Has [Link]

Orientation. Right& Has Tach. True

Orientation. Top&Has [Link] e

400
Working with Symbol Wizards Creating and Managing Industrial Graphics User Guide

Symbol Wizard Wizard Options and Corre sponding Active

Configuration Configuration Layer Rules

(Orientation. Top& Has Tach. True)|([Link]& Has Tach. True)

[Link]&Ha [Link]

(Orientation. Top& Has Tach. True)|([Link]& Has Tach. True)

Rule Tips
 Symbol Wizard rules are evaluated simultaneously. Place parent heses around compound
expressions, which are evaluated before other operators outsid e of parentheses in a rule.
 Rules cannot reference a Choice Group alone. Always write rule ex pressions that reference Choices
within a Choice Group in a hierarchical manner: ChoiceGroup. Choic e.
 Use operator characters (&, |, !) rather than Boolean key words (AND, OR, and NOT) to save space
when writing rules. Using operator characters reduces the likelihood that a long rule will extend
beyond the borders of the Rule field.

Integrating Symbol Wizards with Object Wizards

Symbol wizards can be combined with object wizards to give users a simple configuration workflow when
adding new assets to an overview graphic. The Application Server User Guide describes how to build an
object wizard that can be added to any object templat e. Then, you can associate object wizard choices
with different configuration values to be applied to a linked Symbol Wizard.

401
Creating and Managing Industrial Graphics User Guide Working with Symbol Wizards

Users access Object Wizards through the Templates tab of the Graphic Editor to derive instances. The
configured instance is placed on the overview graphic. For detailed instructions about using Symbol
Wizards with object wizards, see the topic "Create a New Instance with the Configure New Asset Editor"
in the Application Server User Guide.

Note: InTouch OMI lets you add a configured asset directly to a pane through the Layout Edit or.
However, InTouch HMI does not support adding a graphic derived from a Symbol Wizard linked to an
object wizard directly onto an InTouch window. The graphic must be embedded in another graphic (for
example, contained in an overview graphic ) before you a dd it to an InTouch window.

402
 Creating and Managing Industrial Graphics User Guide

A PPENDIX A
List of Element Properties
In This Appendix
Alphabetical List of Properties...................................................................................................... 403
List by Functional Area................................................................................................................ 424
Order of Precedence for Property Styles ...................................................................................... 445

Alphabetical List of Properties

This section shows you the properties of elements, the canvas, element groups, and embedded
graphics.
Each property has a purpose, a category it belongs to, where it is used if it can be used in scripting at run
time, and where to find more information on how to us e it.
The first part of this section contains an alphabetical list of all properties, the second part shows a table
for each category of properties.
The following table cont ains a list of properties used by the:
 Elements.
 Canvas.
 Element groups.
 Embedded graphics.
Asterisk (*) marks properties that are specific to only one type of element or the canvas, a group or an
embedded graphic.

Property Purpose, category, usage and further information

AbsoluteAnchor* Purpose: Defines the absolute anchor point of the source graphic. By
default, this is the center point of all elements on the canvas but can be
changed.
Category: Appearance
Used by: Canvas
Can be read by script at run time: No
Info: Size Propagation and Anchor Points on page 39

403
Creating and Managing Industrial Graphics User Guide List of Element Properties

Property Purpose, category, usage and further information

AbsoluteOrigin Purpose: Defines an X, Y location relative to the top, left (0, 0) origin of
the graphic or window.
Category: Appearance
Used by: Rectangle, Rounded Rectangle, Ellipse, Polygon, Closed
Curve, 2 Point Pie, 3 Point Pie, 2 Point Chord, 3 Point Chord, Line, H/V
Line, Polyline, Curve, 2 Point Arc, 3 Point Arc, Button, Text, Text Box,
Image, Status, Embedded Symbol, Group, Path, Radio Button Group,
Check Box, Edit Box, Combo Box, Calendar, DateTime Picker, List
Box.
Can be read by script at run time: No
Info: Changing Points of Origin in the Properties Editor on page 121

Alignment Purpose: Controls the location of the text relative to the bounding
rectangle of the element.
Category: Text Style
Used by: Button, Text, Text Box
Can be read by script at run time: No
Info: Setting the Text Alignment on page 149

AnchorFixedTo Purpose: Determines if the anchor point is fixed to the canvas when
you resize, delet e, or add elements (Absolut e), or if the anc hor point is
recalculat ed relative to the element sizes and positions (Relative).
Category: Appearance
Used by: Embedded Symbol, Canvas
Can be read by script at run time: No
Info: Size Propagation and Anchor Points on page 39

AnchorP oint* Purpose: Defines the anchor X, Y location of the embedded graphic.
Category: Appearance
Used by: Embedded Symbol
Can be read by script at run time: No
Info: Size Propagation and Anchor Points on page 39

404
List of Element Properties Creating and Managing Industrial Graphics User Guide

Property Purpose, category, usage and further information

Angle Purpose: Defines the current angle of rotation of the element. 0 is

always the top of the element relative to the canvas. Angle is always
determined relative to the top of the element and rotates in a clockwise
direction.
Category: Appearance
Used by: Rectangle, Rounded Rectangle, Ellipse, Polygon, Closed
Curve, 2 Point Pie, 3 Point Pie, 2 Point Chord, 3 Point Chord, Line, H/V
Line, Polyline, Curve, 2 Point Arc, 3 Point Arc, Button, Text, Text Box,
Image, Status, Group, Embedded Symbol
Can be read by script at run time: Yes
Info: Rotating Elements by Changing the Angle Property on page 120

AutoScale Purpose: If this property is set to True then the text is stretched
horizontally and vertically (larger or smaller) to fit the bounding
rectangle.
Category: Appearance
Used by: Button, Text Box
Can be read by script at run time: Yes
Info: Setting Auto Scaling and Word Wrapping for a Text Box on page
179
ButtonStyle* Purpose: Determines if the button appears as a standard button or as
an image.
Category: Appearance
Used by: Button
Can be read by script at run time: No
Info: Configuring Buttons with Images on page 182

CalendarColumns* Purpose: Defines the number of columns the calendar object has.
Category: Appearance
Used by: Calendar
Can be read by script at run time: No
Info: Setting the Number of Calendar Month Sheets on page 205

CalendarRows* Purpose: Defines the number of rows the calendar object has.
Category: Appearance
Used by: Calendar
Can be read by script at run time: No
Info: Setting the Number of Calendar Month Sheets on page 205

405
Creating and Managing Industrial Graphics User Guide List of Element Properties

Property Purpose, category, usage and further information

Caption* Purpose: Defines the text shown on the Check Box at design time and
at run time when the caption property is not bound to a reference in the
checkbox animation panel.
Category: Text Style
Used by: Check Box
Can be read by script at run time: No
Info: Setting the Caption Text of a Check Box Control on page 201

Checked* Purpose: Sets or gets the value of c heck box. This is the initial value of
the check box when the cont rol is not connected to a reference and is
overridden at run time with value of reference.
Category: Appearance
Used by: Check Box
Can be read by script at run time: Yes
Info: Setting the Default State of a Check Box Control on page 201

.Color1 Purpose: Color1 is a sub-property of a FillColor, UnfilledColor,

LineColor or TextColor property. It is used to change the first color of
the fill, unfill, line or text style if applicable.
Category: Depends on its source property
Used by: Depends on its source property
Can be read by script at run time: No
Info: Enabling and Disabling Elements for Run-Time Interaction on
page 160
.Color2 Purpose: Color2 is a sub-property of a FillColor, UnfilledColor,
LineColor or TextColor property. It is used to change the second color
of the fill, unfill, line or text style if applicable.
Category: Depends on its source property
Used by: Depends on its source property
Can be read by script at run time: No
Info: Enabling and Disabling Elements for Run-Time Interaction on
page 160
.Color3 Purpose: Color3 is a sub-property of a FillColor, UnfilledColor,
LineColor or TextColor property. It is used to change the third color of
the fill, unfill, line or text style if applicable.
Category: Depends on its source property
Used by: Depends on its source property
Can be read by script at run time: No
Info: Enabling and Disabling Elements for Run-Time Interaction on
page 160

406
List of Element Properties Creating and Managing Industrial Graphics User Guide

Property Purpose, category, usage and further information

Cont rolStyle Purpose: Defines the control style as Flat or 3D.

Category: Appearance
Used by: Radio Button Group, Check Box
Can be read by script at run time: No
Info: Setting the Layout of the Radio Button Group Options on page
200 and Setting the 3D appearance of a Check Box Control on page
201
Count Purpose: Indicates how many items there are in a list.
Category: not available at design time
Used by: Radio Button Group, Combo Box, List Box
Can be read by script at run time: Yes
Info: Using Radio Button Group-Specific Properties at Run Time on
page 201, Using Combo Box-Specific Properties at Run Time on page
204 and Using List Box-Specific Properties at Run Time on page 209

CustomFormat* Purpose: Defines the format to be used in the DateTime Picker control
for input of a date or time.***inappropriateUI***
Category: Appearance
Used by: DateTime Picker
Can be read by script at run time: No
Info: Configuring DateTime Pick er Controls on page 207

CustomProperties Purpose: The collection of CustomP roperties defined by the graphic.

Category: Custom Properties
Used by: Canvas, Embedded Symbol
Can be read by script at run time: No
Info: Using Custom Properties on page 211

Description* Purpose: Contains a meaningful description of the graphic.

Category: Graphic
Used by: Canvas
Can be read by script at run time: No
Info: Setting the Radius of Rounded Rectangles on page 177

407
Creating and Managing Industrial Graphics User Guide List of Element Properties

Property Purpose, category, usage and further information

DefaultValue Purpose: The default time value to use for the control.
Category: Appearance
Used by: Calendar, DateTime Picker
Can be read by script at run time: No
Info: Setting the Def ault Value of the Calendar Control on page 207
and Configuring DateTime Pick er Controls on page 207

DownImage* Purpose: Defines the image that is rendered in the button element
when it is clicked or held down.
Category: Appearance
Used by: Button
Can be read by script at run time: No
Info: Configuring Buttons with Images on page 182

DropDownType* Purpose: Defines the type of combo box: simple, drop-down or

drop-down list.
Category: Appearance
Used by: Combo Box
Can be read by script at run time: No
Info: Setting the Type of Combo Box Cont rol on page 203

DropDownWidth* Purpose: Defines the width of the drop-down list.

Category: Appearance
Used by: Combo Box
Can be read by script at run time: No
Info: Setting the Width of the Drop-Down List on page 203

DynamicSizeChange* Purpose: Determines if the embedded graphic propagat es the size

changes from the source graphic.
Category: Appearance
Used by: Embedded Symbol
Can be read by script at run time: No
Info: Enabling or Disabling Dynamic Size Change of Embedded
Graphics on page 330

408
List of Element Properties Creating and Managing Industrial Graphics User Guide

Property Purpose, category, usage and further information

Enabled Purpose: When set to True enables the element at run time and allows
the user to interact with it. If the property is set to False the user cannot
use the mouse or keyboard to interact with the element. Data changes
as a result of an animation or script still execute.
Category: Runtime Behavior
Used by: Rectangle, Rounded Rectangle, Ellipse, Polygon, Closed
Curve, 2 Point Pie, 3 Point Pie, 2 Point Chord, 3 Point Chord, Line, H/V
Line, Polyline, Curve, 2 Point Arc, 3 Point Arc, Button, Text, Text Box,
Image, Radio Button Group, Check Box, Edit Box, Combo Box,
Calendar, DateTime Picker, List Box, Group, Path, Embedded Symbol
Can be read by script at run time: Yes
Info: Enabling and Disabling Elements for Run -Time Interaction on
page 160

End Purpose: Defines the end of a line or H/V line as X, Y location.

Category: Appearance
Used by: Line, H/V Line
Can be read by script at run time: No
Info: Setting Start or End Points of a Line on page 146

EndCap Purpose: Defines the cap used at the end of the line of an open
element.
Category: Line Style
Used by: Line, H/V Line, Polyline, Curve, 2 Point Arc, 3 Point Arc
Can be read by script at run time: No
Info: Setting Line End Shape and Size on page 178

FillBehavior Purpose: Determines how the Fill (Horizontal, Vertical or Both) should
be applied to the element.
Category: Fill Style
Used by: Rectangle, Rounded Rectangle, Ellipse, Polygon, Closed
Curve, 2 Point Pie, 3 Point Pie, 2 Point Chord, 3 Point Chord, Button,
Text Box, Path
Can be read by script at run time: No
Info: Setting Fill Behavior on page 145

409
Creating and Managing Industrial Graphics User Guide List of Element Properties

Property Purpose, category, usage and further information

FillColor Purpose: Defines the fill style used for the filled portion of the element.
Category: Fill Style
Used by: Rectangle, Rounded Rectangle, Ellipse, Polygon, Closed
Curve, 2 Point Pie, 3 Point Pie, 2 Point Chord, 3 Point Chord, Button,
Text Box, Radio Button Group, Check Box, Edit Box, Combo Box,
Calendar, List Box, Path
Can be read by script at run time: No
Info: Setting Fill Style on page 144 and Changing Back ground Color
and Text Color of Windows Common Controls on page 199

FillOrientation Purpose: Determines the orientation of the fill when the element
orientation is any value other than 0.
Category: Fill Style
Used by: Rectangle, Rounded Rectangle, Ellipse, Polygon, Closed
Curve, 2 Point Pie, 3 Point Pie, 2 Point Chord, 3 Point Chord, Button,
Text Box, Path
Can be read by script at run time: No
Info: Setting Fill Orient ation on page 145

FirstDayOfWeek* Purpose: Defines the first day of the week used for the display of the
columns in the calendar.
Category: Appearance
Used by: Calendar
Can be read by script at run time: No
Info: Setting the First Day of the Week on page 205

Font Purpose: Defines the basic text font as defined by the operating
system.
Category: Text Style
Used by: B utton, Text, Text Box, Radio Button Group, Check Box, Edit
Box, Combo Box, Calendar, DateTime Picker, List Box
Can be read by script at run time: No
Info: Setting the Text Font on page 148

410
List of Element Properties Creating and Managing Industrial Graphics User Guide

Property Purpose, category, usage and further information

Format* Purpose: Defines the format of the reference values. This is only
available for array mode.
Category: Appearance
Used by: DateTime Picker
Can be read by script at run time: No
Info: Configuring DateTime Pick er Controls on page 207

Has TransparentColor* Purpose: Indicat es whether or not the image applies a transparent
color. If True the image is rendered trans parent wherever a color in the
image matches the TransparentColor property.
Category: Appearance
Used by: Image
Can be read by script at run time: Yes
Info: Setting the Image Color Transparency on page 180

Height Purpose: Defines the height of the element.

Category: Appearance
Used by: Rectangle, Rounded Rectangle, Ellipse, Polygon, Closed
Curve, 2 Point Pie, 3 Point Pie, 2 Point Chord, 3 Point Chord, Line, H/V
Line, Polyline, Curve, 2 Point Arc, 3 Point Arc, Button, Text, Text Box,
Image, Status, Radio Button Group, Check Box, Edit Box , Combo Box,
Calendar, DateTime Picker, List Box, Group, Path, Embedded Symbol
Can be read by script at run time: Yes
Info: Resizing Elements by Changing Size Properties on page 117

Horiz ontalDirection Purpose: Determines the horizontal direction of the fill for the element.
Can be "Right" or "Left".
Category: Fill Style
Used by: Rectangle, Rounded Rectangle, Ellipse, Polygon, Closed
Curve, 2 Point Pie, 3 Point Pie, 2 Point Chord, 3 Point Chord, Button,
Text Box, Path
Can be read by script at run time: No
Info: Setting Horizontal Fill Direction and Percentage on page 145

411
Creating and Managing Industrial Graphics User Guide List of Element Properties

Property Purpose, category, usage and further information

Horiz ontalPercentFill Purpose: Determines the percentage of horizontal fill for the element.
Category: Fill Style
Used by: Rectangle, Rounded Rectangle, Ellipse, Polygon, Closed
Curve, 2 Point Pie, 3 Point Pie, 2 Point Chord, 3 Point Chord, Button,
Text Box, Path
Can be read by script at run time: Yes
Info: Setting Horizontal Fill Direction and Percentage on page 145

Horiz ontalScrollbar Purpose: Determines if a horizontal scroll bar appears on a list box
control to allow the user to scroll the list box items horizontally.
Category: Appearance
Used by: List Box
Can be read by script at run time: No
Info: Using a Horizontal Scroll Bar in a List Box Control on page 209

Image* Purpose: Defines the image that is rendered in the element. Any image
format supported by the application can be used.
Category: Appearance
Used by: Image
Can be read by script at run time: No
Info: Selecting a Different Image on page 181

ImageAlignment* Purpose: Controls the location of the image relative to the bounding
rectangle of the graphic. This property is only applicable when the
ImageStyle is set to Normal.
Category: Appearance
Used by: Image
Can be read by script at run time: No
Info: Setting the Image Alignment on page 180

ImageStyle Purpose: Defines how the image is rendered relative to its bounding
rectangle.
Category: Appearance
Used by: Button, Image
Can be read by script at run time: No
Info: Setting the Image Display Mode on page 179

412
List of Element Properties Creating and Managing Industrial Graphics User Guide

Property Purpose, category, usage and further information

IntegralHeight Purpose: Determines if the List Box size is an integral multiple of the
Font Size so that a finite number of items fit in it without being clipped.
Category: Appearance
Used by: Combo Box, List Box
Can be read by script at run time: No
Info: Avoiding Clipping of Items in the Simple Combo Box Cont rol on
page 204

Language Purpose: Defines the current language of the graphic.

Category: Runtime Behavior
Used by: Embedded Symbol
Can be read by script at run time: Yes
Info: Selecting the Language for a Graphic on page 341.

LanguageID Purpose: Defines the current language ID of the graphic.

Category: Runtime Behavior
Used by: Embedded Symbol
Can be read by script at run time: Yes
Info: Selecting the Language for a Graphic on page 341.

Layout* Purpose: Defines the way the radio buttons are arranged in the gro up
(Horizont al or Vertical).
Category: Appearance
Used by: Radio Button Group
Can be read by script at run time: No
Info: Setting the Layout of the Radio Button Group Options on page
200
LineColor Purpose: Defines the color and affects of the line or border.
Category: Line Style
Used by: Rectangle, Rounded Rectangle, Ellipse, Polygon, Closed
Curve, 2 Point Pie, 3 Point Pie, 2 Point Chord, 3 Point Chord, Line, H/V
Line, Polyline, Curve, 2 Point Arc, 3 Point Arc, Text Box, Path
Can be read by script at run time: No
Info: Setting the Line Style on page 147

413
Creating and Managing Industrial Graphics User Guide List of Element Properties

Property Purpose, category, usage and further information

LineP attern Purpose: Defines the pattern of the line or border.

Category: Line Style
Used by: Rectangle, Rounded Rectangle, Ellipse, Polygon, Closed
Curve, 2 Point Pie, 3 Point Pie, 2 Point Chord, 3 Point Chord, Line, H/V
Line, Polyline, Curve, 2 Point Arc, 3 Point Arc, Text Box, Path
Can be read by script at run time: No
Info: Setting the Line Pattern on page 147

LineWeight Purpose: Determines the weight of the element’s line or border. A

value of 0 means that there is no line or border.
Category: Line Style
Used by: Rectangle, Rounded Rectangle, Ellipse, Polygon, Closed
Curve, 2 Point Pie, 3 Point Pie, 2 Point Chord, 3 Point Chord, Line, H/V
Line, Polyline, Curve, 2 Point Arc, 3 Point Arc, Text Box, Path
Can be read by script at run time: Yes
Info: Setting the Line Weight on page 147

Locked Purpose: Locks or unlocks the element’s size, position, orientation and
origin. Other properties that can have an affect on element size,
position, orientation and origin are also locked. These are
element-specific.
Category: Appearance
Used by: Rectangle, Rounded Rectangle, Ellipse, Polygon, Closed
Curve, 2 Point Pie, 3 Point Pie, 2 Point Chord, 3 Point Chord, Line, H/V
Line, Polyline, Curve, 2 Point Arc, 3 Point Arc, Button, Text, Text Box,
Image, Status, Radio Button Group, Check Box, Edit Box, Combo Box,
Calendar, DateTime Picker, List Box, Group, Path, Embedded Symbol
Can be read by script at run time: Yes
Info: Lock ing and Unlock ing Elements on page 131

MaxDropDownItems* Purpose: Defines the maximum number of items the drop-down list
shows.
Category: Appearance
Used by: Combo Box
Can be read by script at run time: No
Info: Setting the Maximum Number of Items to Appear in the Combo
Box Drop-Down List on page 204

414
List of Element Properties Creating and Managing Industrial Graphics User Guide

Property Purpose, category, usage and further information

Multiline* Purpose: Determines if the control shows several lines of text that
automatically wrap up when reaching the right border of the control.
Category: Appearance
Used by: Edit Box
Can be read by script at run time: No
Info: Configuring the Text to Wrap in an Edit Box Control on page 202

MultiplePopupsAllowed* Purpose: If Fals e, ShowSymbol animations only show within a single

dialog window no matter how many animations are invoked and
regardless of how the animations are configured. If True, ShowSymbol
animations show in separate dialog windows.
Category: Runtime Behavior
Used by: Canvas
Can be read by script at run time: No
Info: Setting the Radius of Rounded Rectangles on page 177

Name Purpose: Gives the element a meaningful unique name.

Category: Graphic
Used by: Rectangle, Rounded Rectangle, Ellipse, Polygon, Closed
Curve, 2 Point Pie, 3 Point Pie, 2 Point Chord, 3 Point Chord, Line, H/V
Line, Polyline, Curve, 2 Point Arc, 3 Point Arc, Button, Text, Text Box,
Image, Status, Radio Button Group, Check Box, Edit Box , Combo Box,
Calendar, DateTime Picker, List Box, Embedded Symbol, Path
Can be read by script at run time: No
Info: Setting the Radius of Rounded Rectangles on page 177

NewIndex Purpose: Returns the index of the last value added to the list. This is
provided for migration of InTouch Windows common controls.
Category: not available at design time
Used by: Combo Box, List Box
Can be read by script at run time: Yes
Info: Using Combo Box-Specific Properties at Run Time on page 204
and Using List Box-Specific Properties at Run Time on page 209

415
Creating and Managing Industrial Graphics User Guide List of Element Properties

Property Purpose, category, usage and further information

OwningObject* Purpose: Used as the ArchestrA object reference to replace all "Me."
references in expressions and scripts. Everywhere there is a "Me."
reference this object reference is used instead. The object name can
be set either using a tag or hierarchical name of an Auto mationObject.
Category: Runtime Behavior
Used by: Embedded Symbol
Can be read by script at run time: Yes
Info: Detecting and Editing the Containing Object Instance on page
331

Radius* Purpose: Defines the radius of the corners of the Rounded Rectangle.
Category: Appearance
Used by: Rounded Rectangle
Can be read by script at run time: Yes
Info: Setting the Radius of Rounded Rectangles on page 177

ReadOnly* Purpose: Determines if the user can type data into the edit box.
Category: Appearance
Used by: Edit Box
Can be read by script at run time: No
Info: Configuring the Text to be Read-Only in an Edit Box Control on
page 202
RelativeA nchor* Purpose: Relative anchor point of the source graphic. By default, this is
0,0.
Category: Appearance
Used by: Canvas
Can be read by script at run time: No
Info: Size Propagation and Anc hor Points on page 39

RelativeOrigin Purpose: Defines the relative origin as X, Y location. The location is

relative to the center point of the element (0, 0).
Category: Appearance
Used by: Rectangle, Rounded Rectangle, Ellipse, Polygon, Close d
Curve, 2 Point Pie, 3 Point Pie, 2 Point Chord, 3 Point Chord, Line, H/V
Line, Polyline, Curve, 2 Point Arc, 3 Point Arc, Button, Text, Text Box,
Image, Status, Group, Path, Embedded Symbol
Can be read by script at run time: No
Info: Changing Points of Origin in the Properties Editor on page 121

416
List of Element Properties Creating and Managing Industrial Graphics User Guide

Property Purpose, category, usage and further information

Scripts* Purpose: Defines a collection of scripts configured for the graphic.

Category: Runtime Behavior
Used by: Canvas
Can be read by script at run time: No
Info: Adding and Maintaining Graphic Scripts on page 297
SelectedValue Purpose: Reads the value of the selected item, or selects the item with
that value if it exists.
Category: not available at design time
Used by: Radio Button Group, List Box
Can be read by script at run time: Yes
Info: Using Radio Button Group-Specific Properties at Run Time on
page 201 and Using List Box-Specific Properties at Run Time on page
209
ShowToday* Purpose: Determines if today's dat e is shown on the calendar control.
Category: Appearance
Used by: Calendar
Can be read by script at run time: No
Info: Showing or Hiding Today’s Date on a Calendar Control on page
205

Smoothing* Purpose: When False the graphics are rendered normally, when True
graphics are rendered with anti -aliasing which produc es a smoother
appearing graphic.
Category: Appearance
Used by: Canvas
Can be read by script at run time: No
Info: Setting the Radius of Rounded Rectangles on page 177

Start Purpose: Defines the start of a line or H/V line as X, Y location.

Category: Appearance
Used by: Line, H/V Line
Can be read by script at run time: No
Info: Setting Start or End Points of a Line on page 146

417
Creating and Managing Industrial Graphics User Guide List of Element Properties

Property Purpose, category, usage and further information

StartAngle Purpose: Defines the starting angle of an Arc, Pie or Chord. 0 is always
the top of the graphic relative to its orientation. A positive number is
clockwise from 0 and a negative number is counter clockwise from 0. If
a negative number is used to set the property it is automatically
converted to a positive value.
Category: Appearance
Used by: 2 Point Pie, 3 Point Pie, 2 Point Chord, 3 Point Chord, 2 Point
Arc, 3 Point Arc
Can be read by script at run time: Yes
Info: Changing Angles of Arcs, Pies and Chords on page 184

StartCap Purpose: Defines the cap used at the start of the line of an open
graphic.
Category: Line Style
Used by: Line, H/V Line, Polyline, Curve, 2 Point Arc, 3 Point Arc
Can be read by script at run time: No
Info: Setting Line End Shape and Size on page 178
SweepAngle Purpose: Defines the ending angle of the Arc, Pie or Chord. This angle
is always measured from the start angle.
Category: Appearance
Used by: 2 Point Pie, 3 Point Pie, 2 Point Chord, 3 Point Chord, 2 Point
Arc, 3 Point Arc
Can be read by script at run time: Yes
Info: Changing Angles of Arcs, Pies and Chords on page 184

SymbolReference* Purpose: Contains the exact location that the embedded graphic is
linked to. This can help the user in locating the original definition for
editing purposes.
This property is always disabled.
Category: Runtime Behavior
Used by: Embedded Symbol
Can be read by script at run time: No
Info: Detecting the Source Graphic of an Embedded Graphic on page
328

418
List of Element Properties Creating and Managing Industrial Graphics User Guide

Property Purpose, category, usage and further information

TabOrder Purpose: Defines the tab order for the element. The tab order is only
used when navigating by the keyboard. This property is valid only when
the TabStop property is set to true.
Category: Runtime Behavior
Used by: Rectangle, Rounded Rectangle, Ellipse, Polygon, Closed
Curve, 2 Point Pie, 3 Point Pie, 2 Point Chord, 3 Point Chord, Line, H/V
Line, Polyline, Curve, 2 Point Arc, 3 Point Arc, Button, Text, Text Box,
Image, Radio Button Group, Check Box, Edit Box, Combo Box,
Calendar, DateTime Picker, List Box, Group, Path, Embedded Symbol
Can be read by script at run time: No
Info: Editing the Tab Order of an Element on page 161

TabStop Purpose: Determines if the element can be navigated to and can

receive focus at run time.
Category: Runtime Behavior
Used by: Rectangle, Rounded Rectangle, Ellipse, Polygon, Closed
Curve, 2 Point Pie, 3 Point Pie, 2 Point Chord, 3 Point Chord, Line, H/V
Line, Polyline, Curve, 2 Point Arc, 3 Point Arc, Button, Text, Text Box,
Image, Radio Button Group, Check Box, Edit Box, Combo Box,
Calendar, DateTime Picker, List Box, Group, Path, Embedded Symbol
Can be read by script at run time: No
Info: Editing the Tab Order of an Element on page 161

Tension Purpose: Specifies how tightly the curve bends through the control
points of the curve.
Category: Appearance
Used by: Closed Curve, Curve
Can be read by script at run time: Yes
Info: Changing the Tension of Curves and Closed Curves on page 184

Text Purpose: Defines the unicode text that is shown by the element.
Category: Appearance
Used by: Button, Text, Text Box, Edit Box
Can be read by script at run time: Yes
Info: Setting the Displayed Text on page 148

419
Creating and Managing Industrial Graphics User Guide List of Element Properties

Property Purpose, category, usage and further information

TextColor Purpose: Defines the color and affects applied to the text.
Category: Text Style
Used by: B utton, Text, Text Box, Radio Button Group, Check Box, Edit
Box, Combo Box, Calendar
Can be read by script at run time: No
Info: Setting the Text Color on page 149 and Changing Back ground
Color and Text Color of Windows Common Controls on page 199

TextFormat Purpose: Defines the formatting string that is applied to the text when it
is shown.
Category: Appearance
Used by: Button, Text, Text Box
Can be read by script at run time: Yes
Info: Setting the Text Display Format on page 148

TitleFillColor* Purpose: Determines the background solid color in the title bar of the
calendar cont rol.
Category: Fill Style
Used by: Calendar
Can be read by script at run time: No
Info: Setting Title Fill Color and Text Color on a Calendar Control on
page 206
TitleTextColor* Purpose: Determines the text solid color in the title bar of the calendar
control.
Category: Text Style
Used by: Calendar
Can be read by script at run time: No
Info: Setting Title Fill Color and Text Color on a Calendar Control on
page 206
TopIndex* Purpose: Returns the index of the top most item in the list. This is
provided for migration of InTouch Windows common controls.
Category: not available at design time
Used by: List Box
Can be read by script at run time: Yes
Info: Using List Box-Specific Properties at Run Time on page 209

420
List of Element Properties Creating and Managing Industrial Graphics User Guide

Property Purpose, category, usage and further information

TrailingTextColor* Purpose: Determines the text solid color of the t ext for the trailing days.
The trailing days are days outside the current month.
Category: Text Style
Used by: Calendar
Can be read by script at run time: No
Info: Setting the Text Color for Trailing Dates in a Calendar Control on
page 206

Trans parency Purpose: Defines the transparency of the element. A value of 0 means
fully opaque and a value of 100 means fully transparent.
Category: Appearance
Used by: Rectangle, Rounded Rectangle, Ellipse, Polygon, Closed
Curve, 2 Point Pie, 3 Point Pie, 2 Point Chord, 3 Point Chord, Line, H/V
Line, Polyline, Curve, 2 Point Arc, 3 Point Arc, Button, Text, Text Box,
Image, Group, Path, Embedded Symbol
Can be read by script at run time: Yes
Info: Setting the Transparency Level of an Element on page 159
.Transparency Purpose: Transparency is a sub-property of a FillColor, UnfilledColor,
LineColor or TextColor property. It is used to change the transparency
of the fill, unfill, line or text style if applicable. The transparency acts in
addition to the transparency of the element.
Category: Depends on its source property
Used by: Depends on its source property
Can be read by script at run time: No
Info: Enabling and Disabling Elements for Run-Time Interaction on
page 160
Trans parent Color* Purpose: Defines the RGB color value that is used as the transparent
color.
Category: Appearance
Used by: Image
Can be read by script at run time: No
Info: Setting the Image Color Transparency on page 180

421
Creating and Managing Industrial Graphics User Guide List of Element Properties

Property Purpose, category, usage and further information

TreatAsIcon Purpose: If this property is set to False, the animations defined on the
graphics within the group or embedded graphic take precedence over
an animation defined on the group or embedded graphic. If there are no
animations or the us er clicked on an area of the group or embedded
graphic that does not have an animation, then the group or embedded
graphic animation ex ecutes.
If the property is set to True, only the animation on the group or
embedded graphic is executed. The interactive animations within the
group or embedded graphic never execute.
Category: Runtime Behavior
Used by: Group, Embedded Symbol
Can be read by script at run time: Yes
Info: Editing the Embedded Graphic on page 327
UnFilledColor Purpose: Determines the element's unfilled area appearance.
Category: Fill Style
Used by: Rectangle, Rounded Rectangle, Ellipse, Polygon, Closed
Curve, 2 Point Pie, 3 Point Pie, 2 Point Chord, 3 Point Chord, Button,
Text Box, Path
Can be read by script at run time: No
Info: Setting Unfilled Style on page 145

UpImage* Purpose: Defines the image that is used in the button element when it
is un-clicked or released.
Category: Appearance
Used by: Button
Can be read by script at run time: No
Info: Configuring Buttons with Images on page 182

Value Purpose: Reads the value of the selected item, or selects the item with
that value if it exists. Its data type depends on the cont rol.
Category: not available at design time
Used by: Radio Button Group, Check Box, Edit Box, Combo Box,
Calendar, DateTime Picker, List Box
Can be read by script at run time: Yes
Info: Reading and Writing the S elected Value at Run Time on page 199

422
List of Element Properties Creating and Managing Industrial Graphics User Guide

Property Purpose, category, usage and further information

VerticalDirection Purpose: Defines the vertical direction of the fill. Can be " Top" or
"Bottom".
Category: Fill Style
Used by: Rectangle, Rounded Rectangle, Ellipse, Polygon, Closed
Curve, 2 Point Pie, 3 Point Pie, 2 Point Chord, 3 Point Chord, Button,
Text Box, Path
Can be read by script at run time: No
Info: Setting Vertical Fill Direction and Percentage on page 146
VerticalPercentFill Purpose: Determines the percentage of vertical fill for the element.
Category: Fill Style
Used by: Rectangle, Rounded Rectangle, Ellipse, Polygon, Closed
Curve, 2 Point Pie, 3 Point Pie, 2 Point Chord, 3 Point Chord, Button,
Text Box, Path
Can be read by script at run time: Yes
Info: Setting Vertical Fill Direction and Percentage on page 146
Visible Purpose: Determines the visibility of the element. This property is
configured at design time and used only at runtime. At design time all
elements are visible irrespective of this setting.
Category: Runtime Behavior
Used by: Rectangle, Rounded Rectangle, Ellipse, Polygon, Closed
Curve, 2 Point Pie, 3 Point Pie, 2 Point Chord, 3 Point Chord, Line, H/V
Line, Polyline, Curve, 2 Point Arc, 3 Point Arc, Button, Text, Text Box,
Image, Radio Button Group, Check Box, Edit Box, Combo Box,
Calendar, DateTime Picker, List Box, Group, Path, Embedded Symbol
Can be read by script at run time: Yes
Info: Changing the Visibility of Elements on page 161

Width Purpose: Defines the width of the element.

Category: Appearance
Used by: Rectangle, Rounded Rectangle, Ellipse, Polygon, Closed
Curve, 2 Point Pie, 3 Point Pie, 2 Point Chord, 3 Point Chord, Line, H/V
Line, Polyline, Curve, 2 Point Arc, 3 Point Arc, Button, Text, Text Box,
Image, Status, Radio Button Group, Check Box, Edit Box, Combo Box,
Calendar, DateTime Picker, List Box, Group, Path, Embedded Symbol
Can be read by script at run time: Yes
Info: Resizing Elements by Changing Size Properties on page 117

423
Creating and Managing Industrial Graphics User Guide List of Element Properties

Property Purpose, category, usage and further information

WordWrap Purpose: When set to True, the text in the button or text box is
formatted to fit as much text on a single line within the horizontal
bounding area of the element and then continued to the next line. This
continues as long as there is vertical space.
Category: Appearance
Used by: Button, Text Box
Can be read by script at run time: Yes
Info: Wrapping Text in Buttons on page 182

X Purpose: Defines the left position of the element.

Category: Appearance
Used by: Rectangle, Rounded Rectangle, Ellipse, Polygon, Closed
Curve, 2 Point Pie, 3 Point Pie, 2 Point Chord, 3 Point Chord, Line, H/V
Line, Polyline, Curve, 2 Point Arc, 3 Point Arc, Button, Text, Text Box,
Image, Status, Radio Button Group, Check Box, Edit Box , Combo Box,
Calendar, DateTime Picker, List Box, Group, Path, Embedded Symbol
Can be read by script at run time: Yes
Info: Moving Elements on page 111

Y Purpose: Defines the top position of the element.

Category: Appearance
Used by: Rectangle, Rounded Rectangle, Ellipse, Polygon, Closed
Curve, 2 Point Pie, 3 Point Pie, 2 Point Chord, 3 Point Chord, Line, H/V
Line, Polyline, Curve, 2 Point Arc, 3 Point Arc, Button, Text, Text Box,
Image, Status, Radio Button Group, Check Box, Edit Box, Combo Box,
Calendar, DateTime Picker, List Box, Group, Path, Embedded Symbol
Can be read by script at run time: Yes
Info: Moving Elements on page 111

List by Functional Area

Each property of the elements, the canvas, element groups and embedded objects belongs to one of the
following property categories:
 Graphic
 Appearance
 Fill Style
 Line Style
 Text Style

424
List of Element Properties Creating and Managing Industrial Graphics User Guide

 Runtime Behavior
 Custom Properties

Graphic Category Properties

The following table cont ains a list of properties in the Graphic property category used by the:
 Elements.
 Canvas.
 Element groups.
 Embedded graphics.
It shows their purpose, where they are used and where to find more information on how to use them.
An asterisk (*) identifies properties that are specific to only one type of element or the canvas, a group or
an embedded graphic.

Property Purpose, category, usage and further information

Description* Purpose: Contains a meaningful description of the graphic.

Category: Graphic
Used by: Canvas
Can be read by script at run time: No
Info: Setting the Radius of Rounded Rectangles on page 177

Name Purpose: Gives the element a meaningful unique name.

Category: Graphic
Used by: Rectangle, Rounded Rectangle, Ellipse, Polygon, Closed
Curve, 2 Point Pie, 3 Point Pie, 2 Point Chord, 3 Point Chord, Line, H/V
Line, Polyline, Curve, 2 Point Arc, 3 Point Arc, Button, Text, Text Box,
Image, Status, Radio Button Group, Check Box, Edit Box, Combo Box,
Calendar, DateTime Picker, List Box, Embedded Symbol, Path
Can be read by script at run time: No
Info: Setting the Radius of Rounded Rectangles on page 177

Appearance Category Properties

The following table cont ains a list of properties in the Appearance property category used by the:
 Elements.
 Canvas.
 Element groups.
 Embedded graphics.
It shows their purpose, where they are used and where to find more information on how to use them.

425
Creating and Managing Industrial Graphics User Guide List of Element Properties

Asterisk (*) marks properties that are specific to only one type of element or the canvas, a group or an
embedded graphic.

Property Purpose, category, usage and further information

AbsoluteAnchor* Purpose: Defines the absolute anchor point of the source graphic. By
default, this is the center point of all elements on the canvas but can be
changed.
Category: Appearance
Used by: Canvas
Can be read by script at run time: No
Info: Size Propagation and Anchor Points on page 39

AnchorFixedTo Purpose: Determines if the anchor point is fixed to the canvas when
you resize, delet e, or add elements (Absolut e), or if the anc hor point is
recalculat ed relative to the element sizes and positions (Relative).
Category: Appearance
Used by: Embedded Symbol, Canvas
Can be read by script at run time: No
Info: Size Propagation and Anchor Points on page 39

AbsoluteOrigin Purpose: Defines an X, Y location relative to the top, left (0, 0) origin of
the graphic or window.
Category: Appearance
Used by: Rectangle, Rounded Rectangle, Ellipse, Polygon, Closed
Curve, 2 Point Pie, 3 Point Pie, 2 Point Chord, 3 Point Chord, Line, H/V
Line, Polyline, Curve, 2 Point Arc, 3 Point Arc, Button, Text, Text Box,
Image, Status, Embedded Symbol, Group, Path, Radio Button Group,
Check Box, Edit Box, Combo Box, Calendar, DateTime Picker, List
Box.
Can be read by script at run time: No
Info: Changing Points of Origin in the Properties Editor on page 121
AnchorP oint* Purpose: Defines the anchor X, Y location of the embedded graphic.
Category: Appearance
Used by: Embedded Symbol
Can be read by script at run time: No
Info: Size Propagation and Anchor Points on page 39

426
List of Element Properties Creating and Managing Industrial Graphics User Guide

Property Purpose, category, usage and further information

Angle Purpose: Defines the current angle of rotation of the element. 0 is

always the top of the element relative to the canvas. Angle is always
determined relative to the top of the element and rotates in a clockwise
direction.
Category: Appearance
Used by: Rectangle, Rounded Rectangle, Ellipse, Polygon, Closed
Curve, 2 Point Pie, 3 Point Pie, 2 Point Chord, 3 Point Chord, Line, H/V
Line, Polyline, Curve, 2 Point Arc, 3 Point Arc, Button, Text, Text Box,
Image, Status, Group, Embedded Symbol
Can be read by script at run time: Yes
Info: Rotating Elements by Changing the Angle Property on page 120
AutoScale Purpose: If this property is set to True then the text is stretched
horizontally and vertically (larger or smaller) to fit the bounding
rectangle.
Category: Appearance
Used by: Button, Text Box
Can be read by script at run time: Yes
Info: Setting Auto Scaling and Word Wrapping for a Text Box on page
179
ButtonStyle* Purpose: Determines if the button appears as a standard button or as
an image.
Category: Appearance
Used by: Button
Can be read by script at run time: No
Info: Configuring Buttons with Images on page 182

CalendarColumns* Purpose: Defines the number of columns the calendar object has.
Category: Appearance
Used by: Calendar
Can be read by script at run time: No
Info: Setting the Number of Calendar Month Sheets on page 205
CalendarRows* Purpose: Defines the number of rows the calendar object has.
Category: Appearance
Used by: Calendar
Can be read by script at run time: No
Info: Setting the Number of Calendar Month Sheets on page 205

427
Creating and Managing Industrial Graphics User Guide List of Element Properties

Property Purpose, category, usage and further information

Checked* Purpose: Sets or gets the value of check box. This is the initial value of
the check box when the cont rol is not connected to a reference and is
overridden at run time with value of reference.
Category: Appearance
Used by: Check Box
Can be read by script at run time: Yes
Info: Setting the Default State of a Check Box Control on page 201
Cont rolStyle Purpose: Defines the control style as Flat or 3D.
Category: Appearance
Used by: Radio Button Group, Check Box
Can be read by script at run time: No
Info: Setting the Layout of the Radio Button Group Options on page
200 and Setting the 3D appearance of a Check Box Control on page
201
CustomFormat* Purpose: Defines the format to be used in the DateTime Picker control
for input of a date or time.
Category: Appearance
Used by: DateTime Picker
Can be read by script at run time: No
Info: Configuring DateTime Pick er Controls on page 207

DefaultValue Purpose: The default time value to use for the control.
Category: Appearance
Used by: Calendar, DateTime Picker
Can be read by script at run time: No
Info: Setting the Default Value of the Calendar Control on page 207
and Configuring DateTime Pick er Controls on page 207
DownImage* Purpose: Defines the image that is rendered in the button element
when it is clicked or held down.
Category: Appearance
Used by: Button
Can be read by script at run time: No
Info: Configuring Buttons with Images on page 182

428
List of Element Properties Creating and Managing Industrial Graphics User Guide

Property Purpose, category, usage and further information

DropDownType* Purpose: Defines the type of combo box: simple, drop-down or

drop-down list.
Category: Appearance
Used by: Combo Box
Can be read by script at run time: No
Info: Setting the Type of Combo Box Control on page 203

DropDownWidth* Purpose: Defines the width of the drop-down list.

Category: Appearance
Used by: Combo Box
Can be read by script at run time: No
Info: Setting the Width of the Drop-Down List on page 203

DynamicSizeChange* Purpose: Determines if the embedded graphic propagates the size

changes from the source graphic.
Category: Appearance
Used by: Embedded Symbol
Can be read by script at run time: No
Info: Enabling or Disabling Dynamic Size Change of Embedded
Graphics on page 330

End Purpose: Defines the end of a line or H/V line as X, Y location.

Category: Appearance
Used by: Line, H/V Line
Can be read by script at run time: No
Info: Setting Start or End Points of a Line on page 146

FirstDayOfWeek* Purpose: Defines the first day of the week used for the display of the
columns in the calendar.
Category: Appearance
Used by: Calendar
Can be read by script at run time: No
Info: Setting the First Day of the Week on page 205

429
Creating and Managing Industrial Graphics User Guide List of Element Properties

Property Purpose, category, usage and further information

Format* Purpose: Defines the format of the reference values. This is only
available for array mode.
Category: Appearance
Used by: DateTime Picker
Can be read by script at run time: No
Info: Configuring DateTime Pick er Controls on page 207

Has TransparentColor* Purpose: Indicates whether or not the image applies a transparent
color. If True the image is rendered trans parent wherever a color in the
image matches the TransparentColor property.
Category: Appearance
Used by: Image
Can be read by script at run time: Yes
Info: Setting the Image Color Transparency on page 180

Height Purpose: Defines the height of the element.

Category: Appearance
Used by: Rectangle, Rounded Rectangle, Ellipse, Polygon, Closed
Curve, 2 Point Pie, 3 Point Pie, 2 Point Chord, 3 Point Chord, Line, H/V
Line, Polyline, Curve, 2 Point Arc, 3 Point Arc, Button, Text, Text Box,
Image, Status, Radio Button Group, Check Box, Edit Box , Combo Box,
Calendar, DateTime Picker, List Box, Group, Path, Embedded Symbol
Can be read by script at run time: Yes
Info: Resizing Elements by Changing Size Properties on page 117
Horiz ontalScrollbar Purpose: Determines if a horizontal scroll bar appears on a list box
control to allow the user to scroll the list box items horizontally.
Category: Appearance
Used by: List Box
Can be read by script at run time: No
Info: Using a Horizont al Scroll Bar in a List Box Control on page 209
Image* Purpose: Defines the image that is rendered in the element. Any
image format supported by the application can be used.
Category: Appearance
Used by: Image
Can be read by script at run time: No
Info: Selecting a Different Image on page 181

430
List of Element Properties Creating and Managing Industrial Graphics User Guide

Property Purpose, category, usage and further information

ImageAlignment* Purpose: Controls the location of the image relative to the bounding
rectangle of the graphic. This property is only applicable when the
ImageStyle is set to Normal.
Category: Appearance
Used by: Image
Can be read by script at run time: No
Info: Setting the Image Alignment on page 180

ImageStyle Purpose: Defines how the image is rendered relative to its bounding
rectangle.
Category: Appearance
Used by: Button, Image
Can be read by script at run time: No
Info: Setting the Image Dis play Mode on page 179

IntegralHeight Purpose: Determines if the List Box size is an integral multiple of the
Font Size so that a finite number of items fit in it without being clipped.
Category: Appearance
Used by: Combo Box, List Box
Can be read by script at run time: No
Info: Avoiding Clipping of Items in the Simple Combo Box Control on
page 204
Layout* Purpose: Defines the way the radio buttons are arranged in the group
(Horizont al or Vertical).
Category: Appearance
Used by: Radio Button Group
Can be read by script at run time: No
Info: Setting the Layout of the Radio Button Group Options on page
200

431
Creating and Managing Industrial Graphics User Guide List of Element Properties

Property Purpose, category, usage and further information

Locked Purpose: Locks or unlocks the element’s size, position, orient ation and
origin. Other properties that can have an affect on element size,
position, orientation and origin are also locked. These are
element-specific.
Category: Appearance
Used by: Rectangle, Rounded Rectangle, Ellipse, Polygon, Closed
Curve, 2 Point Pie, 3 Point Pie, 2 Point Chord, 3 Point Chord, Line, H/V
Line, Polyline, Curve, 2 Point Arc, 3 Point Arc, Button, Text, Text Box,
Image, Status, Radio Button Group, Check Box, Edit Box, Combo Box,
Calendar, DateTime Picker, List Box, Group, Path, Embedded Symbol
Can be read by script at run time: Yes
Info: Lock ing and Unlock ing Elements on page 131

MaxDropDownItems* Purpose: Defines the maximum number of items the drop-down list
shows.
Category: Appearance
Used by: Combo Box
Can be read by script at run time: No
Info: Setting the Maximum Number of Items to Appear in the Combo
Box Drop-Down List on page 204

Multiline* Purpose: Determines if the control shows several lines of text that
automatically wrap up when reaching the right border of the control.
Category: Appearance
Used by: Edit Box
Can be read by script at run time: No
Info: Configuring the Text to Wrap in an Edit Box C ontrol on page 202

Radius* Purpose: Defines the radius of the corners of the Rounded Rectangle.
Category: Appearance
Used by: Rounded Rectangle
Can be read by script at run time: Yes
Info: Setting the Radius of Rounded Rectangles on page 177

ReadOnly* Purpose: Determines if the us er can type data into the edit box.
Category: Appearance
Used by: Edit Box
Can be read by script at run time: No
Info: Configuring the Text to be Read-Only in an Edit Box Control on

432
List of Element Properties Creating and Managing Industrial Graphics User Guide

Property Purpose, category, usage and further information

page 202

RelativeA nchor* Purpose: Relative anchor point of the source graphic. By default, this
is 0,0.
Category: Appearance
Used by: Canvas
Can be read by script at run time: No
Info: Size Propagation and Anchor Points on page 39

RelativeOrigin Purpose: Defines the relative origin as X, Y location. The location is

relative to the center point of the element (0, 0).
Category: Appearance
Used by: Rectangle, Rounded Rectangle, Ellipse, Polygon, Closed
Curve, 2 Point Pie, 3 Point Pie, 2 Point Chord, 3 Point Chord, Line, H/V
Line, Polyline, Curve, 2 Point Arc, 3 Point Arc, Button, Text, Text Box,
Image, Status, Group, Path, Embedded Symbol
Can be read by script at run time: No
Info: Changing Points of Origin in the Properties Editor on page 121

ShowToday* Purpose: Determines if today's date is shown on the calendar control.

Category: Appearance
Used by: Calendar
Can be read by script at run time: No
Info: Showing or Hiding Today’s Date on a Calendar Control on page
205
Smoothing* Purpose: When False the graphics are rendered normally, when True
graphics are rendered with anti -aliasing which produc es a smoother
appearing graphic.
Category: Appearance
Used by: Canvas
Can be read by script at run time: No
Info: Setting the Radius of Rounded Rectangles on page 177

433
Creating and Managing Industrial Graphics User Guide List of Element Properties

Property Purpose, category, usage and further information

Start Purpose: Defines the start of a line or H/V line as X, Y location.

Category: Appearance
Used by: Line, H/V Line
Can be read by script at run time: No
Info: Setting Start or End Points of a Line on page 146

StartAngle Purpose: Defines the starting angle of an Arc, Pie or Chord. 0 is

always the top of the graphic relative to its orientation. A positive
number is clockwise from 0 and a negative number is counter
clockwise from 0. If a negative number is used to set the property it is
automatically converted to a positive value.
Category: Appearance
Used by: 2 Point Pie, 3 Point Pie, 2 Point Chord, 3 Point Chord, 2 Point
Arc, 3 Point Arc
Can be read by script at run time: Yes
Info: Changing Angles of Arcs, Pies and Chords on page 184

SweepAngle Purpose: Defines the ending angle of the Arc, Pie or Chord. This angle
is always measured from the start angle.
Category: Appearance
Used by: 2 Point Pie, 3 Point Pie, 2 Point Chord, 3 Point Chord, 2 Point
Arc, 3 Point Arc
Can be read by script at run time: Yes
Info: Changing Angles of Arcs, Pies and Chords on page 184

Tension Purpose: Specifies how tightly the curve bends through the cont rol
points of the curve.
Category: Appearance
Used by: Closed Curve, Curve
Can be read by script at run time: Yes
Info: Changing the Tension of Curves and Closed Curves on page 184
Text Purpose: Defines the unicode text that is shown by the element.
Category: Appearance
Used by: Button, Text, Text Box, Edit Box
Can be read by script at run time: Yes
Info: Setting the Displayed Text on page 148

434
List of Element Properties Creating and Managing Industrial Graphics User Guide

Property Purpose, category, usage and further information

TextFormat Purpose: Defines the formatting string that is applied to the text when it
is shown.
Category: Appearance
Used by: Button, Text, Text Box
Can be read by script at run time: Yes
Info: Setting the Text Display Format on page 148

Trans parency Purpose: Defines the transparency. A value of 0 means fully opaque
and a value of 100 means fully transparent.
Category: Appearance
Used by: Rectangle, Rounded Rectangle, Ellipse, Polygon, Closed
Curve, 2 Point Pie, 3 Point Pie, 2 Point Chord, 3 Point Chord, Line, H/V
Line, Polyline, Curve, 2 Point Arc, 3 Point Arc, Button, Text, Text Box,
Image, Group, Path, Embedded Symbol
Can be read by script at run time: Yes
Info: Setting the Transparenc y Level of an Element on page 159
Trans parent Color* Purpose: Defines the RGB color value that is used as the transparent
color.
Category: Appearance
Used by: Image
Can be read by script at run time: No
Info: Setting the Image Color Transparency on page 180

UpImage* Purpose: Defines the image that is used in the button element when it
is un-clicked or released.
Category: Appearance
Used by: Button
Can be read by script at run time: No
Info: Configuring Buttons with Images on page 182

Width Purpose: Defines the width of the element.

Category: Appearance
Used by: Rectangle, Rounded Rectangle, Ellipse, Polygon, Closed
Curve, 2 Point Pie, 3 Point Pie, 2 Point Chord, 3 Point Chord, Line, H/V
Line, Polyline, Curve, 2 Point Arc, 3 Point Arc, Button, Text, Text Box,
Image, Status, Radio Button Group, Check Box, Edit Box, Combo Box,
Calendar, DateTime Picker, List Box, Group, Path, Embedded Symbol
Can be read by script at run time: Yes
Info: Resizing Elements by Changing Size Properties on page 117

435
Creating and Managing Industrial Graphics User Guide List of Element Properties

Property Purpose, category, usage and further information

WordWrap Purpose: When set to True, the text in the button or text box is
formatted to fit as much text on a single line within the horizontal
bounding area of the element and then continued to the next line. This
continues as long as there is vertical space.
Category: Appearance
Used by: Button, Text Box
Can be read by script at run time: Yes
Info: Wrapping Text in Buttons on page 182

X Purpose: Defines the left position of the element.

Category: Appearance
Used by: Rectangle, Rounded Rectangle, Ellipse, Polygon, Closed
Curve, 2 Point Pie, 3 Point Pie, 2 Point Chord, 3 Point Chord, Line, H/V
Line, Polyline, Curve, 2 Point Arc, 3 Point Arc, Button, Text, Text Box,
Image, Status, Radio Button Group, Check Box, Edit Box, Combo Box,
Calendar, DateTime Picker, List Box, Group, Path, Embedded Symbol
Can be read by script at run time: Yes
Info: Moving Elements on page 111

Y Purpose: Defines the top position of the element.

Category: Appearance
Used by: Rectangle, Rounded Rectangle, Ellipse, Polygon, Closed
Curve, 2 Point Pie, 3 Point Pie, 2 Point Chord, 3 Point Chord, Line, H/V
Line, Polyline, Curve, 2 Point Arc, 3 Point Arc, Button, Text, Text Box,
Image, Status, Radio Button Group, Check Box, Edit Box, Combo Box,
Calendar, DateTime Picker, List Box, Group, Path, Embedded Symbol
Can be read by script at run time: Yes
Info: Moving Elements on page 111

Fill Style Group Properties

The following table cont ains a list of properties in the Fill Style property category used by the:
 Elements.
 Canvas.
 Element groups.
 Embedded graphics.
It describes their purpose, where they are used and where to find more information on how to use them.

436
List of Element Properties Creating and Managing Industrial Graphics User Guide

An asterisk (*) identifies properties that apply to only one type of element or the canvas, a group or an
embedded graphic.

Property Purpose, category, usage and further information

FillBehavior Purpose: Determines how the Fill (Horizontal, Vertical or Both) should
be applied to the element.
Category: Fill Style
Used by: Rectangle, Rounded Rectangle, Ellipse, Polygon, Closed
Curve, 2 Point Pie, 3 Point Pie, 2 Point Chord, 3 Point Chord, Button,
Text Box, Path
Can be read by script at run time: No
Info: Setting Fill Behavior on page 145

FillColor Purpose: Defines the fill style used for the filled portion of the element.
Category: Fill Style
Used by: Rectangle, Rounded Rectangle, Ellipse, Polygon, Closed
Curve, 2 Point Pie, 3 Point Pie, 2 Point Chord, 3 Point Chord, Button,
Text Box, Radio Button Group, Check Box, Edit Box, Combo Box,
Calendar, List Box, Path
Can be read by script at run time: No
Info: Setting Fill Style on page 144 and Changing Back ground Color
and Text Color of Windows Common Controls on page 199

FillOrientation Purpose: Determines the orientation of the fill when the element
orientation is any value other than 0.
Category: Fill Style
Used by: Rectangle, Rounded Rectangle, Ellipse, Polygon, Closed
Curve, 2 Point Pie, 3 Point Pie, 2 Point Chord, 3 Point Chord, Button,
Text Box, Path
Can be read by script at run time: No
Info: Setting Fill Orient ation on page 145

Horiz ontalDirection Purpose: Determines the horizontal direction of the fill for the element.
Can be "Right" or "Left".
Category: Fill Style
Used by: Rectangle, Rounded Rectangle, Ellipse, Polygon, Closed
Curve, 2 Point Pie, 3 Point Pie, 2 Point Chord, 3 Point Chord, Button,
Text Box, Path
Can be read by script at run time: No
Info: Setting Horizontal Fill Direction and Percentage on page 145

437
Creating and Managing Industrial Graphics User Guide List of Element Properties

Property Purpose, category, usage and further information

Horiz ontalPercentFill Purpose: Determines the percentage of horizontal fill for the element.
Category: Fill Style
Used by: Rectangle, Rounded Rectangle, Ellipse, Polygon, Closed
Curve, 2 Point Pie, 3 Point Pie, 2 Point Chord, 3 Point Chord, Button,
Text Box, Path
Can be read by script at run time: Yes
Info: Setting Horizontal Fill Direction and Percentage on page 145
TitleFillColor* Purpose: Determines the background solid color in the title bar of the
calendar cont rol.
Category: Fill Style
Used by: Calendar
Can be read by script at run time: No
Info: Setting Title Fill Color and Text Color on a Calendar Control on
page 206
UnFilledColor Purpose: Determines the element's unfilled area appearance.
Category: Fill Style
Used by: Rectangle, Rounded Rectangle, Ellipse, Polygon, Closed
Curve, 2 Point Pie, 3 Point Pie, 2 Point Chord, 3 Point Chord, Button,
Text Box, Path
Can be read by script at run time: No
Info: Setting Unfilled Style on page 145

VerticalDirection Purpose: Defines the vertical direction of the fill. Can be " Top" or
"Bottom".
Category: Fill Style
Used by: Rectangle, Rounded Rectangle, Ellipse, Polygon, Closed
Curve, 2 Point Pie, 3 Point Pie, 2 Point Chord, 3 Point Chord, Button,
Text Box, Path
Can be read by script at run time: No
Info: Setting Vertical Fill Direction and Percentage on page 146

VerticalPercentFill Purpose: Determines the percent age of vertical fill for the element.
Category: Fill Style
Used by: Rectangle, Rounded Rectangle, Ellipse, Polygon, Closed
Curve, 2 Point Pie, 3 Point Pie, 2 Point Chord, 3 Point Chord, Button,
Text Box, Path
Can be read by script at run time: Yes
Info: Setting Vertical Fill Direction and Percentage on page 146

438
List of Element Properties Creating and Managing Industrial Graphics User Guide

Line Style Group Properties

The following table cont ains a list of properties in the Line Style property category used by the:
 Elements.
 Canvas.
 Element groups.
 Embedded graphics.
It shows their purpose, where they are used and where to find more information on how to use them.
Asterisk (*) marks properties that are specific to only one type of element or the canvas, a group or an
embedded graphic.

Property Purpose, category, usage and further information

EndCap Purpose: Defines the cap used at the end of the line of an open
element.
Category: Line Style
Used by: Line, H/V Line, Polyline, Curve, 2 Point Arc, 3 Point Arc
Can be read by script at run time: No
Info: Setting Line End Shape and Size on page 178
LineColor Purpose: Defines the color and affects of the line or border.
Category: Line Style
Used by: Rectangle, Rounded Rectangle, Ellipse, Polygon, Closed
Curve, 2 Point Pie, 3 Point Pie, 2 Point Chord, 3 Point Chord, Line, H/V
Line, Polyline, Curve, 2 Point Arc, 3 Point Arc, Text Box, Path
Can be read by script at run time: No
Info: Setting the Line Style on page 147
LineP attern Purpose: Defines the pattern of the line or border.
Category: Line Style
Used by: Rectangle, Rounded Rectangle, Ellipse, Polygon, Closed
Curve, 2 Point Pie, 3 Point Pie, 2 Point Chord, 3 Point Chord, Line, H/V
Line, Polyline, Curve, 2 Point Arc, 3 Point Arc, Text Box, Path
Can be read by script at run time: No
Info: Setting the Line Pattern on page 147

LineWeight Purpose: Determines the weight of the element’s line or border. A

value of 0 means that there is no line or border.
Category: Line Style
Used by: Rectangle, Rounded Rectangle, Ellipse, Polygon, Closed
Curve, 2 Point Pie, 3 Point Pie, 2 Point Chord, 3 Point Chord, Line, H/V
Line, Polyline, Curve, 2 Point Arc, 3 Point Arc, Text Box, Path
Can be read by script at run time: Yes
Info: Setting the Line Weight on page 147

439
Creating and Managing Industrial Graphics User Guide List of Element Properties

Property Purpose, category, usage and further information

StartCap Purpose: Defines the cap used at the start of the line of an open
graphic.
Category: Line Style
Used by: Line, H/V Line, Polyline, Curve, 2 Point Arc, 3 Point Arc
Can be read by script at run time: No
Info: Setting Line End Shape and Size on page 178

Text Style Group Properties

The following table cont ains a list of properties in the Text Style property category used by the:
 Elements.
 Canvas.
 Element groups.
 Embedded graphics.
It shows their purpose, where they are used and where to find more information on how to use them.
An asterisk (*) indicates properties that are specific to only one type of element or the canvas, a group or
an embedded graphic.

Property Purpose, category, usage and further information

Alignment Purpose: Controls the location of the text relative to the bounding
rectangle of the element.
Category: Text Style
Used by: Button, Text, Text Box
Can be read by script at run time: No
Info: Setting the Text Alignment on page 149

Caption* Purpose: Defines the text shown on the Check Box at design time and
at run time when the caption property is not bound to a reference in the
checkbox animation panel.
Category: Text Style
Used by: Check Box
Can be read by script at run time: No
Info: Setting the Caption Text of a Check Box Control on page 201

440
List of Element Properties Creating and Managing Industrial Graphics User Guide

Property Purpose, category, usage and further information

Font Purpose: Defines the basic text font as defined by the operating
system.
Category: Text Style
Used by: Button, Text, Text Box, Radio Button Group, Check Box, Edit
Box, Combo Box, Calendar, DateTime Picker, List Box
Can be read by script at run time: No
Info: Setting the Text Font on page 148

TextColor Purpose: Defines the color and affects applied to the text.
Category: Text Style
Used by: Button, Text, Text Box, Radio Button Group, Check Box,
Edit Box, Combo Box, Calendar
Can be read by script at run time: No
Info: Setting the Text Color on page 149 and Changing Back ground
Color and Text Color of Windows Common Controls on page 199
TitleTextColor* Purpose: Determines the text solid color in the title bar of the calendar
control.
Category: Text Style
Used by: Calendar
Can be read by script at run time: No
Info: Setting Title Fill Color and Text Color on a Calendar Control on
page 206
TrailingTextColor* Purpose: Determines the text solid color of the t ext for the trailing days.
The trailing days are days outside the current month.
Category: Text Style
Used by: Calendar
Can be read by script at run time: No
Info: Setting the Text Color for Trailing Dates in a Calendar Control on
page 206

Runtime Behavior Group Properties

The following table cont ains a list of properties in the Runtime Behavior property category used by the:
 Elements.
 Canvas.
 Element groups.
 Embedded graphics.
The table shows the purpose of Runtime Behavior properties, where they are used, and where to find
more information on how to use them.

441
Creating and Managing Industrial Graphics User Guide List of Element Properties

Asterisk (*) marks properties that are specific to only one type of element or the canvas, a group or an
embedded graphic.

Property Purpose, category, usage and further information

Enabled Purpose: When set to True enables the element at run time and allows
the user to interact with it. If the property is set to False the user cannot
use the mouse or keyboard to interact with the element. Data changes
as a result of an animation or script still execute.
Category: Runtime Behavior
Used by: Rectangle, Rounded Rectangle, Ellipse, Polygon, Closed
Curve, 2 Point Pie, 3 Point Pie, 2 Point Chord, 3 Point Chord, Line, H/V
Line, Polyline, Curve, 2 Point Arc, 3 Point Arc, Button, Text, Text Box,
Image, Radio Button Group, Check Box, Edit Box, Combo Box,
Calendar, DateTime Picker, List Box, Group, Path, Embedded Symbol
Can be read by script at run time: Yes
Info: Enabling and Disabling Elements for Run -Time Interaction on
page 160
Language Purpose: Defines the current language of the graphic.
Category: Runtime Behavior
Used by: Embedded Symbol
Can be read by script at run time: Yes
Info: Selecting the Language for a Graphic on page 341.

LanguageID Purpose: Defines the current language ID of the graphic.

Category: Runtime Behavior
Used by: Embedded Symbol
Can be read by script at run time: Yes
Info: Selecting the Language for a Graphic on page 341.

MultiplePopupsAllowed* Purpose: If Fals e, ShowSymbol animations only show within a single

dialog window no matter how many animations are invoked and
regardless of how the animations are configured. If True, ShowSymbol
animations show in separate dialog windows.
Category: Runtime Behavior
Used by: Canvas
Can be read by script at run time: No
Info: Setting the Radius of Rounded Rectangles on page 177

442
List of Element Properties Creating and Managing Industrial Graphics User Guide

Property Purpose, category, usage and further information

OwningObject* Purpose: Used as the ArchestrA object reference to replace all "Me."
references in expressions and scripts. Everywhere there is a "Me."
reference this object reference is used instead. The object name can
be set either using a tag or hierarchical name of an AutomationObject.
Category: Runtime Behavior
Used by: Embedded Symbol
Can be read by script at run time: Yes
Info: Detecting and Editing the Containing Object Instance on page
331
Scripts* Purpose: Defines a collection of scripts configured for the graphic.
Category: Runtime Behavior
Used by: Canvas
Can be read by script at run time: No
Info: Adding and Maintaining Graphic Scripts on page 297
SymbolReference* Purpose: Contains the exact location that the Embedded Symbol is
linked to. This can help the user in locating the original definition for
editing purposes.
This property is always disabled.
Category: Runtime Behavior
Used by: Embedded Symbol
Can be read by script at run time: No
Info: Detecting the Source Graphic of an Embedded Graphic on page
328

TabOrder Purpose: Defines the tab order for the element. The tab order is only
used when navigating by the keyboard. This property is valid only when
the TabStop property is set to true.
Category: Runtime Behavior
Used by: Rectangle, Rounded Rectangle, Ellipse, Polygon, Closed
Curve, 2 Point Pie, 3 Point Pie, 2 Point Chord, 3 Point Chord, Line, H/V
Line, Polyline, Curve, 2 Point Arc, 3 Point Arc, Button, Text, Text Box,
Image, Radio Button Group, Check Box, Edit Box, Combo Box,
Calendar, DateTime Picker, List Box, Group, Path, Embedded Symbol
Can be read by script at run time: No
Info: Editing the Tab Order of an Element on page 161

443
Creating and Managing Industrial Graphics User Guide List of Element Properties

Property Purpose, category, usage and further information

TabStop Purpose: Determines if the element can be navigated to and can

receive focus at run time.
Category: Runtime Behavior
Used by: Rectangle, Rounded Rectangle, Ellipse, Polygon, Closed
Curve, 2 Point Pie, 3 Point Pie, 2 Point Chord, 3 Point Chord, Line, H/V
Line, Polyline, Curve, 2 Point Arc, 3 Point Arc, Button, Text, Text Box,
Image, Radio Button Group, Check Box, Edit Box, Combo Box,
Calendar, DateTime Picker, List Box, Group, Path, Embedded Symbol
Can be read by script at run time: No
Info: Editing the Tab Order of an Element on page 161

TreatAsIcon Purpose: If this property is set to False, the animations defined on the
graphics within the group or embedded graphic take precedence over
an animation defined on the group or embedded graphic. If there are no
animations or the us er clicked on an area of the group or embedded
graphic that does not have an animation, then the group or embedded
graphic animation ex ecutes.
If the property is set to True, only the animation on the group or
embedded graphic is executed. The interactive animations within the
group or embedded graphic never execute.
Category: Runtime Behavior
Used by: Group, Embedded Symbol
Can be read by script at run time: Yes
Info: Editing the Embedded Graphic on page 327
Visible Purpose: Determines the visibility of the element. This property is
configured at design time and used only at runtime. At design time all
elements are visible irrespective of this setting.
Category: Runtime Behavior
Used by: Rectangle, Rounded Rectangle, Ellipse, Polygon, Closed
Curve, 2 Point Pie, 3 Point Pie, 2 Point Chord, 3 Point Chord, Line, H/V
Line, Polyline, Curve, 2 Point Arc, 3 Point Arc, Button, Text, Text Box,
Image, Radio Button Group, Check Box, Edit Box, Combo Box,
Calendar, DateTime Picker, List Box, Group, Path, Embedded Symbol
Can be read by script at run time: Yes
Info: Changing the Visibility of Elements on page 161

Custom Properties Group Properties

The following table cont ains a list of properties in the Custom Properties property category used by the:
 Elements.
 Canvas.
 Element groups.

444
List of Element Properties Creating and Managing Industrial Graphics User Guide

 Embedded graphics.
It shows their purpose, where they are used and where to find more information on how to use them.
The Custom Properties group contains also any other custom property you define.

Property Purpose, category, usage and further information

CustomProperties Purpose: The collection of CustomP roperties defined by the graphic.

Category: Custom Properties
Used by: Canvas, Embedded Symbol
Can be read by script at run time: No
Info: Using Custom Properties on page 211

Order of Precedence for Property Styles

The order of precedence for property styles from high to low is:
1. Quality and Status
2. Element Style Animation
3. Style Animations
4. Group-level Element Style
5. Element-level Element Style
6. Local element-level style

445
 Creating and Managing Industrial Graphics User Guide

A PPENDIX B
Windows Common Control List Methods
In This Appendix
Overview of Windows Common Control List Methods .................................................................... 447

Overview of Windows Common Control List Methods

You can use the methods of the Windows common controls to manipulate the controls at run time by
using them in scripting.
The following table cont ains a list of methods you can use in scripting to:
 Load and save the contents of the Edit Box control from and to a file.
 Manipulate items in the lists of the List Box control and Combo Box control.
 Manipulate items in the lists of the List Box control and Combo Box control.

Method Purpose, syntax and information

AddIt em Purpose: Add an item (coerced to String) to the list. If the list is sorted,
then the new item is inserted at the right position and selected. If the list is
unsorted, the item is added to the bottom of the list.
Used by: Combo Box, List Box

Note: This function does not work when using an Enum or Array to
populate the List Box.

Syntax: Cont rolName.A ddItem(CaptionString);

Info: Adding and Inserting Items into a List on page 306
Clear Purpose: Removes all items from the List. If the list is bound, it clears the
bound reference (array or enum) in ArchestrA.

Note: This function does not work when using an Enum or Array to
populate the List Box.

Used by: Combo Box, List Box

Syntax: [Link]();
Info: Deleting Items from a List on page 307
Delet eItem Purpose: Accepts an index as a parameter and removes that item from
the list. The first item in the list has an index of 0.
Used by: Combo Box, List Box
Syntax: [Link](Index);
Info: Deleting Items from a List on page 307

447
Creating and Managing Industrial Graphics User Guide Windows Common Control List Methods

Method Purpose, syntax and information

Delet eSelection Purpose: Delete the currently selected item from the list.
Used by: Combo Box, List Box
Syntax: [Link]();
Info: Deleting Items from a List on page 307

FindItem Purpose: Accepts a string as a parameter and returns the index of the first
item that matches the string. The first item in the list has an index of 0.
Used by: Combo Box, List Box
Syntax: [Link](SearchString);
Info: Finding an Item in a List on page 308
GetItem Purpose: Returns the item associated wit h an index supplied as a
parameter to this function. The first item in the list has an index of 0.
Used by: Combo Box, List Box
Syntax: ItemCaption = [Link] Item(Index );
Info: Reading the Caption of a Selected Item in a List on page 308
InsertItem Purpose: Inserts the supplied string after the current selection in the List.
Does not work if list is sorted.
Used by: Combo Box, List Box
Syntax: [Link] Item(String);
Info: Adding and Inserting Items into a List on page 306

SetItemData Purpose: Associates a value with an item in the list which index is
provided to the function. The first item in the list has an index of 0.

Note: This function only works when UseV aluesAsItems is set to false. It
does not work when using an Enum or Array to populate the List Box
control.

Used by: Combo Box, List Box

Syntax: [Link] a(Index,Value);
Info: Associating Items with Values in a List on page 308

GetItemDat a Purpose: Returns the value associated with t he item in the list which index
is supplied to the function. The first item in the list has an index of 0.

Note: This function only works when UseV aluesAsItems is set to false. It
does not work when using an Enum or Array to populate the List Box
control.

Used by: Combo Box, List Box

Syntax: Value = [Link](Index);
Info: Associating Items with Values in a List on page 308

448
Windows Common Control List Methods Creating and Managing Industrial Graphics User Guide

Method Purpose, syntax and information

LoadList Purpose: Loads a list of strings from a file which name is passed as
parameter to the function. The default location for files is the users folder,
for example: c:\documents and settings\username.

Note: The LoadList method does not work when using an E num or Array to
populate the List Box control.

Used by: Combo Box, List Box

Syntax: [Link](FileName);
Info: Loading and Saving Item Lists on page 309

LoadText Purpose: Loads a text from a file into the Edit Box control. The default
location for files is the users folder, for example: c:\documents and
settings\username.
Used by: Edit Box
Syntax: [Link](FileName);
Info: Configuring Edit Box Methods on page 306

SaveList Purpose: Save a list to a file which name is passed as parameter to the
function. The default location for files is the users folder, for example:
c:\documents and settings\username.
Used by: Combo Box, List Box
Syntax: [Link](FileName);
Info: Loading and Saving Item Lists on page 309

SaveText Purpose: Saves the current text in the Edit Box control to a file. The
default location for files is the users folder, for example: c: \documents and
settings\username.
Used by: Edit Box
Syntax: [Link](FileName);
Info: Configuring Edit Box Methods on page 306

449
 Creating and Managing Industrial Graphics User Guide

Index
importing symbols and graphic toolsets • 69
. arcs
.aaPKG file changing sweep angle • 184
importing client controls from • 312 arrowhead line end • 178
attributes
A InTouchViewApp • 229
aaHistClient [Link] • 317 reference mode • 230
AbsoluteAnchor property • 403 referencing a SuperTag • 229
AbsoluteOrigin property • 403 writing to attributes with Secured Write or
ActiveFactory TagPicker client control • 312
Verified Write security • 298
AddIt em() method • 447
auto image display mode • 179
Alignment property • 403 AutomationObject instances
anchor points
creating symbols • 61
changing position • 329
location source of embedded symbol • 331
hiding • 330 AutomationObject templates
setting • 329
re-using symbols • 61
AnchorFixedTo property • 403
using for multiple instances of symbols • 19
AnchorP oint property • 403
AutoScale property • 403
Angle property • 120, 403
Animation Summary • 223
animations B
adding to graphic element • 223 basic objects • 54
associating with client control container blink behavior • 168, 187
properties • 318 Brick pattern property • 158
buttons
comparis on between InTouch and Industrial
Graphic Editor • 57 down image • 182

connecting with InTouchViewApp attributes DownImage property • 182

• 229 ButtonStyle property • 403
buttonsUpImage property • 182
element-specific • 275
fill orientation • 245, 247
hiding list • 224
C
Calendar controls
language switching • 340
ShowToday property • 403
types • 223
TitleFillColor property • 403
unfill color • 245, 247
TitleTextColor property • 403
ArchestrA package file
CalendarColumns property • 403
exporting symbols to • 69
CalendarRows property • 403

451
Creating and Managing Industrial Graphics User Guide Index

Caption property • 403 curves

Check Board pattern property • 158 deleting control points • 183
Checked property • 403
drawing • 102
chords
custom palette
changing start and sweep angle • 184
adding colors to • 153
setting sweep angle • 184
description • 153
circle line end • 178
custom properties
circular reference • 37
adding to a symbols • 52
Clear() method • 447
client controls deleting • 212
description • 311 description • 211
embedding a symbol into an InTouch language switching • 344, 351
application • 29 translating • 345
translating • 345, 346 translations • 344
color bar • 152 CustomFormat property • 403
color disk • 152 CustomProperties property • 403
Color Picker • 153
Color1 property • 144, 403
Color2 property • 144, 403
D
Color3 property • 144, 403 data formats in strings • 290
Data Timeout function, OnShow script • 302
colors
dates
adding to custom palette • 153
setting format in format string • 291
analog fill animation • 57
setting long format of DateTime Picker
analog line animation • 57
control • 207
analog text animation • 57 DateTime Picker controls
discrete alarm animation • 57 AbsoluteOrigin() property • 403
discrete text animation • 57 CustomFormat() property • 403
falloff distribution • 156 DefaultValue() property • 403
luminance • 152 Enabled() property • 403
removing from custom palette • 153 Font() property • 403
saturation property • 152 DefaultValue property • 403
setting focus scales width • 157 Delet eItem() method • 447
Delet eSelection() method • 447
setting image transparency color • 180
Description property • 403
setting pattern background • 158 Diagonals pattern property • 158
Combo Box controls
Diamon pattern property • 158
description • 27 diamond line end • 178
NewIndex • 204 discrete data type • 55
saving an item list • 309 DownImage property • 182, 403
Confetti pattern property • 158 DropDownType property • 403
Cont rolStyle property • 201, 403 DropDownWidth property • 403
Count property • 204, 403 dynamically loaded assemblies
Cross pattern property • 158

452
Index Creating and Managing Industrial Graphics User Guide

including during application deployment • language switching • 342, 352

319, 321 showing anc hor point • 330
DynamicSizeChange property • 403
translating custom properties • 345
Enabled property • 403
E End property • 403
Edit Box controls EndCap property • 403
description • 27
Editline property • 202 F
LoadText() method • 447 falloff gradient

SaveText() met hod • 447 description • 156

FillBehavior property • 403
setting text to read-only • 202
FillColor property • 403
elapsed time
FillOrientation property • 403
data type • 55
fills
selecting as custom property • 212
setting style • 144
element mode • 135
setting unfilled style • 145
Element Style
FillStyle property • 144
changing visual properties of element styles
FindItem() method • 447
• 167 FirstDayOfWeek property • 403
element properties • 165 float
fill visual properties • 165 data type • 55
graphic elements • 165 font
importing and exporting in the Galaxy Style language font at run time • 351
Library • 167 language switching • 342
importing optional Galaxy Style Libraries • Font property • 148, 403
167 format painter
line visual properties • 165 using with Element Styles • 172
order of precedence • 166 Format property • 403
functions
outline visual properties • 165
InTouch miscellaneous • 337
showing current styles of a Galaxy • 167
InTouch string • 337
text visual properties • 165
InTouch system • 337
updating at application runtime • 166
using animation • 166
Elements List • 143 G
description • 23 Galaxy Browser
element-specific animations using to embed symbols from the Graphic
Toolbox • 325
description • 223
ellipses Galaxy Style Library
Element Style • 165
drawing • 102
embedded symbols importing and exporting • 167
editing source • 329 GetItem() method • 447
GetItemDat a() method • 447
embedding from Graphic Toolbox • 325

453
Creating and Managing Industrial Graphics User Guide Index

gradients ungrouping • 133

peak • 156 Graphic Toolbox
setting horizontal direction • 155 creating generic symbols • 61
setting transparency • 159 creating symbols • 62
graphic elements customizing Graphic Toolsets • 68
absolute point of origin • 121 deleting Graphic Toolsets • 68
adding animations • 223 embedding source symbols • 325
configuring • 275 moving Graphic Toolsets • 68
description • 51, 101 moving symbols to different Graphic
editing fill properties • 143 Toolsets • 66
editing start or sweep angle wit hin pat h renaming Graphic Toolsets • 67
graphic • 137 storing Industrial Graphics • 19
editing the name • 143 Graphic Toolsets
hiding animation list • 224 moving • 68
hiding at run time • 161 moving symbols • 66
inline editing • 108 groups

language switching • 339 converting embedded symbols • 328

moving with mouse • 111 deleting • 110

overriding appearance depending on quality description • 55

and status attributes • 167 moving custom properties • 328
positioning with Industrial Graphic Editor •
52 H
properties • 403 H/V lines
reference mode • 230 drawing • 102
relative point of origin • 121 handles
removing from a group • 134 description • 106
resetting default animation values • 225 primary • 106
resizing within path graphics • 137 secondary • 106
selecting by lasso • 107 Has TransparentColor property • 179, 403
Height property • 116, 403
sending one level backward • 118
horizontal scroll bar
setting fill behavior • 145
displaying with HorizontalScrollBar property
setting fill gradient • 145 • 403
setting fill orientation • 145 Horiz ontalDirection property • 403
setting overlap when duplicated • 110 Horiz ontalPercentFill property • 403, 436
setting text color • 149 Horiz ontalScrollB ar property • 403

setting the radius of rounded rectangles •

177 I
showing animation list • 224 IDE

static mode reference • 230 creating a new symbol • 62

task list • 101 symbol management tasks • 61

454
Index Creating and Managing Industrial Graphics User Guide

symbol management tools • 61 converting dat a to Industrial Graphic Editor •

Image property • 403 55
ImageAlignment property • 180, 403 differenc es between WindowMaker and
images Industrial Graphic Editor • 51
auto sizing • 179 keyword • 34, 337
properties • 179 linking symbol custom properties to tags •
setting transparency color • 180 214
tiled • 179 overview of A rchestrA integration • 19
ImageStyle property • 403 starting Industrial Graphic Editor • 93
Industrial Graphic Editor
using custom properties with tags • 211
adding animations from Animation
wizards • 54
Summary • 223
InTouch wizards • 53
adding custom properties to a symbol • 52 InTouchViewApp
animation replication • 52 connecting attributes to animations • 229
Canvas drawing area • 54
combining elements into a group • 52 L
comparis on of animations to InTouch • 57 language
comparis on of supported data types to removing for a symbol • 341
InTouch • 55 selecting for a symbol • 341
description • 19 Language property • 403
differenc es between InTouch language switching
WindowMaker • 51 custom properties • 344, 351
element positioning • 52 data types • 353
Elements List • 23 embedded symbols • 342, 352
miscellaneous enhancements • 53 example • 346
starting • 93 font • 342
style replication • 52 graphic elements • 339
supported InTouc h mathematical functions • Industrial Graphic • 339
337
overriding translated custom properties •
supported InTouch string functions • 337 349
supported InTouch system functions • 337 overriding translated string substitutions •
types of scripts • 58 349
undoing a single change • 131 overriding translations in WindowMaker •
usability enhancements • 51 349
inline editing • 108 popup symbols • 352
InsertItem() met hod • 447 precedence rules • 350
IntegralHeight property • 204, 403 propagation of language setting changes •
interaction animations
353
description • 223
run time • 349
InternationalizedString data type • 55
SmartSymbols • 346
InTouch
string substitution • 343

455
Creating and Managing Industrial Graphics User Guide Index

LanguageID property • 403 SetItemData() • 308, 447

Layout property • 403 Multiline property • 403
LineColor property • 403 MultiplePopupsAllowed property • 403
LineP attern property • 403
lines
blink behavior • 169, 187
N
Name property • 403
overriding appearance to indicate a change names
in quality • 185
changing in Properties Editor • 143
LineWeight property • 403
List Box controls changing in the Elements List • 143
NewIndex property • 204, 209, 403
description • 27
getting item data • 308
inserting an item in a list • 306
O
OnShow script Data Timeout function • 302
NewIndex property • 209
OwningObject property • 403
saving the item list • 309
SelectedValue property • 209
P
TopIndex property • 209
pan
LoadList() method • 447
using mouse • 96
LoadText() method • 447
Locked property • 403 path graphics
description • 51
path mode • 135
M patterns
managed application • 229
setting transparency • 159
MaxDropDownItems property • 204, 403
peak gradient • 156
message data type • 55
Percent pattern property • 158
methods
pies
AbsoluteOrigin property • 403
changing sweep angle • 184
AddIt em() • 306, 447 polylines
BindTo() • 219 drawing • 102
Clear() • 307, 447 moving control points • 183
Delet eItem() • 307, 447 popup symbols
Delet eSection() • 307 language switching • 352
Delet eSelection() • 447 pop-ups • 163
FindItem() • 308, 447 properties
AbsoluteAnchor • 329, 403, 425
GetItem() • 308, 447
AbsoluteOrigin • 425
GetItemDat a() • 308, 447
InsertItem() • 306, 447 Alignment • 403, 440
AnchorFixedTo • 403, 425
LoadList() • 309, 447
AnchorP oint • 403, 425
LoadText() • 306, 447
SaveList() • 309, 447 Angle • 120, 403, 425
AutoScale • 403, 425
SaveText() • 306, 447

456
Index Creating and Managing Industrial Graphics User Guide

ButtonStyle • 403, 425 Language • 403, 441

CalendarColumns • 403, 425 LanguageID • 403, 441
CalendarRows • 403, 425 Layout • 403, 425
Caption • 403, 440 LineColor • 403, 439
changing element tab order with • 161 LineP attern • 403, 439
Checked • 403, 425 LineWeight • 403, 439
client control container • 313 Locked • 403, 425
Color1 • 144, 403 MaxDropDownItem • 403
Color2 • 144, 403 MaxDropDownItems • 204, 425
Color3 • 144, 403 Multiline • 202, 403, 425
Cont rolStyle • 201, 403, 425 MultiplePopupsAllowed • 403, 441
Count • 204, 209, 403 Name • 403, 425
CustomFormat • 403, 425 NewIndex • 204, 209, 403
CustomProperties • 403, 444 OwningObject • 331, 403, 441
DefaultValue • 403, 425 Radius • 403, 425
Description • 403, 425 ReadOnly • 202, 403, 425
DownImage • 182, 403, 425 RelativeA nchor • 329, 403, 425
DropDownType • 403, 425 RelativeOrigin • 403, 425
DropDownWidth • 403, 425 Scripts • 403, 441
DynamicSizeChange • 403, 425 SelectedValue • 209, 403
Enabled • 403, 441 selecting replacement image with • 181
End • 403, 425 setting fill behavior • 145
EndCap • 403, 439 setting text display format with • 148
FillBehavior • 145, 403, 436 setting text font with • 148
FillColor • 403, 436 ShowToday • 403, 425
FillOrientation • 403, 436 Smoothing • 403, 425
FillStyle • 144 Start • 403, 425
FirstDayOfWeek • 403, 425 StartAngle • 403, 425
Font • 403, 440 StartCap • 403, 439
Format • 403, 425 SweepAngle • 403, 425
Has TransparentColor • 179, 403, 425 SymbolReference • 403, 441
Height • 116, 403, 425 TabOrder • 403, 441
Horiz ontalDirection • 403, 436 TabStop • 161, 403, 441
Horiz ontalPercentFill • 403, 436 Tension • 403, 425
Horiz ontalScrollbar • 209, 403, 425 Text • 403, 425
Image • 181, 403, 425 TextColor • 403, 440
ImageAlignment • 403, 425 TextFormat • 148, 403, 425
ImageStyle • 403, 425 TitleFillColor • 403, 436
IntegralHeight • 204, 209, 403, 425 TitleTextColor • 403, 440

457
Creating and Managing Industrial Graphics User Guide Index

topIndex • 403 RelativeA nchor property • 329, 403

RelativeOrigin property • 403
TrailingTextColor • 403, 440
RGB color properties • 152
Trans parency • 403, 425
rounded rectangles
Trans parent Color • 179, 180, 403, 425 description • 177
TreatAsIcon • 403, 441
reducing radius • 177
UnFilledColor • 403, 436
setting exact radius • 177
UpImage • 182, 403, 425
using Combo Box control at run time • 204
S
using List Box controls at run time • 209 satellite assemblies
Value • 199, 403 translations • 345
VerticalDirection • 403, 436 SaveList() method • 447
VerticalPercentFill • 403, 436 SaveText() met hod • 447
scripts
Visible • 403, 441
Width • 116, 403, 425 application • 59
condition • 59
WordWrap • 182, 403, 425
configuring to symbols • 297
X • 111, 403, 425
Y • 111, 403, 425 data change • 59
Properties Editor description • 297

changing element names • 143 execution order • 297

changing relative point of origin • 121 key • 59
description • 24 named • 297
predefined • 297

Q security • 298
quality setting time-out period for symbol script •
changing status to run named scripts • 297 301
Scripts property • 403
overriding element appearance depending
Secured Write • 298
on attributes • 167
security
overriding element fill appearance to
in scripts • 298
indicate non-good status • 168
warning message aft er attempting to export
overriding text appearance to indicate
symbol without appropriate permissions •
non-good status • 167
85
showing symbol status • 185 SelectedValue property • 403
SetItemData() method • 447
R ShowToday property • 403
radial gradients • 155, 156 SmartSymbols
Radius property • 403 importing into an Industrial Graphic • 54,
ReadOnly property • 403 333
real translating • 346
data type • 55 Smoothing property • 403
relative point of origin • 121 square line end • 178

458
Index Creating and Managing Industrial Graphics User Guide

Start property • 403 creation methods • 61

StartAngle property • 403
description • 19, 61
StartCap property • 403
embedding • 325
Status elements
description • 51 importing SmartSymbols • 333
language settings for Galaxies • 342
overriding element blink behavior • 168, 187
stretch image display mode • 179 language switching • 339
string managed by Graphic Toolbox • 20
data type • 55 managing • 19
format • 290 organizing into Tools ets • 19
language switching • 343 placement in ArchestrA environment • 19
Sweep Angle animation • 185 removing languages • 341
SweepAngle property • 185, 403
selecting a language • 341
symbol scripts
setting the radius of rounded rectangles •
actions against symbols • 297
177
execution order • 297
supported file formats • 179
named • 297
using anti-aliasing filter • 163
predefined • 297
using custom properties • 30
security • 298
setting time-out period • 301
T
writing to attributes with Secured Write or
tab order • 161
Verified Write security • 298
TabOrder property • 403
Symbol Wizard
TabStop property • 161, 403
Choic e Groups • 382 tags
Choic es • 382 linking to symbol custom properties • 214
configuration rules • 383 SuperTags • 229
Cons umer work flow • 78 Tension property • 403
description • 381 text

Designer work flow • 78 overriding appearance to indicate non-good

status or quality • 167
layers • 382
scaling size for buttons • 182
Options • 382
Symbol Wizard Editor setting Check Box control caption • 201

Layers view • 381 setting color • 149

Options view • 381 setting default in Edit Box controls • 202

SymbolReference property • 328, 403 word wrapping • 179
symbols wrapping for buttons • 182
adding custom properties with Industrial Text property • 403
Graphic Editor • 52 TextColor property • 403
allowing multiple pop-ups • 163 TextFormat property • 148, 403
textures
changing position of an anchor point • 329
setting transparency • 159
creating in Graphic Toolbox • 62
title image display mode • 179

459
Creating and Managing Industrial Graphics User Guide Index

TitleFillColor property • 403

TitleTextColor property • 403
TopIndex property • 403
Y
Y property • 111, 403
TrailingTextColor property • 403
translating
custom properties • 345 Z
Trans parency property • 403 zoom
Trans parent Color property • 179, 403 description • 96
TreatAsIcon property • 403
selected element • 95
triangular gradient • 156
to default value • 95

U
UnFilledColor property • 403
up image • 182
UpImage property • 403

V
Value property • 403
Verified Write • 298
Vertical pattern property • 158
VerticalDirection property • 403
VerticalPercentFill property • 403
Visible property • 403
visualization animations
description • 223
showing • 231

W
While Showing script • 301
Width property • 403
WindowMaker
differenc es between Industrial Graphic
Editor • 51
setting time-out period for scripts • 301
Windows common controls
configuring to write data • 284
methods • 447
WindowViewer
viewing languages for symbols • 350
WordWrap property • 403

X
X property • 111, 403

460