Desigo CC Graphics Editor Version 2.1 Configuration

Transcription

1 Desigo CC Graphics Editor Version 2.1 Configuration A6V _en_a_ Building Technologies

2 Copyright Notice Copyright Notice Notice Document information is subject to change without notice by Siemens Switzerland Ltd. Companies, names, and various data used in examples are fictitious unless otherwise noted. No part of this document may be reproduced or transmitted in any form or by any means, electronic or mechanical, for any purpose, without the express written permission of Siemens Switzerland Ltd. All software described in this document is furnished under a license agreement and may be used or copied only in accordance with license terms. For further information, contact your nearest Siemens Switzerland Ltd. representative. Siemens Switzerland Ltd, 2015 Credits Desigo, Desigo CC, Cerberus DMS, Cerberus PRO, and Sinteso are registered trademarks of Siemens Switzerland Ltd. Other product or company names mentioned herein may be the trademarks of their respective owners. Edition: Document ID: A6V _en_a_21 2

3 Table of Contents About This Document... 8 Document Revision History Overview of Graphics Graphic Libraries and Folders Graphics Related Folders Graphics Viewer: Operating and Engineering Mode Graphics Library Browser - Operating and Engineering Mode Graphics Editor - Operating and Engineering Mode Security and Graphics Overview Scopes and Data Point Access User Settings Overview Navigation in Graphics Accessing the Graphics Editor Drag-and-Drop Overview Drag-and-Drop Cursor Image Table of Graphics Drop Targets Overview of Graphics Viewer Point Centered Mode Status and Commands Overview Viewing Graphic Objects Viewing a Coverage Area Zooming and Panning Graphics Viewer Components Graphics Viewer Toolbar Views About the Status and Commands Window Status and Command Window Status and Commands Connection Lines About Tooltips Working with the Graphics Viewer Displaying a Graphic Displaying Properties Displaying and Hiding Coverage Area Commanding Properties in Graphics Viewer Commanding Off-Normal Properties Navigating to a Linked Element Enabling Point Centered Mode Disabling Point Centered Mode Working with the Aerial View Using the Depths Navigation View Zooming in the Graphics Viewer Selecting Objects within Graphics Viewer

4 Dragging Object Properties from the Graphics Viewer Selecting Objects from System Browser Printing from the Graphics Viewer Deleting a Graphic Item Navigating to the Graphics Library Browser from System Browser Creating a Graphic Creating a Graphics Sub-Folder Editing a Graphic Graphics Viewer Appendix Keyboard Shortcuts Mouse Functions Overview of Graphics Library Browser Library Browser (System Browser) Graphics Library BrowserTasks Accessing the Library Browser Creating a Symbol Folder in Your Library Creating a Symbol from the Library Browser Editing a Symbol from the Library Browser Creating a Customized HQ Symbol Deleting a Customized Symbol Overview of Graphics Editor Graphics Editor Modes Overview of Views and the Dock Panel Graphics Editor Workspace Scrollbars Graphics Editor Toolbar Ribbon Work Area File Menu Home Tab View Tab Options Tab Quick Access Toolbar Views Open Dialog Box Workspace Configuration Saving the Layout Configuration Restoring the Default Layout Configuration Working with Modes Working with the Ribbon Working with the Views and the Dock Panel Working with a Graphic Overview of Graphic Components and Types Bitmap Images About Graphic Viewports Working with Graphic Viewports

5 5.5.5 Working with Graphics Working with Linked Graphics Working with Bitmap Transparency Overview of the Consistency Checker Consistency Checker Workspace Working with the Consistency Checker Importing Graphic Files from another Project or Custom Folder Graphic Updates after an Upgrade Installation Updating Graphics after a 2.0 to 2.1 Upgrade Installation Updating Graphics after a 1.0 or 1.1 Upgrade Installation Updating Symbols and Graphic Templates after a 1.0 or 1.1 Upgrade Installation Viewing a Graphic Aerial View Working with the Aerial View Viewport Rectangle About Zooming and Panning Working with Zooming and Panning Searching for Graphic Files Find and Replace Overview Find and Replace View Working with the Find and Replace View Working with AutoCAD Images AutoCAD Files Overview AutoCAD Importer Working with the AutoCAD Importer About Symbols About Symbols Generic Symbol Object Referencing and Symbols Symbols Styles and Function Symbol Property Substitution Localizing Symbols and Graphic Templates Working with Symbols Troubleshooting Symbols Error Messages About Graphics Templates About Graphic Templates Graphic Templates Browser Working with Graphic Templates The Graphics Library Browser Library Browser (Graphics Editor) Working with the Library Browser Overview of Elements About Elements About Element Handles Element Handle Table About Grids

6 About Guidelines About Linking Elements Grouping and Ungrouping Elements Element Alignment and Precision Notes on Resizing Elements About Tooltips Basic Element Tasks Working with Element Groups Working with Element Arrangement Working with Grids and Gridlines Working with the Stroke Group Working with Element Alignment Working with Element Types Animation Element Working with Animation Ellipse Element Working with the Ellipse Element Import AutoCAD Element Import.XML Element Line Element Working with the Line Element Text Element Working with the Text Element Path Element Working with the Path Element Polygon Element Working with the Polygon Element Rectangle Element Working with the Rectangle Element Import Raster Image Element Working with Imported Images Formatting Elements About Formatting Text About Stroke Working with the Format Group The Element Tree and Layers Element Tree View Working with the Element Tree View About Layers Working with Layers Working with the Brush View and Brushes Group Brush View and Brushes Group Overview State Color Overview Brush Editor View Brush Editor View Tasks Brushes Group Tasks

7 5.18 About Evaluations and Element Properties About Property Evaluations Evaluation Types Expression Type and Results Script Overview Script Timeout Script Versus Reference Condition Syntax Understanding Binary Encoding Property Evaluation Examples Working with Evaluations and Element Properties Properties View Working with the Properties View About Animation Evaluation Editor View Working with the Evaluation Editor View Working with Coverage Area Association of Documents in Coverage Area Configuring Coverage Area Library Symbols Using Coverage Area Symbols in Project Graphics Working with Value Simulation About Value Simulation Value Simulator View Working with Value Simulation About Depths Planning Your Depths Depths View Working with Depths Overview of Printing Print Preview Page Setup View Working with Printing Graphics Editor Appendix Context Menus Graphics Editor Keyboard Shortcuts Table of Element Handles Element and Graphic Properties Property Name and Variable Names Error Messages and Troubleshooting Graphics Engineering HTML Literal Word Colors Troubleshooting AutoCAD Conversion

8 About This Document Document Revision History About This Document Purpose This manual provides a complete description of the Desigo CC graphical environment, including navigation, Graphics Viewer, Library Browser, and the Graphics Editor. Scope This document applies to Desigo CC Version 2.1. Target Audience Project Engineers are responsible for planning and configuring a customer project. They provide the parameterization of products, devices, and systems and are responsible for general system troubleshooting. They have the training appropriate to their function and to the products, devices, and systems to be configured. They are familiar with the applied operating system(s) and the related network environment. Field Engineers provide the basic installation of devices and systems for a specific customer at the customer site. They have the training appropriate to their function and to the products, devices, and systems to be installed. They are also familiar with the applied operating system(s) and the related network environment. Field engineers are responsible for infrastructure troubleshooting (for example, hardware, communication, network, and so on). Librarians are application experts who are in charge of creating specific system profiles for a market segment, channel, or region. They coordinate the use of the advanced tools that permits the customization of the management station libraries for specific uses. They have the training appropriate to their function and to the products, devices, and information to be configured. 8

9 About This Document Document Revision History Liability Disclaimer We have checked the contents of this manual for agreement with the hardware and software described. Since deviations cannot be precluded entirely, we cannot guarantee full agreement. However, the data in this manual are reviewed regularly and any necessary corrections included in subsequent editions. Suggestions for improvement are welcome. Product Security Disclaimer Siemens products and solutions provide IT-specific security functions to ensure the secure operation of building comfort, fire safety, security management and physical security systems. The security functions on these products and solutions are important components of a comprehensive security concept. However, it is necessary to implement and maintain a comprehensive, state-of-theart security concept that is customized to individual security needs. Such a security concept may result in additional site-specific preventive action to ensure that the building comfort, fire safety, security management or physical security systems for your site are operated in a secure manner. These measures may include, but are not limited to, separating networks, physically protecting system components, user awareness programs, in-depth security, and so on. For additional information on building technology security and our offerings, contact your Siemens sales or project department. We strongly recommend signing up for our security advisories, which provide information on the latest security threats, patches and other mitigation measures. 9

10 About This Document Document Revision History Document Conventions The following table lists conventions to help you use this document in a quick and efficient manner. Convention Numbered Lists (1, 2, 3 ) indicate a procedure with sequential steps. One-step procedures are indicated by a bullet point. Conditions that you must complete or must be met before beginning a procedure are designated with a. Intermediate results (what will happen following the execution of a procedure step), are designated with an indented. Results, after completing a procedure, are designated with a. Bold font indicates something you should type or select, or when a dialog box or window is specified. Menu paths in procedures are indicated in bold. File paths containing placeholders display the placeholders in italics enclosed in square brackets. Error and system messages are displayed in Courier New font. Italics are used to emphasize new or important terms. Examples 1. Turn OFF power to the field panel. 2. Turn ON power to the field panel. 3. Open the panel. Expand the Event List. The report you want to print is open. 1. Click Print. The Print dialog box displays. 2. Select the printer and click Print. The print confirmation displays. Type F for field panels. Click OK to save changes and close the dialog box. The Create a New Project dialog box displays. Select File > Text, Copy > Group, which means from the File menu, select Text, Copy and then Group. [installation drive:]\[installation folder]\[project]\... The message Report Definition successfully renamed displays in the status bar. The reaction processor continuously executes a user-defined set of instructions called the control program. This symbol signifies a Note. Notes provide additional information or helpful hints. Cross references to other information in printed material are indicated with an arrow and the page number, enclosed in brackets: [ 92] For more information on creating flowcharts, see Flowcharts [ 92]. Getting Help For more information about the Desigo CC products, contact your local sales representative. 10

11 About This Document Document Revision History Safety Messages According ANSI Z535.6 The following examples show the ANSI standard safety messages used in this document to draw the reader s attention to important information. ANSI distinguishes between personal injury safety messages and property damage warning messages. The personal injury safety messages have safety alert symbols and the following alert level labels: DANGER!, WARNING!, CAUTION! The label for property damage messages is: NOTICE. Examples: NOTICE Property Damage Warning Message Equipment damage or loss of data may occur if you do not follow a procedure or instruction as specified. CAUTION Caution Safety Message Minor or moderate injury may occur if you do not follow a procedure or instruction as specified. WARNING Warning Safety Message Personal injury or property damage may occur if you do not follow a procedure as specified. DANGER Danger Safety Message Electric shock, death, or severe property damage may occur if you do not perform a procedure as specified. 11

12 About This Document Document Revision History Document Revision History Document Identification The document ID is structured as follows: ID_Language(COUNTRY)_ModificationIndex_ProductVersionIndex Example: A6Vnnnnnnnn_en_a_02 Document Revision History. Modification Index Edition Date Brief Description a Market Release Edition 12

13 Overview of Graphics Graphic Libraries and Folders 1 1 Overview of Graphics The Graphics application allows you to, view and command (Graphics Viewer), create (Graphics Editor), and store (Graphics Library Browser) large graphics representing equipment, floors, buildings, facilities, and entire campuses. These graphical representations can contain dynamic elements to represent devices or values you want to monitor or control. The Graphics application consists of three main components; the Graphics Viewer, the Graphics Editor, and the Graphics Library Browser. The Graphics application is located by selecting System Browser > Application View. Project graphics are listed in the root of the Graphics Tree. Graphics Viewer The Graphics Viewer is the component of the Graphics application that allows you to view the graphics representing your facility or equipment. It is where you can change the current state of an object s properties from a graphic, by using the floating Status and Commands windows. You can filter your view of a graphic by discipline, section, or you can zoom in and out for greater detail or for a birds-eye overview. The Graphics Viewer is accessible from the Systems Browser s Application View, and then clicking Graphics, or any one of the actual graphics in its root structure. The Graphics Viewer displays in the Default tab of either the Primary or Secondary pane. If you have the appropriate security access, you can access the Graphics Editor from the Graphics Viewer. For more information on the Graphics Viewer, see Overview of Graphics Viewer [ 22]. Graphics Editor The Graphics Editor is the Graphics component that, with the appropriate security rights, allows you to create and modify simple and dynamic graphical representations of your devices, facility, campus, or equipment. The Graphics Editor also allows you to test and simulate your dynamic graphics before going online with them. Graphics, Symbols, and Graphic Templates are all created in the Graphics Editor. The Graphics Editor is accessible from the: 13

14 1 Overview of Graphics Graphic Libraries and Folders Graphics Viewer, by switching from Operating to Engineering mode, or by clicking Edit from the Graphics Viewer toolbar. Graphics Library Browser, by right-clicking on a Symbol or Graphic Template thumbnail in the Primary pane, and selecting Edit, or by clicking Edit from the Graphics Library Browser. For more information on the Graphics Editor, see Overview of Graphics Editor [ 47]. Graphics Library Browser The Graphics Library Browser allows you toggle between a view that displays all the available Symbols and graphic template objects in your project libraries. The Graphics Library Browser displays in the Primary pane when you click a libraries Symbol or Graphic Templates folder. It is also accessible from within the Graphics Editor as one of the views you can display in the dock panel. For more information on the Graphics Library Browser, see Overview of Graphics Library Browser [ 42]. 1.1 Graphic Libraries and Folders Graphics Libraries and folders are located and created in the System Browser, in both the Management View and Application View. In order to view graphics, you must first create your libraries and sub-libraries that will host the graphics. This is accomplished in the System Browser s Management View. The System Settings folder contains the configuration area for all your libraries. Existing graphics associated with your plant are listed and viewed from the Application View tree, under the Graphics application. 1.2 Graphics Related Folders Graphic Related Folders Graphic related folders are displayed in both the System Browser s Application View and the Management View. There are three types of graphic folders: Graphic, Symbols, and Graphic Template. Application View > Graphics Displays all graphics (*.CCG) files. Management View > Project* > System Settings > Libraries > [Appropriate Sub-Library] > Symbols Displays all the related Symbols (.CCS) files associated with the selected library. Management View > Project* > System Settings > Libraries > [Appropriate Sub-Library] > Graphic Templates Displays all the related Symbols (*.CCT) files associated with the selected library. *If your System Browser display mode is set to Show Name, you will see ManagementView instead of Project. 14

15 Overview of Graphics Graphics Viewer: Operating and Engineering Mode Graphics Viewer: Operating and Engineering Mode The following table describes the Graphics Viewer behavior according to the Graphics window mode. Graphics Viewer window mode Graphics Viewer application behavior Operating The Graphics Viewer displays In the Default tab of the Primary pane. The Textual Viewer tab displays and is available in the Primary pane. Can create, open, and edit graphic files. Engineering The Graphics Viewer displays: In the Graphics tab of the Primary pane. The Object Configurator tab displays and is available in the Primary pane. Can create, open, and edit graphic files. 1.4 Graphics Library Browser - Operating and Engineering Mode The following table describes the Graphics Library Browser behavior according to the Graphics window mode. Graphics Viewer window mode Graphics Viewer application behavior Operating The Graphics Library Browser displays: In the Default tab of the Primary pane. The Textual Viewer tab displays and is available in the Primary pane. The Graphics Viewer toolbar displays. When you click the Edit icon, the Graphics Editor displays in Operating mode. Engineering The Graphics Library Browser displays: In the Graphics tab of the Primary pane. The Library Object Configurator tab displays and is available in the Primary pane. The Object Configurator tab displays and is available in the Primary pane. The Graphics Viewer toolbar displays. When you click the Edit icon, the Graphics Editor displays in Engineering mode, and the Library Browser view opens and displays all the associated Symbols or graphic templates of that particular library. Can create, open, and edit graphic files. 15

16 1 Overview of Graphics Graphics Editor - Operating and Engineering Mode 1.5 Graphics Editor - Operating and Engineering Mode The following table describes the Graphics behavior according to the Graphics window mode. NOTE : In addition to having a Graphics Editor license, you must also have Graphic Editor Application rights to create, edit, or delete a Symbol or Template Graphic. Graphic Editor level access is defined by the Security application. Graphics Editor window mode Graphics Editor application behavior Operating The Graphics Editor displays In the Default tab of the Primary pane. The Textual Viewer tab is displayed and available in the Primary pane. Can create, open, and edit graphic files. Engineering The Graphics Editor displays: In the Graphics tab of the Primary pane. The Object Configurator tab is displayed and available in the Primary pane. Can create, open, and edit graphic files. 1.6 Security and Graphics Overview Access levels are the security rights users are granted to access applications and objects in the Desigo CC software. The access levels for the Graphics Viewer, Graphics Editor, and Graphics Library Browser are as follows: Graphics Viewer The access rights for the Graphics Viewer application define the user s ability to display a graphic or a Symbol in the Graphics Viewer and in the Graphics Editor Runtime mode. Access Show If Enabled You can display a graphic in the Graphics Viewer and in the Graphics Editor Runtime mode. Graphics Editor If you have access rights for the Graphics Editor application, you can create, modify, and delete graphics, Symbols, graphic templates, and graphic folders. Access Show Create Delete Save If Enabled You can access the Graphics Editor. You can create new and save existing graphics and graphic folders. You can delete graphics and graphic folders. You can save any changes to a graphic. NOTE: If disabled, you can open a graphic, but, in Read-Only mode. No changes can be made. 16

17 Overview of Graphics Scopes and Data Point Access 1 Graphics Library Browser If you have access rights for the Graphics Library Browser, you can navigate to and display Symbols and graphic templates in the Graphics Viewer, as well as the user s ability to create and modify them in the Graphics Editor. Access Show Create Delete Save If Enabled You can view Symbols and Graphic Templates in the Graphics Viewer and the Graphics Editor. You can create new graphics, Symbols, and graphic templates, and save existing Symbols and graphic templates. You can delete graphics and graphic folders. You can save an existing Symbol or graphics template in its original name or in one of the existing names in the library. 1.7 Scopes and Data Point Access Assigning Scopes to Graphic Objects Scope is a grouping of system objects, or nodes with specific scope definitions used for the purpose of assigning access rights. You can create scopes and assign access rights to any of the graphic nodes in the Graphics system tree. For more information, see Scopes. You can apply scopes to the following graphic nodes: Graphics Symbols Templates Manual and Automatic Pages Data Point Access Privileges Data points are integrated into a graphic by associating them with elements. These data points and elements can be evaluated by creating expressions that result in a graphic that allows you to view dynamic values of a facility, building, or piece of equipment. Data points, therefore, always display using the elements they are associated with. Depending on the your access rights, which are set in the System Manager, certain data points can be inaccessible. In this case, if one or more data points associated with an element is inaccessible, then the associated element will not display in the graphic while in Runtime mode or in the Graphics Viewer. However, the parent of an element, such as a Symbol instance or a group, and any other associated children (elements), are not affected and will display on the graphic. This is considered the Hide-Rule for data points in a graphic. The Hide-Rule does not apply to Object References and Link Reference since there are no COV subscriptions involved in these scenarios. When a data point with an existing address is subscribed for COV s, the data point s status and value are updated automatically in the Value Simulator view. If the Status for the data point displays, General AccessDenied, this indicates that the data point is inaccessible and therefore not readable for COV subscriptions. 17

18 1 Overview of Graphics User Settings Overview 1.8 User Settings Overview Graphics Viewer The following user settings are automatically saved when you exit out of the Graphics Viewer. The Auto zoom selection is maintained. Graphics Editor The Graphics Editor allows you to retain your user settings applied to layout, views, and values. Therefore, when you exit and re-enter the application, your settings do not change. User settings are stored in the user s Windows Temp Folder, c:\users\[username]\appdata\local\temp. If you want to restore your settings to the last saved layout, select the button from the Options tab > Layout group. The Graphics Editor will return to the last saved layout and settings. The following user settings are automatically saved when you exit the Graphics Editor, and retained when you log on again. The location of the Quick Access toolbar and any shortcut items added to it. The size, position, and window state (maximized) of the Graphics Editor window. The Ribbon status; whether it is maximized or minimized. The Dock Panel layout, including size, position of each panel, and if it is docked and where, if it is floating, or set to auto-hide. The Library Browser filter and library selections, as well as the magnification setting. The Break Lock, Logical Units, and Disable Layer Visibility Range options located on the View tab. All selections from the View tab, whether they are visible or not. The only exception is the Aerial View; it is always visible in the dock panel upon opening the Graphics Editor. All Value Simulator view settings and selections, except for the Run Value Simulator. If enabled, it returns back to the disabled state when you exit the Graphics Editor. The most recent changes made to the Graphic and Graphic Workspace properties are stored, so that the next graphic you create, automatically takes the properties of the previously created graphic. 18

19 Navigation in Graphics Accessing the Graphics Editor 2 2 Navigation in Graphics 2.1 Accessing the Graphics Editor You can switch between the Graphics Viewer and the Graphics Editor in Operating or Engineering mode. To Access the Graphics Editor in Operating Mode You are in the Graphics Viewer, in Operating mode. 1. From the Graphics Viewer toolbar, click Edit. The Graphics Editor opens in Operating mode in the Default tab of the Primary pane. 2. To switch to Engineering mode in the Graphics Editor, click the button. The Graphics Editor switches to and displays in the Graphics pane. The Object Configurator tab also displays. 3. To return to the Graphics Viewer from Engineering mode, click the Edit. The Graphics Viewer displays in Engineering mode, in the Primary pane. To Access the Graphics Editor in Engineering Mode You are in the Graphics Viewer in Engineering mode. 1. From the Graphics Viewer toolbar, click Edit. The Graphics Editor displays in Engineering mode in the Graphics tab of the Primary pane. The Object Configurator tab is also displayed. 2. To return to the Graphics Viewer, do one of the following: From the Graphics Editor toolbar, click Edit. The Graphics Viewer displays in the Primary pane in Engineering mode. Click on the button. The Graphics Viewer displays in the Primary pane in Operating mode. To Switch Graphics Editor from Operating to Engineering Mode You are in the Graphics Editor in Operating mode. Click the button. The Graphics Editor switches to and displays in the Graphics pane. The Object Configurator tab also displays. To Switch from Graphics Editor Engineering Mode to the Graphics Viewer Engineering Mode You are in the Graphics Editor in mode. Click Edit. The Graphics Viewer displays in Engineering mode in the Primary pane. 19

20 2 Navigation in Graphics Drag-and-Drop Overview 2.2 Drag-and-Drop Overview The Graphics application supports the drag-and-drop of nodes and their properties from System Browser, the Graphics Viewer, and the Contextual pane to the canvas and various fields in the Graphics Editor views. After a drag-and-drop, the name and the address of the data point reference display in the target field. NOTE: In order to drag-and-drop a node or object properties to the Graphics Editor, you must have the proper licensing or user access. Drag Source All object nodes from any of the System Browser applications, regardless of where they exist within the folder s hierarchy, are drag sources that can be dropped on to a receiving field, a drop target. In the case of the Graphics Viewer, the properties of any object that has a valid reference to an object, such as a selection reference, expression, or evaluation associated with it, is a valid drag source. These properties can be dragged over to the Graphics Editor or onto another application pane or view that accepts drag source. Drop Target All text or field boxes in the Graphics Editor are valid drop targets for the data point reference nodes. Generally, the data point references are dropped into the Expression field of the Evaluation Editor or used in the Animation Symbol for a substitution. When you drop a node, the full path or hierarchy of the name display in the fieldname, separated with the separator from the hierarchy. For example, User1:\Campus1\Building1\Floor1. Drag Data The drag data depends on the type of reference associated with the element or object when the drag was initiated. Evaluation Data point I.D. of all unique referenced objects from all expressions. Selection Reference Data point of the Selection Reference property. Symbol Data point of the Object Reference, the associated object. Drag-and-Drop Symbol Instance \ Object Reference Replacement You can use drag-and-drop to replace an existing Symbol Instance on a graphic with a data point from System Browser. When you drag a data point from System Browser and hover over one of the Symbol Instance, after a few seconds, the Symbol Instance is automatically selected. Press SHIFT and release the mouse button, to replace the Symbol Instance. The Object Reference of the Symbol Instance is also changed. If you do not press SHIFT, then a separate and new Symbol Instance is created. Drag-and-Drop Multiple Objects from System Browser You can drag-and-drop multiple objects from System Browser to the Graphics Editor. When you drag-and-drop multiple objects over, the objects display in the alignment wrapped mode when dropped on the canvas. This means the objects display side-by-side in a row, and wrap to the next row as needed. When you initially drop the objects on the canvas and release the mouse button, the objects remain selected. You can also cascade the objects. Undo the wrap align step by pressing CTRL+Z or clicking from the ribbon, and the objects display in a cascaded format on your canvas. 20

21 Navigation in Graphics Table of Graphics Drop Targets 2 Tips on Using Drag-and-Drop When you drag-and-drop a node from the System Browser or the Graphics Viewer to the Graphics Editor, only the name of the data point reference is displays in the Graphics Editor, and not the description, which may be visible in System Browser, depending on the display view. While some nodes might belong to a hidden or another hierarchy, the structure should match the System Browser structure Drag-and-Drop Cursor Image You can drag any item displayed in the Symbol Browser, Graphics Viewer, and Contextual pan--including a search result to the Graphics Editor, if you have the application and licensing right to the Graphics Editor. Objects in the Graphics Viewer are always a drag source, and the Graphics Editor is a drag source and drag-target. Both support selecting both single and multiple items. The cursor image changes (see the following table) depending on whether or not the view accepts drops. You can cancel dragging by pressing the ESC key or by moving the cursor outside the boundary of the Graphics Editor window. Accepts Drop Cursor Image Does Not accept Drops 2.3 Table of Graphics Drop Targets Many fields in the Graphics Editor views are valid drag and-drop targets for normal text from other applications. For example, drag-and-drop text from a word processing application into the Text property field. You can also drag-and-drop data point references from System Manager, the Graphics Viewer, and the Contextual pane into select fields in the Graphics Editor. The following fields are drop targets for valid data point references: Drop Target Field for Data Point References View Name List of Drop Target Fields for Data Point References Ribbon Move your cursor anywhere over the ribbon and any associated graphics open and display in the work area. Graphic Canvas Object displays on the canvas. Evaluation Editor Expression Find and Replace Find what Replace with Value Simulator Object Reference Properties Text Property Selection Reference Object Reference (Symbols only) Expression field Navigation Target 21

22 3 Overview of Graphics Viewer Point Centered Mode 3 Overview of Graphics Viewer The Graphics Viewer is the Graphics component that allows you to display and view graphics in your facility. While viewing your graphics, you can do the following in the Graphics Viewer: Increase or decrease them in size Pan them Scale them to predefined viewports predefined zoom steps full size 1:1 resolution View them in part or as a whole using the viewport rectangle Navigate and filter the view in the primary or secondary work area by depth, layer, and discipline using the Graphic Navigation View View them from above using the Aerial View Mouse-over elements or objects on the graphic to view tooltip information View related properties in the contextual pane View changing property values of system objects on a graphic View the objects in a camera's coverage area Navigate and display graphics in the Related Items tab related to the selected object in System Browser Acknowledge and command objects on a graphic using the Status and Commands window Access the Graphics Editor to edit them Access the Graphics Editor to create a new graphic 3.1 Point Centered Mode Point Centered mode ensures that a selected data point or group of data points will always be centered in the Graphics Viewer. For example, you might be required to put a data point in this mode if you are monitoring a fire system in a chemical manufacturing facility with key sensors that must always be viewed. Enabling Point Centered mode in such a scenario ensures that the data point does not blend in with and become lost among surrounding graphics. Or, you might be required to put the Graphics Viewer in this mode, if, for example, you are monitoring a fire system in a pharmaceutical manufacturing facility with key areas that must always be viewed. You can also enable the Group 22

23 Overview of Graphics Viewer Status and Commands Overview 3 Center mode, to ensure that the parent and all children of the selected point are always selected; therefore, the group(s) of points do not blend in with and become lost among any surrounding graphics. In Group mode, siblings are all data points with the same parent as the selected data point. Those siblings are retrieved from the currently selected view when the selection in the System Browser changes. This mean that selecting the same data point in different views, for example, Logical or Management View, could return different siblings. To implement the feature, you select a data point object in System Browser. The System Manager application then opens the Graphics Viewer and loads the point s default graphic view, depth, and graphic associated with it. You then select the Point Centered Mode button from the Graphics Viewer toolbar to center the point in the viewport. The feature is disabled by selecting the button again. While in Point Centered mode, you cannot pan the object. However, you can select any zoom factor without affecting centering in the viewport or you can select another Symbol to shift the focus to another object or Symbol. 3.2 Status and Commands Overview The Status and Commands window displays on a graphic, and allows you to display and change the current state of an object s properties in your building control system. Access to objects is based upon the object privileges and privilege profiles set for you by your system administrator. Display of Properties on a Graphic Properties display on a graphic in one of two ways automatically or manually. They display automatically when a property goes into an off-normal state. The Status and Command window displays the icons associated with the properties in an off-normal state on the graphic. You expand the icon view to display the detailed property information and the command options. The Status and Command window(s) display manually when you right-click an object in a graphic that has data points associated with it. You can display multiple Status and Command windows in Graphics. When a Status and Command window displays on the graphic, a connection line displays between the window and its associated objects on the canvas. The connection line between the Status and Command window and the object(s) remains intact, even when the window is moved around on the canvas. Properties and commands also display in the Operation and Extended Operation tabs of the Contextual pane for the selected object. For more information on commanding properties and priority arrays, see Command Priorities and Priority Arrays. Summary Status In order to simplify the system display and highlight the most important information, the system sometimes combines properties into a Summary Status property. The Summary Status displays the highest priority status that is currently active for an object. For example, if an object has an active Fire Alarm and Fire Fault, the Fire Alarm displays in the Summary Status. 3.3 Viewing Graphic Objects The Graphics Viewer allows you to display dynamic graphics of your building control system. System Manager is the client application that hosts the Graphics Viewer. Within System Manager, you navigate the various views of System Browser to select the objects you want to display in the Graphics Viewer. System Browser displays only the objects in the system that you have access to, based on your user profile and privileges. 23

24 3 Overview of Graphics Viewer Viewing Graphic Objects Primary and Secondary Selections When you select a graphics object from System Browser, the Graphics Viewer displays the representative graphic. The selected object is considered the primary selection. The object properties also display in the Operations\Extended Operations view. The graphic that has the primary selection displays the name of the graphic and the object name according to your Display selection in the System Browser, in the upper, left-hand corner of the primary pane. Additionally, the properties of the primary selection display in the Operation/Extended Operations, and the Detailed Log tabs. The Related Items tab displays objects related to the currently selected object. Each related item is assigned a group name that represents the object's type, for example, graphics, trends, reports, or schedules. If you left-click a Symbol on a graphic or, the referenced object of the Symbol becomes the secondary selection, while the primary selection remains the same in System Browser. The following figure illustrates the primary selection in System Browser, Analog Output 1. In the Graphics Viewer, the Operations tab in the Contextual pane changes its display to correspond to the new, secondary selection. However, System Browser, still displays the original, primary selection, to show your starting point. 24

25 Overview of Graphics Viewer Viewing a Coverage Area 3 When you select an object from System Browser that is associated with a graphic, the Graphics Viewer displays the representative graphic and the object s associated Symbol on the graphic is selected. As a result, the Operations tab displays the object properties to correspond to the selection. Double-clicking a Symbol on a graphic makes the referenced object associated with the Symbol the primary selection in System Browser, and all workflows update accordingly 3.4 Viewing a Coverage Area Desigo CC allows you to manually associate objects to one-another. For example, you can associate a fire detector (or any other object type) to a video camera or to a document. Then, whenever the fire detector is selected in the System Browser tree, the related video camera or document displays in the Related Items pane. The coverage area feature provides a graphical way to achieve the same result. Desigo CC graphics can contain cameras or monitoring devices to which objects, such as fire sensors, ceiling sprinklers, temperature sensors, etc. are associated. For example, you have a graphic of an office space that includes a camera that is monitoring the fire sensors in that room. In this example, the fire sensors monitored by the camera, are in the coverage area of the device. The coverage area contains the monitored objects. When you move your cursor over the coverage area, a tooltip displays the coverage area's object reference with the total number of monitored objects. If you move your cursor over an object in the coverage area, a tooltip displays the objects name or description. The background color of the coverage area varies depending on how the librarian has configured it to look for your project. When you initially load a graphic, the Coverage Area of a camera is not visible in the Graphics Viewer. You must toggle the Coverage Area icon from the Graphics Viewer toolbar to view the coverage area of any monitoring device(s) on the graphic. The Operation and Extended Operation tabs display the device properties when the coverage area is visible. The Related Items tab lists any coverage area's that are associated with the graphic under the heading that is named after the type of 25

26 3 Overview of Graphics Viewer Zooming and Panning the monitoring object. For example, if the monitoring object is a camera, the heading displays "Camera" in the Related Items tab. 3.5 Zooming and Panning The Graphics Viewer supports zooming and panning within the active graphic. Zooming allows you to magnify or reduce the graphic image, and panning allows you to move the graphic around on the canvas. In zooming mode, you can left-click and drag a rubberband rectangle around any area of the graphic. The rectangle represents the area that will be zoomed to full view once you release the mouse button. Pressing the ESC key cancels the rubberband rectangle function. 3.6 Graphics Viewer Components The components that make up the Graphics Viewer consist of a toolbar, two views for navigating the active graphic, keyboard and mouse shortcuts, and tooltips. 26

27 Overview of Graphics Viewer Graphics Viewer Components Graphics Viewer Toolbar The Graphics Viewer toolbar allows you to navigate to and work with graphic pages displayed in the Graphics Viewer. Use your cursor to select a toolbar button. Graphics Viewer Toolbar Operating Mode Icon Name Description Edit Next Related Item Previous Related Item Allows you to toggle between the Graphics Viewer and the Graphics Editor. NOTE: Only displays if a Graphics Editor license is detected. Allows you to scroll to and display the next graphical Related Item associated with the selected datapoint in System Browser. Only enabled if the datapoint has more than one related graphical item. Allows you to scroll to and display the previous graphical Related Item associated with the selected datapoint in System Browser. Only enabled if the datapoint has more than one related graphical item. Zoom In (+20%) Allows you to zoom in by + 20% on the active graphic with each mouse click. Zoom Out (-20%) Allows you to zoom out by - 20% on the active graphic with each mouse click. 100% Displays the active graphic at 100% magnification. Home Zoom View Returns the view of the displayed graphic to the state when the primary selection changed. For example, if the Next\Previous buttons have been used, selecting Home loads the first graphical Related Item. Displays the Zoom view and allows you to zoom in on the active graphic by adjusting the slider. Aerial View Zoom Real Switches between Aerial view being visible or hidden in the Graphics Viewer area. Allows you to zoom in on the active graphic. To activate, click on the icon. To de-activate, leftclick anywhere on the graphic. 27

28 3 Overview of Graphics Viewer Graphics Viewer Components Scale to Fit Point Centered Display Mode Fit to Secondary Selection Depths Navigation View Show Status and Command Pane Coverage Area Mode Page Setup Print Scales the graphic to fit in the viewing area. Once selected, the graphic resizes itself according to window size. Selecting the button, changing the Zoom selection, or loading another graphic, disables the feature. Moves the selected point to the center of the graphic. Allows you to calculate the depth and the viewport from the current selection. Switches between Depths Navigation view being visible or hidden in the Graphics Viewer area. This view allows you to view a graphic content by depth, and by layer, or by discipline associated with a layer. Allows you to enable or disable the Status and Command pane from displaying. When this icon is enabled, it allows you to view the coverage areas on the graphic. When disabled, no coverage areas display on the graphic. Displays the Page Setup view for the current graphic. Displays the Print dialog box to print the current graphic Views The Graphic Viewer provides you with two floating views, the Aerial view and the Graphic Navigation view, to help you navigate the active graphic in either the primary or secondary work area of System Manager. Both views can be resized and toggled to display or not, using the Graphics Viewer toolbar. Aerial View The Aerial view provides you with a bird s-eye view of the active graphic at all times. The viewport rectangle, a rectangular shaped border within the Aerial view, provides a visual representation of the region that has the current focus. You can also draw a viewport rectangle in the area you would like to zoom in on, or click and drag the viewport to move to another location on the graphic. 28

29 Overview of Graphics Viewer Graphics Viewer Components 3 Item Description 1 Viewport Rectangle Allows you to view graphics in part or as a whole. Navigation View The Graphic Navigation view allows you to customize and navigate through views of the active graphic by selecting a depth and then filtering, by discipline or by layer, which of the associated layers to display. If you choose to filter the layers by discipline, only the layers designated with that discipline display in the graphic view. Otherwise, if you filter on layers only, all the layers of the selected depth display in the Graphic Navigation view, and you can manually choose which layers will be visible in the current view of the graphic. Item Description Navigation View 1 Selected Depth Displays the active depth. Use the drop-down menu to select from a list of available depths. 2 Filtering Allows you to select how to filter the layers associated with the selected depth. You can filter the layers by Discipline or by Layers. 3 Discipline Selection Displays the discipline used to filter the associated layers with. Use the dropdown menu to choose from a list of available disciplines. The active graphic will only display layers designated with the selected discipline. This section is only active if you have selected to filter the depth by Discipline. 4 Layer Selection Displays the list of available layers associated with the selected depth. If a layer is checked, the associated layer displays in the current graphic view. If unchecked, the layer does not display. This section is only active if you have selected to filter the selected depth of the graphic by Layer. 29

30 3 Overview of Graphics Viewer Graphics Viewer Components About the Status and Commands Window Overview of the Window In Graphics, the Status and Command window is a floating view that displays an object s properties, current status, and command buttons in the following two scenarios. Automatically, in the Graphics Viewer when an object associated with the open graphic has a property in an off-normal state. The Status and Commands window displays in the collapsed, icon view over the associated object. To expand the view of the window, click the vertical expander on the side of the window. Manually, when you move the pointer over an object on a graphic and then right-click it and select Show Status and Commands. Connection Point and Lines The Status and Command window is a floating view that displays over an object on the canvas, and can be moved around in the Graphic Viewer. The Status and Command window displays a connection line to its associated object(s) on the canvas. The connection point of the connection line, anchors itself in the following manner: Non-engineered elements The connection point aligns itself to the center of the element. Symbols The connection point aligns itself to the center of the first element in the Symbol, according to the element tree. Customized Connection Point You can create a connection point location by drawing an Ellipse where you want to anchor the connection point for the Symbol. In the Ellipse Descriptor field, you can enter text stating it is an Anchor for the Connection Point. To hide the Ellipse from view, either cover it up by another element (preferred method) or disable the Visible property for the element in the Property Tree. In both cases, make sure that the Ellipse is the first element in the Symbols element tree in the Element View. For graphics and graphic templates only, you can specify the maximum number of connection lines to display. The default value of is used when the property Graphics > Max Connection Lines is left blank, in which case under normal circumstances all lines display with the Status and Commands window. If the actual number of connection lines associated with a Status and Command window exceeds the number of connection lines specified in this property, then none of the lines display. Drag-and-Drop The Status and Commands window is a drag source for data point properties. When the Status and Command window is expanded, you can drag a data point or one of its properties from the window to any of the drop targets in the Graphics Editor or other applications. You cannot drag-and-drop virtual data point properties, such as those properties that display No Properties or Not Available. Evaluation Editor: When you drop a data point property in the Expression field of the Graphic Editor s Evaluation Editor, the current value of the property displays in the Result field for the element s property. Ribbon: When you drop a data point property onto the ribbon, all the graphics associated with that data point display as tabbed graphics in the work area. 30

31 Overview of Graphics Viewer Graphics Viewer Components 3 Graphic Canvas: When you drop a data point property onto the canvas, the associated data point Symbol displays on the graphic. For a list of the drop sources in the Graphics Editor, see the Table of Graphics Drop Targets [ 21] Status and Command Window The Status and Commands window displays the following information about an object, its properties, and its status. Item Description 1 Icon Displays the icon associated with the property type. 2 Object Path and Object Name The path and the name of the object. 3 Property Name Displays the name of one or more properties associated with the object the selected object(s). If you select multiple objects of the same type in the system, the icon next to the property name indicates this with a triangular symbol in the lower righthand corner. Clicking this symbol expands the table row to show all of the selected objects of the same type that share this property. You can then change all properties for the selected objects at the same time. 4 Current Value Displays the current value of each property. 5 Argument Area and Progress / Result Area When you initiate a command that requires additional arguments, the required argument fields display for you to enter one or more arguments prior to sending the command. You must complete all required arguments before sending the command. An argument field that displays a red border around it means that the value for that property is invalid. You will need to enter a valid value before commanding the property. Once you execute a command, displays the progress and then the result of a command once you execute a command. During the command, the Progress / Result field displays Command in Progress, along with information about how many objects have been commanded and how many will be commanded all together. After a command execution is complete, successful commands display Success. Failed commands display the reason the command failed and, if you executed multiple commands, the number of failed commands. 6 Command Area Displays the name of a command that you can initiate. If a command button has a triangle in the lower right-hand corner, the command has multiple buttons or options, and clicking on the triangle then displays the options. Some commands are sent immediately after you initiate them by clicking on the Command button. Others require you to enter arguments before they can be sent. When a command requires arguments (additional fields 31

32 3 Overview of Graphics Viewer Graphics Viewer Components requiring information to continue with the command), the property row will expand after you click the command button. You then complete the additional fields and click the appropriate button (Send, Command, etc.). Some object properties support grouping of command buttons under a single command button with a drop-down list of your choices. The button you choose from the drop-down list becomes the new commandable button in the group. The Send button displays only for commands that require additional arguments. Clicking the Send button sends a command after you have entered all required arguments. Command Types: Multiple Option Selection: Visual display of associated properties. Each slot represents a property option. If a property is selected, it is shaded, see example above.. Moving your cursor over slot allows you to view the property option; clicking on the slot allows you to select the option. 7 Expand\Collapse Button Allows you to expand, collapse, or close the window : Expands the Status and Commands window when icons display offnormal properties. Minimizes a Status and Command window so that only the icons of the off-normal properties display. Closes a Status and Command window completely, if there are no properties in an off-normal state. 8 Scrollview indicator Indicates whether or not more buttons are available, yet not visible, and where the buttons are displayed. When you move the mouse over the scroll-view indicator, East-West cursor displays, and allows you to scroll through the commands. More command buttons are to the right of the last displayed button. More buttons are to the left of the first displayed button. There are more buttons on either side of the visible buttons. 9 Scrollbar Displays when the window has run out of space, and allows you to scroll through the active properties. Status and Commands Window Status and Commands Connection Lines Visibility of the connection line and its connection point are controlled as follows: A Connection line and its connection point are only visible if the element is visible. An element is only visible when the Layer is visible that contains the element. A Layer is only visible if a Depth is visible that contains that particular Layer. A Status and Command window is only displayed when there is at least one connection to an element. 32

33 Overview of Graphics Viewer Working with the Graphics Viewer About Tooltips Tooltips are customizable properties that display as a yellow text box when you mouse-over an element or object on the active graphic. The text box for a tooltip contains descriptive text, the current value of the graphic object, and the name(s) of the associated objects based on the view selected in System Browser. When you move your cursor over an object or element on the active graphic, an associated tooltip displays. Item Description 1 Static Tooltip Descriptive text entered into the Tooltip property field that is associated with the General category in the Property Viewer. 2 Dynamic Tooltip Current tooltip text based on a tooltip evaluation, if any, and the current field values. Evaluations are created in the Evaluation Editor. 3 Static Link Reference and Link Description The name and description of the file linked to the element as entered in the Link Reference and Link Description fields from the Commands category in the Property Viewer. 4 Dynamic Link Reference and Link Description The name and description of the associated link resulting from any evaluations on the Link Reference and Link Description fields. The text displayed depends on the current field values. Evaluations are created in the Evaluation Editor. 5 Data point References The name(s) of the object and the System Browser view the name is based on. One line entry per object. 3.7 Working with the Graphics Viewer Displaying a Graphic You are in the System Browser, Application View, and are in Operating mode. 1. From System Browser, select Application View. 2. Expand the Applications folder. The list of available applications displays. 3. Expand the Graphics folder, and click the graphic you want to view in the Primary pane. The selected graphic displays in the Primary pane of the Graphics Viewer Displaying Properties You have an object in the System Browser and you want to display the associated properties. You have manually displayed the Status and Commands window for an object on a graphic in the Primary Pane or Secondary Pane. A graphic in the Primary Pane or Secondary Pane has an object in an off normal state and the associated Status and Commands window has automatically displayed. From System Browser, the Primary Pane, or the Secondary Pane, you have selected the object you want to command. 33

34 3 Overview of Graphics Viewer Working with the Graphics Viewer 1. From the Status and Commands window, navigate the property you want to command. If there are more than four properties displayed in the window, you may have to scroll to locate the property. The system displays a list of the object s properties, their current state, value, status, and all commands available to you for this object, based on your system privileges and the configuration settings for the object. 2. Complete the required fields and click on the associated command button that displays the command you want to execute. Depending on the command type, the command is sent, updated, or acknowledged and the status displays. 3. Observe the status of the command Displaying and Hiding Coverage Area A graphic is displayed in the Graphics Viewer and you want to display the coverage area for the camera(s) or any monitoring device on the graphic. The coverage area shows the objects on your graphic that are within the viewing or monitoring range of a camera or device. 1. From the Graphics Viewer toolbar, click Coverage Area. All configured coverage area's on the graphic display. 2. To view the data points from all the objects in the coverage area that are monitored by the camera or device, move your cursor over the coverage area. The tooltip displays a list of monitored objects. 3. To hide the coverage area, click Coverage Area. The coverage area is toggled to hide the coverage area from displaying on the graphic Commanding Properties in Graphics Viewer You have a graphic open in Graphics Viewer, and you want to command the properties of an object in the graphic. 1. Right-click the object, and select Status and Commands. The system displays a list of the object s properties, their current state, value, status, and all commands available to you for this object, based on your system privileges and the configuration settings for the object. If you select multiple properties to command, the selected properties display an icon with a triangular symbol in the lower right-hand corner. 2. If you selected multiple properties in the step above, click the triangular symbol on the icon next to the property you want to command. Otherwise, proceed to Step 3. The table row of the proper expands to show multiple instances of the property one for each of the objects selected. 3. Click the command button that displays the command you want to execute. If the command does not have arguments associated with it, the command is sent and the status displays. If the command button has arguments associated with it, proceed to Step Complete the required fields if any are associated with the command. 5. Click Send. 34

35 Overview of Graphics Viewer Working with the Graphics Viewer 3 The system displays the status of the command Commanding Off-Normal Properties You have a graphic open in Graphics Viewer, and one or more objects have properties in an off-normal state. The system has displayed the objects and the icons of the properties that are in an off-normal state. You want to view or command these off-normal properties. 1. Navigate to the Status and Command window associated with the object you want to command. 2. Click Expander to display the list of property information for the object. The system displays a list of the object s properties, their current state, and all commands available to you for this object, based on your system privileges. 3. Click the command button that displays the command you want to execute. If the command does not have arguments associated with it, the command is sent and the status displays. If the command button has arguments associated with it, proceed to Step Complete the required fields. 5. Click Send. The system displays the status of the command Navigating to a Linked Element If configured, an element on a graphic can be used as direct navigation to an internal or external link. You have an element on a graphic that if selected links you to an internal or external 1. (Optional) Move your cursor over the element to display the tooltip and view the linked path and descriptive text, if any, about the linked element. 2. Either single click or double click the element. If the link is an internal Desigo CC link, the linked item becomes the primary selection and displays in either the primary or secondary pane. If the link is external, the document, Webs site, or application opens and displays Enabling Point Centered Mode You have a graphic open and would like to place a point object in Point Centered Mode. 1. Select the point object. 2. Click Point Centered Mode. The Point Centered mode context menu displays. The default mode is set to None. 3. Click one of the following options: Point Point Centered Mode is enabled for the point object to display in the center of the pane or canvas. 35

36 3 Overview of Graphics Viewer Working with the Graphics Viewer Group Point Centered Mode is enabled for point objects to display in the center of the pane or canvas. A checkmark displays next to the selected mode and the Point Centered mode is set on the canvas Disabling Point Centered Mode Point Centered Mode is enabled, and you want to disable it. 1. From the Graphics Viewer toolbar, click Point Centered Mode. 2. Select None. Point Centered mode is disabled Working with the Aerial View You have a graphic open and would like to display the Aerial View on the canvas. 1. From the Graphics Toolbar, click on the Aerial View icon. The Aerial View displays in the primary pane. 2. Within the Aerial View, do one of the following: Click on a specific area the graphic view is now adjusted so that the clicked area is the center. Click and drag the mouse - to draw a rectangle around the specific area of the graphic you want to have the focus. The graphic is resized and refocused around the area you clicked or drew Using the Depths Navigation View You have a graphic open in the Primary pane of the Graphics Viewer. You want to view a specific depth associated with the graphic, and, optionally, filter the view of the depth by its associated layers. 1. From the Graphics Viewer toolbar, select DepthsNavigation View. 2. From the depth selection drop-down menu, select the depth you want to view. The graphic and the Navigation View display a list of <All> layers associated with the depth. 3. Optional. Select the Discipline radial button, and from the drop-down menu select a discipline, or select <All> to view all layers. The graphic updates and only displays the layers associated with the selected discipline. The list of layers in the Navigation View is grayed-out, and only the layers associated with the selected depth are check-marked. 4. Optional. Select the Layers radial button, and from the list of layers check-mark each layer you want to include in the graphic view, or uncheck a layer to remove it from view. As you make your selections the graphic view is automatically updated. The graphic is updated to display the depth and layers as selected. 36

37 Overview of Graphics Viewer Working with the Graphics Viewer Zooming in the Graphics Viewer A zoom factor of a graphic can be changed using one of the following methods from the Graphics Viewer toolbar: You have a graphic open. From the Graphics Viewer toolbar in the primary pane, you have the following zoom options available to you: Click Default View100% to display the active graphic at 100% magnification. Click Scale to Fit so that the entire graphic and all the objects on the graphic are visible. Click Zoom In (+20) or Zoom Out (-20) to zoom in or out, accordingly, by a factor of 20% with each click of the icon. Click Zoom View, and from the Zoom View pane, click and drag the Zoom Slider to either increase or decrease magnification of the active element(s). Click Zoom to select from a list of pre-defined zoom factors. Click Zoom Real to zoom in and out, using your mouse wheel Selecting Objects within Graphics Viewer You have a graphic open, and you would like to view the properties of an object on the graphic. Do one of the following: Click and drag until the object is enclosed in the rubber band, and then release the mouse button. You can also select multiple objects by enclosing more than one object in the rubber band. Click directly on the object. You can also select multiple objects by holding down the CTRL key while clicking on more than one object. The object becomes the focus, and the object properties display in Property Viewer. NOTE: When you select a graphics object from System Browser, the Graphics Viewer displays the representative graphic. The selected object is considered the primary selection. The object also displays in the Property Viewer. If you click on another object in the graphic, that object becomes the secondary selection. As a result, Property Viewer changes its display to correspond to the new selection. System Browser, however, still displays the original, primary selection to show your starting point. Double-clicking another object on the graphic makes that object the new primary selection in the Graphics Viewer and System Browser, while the object remains the secondary selection in the Property Viewer. 37

38 3 Overview of Graphics Viewer Working with the Graphics Viewer Dragging Object Properties from the Graphics Viewer Referenced properties of an object or Symbol on a graphic in the Graphics Viewer can easily be dragged over to another graphic in the Graphics Editor, the Contextual Pane, or any other view or pane in that accepts a drag source. NOTE: To select multiple objects, nodes, or properties, click CTRL and then click each item you want to drag over to the Graphics Editor. A graphic is displayed in the Graphics Viewer. If you are dragging an object or Symbol to the Graphics Editor, you must have another System Manager pane open. See, Launching a New System Manager. 1. Hover over an element or Symbol in the Graphics Viewer. A red border displays around the highlighted object. 2. Click the LEFT mouse button and drag. The cursor changes to. 3. Release the LEFT mouse button when the cursor changes to over the intended drop target. The data from the object is copied to the area or field Selecting Objects from System Browser 1. From System Browser, navigate to the graphic object you want to view. 2. Click the graphic object. Graphics Viewer displays the graphic object. Associated properties display in Property Viewer. Related links display in Related Items. To select objects within Graphics Viewer, see Selecting Objects within Graphics Viewer [ 37] Printing from the Graphics Viewer You are in the Graphics Viewer, in Operating mode, and have a graphic displayed in the primary or secondary pane that you want to print. You can do a quick print using the current printer settings or you can configure the print settings prior to printing. Do one of the following: To print using the current print settings - From the Graphics Viewer toolbar, click the Print icon. The Print dialog box displays. Select Print. To configure the print settings before printing - From the Graphics Viewer toolbar, click on the Page Setup icon. The Page Setup window displays. Configure the settings as necessary. For more information, see Page Setup View [ 238]. From Page Setup, click Print, when you are done. The graphic is printed as configured. 38

39 Overview of Graphics Viewer Working with the Graphics Viewer Deleting a Graphic Item You want to delete a graphic item, a graphic or a folder, from the Graphics folder. You can only delete an empty folder, you cannot delete a folder that contains any graphical objects. You are in Engineering mode and the Graphics Editor is displayed. 1. In System Browser, select Application View. 2. Expand the Applications folder. The list of available applications display. 3. Expand the Graphics folder. 4. Navigate to and click the graphic or graphic folder you want to delete. 5. From the Graphics Viewer toolbar, click Delete. The Delete icon is now active and the System Manager dialog box displays. 6. Click Yes to confirm you want to delete the listed graphic item. The graphic item is deleted and removed from System Browser Navigating to the Graphics Library Browser from System Browser You can view the Graphics Library Browser in the primary or secondary pane from System Browser in Operating Mode. 1. In System Browser, navigate to the Management View > Project > System Settings > Libraries. 2. Navigate to and click on any of your graphic Symbol folders. The Graphics Library Browser displays in the Primary pane Creating a Graphic You are in System Browser > Application View and Graphics is selected, or one of the sub-graphic components, and the Graphics Viewer is displayed in the Primary or Secondary pane. NOTE: In order to create a graphic, you must have the appropriate access rights to the Graphics Editor application. 1. In System Browser, select Application View, and then Graphics. 2. In the Graphics Viewer, click the Operating button to switch to Engineering mode. 3. Do one of the following: From the Graphics toolbar, click CreateNew, and select New Template Graphic. From the Application button menu, click New Graphic. A blank, tabbed graphic template displays in the Graphics Editor work area. 4. Create and design the graphic as necessary. 5. From the Graphics toolbar, click Save As. The Save As dialog box displays. 39

40 3 Overview of Graphics Viewer Graphics Viewer Appendix 6. Do one of the following: Saving a Graphic - Select the Graphics folder where you want to save the graphic. In the Name field, type a name for your graphic and click Save. The graphic is saved to GMSProjects > [Name of Your Project] > Graphics folder or sub-folder you may have selected. The graphic is saved in both a.ccg and a.png file format. The graphic is also listed in System Browser under Graphics. Saving a Graphic Template - Navigate to the Libraries folder that contains the Graphics Template folder where you want to save the graphic template. In the Name field, type a name for your graphic template and click Save. The template is saved in a CCT and.png file format Creating a Graphics Sub-Folder You want to create a Graphics sub-folder in System Browser and in your project's Graphics folder. You are in Engineering mode and the Graphics Editor is displayed in the Graphics tab of the work area. 1. To select the location of the new graphics folder, in System Browser, in the Applications View, click Graphics or a sub-folder, if one exists. 2. From the Graphics Editor toolbar, click Create New. The Create New context menu displays. 3. Click New Folder. The Create New Folder dialog box displays. 4. In the Create New Folder field, type a name for the new folder. 5. Click OK. The folder is created and displayed in the Graphics folder in System Browser Editing a Graphic You want to edit an existing graphic. You have a graphic open in the primary pane. 1. From the Graphics toolbar, click Edit. The Graphics Editor opens and displays in the Work Area 2. Make modifications to the graphic as needed. 3. From the Graphics Toolbar, click Save As. The Save As dialog box displays. 4. Navigate to the appropriate folder where you want to save your graphic and type the new graphic File Name and from the Save as Type field, select the appropriate file type. 5. Click Save. The graphic is saved. 3.8 Graphics Viewer Appendix You can use a set of keyboard and mouse button-wheel shortcuts to view the active graphic in the Graphics Viewer. Before applying any of the shortcuts to a graphic, be sure the appropriate graphic is active by clicking on it. 40

41 Overview of Graphics Viewer Graphics Viewer Appendix Keyboard Shortcuts Below is a list of available keyboard shortcuts you can apply to the active graphic or one of its children. A graphic is made active by clicking on the graphic in the primary or secondary pane. Press... CTRL+A HOME END CTRL+HOME CTRL+END PAGE UP PAGE DOWN UP, LEFT, DOWN, RIGHT ARROWS To Select all elements Scroll to the left Scroll to the right Scroll to the top Scroll to the bottom Scroll up Scroll down If not in panning mode: Move selected elements by 1 pixel. If in panning mode: Pan the view by 1 pixel. If modifying a line/polyline node: Move the node by 1 pixel. CTRL+UP, CTRL+LEFT, CTRL+DOWN, CTRL+RIGHT ARROWS If not in panning mode: Move selected elements by the grid pixels. If in panning mode: Pan the view by the grid pixels. If modifying a line/polyline node: Move the node by the grid pixels. CTRL+0 Zoom = 100% SPACEBAR Activate quick panning mode. The previous tool mode is restored when the key is released. MINUS SIGN Zoom out (-20%) PLUS SIGN Zoom In (+20%) Z-key Activates quick zoom mode. Cursor changes to to the magnifying glass and allows you to draw a viewport directly on the active graphic. The previous tool mode is restored when the key is released. F5 F12 Refresh. All views are refreshed. All open graphics are reloaded. Toggle the Aerial View On/Off Mouse Functions The following mouse functions are available in the active graphic once you have activated Zoom mode, either by clicking one of the zoom buttons on the toolbar or by pressing the Z-Key. Click... To CTRL +MOUSE WHEEL Zoom in and out (+ or - 20%) LEFT MOUSE BUTTON Zoom in (+20%) RIGHT MOUSE BUTTON Zoom out (-20%) 41

42 4 Overview of Graphics Library Browser Graphics Viewer Appendix 4 Overview of Graphics Library Browser The Graphics Library Browser allows you toggle between a view that displays all the available Symbols and Graphic Template objects in your project libraries. Additionally, the Graphics Library Browser allows you to do the following: Select from a thumbnail view or list view of all available Symbols or graphic templates. Move the pointer over the graphic object to view its associated Library name, where it is stored, the graphic object s name, and its dimensions. Filter through project the graphic object by name. As text is entered into the filter field, the relevant Symbol(s) or graphic template(s) display in the view s preview pane. Sort available Symbols or graphic templates by Library from a filter drop-down menu. Drag-and-drop or single-click on a Symbol or graphic template to add it to the active canvas. This creates an instance of the Symbol and template. Double-click on a Symbol to add it to the active graphic Select a graphic object to open, edit, or copy the references onto the clipboard. Select multiple graphic objects to drag-and-drop onto a graphic or to open on in the Work Area. Replace or delete a Symbol or graphic template from the Library Browser view. Copy the Symbol or graphic template reference information and paste the information onto a property or expression field. NOTE: Deleting the Symbol or graphic template from the Graphics Library Browser only deletes it from the Library Browser view in the Graphics Editor and does not delete or remove it from the Library Browser in System Browser. 42

43 Overview of Graphics Library Browser Library Browser (System Browser) Library Browser (System Browser) Library Browser View (Thumbnail View) Item Name Description 1 Library Browser Toolbar Menu Allows you to do the following with the selected Symbol. Allows you to edit the Symbol. In the Graphics Editor. Allows you to delete the selected Symbol. Allows you to create a customized version of the selected Symbol. Allows you to zoom-in on the Symbol. Allows you to zoom-out of the Symbol. 2 Folder Name Displays the name of the folder whose Symbols are currently displayed in the Library Browser display window. When you hover over the folder name with your mouse, a tooltip displays the full path of the folder. 3 Thumbnail\List View Toggle Allows you to toggle between a thumbnail or List view of the graphic objects in the Library Browser pane. 4 Search Filter Allows you to search the Symbol and Graphic Templates libraries and limit the objects displayed. 5 Library Browser display pane. Displays available Symbols and graphic templates depending on category or search criteria. 43

44 4 Overview of Graphics Library Browser Graphics Library BrowserTasks 6 Graphic Icons Thumbnails of available Symbol(s) or graphic templates, depending on which mode you have selected. The selected Symbol or Graphic Template is highlighted. 7 Allows you to move the slider with your mouse to increase and decrease the magnification of the selected Symbol icon for viewing within the Symbol Browser view. The magnification value displays as you move the slider and has a minimum magnification of 30% and a maximum of 300%. The slider displays only when you have toggled to the Thumbnail view. 4.2 Graphics Library BrowserTasks Accessing the Library Browser You can access the Library Browser by navigating to a Symbol or Graphic Template folder in any of the Libraries folders. 1. In System Browser, select Management View. 2. Select Project > Management System > Libraries, and then click on either the Symbols folder or the Graphics Template folder. The Library Browser displays in the primary pane Creating a Symbol Folder in Your Library You want to add a Symbol folder, (a library block) to an existing library (library object) in your project that does not already have a Symbol folder. Once you add the folder, you can import Symbols into the folder. 1. In System Browser, select Management View. 2. Select Project > System Settings > Libraries. 3. Navigate to and click on the library block where you want to add a Symbol folder. 4. From the Library Configurator tab, click Add new object, and then select New Child of Type Library Object. The New library GMS_Library_Object displays. 5. Complete the fields in the Library Configurator General settings section. You must complete the Discipline, System, Type and Version fields. 6. Click the Save Data icon. 7. The Save Object As dialog box displays. From the drop-down list box, select the View you want to save the object to. In the Name field, type a name for the new node or keep it as is. In the Description, type a description for the object or keep the text as is. Click the flag icon, and repeat for the available languages. Click Ok when you are done. 8. Click OK. 44

45 Overview of Graphics Library Browser Graphics Library BrowserTasks 4 The new child graphic node is created and displays in the designated library in System Browser. You can now Import Symbols into the Symbol folder you just created Creating a Symbol from the Library Browser You are in the Symbols Library Browser and want to create a new Symbol. System Manager is set to Engineering Mode. 1. From the Graphics toolbar, click the Edit button The Graphics Editor displays in the Primary pane. 2. From the Graphics toolbar, click Create New, and select New Symbol. An untitled and tabbed Symbol template displays in the Graphics Editor work area. 3. Draw, design, and assign evaluations and mappings to the Symbol as necessary. 4. From the Graphics toolbar, click the Save icon. The Save dialog box displays. 5. From the Project folder, navigate to the appropriate library and click on the associated Symbols folder. 6. Enter a name in the Name field, and click Save. The Symbol is saved in the designated Symbols folder in two file formats: PNG and.ccs. The Symbol can be previewed in the Graphics Library Browser Editing a Symbol from the Library Browser You can initiate the editing of a Symbol or Graphic from the System Browser's Library Browser. 1. From the Library Browser pane, click on the Symbol that you want to edit. The Symbol background color is now shaded in a light orange. 2. Right-click on the selected Symbol, and from the context menu, select Edit. The Graphics Editor is spawned, and the Symbol is displayed on the active canvas. 3. Make your edits to the Symbol. When you are finished, from the toolbar menu click on one of the following: To save the Symbol with the same name and to the same location. To rename the Symbol and\or save it to another library location. The Save As dialog box displays. Enter the new Name for your Symbol and navigate to the new location for the Symbol, and then click Save. 4. From the Toolbar menu, select Home, to return to the Library Browser. 45

46 4 Overview of Graphics Library Browser Graphics Library BrowserTasks Creating a Customized HQ Symbol You can customize any existing HQ Symbols so that they display a "Regional" or customized version of that Symbol in your Project graphics. 1. In System Browser, select Management View, and expand the Project node. 2. Navigate to System Settings, and then expand the Libraries folder. 3. Expand the Headquarter library folder, and navigate to the Symbols library that contains one or more Symbols you would like to create a customized Symbol for. 4. Select the Graphics tab. The Symbols in the Symbol libraries display in the Library Browser in the primary pane. 5. Click on the Symbol(s) you want to create a customized Symbol for, and then from the Library Browser toolbar, click Customize. 6. Click OK to confirm you want to customize the current library and the listed Symbols. The Symbol(s) are added to the Symbols folder now displayed under the Region library folder. And, the Symbols display in the Graphics Editor. 7. Modify the Symbol as required for your region. When finished, click Save. The updated Symbol is now saved in the Regional Symbol folder, and the original Symbol remains in the original library folder with the Localized Symbol icon displayed in the upper left-hand corner of the Symbol thumbnail image Deleting a Customized Symbol You have a customized Symbol you want to delete. Deleting the customized Symbol does not affect the original Symbol. 1. Navigate to the appropriate Library where the customized Symbol is located. If you place the mouse over the original Symbol, the tooltip lists the location(s) of the customized Symbol(s), or, if you use the Library Browser's List View to display the Symbols, the Customized column, displays the location of any customized Symbols. 2. Make sure you are in Engineering mode. 3. From the Library Browser toolbar menu, click Delete. 4. Click Yes to confirm you want to delete the selected Symbol. The customized Symbol is deleted from the library, and the original Symbol no longer displays the Customized icon. 46

47 Overview of Graphics Editor Graphics Editor Modes 5 5 Overview of Graphics Editor Overview Graphics Editor is the component of the System Manager application used to create and handle large graphics representing equipment, floors, buildings, facilities, and entire campuses. These graphical representations can contain dynamic elements to represent devices or values you want to monitor or control. The Graphics Editor is accessible from the Graphics Viewer and from the Symbols and Graphic Templates stored in the Graphics Library Browser. Graphics, Symbols, and Graphic Templates are created in the Graphics Editor. The Function Editor allows you to associate Symbols to data types and object-type properties. The Graphics application loads and saves the proprietary Desigo CC CC XMLbased files, used to define the elements contained within a graphic which results in a corresponding object being created by the graphics processor via a serialization operation. The serialization process includes loading and parsing the xml file, converting it into the appropriate object model suitable for the Graphic Engine to configure, view, and save configuration details of graphics, views, and symbols. Graphics Editor Features The Graphics Editor allows you to perform the following: Create, configure, edit, and manage dynamic color and animated graphics and templates. Store, organize, and compare all graphics, templates, and Symbols in a Graphics Library Browser. Associate multiple layers, depths, and graphic pages for in-depth detailed views for monitoring and commanding purposes. Navigate graphic layers and depths by using the zooming, panning, and filtering controls Import and edit.ccg,.ccs,.cct, XPS, DWFX, and AutoCAD files Create, customize, and associate BACnet FLN Device, or TEC graphics Specify Access Rights for creating and editing graphics. 5.1 Graphics Editor Modes Modes are a group of settings that provide different capabilities for designing and testing graphics. The Graphics Editor provides three mutually exclusive modes Design, Test, and Runtime that allow you to design, edit, and test a graphic. You can test a graphic with simulated values by using the Value Simulator. Or, you can use a fourth mode, Online mode, in conjunction with Test and Runtime modes, which allows you to access all your actual data point values for real time testing. Design Mode Allows you to design and edit graphics, where all static design values apply. Test Mode Allows you to design and edit graphics, and test simulated values using the Value Simulator. If Online mode is also enabled, you can access and test all your data point values from an actual online environment. Runtime Mode Allows you to select and command elements. Design and editing capabilities are disabled. If Online mode is also enabled, you can access and test all your data point values from an actual online environment. 47

48 5 Overview of Graphics Editor Overview of Views and the Dock Panel Online Mode If enabled, displays real time data point values from an actual online environment. This mode is used in conjunction with Test and Runtime modes. 5.2 Overview of Views and the Dock Panel Views are mini-windows with specific functionality that allow you to display, create, test, or edit elements, graphics, and Symbols. Views, when selected from the ribbon, are displayed within the dock panel; a frame below the ribbon, that hosts the views and allows you to choose where and how a view displays. A view can be docked into a specific position, you can click-and-drag the view and place it anywhere in the Graphics Editor, or you can snap it into five different locations around the inner perimeter of the Graphics Editor. List of Views The Graphics Editor includes the following views: Aerial Brush Editor Depths Element Tree Evaluation Editor Find and Replace Library Browser Properties Status Bar Value Simulator For more information, see Display Views Group [ 60]. Hiding, Restoring, and Closing Views You can hide a view to conceal its content and create more space for other views, and then use the Thumbnail icon to reveal content when you need it. You can also close a view by clicking the Close icon. When you close a view, you remove it from the dock panel. To return the view to the dock panel, you re-select it from the ribbon s Display Views group on the View tab. Moving, Docking, Saving, and Resetting Views You can customize your workspace by moving views from one area of the dock panel to another. When you click and drag a view, as you move the view around the dock panel a series of position anchors display and if you hover over one of the positions a blue shaded area indicates where the view would dock and display upon releasing the mouse button. If you like the current layout of your views in the dock panel, you can save the current workspace definition, and reset both the current and factory workspaces through the ribbon s Layout group command on the Options tab. Floating Views You can drag views to other locations of your monitor(s) so that they float separately from the Graphics Editor snap-in and th application panes. This is especially useful if you use two monitors since you can then expand the floating view to accommodate more information and eliminate excessive scrolling. Floating a view also frees up real estate for the remaining views in the main window. 48

49 Overview of Graphics Editor Graphics Editor Workspace 5 NOTE: You can float a view on an installed client; however, the Web Server and Remote Server clients do not support floating windows. 5.3 Graphics Editor Workspace The Graphics Editor window consists of a tabbed ribbon, a quick access toolbar, a status bar, multiple views for both viewing information and completing specific tasks, and a work area that contains tabbed drawing board panes that house the canvas upon which graphics are drawn and edited. Additional tools and components available in the Graphics Editor include right-mouse click context menus, vertical and horizontal scroll bars, navigational tools, and keyboard shortcuts. Graphics Editor User Interface Item Description 1 Status Toolbar 2 Dock Panel with Views 3 Graphics Editor Engineering toolbar NOTE: In Operation mode the Graphics Viewer toolbar displays. 4 Quick Access Toolbar 5 Ribbon 6 Work area Scrollbars The Graphics Editors displays the vertical and horizontal scrollbars when the graphic or Symbol is larger than the canvas area. The Scrollbars are visible in all modes. The scrollbars allow you to navigate left or right, up or down in the current drawing board. 49

50 5 Overview of Graphics Editor Graphics Editor Workspace Graphics Editor Toolbar Graphics Viewer Toolbar Engineering Mode Icon Name Description Edit Graphics Create New Save Save As Delete Graphics Zoom In (+20%) Toggle between the Graphics Editor and the Graphics Viewer. Display a context menu that allows you either create a new graphic or create a new folder. Open the Save As dialog box that allows you to save and close the active graphic. Open a Save As dialog box that allows you to type a file name for the graphic and then to save the active graphic as a XAML file. Delete graphics and graphic folders. The selection deleted is always listed in the primary selection shown in the Graphics Viewer. Zoom in by + 20% on the active graphic with each mouse click. Zoom Out (-20%) Zoom out by - 20% on the active graphic with each mouse click. 100% Display the active graphic at 100% magnification. Zoom Scale to Fit Point Centered Display Mode Page Setup Show Status and Command Pane Coverage Area Mode Print Select a pre-defined zoom level. Scale the graphic in the workspace of the Graphics Editor. Move the selected point to the center of the graphic. Display the Page Setup view for the current graphic. Allows you to enable or disable the Status and Command pane from displaying. When this icon is enabled, it allows you to view the coverage areas on the graphic. When disabled, no coverage areas display on the graphic. Display the Print dialog to print the current graphic displayed in the Graphics Editor Ribbon A ribbon is a command bar that provides you with three tabs Home, View, and Options that enable you to customize your workspace, and create, edit, and format your graphic images. Along the ribbon, you will find the File menu button, and then the ribbon tabs and groups. In the example below, the customizable Quick Access toolbar is above the ribbon, but, can also be displayed below the ribbon. 50

51 Overview of Graphics Editor Graphics Editor Workspace 5 Ribbon Item Name Description 1 Tabs and Groups Tabbed menu bar that enables you to customize your workspace, and create, edit, and format your graphic images. The three tabs include the Home, View, and Options. Each tab includes a series of selectable task buttons organized into groups. 2 File Menu Lists a number of frequently used tasks having to do with creating new graphics or Symbols, saving, printing, troubleshooting, and converting AutoCAD files. 3 Quick Access Toolbar A customizable menu that allows you quick access to any tasks that have been added to the menu Work Area Every time you open or create a new graphic, Graphic Template, or Symbol in the Graphics Editor, a new untitled tabbed pane, housing the drawing board which contains the graphic or blank canvas, is added in the work area. The work area of the Graphics Editor is where the open graphics are tabbed, displayed, and edited. The canvas is the white space where elements and graphic objects are placed, drawn, and edited and the outside perimeter around the canvas is the drawing board the canvas resides on. Any elements or objects placed outside the canvas on the drawing board are not displayed in the Graphics Viewer File Menu The following commands are available from the File menu. File Menu Menu Item New Graphic New Symbol New Graphic Description Add a new blank tabbed graphic canvas in the work area. Add a new blank tabbed Symbol canvas in the work area. Add a new blank tabbed graphic canvas template in the work area. Template Open Close Close All Save Save All Save As Page Setup Open the Open dialog box to browse to select a XAML file that opens a new tab in the work area. Open the Save dialog box to save and close the active graphic. Open the Save dialog box to save and close the active graphic. The Save As dialog box re-launches until all the open graphics are closed. Open the Save dialog box the first time you save a graphic. After the initial Save, the graphic is automatically saved and the Save dialog box does not display. Open a File dialog box to select a file name to save the active graphic as a XAML file. The File dialog box is re-launched until all graphics have been saved or closed Open a Save As dialog box to select a file name to save the active graphic as a XAML file Open the Page Setup view to set your printing parameters. 51

52 5 Overview of Graphics Editor Graphics Editor Workspace About Preview Print Update graphics Consistency Checker Open the Print Preview pane and display the current document as it will print. Open the Print dialog box to print your current document. Display the current version number of the Graphics Editor. When selected, the Consistency Checker program displays and runs the File Conversion task to check and resolve dependency issues after having upgraded Symbols (from a custom library) from the old format to the new format. Open the Inconsistency Checker pane to view and troubleshoot any inconsistencies in the open graphics related to invalid references to either a missing data point or a missing graphic file Home Tab The Home tab allows you to select tasks and commands associated with formatting and editing elements on a canvas. You can also switch between Design, Test, Runtime, and Online modes to view your graphics in different mode. The Home tab contains the following groups: Edit Group [ 52] Elements Group [ 53] Viewports Group [ 54] Selection Group [ 54] Brushes Group [ 56] Format Group [ 56] Stroke Group [ 57] Zoom Group [ 58] Printing Group [ 58] Modes Group [ 59] Edit Group The Edit group options allow you to work within the active canvas to cut, copy, paste, and format graphic elements, as well as undo, redo, and repeat actions on the canvas Edit Group Icon Name Description Paste Cut Insert the clipboard contents onto the active canvas. Remove the selection from the active canvas and put it on the clipboard. 52

53 Overview of Graphics Editor Graphics Editor Workspace 5 Copy Copy XML Copy Format Paste Format Delete Copy the selection to the Clipboard. Copy the selected element as an XML string for the clipboard. Copy property formatting to an element on the active canvas. Apply property formatting to an element on the active canvas. Remove the selection from the active canvas. Undo Redo Repeat Undo an action from a list of the most recent actions. Redo an action from a list of the most recent actions. Repeat the last action performed Elements Group The Elements group options allows you to create and work with graphic elements on the canvas, as well as insert images, animation objects, XAML files, and AutoCAD files. Elements Group Icon Name Description Select Objects Freeze Text Rectangle Ellipse Line Path Polygon Animation View when the select objects cursor mode is active. When the select objects cursor mode is active, the button background color is yellow. Draw a selected element repeatedly without having to reselect the element. The Freeze command can be selected directly, or each time you click on the same element consecutively, the Freeze command for that element is toggled on and off. Create a text block on the canvas. Create rectangles and squares. Create ellipses, arcs, and pie shapes. Create a geometric line between two distinct points. Create a series of line segments and curves. Create a polygon. Insert a configurable animation object on the canvas. 53

54 5 Overview of Graphics Editor Graphics Editor Workspace Import Image File Import AutoCAD and XML Image Files Navigate to and insert a image, for example,.bmp,.gif,.jpg, TIF. Navigate to and insert XAML, XPS, and convert AutoCAD files using the AutoCAD Importer Viewports Group Paging Group The Paging Group options allow you to enable the Manual Page mode and draw a manual page on the active graphic. Viewports Group Icon Name Description Viewport Mode Manual Page Enable the Manual Viewport mode. All existing viewports in the active graphic display and the Manual Viewport Mode icon is active. Manually draw a graphic viewport on the active canvas Selection Group The Selection Group options allow you to arrange, group, combine, and align elements on the canvas. The following options are available from the Selections Group: Order Group Combine Alignment Snap Selection Group Order Options The Order options allow you to arrange overlapping graphical elements in a stacking order. Icon Name Description Bring to Front Send to Back Move the graphical element to the front of the stack. Move the graphical element to the back of the stack. 54

55 Overview of Graphics Editor Graphics Editor Workspace 5 Bring Forward Send Backward Move the graphical element forward one level in the stacking order. Move the graphical element backward one level in the stacking order. Group Options The Group options allow you to combine multiple graphic elements into groups or separate individual graphic elements from groups. Icon Name Description Group Ungroup Join Group Leave Group Combine multiple graphic elements into a group so that when one element is repositioned, all the other elements move with it. Separate individual graphic elements from a group so that they can be repositioned independently. Add one or more graphic elements to an existing group. Remove one or more graphic elements from a group. Combine Options The Combine options allow you to combine or exclude areas of overlapping graphical shapes. Icon Name Description Union Intersection Exclude Overlap Subtraction Combine all parts of two elements into one path element. Create a new path element shaped by the overlapping portions of two elements. Combine two elements to create a new path element. Any overlapping portions are excluded. The excluded portion is transparent. Create a new path element that is based on the first selected element minus the overlapping portions of the two elements and the second selected element. Alignment Options The Alignment options allow you to set the placement of multiple elements on the canvas. Icon Name Description Align Left Align Center Align Right Align Top Align Middle Align Bottom Align the selected elements with the left edge of the element farthest to the left. Align selected elements to the center of the widest element so that the horizontal center of all elements is set to the horizontal center of the widest element. Align the selected elements with the right edge of the element farthest to the right. Align the selected elements with the top edge of the element farthest to the top. Align selected elements to the middle of the tallest element so that the vertical middle of all elements is set to the vertical middle of the tallest element. Align the selected elements with the bottom edge of the element farthest to the bottom. Horizontal Spacing All selected elements are aligned so that they have even spacing between them with respect to 55

56 5 Overview of Graphics Editor Graphics Editor Workspace Snap Option Vertical Spacing Align Wrapped Snap Now the X-axis. All selected elements are aligned so that they have even spacing between them with respect to the Y-axis. Align the selected elements on the canvas in a row from left to right and the rows from top to bottom. When you drag-and-drop multiple elements onto the canvas, they are by default Align wrapped. Snap the top-left corner (or anchor) of an element (or Symbol) to the nearest grid intersection Brushes Group The Brushes group allows you to select a color from the drop-down menu for the fill, stroke, and background colors of the currently selected element on the canvas. Brushes Group Icon Name Description Fill Stroke Background Set the color apply to the Fill (interior) property of the selected element(s). Set the color that is applied to the Stroke property or the font color of the selected element(s). Set the color that is applied to the Background property of the selected element on the canvas Format Group The Format group allow you to adjust the font styles and formatting of textual graphic elements. Format Group Icon Name Description Font Family Font Size Increase Font Size Decrease Font Size Allows you to select a font type from the drop-down menu. Allows you to specify a font size from the drop-down menu. Allows you to increase the font size to a pre-determined default. Allows you to decrease the font size to a pre- 56

57 Overview of Graphics Editor Graphics Editor Workspace 5 determined default. Horizontal Text Alignment Vertical Text Alignment Bold Italic Underline Strikethrough Resize Fonts Allows you to set the horizontal position of the text contained within the element s bounding rectangle. Options are: Right, Center, Left, and Justify. Allows you to set the vertical position of the text contained within the element s bounding rectangle. Options are: Top, Center, and Bottom. Allows you to apply bold formatting to the selected text. Allows you to apply italic formatting to the selected text. Allows you to apply underline formatting to the selected text. Allows you to apply strikethrough formatting to the selected text. Allows you to toggle between enabling the Font Size property of an active element to automatically update according to any resizing done on the canvas. If inactive, the font size of the selected element remains as initially set in the Property view Stroke Group The Stroke group allows you to format an element s outline by choosing options from a set of stroke-related drop-down menus. You can select the overall type and thickness of the stroke. You can also choose a flat, round, square, or triangle for the starting and ending edge of line of figure. If the active element has unconnected lines you have the option of setting the end caps for each segment. Stroke Group Icon Name Description Stroke Dash Array Stroke Thickness Stroke Start Line Stroke End Line Stroke Line Join Select the stroke type from the drop-down menu. Select the stroke thickness from the drop-down menu. The thickness is measured in pixels. Set how the start edge of the stroke line is drawn. Options are: flat, round, square or triangle edge. Set how the start edge of the stroke line is drawn. Options are flat, round, square or triangle edge. Set how the corners are drawn. Options are: pointed, flat, or rounded corners Stroke Dash Cap Select a style for the end if the line 57

58 5 Overview of Graphics Editor Graphics Editor Workspace Zoom Group The Zoom group options allow you to pan, or zoom in or out of a graphic image. Zoom Group Icon Name Description Zoom Indicator Display the current scale factor of the active canvas and allows you to either select a predefined magnification from the drop-down menu or type a magnification value. 100% button Display the active graphic at 100% magnification when the button is clicked on. Fit Size Free Zoom Pan Zoom Slider Scale the graphic so that all the elements and contents on the canvas are visible Draw a zoom rectangle directly on the canvas. Repeat as needed. Tip: You can use the Z-Key for a quick zoom. Move the graphics viewing area up, down, or sideways to display other areas which, at the current viewing zoom factor, lie outside the viewing area. Zoom in on the active canvas by adjusting the slider Printing Group Printing Group Icon Name Description Page Setup Preview Print Open and display the print Page Setup view. Open the Print Preview pane and displays the currently selected graphic. Display the Print dialog box to print the current graphic\document. 58

59 Overview of Graphics Editor Graphics Editor Workspace Modes Group Modes Group The Modes group allows you to toggle between Design, Test, or Runtime mode. Modes Group Icon Name Description Design Test Runtime Online Design and edit graphics and apply static values only. Design, edit graphics and simulate data point values. You can use online subscriptions if the Online Mode is enabled, or you can use subscriptions from the Value Simulator. Test a graphic to see how it will display in the Graphics Viewer, by simulating data point values using online subscriptions, if the Online mode is enabled, or using subscriptions from the Value Simulator. Runtime mode does not allow you to design or editing a graphic. Allows you to subscribe to COVs in an actual online environment. If disabled, data point values can be simulated with the Value Simulator View Tab The View tab allows you to make selections that determine which views to display, and how the grid and guidelines are displayed on the canvas, as well as how to display units, and layers in the active graphic. The View tab contains the following groups: Display Views View Workspace 59

60 5 Overview of Graphics Editor Graphics Editor Workspace Display Views Group Display Views Group The Displayed Views group option allows you to select which views to display or hide in the dock panel. Display Views Group Name Aerial View Brush Editor Element Tree Value Simulator Depths Properties Evaluation Editor Library Browser Find and Replace Status Bar Description Show or remove the Aerial View from the workspace. Show or remove the Brush Editor from the workspace. Show or remove the Element Tree the workspace. Show or remove the Value Simulator View from the workspace. Show or remove the Depths View from the workspace. Show or remove the Property View from the workspace. Show or remove the Evaluation Editor from the workspace. Show or remove the Library Browser from the workspace. Show or remove the Find and Replace view from the workspace. Show or remove the Status Bar at the bottom of the workspace View Group View Group The View Group options allow you to view logical or physical units of properties placed on the canvas, enable layer visibility range, so that if you zoom in or out, the visible layers will depend on the current zoom factor. View Group Icon Name Description Show Logical Units Disable Layer Visibility Range Toggle between displaying the logical or physical units of a property Toggle between enabling and disabling the layer visibility range in the active graphic. 60

61 Overview of Graphics Editor Graphics Editor Workspace Workspace Group Grid and Guidelines Group The Workspace group options allow you to hide or display grids and guidelines, as well as attach graphic elements to guidelines. Workspace Group Name Snap Display Grid Display Guidelines Description Attach elements to the nearest guideline to make it easier to create an accurate graphic. Display or hide a pattern of equally spaced horizontal and vertical lines on a graphic to help you align elements symmetrically and precisely. Display or hide horizontal or vertical guidelines lines dragged onto a graphic to help you align elements symmetrically and precisely Options Tab Options Tab The Options tab provides you with special editing and layout options. The Bitmap Transparency group allows you to create transparent bitmap files. 61

62 5 Overview of Graphics Editor Graphics Editor Workspace Bitmap Transparency Group The Bitmap Transparency group allows you edit a bitmap image by enabling the bitmap transparency feature. Bitmap Transparency Group Name Enable Color Field Description Enable or disable the Transparency Color feature for editing a bitmap image. Set the Transparent Color by entering a hexadecimal color code or the name of a color, or selecting a color from the Brush Editor view Layout Group Layout Group The Layout group options allow you to customize the views and dock panel settings or restore them back to the original configuration. The configuration you choose becomes active when you re-enter the application. Layout Group Icon Name Description Save as Default Restore Default Save your current dock panel layout and any user settings or preferences selected in each of the Views as your default settings. Restore the configuration to the original default settings Control Group Control Group The Control group options allow you to work with locked elements on the canvas and refresh any open views. 62

63 Overview of Graphics Editor Graphics Editor Workspace 5 Control Group Icon Name Description Break Lock Refresh Coverage Area Mode Select a locked element on the canvas with the rubberband or keyboard function. This allows you to temporarily work with locked elements in Design mode. Reload all open views. Any unsaved settings will be lost. Toggles the display and view of the coverage area(s) Symbol Options The options in the Symbol Options group provide tasks to use in conjunction with Symbols that will be added to the active graphic. Symbol Options Group Icon Name Description Symbol Style Filter Function Filter This option allows you to select a Style to apply to the ensuing Symbol(s) you insert onto the active canvas. You can also apply the filter to selected Symbols already on the canvas. Selecting a Style from the drop-down menu, displays the default Symbol associated with that Style depending on the data point and Function the Symbol is associated with. The default option Any, displays the default Symbol associated with the Style group None. Also, if a default Symbol does not exist for the selected Style, then the default None Symbol is displayed.. Used in conjunction with the Replace Symbol Instances option off of the Graphics context menu, this feature allows you to display associated Symbols from the Function or/and the Object Model. Cleared = Display assigned Function Symbols (if available; assigned Object Model Symbols are displayed in the event that no Function Symbols exist). Checked = Display the associated Symbols from both Function and Object Model Quick Access Toolbar The customizable Quick Access toolbar allows you to store shortcuts for tasks and features you need quick access to. You can select where to position the toolbar, and from the Quick Access toolbar, you can also minimize and maximize the ribbon. 63

64 5 Overview of Graphics Editor Graphics Editor Workspace The Quick Access Toolbar context menu allows you to move the mouse over the ribbon command buttons to add a task to the Quick Access toolbar or to mouseover command buttons on the Quick Access toolbar to remove tasks. Depending on your settings, the Quick Access toolbar is located above or below the ribbon Views Views are mini-windows with specific functionality that allow you to display, create, test, or edit elements, graphics, and Symbols. The table below provides a description of each view in the Graphics Editor. View Aerial View Brush Editor Depths Element Tree Evaluation Editor Find and Replace Properties Library Browser Comparison Browser Value Simulator Status Bar Description View the entire drawing area and active graphic at all times, while giving you the ability to zoom in on a specific area of the graphic. Modify your drawing elements with options such as colors, gradients, light angles, and other special effects to achieve a truly custom look. Create, delete, rename, and change the properties of a depth, view a list of depths and layers and move them up or down the list to order them, associate depths to layers and display the size and Symbol scale factor. Display, add, and delete layers associated with the active graphic or Symbol. All the drawing elements associated with the layers are also displayed in the Element Tree View. Elements within a layer can be ordered using the positioning arrows at the bottom of the View. Within the Element Tree you can also decide which layers, depths, or elements to display in Runtime or Design mode. Set and edit element properties of the active graphic or Symbol. Customize a search and replace (optional) for specific text, strings, values, and properties in all open graphics or all the graphics in your project. View, set, and edit the properties of the selected element(s) on the canvas. Preview, sort, select, and edit existing Symbols and their names. You can also resize a Symbol within the Library Browser. Open another instance of the Library Browser to compare Symbols and graphic Templates from other libraries. Select, view, and adjust the settings for simulating property values to test how configured graphic settings will be applied in Runtime mode. 64

65 Overview of Graphics Editor Graphics Editor Workspace View Menu Bar The following menu bar displays at the top of all views. Views Menu Bar Item Name Description 1 Window Position Menu Click on the icon to choose from the following options from the windows position menu: Floating: Udock the view, and then click and drag anywhere on your workspace. Dockable: Click, drag, and snap a view to one of five (right, left, top, bottom, and center) set anchor locations in the workspace to dock the panel. Auto-Hide: Hide the views dock panel from your workspace. Click on the Views text button to slide the Views panel back into view. This option is only available when the panel is docked. Hide: Close the view during your current Graphics Editor session. When you close out of a session, and then return to start a new session, the view will redisplay in the docking panel. 2 Auto-Hide Hide the views the entire dock panel from your workspace. Click on the views text button to slide the Views panel back into view. This option is only available when the panel is docked. 3 Close Close the View and remove it from the docking panel. 65

66 5 Overview of Graphics Editor Graphics Editor Workspace Library Browser View Depending on which view you are in, Symbols or graphic templates, the Library Browser view provides you with a thumbnail preview of the available graphic objects. Library Browser View (Thumbnail View) Item Name Description 1 Library Browser display pane. Display available Symbols and graphic templates depending on category or search criteria. 2 Filter by Library Display all the Symbols or graphic templates in your project libraries or just display the graphic objects from the library selected in the dropdown menu. 3 Symbols\Graphic Templates Toggle Switch between displaying and viewing Symbols or graphic template library objects in the view. 4 Thumbnail\List View Toggle Toggle between a thumbnail or List view of the graphic objects in the Library Browser pane. 5 Search Filter Search the Symbol and Graphic Templates libraries and limit the objects displayed. 6 Graphic Icons Display thumbnails of available Symbol(s) or graphic templates, depending on which mode you have selected. 7 Move the slider with your mouse to increase and decrease the magnification of the selected Symbol icon for viewing within the Symbol Browser view. The magnification value displays as you move the slider and has a minimum 66

67 Overview of Graphics Editor Graphics Editor Workspace 5 magnification of 30% and a maximum of 300%. The slider displays only when you have toggled to the Symbol Thumbnail view. In the Library Browser s List view, the Symbols and graphic templates are listed by Name, Library, and File. A thumbnail preview is not displayed. Library Browser View (List View Fields) Name Name Library File Description Display the Symbol or graphic template file names. Display the library name where the Symbol or graphic template is stored. Display the full path of the Symbol or graphic template s location Status Toolbar The status toolbar, when enabled, is located at the bottom of the Graphics Editor screen. The status toolbar displays current information about the version of the Graphics Editor being used, the position of the mouse, and the name of the object on the graphic canvas that is active and has the focus. Item Description Status Bar 1 Graphics Editor Version - Displays the current Graphics Editor version. 1b Error Message Display Displays error message related to actions in the view. 2 Mouse Position - Displays the current mouse position 67

68 5 Overview of Graphics Editor Workspace Configuration Open Dialog Box Item Name Description 1 Project List Displays an expandable list of all the libraries related to the project. 2 Library Content Displays a list of all the graphics in the selected folder. 3 Splitter Allows you to Show or Hide the preview pane and change its size. 4 Preview Pane Displays a thumbnail view of the selected graphic in the folder. 5 Name Displays name of the graphic 6 Open Click to open the graphic 7 Cancel Click to close the dialog box. 5.4 Workspace Configuration Saving the Layout Configuration You have adjusted the dock panel layout and the views with the default settings you want displayed when the Graphics Editor opens. On the Options tab, in the Layout group, click. The current dock panel layout configuration and view settings are saved as your default layout settings. 68

69 Overview of Graphics Editor Workspace Configuration Restoring the Default Layout Configuration You can restore the Graphics Editor dock panel layout to the last saved default layout. On the Options tab, from the Layout group, click Restore Default. The dock panel layout and vews settings are restored to the last saved default configuration Working with Modes Changing Modes 1. On the Home tab, select the Modes group. 2. Select the mode you want to switch to. The Graphics Editor now switches the mode you are in Working with the Ribbon Adding and Removing Items to the Quick Access Toolbar You can add and remove ribbon task button commands from the Quick Access toolbar by using the Quick Access Context menu: To Add a Command to the Quick Access toolbar Right-click on the Ribbon button command you want to add to the Quick Access toolbar, and select Add to Quick Access Toolbar. The button command is added to the Quick Access toolbar. To Remove a Button from the Quick Access Toolbar - Right-click on the button command on the Quick Access toolbar you want to remove. The button command is removed from the Quick Access toolbar Minimizing the Ribbon You can minimize the ribbon, so that only the tab names display and not the associated task groups. When working with the minimized Ribbon, once you have navigated to a task and it has been selected, the ribbon minimizes again. 1. Navigate to the Quick Access Toolbar. 2. Click the drop-down arrow. The Customize Quick Access Toolbar menu displays. 3. Select Minimize the Ribbon. A check mark displays to let you know this option is enabled, and the ribbon is minimized, so that only the tab names display. If you want to disable this feature, simply click on the option again. The check mark no longer displays, and the entire ribbon area is visible. 69

70 5 Overview of Graphics Editor Workspace Configuration Positioning the Quick Access Toolbar The Quick Access toolbar can be positioned to display above or below the ribbon. If the toolbar is currently displayed above the ribbon, you can choose to display it below the ribbon. Conversely, if the toolbar is currently below the ribbon, you can choose to display it above the ribbon. NOTE: The Customize Quick Access toolbar menu is also available when you right-click anywhere on the Ribbon. 1. Navigate to the Quick Access Toolbar. 2. Click the drop-down arrow. The Customize Quick Access Toolbar menu displays. 3. Select the one of the following options: Show Below the Ribbon, to display the toolbar below the ribbon. Show Above the Ribbon, to display the toolbar above the ribbon. The Quick Access Toolbar displays as selected Working with the Views and the Dock Panel The dock panel is the area below the Ribbon that allows you to display and configure how to display your working views in the Graphics Editor Displaying and Closing Views You can decide which views to display in the dock panel frame of the Graphics Editor. 1. On the View tab, in the Display Views group, check the checkbox next to the views you want open in the dock panel. If a view checkbox is not selected, it will not display in the dock panel. The selected views display in the dock panel frame. NOTE: By default, the Find and Replace view is set to float and does not automatically dock when checked. 2. To close a view, click on the Close icon. The view is removed from the dock panel frame and unchecked in the Display Views group. 70

71 Overview of Graphics Editor Workspace Configuration Docking a View All views displayed in the dock panel are by default set to Dockable. This means you can click, drag, and reposition a view. When you move the view around the dock panel, available docking anchors display, allowing you to determine where to dock your view. NOTE: The Find and Replace view and the Page Setup pane are not dockable by default. The view is displayed in the dock panel below the ribbon. 1. If the view is not already in the dockable state, right-click on the view s title bar and from the context menu, select Dockable. 2. Click on the title bar of the view panel and start to drag the panel. When you drag the view panel, the available position anchors display. 3. Hover over the anchor position where you want to display the view panel. A blue-shaded area displays showing you the target position for that position anchor. 4. Release the mouse button when you have found the appropriate position. The view panel docks itself to position of the anchor. Example below, docking position anchors are active while moving the view panels around the docking panel. The blue-shaded area represents the target position of the current anchor. 71

72 5 Overview of Graphics Editor Working with a Graphic Floating a View A view can be set to float, which means you can click and drag the view panel to any position on your monitor(s) without being confined to the perimeters of the Graphics Editor. NOTE: You can float a view on an installed client, however, the Web Server and Remote Server clients do not support floating windows. The view is displayed in the docking panel. 1. Right-click on the title bar of the views and from the context menu, select Floating. The views panel undocks itself from the docking panel. 2. Click on the title bar of the view and drag it to the desired location on your monitor s screen Auto-Hiding Views You can use the auto-hide feature to slide a view in and out of sight. This allows more space in the dock panel for the view(s) you are actively working in. The view is displayed in the dock panel below the ribbon. 1. From the view title bar, select the Auto-hide icon. The view slides into the nearest edge of the Graphics Editor and displays a tab with the view s name. 2. When you want to display the hidden view, hover over the view s tab with your mouse. The view is fully visible in the dock panel and the auto-hide icon is in the enabled position. When you move the mouse outside of the view area, the view slides back into the auto-hide position. 3. To undo the auto-hide feature, so that the view is always visible in the dock panel, click on the Auto-Hide (enabled) icon. The view is now docked in the dock panel, the auto-hide is disabled, and the Auto-Hide (disabled) icon displays. 5.5 Working with a Graphic Overview of Graphic Components and Types Graphic A graphic is a visual representation of a piece of equipment, floors, buildings, a plant, or an entire campus engineered for a specific project. The graphic is a.ccg file that contains drawing elements and images and is saved to a project s Graphics folder. Viewport A defined area within a graphic or a sub-component of a data point representing the parent graphic page. There are two types of graphic viewports: Manual and 72

73 Overview of Graphics Editor Working with a Graphic 5 Automatic. Automatic viewports are calculated whenever a graphic is saved to the graphics folder; and Manual viewports are drawn on a graphic by a user. A graphic viewport is a defined rectangular sub-section of a graphic that can be viewed independently of the main graphic; it is a zoomed-in view of a larger graphic that allows you to see specific detail related to the graphics depth. Viewports are stored as children of their parent graphic and displayed in System Browser > Graphics folder. There are two types of graphic viewports: automatic and manual. Automatic viewports are automatically generated when a graphic contains one or more data point objects. The data point object is automatically linked and mapped to that view of the graphic and stored in the Related Items pane. During runtime, if the object is selected from System Browser, the part of the graphic that hosts that object, its viewport, displays in the graphics viewer. Manual viewports are created by a user. Manual viewports are drawn on a graphic in the Graphics Editor, and then data point objects from System Browser are associated with them. Symbol A reusable XAML file that represents a piece of equipment, floor, or any component or entity. They are saved as.ccs files and stored in a library and are typically used to display system object values. A Symbol does not have a data point type associated with it. Graphic Template The Desigo CC software package provides you with standard BACnet device graphics for various applications The graphic contains placeholders to data points using expression references, for example RoomControllerRef. Graphic Templates are saved as.cct files and display the runtime values of mapped system objects. A template graphic does not have an associated data point type reference. Graphic templates only use Star-Substitutions. No named substitutions. Sample Graphic A graphic page that does not have a corresponding data point, since it is not in the stored in the project s graphics folder. Sample graphics are located in a library's Sample graphic folder and are opened as Read-Only. If you however, open the sample graphic from another location, the graphic is not Read-Only, and you can edit the graphic Supported Graphics Graphics are computer-generated raster or vector images consisting of a combination of drawing elements such as dots, lines, text, and buttons used to represent equipment, a facility, or a campus in a building control system. A graphic has the following additional attributes: A graphic is created is created and edited in the Graphics application. A graphic has a name and is saved as a.ccg file. Raster Image A raster image is a computer image that is stored and displayed as a series of dots in a rectangular grid. The following applies to raster images in the Graphics Editor. The following raster images are supported: BMP, JPG, GIF, TIF, TIFF, and PNG. They are stored as a stream inside a graphic page (XAML). They can be stretched and clipped. 73

74 5 Overview of Graphics Editor Working with a Graphic NOTE: The performance of a graphic may be severely impacted if it contains one or more raster images with active values in the Rotation Speed property of the Layout group property. Raster images supported by the Graphics Editor include: BMP, JPG, GIF, TIF, TIFF, and PNG. Vector A computer image, stored and displayed as geometrical primitives such as points, lines, curves, and other shapes, and based on mathematical equations to represent a graphic. Vector images can be proportionally scaled. XAML extensible Application Markup Language. A user interface markup language based on the extensible Markup Language (XML) and used to define user interface elements. XAML supports features such as 3D and controls. XPS XML Paper Specification. A XAML-based specification for a page description language and a fixed-document format that supports device and resolution independence and vector-graphic elements in documents. AutoCAD You can view, import, and modify any valid AutoCAD file created with the Autodesk software. You do this in the Autodesk DWG TrueView application, AutoDesk Design Review, or the AutoCAD importer tool all installed with the Desigo Control Center software. Which tool you use to import or convert, depends on the AutoCAD file type, or the method used to access them. For more information see, Working with AutoCAD Images [ 104] Scaling The Graphics Editor allows you to set the overall scale of a graphic and any graphical objects deposited on it. Scaling allows you to maintain a consistent size ratio of all elements on a graphic. Setting the scaling is done by associating a pixel unit with a logical unit of measurement. For example, one pixel can be set to equal 302 kilometers or miles. Logical measurements are set in the Graphics properties in the Properties view. Graphic Property Interdependencies There are five Graphic properties that allow you to specify the height and width of a graphic, unit type, and logical scale, width and height. The table below shows the interdependency of Graphic properties when they are modified. An x means that if there is a change in one property value, the associated property value also changes. 74

75 Overview of Graphics Editor Working with a Graphic 5 Height Width Logical Scale Factor Logical Width Logical Height Height x x Width x x Logical Scale Factor Logical Width Logical Height x x x x x x x x x Bitmap Images Raster images, also known as bitmap files, can be viewed and modified on the graphic canvas. There are a number of rules related to working with Raster images in the Graphics Editor. NOTE: The performance of a graphic may be severely impacted if it contains one or more raster images with active values in the Rotation Speed property of the Layout group property. Raster images supported by the Graphics Editor include: BMP, JPG, GIF, TIF, TIFF, and PNG. Copying Bitmap Images from the Canvas When you copy a bitmap image element from the canvas using the CTRL+C keys or selecting Copy from the right-click context menu, the following rules apply to bitmap images: The clipboard always contains the XAML string and the bitmap image. The clipboard retains the original size of an inserted image. Any resizing of a bitmap image on the canvas does not affect the clipboard image. If you paste a bitmap onto the canvas, resize it, and then copy it to the clipboard, the original size of the image is maintained. If more than one bitmap image is selected for copying, only the main image is copied onto the clipboard. If you are copying a bitmap image with transparent pixels, one of the following occurs: The Bitmap Transparency feature is disabled; the full transparent pixels of the image in the clipboard are replaced by black pixels on the canvas. The Bitmap Transparency feature is enabled; the full transparent pixels are replaced by the set Bitmap Transparency color and are viewable in an external graphics software. NOTE: in order to be visible, the transparency color should be set to a color which is not already used in the bitmap image. Pasting and Inserting Bitmap Images onto the Canvas You can paste a bitmap image onto the canvas or replace a selected image element on the canvas. The following apply: If no elements are selected on the canvas, a new image is created on the canvas. 75

76 5 Overview of Graphics Editor Working with a Graphic The image of the selected element(s) is replaced by the bitmap image from the clipboard; however, the image properties, for example, shadow, angle, evaluations, etc., remain as initially set. The pasted bitmap image takes any resizing-factors applied to the image it replaced. Bitmap pixels can be set for transparency using the Bitmap Transparency feature. When you insert a bitmap file onto the canvas it is stored as a stream inside a graphic page (XAML) About Graphic Viewports Graphic Viewports A graphic viewport is a defined rectangular sub-section of a graphic that can be viewed independently of the main graphic; it is a zoomed in view of a larger graphic that allows you to see specific detail related to the graphics depth. The relationship between a graphic and a graphic viewport is that of a parent-child relationship. The main graphic is the parent, and the graphic viewport(s) are the children. A graphic s viewports are listed as its children in the Graphic folder in System Browser. There are two methods for creating viewports: automatic and manual. Automatic Viewports Automatic viewports are automatically created and calculated by the Graphics Editor based on existing system object references in the elements and Symbols. The Auto Fit property of the Graphic must be disabled in order to view automatic viewports. When you save a graphic, each data point, Symbol, or system object referenced on that graphic, generates its own graphic viewport. The graphic viewports size is defined by the associated depth that contains the system object reference. An element or Symbol instance can have system object references or data points. All the references are used for the automatic view calculation. For more information on how automatic views are calculated, see Automatic Viewports [ 77]. Manual Viewports You can manually draw one or more viewports on the active graphic in the work area. These viewports, when saved, are then saved as the children of the parent graphic. Manual pages can are viewed in the Graphics Viewer. You can associated data point objects from System Browser with manually created viewports. In order to create a manual page, you must activate the viewport from the Viewports group on the Home tab. Viewport Mode Manual viewports can be viewed when you activate the Viewport button while you are in Design or Test mode. When you are in Viewport Mode, all existing manual viewports display on the canvas with the associated viewport name and a blue background. When a viewport is active it is encompassed in red brackets. While you are in Viewport Mode you cannot add any elements to the canvas and all existing elements on the canvas are visible, but locked and cannot be edited. 76

77 Overview of Graphics Editor Working with a Graphic Automatic Viewports When you save a graphic, the Graphics Editor automatically generates a viewport and for every system object referenced in the graphic the depth of a graphic is used to help define the size of the viewport. For automatic viewports to display properly, the Auto Fit property of the Graphic must be deselected. For every reference to a system object in a graphic you save, the following occurs: The depth associated to the layer where the system object is referenced is chosen. The depth is stored with the automatically calculated viewport. Therefore, when the viewport is displayed in the Graphics Viewer, it reads the depth and displays all the layers belonging to the associated depth. If the referenced system object has no siblings: The display size of the page defaults to the displayed zoom factor of its associated depth. The referenced system object is placed in the center of the viewport. If the referenced system object has siblings, meaning that there are other system objects that have the same parent node (or graphic): The viewport size is adjusted so that all siblings are visible in the graphic page. The viewport centers the referenced system object, group of siblings, in the middle of the viewport Working with Graphic Viewports Associating Objects with Viewports In the Graphics Editor, you have a graphic open that contains a viewport you want to associate with an object in System Browser. 1. On the graphic, click on the viewport you want to associate with the object. The Property View displays the Viewport properties. 2. In System Browser navigate to the object(s) you want to associate with the viewport. 3. Drag-and-drop that data point object to the Graphic Editor s Viewport Properties > Advanced > Link References property. The object is now associated with the active viewport Creating Manual Viewports You can create graphic sub-views, known as viewports, and then manually associate them to individual data points or system objects. The viewports are displayed as children of their parent graphic in System Browser. To create a Manual Viewport: You are in Design or Test mode and have a graphic open. 1. From the Viewports group, click the Viewport Mode icon. The Viewport Mode is now enabled and the icon background changes to a darker shade of blue. In the Element Tree a Layer (Manual Viewports) item is added. 77

78 5 Overview of Graphics Editor Working with a Graphic NOTE: In the Viewport mode, you can only modify manual viewports; all other elements on the graphic are visible but not active for editing. 2. From the Viewports group, click the Manual Viewport icon. The mouse pointer turns to a crosshair on the canvas and the background color of the Manual Viewport icon background color turns orange. 3. On the graphic, click and draw the viewport want to create. Release the mouse button when you are finished. The viewport displays enclosed in the frame, as Viewport 1. The Properties view changes to Viewport Properties and displays the properties for the new viewport. The Element Tree view, displays the new viewport with a default viewport name under the associated layer 4. To name the new viewport, navigate to the Viewport Properties view, expand General property. In the Description field, type a name for the viewport. NOTE: Each viewport must have a name and must be unique from all other graphic viewports associated with the same graphic. All printable characters are allowed, including special characters for example, spaces, dots, semicolons, brackets, etc. The name of the viewport displays on the graphic within the viewport brackets and in the Elements view the name displays next to the viewport. 5. In the Viewport Properties view, you can also modify the Layout [ 263] properties of the viewport and the Advanced [ 260]properties that display for viewports. If you associate a Depth with the viewport, then the Display size of the selected viewport is used when when viewing the viewport. 6. Save the graphic. In System Browser, the manual viewport displays under the associated graphic node as a child. You are now ready to associate data points or objects to the graphic viewport Deleting Manual Viewports You are in Engineering mode, and have a graphic with viewports open. 1. From the, Viewports group, click Viewport Mode. Viewport Mode is now enabled and existing viewports are visible. 2. On the canvas, right-click on the graphic viewport you want to delete. Red brackets display around the viewports. 3. From the context menu, select Delete. The graphic viewport is deleted from the graphic Modifying Manual Viewports Manual viewports are edited in the Graphics Editor. You have a graphic with viewports open. 1. On the Home tab, from the Viewports group, click Viewport Mode. The Manual viewport mode is now enabled. 2. Do one or more of the following: 78

79 Overview of Graphics Editor Working with a Graphic 5 Move the Manual Viewport - Click and drag on the manual viewport to move it to the desired location on the canvas. Resize the Manual Viewport Move your cursor over one of the red border markings surrounding the viewport. The resize cursor displays. Click the border marking and drag until you have reached the desired size. Or, in the Properties view, you can change the X, Y, Width, Height, and Description properties located under the Layout andgeneral categories. The Description property can be left blank and does not need to be unique. Additionally, manual viewports can overlap one another. Delete the Manual Viewport - Right-click on the manual viewport and select Delete from the context menu. Add Manual Viewport From the Viewports group, click Manual Viewport. The mouse pointer turns to a crosshair on the canvas. Click and draw the new page on the canvas. The new viewport is added to the canvas and the Element Tree view. Add System Objects Drag and drop data point objects from System Browser to the Properties View > Advanced > Linked Reference property field. 3. Save the graphic to ensure you do not lose any changes Working with Graphics Creating a Complex Graphic Workflow You can create complex graphics that represent your facility, a building, or piece of equipment for monitoring and commanding with the Graphics application. The following workflow guides you through creating and integrating layers, depths, and automatic or manual views; depositing system objects or data points and Symbols onto your graphic; and setting property values, and evaluations to animate your graphics so that you can view the runtime values of your graphic. 1. Create a graphic- initiate in Graphics Viewer or Graphics Editor. 2. Open the Graphics Editor and set the Graphic properties. 3. Configure a background layer by importing XAML, CAD, image files or drawings. 4. Define the foreground layer(s). 5. Define the first depth. 6. Configure the foreground layer by dragging and dropping points from the Symbol Browser the appropriate graphics. 7. Create a new Symbol, or select Symbols from the Symbol Library and add them to the graphic. 8. Create manual pages. 9. Define the graphic and element property settings, values, and Evaluation sequences. 10. Test the Evaluations. 11. Save the graphic. 79

80 5 Overview of Graphics Editor Working with a Graphic Creating a Graphic You want to create a graphic. 1. If you are already in the Graphics Editor, skip this step and start with step 3. Select System Browser > Application View > Graphics. 2. In the Primary pane, click the Operating button to switch to Engineering mode. 3. Do one of the following: From the Graphics toolbar, click CreateNew, and select New Template Graphic. From the Application button menu, click New Graphic. A blank, tabbed graphic template displays in the Graphics Editor work area. 4. Create and design the graphic as necessary. 5. From the Graphics toolbar, click Save As. The Save As dialog box displays. 6. In the Save As dialog box, click to expand the Project folder, and then navigate to Graphics folder, or one of its sub-folders. 7. In the Name, type the file name, and then click Save. The graphic is saved as a.ccg file, and a.png file Drag-and-Drop from System Browser The Graphics application supports the drag-and-drop of nodes and their properties from System Browser, the Graphics Viewer, and the Contextual pane to the canvas and various fields in the Graphics Editor views. After a drag-and-drop, the name and the address of the data point reference display in the target field. NOTE: In order to drag-and-drop a node or object properties to the Graphics Editor, you must have the proper licensing or user access. Drag Source All object nodes from any of the System Browser applications, regardless of where they exist within the folder s hierarchy, are drag sources that can be dropped on to a receiving field, a drop target. In the case of the Graphics Viewer, the properties of any object that has a valid reference to an object, such as a selection reference, expression, or evaluation associated with it, is a valid drag source. These properties can be dragged over to the Graphics Editor or onto another application pane or view that accepts drag source. In the Graphics Editor, you can drag an item from the canvas or one of the views when you are in Runtime mode. Drop Target All text or field boxes in the Graphics Editor are valid drop targets for the data point reference nodes. Generally, the data point references are dropped into the Expression field of the Evaluation Editor or used in the Animation Symbol for a substitution. When you drop a node, the full path or hierarchy of the name display in the fieldname, separated with the separator from the hierarchy. For example, User1:\Campus1\Building1\Floor1. 80

81 Overview of Graphics Editor Working with a Graphic 5 Drag Data The drag data depends on the type of reference associated with the element or object when the drag was initiated. Evaluation Data point I.D. of all unique referenced objects from all expressions. Selection Reference Data point of the Selection Reference property. Symbol datapoint of the Object Reference, the associated object. Drag-and-Drop Multiple Objects from System Browser You can drag-and-drop multiple objects from System Browser to the Graphics Editor. When you drag-and-drop multiple object over, the objects display in the alignment wrapped mode when dropped on the canvas. This means the objects display side-by-side in a row, and wrap to the next row as needed. When you initially drop the objects on the canvas and release the mouse button, the objects remain selected, if you would rather thee objects are cascaded, on the canvas, then click from the ribbon, and the objects instead display in a cascaded format on your canvas. Tips on Using Drag-and-Drop When you drag-and-drop a node from the System Browser or the Graphics Viewer to the Graphics Editor, the full name of the data point reference in the Graphics Editor only consists of text and numbers. No characters are included from the node, even if they are visible in the System Browser. For example, a node titled, Floor#1 in the System Browser, is displayed as Floor1 after it has been dragged-and-dropped in the Graphics Editor. The # sign is not carried over. While, some nodes might belong to a hidden or another hierarchy, the structure should match the System Browser structure Drag-and-Drop Cursor Image You can drag any item displayed in the Symbol Browser, Graphics Viewer, and Contextual pan --including a search result to the Graphics Editor, if you have the application and licensing right to the Graphics Editor. Objects in the Graphics Viewer are always a drag source, and the Graphics Editor is a drag source and drag-target. Both support selecting both single and multiple items. The cursor image changes (see the following table) depending on whether or not the view accepts drops. You can cancel dragging by pressing the ESC key or by moving the cursor outside the boundary of the Graphics Editor window. Accepts Drop Cursor Image Does Not accept Drops 81

82 5 Overview of Graphics Editor Working with a Graphic Working with Linked Graphics Creating a Graphic Link within a Graphic A graphic in the Graphics Viewer can contain a link to another graphic. When you click on the link, the graphic associated with the link displays. You are in the Graphics Editor and want to configure your graphic to contain a link to another graphic in your current graphic. 1. On the canvas, draw an element or insert an image to us as the visual for your link. 2. Click on the element created for the link. 3. In the Properties view, select Advanced > Selection Reference property. 4. From System Browser, navigate to the graphic you want the link to display, and then drag-and-drag the graphic to the Selection Reference property in the Graphics Editor. 5. If the Disable Selection property is checked, click on the checkbox to disable it. 6. Save your graphic. The graphic now contains a link to another graphic Deleting Graphic Links A graphic in the Graphics Viewer can contain a link to another graphic. When you click on the link, the graphic associated with the link displays. You have a graphic that contains a graphic link to another graphic, and you want to delete or edit the graphic link. You are in the Graphics Editor and have the graphic with the link open. 1. In the Properties view, navigate to and expand the Advanced property section. 2. Right-click on the Selection Reference property field and select Cut from the context menu. The link is removed from the field. 3. (Optional) Drag-and-drop another graphic file to the Selection Reference field. 4. Save the graphic. You have deleted the original link and, optionally, replaced the deleted link with another graphic link Working with Bitmap Transparency Your can insert a bitmap image into your graphic and set a color within the image to transparency. You have imported a bitmap on the canvas and you want a color within the bitmap to be transparent. NOTE: If the Bitmap transparency feature is enabled and the Transparency Color is already set to a color in the bitmap image, the transparency automatically takes effect upon inserting the bitmap image into the canvas. 1. On the Options tab, in the Bitmap Transparency group, click the Enabled check box. 82

83 Overview of Graphics Editor Working with a Graphic 5 The bitmap transparency feature is enabled. 2. Click on the Transparent Color field and do one of the following to set the transparency: From the Base Color chart, select the color you want to use as the transparency color. From the RGB colors, use the sliders or enter a hexadecimal color code in the # field to set the transparency, red, green, and blue values of the color you want to use as the transparency color. Select the Color Eyedropper tool, and then drag the eyedropper to the color on the bitmap image that has the color you want to use as the transparency color. Release the mouse button. The fill is applied to the Transparency Color field. 3. Delete the bitmap image on the canvas. 4. To re-insert the deleted image, from the Home > Elements group, click Import Image. The Open dialog box displays. 5. Navigate to and then select the original bitmap image you had imported. The bitmap image displays on the canvas, and the transparency takes affect. The color set to transparency on the bitmap is no longer visible, and instead the area is completely transparent Overview of the Consistency Checker The Consistency Checker is an engineering, diagnostic tool that is used to check and attempt to fix the Desigo CC software for errors that may exist between the graphics stored in the project folder and System Browser. The tool uses a specific task file(s) (.DLL) that you load and unload, to determine the tasks (or checks) that the Consistency Checker performs on your system. The Consistency Checker also allows you to convert all graphics files in a project or library to any of the Siemens graphic file formats. A HQ librarian can use this tool to convert all Symbols to the current Siemens graphic file formats. The task files must be located in the GMSMainProject > BIN folder in order for the Consistency Checker tool to load them. Task File NOTE: You should always run a backup of your graphic libraries before running any of the task files. Additionally, you should only run one task at a time. The Desigo CC software provides the following default file that is loaded into the Consistency Checker: Siemens.Gms.ConsistencyCheckerTask.Graphics.dll The default file contains the following checks and tasks: Check *.CCG and *.CCT files against System Browser nodes This task checks to see that a node exists in the System Browser for every graphic (.CCG and.cct) that is located in the Graphics project folder. If there is no existing node in the System Browser, the missing node is added. Check System Browser nodes against *.CCG and *.CCT files This task checks all graphic nodes in the System Browser against the graphic files (.CCG and.cct) in your graphics project folders. If you have an orphan 83

84 5 Overview of Graphics Editor Working with a Graphic node a node that does not have an equivalent graphic the orphan node is deleted from System Browser. Check the Related Items of each System Browser node This task checks that all System Browser nodes have valid links to any graphics that have been associated with the node. If a graphic no longer exists- -the link is invalid-- the invalid link is removed from the node s Related Items display. Check thumbnails (*.PNG files) for Symbols and Graphic Templates This task checks whether all graphic files have a thumbnail (.PNG) and whether it is current. The task can be used to update all missing or old thumbnails. File Conversion This task is used when you are upgrading graphic specific project data from library from Desigo CC 1.1 or earlier to Desigo CC 2.0. The Consistency Checker checks all the graphics, Symbols, templates, and sample graphics in the specified folder and library and updates them as needed. This is part one of a two step process to update Symbols and then update the subsequent graphics with the Symbols from the custom libraries. The following are the properties of this task, that you can optionally use to control which files are being converted during the task execution. Key Value Function Conversion Method To Bin (Default) Type one of the desired file format for the conversion: ToBin -Converts file to binary format To ZIP - Converts files to ZIP file ToXml - Converts files to XML ToSvg - Converts files to SVG Path Graphics -Symbols -GraphicTemplates -SampleGraphics Graphics\*ccg Libraries\*.ccs Libraries\*.cct Libraries\*.ccg For each path, type path of the location of the files. Force Conversion False (Default) \ True Checks if the actual file format matches the one you want to convert to, for example, Binary. False - If match found, then not saved. True - Match or no match, all files are re-saved. Symbol Statistics This task allows you to generate a report displaying statistical information about selected Symbols. The result of the task is saved to a SymbolStatistics.CSV file in the Local \TEMP directory. Statistics include: number of elements, latest version, usage information, etc. Update Symbol Dependencies This task checks to see that any graphic or Symbol containing embedded Symbols has the most current version of the embedded Symbols(s). If any of the embedded files are out of sync, the Fix, resaves the dependencies among them, thereby maintaining the integrity of the database and allowing for the rendering of the files to be optimized. The following are the properties of this task. It is recommended that you leave them at their default value. 84

85 Overview of Graphics Editor Working with a Graphic 5 Key Value Function Path Graphics -Symbols -GraphicTemplates -SampleGraphics Graphics\*ccg Libraries\*.ccs Libraries\*.cct Libraries\*.ccg For each path, type path of the location of the files Consistency Checker Workspace The Consistency Checker is an engineering, diagnostic tool that is accessible from the File menu in the Graphics Editor. Consistenty Checker Field Check Auto Fix Fix Description Clears any existing error messages and run any check marked tasks. Automatically fixes any errors found after a task has been run. Manually initiate a fix on any selected errors. Display or hides the Properties of Task section in the Tasks tab. NOTE: Only displays when the Tasks tab is selected. Load all tasks from all task files. Progress Bar Displays a green moving bar when tasks are executed. You can Pause or Stop All a task, as needed. 85

86 5 Overview of Graphics Editor Working with a Graphic Task Tab Task Section Field Enabled State Result Description Enables the task. Displays the current state of the task. Checking Fixing None Displays the result of the task. - Completed Successfully - Completed with Findings - Completed with Errors - Canceled - Failed Description Progress Displays a brief description of the task. When a task is active, displays the progress of the task. - Pause task - Resume task Assembly Name Version Findings Section Field Solved Task Description Reason Solution Displays the name of the task file (.DLL) Displays the version of the task assembly: Siemens.Gms.ConsistencyTask.Graphics Description Displays a checkmark if the issue is resolved. Displays the Name and Description of the task. Displays the reason why the issue was added. Displays what the solution is to fix the issue. 86

87 Overview of Graphics Editor Working with a Graphic 5 Property of Task Section: Description varies according to task selected Field Key Value Input fields Description Displays the property path. Displays the property value. Allows you to enter text to add a new Key or Value, respectively. Or, modify an already selected task property. When you enter a name of a new property, it must be a unique name. Applies the changes made to the Key and Value fields or adds the new property. Restores the Key and Value fields to their default settings. Displays a description of the highlighted property. Settings Tab Field Watch File System Save Exceptions (Save to File) Description When checked, the Consistency Checker watches the Task Directory for newly added task.dll s, upon detection, the.dll is then automatically loaded. Exceptions are written and saved in the Export log file. Log Tab Field DateTime Task Message Clear Description Display the date and time the log entry was noted. Display the Name and Description of the task. Display any status or error messages associated with the task. NOTE: In the event of an error message, placing the mouse over the message may display additional information about the issue. Clear the log of all text. 87

88 5 Overview of Graphics Editor Working with a Graphic Save to file Errors Save the log content to a text file. Display the number of errors found and allows you to use the arrow buttons to scroll through the error messages Working with the Consistency Checker Loading a Custom Task File You are in the Graphics Editor and want to load a customized task file (.DLL) into the Consistency Checker tool and it is not loading when you click on the refresh icon. You can manually add a.dll file to the tool, by doing the following: 1. From the File menu, select Consistency Checker. The Consistency Checker tool displays. 2. Right-click anywhere in the Tasks Tab > Tasks section, and select Load. The Open dialog box displays. 3. Select GMSProjects > GMSMain Project > Bin directory, and select the required task file (.DLL). For example: Siemens.Gms.ConsistencyCheckerTask.Graphics.dll The task file is loaded into the Consistency Checker. 4. If the Task list is empty or has not updated with the new tasks, click Refresh and the task list is updated to display all loaded tasks Unloading a Task File You are in the Consistency Checker tool in the Graphics Editor and want to unload a task file (.DLL) so that those task no longer run or display. On the Task tab, right-click anywhere in the Task section, and then select Unload. The task file (.dll) is no longer loaded and the Consistency Checker is cleared of all tasks Configuring the Consistency Checker You are in the Graphics Editor and want to load a task file (.DLL) into the Consistency Checker tool. 1. From the File menu, select Consistency Checker. The Consistency Checker tool displays. 2. From the Settings tab, enable the following check boxes, as needed: Watch in File System Click this checkbox to enable the Consistency Checker to 1) recognize when a task file has been added to the directory, and 2) automatically add load the task file. Save Exceptions (Save to log) - Click this check box to always write exceptions into the export log file. 88

89 Overview of Graphics Editor Working with a Graphic Running a Task in the Consistency Checker You have loaded one or more tasks and you want to run the tasks to check and synchronize your graphic files in your project folder against the graphic files listed in System Browser. You have a backup of your current graphic libraries. You should only run one task at a time. NOTICE NOTE: When you run the Update Symbol Dependencies task, you must use the Fix or Auto Fix options, rather than to fix them manually. 1. From the Tasks tab, in the Tasks section, select the Enabled check box for each task you want to execute. 2. If a task has additional properties and you want to adjust or view those properties, in the Tasks pane click on the task whose properties you want to view, and then click associated with the highlighted task display. to display the Properties of Task pane. The properties 3. In the Properties of Task pane, make the necessary changes to the properties, if any. To make changes to a Key or Value Select the property you want to modify. The Key and Value data displays in the two fields below. For more information on what your options are with each property, hover over the to see a tooltip with the property description. To apply changes to the Key and Value fields, click. To restore the properties to the default settings, click 4. (Optional) If you want the Consistency Checker to automatically fix any discrepancies or issues found, select the Auto Fix check box. 5. Click the Check button to run the Consistency Checker and execute the enabled tasks. The Consistency Checker starts to execute each task. The progress of each task is noted by the icon in the State and the Progress field. If needed, click the Pause, Stop, and Start buttons accordingly for each task. 6. (Optional) To save the Consistency Checker log file, navigate to the Log tab, and click Save to File. The Save As dialog box displays. 7. Navigate to the appropriate file location and click Save. The file is saved as a CCLog_[Year]-[Month}-[Date].txt file. 8. To fix the errors generated by running the tasks, you can do one of the following: 89

90 5 Overview of Graphics Editor Working with a Graphic Click on the Fix button at the top of the Consistency Checker this will fix all the errors. Right-click on an individual error, and select Fix from the context menu Importing Graphic Files from another Project or Custom Folder You can import graphic files (.ccg or.cct) from one project into another, or import from a custom folder to your current GMSProject\[YourCurrentProjectName]\Graphics folder using a system task from the Consistency Checker. Alternatively, you can drag-and-drop your custom graphics to the Graphics Editor and save each graphic to the current project folder. Import Using the Consistency Checker The Consistency Checker method for importing graphics, is best used for a bulk import of many graphics. In this method, you 1. Copy all your graphics from the old project to the new or current project's graphics directory 2. Run the Consistency Checker task. 3. Run a Fix All on any imported graphics found by the Consistency Checker to add them to the System Browser Graphics tree. When you use this method of importing graphics, any folder structures copied over to the project will not be replicated in the Graphics tree. You will have to recreate the folder structures in the System Browser Graphics tree---if they do not already exist---and then open each graphic in the Graphics Editor, and save them to the correct folder. Once you have saved the imported graphics to a new graphic folder, you should manually delete the copy of the graphic in the System Browser tree. Otherwise, you will have a copy of the graphic in the root of the Graphics folder and in the folder you saved the graphic to. Import Using Drag-and-Drop When you use the drag-and-drop method to import your graphics into the Graphics Editor, you will manually save them to your project's graphics folder. If you want to retain a folder structure, first create the new folder in the System Browsers Graphics tree and then when you drag-and-drop and save your graphics to the new project, you can also select the correct folder for them. 90

91 Overview of Graphics Editor Working with a Graphic Importing Graphic Files Using the Consistency Checker Tool You can import graphic files from one project to another using one of the Consistency Checker Tools's system tasks. Note, however, any folder structures you copy over to the new project, in Step 1. below, will not be recognized. After you have completed the following procedure, you will only see the imported graphics in the System Browser Graphics tree. NOTE: When you run a Consistency Checker task, you must only run one task at a time. 1. Copy and then paste all your graphic files from the old project over to the current project where you would like to use the graphics: GMSProjects\[YourProject]\Graphics folder. 2. In the Graphics Editor, navigate to the File menu, and click Consistency Checker. 3. Select the Check *.ccg and *.cct files against System Browser nodes check box, and then click Check. The Consistency Checker goes through the project's graphics folder and compares what.ccg's and.cct files are in the folder compared to the System Browser Graphics tree. When the Consistency Checker is finished checking, the Completed with Findings icon displays next to the task and in the Findings pane, a list of the graphics found in the graphics folder but not the System Browser Graphics tree display. 4. In the Findings pane, right-click on the Solution column heading, and then select Fix All. The Consistency Checker runs to save the Graphic to the System Browser Graphics tree. The Completed Success icon displays next to the task and next to each graphic in the Findings section. Your graphics have now been imported into the project's graphics folder and display in the System Browser Graphics tree Importing Graphic Files Using Drag-and-Drop via File Explorer You can import graphics (.ccg\.cct) from a custom folder or another project into your current project's graphics folder. If you are copying over a batch of graphics and would like to retain any folder structure they may currently be in, you will have to first re-create the folder structure in the System Browser Graphics tree. For more information, see Creating a Graphics Sub-Folder [ 40]. The Graphics Editor is open and you are in Engineering mode. 1. Navigate to the location of the graphics you want to import into your current project. 91

92 5 Overview of Graphics Editor Graphic Updates after an Upgrade Installation 2. Select and drag a graphic you want to copy to the current project, and drop it over the Graphics Editor Ribbon. The graphic displays in the Graphics Editor. 3. From the File menu, select Save As The Save As dialog box displays. 4. Click the arrows to expand the Project and then Graphics directories, and then click on the folder you want to save the graphic to. 5. In the Name field, type the name of your graphic and click Save. The graphic is saved to your current project. Repeat for each graphic as required. 5.6 Graphic Updates after an Upgrade Installation Upgrade from Desigo CC 2.0 to Desigo CC 2.1 If you are upgrading your Desigo CC software from 2.0 to 2.1, your graphics are automatically updated after you have restored your project in the System Management Console (SMC), and then selected Upgrade to restore the outdated project. Upgrade from Desigo CC 1.0 or 1.1 to Desigo CC 2.0 If you are upgrading from Desigo CC 1.0 or 1.1 to Desigo CC 2.0, you must update all your graphic's to a newer and more efficient file format during the upgrade installation. Updating your graphics involves running the File Conversion task in the Graphics Editor's Consistency Checker tool. Additionally, in Desigo CC 2.0 two object reference changes have been added. Updating your graphics will also update the object references in your graphics. Object Reference Syntax Changes from Version 1.1 to Version 2.0 Old Syntax Desigo CC 1.1 Example Desigo CC 2.0 Example "::" replaced with ";" MySystem.MyView:MyTree.MyNode:: MySystem.MyView:MyTree.MyNode::.Prese nt_value MySystem.MyView:MyTree.MyN ode; MySystem.MyView:MyTree.MyN ode;.present_value "!!" replaced with "@" MySystem.MyView:MyTree.MyNode::.!!CM D In this example, CMD represents a command. MySystem.MyView:MyTree.MyN ode;@cmd If you have any Symbols, Graphic Templates, and Sample Graphics in your project that were created outside of the HQ Libraries folders, then, these "customized" graphic files must also be updated. Otherwise, any Symbols, Graphic Templates, or Sample Graphics in the HQ Libraries folders do not need to be updated Updating Graphics after a 2.0 to 2.1 Upgrade Installation If you have upgraded from Desigo CC 2.0 to Desigo CC 2.1, all your project graphics are updated in the System Management Console (SMC) during the project Restore and Upgrade process. You do not need to run the Consistency Checker. 92

93 Overview of Graphics Editor Graphic Updates after an Upgrade Installation Updating Graphics after a 1.0 or 1.1 Upgrade Installation You have read the overview section, Graphic Updates after an Upgrade Installation [ 92]. You have upgraded from Desigo CC 1.0 or 1.1 to Desigo CC 2.0, therefore, you must run the File Conversion task on your graphics to update all your graphics. If you have created Symbols, Graphic Templates, or Sample Graphics outside of the HQ Libraries folder, you must run the File Conversion task on those graphics as well. Otherwise, you do not need to update them. 1. From the File menu, click Consistency Checker. The Consistency Checker displays. 2. Click to refresh the Tasks pane. The Tasks windows is updated and displays a list of available tasks to run. 3. Enable the File Conversion task, by clicking on the checkbox in the Enabled column next to the task. 4. If the Properties of Task pane is not displayed next to the Task pane, click in the upper right-hand corner of the Consistency Checker pane to display it. The Properties of Task pane displays, and a list of File Conversion task properties display in the pane. 5. With the File Conversion task selected in the task pane, in the Properties of Task pane, do the following: Right-click on Path Symbols, and click Delete. Repeat with Path GraphicTemplate, and Path SampleGraphic. The only task property left is Path Graphics. Click Conversion Method. Make sure the Value is ToBin. If not, in the text box, type ToBin and then click Apply Changes the property. The Value for the property is updated. to save the changes to Click on Force Conversion Make sure the Value is: True. If not, in the text box, type True and then click Apply Changes the property. to save the changes to 93

94 5 Overview of Graphics Editor Graphic Updates after an Upgrade Installation The Value for the property is updated. 6. Check the AutoFix checkbox. 7. Click the Check button at the top of the Consistency Checker to run the file conversion. The File Conversion task runs. The Findings pane displays all the graphics that were updated. Next Steps: If you have Symbols, Graphic Templates or Sample Graphics that were created outside the HQ Libraries folders, then you must run the File Conversion task on those graphic types. Proceed to Updating Symbols and GraphicTemplates after an Upgrade Updating Symbols and Graphic Templates after a 1.0 or 1.1 Upgrade Installation This procedure must only be done if the following two prerequisites are met. Otherwise you do not need to run this procedure. 1. You are upgrading from Desigo CC 1.0 or 1.1 to 2.0, and 2. You have existing Symbols, Graphic Templates, or Sample Graphics that were created outside the HQ Libraries folders. Otherwise, File Conversion Properties The File Conversion task has a property filter for each graphic type. Run the properties (if needed) as follows: To update your Symbols, run the property: Path Symbol To update your Graphic Templates, run the property: Path GraphicTemplate To update your Sample Graphics, run the property: Path SampleGraphic Before You Start You have read the overview topic, Graphic Updates after an Upgrade Installation [ 92]. You have upgraded from Desigo CC 1.0 or 1.1 to Desigo CC 2.0, and have already run the File Conversion task on your regular graphics. You have already run the File Conversion task on your graphics, using the Path Graphics property of the Consistency Checker. See Updating Graphics after a 1.0 or 1.1 Upgrade Installation [ 93] 1. From the File menu, click Consistency Checker. The Consistency Checker displays. 2. Click to refresh the Tasks pane. The Tasks windows is updated and displays a list of available tasks to run. 94

95 Overview of Graphics Editor Graphic Updates after an Upgrade Installation 5 3. Enable the File Conversion task, by clicking on the checkbox in the Enabled column next to the task. NOTE: Make sure the File Conversion task is the only task checked since it is imperative that you only run one task at a time. Therefore, all other tasks should be unchecked 1. If the Properties of Task pane is not displayed next to the Task pane, click Toggle the Task Properties Dialog in the upper right-hand corner of the Consistency Checker pane to display. The Properties of Task pane displays, and a list of File Conversion task properties display in the pane. 2. To see all the properties associated with the File Conversion task, click To Restore Defaults All the File Conversion task properties display. 3. With the File Conversion task selected in the task pane, go to the Properties of Task pane and determine which path property you want to run. Right-click on each of the other path properties, and click Delete, for each. The only task property displayed is the path property you want to run. To update your Symbols, run the property: Path Symbol To update your Graphic Templates, run the property: Path GraphicTemplate To update your Sample Graphics, run the property: Path SampleGraphic 4. For the path you have selected, you can use the default path settings, and all the graphics of that type (for example, Symbols, Graphic Template, or Sample Graphics) will be checked when you run the File Conversion task. If this is what you plan to do, proceed to the Step 9 below. Or, If you want to point to a specific folder for the Consistency Checker to check and update graphics, click on the path property you are running, and then in the text box, type the location of your custom library. For example: libraries\[yourlibraryfoldernamehere]\*.css -or- C:\GMSProjects\[YourProjectName]\[YourLibraryFolderName Here]\Symbols\*.ccs To save your path changes, click Apply Changes. TIP: If you need more help with the path text field, click the icon. 95

96 5 Overview of Graphics Editor Graphic Updates after an Upgrade Installation 5. Click Conversion Method. Make sure the Value is ToBin. If not, type ToBin and then click Apply Changes. The Value for the property is updated. 6. Click Force Conversion and make sure the Value is True. If not, type True and then click Apply Changes to save the changes to the property. The Value for the property is updated. 7. Check the AutoFix check box. 8. Click the Check button at the top of the Consistency Checker to run the file conversion. The File Conversion task runs. 9. The Findings pane displays all the files that were updated. Repeat steps 1 through 12 for any other path properties you need to run in order to update your files. 96

97 Overview of Graphics Editor Viewing a Graphic Viewing a Graphic Aerial View The Aerial view allows you to view the drawing board and the canvas at all times. You can zoom in and out of a specific area and pan around the drawing area with the viewport. Aerial View Item Name Description 1 Viewport Rectangle View graphics in part or as a whole Working with the Aerial View Viewport Rectangle You have a graphic open and would like to zoom in/out or pan to a specific area of the graphic. 1. Do one of the following: Navigate to the docked Aerial view. Add it to the dock panel. From the View tab, on the Display Views group, check the Aerial View box to display the view. 2. In the Aerial view, do one of the following: To pan the viewport rectangle, click anywhere within the viewport rectangle and drag the viewport to the desired location To resize and zoom in or out using the viewport rectangle, click anywhere on the green viewport border, and with the double-headed arrow drag the border to resize the viewport About Zooming and Panning The Graphics Editor supports zooming and panning within the active canvas. Zooming allows you to magnify the canvas image, and panning allows you to move the center of the canvas view. The Zoom and Pan commands are accessed from the Home tab in the Zoom group. The panning or zooming modes are automatically deactivated when you select a new drawing object or when a new or existing graphic page is opened. 97

98 5 Overview of Graphics Editor Viewing a Graphic You can use the features from the Ribbon s Zoom group or, you can use the keyboard and mouse buttons to zoom and pan in, out, and around your graphics Working with Zooming and Panning Using the Pan Mode You are in Design or Test mode and have a graphic open. 1. On the Home tab, in the Zoom group, click Pan. The mouse pointer changes to the four-arrow cursor displays. 2. You can do one of the following to pan in or out of the drawing board and canvas: Right-click on the canvas and drag the canvas in the direction you want to view. Select the left, right, up and down arrow keys on the keyboard pad to navigate in the direction you want to view. 3. When you are finished zooming, click Pan to change the cursor back to the normal cursor Using the Zoom Group Functions A zoom factor of a graphic can be changed using one of the following methods from the Zoom group: You are in Design or Test mode and have a graphic open. On the Home tab, in the Zoom group, you have the following zooming options available to you: Click 100% to display the active graphic at 100% magnification. Click Fit Size to scale the graphic so that the entire graphic and all the elements on the graphic are visible. Click Free Zoom to draw a zoom rectangle directly on the canvas; the magnification is adjusted as you increase and decrease the size of the zoom rectangle magnifies. Repeat as needed. Click and drag the Zoom Slider either increase or decrease magnification of the active element(s). Repeat as needed. 98

99 Overview of Graphics Editor Searching for Graphic Files Searching for Graphic Files Find and Replace Overview The Find and Replace view, enabled from the Ribbon s View tab, allows you to search, display results, and replace existing text, string, and property values. This is useful for making changes to multiple graphics, that share related information, for example, changing substitutions and data point references in Sample graphics. Search Options The Find and Replace view allows you to search and replace data or values. A search is automatically conducted as you enter text, strings, wildcards, or expressions. If the search entry is found, the Replace, Replace All, and Find Next fields are enabled. You can also use the Property Toolbox, to insert specific property values for non-textual property types, such as brushes, colors, enumerations, etc. You can also select where you would like the search to be conducted. You can select the active graphic, all open graphics in the Graphics Editor, or you can specify the entire project. In the case of searching the entire project, the Find Results Controls section displays, allowing you to see the status of a search. A refresh button is also available in this section. The standard Match case and Match whole word search filters are also supported. Text, Wildcards and Regular Expressions Text, values, or strings entered into the Find what field can be recognized as 1) straightforward data, 2) containing wildcards or 3) regular expressions making your search more targeted. The Text option searches for the text or string exactly as entered into the field, without any wildcards. For example, b* matches ab*123 but doesn t match ab and abcde. Compare this example, with the example for wildcards below. The two wildcard characters available are:? - Allows you to add one character to your search. For example, "ab?" matches and displays "abc" but doesn't match or display "ab" and "abcde". * - Allows you to add zero or more characters to your search criteria. For example, "b*" matches and displays, b, "bc", "bcd" and "bcde". When you select the Regular Expression option, the text and any symbols entered in the Find what field are recognized regular expressions. Note: The option "Match whole word" will be ignored. Example 1: "[12]00" matches "100", "200" and " ". Example 2: "^a.*z$" matches strings of any length, which start with an 'a' and end with a 'z'. Bring to View When you perform a search or a search and replace, any matching results are displayed in the Find Results section of the view. To work with a specific result, by double-clicking on the associated row the element is brought to view by first opening the associated graphic, if it is not already open, and then making the element active on the canvas, the Element Tree, and in the Property View or Evaluation Editor, depending on whether it is an expression, substitution, or an element. Replace Options in the Find Results Once you have conducted a search and the results are displayed in the Find Results section of the view, you have several options for working with results. You can choose to go item by item, by clicking the Find Next button or you can directly 99

100 5 Overview of Graphics Editor Searching for Graphic Files double-click on an item in the Find Result list. Or, you can conduct a Replace or Replace All task. You can replace one match at a time, or you can use the standard, Replace All option. The replacement is done only once per item. An item can either stay or disappear after a replace. Working with Symbols and Symbol Instances Since Symbol instances are linked to Symbols, a Symbol instance cannot be modified directly. The Find Result view displays all children Symbol Instances as grayed-out and italicized, but, the associated element name displays the Symbols path. For example, Element Sym2\Sym1\Ellipse means that the Symbol, named Sym1 contains the ellipse, and that the Symbol named Sym2 contains an instance of Sym1 and the actual graphic contains an instance of Sym2. The Find Next button selects the Symbol instance of the graphic ( Sym2 in the example above), but, the actual element property or evaluation is not selected Find and Replace View NOTE: The Find and Replace view is not part of the dock panel and is therefore not dockable. The Find and Replace window is either open or closed. Find and Replace View Field Find what Replace with Description Type the text, string, or data you want to search for. Type the text, string, or data you want to replace to replace what is in the Find what field. Expand to display the Property Toolbox fields when selected. Allows you to insert specific property values for non-textual properties, such as brush type, color, enumerations, etc. 100

101 Overview of Graphics Editor Searching for Graphic Files 5 Property: From the drop-down menu, select a property search or replace. Value: Enter the specific value for the selected property you want to search or replace. Insert: Insert the Property and Value information into either the Find what or Replace with field, depending on where the cursor was active. Replace Replace All Find Next Collapses the Property Toolbox fields. If nothing is selected in the Find Result pane, the first item is replaced and a Find Next is performed. If one or more items are selected in the Find Result pane, all selected items are replaced and then a Find Next is performed. Replace all instances of the search criteria listed in the Find Results section. Find the next instance of the search criteria listed in the Find Results section and brings it into view. Search Options Section Allows you to specify your search options for the Find What field. Select from the options listed below: Match Case Match whole word Text Wildcards Regular Expression Conduct a case-sensitive search based on the text entered. Conduct a search based on finding the entire text string as entered in the Find what field. NOTE: If the Regular Expression feature is selected for the search, this feature is bypassed. Conduct a text search without any wildcards. This is the default setting for the Find and Replace view. Conduct a search using the following wildcards. Type? to find any single character. Example: h?t finds hat, hot, hit, and hut. Type * to find any string of multiple characters. Example: t*n finds torn, town, and train, etc. Recognizes your search to find regular expressions. For information Filter Section Look In Type Name on regular expressions, click on the Expression Help. NOTE: When this option is selected, the Match Whole Word option is grayed out and inactive. Select where the search will take place: the Current Document or active graphic, All Open Documents, or the Entire Project. Select a field type to further filter your search. NOTE: This is disabled if you have chosen to look in the Current Document. Enter a graphic, symbol, or template graphic name to further filter your search. The filter conducts the search based on text or a name entered. If the field is left blank, all documents are found and displayed in the Find Results window. NOTE: This is disabled if you have chosen to look in the Current Document. 101

102 5 Overview of Graphics Editor Searching for Graphic Files All Fields (Everywhere) Selected Fields Only Invalid References Find Results Section Displays the Find what results. Search all fields, including expressions, substitutions, conditions, and properties. Select a field type to further filter your search. Expression Search through existing expressions. Substitution Search through existing substitutions, including the Selection Reference and Object Reference properties.. Condition Search through evaluations of existing conditions associated with the property selected from the drop-down menu. Property Searches through values associated with the property selected from the drop-down menu. Search for incorrect syntactical usage for data point references found in all project: Selection Reference properties Evaluations conditions associated with the Selection Reference property. Object Reference properties All expressions The Refresh Results icon displays when a search or a replace is selected on the Entire Project from the Look In section. The icon allows you to restart a search. While the search is being refreshed, a status bar displays showing you the progress of the refresh. For larger projects, the refresh can take a few minutes. The Cancel icon allows you to cancel the refresh process. NOTE: When you cancel a Replace All operation in the Entire Project, any replacements made, will not be rolled back. For item found, the following columns information displays: Field Type Field Match Element Type Name Displays the items field type: Expression, Substitution, Condition, or Property. Display the name of the item, depending on the field type: Expression: Displays the property name and expression index Substitution: Displays the substitution name. Condition: Displays the property name and condition index. Property: Displays the property name. Display the entire string of the field and highlights the matching pattern. NOTE: Only the highlighted string will be replaced by the Replace function. Display the element name and description, along with additional element properties such as the Position and Size. Example: Ellipse (My Ellipse) [16/31 48X48] If the element is a child of a Symbol instance, then the full path of the Symbol instance is prefixed. Example: Symbol1\Nexted Symbol\ Ellipse (My Ellipse) [16/31 48X48] Display the document type. Display the documents name. 102

103 Overview of Graphics Editor Searching for Graphic Files Working with the Find and Replace View Displaying the Find and Replace View You want to display the Find and Replace view. From the View > Display Views group, click the Find and Replace check box. The Find and Replace View displays Conducting a Search The Find and Replace view is displayed, and you want to conduct a search for specific text, values, or properties. 1. With the cursor in the Find what field, do one of the following: To search for text Type the text you want to search for, and when you are done, click anywhere outside the field. To search for properties and values Click Expander to display the Property Toolbox fields, select a property from the drop-down menu, and enter a value (number, text, color) for the property. Click on the Insert button to add the selections to the Find what field. Any matches found automatically display in the Find Results section. By default, the search is conducted in the current active graphic. 2. In the Search Options section, make the appropriate selections to further filter your search. As you make your choices, the matches to your search and filter are automatically updated in the Find Results section and the matching text is now highlighted. NOTE: If you selected Entire Project, the search automatic update is not conducted. 3. In the Filter section, narrow your search by selecting where to look. For more information on each field, see the descriptions in the topic, Find and Replace View [ 100] If you select Current Document or All Open Documents The results are automatically updated in the Find Results window. If you select Entire Project The Find Results Controls section displays and a status bar indicates the search is active. The Find Results section is updated and you can now work with the results Finding and Replacing Text and Property Values You have entered the text, string, or value to search for in the Find what field of the Find and Replace view and you want to enter the replacement information in the Replace with field. 1. With the cursor in the Replace with field, do one of the following: To replace text Type the text you want to use for the replacer, and click anywhere outside the field when you are done. 103

104 5 Overview of Graphics Editor Working with AutoCAD Images To search for properties and values Click on the expander icon on the right to display the Property Toolbox fields, select a property from the dropdown menu, and enter a value (number, text, color) for the property. Click on the Insert button to add the selections to the Replace with field. 2. At this point, you can do one of the following: Replace all items in the Find Result list Click Replace All. All items in the Find Result list are replaced. Replace specific items in the Find Result list With the mouse, select one or more items in the Find Result list and click Replace. The selected items are replaced. Replace item by item Click Find Next until the item you want to replace is selected. Click Replace. The item is replaced and automatically goes to the next item in the list. Continue with either Find Next or Replace to go through all items. 3. In the Search Options section, make the appropriate selections to further filter your search. As you make your choices, the matches to your search and filter are automatically updated in the Find Results section and the matching text is now highlighted. 4. In the Look In section, select which graphics and fields should be searched the text. If you select Current Document or All Open Documents The results are automatically updated in the Find Results Window. If you select Entire Project The Find Results Controls section displays and a status bar indicates the search is active. The Find Results section is updated and you can now work with results Displaying Find and Replace Results You have conducted a search and have one or more results displayed in the Find Results section of the Find and Replace view. You wish to view the view the results. To view an item from the results list, double-click on the appropriate row. The following occurs for each item selected: If the graphic is not already opened, the graphic opens in the Graphic Editor The associated element becomes active on the canvas, in the Element Tree, and in the Property View or the Evaluation Editor, if it is a condition or expression. 5.9 Working with AutoCAD Images AutoCAD Files Overview The Graphics Editor allows you to import any valid DWG and DXF AutoCAD files for viewing and using with a graphic. When you import an AutoCAD file into the Graphics Editor, it is first converted to a DWFx AutoCAD file format and then imported or placed on the active graphic as an XPS element. Modification of an XPS file is limited to the size and position of the image, and the overall stroke thickness factor for the entire drawing. 104

105 Overview of Graphics Editor Working with AutoCAD Images 5 The behind-the-scenes conversion occurs in the AutoCAD Importer application, which opens once you select a DWG or DXF AutoCAD file to import or convert. DWFx files do not need to be converted; therefore, when you either drag-and-drop or insert the file onto the canvas, it will not go through the AutoCAD conversion process, and instead will display directly on the canvas as an XPS element. AutoCAD File Types The following is an overview of AutoCAD file types that must be converted prior to importing into the Graphics Editor: DWG (Drawing) - a binary file format for CAD data. It s the Autodesk native format. DXF (Drawing Exchange Format) - a CAD data file format developed by Autodesk to enable data interoperability between AutoCAD and other programs. AutoCAD file extension that does not require a conversion, prior to adding it to a graphic: DWFX - a file format developed by Autodesk for CAD data and is based on the XML Paper Specification (XPS) from Microsoft. Our software supports Read support of.dwg and.dxf files created using Autodesk AutoCAD 2.5 through AutoCAD Importing.DWFx Files You can import a.dwfx AutoCAD file three ways through the Context menu when you right-click on the canvas, through the Home tab (Elements group), or by dragging and dropping the converted AutoCAD file over any part of the canvas. Once you have imported the graphic, it displays as an XPS element on the canvas, which can then be saved as part of a Desigo CC graphic. In the AutoCAD Importer application, using the Change Units dialog box, you can specify the height and width of the drawing, as well as the unit type for example, centimeters, inches, or micro inches. You can also choose to apply the current measurement units of the AutoCAD drawing to the graphic that the drawing is inserted into. When you are in the AutoCAD Importer application, and open a DWG or DXF file, you will see check boxes for drawing layers. These check boxes let you specify which layers of the drawing you want to make visible. However, if you want to preview each level before selecting it, you can select the Hover check box, and then move your cursor over each layer to temporarily reveal the layer. Conversion of Large AutoCAD Files to Image Conversion of an AutoCAD file to XPS is preferred and recommended as it offers the best image quality while zooming in/out of the image. However, when an AutoCAD file is too large and causes system performance issues, conversion to an Image file is recommended. The AutoCAD importer dialog box, allows you to select to one of three levels of image quality, if you choose to convert to an Image rather than an XPS file. Highest Quality Image - Highest image quality, performance degradation slightly less than Normal or High Quality Image. High Quality Image - Medium level of image quality, slight performance degradation. Normal Quality Image - Lowest level of image quality, fastest performance option. NOTE: AutoCAD conversion is only possible on installed clients, i.e., conversion is not possible from the Desigo CC Web Server and Remote Server clients. 105

106 5 Overview of Graphics Editor Working with AutoCAD Images AutoCAD Importer The AutoCAD Importer allows you to view supported AutoCAD files (DWG, DXF, and DWFx), and then import the files into a graphic as an XPS element of a Desigo CC graphic. AutoCAD Importer Item Description 1 Drawing Preview Area Display an AutoCAD image based on DWG, DWFx, or DXF file types. 2 Size (Width/Height) Display the dimension settings of the image in their proprietary units: width and height. 3 Measurement Units Display the type of measurement assigned to the image. Choices include metric and English units. 4 Change Units Button Open the Unit Settings dialog box, where you can select the type of measurement (metric, English, etc.) for the image, and adjust its width and height settings. 5 Apply Units To Graphic Apply the selected units to the graphic image. 6 Convert to Image When checked, file converts to an Image file, instead of an XPS file. Must select a level of image quality from the drop-down menu: Highest Quality Image - Highest image quality, performance degradation slightly less than Normal or High Quality Image. High Quality Image - Medium level of image quality, slight performance degradation. Normal Quality Image - Lowest level of image quality, fastest performance option. 7 Hover Review layer content before selecting it. 8 Layers Options Select the layers in the image you want to display. 106

107 Overview of Graphics Editor Working with AutoCAD Images Working with the AutoCAD Importer You can use AutoCAD Importer to convert your.dwg, DXF, and DWFx AutoCAD files into a XPS element that is then automatically imported into the active graphic. In this case, a separate.dwfx file is not created and saved. Instead, an XPS element created and directly added to your graphic Converting AutoCAD Files NOTE: AutoCAD conversion is only possible on installed clients, i.e., conversion is not possible from the Desigo CC Web Server and Remote Server clients. You are in Design or Test mode, and you would like to convert an AutoCAD file to an XPS element that you can import into a graphic. 1. Select Home > Elements group, and then click Import AutoCAD and XML Image File. 2. In the Open dialog box, select the file you want to convert. 3. Click Open. The AutoCAD file opens in the AutoCAD Importer. 4. (Optional) To make unit changes, do the following: Check the Apply Units To Graphic box, and then click Change Units button. The Unit Settings dialog box displays. From the Select the units for image menu, select the unit of measurement to apply. Manually enter the desired Width and Height values in the respective fields. Click OK. The Unit Settings dialog box closes. 5. From the Layers section, check the All checkbox or select the individual layers you want to display. 6. Click OK. 7. If you made any Unit changes to the file, the Apply Units dialog box displays. Click Yes to apply the changes. The file is converted and an XPS element is inserted into the active graphic. NOTE: If your drawing has non-latin alphabet characters, for example Chinese characters, after conversion those characters may display as? or boxes. If this is the case, convert the files manually to a DWFx file format with the TrueView or Design Review software. For more information, please refer to Troubleshooting AutoCAD Conversion [ 273] 107

108 5 Overview of Graphics Editor Working with AutoCAD Images Converting Large AutoCAD Files NOTE: AutoCAD conversion is only possible on installed clients, i.e., conversion is not possible from the Desigo CC Web Server and Remote Server clients. You are in Design or Test mode, and you would like to convert an AutoCAD file to an image element that you can import into a graphic. 1. Select Home > Elements group, and then click Import AutoCAD and XML Image File. 2. In the Open dialog box, select the file you want to convert. 3. Click Open. The AutoCAD file opens in the AutoCAD Importer. 4. Check the Convert to Image box, and then select an image quality resolution from the drop-down menu. The file is converted and an image element is inserted into the active graphic. NOTE: If your drawing has non-latin alphabet characters, for example Chinese characters, after conversion those characters may display as? or boxes. If this is the case, convert the files manually to a DWFx file format with the TrueView or Design Review software. For more information, please refer to Troubleshooting AutoCAD Conversion [ 273] Importing a DWFx AutoCAD File You are in Design or Test mode and have a graphic open. 1. Do one of the following: Select Home > Elements group, and then click Import AutoCAD and XML Image File. The Open dialog box displays. Proceed to Step 2. Right-click on the canvas and select Import > XAML. The Open dialog box displays. Proceed to Step 2. Drag-and-drop the DWFx file over an open graphic or canvas. The AutoCAD file displays as an XPS element on the canvas. 2. From the Open dialog box, select the file you want to import, and click Open. The file is imported and displays as an XPS element on the canvas. 108

109 Overview of Graphics Editor About Symbols About Symbols About Symbols A graphics Symbol is a reusable graphic image that represents a piece of equipment, floor, or any component or entity. They are stored in a library and are typically used to display system object values. Symbols can be associated with one or more object types in the Models & Functions application and bound to object type properties to create substitutions in your graphics that provide a dynamic, visual representation of changing values from the Desigo CC system. In its simplest form, a Symbol is a graphic made up of drawing elements on the graphic canvas in the Graphics Editor. Each drawing element has a series of associated properties. These are the properties can be used to create substitutions. Symbols can be associated with an object type An object type is associated with a Symbol in the Models & Functions application. When you drag-and-drop the Symbol onto a graphic, the Symbol displays the system object values in runtime mode and in the Graphics Viewer. Animation is supported through a series of graphics. Pre-defined symbols are stored in the Management View s library folders. These Symbols are visible and editable from the Graphics Library Browser. Advanced users can create their own Symbols. NOTE: You can only create, edit, and delete Symbols in the Graphics application if you have Create level access for the Graphics Library Browser. Create level access is defined in the Security application. Symbols and Object Types The Symbol is manually associated to an object type in the Models & Functions application and the properties of that object type are then associated to the Symbol. Symbols are not required to have object type associations or substitutions. A static Symbol, for example, is not associated with an object type, nor does it have any substitutions. The value of the static Symbol cannot change. Typically, this type of Symbol is used for representing Symbols and used in multiple graphics. You can nest a static Symbol within another Symbol. In the animation element, however, the substitution default value is always used. When you bind a Symbol to an object type in Models & Functions application each Symbol property is associated to the address of the object type node and the property identification number. This address is used in Runtime mode to view the current property values for a Symbol instance. Symbol Instances When you drag and drop a Symbol onto a graphic canvas in the Graphics Editor, you are placing an instance or a copy of all the elements and substitution properties associated with the Symbol onto the graphic. When you save a graphic that has a Symbol associated with it, only the referenced Symbol and the associated properties are stored. That means, if a change is made to the Symbol, then that change will ripple through to the graphic in Runtime mode. Within a graphic, a selected Symbol instance can be resized, repositioned, and rotated via the context menu. These changes only affect the Symbol instance on the graphic, but not the actual Symbol stored in the Graphics Library Browser. The Symbol stored in the browser is sized according to the elements it consists of. You can replace a Symbol of an existing Symbol instance with another Symbol by simply selecting the Symbol instance on a graphic and replacing it with a selected Symbol from the Symbol Library. The object type and substitution associations will 109

110 5 Overview of Graphics Editor About Symbols be kept. For example, you can replace a fan Symbol with a pump Symbol on a graphic and not lose any of the values you wish to view. A Symbol associated with a Function type, can be associated with a specific Style, so that when that Style is selected in the Symbol Style Filter, the default Symbol associated with that Style type, displays on the canvas. Symbol and Symbol Instance Attributes Graphic Symbols have the following attributes: Are initiated, evaluated, and edited in the Graphics Editor. Associated to object types in the Models & Functions application and support property substitutions. Composed of drawing elements and images. Have names and are stored as XAML streams Have layers. Saved and archived for retrieval from the Graphics Library Browser. Cannot be resized; a Symbol Instance, however, can be resized. Have a background color, but, a Symbol instances has no background color. A Symbol instance is a Symbol that has been added to and displays in a graphic. It is essentially a copy of the originating Symbol--a graphic page and all the elements associated with it. The exception is that any layers in the original Symbol are removed from the Symbol instance. Symbol versus Symbol Instance Symbols, when deposited onto a graphic, become Symbol instances. To understand some of the attribute differences between the two, see the following table: Symbol Composed of drawing elements and images. Symbol Instance Occurrences of an existing Symbol. Has a name and is stored as a XAML stream. Supports background color. Can have layers. Can t be resized Transparent by default; color background not supported. Have no layers. Removes any existing layers. Resizable. Can contain other Symbols (nested). Table of Symbol and Symbol Attributes Generic Symbol A generic Symbol is a concept that allows you to create one type of Symbol that can support an object that has 1, 2, or more properties with changing values. Depending on the object, the Symbol will not display the elements of the graphic that do not have a data point associated them. For example, you want to create one Symbol that you can associate with either a 1-stage pump or a 2-stage pump. A Symbol is created for the 2-stage pump. This is done by extending the expression syntax with the use of the question mark in the expression. For each property, you create,, you add another <data pointref> <Value> (? [<DefaultValue> <Alternatedata pointref>])* The Generic Symbol Extended Substitutions table below, is an example of using the? in an expression applied to a text element. 110

111 Overview of Graphics Editor About Symbols 5 Generic Symbol Substitution Syntax Examples Expression in a Text Element System1:Test_AI_1_1 System1:Test_AI_1_1? System1:Test_AI_1_1? 3.14 System1:Test_AI_1_1? T rue System1:Test_AI_1_1? False System1:Test_AI_1_1?System1:Test_AI_1_2 System1:Test_AI_1_1? System1:Test_AI_1_2?- 5.7 Substitution if First Reference Exists Value of System1:Test_AI_1_1 Substitution if First Reference does not Exist #ENG Hides text element 3.14 True False Value of System1:Test_AI_1_2 Value of System1:Test_AI_1_2, if it exists. If it doesn t exist, -5.7 Notes on Extended Syntax: The question mark? can be used 0..n times, where the default value or alternate data point reference is optional. Spaces are allowed to the left or to the right around the?. The expression uses either the default value (to the left of the? ) or the alternate data point reference, following the?, when the default value doesn t exist. The element is hidden when the default value (to the left of the? ) doesn t exist and there is nothing after the question mark. The element is hidden when this applies to any one of the expressions in any evaluation type that is used. This includes the Multiple evaluations which can have many expressions. The existence of the references is evaluated from left to right. For performance reasons, the alternate data point reference (value after the? ) is evaluated only when the left part doesn t exist. This means that it takes more time when the left part doesn t exist. For an expression like data point1?data point2?data point3? it can take up to 3 sequential, round trips until the element is finally hidden when none of the data points exist Object Referencing and Symbols Symbols are associated with objects from within System Browser, so that when you drag-and-drop a Symbol onto a graphic, the Symbol Instance displays the system object values in runtime mode and in the Graphics Viewer. Object referencing for a Symbol Instance is viewable and can be manually referenced in the SymbolInstance Properties of an active instance on your canvas. Navigate to the Symbol Instance properties and in the Object Reference field, view or type the desired reference. See below to understand or properly enter object referencing: 111

112 5 Overview of Graphics Editor About Symbols Association to an Object The Syntax for a Symbol Instance associated to an Object: MySystem.MyView:MyTree.MyNode; Association to an Object with a Specific Model Property The Syntax for a Symbol Instance associated to an object with a specific Model property: MySystem.MyView:MyTree.MyNode;.Present_Value Associated to an Object with a specific Function Property The Syntax for a Symbol Instance associated to an object with a specific Function property: MySystem.MyView:MyTree.MyNode;@Cmd Symbols Styles and Function When you create a graphic and add a data point object to the graphic, the Symbol that has been designated as the Default Symbol associated with the data point object is placed on the graphic. Symbols associated with a data point object's Function, can have a Style assigned to them and also have an assigned default Symbol for the Style. A Style can be a way to assign all 2-dimensional Symbols to the 2D Style or a 3-dimentional Symbol to a 3D Style, for example. The Style assigned to the Symbol, however, is only valid for the particular Function of the object. Each Style can have one default Symbol per Function. And, a Symbol can only belong to one Style at a time. For example, if a Symbol is the default Symbol the style 2D, and then you change the assignment of that Symbol to style 3D. Now the Symbol is assigned to the 3D style, and no longer assigned to the 2D style. If there are other Symbols associated with the style 2D, one of those remaining Symbols become the default Symbol for style 2D. Assigning and Creating Style Symbol Styles are created and assigned in the Model & Functions application. When you are in the Models & Functions tab for a particular data point's Object Model, the Symbols browser for the object displays all the assigned Symbols. If you right-click on a Symbol, you have the option of setting the Symbol as the objects Default Symbol, or, you can select a Style that the selected Symbol should belong to. For more information on assigning Symbols and Styles, please refer to Assigning Symbols Using the Library Browser. You set the Default Symbol for a Style in the Models and Functions application. When you right-click on a Symbol, in the Object Model or Functions Symbol Library, and click Set as Default, that Symbol becomes the Default Symbol for the Style in that library and the Default icon displays on it. The context menu that displays when you right-click on a Symbol in the Symbols browser, is where you can also create a new style for the Symbols. When naming a new Style, you cannot use the name "Any," nor can you use the following characters in the Style name: \ / :? * ^ " < >. Clearing a Style Styles are automatically removed from the context menu if there are no Symbols in any of the Functions that use the particular Style. When a Symbol belongs to a Style the right-click context menu displays the option to Clear Style. When this option is selected, the Symbol is removed from that Style. If the Symbol was the Default Symbol for that Style, another Symbol with the same 112

113 Overview of Graphics Editor About Symbols 5 Style becomes the default Symbol for the Style and the Default Item icon displays on that Symbol. Selecting a Default Style Symbol to Display on a Graphic You can select a Symbol Style within the Graphics Editor so that the subsequent drag and drop of objects will use the selected style. From the Ribbon's Options tab, the Symbol Options group allows you to select a Symbol Style from a drop-down menu so that the Symbol(s) associated with the subsequent drag and drop of the object, will display the assigned Symbol to the selected Style. So, if you are creating a 3 dimensional representation of something, you will want to apply the 3D Style, so that all the objects you drag and drop onto the canvas will represent the associated 3 dimensional version of that objects Symbol. When a Symbol instance or object from System Browser is dropped on the canvas, the default Symbol corresponding to that Style group displays on the canvas. If there is no Symbol related to that Style, then the default Symbol from another Style group is displayed. If Any is selected from Symbol Style filter, then the default Symbol which does not have a Style is displayed. If all Symbols belong to a Style, then the default of Symbol of another group is displayed. "Replace" Symbol Context Menu Option You can replace a Symbol on the canvas with another Symbol from the Functions Symbol library or the Object Model Symbol library associated with the object. From the Symbol Style menu, select the Symbol Style you want to view and use to replace the current Symbol. When you right-click on a Symbol instance on the graphic, the Symbol Instance > Replace option displays in the context menu if there are Symbols that belong to the same Style in the Object Model or Function as the Symbol on the graphic. If the Filter is enabled (grey background), the Replace option displays the Style and Symbol options from both the Object Model and Function Libraries. If the Filter is not enabled, then only the Function Symbols display, however, if there are no Symbols in the Functions library, then, the Object Model library displays. When you click on a Symbol from the library that displays, the Symbol on the canvas is automatically replaced by the selected Symbol Symbol Property Substitution Symbol property substitutions are placeholders for the element properties that must be different for each instance of a particular symbol. Substitution values are stored per Symbol Instance, rather than per Symbol. Substitutions allow you define what a Symbol displays on the graphic and are visible in the Property View. Element property substitution enables animation for that element. The substitution name and writable value display in the Property View under the Substitutions category. Substitution Syntax A substitution is created by adding curly brackets, {...} into a properties evaluation of a graphic element within a Symbol. The syntax for property substitution is as follows: Property Prefix {[*] [Substitution Name] [=- SubstitutionDefaultValue]} PropertyPostFix (?) Substitution Parameters Each Symbol property and its attributes or only some of the attributes can have a substitution 113

114 5 Overview of Graphics Editor About Symbols Star Substitution Star substitution is used as the connection between the drag-and-drop source reference and the internal Symbol substitution mapping. When you drag-and-drop a data point instance (e.g. AI_1 ) to the Graphics Editor, an associated Symbol instance is placed on the canvas, and Symbol instance property Object Reference is set to the source reference, AI_1 in this case. NOTE: The Object Reference property can also be manually changed. The object reference property automatically copies the value to and updates all star substitutions. This resolves all Symbol expressions in the final object references. The references can be seen in the Value Simulator View. A substitution becomes a star-substitution when the name is empty or starts with a *. The empty substitution { } is equivalent to {*}. A Symbol can have more than one star-substitution. They are all linked to the object reference property and are all read-only. Examples for star-substitutions: { }, {*}, {*Obj} Star-substitutions are read-only. The value can only be modified by changing the Object Reference property. Name Each substitution has an optional name The name is displayed between the curly brackets {Substitution Name} The syntax name is not case-sensitive. Default Value A substitution can only have one default value. and an optional default value. NOTE: If a Symbol property contains the same substitution more than once, but with different default values, the last non-empty default value is used. The following characters are not allowed within the substitution brackets: - and } Substitution Examples Substitution Substitution Name Substitution Default Value {Offset} Offset (none) {offset} Offset (none) {Value Offset } Value Offset (none) {Value Offset = } Value Offset (none) {Value Offset =4} Value Offset 4 {Value Offset =4 } Value Offset 4 {Value Offset } Value Offset (one space) {a=b =6} a b=6 {obj=1} {obj} obj 1 {obj=1} {obj=2} obj 2 {} * (none) {*} * (none) {*Alarm} *Alarm (none) 114

115 Overview of Graphics Editor About Symbols 5 Resolved Expression If a child element of a Symbol instance is selected, the Evaluation Editor displays the original expression along with the resolved expression Multiple Substitutions An expression can contain many substitutions. The expression {Object}.{Property} creates two substitutions: Object and Property A substitution can only have one default value. If a Symbol contains the same substitution more than once, but with different default values, the last non-empty default value is used. The expression {obj=3}{obj}.{prop} created the substitutions obj with default value of 3 and Prop with no default value Substitution Direction Each Symbol Instance has its own set of Substitutions properties, which can be viewed in the Properties view, when the Symbol Instance is selected. Direction The Direction substitution property allows you to change the direction of the active Symbol Instance on the canvas while you are in Test mode. To use the Direction property on an active Symbol Instance, press the left-mouse, and then also press the right-mouse button, the Symbol Instance direction moves by one increment - each right-mouse click changes the direction of the instance on the canvas by one increment. The incremental values cycle from the values of 0 to Localizing Symbols and Graphic Templates Each Headquarter level library contains library object folders with pre-existing Symbols and Graphics that are used for creating graphics and floor plans, etc. It is highly recommended that these original files are not modified. However, if you need a customized version of an existing Headquarter library object, you can customize the original library object and save the customized version to another library level. When a Headquarter Symbol is used in a graphic, if a customized Symbol exists, then the customized Symbol displays and is used in the graphic. For a brief overview of the library levels, see Overview of Library Levels [ 116]. Original Library Object: Symbol or Graphic Template The original library object remains unchanged in the Headquarter library. All Headquarter libraries that have a customized version in another library level, display the Localized icon in the upper left-hand corner of the Symbol or Graphic Template, and, when you hover over the library object in the Graphics Editor or System Manager Library Browser with your mouse a tooltip displays a list of the customized object and the library level they are stored in. Below is an example of a Headquarter Symbol that has a customized version. 115

116 5 Overview of Graphics Editor About Symbols Customized Library and Library Object The new customized library object is stored in a clone-directory--in the library level depending on your customization level-- with the original library name and the original file name. You must have the appropriate user-rights to customize an original file. Access rights also do not apply to the library levels above your access rights, only below. Depending on user-rights, an authorized librarian or project engineer can manage discipline specific System libraries. To create a customized Symbol or Graphic Template refer to Creating a Customized HQ Symbol [ 122] Prior to Customizing a Library Object: Setting the Customization Level Prior to customizing a library object, you must set the Customization Level in the Extended Operation to the appropriate library. Once you have applied the customization level, you can then navigate to the appropriate Headquarter library and customize the library object. To set your customization level, refer to Setting the Customization Level [ 121] Overview of Library Levels Desigo CC provides a system Headquarter library that consists of a collection of sub-libraries, such as Base, BA, or Global, etc. that contain data related to system objects. In addition to the Headquarter level libraries, there are three other library levels: Zone, Region, and Project. All library levels, except for Project, require a specific license. Otherwise, each library level represents the following: Headquarter - Supports core set of data. Includes sub-libraries such as BA, Base, Global, etc. The highest priority in the hierarchy of library folders Zone - Generally used to support national customizations. Region - Generally used to support local or regional customizations. Project - Used for customer-specific or project solutions. Lowest priority in hierarchy of library folders. For a more in-depth understanding of Desigo CC Libraries, please refer to the Library Management Guide (A6V ) from the System Manager Help dropdown menu Working with Symbols Symbol Configuration Workflow You can add objects and Symbols to your graphic. There are a number You have a graphic open in the Graphics Editor and want to add an object or a Symbol to your graphic. 1. Create a Symbol in the Graphics Editor. 2. Add elements and configure the Symbol properties as needed. Configure the Symbol for substitutions and animation in the Evaluation View. 3. Save the Symbol to the appropriate project library in the Graphics Editor. 116

117 Overview of Graphics Editor About Symbols Associating a Symbol with an Object Type You want to associate a Symbol with an object model, so that any instance of that object model on a graphic, will display the associated Symbol. You are in System Browser, have selected ManagementView > System Settings > Libraries. You are in Engineering mode. 1. Navigate to and expand the system library that the object model is associated with, for example, BA, 2. The associated library objects display. 3. Expand the Specific Devices objects tree and then select the appropriate system library block. 4. Expand the Object Models folder. 5. Click on the object model you want to associate a Symbol to. 6. From the Models & Functions tab, expand the Symbols section. 7. Do one of the following: Open a second instance of Desigo CC by clicking Summary Bar s Activate System Manager. From the second instance of the software, select System Browser > Management View > System Settings >Libraries folder, and then navigate to the appropriate Symbols folder. Open an instance of Microsoft Windows Explorer and navigate to the appropriate Symbols library in the \\GMSProjects\Project\Libraries folder. 8. Click on the Symbol you want to associate with the object model, and then drag-and-drop the Symbol to the Models & Functions Symbols section. The Symbol displays in the Symbols section. 9. To make the Symbol the default Symbol, right-click on the Symbol and select Set as Default. The Symbol is now the default Symbol that will display when this object type is used on a graphic Creating a Symbol NOTE: You must have Graphic Editor Application rights to create, edit, or delete a Symbol. Graphic Editor level access is defined by the Security application. You want to create a new Symbol. 1. In the System Browser > Application View > Graphics. 2. In the Primary pane, click the Operating button to switch to Engineering mode. 3. From the File menu, select New Symbol A blank, tabbed Symbol template displays in the Graphics Editor work area. 4. Draw, design, and assign evaluations and mappings to the Symbol as necessary. 117

118 5 Overview of Graphics Editor About Symbols 5. From the Graphics toolbar, click Save. The Save dialog box displays. 6. From the Project folder, navigate to the appropriate library and click on the associated Symbols folder. 7. Enter a name in the Name field, and click Save. The Symbol is saved in the designated Symbols folder in two file formats: PNG and.ccs. The Symbol can be previewed in the Graphics Library Browser Deleting a Symbol A Symbol can only be removed from a project by deleting it from the [CustomerProjects] folder. If there are existing Symbol instances with references to the deleted Symbol, the Symbol instance displays the following Reference Error icon: 1. Navigate to the x:\yyyyycustomerprojects folder, until you locate the Symbols folder that contains the Symbol(s) you want to delete. 2. Right-click on the Symbol you want to delete, and select Delete from the context menu. You can also use the SHIFT key to delete multiple Symbols. The Symbol is deleted from the project completely Deleting a Customized Symbol You have a customized Symbol you want to delete. Deleting the customized Symbol does not affect the original Symbol. 1. Navigate to the appropriate Library where the customized Symbol is located. If you place the mouse over the original Symbol, the tooltip lists the location(s) of the customized Symbol(s), or, if you use the Library Browser's List View to display the Symbols, the Customized column, displays the location of any customized Symbols. 2. Make sure you are in Engineering mode. 3. From the Library Browser toolbar menu, click Delete. 4. Click Yes to confirm you want to delete the selected Symbol. The customized Symbol is deleted from the library, and the original Symbol no longer displays the Customized icon. 118

119 Overview of Graphics Editor About Symbols Assigning a Data Point to a Symbol Instance on a Graphic NOTE: You must have Graphic Editor Application rights to create, edit, or delete a Symbol. Graphic Editor level access is defined by the Security application. Data points are assigned to Symbol instances on a graphic in order to display realtime values. In the Graphics Editor, you are in Design mode and have a graphic open that contains one or more Symbol instances. You have selected the Symbol instance you want to assign the data point to. 1. In System Browser > Management View > Project > Field Networks > Hardware navigate to the data point you want you assign to the Symbol instance. 2. Drag-and-drop the data point over the Symbol instance on your graphic. In the Properties View, the Symbol Instance > Object Reference property is highlighted and the data point address displays. 3. Optional. Update the Symbol Instance > Precision and Unit properties, as needed. 4. Optional. From the Home tab, in the Modes group, click Test to switch modes and verify that you can see the live values from the data point on the graphic. The Symbol instance displays the current value of the data point. 5. Repeat with each Symbol Instance as needed Modifying an Existing Symbol NOTE: You must have Graphic Editor Application rights to create, edit, or delete a Symbol. Graphic Editor level access is defined by the Security application. Of you do not have the appropriate access rights, the Symbol will open in Read-Only mode. The Graphics Editor it open and you have an existing Symbol and you want to modify. 1. To modify an existing Symbol do one of the following: In the Graphics Editor, navigate to the Graphics Library Browser, and rightclick on the Symbol you want to edit. Click Edit from the context menu. Navigate to the appropriate Symbol instance on an open graphic and rightclick on the instance. Click Edit from the context menu. In all cases, the Symbol opens in the Graphics Editor workspace and is available for editing. 2. Make any modifications to the Symbol. 3. When you are finished, from the Ribbon, click, and then click Yes from the Reload dialog window. 4. The Symbol is updated in the Graphics Library Browser and all changes are saved. 119

120 5 Overview of Graphics Editor About Symbols Saving a Graphic or Symbol You have a graphic or Symbol open in the Graphics Editor and would like to save your changes. From the File menu, click one of the following: Save: Saves the active graphic or Symbol with the current name. Save As: Displays the Save As dialog box. Enter a Name for the graphic or Symbol and navigate to the directory you where you want to store the graphic. Save All: Saves all the open graphics and Symbols with their current names and storage locations Using a Symbol Instance You want to modify the originating Symbol of a Symbol Instance. 1. Navigate to the Symbol Instance on the graphic canvas you want to modify. 2. Right-click on the Symbol Instance. The context menu displays. 3. Select Symbol Instance and then Edit. The originating Symbol opens and displays as a tabbed graphic in the work pane Modifying Elements in a Symbol Instance A Symbol Instance is made up of one or more elements. If the element has a unique ID number associated with it, it can be selected on the canvas and modified. If the element does not have a unique ID number associated with it, it cannot be selected or modified within the Symbol Instance. You have a Symbol Instance on the canvas and you want to modify one or more elements within the Symbol Instance. 1. Press SHIFT and select the element in the Symbol Instance you want to modify. The element is active, instead of the entire Symbol Instance. 2. Make your changes, such as resize, add color, change color, etc. When you select the Symbol Instance, the Revert to Default icon displays just outside the Symbol Instance. If you move your cursor over the arrow, it lists all the changes made to the elements within the Symbol Instance. TIP: To go back to the default state of the Symbol Instance, right-click and select Revert to Default. All changes to the Symbol Instances are cleared. 3. Click to save the changes to the Symbol Instance and the graphic. 120

121 Overview of Graphics Editor About Symbols Using the Symbol Style Filter The Symbol Style Filter allows you to select a Symbol Style to use for the ensuing Symbol(s) instances you drag from System Browser and drop on to the canvas. When you select a Style, the Symbol associated with that style in the function associated with the data point displays. If that Style Symbol doesn't exist, then, the next similar Style is taken. For more information on Style and Symbol selection, see Symbols Styles and Function [ 112] 1. From the Options tab, Symbol Options group, select one of the Symbol Style Filter options from the drop-down menu. The available options are projectspecific. The style chosen displays in the Style menu. 2. Drag the object or Symbol from System Browser or from the Library Browser and drop it on the active canvas. The correct Symbol associated with the Style you selected for the objects Function displays on the canvas Replacing Symbol Instances When you right-click on a Symbol instance on the canvas, you can view and replace the selected Symbol instance with a Symbol from the same Object Model or Function library. Using the Ribbon's Symbol Style Filter you can determine which Symbols will be displayed for you to choose from. You have a Symbol instance on the canvas and you want to replace it with another Symbol from the same Object Model or Functions library. 1. From the Ribbon's Option tab > Symbol Options group, click on the arrow of the drop-down menu to select a Style for the Symbols you want to view. 2. (Optional) Click the Symbol Filter so that it is enabled (icon background is gray) to display the Symbols from both the Object Model and the Function libraries. If unselected, only the Symbols from the Function library display. If however, there are no associated Symbols in the Function libary, only then will the Symbols from the Object Model display. 3. Right-click on the Symbol instance on the canvas that you want to replace. The context menu displays. 4. With your mouse, hover over Symbol Instance, and then hover over Replace. The Symbol library with the associated Symbols display. 5. Click on the Symbol in the library you want to replace the Symbol on the canvas with. The Symbol on the canvas is updated and replaced with the selected Symbol from the library Setting the Customization Level You are in Engineering mode. 1. In System Browser, select Management View, and expand the Project node. 2. Select System Settings. 3. In the Extended Operations tab, from the Customization Level property dropdown menu, select Region, and then click Apply. 121

122 5 Overview of Graphics Editor About Symbols The Apply successful confirmation displays Creating a Customized HQ Symbol You can customize any existing HQ Symbols so that they display a "Regional" or customized version of that Symbol in your Project graphics. 1. In System Browser, select Management View, and expand the Project node. 2. Navigate to System Settings, and then expand the Libraries folder. 3. Expand the Headquarter library folder, and navigate to the Symbols library that contains one or more Symbols you would like to create a customized Symbol for. 4. Select the Graphics tab. The Symbols in the Symbol libraries display in the Library Browser in the primary pane. 5. Click on the Symbol(s) you want to create a customized Symbol for, and then from the Library Browser toolbar, click Customize. 6. Click OK to confirm you want to customize the current library and the listed Symbols. The Symbol(s) are added to the Symbols folder now displayed under the Region library folder. And, the Symbols display in the Graphics Editor. 7. Modify the Symbol as required for your region. When finished, click Save. The updated Symbol is now saved in the Regional Symbol folder, and the original Symbol remains in the original library folder with the Localized Symbol icon displayed in the upper left-hand corner of the Symbol thumbnail image Troubleshooting Symbols Error Messages Symbol error messages display when there is either a communication issue or engineering (configuration) issue. These error messages display on a graphic in the Graphics Viewer, or in the Graphics Editor Test or Runtime modes. # COM (Communication Fault) - The data point exists; however, COVs are not coming through. #ENG (Configuration Fault) The issue is related to how the data point was configured or engineered; it is either invalid or does not exist. Multiple expressions Valid data points still animate the corresponding element properties even when the element shows the error grid. Example: An ellipse animates the angle with a valid data point and the Fill color with an invalid data point. In the Graphics Viewer the ellipse displays as rotated with the error grid. Selection An element with the #ENG error grid is still selectable but only the valid data points are used for the secondary selection (or primary selection from a double-click). Additional Notes If one of the expressions has no read-access the entire element is hidden. The Graphics Viewer selection behavior can also be tested in the editor Runtime mode. 122

123 Overview of Graphics Editor About Graphics Templates About Graphics Templates About Graphic Templates Overview Desigo CC provides you with standard BACnet TEC graphics for various applications. You can also create template graphics for TEC applications. In Desigo CC, the applications are stored in the following area: Management View > Project > System Settings > Libraries. Viewing Graphic Templates You can view graphic templates in the Library Browser, accessed from either the System Browser or the Graphics Editor. In System Browser, clicking on a graphic template library folder displays the Library Browser in either the primary or secondary pane, where you can view and browse all the graphic templates for a particular library in either a thumbnail view or a list view. If you click on a Graphic Templates folder, the associated graphic templates display in the Default pane (Operation mode) or the Graphics pane (Engineering mode). However, in System Browser, if you click on a specific graphic template and you are in: Operating mode, the graphic template displays in the primary or secondary pane. Engineering mode, the graphic displays in the work area of the Graphics Editor. Mapping Functions to a Graphic Template Graphic templates are used to map to data points so that you can see the data point COV values representing a piece of equipment or an object. When a data point's function is associated to a graphic and a graphic template, the graphic template has a higher priority in it's display privileges. When the data point is selected, the graphic template, by default, displays in the primary pane, and not the graphic. You can, however, lower the graphic templates priority by enabling the Graphic [ 262] property's Low Priority checkbox Graphic Templates Browser Graphic Templates Browser (Thumbnail View) Item Name Description 2 Thumbnail\List View Toggle Toggle between a thumbnail or List view of the graphic template objects library. 3 Search Filter Search the Graphic Templates libraries and limit the objects displayed. 6 Library Browser display pane. Display available Symbols and graphic templates depending on category or search criteria. 7 Graphic Icons Display Thumbnails of available Symbol(s) or graphic templates, depending on which mode you have selected. 8 Move the slider with your mouse to increase and decrease the magnification of the selected graphic template icon for viewing within the Graphic Templates Browser view. The magnified value displays as you move the slider and has a minimum magnification of 30% and a maximum 123

124 5 Overview of Graphics Editor About Graphics Templates of 300%. The slider displays only when you are in the Thumbnail view. In the Graphic Templates Browser s List View, the graphic templates are listed by Name, Library, and File. A thumbnail preview is not displayed. Graphic Templates Browser (List View Fields) Name Name Library File Description Display the graphic template file names. Display the library name where the graphic template is stored. Display the full path of the graphic template s location Working with Graphic Templates Creating a Graphic Template You have created the GraphicTemplates library folder in your project directory. 1. In System Browser, select Management View. 2. Select Project > System Settings, and click on the Libraries folder. The Libraries sub-folders display. 3. Navigate to the desired library folder where you want to add your new graphic template, and click on its graphictemplates folder. 4. In the Primary pane, click the Graphics tab. The Graphics toolbar and the Library Browser display. 5. From the Graphics toolbar, click Edit. The Graphics Editor displays in the Primary pane. 6. From the Graphics toolbar, click the CreateNew button, and click Create New and select New Graphic Template. NOTE: If you choose to create a new graphic template using either the File menu or the Quick Access toolbar, the template will not automatically be saved to the GraphicTemplates directory. Instead, when you save the graphic template, you will have to navigate to the graphic template directory. A blank, tabbed graphic template displays in the Graphics Editor work area. 7. Create and design the graphic template as necessary. 8. From Properties view, adjust the Graphic [ 262] properties as necessary. 9. From the Graphics toolbar, click the Save As button. 124

125 Overview of Graphics Editor About Graphics Templates 5 The graphic template is saved to the graphic template folder in System Browser, and the Library Browser, and automatically reloads a modified thumbnail. Additionally, the following are created in the GraphicTemplates library when you save a graphic template: a.cct file, and a.png file Creating a Graphic Template Library You want to create a Graphic Template library in an existing project library and you are in Engineering mode. 1. In System Browser, select Management View. 2. Select Project > System Settings > Libraries. 3. Navigate to the appropriate project library folder and then click on the Library object where you want to add the new graphic template library folder. 4. From the Library Configurator tab, click Add New Object. 5. Select New child of the type Graphics Template Folder. The New library block pane displays. 6. Enter the Version number, Revision, Date, and Notes information, as needed. 7. Click Save Data. 8. The Create New Object dialog box displays, with Graphic Templates as the default Description. 9. (Optional) In the Description field, highlight Graphic Templates and type a new name for the folder. 10. Click OK. In System Browser, the GraphicTemplates folder now displays in the root folder of your selected project library. When you click on the folder and switch to Operating mode, the Graphics Templates Library Browser displays in the Primary pane Deleting a Graphic Template A graphic template can be permanently deleted from the Graphics Editor Library Browser view or you can manually navigate to the file location in your Windows Explorer and delete the template from there. To delete the graphic template from the Library Browser, do the following: You are in the Graphics Editor, in Engineering mode, and the Library Browser is displayed. 1. In the Library Browser view, from the Filter by Graphic type drop-down menu, select Graphic Template. 2. Navigate to the graphic template library that contains the file you want to delete. 3. Right-click on the graphic template you want to delete and select Delete. The graphic template is deleted from the entire project. 125

126 5 Overview of Graphics Editor About Graphics Templates Deleting a Graphic Template Library You want to delete a Graphic Template library from your project. You are in Engineering mode. 1. In System Browser, select Management View. 2. Select Project > System Settings > Libraries. 3. Select the graphic template node you want to delete. 4. From the Library Configurator tab, click Delete. 5. Click Yes, when you are prompted to confirm you want to delete the selected node and all its children. The library node and any children graphic templates are deleted Opening an Existing Graphic Template You can open a graphic template in several different ways, depending on where you are in the Desigo CC software. The list below describes how you can access or open an existing template graphic from the following locations: System Browser > Management View Navigate to Project > System Settings > Libraries and then locate the graphic templates library from the appropriate library. When you select the graphic template folder, the graphic templates display in the primary pane. To edit the template, from the toolbar, click. The graphic template opens in the Graphics Editor. Drag-and-drop a graphic template from a graphic templates library over the Graphics Editor Ribbon. The associated template graphic displays in the tabbed work area of the Graphics Editor. Drag-and-drop a data point node over the Graphics Editor Ribbon. The associated template graphic displays in the tabbed work area of the Graphics Editor. Drag-and-drop a data point with a mapped graphic template over the Graphic Editor Ribbon. All related graphics and graphic templates open and display in the tabbed work area of the Graphics Editor. Graphics Editor File menu Click Open and navigate to the graphic template directory. Library Browser view Right-click on a graphic template thumbnail, and select Edit. Library Browser view - Drag-and-drop a graphic file template from the Library Browser. The graphic displays in the tabbed work area Testing Graphic Templates You can test a graphic template by dragging a data point instance from System Browser, into the Value Simulator view. You have a graphic template open in the work area of the Graphic Editor. 1. From the Home tab, in the Modes group, click Test mode. 2. From the Value Simulator view, expand the Automatic section, and check the Run Value Simulator check box. 126

127 Overview of Graphics Editor The Graphics Library Browser 5 3. Expand the Graphic Template section. 4. From System Browser, navigate to your data point and drag-and-drop the data point onto the Value Simulator s Object Reference field. 5. Click the Assign button. Any elements that have evaluations associated with them, now display the COV values of the data point instance The Graphics Library Browser Library Browser (Graphics Editor) Depending on which view you are in, Symbols or graphic templates, the Library Browser view provides you with a thumbnail preview of the available graphic objects. 127

128 5 Overview of Graphics Editor The Graphics Library Browser Library Browser View (Thumbnail View) Item Name Description 1 Library Browser display pane. Displays available Symbols and graphic templates depending on category or search criteria. 2 Filter by Library Allows you to display all the Symbols or graphic templates in your project libraries or just display the graphic objects from the library selected in the drop-down menu. 3 Symbols\Graphic Templates Toggle Allows you to switch between displaying and viewing Symbols or graphic template library objects in the view. 4 Thumbnail\List View Toggle Allows you to toggle between a thumbnail or List view of the graphic objects in the Library Browser pane. 5 Update Symbols Library/Libraries Allows you to perform a server reload for the Symbol Library selected in the Symbol filter, or, if no library is displayed in the Symbol filter, then all Symbol libraries are reloaded. 6 Delete Deletes the selected Symbol from the Symbol library. 7 Search Filter Allows you to search the Symbol and Graphic Templates libraries and limit the objects displayed. 8 Graphic Icons Thumbnails of available Symbol(s) or graphic templates, depending on which mode you have selected. The selected Symbol or Graphic Template is highlighted.. 9 Allows you to move the slider with your mouse to increase and decrease the magnification of the selected Symbol icon for viewing within the Symbol Browser view. The magnification value displays as you move the slider and has a minimum magnification of 30% and a maximum of 300%. The slider displays only when you have toggled to the Symbol Thumbnail view. In the Library Browser s List view, the Symbols and graphic templates are listed by Name, Library, and File. A thumbnail preview is not displayed. 128

129 Overview of Graphics Editor The Graphics Library Browser 5 Library Browser View (List View Fields) Name Name Library File Customize Description Displays the Symbol or graphic template file names. Displays the library name where the Symbol or graphic template is stored. Displays the full path of the Symbol or graphic template s location. If a Symbols has a customized version, the file path is displayed in the column Working with the Library Browser Toggling Between Thumbnail and List View The Library Browser allows you to view your library objects in either a thumbnail view or in a list view. You can toggle between the two modes. Navigate to the Library Browser, and click Toggle. The Library Browser changes the displayed view of the library objects Adding a Symbol to a Graphic Existing project Symbols are added to a graphic from the Library Browser. You have a graphic open and you want to insert one or more Symbols on the graphic in the work area view. 1. In the Library Browser, from the Filter Type drop-down menu, click Symbol. A list of all available Symbols display in the Library Browser view. 2. (Optional). To change the display from either List or Thumbnail mode, click Thumbnail\List toggle. The Symbols display view in the Library Browser is updated. 3. In the Type to Filter field, type the name of a specific Symbol 4. From the Filter by Library drop-down menu, select a library to search. You can also select <All> to search through all available libraries in your project. The Symbol matches automatically display in the view as you enter the text. 5. Do one of the following to add a Symbol(s) to a graphic: Right click on the Symbol(s) and click Insert from the context menu. The Symbol(s) are added to the graphic. To select multiple Symbols, press the CTRL key and click the Symbols you want to add from the Symbol Browser display. Click on the Symbol (s) and drag it to the active graphic. All the Symbols on the graphic are listed in the Element Tree as a SymbolInstance; the child elements are listed below the Symbol Instance. If you click on a Symbol on the graphic, the Properties view displays the SymbolInstance properties. 129

130 5 Overview of Graphics Editor The Graphics Library Browser Filtering in the Library Browser View The Library Browser displays the available Symbols and graphic templates from the libraries in your project. There are two filter fields for you to use when searching for the files. The first filter allows you to enter text to search by name, and the second filter allows you to select a specific library to search in, or, you can select <All> to search in all the libraries. Symbol Names The naming of the Symbols follows the convention of: Type_Style_Description1_Description2_Description_3, etc. In the Library Browser, you can type your search for Symbols by name, using the * in place of the _ found in the actual Symbol name. For example, to search for the Symbol, DYN_3D_Damper_Air_Analog Invert_Vertical_001, in the name filter, you type DYN*3D*Damper*Air as you type the text in the filter field, the Symbols will automatically filter themselves and only display the matching Symbols. Below is a table displaying the Type and Style terms used in naming Symbols. The list of description words is just a sampling, as the descriptive naming options are too many to display. Filter Search Words for Symbol Names Field Type Style Description Options Samples DYN Dynamic STA Static SAM Sample Graphic 2D 2D/3D 3D Analog Axial Binary Cooling Chiller Damper Duct Energy Fan Filter Heating Humidifier Mixing Pipe Sensor Services Roof 130

131 Overview of Graphics Editor The Graphics Library Browser Deleting a Symbol or Graphic Template Symbols and graphic templates can be deleted from the project libraries in the Graphics Editor Library Browser. 1. From the Library Browser, filter and then navigate to the Symbol or graphic template you want to delete in the Library Browser pane. 2. Right-click on the Symbol or graphic template you want to delete. The Library Browser context menu displays. 3. Select Delete. The file is removed from the Library Browser and the project files permanently Inserting Symbols on a Graphic You have a graphic open and you want to insert one or more Symbols on the graphic in the Work Area view. You have selected the Symbol library and or used the filter to display the relevant Symbols. NOTE: To select multiple Symbols, press the CTRL key and with your mouse, click on the Symbols you want to add. Right-click on the Symbol and click Insert from the context menu. The Symbol is added to the graphic, and all the properties, including substitutions, if any, are listed in the Symbol Instance Properties view, under Substitutions Creating a Customized HQ Symbol You can customize any existing HQ Symbols so that they display a "Regional" or customized version of that Symbol in your Project graphics. 1. In System Browser, select Management View, and expand the Project node. 2. Navigate to System Settings, and then expand the Libraries folder. 3. Expand the Headquarter library folder, and navigate to the Symbols library that contains one or more Symbols you would like to create a customized Symbol for. 4. Select the Graphics tab. The Symbols in the Symbol libraries display in the Library Browser in the primary pane. 5. Click on the Symbol(s) you want to create a customized Symbol for, and then from the Library Browser toolbar, click Customize. 6. Click OK to confirm you want to customize the current library and the listed Symbols. The Symbol(s) are added to the Symbols folder now displayed under the Region library folder. And, the Symbols display in the Graphics Editor. 7. Modify the Symbol as required for your region. When finished, click Save. 131

132 5 Overview of Graphics Editor Overview of Elements The updated Symbol is now saved in the Regional Symbol folder, and the original Symbol remains in the original library folder with the Localized Symbol icon displayed in the upper left-hand corner of the Symbol thumbnail image Overview of Elements About Elements The Graphics Editor provides you with a set of drawing elements that let you create shapes, complex graphics, templates, and Symbols or import image,.xml, and AutoCAD files. Elements can be formatted, they have properties that are configured in the Properties view, and you can display a descriptive tooltips when you move your mouse over them on the canvas. List of Drawing and Import Elements The following drawing elements are available: Animation Ellipse Line Path Rectangle Polygon Text The following elements are available for importing graphic files: Import Raster Image File Import AutoCAD and XML File Start AutoDesk Application for AutoCAD File Conversion Element Properties Elements have properties associated with them that are configured in the Properties view. Each property belongs to a category of properties. You can move your mouse over a property listed in the Properties view, to display a brief description of the property, or for a more detailed description of the property, including property type, allowable input values, and the default value, click Show Property Detail. Every element property can be animated. The animation is implemented by creating evaluations for a property. The evaluation value is always added to the design value. 132

133 Overview of Graphics Editor Overview of Elements 5 Element Tooltips You can create a tooltip to display over an element on a graphic in the Graphics Viewer. The tooltips are created in the Graphics Editor, in the Properties view via the General > Tooltip property. The text box contains any descriptive text entered into the Tooltip property. Active Elements When an element is active, the handles that surround the element are visible on the canvas. These handles are used for rotating and resizing. The line and path elements, also display start and end handles for editing purposes Selecting Elements An element can be selected from either the Element Tree view, when Show all Elements is enabled, or from the canvas by clicking the element. To select multiple elements you press CTRL key, and click on each element you want to select. From the canvas, you can also use the rubber band, a tool that allows you to click and drag your mouse to enclose element(s) in the blue, bounding rectangle created by the movement of the mouse. Upon release of the mouse, all elements in the bounding rectangle are selected and active. Moving Elements Elements or guidelines can be moved around the graphic canvas in Design mode using the mouse to click-and-drag the element. A grayed-clone of the element remains in the original spot on the canvas, with the original attributes applied, until you release the mouse button. During a click-and-drag move, you can press the ESC button if you change your mind about the move. Copying and Formatting Elements There are a number of ways to apply and re-use formatting from one drawing element to another on an active canvas. Re-Use Format Allows you to apply formatting of a selected element to the next drawn element on the canvas. This is done by clicking on an element on the canvas so that the handles are visible, and then selecting a drawing element from the ribbon to draw. The newly drawn element will take on the formatting of the selected element. For example, if you have just used the Ellipse element to draw an ellipse on your graphic, and you would like to add a rectangle with the same shading and formatting as the ellipse element, simply click on the ellipse on the graphic so that the handles and adorners display, and then select the Rectangle element from the canvas. The Rectangle element takes on the color formatting of the Ellipse. Copy Format You can select the Copy Format to copy the formatting of an element, and then click Paste Format or more elements on the canvas. icon to paste the formatting on one 133

134 5 Overview of Graphics Editor Overview of Elements Element Angle Center The angle center is the axis around which an element rotates in Runtime or Test mode. The angle center is determined by the Angle Center X and Angle Center coordinates in the Layout Properties of the Properties View. When no values are set for the angle center, the angle center is not visible on the canvas Locking and Unlocking Elements You can Lock an element, so that it cannot be selected, moved, or resized inadvertently on the graphic canvas while working with other unlocked elements. Elements are locked from the Element Tree view or from the graphic canvas via a context menu that displays when you right-click on the element. An element, however, is only Unlocked from the Element Tree view. Locked elements have the following functionality: They are Locked from the Element Tree view or from the graphic canvas via a context menu that displays when you right-click on an element. They are only Unlocked from the Element Tree view. A Locked element cannot be selected elected from within the Element Tree view, can be moved, or resized on the graphic canvas About Element Handles Element handles are control points attached to a vector drawing graphic that allow you to control the size, shape, rotation, and position of the graphical element. Handles are visible in Design and Test mode only, and they always appear over a graphical element. When you move elements, only the bounding rectangle handles of each element are visible. When you rotate elements, both the rotating and moving handles are visible. In select and multi-select mode, only resize and rotation handles are visible. They are also visible if the element width or height, or both, is zero. The size of a handle does not change when you zoom in or out of a graphic. Selection and Resizing Handles All elements are surrounded by eight white selection and resizing handles: one in each corner and an intermediate handle between the corners. When the Selection handles display, the element(s) are considered active. You can also click and drag each handle until the required size is reached. The Ellipse element below, shows the eight selection and resizing handles. The top center selection handle is attached to the green Rotational handle. 134

135 Overview of Graphics Editor Overview of Elements 5 Start and End Nodes Any element drawn on the canvas that has an open path, has a Start and End handle attached to it. Element examples include a line, or a rectangle. The Line element below shows the green Start handle at the top of the line and the red End handle at the bottom. Cornering Radius Handles The Rectangle element has a pair of cornering radius handles attached to it. These handles allow you to curve the corners of the rectangle element. The Rectangle element below shows the Corner Radius handles in the top, left corner of the element. These handles control the rounding of all four corners simultaneously. Rotational Handles All elements have the green Rotational handle attached to a center selection handle. The Rotational handle is displayed at the top of the polygon element below. 135

136 5 Overview of Graphics Editor Overview of Elements Element Handle Table Element Handles Icon Name Function Start Handle End Handle Cornering Radius Handle Sizing Handle Rotational Handle Angle Center Segment Handle Bezier Handle Marks the beginning of a path. Marks the end of a path. Rounds the corners of a rectangle element. Allows you to select an element(s) on the canvas and click-and-drag to resize the selected element(s). Each element is surrounded by eight selection handles. Rotates the element. The axis around which an element rotates. NOTE: This handle only displays on the canvas when the Layout Properties, Angle X and Angle Y, have values associated with them. Separates two segments of a path. Changes the curvature of a Bezier shape: - Cubic Bezier Handle - Quadratic Bezier Handle Mid-Segment Handle Each path segment has a start and an end handle, by moving the Mid-Segment handle you are moving both the Start and End handles of that segment About Grids Grids are patterns of equally spaced, non-printing, horizontal, vertical, and angular lines or markers used to divide a graphic into equal sections. They help you align your elements symmetrically, precisely, and angled for a 3D-like representation. The grid lines include X-, Y-, and Z- lines. X sets the horizontal lines, Y sets the vertical lines, and the Z- line, if Enable 3D Axis selected, sets the angular lines on the grid. When you adjust the grid and guideline settings for a graphic, the settings are automatically stored for you, and will be applied to future graphics or Symbols you create or work with. Snap You can force the elements to line up with the grid using the snap feature. With the snap feature, your drawing elements are attracted, and attach themselves, to the nearest gridline intersection much like metal objects are drawn toward a magnet. Snap makes it easier to create an accurate graphic. The top left corner of a drawing element snaps to the gridline. When you select more than one drawing element, only the main drawing element (the one under the mouse) snaps into position. In the case of Symbol Instances that have an anchor associated with them, then the anchor is snapped into position rather than the top left corner of the Symbol. 136

137 Overview of Graphics Editor Overview of Elements 5 By pressing and holding the SHIFT key while the snap feature is enabled, you can drag a drawing element near or over a gridline without activating snap, which gives you additional positioning choices on the canvas. The Snap Now feature, enabled when you right-click on an element on the graphic, automatically snaps all the selected elements and Symbol Instances to the nearest grid intersection. Pitch On a grid, you can adjust three different pitch settings. The Pitch X and Pitch Y settings allow you to adjust the distance between the gridlines. The Pitch Angle setting determines the number of degrees an element on a graphic rotates before it snaps into its next position. For example, if you set the Pitch Angle to 90 for a line element you draw straight up and down on the canvas, and then rotate the element, the line element will snap into position every 90 degrees as it revolves around its center axis. Offset The origin of the grids is the top left corner of the canvas. Sometimes, however, you might want to make the grid start from a particular spot on the canvas for example, a margin boundary. You can do this by adjusting the Offset X and Offset Y settings, which control the distance from the starting point. You can use the Offset Angle setting in unison with the Pitch Angle setting to determine the number of degrees of rotation of a graphical element on the canvas. Color You can change the color of the grid by changing the value of the Stroke Color using a hexadecimal color code, such as FFFF0000 (red), or by entering the name of a color from the list of HTML Literal Word Colors [ 272]. Additionally, you can reference a state text color defined in the corresponding Text Group of the associated data point, using the following syntax: TxG_[TextGroupName].[Value]. The syntax is case sensitive. Styles Grid styles refers to the look you can assign to your grid either Lines or Markers. When you select Lines, the grid pattern is more pronounced since more dots are used to define the pattern. When you select Markers, the grid pattern is less pronounced, though still visible, because fewer dots are used to define the pattern. Additional Grid Information Gridlines are not affected by mouse events. Grids float over the elements on a graphic. Grid settings are saved with the graphic. Grid settings are unique for every graphic. Grids are visible only in Design and Test modes. Gridline stroke, or thickness, does not change with different zoom factors About Guidelines Guidelines are horizontal or vertical, non-printing lines dragged onto a graphic and used to position or align elements precisely and symmetrically. Guidelines are similar to gridlines in that they appear at certain intervals, but they also differ because you can place them anywhere you want on the canvas. Snap As with gridlines, the snap feature works with guidelines. With snap, your drawing elements are attracted, and attach themselves, to the nearest guideline you drag 137

138 5 Overview of Graphics Editor Overview of Elements them toward much like metal objects are drawn toward a magnet. This makes it easier to create an accurate graphic. If snap is enabled, only the top left corner of the drawing element snaps to the guideline. If snap is disabled, all four corners are active, and any one of them will snap to a guideline. By pressing and holding the SHIFT key while the snap feature is enabled, you can drag a drawing element near or over a guideline without activating snap, which gives you additional positioning choices on the canvas. Layout To precisely position the guidelines on the selected graphic, you can enter a numeric value for the X and Y axis. You can also choose to hide or display the guidelines, as well as lock or unlock them. Locking a guideline anchors it in its current position so that you don t accidentally drag it when moving other elements on the canvas. Colors You can change the color of the guideline by entering a hexadecimal color code, such as FFFF0000 (red), or by entering the name of a color from the list of HTML Literal Word Colors [ 272]. Additionally, you can reference a state text color defined in the corresponding Text Group of the associated data point, using the following syntax: TxG_[TextGroupName].[Value]. The syntax is case sensitive. TextGroups are found in the Libraries folders and configured in the Text Group Editor. Stroke Two additional settings are available to allow you to customize the appearance of the guidelines Stroke Thickness and Stroke Dash Array. Stroke Thickness refers to the width of the guideline, and Stroke Dash Array refers to the length of the dash and the space between the dashes (the gap) that comprise the guideline. Additional Guideline Features Guideline settings are saved with the graphic. Guideline settings are unique for every graphic. Guidelines are visible only in Design and Test modes. Guidelines can be added, moved and deleted. Guideline colors are customizable. Guideline stroke and thickness does not change with different zoom factors About Linking Elements Elements can be configured so that when a graphic is open you can click on an element and quickly navigate to an internal Desigo CC link (data point object or application) and make it the new primary selection in either the primary or secondary pane. Or, you can configure the element to navigate to an external link such as another application, a website (URL), or document (for example,.doc,.txt,.pdf, etc.) Navigation via an element is configured in the Properties view, from the element s Navigation properties. From the Navigation properties there are several properties that allow you to enter the path and\or name of the link, select how to trigger the navigation (single click or double click) from the element, and enter a brief descriptive text to add to the element s tooltip. Internal Links The Navigation Target property allows you to enter a data point reference, an application name and\or file name, or a Web address. When the property is a data point reference, it is an internal Desigo CC link. The data point or object reference 138

139 Overview of Graphics Editor Overview of Elements 5 can be either a full name or the object identifier. The Navigation Parameter property supports a data point target, where you can specify a data point reference, such as a viewport, graphic, or value, that is sent as context to the new primary selection. External Links If the targeted link is an external link, they are handled as follows: NOTE: Desigo CC always assumes the path is from the local machine the software is installed on, unless otherwise indicated in the Navigation Target path. Application name with arguments - The application name is the left part of the link reference followed by a space, and then the file name. If the application name or argument contains spaces, they must both be enclosed in double quotes. For example, Winword mydoc.doc Winword.exe mydoc.doc [local drive]:\program Files\Winword.exe my doc.doc File Name - If the link reference contains only a file name, the default application for that file type is started. For example, if you specify a.txt file, the Notepad application opens. If the file name contains spaces, it has to be enclosed in double quotes. For example, mydoc.doc C:\Data Files\Readme.txt \\MyServer\MyShare\SubFolder\Read me.pdf Web Link If the link is a web address, the address must be preceded by the protocol (http, https, ftp, etc.) For example: https// Grouping and Ungrouping Elements The four Group options allow you to group or ungroup elements, or have elements join or leave existing groups. Creating Groups One reason to create a group is to combine multiple graphic elements so that when one element is repositioned, all other elements move with it. Another reason is to modify several elements at the same time. For example, if you want all the elements in a group of three elements to appear wider by the same amount, you can simply select the group, and then modify the width property in the Graphic Properties view. You can also select individual elements within a group by using the Element Tree view to modify the element accordingly. If you change the size of an element and the element boundary exceeds the group boundary, the group is adjusted automatically. This also applies if an inner element reduces the size of the group boundary. To ensure that no elements reach beyond the group boundary, you can specify a value of 0 (zero) for the following group properties: Clip Left, Clip Top, Clip Right, and Clip Bottom. The Group function becomes active only when you select two or more elements from the same layer or group. If you select a group, and then press the DELETE key, all elements in the group are removed. If you would like to add or remove one or more elements from a group while retaining the group itself, see the sections Joining a Group and Leaving a Group in this topic. You can group multiple elements of any type within the same layer or group with the Group option. When you add a new group element, it is inserted at the same z- order position as the selected element with the highest z-order (the top-most 139

140 5 Overview of Graphics Editor Overview of Elements selected element). The z-order within all selected elements remains in the newly created group, regardless of the order of the selection. Ungrouping Elements For various reasons, you might want to ungroup elements as well. For instance, you might want to re-arrange the elements within a group, in which case, you would need to ungroup them first. Or, you might want to modify an element separate from the group to see how it will look on its own before you decide whether or not it should stay in the group. The Ungroup function becomes active only when at least one of the selected elements is a group. The Ungroup option only removes the Group element. It does not physically separate the grouping of elements. In practical terms, what this means is that selecting Ungroup simply unlocks the group and allows you to modify individual elements. All elements in the group are moved to the parent of the group that was removed, based on the Z-order of the group. The Z-order of the inner elements remains the same. Additionally, the position and angle of every removed element is recalculated so that the element doesn t visually change in the graphic or Symbol. Joining a Group The Join Group option allows you to add one or more graphic elements to an existing group by using the drag and drop feature in the Element Tree view. The option is enabled only when you select two or more elements and the element selected last is a group. In terms of the Z-order, elements that are added are unpredictable, though elements with the same parent retain their Z-order in that parent. The position and angle of every added element is recalculated so that the element doesn t visually change in the graphic or Symbol. Leaving a Group The Leave Group option allows you to remove one or more graphic elements from a group. You can remove elements from a group either by selecting the element in the Element Tree view and then deleting the element or selecting the Leave Group option. The option is enabled only when you select an element serving as a group child. Elements with the same parent will retain their relative z-order after they leave the group. The position and angle of every removed element is recalculated so that the element doesn t visually change in the graphic or Symbol Element Alignment and Precision When working with elements that need to be aligned precisely and of the same size, care must be taken during the creation of the elements so that when the elements are combined the composite Symbol image is seamless on the screen at any resolution. As a rule, when you are working with elements, you should always increase the zoom level of the canvas to allow for greater precision. The higher the zoom level the more granular the increments are, and the more precise any horizontal or vertical lines can be achieved. Also keep in mind that at higher zoom levels the incremental movement changes relative to the zoom level factor. When working with a Path element, if the vertices alignment is not perfect, the final image may result in rounding off that may be inconsistent with other elements that are aligned to that path element. For example, if you are connecting two "pipe" Symbol pieces that have been created with the Path elements and the vertices of the Path elements that make up the pipe pieces are vertically and horizontally straight to precision and the Symbol pieces are of equal width, you will always see a consistent and uniform rendering regardless of zoom level. As in the image below, the Paths and Symbols that make up the adjacent sides of the pipes are inconsistent and the composite image of the Symbols is not uniform. 140

141 Overview of Graphics Editor Overview of Elements 5 Tips When you create elements that will connected to other elements, it is imperative that the elements are of the same size, otherwise, the transition from one element to the next will not be smooth or perfect. When creating a Path element, the vertices alignment should be perfectly vertical and horizontal to avoid any rounding off and to ensure perfect alignment with other elements. When creating a Path element, you should also make sure that the adjacent with of the element, is equal in size Notes on Resizing Elements Elements can be resized on the active canvas using the control handles that display when you click on an element(s) in Design mode. There are, however, a few notes and exceptions to keep in mind when resizing elements: The stroke thickness is never affected except for the XAML object. The font size is not affected by resizing, unless you have enabled the Resize Fonts from the Home tab s Format group. Resizing an element while pressing the ALT-key maintains the aspect ratio of the element. Resizing an element while pressing the CTRL-key maintains a square. When the new width/height is negative, the FlipX/FlipY properties of all elements are toggled. Resizing a line or a polygon doesn t change the point collection; it just changes the view. For example: Resizing the polygon width from 100 to 0 is allowed. After that, the polygon width can be resized back to 100 and the polygon looks the same as before. This behavior is also important for scripting the size. Resizing a Group or Symbol Instance affects all inner elements evenly. Resizing an Animation object affects all resulting Symbol Instance frames with the same scale factor. This is only important if the resulting frames have different sizes (which is allowed). For example: If an Animation object is resized to one-half of its original size, all resulting frames are one-half of their original size. The resizing control handles are not affected by the zoom level; that is, they never change their size. 141

142 5 Overview of Graphics Editor Overview of Elements About Tooltips All graphic drawing elements have a Tooltip property that can be customized under the General Category in the Property View. When you move your cursor over a visible element, either in the Graphics Editor Runtime mode or in the Graphics Viewer application, the descriptive text entered into the Tooltips property field displays in the Tooltips text box with a yellow background. If you have a group of elements, the Tooltips text box displays for the top-most element in the Z-order. In addition to the customized Tooltip text, the text box also contains the following information: Dynamic tooltip information that is the result of a Tooltip evaluation that displays a different tooltip depending on field values. Static and Dynamic Link Reference and Link Description Data point Reference(s) - The name(s) of the object and the System Browser view the name is based on. One line entry per object. This information is obtained from the evaluation expressions and the Object References property from the Advanced category. data point References Notes The Tooltips text box displays the object names of all the element s data point references. These references are collected from the evaluation expressions and the Object References property. The following applies to how the object names and data points are listed and displayed in the Tooltips text box: Object names and addresses are never converted into another hierarchy. The tooltip displays what was manually entered as the Object Reference. Only the last part of the object name is shown. For example, Analog Input 1 instead of System\Removable Applications\BACnet Network #1\Simulator Device #1\Analog Input 1 The property name or property ID of an object is never shown. An object name is only displayed once, even if there are multiple properties associated with the object Tooltips Text Box Item Description 1 Static Tooltip - Descriptive text entered into the Tooltip property field that is associated with the General category in the Property Viewer. 2 Dynamic Tooltip Current Tooltip text based on a Tooltip evaluation, if any, and the current field values. Evaluations are created in the Evaluation Editor. 3 Static Link Reference and Link Description The name and description of the file linked to the element as entered in the Link Reference and Link Description fields from the Commands category in the Property Viewer. 4 Dynamic Link Reference and Link Description The name and description of the associated link resulting from any evaluations on the Link Reference and Link Description fields. The text displayed is dependant on the current field values. Evaluations are created in the Evaluation Editor. 5 Data Point References - The name(s) of the object and the System Browser view the name is based on. One line entry per object. 142

143 Overview of Graphics Editor Overview of Elements Basic Element Tasks Copying an Element You are in Design or Test mode and have one or more elements on the graphic canvas you want to copy. 1. Click on the element(s) you want to copy. To select more than one element, press CTRL and then continue to select the elements you want to copy. 2. Do one of the following: While pressing the CTRL key, drag the selected elements to another location on the canvas and then release the mouse button. The elements are copied to the canvas. Right-click on the selected elements and click Copy. The element(s) are copied to the clipboard. To paste them onto the canvas, right-click on the selected elements, and click Paste Deleting an Element You are in Design or Test mode and have one or more elements on a canvas. 1. Right-click on the element you want to delete. The element becomes active and its control handles display around the element. 2. From the context menu, select Delete. The element is deleted from both the canvas and the Element Tree view Linking an Element You can configure an element on a graphic to act as a quick link to an internal data point object and display it as the new primary selection. Or, you can configure the element to open an external object, such as a Website, application, or a document (for example, PDF, text files, and word processing documents.) You are in Design or Test mode and have an element you want to link to another object. 1. Click on the element you want to link. The element becomes active and its properties display in the Properties view. 2. In the Properties view, locate and display the Navigation [ 264] properties. 3. Complete the fields as follows: Navigation Target Enter a data point reference, an application name and/or a file name or a Web address. Navigation Parameter Only used with internal links. Enter an argument that is sent as context to the new primary selection based on the navigation target. Navigation Trigger From the drop-down menu, select how the navigation should be triggered from the element. Options are: a Single click or a Double click. 143

144 5 Overview of Graphics Editor Overview of Elements Navigation Description (Optional) Enter a brief descriptive text that displays in the tooltip. The description displays in parenthesis, following the path to the link. The element is now configured so that when it is selected, one of the following occurs: If the navigation target is an internal Desigo CC link, the linked item becomes the primary selection and displays in either the primary or secondary pane. If the navigation target is external, the document, website, or application opens and displays Modifying Element Properties You are in Design or Test mode and have a graphic open. 1. From the Element Tree or from the active canvas, navigate to and select the element whose properties you want to modify. The Properties view displays the list of associated properties. 2. For each property you want like to modify, navigate to and click on the property group to expand and display the associated properties. 3. Modify the properties as needed. 4. From the toolbar, click Save to save the changes to the graphic Modifying or Removing a Link from an Element You have an element that is configured to navigate to an internal or external link, and you want to modify the link or remove the link. You are in Design or Test mode. 1. Select the element from so that it is the primary selection. The element s properties display in the Properties view. 2. In the Properties view, navigate to and expand the Navigations properties. The Navigations properties display. 3. Do one of the following: Modify the Navigation properties as needed. From the Navigation Target property, delete the path or link. Clear any other properties associated with the link. 4. From the Graphics Editor toolbar, click to save your changes Modifying the Angle Center You are in Design or Test mode, and have an open graphic containing an element with the angle center set. 1. Click on the element with the angle center you want to modify. 2. Do one of the following: Click on the angle center sizing handle and drag it to the desired location within the bounding rectangle. 144

145 Overview of Graphics Editor Overview of Elements 5 Press CTRL and click on the angle center sizing handle to drag and snap it to the values of 0/50//100% of the bounding rectangle edge length. The element s rotation angle center is modified. 3. From the toolbar, click to save the changes to the graphic Moving an Element You have one or more elements on the graphic canvas you want to move elsewhere on the canvas. 1. Click-and-drag the element(s) over the canvas. A grayed-clone copy of the element(s) displays, while you move the element to the new location on the canvas. 2. Release the mouse button. The clone copy disappears and the element placed in the new location. NOTE: To cancel the move before you release the mouse button, press ESC on the keyboard. The action is canceled Moving an Element with the Keyboard You want to move an element on the canvas using the UP, DOWN, LEFT, or RIGHT keyboard keys and you are in Design or Test mode. 1. Select the element on the canvas you want to move. 2. Do one of the following: Press the UP, DOWN, LEFT, or RIGHT arrows on the keyboard to move the element by one pixel. Press CTRL+UP, DOWN, LEFT, or RIGHT arrow on the keyboard to move the element relative to the grid settings. From the toolbar, click to save the changes to the graphic Resizing Elements You can rotate and resize one or more elements at the same time on the active canvas. You have a graphic open with one or more elements, and you are in Design or Test mode. Click on the active element on the canvas and move the adorners (nodes) in the desired direction. Notes on Resizing Elements Elements can be resized on the active canvas using the control handles that display when you click on an element(s) in Design mode. There are, however, a few notes and exceptions to keep in mind when resizing elements: The stroke thickness is never affected except for the XAML object. The font size is not affected by resizing - unless the global setting Resize Fonts is enabled from the Home tab, Format group. With the ALT key, the aspect ratio is kept. With the CTRL key, the result will be a square. 145

146 5 Overview of Graphics Editor Overview of Elements When the new width/height is negative the FlipX/FlipY properties of all elements are toggled. Resizing a line or a polygon doesn t change the point collection; it just changes the view. For example: Resizing the polygon width from 100 to 0 is allowed. After that, the polygon width can be resized back to 100 and the polygon looks the same as before. This behavior is also important for scripting the size. Resizing a Group, SymbolInstance property, or CombinedObject affects all inner elements evenly. Resizing an Animation object affects all resulting Symbol Instance frames with the same scale factor. This is only important if the resulting frames have different sizes (which are allowed). For example: If an Animation object is resized to one-half of its original size, all resulting frames are one-half of their original size. Resize selectors are not affected by the zoom level; that is they never change their size Rotating Elements You can rotate one or more elements at the same time on the active canvas. You have a graphic open containing one or more elements, and you are in Design or Test mode. Click on the active element on the canvas and move the rotation handle adorner in the desired direction Selecting Elements from the Canvas There are a several ways you can select elements from the graphic canvas in Design mode. Click on an element the element handles display and the element is selected. Use the Rubber band click-and-drag anywhere on the canvas, as you drag the mouse, a line is created. Move the mouse around the canvas until the desired elements are captured within the rubber band boundaries. 146

147 Overview of Graphics Editor Overview of Elements Selecting Elements from the Element Tree You have the Element Tree displayed in the Dock Panel and are in Design or Test mode, and have elements on the canvas. 1. In the Element Tree view, from the Selected Depth and the Default Layer dropdown list menus, select the depth and Layer that contains the elements you want to select. 2. Click Show all Elements. The Show all Elements icon their associated layer(s) in the Element Tree view. 3. Do one of the following: is enabled, and the elements are listed under To select one element, click on the element from the displayed list. To select multiple elements, press the CTRL-key and then click on the elements you want active on the canvas. The element(s) are now active on the canvas, in the Element Tree, and the Properties view Setting the Angle Center of an Element Elements can be configured to rotate around a set axis, called the angle center. You are in Design or Test mode, and have an open graphic containing an element for which you would like to set a rotational axis. 1. Click on the element you want to modify. 2. From the Properties view, navigate to and expand the Layout Properties. 3. Enter values for the Angle Center X and Angle Center Y properties. The angle center adorner entered above. displays on the canvas based on the values 147

148 5 Overview of Graphics Editor Overview of Elements Using Copy Format You are in Design or Test mode and you have formatted an element on the active canvas and would like to apply the same formatting to other elements on the canvas. 1. From the canvas, select the element whose formatting you want to copy and apply to another element on the canvas. 2. On the Home tab, in the Edit group, click Copy Format. The properties of the element are copied and stored. 3. Right-click on the target element to which the formatting is to be applied, and from the Edit group, click Paste Format. The target element properties are updated with the new formatting Locking and Unlocking an Element on the Canvas You can lock an element on the canvas, so that it is not selectable during editing. You have a graphic open in the canvas and you have an element on the canvas you want to lock. 1. Navigate to the Element Tree View. 2. Click the expander arrow of the layer that contains the element you want to lock. All the elements associated with the layer display. 3. Check the checkbox under the next to the element(s) you want to lock Working with Element Groups Grouping Elements You are in Design or Test mode, you have drawn two or more elements on a canvas, and you want to place them in a group. 1. From the keyboard, press CTRL. 2. Select the elements you want to place in a group. 3. From the Home tab, in the Selection group, click Group. The elements are placed in a group Joining a Group of Elements You are in Design or Test mode, you have an existing group of elements, and you would like to add an element to the group. 1. From the canvas, select the element that you want to add to the group. 2. From the keyboard, press CTRL. 3. Select the group that you want the element to join. 148

149 Overview of Graphics Editor Overview of Elements 5 4. From the Home tab, in the Selection group, click Join Group. The element joins the group Removing an Element from a Group You are in Design or Test mode, you have an existing group of elements, and you would like to remove an element from the group. 1. From the Element view, navigate to the group that contains the element you would like to remove. 2. Select the element. 3. From the Home tab, in the Selection group, click Quit Group. The element is removed from the group Removing a Group You are in Design or Test mode, you have an existing group of elements, and you would like to remove the group from the graphic. 1. From the canvas, select the group you want to remove. 2. From the Home tab, Edit group, click Delete. The group, and all the elements contained in the group, is removed Repositioning Inner Group Elements You are in Test or Design mode, you have a group of elements, and you would like to reposition an inner element. 1. From the canvas, select the group of elements containing the inner element you want to reposition. 2. From the Element Tree view, navigate to the highlighted group. 3. Expand the group. 4. Select the element you want to reposition. The element on the canvas is selected. 5. From the canvas, move the inner element to its new position. 6. Click outside of the group of elements. The inner element is repositioned while remaining part of the group of elements Resizing an Element Group You are in Test or Design mode, and you would like to resize a group of elements. 1. From the canvas, select the group of elements you want to resize. The selection handles display around the group. 2. Hover over one of the selection handles until the cursor changes to 149

150 5 Overview of Graphics Editor Overview of Elements 3. Click and drag a selection handle on the group of elements until you have the desired size. 4. Release the selection handle. The group of elements is resized Resizing a Single Element in a Group You are in Test or Design mode, you have a group of elements, and you want to resize one of the grouped elements. 1. From the canvas, select the group of elements containing the element you want to resize. 2. From the Element Tree view, navigate to the highlighted Group. 3. Click to expand the group. The elements associated with the group display under the Group folder. 4. From the list of elements, select the element to resize. The element on the canvas is selected. 5. From the canvas, hover over a selection handle on the element. 6. When the resize cursor displays, click and drag the selection handle on the element and move the point to resize the element. 7. Click outside of the group of elements. The element is resized independently from the other elements in the same group Selecting an Element in a Group You are in Design or Test mode, you have a graphic open, you have the Element Tree open, and you would like to select an element in a group to modify it without ungrouping the elements. 1. From the canvas, select the group that contains the element you want to modify. The group is highlighted in the Element Tree. 2. Expand the group. 3. Select the element you want to modify. You can now modify the element independent of the group Ungrouping Elements You are in Design or Test mode, you have two or more elements grouped on a canvas, and you want to remove them from a group. 1. From the canvas, select the group of elements you want to ungroup. 2. From the Home tab, in the Selection group, click on the Ungroup icon. The elements are removed from the group. 150

151 Overview of Graphics Editor Overview of Elements Working with Element Arrangement Bringing an Element Forward You are in Design or Test mode, you have overlapping elements, and you would like to bring an element forward one element at a time. 1. From the canvas, select the element you want to bring forward. 2. On the Home tab, from the Selection group, click Bring Forward. The element moves forward one element Bringing an Element to Front You are in Design or Test mode, you have overlapping elements, and you would like to bring one element to the front of the other elements. 1. From the canvas, select the element you want to bring to the front. 2. On the Home tab, from the Selection group, click Bring To Front. The element is brought to the front Sending an Element Backward You are in Design or Test mode, you have overlapping elements, and you would like to send an element backward one element at a time. 1. From the canvas, select the element you want to bring forward. 2. On the Home tab, from the Selection group, click Send Backward. The element moves backward one element Sending an Element to Back You are in Design or Test mode, you have overlapping elements, and you would like to send one element to the back of the other elements. 1. From the canvas, select the element you want to send to the back. 2. On the Home tab, from the Selection group, click Send To Back. The element is sent to the back. 151

152 5 Overview of Graphics Editor Overview of Elements Working with Grids and Gridlines Adding Guidelines You are in Design or Test mode, and you want to add a horizontal or vertical guideline to the canvas. 1. On the View tab, check the Display Guidelines check box to enable the guidelines. A gray border displays along the left and top side of the drawing board providing a visual indicator that the guideline feature is enabled. 2. Do one of the following: To Add a Horizontal Guideline. Place the cursor over the top boundary of the graphic drawing board pane until the cursor turns into a vertical doubleheaded arrow and the tooltip displays Add Horizontal Guideline. To Add a Vertical Guideline. Place the cursor over the inside-left boundary of the graphic drawing board pane until the cursor turns into a horizontal double-headed arrow and the tooltip displays Add Vertical Guideline. 3. Click and drag the dotted guideline onto the graphic canvas to the position you want, and then release the mouse button. A guideline appears on the graphic canvas. 4. Repeat as necessary Changing Guideline Properties You are in Design or Test mode, and you want to change the Guideline properties of the active graphic. 1. On the Views tab, from the Workspace group, check the Display Guidelines check box to display the guidelines in the drawing workspace. 2. From the canvas, select the guideline(s) you want to change. To select multiple guidelines, press CTRL and then select the guidelines on the graphic canvas you want to change. The selected guideline on the graphic displays in green and in the Guideline Properties view the Layout, Colors, and Stroke property display. 3. Expand each section and make the necessary adjustments for each property. NOTE: The Colors property can be changed using a hexadecimal color code such as FFFF0000 (red) or by referencing a state text color defined in the corresponding Text Group of the associated data point, using the following syntax: TxG_[TextGroupName].[Value] 4. When you have finished updating a property, press TAB or ENTER to finish or move to the next property. The guideline properties have been changed. 152

153 Overview of Graphics Editor Overview of Elements Copying and Pasting a Guideline You have a graphic open and the guidelines are visible. You want to copy and paste a guideline to another location on the graphic. 1. Select the guideline you want to copy and paste. The selected guideline displays in green. 2. Press CTRL and move the guideline. The guideline is copied and pasted Moving Guidelines Drag an existing guideline to the desired location on the grid, and then release the mouse button. The guideline moves to the desired location Locking a Guideline 1. Select an unlocked guideline from the Workspace pane. 2. Hover over the guideline until the pointer changes to either a vertical or horizontal Locking. two-headed arrow, depending on the type of guideline you are 3. Right-click on the guideline. A context menu displays. 4. Select Locked. The guideline is locked and cannot be moved until it is unlocked from the Element Tree view. NOTE: You can also select multiple unlocked guidelines and lock them UnLocking a Guideline Guidelines can be locked from within the graphic canvas; however, when it is locked it cannot be moved or selected on the canvas. The guideline must be unlocked from the Element Tree view or the Property view. When the guideline is locked, you cannot move a selected guideline. When the guideline is unlocked, you can move it. 1. Navigate to the Element Tree view and select one or more guidelines to unlock. When you select a guideline from the element tree, the associated guideline displays in green on the graphic canvas. 2. Check the Locked check box associated with the selected guideline. The guideline is unlocked and can be moved. NOTE: To select more than one guideline, press CTRL and then select the guidelines you want to Unlock. 153

154 5 Overview of Graphics Editor Overview of Elements Deleting a Guideline 1. Select the guideline you want to delete. The guideline now displays in green. 2. Right-click on the green guideline, and from the displayed context menu, select Delete. The guideline is deleted. NOTE: You can also select and delete multiple guidelines by pressing CTRL and then selecting the guidelines you want to delete Displaying or Hiding Guidelines On the View tab, from the Workspace group, do one of the following: Check the Display Guidelines check box to display guidelines. Clear the Display Guidelines check box to hide guidelines Displaying and Clearing the Grid You are in Design or Test mode, and you want to display the grid pattern (lines or markers) on the canvas. 1. On the View tab, from the Workspace group, check the Display Grid check box to display the grid. The grid pattern displays on the graphic or the canvas. A gray border displays along the left and top side of the drawing board providing a visual indicator that the guideline feature is enabled. 2. If the angular Z- lines are not displayed, and you want them displayed on the canvas, in the Properties view (Graphic Properties), from the Workspace properties, check the Enable 3D Axis check box to display the Z lines. 3. In the Workspace properties, continue to configure and adjust the grid settings as required. For details on each property, see Workspace [ 268]. 4. The settings are stored with your user settings. 5. To clear the grid, click the View tab, and uncheck the Display Grid check box so that it is disabled Enabling or Disabling Snap On the View tab, from the Workspace group, do one of the following: Check the Snap check box to enable snap. Clear the Snap check box to disable snap. NOTE: By pressing and holding the SHIFT key while the snap feature is enabled, you can drag an element near or over a gridline or guideline without activating snap, which gives you additional positioning choices. NOTE: If you are working with a Symbol Instance, with an anchor enabled, the snap feature aligns the anchor to the nearest gridline. 154

155 Overview of Graphics Editor Overview of Elements Changing Grid Properties You are in Design or Test mode, and you want to change the Grid properties, which are located under the Workspace properties in the Properties view. 1. On the View tab, from the Workspace group, check the Display Grid check box to display the grid marks on the canvas. 2. From the Graphic Properties view, navigate to and expand the Workspace properties. 3. Make the necessary adjustments for each Grid property. For details on each property, see Workspace [ 268] NOTE: The Colors property be changed using a hexadecimal color code such as FFFF0000 (red) or by referencing a state text color defined in the corresponding Text Group of the associated data point, using the following syntax: TxG_[TextGroupName].[Value] 4. When you have finished updating a property, press TAB or ENTER to finish or move to the next property. The Grid properties have been changed Working with the Stroke Group Formatting Element Strokes You are in Design or Test Mode and have a graphic open and would like to segment. 1. On the graphic canvas, select the element(s) whose stroke lines you want to 2. From the Home tab, in the Stroke group, from the Stroke Array drop-down menu, select the type a stroke type. The stroke type selected is applied to the elements strokes. 3. From the Stroke Thickness drop-down menu, select a stroke thickness. You can also click on the current value in the Stroke Thickness drop-down menu, and manually type in a value for the stroke thickness. The stroke thickness is applied to the element stroke. 4. The following procedures depend on the element type you are working with. If the active element contain: A line or path element with a start and end handle, from the Start Stroke Line and the End Stroke Line drop-down menus, select an appropriate stroke shape. Two lines converging, as in the corners of a square or rectangle, to set the shape of the line join, from the Stroke Line Join drop-down menu, select a line join shape. Dashed lines, from the Stroke Dash Cap menu, select the type of cap (start and end shape) for each dash. The stroke of the selected elements are formatted according to your selections. Edit as needed. 155

156 5 Overview of Graphics Editor Overview of Elements Working with Element Alignment Aligning Elements Horizontally You are in Design or Test mode, you have three or more elements selected, and you want to space the elements evenly along a horizontal plane. 1. From the canvas, select the elements you want to align horizontally. 2. On the Home tab, in the Selection group, click Horizontally Even Spaced. The selected elements are evenly spaced along the x-axis Aligning Elements to the Bottom You are in Design or Test mode, you have two or more elements selected, and you want to align the elements to the bottom. 1. From the canvas, select the elements you want to align to the bottom. 2. On the Home tab, in the Selection group, click Align Bottom. The selected elements are aligned with the bottom edge of the element lowest in position on the canvas Aligning Elements to the Center You are in Design or Test mode, you have two or more elements selected, and you want to align the elements to the center. 1. From the canvas, select the elements you want to align to the center. 2. On the Home tab, in the Selection group, click Align Center. The selected elements are aligned to the average distance between the element farthest to the left and the element farthest to the right among the selected elements, and the center position of each element is aligned along a vertical plane Aligning Elements to the Left You are in Design or Test mode, you have two or more elements selected, and you want to align the elements to the left. 1. From the canvas, select the elements you want to align left. 2. On the Home tab, in the Selection group, click Left. The selected elements are aligned with the left edge of the element farthest to the left Aligning Elements to the Middle You are in Design or Test mode, you have two or more elements selected, and you want to align the elements to the middle. 1. From the canvas, select the elements you want to align to the middle. 156

157 Overview of Graphics Editor Overview of Elements 5 2. On the Home tab, in the Selection group, click Align Middle. The selected elements are aligned to the average distance between the element farthest to the top and the element farthest to the bottom among the selected elements, and the center position of each element is aligned along a horizontal plane Aligning Elements to the Right You are in Design or Test mode, you have two or more elements selected, and you want to align the elements to the right. 1. From the canvas, select the elements you want to align right. 2. On the Home tab, in the Selection group, click Align Right. The selected elements are aligned with the right edge of the element farthest to the right Aligning Elements to the Top You are in Design or Test mode, you have two or more elements selected, and you want to align the elements to the top. 1. From the canvas, select the elements you want to align to the top. 2. On the Home tab, in the Selection group, click Align Top. The selected elements are aligned with the top edge of the element farthest to the top Aligning Elements Vertically You are in Design or Test mode, you have three or more elements selected, and you want to space the elements evenly along a vertical plane. 1. From the canvas, select the elements you want to align vertically. 2. On the Home tab, in the Selection group, click Align Vertical. The selected elements are evenly spaced along the y-axis Aligning Elements to Wrap You can align all the selected elements and objects on the canvas so that they display in a row, side-by-side, and then wrap to the next row when space runs out on the canvas. This allows you to view elements in a grid-like format. NOTE: By default, when you drag-and-drop multiple elements over to the canvas, the elements will display in this alignment wrap format. You are in Design or Test mode, you have two or more elements or objects selected, or you have dragged over several datapoint instances and you want to align the elements to the middle. 1. From the canvas, select the elements\objects you want to align wrap. 2. On the Home tab, in the Selection group, click. 157

158 5 Overview of Graphics Editor Working with Element Types The selected elements are aligned in a row(s) to the upper-left-hand corner of the canvas, and wrapped to the next line, if necessary Alignment and Multiple Drag-and-Drop You can drag-and-drop multiple objects from System Browser to the Graphics Editor. When you drag and drop multiple object over to the Graphics Editor, the objects will display in the alignment wrapped mode. This means the objects will display side-by-side in a row, and wrap to the next row as needed. When you drop the objects, they will remain selected, and if you click, they will then display in a cascaded format on your canvas Working with Element Types Animation Element The Animation element allows you to set the property evaluations that determine which images, Symbol instances, will display based on the resulting state or value range of the animation element s Symbol Reference property. When you click on the Animation element from the ribbon, and draw on the active canvas, a blank Symbol Instance is drawn with an empty Symbol Reference property. This property must then be engineered Working with Animation Inserting an Animation Element 1. On the Home tab, in the Elements group, click Animation. An animation element is created on the active canvas or graphic. 2. In the Properties view (SymbolInstance Properties), navigate to the Symbol Instance. 3. From the Symbol Reference property, click, to display the Library Browser view. 4. From the Library Browser, navigate to the library and Symbol that is to represent the animation element. 5. Drag-and-drop the Symbol into the Properties view Symbol Instance field. The Symbol is now associated with the animated element, and displays on the canvas. 6. Repeat Steps 1-3, as needed. 7. Navigate to the Evaluation Editor view, and from the Type drop-down menu, select Animated. 158

159 Overview of Graphics Editor Working with Element Types Ellipse Element The ellipse element allows you to draw an ellipse, arc, or pie. An ellipse is an elongated circle and has a closed curve. An arc is a part of the ellipse curvature, while a pie is an arc with the ends connected by a straight line to the center of the imaginary ellipse Working with the Ellipse Element Drawing an Ellipse or Circle You are in Design or Test mode and have a graphic open. 1. On the Home tab, from the Elements group, select Ellipse. The mouse arrow changes to a crosshair when you move your cursor over the canvas. 2. Do one of the following: To create an ellipse, click on the canvas and drag the crosshair until you have created the desired ellipse dimensions. To create a circle, press CTRL, click on the canvas and then drag the crosshair until you have created the desired circle dimensions. The ellipse or circle is created Creating an Arc from an Ellipse You have a graphic open and have selected an ellipse element on the canvas. 1. Under the Ellipse Properties view, navigate to the Ellipse properties. 2. From the Ellipse Type drop-down menu, select Arc. The control handles and the extent rectangle display around the element. 3. On the canvas, click on the Start (red) and End (orange) angles of the ellipse element and move the mouse arrow until the desired arc is achieved. 4. The Start Angle and End Angle property values change as you move the control handles. You can also manually adjust the values, by either by typing a value or using the up and down arrows in the angle fields. 5. (Optional) To close the arc, check the Close Arc property box. A line is drawn from the Start to the End angles to close the arc Creating a Pie Shape from an Ellipse You have a graphic open and have selected an ellipse element on the canvas. 1. Under the Ellipse Properties view, navigate to the Ellipse properties. 2. From the Ellipse Type drop-down menu, select Pie. The control handles and the extent rectangle display around the element. 3. Click on the Start (red) and End (orange) control handles and move the mouse until the desired a pie dimensions are achieved. 159

160 5 Overview of Graphics Editor Working with Element Types The Start Angle and End Angle property values change as you move the control handles. You can also manually adjust the values, by either by typing a value or using the up and down arrows in the angle fields. 4. (Optional) To close the arc, check the Close Arc property box. A line is drawn from the Start to the End angles in the shape of wedge to close the arc Import AutoCAD Element The import AutoCAD image element allows you to insert and modify AutoCAD files created with AutoDesk software. When you choose to import an AutoCAD file, the Graphics Editor prompts you to first convert the AutoCAD file to an.xps compliant file format. NOTE: Once you have converted an AutoCAD and imported the converted file, the original file is no longer required. You will continue to work with the converted, imported file. You can, however, save the original as a back-up file. The following file AutoCAD formats can be imported:.dwg.dxf.dwf The following properties of an imported AutoCAD file can be modified; otherwise, the content of an imported AutoCAD file cannot be changed by the Graphics Editor: Position Size Rotation Background color Import.XML Element The import.xml image element allows you to insert a.xml image file onto the canvas..xml images can be stretched and clipped. The following.xml file types are supported and can be imported to the Graphics Editor:.XAML.XPS.DWFX An image element has the following handles attached to it: Selection and Resizing (open\closed) Rotational Line Element The Line element allows you to draw a line segment between two points---a Start and End handle--on the canvas. A line also contains a mid-segment point, which can be used to convert the line to a path element or to create polylines. Each segment can be extended, shortened, split, and moved. The line element consists of the following handles: Selection and Resizing Rotational Start and End 160

161 Overview of Graphics Editor Working with Element Types Working with the Line Element Drawing a Line Element You are in Design or Test mode and have a graphic open and want to draw a line segment. 1. On the Home tab, from the Elements group, click Line. The mouse pointer changes to crosshair when you move the mouse over the canvas. 2. On the canvas, click and drag the crosshairs cursor to draw a line. 3. Release the mouse button when you are done. A line segment with a mid-segment handle is created Converting a Line Element You are in Design or Test mode and you have line element on the active canvas you want to modify into one of the three path element options: Arc, Cubic or Quadratic Bezier. Or, if you want to split the line. 1. Select the line element you want to modify. The line element is active on the canvas. 2. Right click on the mid-segment icon of the line element. The context menu displays. The Line option is checked by default. 3. Select from one of the following: Arc Cube Bezier Quadratic Bezier Split The element is updated to a path and in the Properties view, the Path Properties Text Element The text element allows you to display a text or number label on a graphic and specify text formatting properties such as font family, size, and horizontal alignment, etc., and numerical formatting such as engineering units to display along with the value(s), Min, Max, and Precision properties. The Text element, also allows you to display a data point's object references, such as Name, Description, and Alias, by selecting Short Reference, Long Reference, or Alias from the Text Type property. To view the text references on the canvas in Runtime Mode, you have to drag-and-drop the data point onto the Evaluations Editor's Expression and then manually enclose the data point reference in double quotes (""). You can also create a translated text label, which allows you to create a text element on your graphic whose text displays according to the language settings for the current Desigo Control Center user logged. Text elements can also display a corresponding icon according to the active state or value of a data point property. 161

162 5 Overview of Graphics Editor Working with Element Types For more information on formatting a text element, see About Formatting Text [ 172] For a complete listing of text element properties, in the Appendix, see Text Element [ 267] Working with the Text Element Drawing a Text Element You are in Design or Test mode and have a graphic open. 1. On the Home tab, from the Elements group, click Text. The mouse pointer changes to crosshair canvas. when you move across the 2. Click on the canvas and drag the crosshairs to draw a text box. When you release the mouse button, a text box is created, the word Text is displayed and highlighted in the text box. 3. Double-click the text element and type the desired text. In the Properties view changes to Text Properties view, and the Text field automatically displays the text as it is typed on the canvas. 4. With the text element still selected on the canvas, adjust the Text element properties [ 267] as necessary Adding a Data Point Text Reference You can create text labels to view a data points Description, Name, or Alias on the graphic in Runtime mode. You are in Engineering Mode. 1. On the Home tab, from the Elements group, click Text. The mouse pointer changes to crosshair canvas. when you move across the 2. Click on the canvas and drag the crosshairs to draw a text box. 3. When you release the mouse button, a text box is created, the word Text is displayed in the text box. 4. In the Properties view, navigate to the Text group, and from the Text Type drop-down menu, select one of the following to display in the text label for the associated data points references: Short Reference - Displays the Name\Description, depending on the System Browser selection. Long Reference - Displays the entire path of the data point reference. Alias - Displays the text, if any, from the Alias field of the data point reference. 5. From the Evaluation Editor > Property drop-down menu, select Text. 162

163 Overview of Graphics Editor Working with Element Types 5 6. From System Browser, navigate to the data point object you want to reference in the text label, and then drag-and-drop the data point over the Expression field in the Evaluation Editor. 7. In the Expression field, type a double-quote (") at the beginning of the path, and then at the end of the path. 8. From the Graphics toolbar, click Save. When you are in Test or Runtime mode the text reference displays according to the selection you made in the Text Type field Editing a Text Element You are in Design or Test mode and have a graphic open that contains a text element you want to edit. 1. Do one of the following: To modify the text on the canvas - Double-click on the text element and modify the text as needed. To modify the text properties in the Properties view With the text element that you want to edit selected from either the canvas or the Element Tree view, navigate to the Properties view (Text Properties) and edit the associated text element properties [ 267] as needed. 2. From the Graphics Editor toolbar or File menu, click Save The graphic is saved with the modified text element settings Creating a Translated Text Label You can create translated text labels that display a specific text from a text group table, in the language of the current user s software settings. You are in the Graphics Editor and have a graphic or blank canvas open. 1. Navigate to Management View > Project > System Settings > Libraries, and then locate the library folder that has the text group that has the text you want to reference and display on the graphic. 2. Click on the text group and drag-and-drop the text group object onto your canvas. A translated text element is created on the graphic. 3. Double-click on the translated text element, and from the drop-down menu select the text you want to display. The language-specific text displays according to the current language settings of the software. The Properties View Text Properties> Text and >Text Type are updated to reflect the reference to the text group object.* *NOTE: You can also reference the text group manually by typing the text group object name and the text value (TextGroupObjectName.TextValue) into the Text Properties > Text field, and from the Text Properties > Text Type drop-down menu, selecting Translated Text. 163

164 5 Overview of Graphics Editor Working with Element Types Path Element The path element allows you to draw a series of connected line and curve sections, consisting of segments that can be manipulated in multiple ways to form any number of shapes. The following segment options are available when working with a path element section: Line The line section can be moved around, and it can be extended. The default option when you initially draw a path element on the canvas. Cubic Bezier Has two segments that can be moved in any direction. Quadratic Bezier Has one segment that can be moved in any direction. A path element can also contain one or more path figures, when selected from the Right mouse-click context menu. These elements are path elements within a path that have their own control handles, including a Start and End handle. Path Handles and Functionality. Icon Handle Names Description Start Handle End Handle Mid-Segment Marks the beginning of a line or path segment. Marks the end of a line or path segment. Allows you to select what path type should be applied to the segment. Example path, a heart-shape, consisting of a figure with the path element Cubic Bezier Segment A Cubic Bezier is a type of segment you can from when you right-click on a midsegment of a path element. A Cubic Bezier segment consists of a Start point, two Bezier handles, and an Endpoint. The start point may be the endpoint of the previous segment of any type. The Bezier handles have helper lines that connect to the point in which the helper line is a tangent to the path. The example below, displays a path element that has two cubic Bezier segments. 164

165 Overview of Graphics Editor Working with Element Types Quadratic Bezier Segment A quadratic Bezier is a type of segment you can from when you right-click on a mid-segment of a path element. A quadratic Bezier segment consists of a start point, one Bezier handle, and an endpoint. The start point may be the endpoint of the previous segment of any type. The quadratic Bezier handle has helper lines that connect to the point in which the helper line is a tangent to the path Working with the Path Element Drawing with the Path Element You are in Design or Test mode, have an open canvas and you want to draw a Path element. 1. From the Home tab, click Path. The mouse changes to a cross-hair cursor. 2. Click on the canvas and drag the crosshairs to draw your first line segment. Click on the canvas to change direction and add a new line segment. Continue drawing with the mouse until you have the desired shape or number of line segments. 1. For each segment of the element, you have the following options available when you right click on the mid-segment icon. Line A line with no segments. The line section can be moved around, and it can be extended. This is the default option when you initially draw a path element on the canvas. Arc The line section that crosses the mid-segment handle arcs out, and an arc width and an arc height handle are added to the mid-segment handle. Cubic Bezier Creates two segment handles. Split Splits the current section into two segments that can be dragged and manipulated. 2. Double-click where you want the element to end. To use keyboard shortcuts when drawing the segments, see Path Shortcuts [ 259]. 165

166 5 Overview of Graphics Editor Working with Element Types Modifying a Path Segment A path consists of one or many segments. Each segment can be adjusted individually. To Move a Segment Point Place the mouse over the segment point on the path you want to move, when the hand-cursor display, click-and-drag the segment. The segment moves to the new location. To Move a Segment by increments of 45 Degree Angles Place the mouse over the segment point on the path you want to move at an angle. When the hand-cursor displays, press CTRL and then click-anddrag the segment. The segment moves in 45 degree increments to the new location. To Move a Mid-Segment Point Click-and-drag the mid segment point to move the entire segment, including the Start and End points. To Split a Segment into Two Segments Place the mouse over the mid-point segment until the hand-cursor displays over the mid-point segment. Press ALT + Click-and-drag the mid-segment point. The one segment is now two segments. A new segment point is created and dragged to the new position Removing a Path Segment You are in Design or Test mode and have a graphic open. 1. On the canvas, click on the path element from which to want to remove a line segment. 2. Navigate to the line segment you want to remove. 3. Right-click on the yellow intermediate control handle where the two adjoining line segments meet. 4. Click Remove. The line is reconfigured to join to the two segments, making one line segment Modifying an Arc Segment You want to modify the width, height, or both angles of an arc segment s ellipse. Do one of the following: To modify both angle width and height of the arc - Place the mouse over one of the arc segment handles until the hand-cursor displays. Click-anddrag the segment until the desired height and width are achieved. To modify the width of the arc only - Place the mouse over the arc s width handle until the hand-cursor displays. Press the A key and click -and-drag the handle until the desired width is achieved. 166

167 Overview of Graphics Editor Working with Element Types 5 To modify the height of the arc only- Place the mouse over the arc s height handle until the hand-cursor displays. Press the S key and click-and-drag the handle until the desired height is achieved. To resize the width and height to square - Place the mouse over the arc s width handle until the hand-cursor displays. Press the CTRL and click-anddrag the handle to resize the width and height to square. Repeat the steps as needed to achieve the appropriate arc segment Modifying a Cubic Bezier Cubic Bezier segments can be modified be moving its Start point (green) or its End point (red) by clicking and dragging them with the mouse. The two blue control of the cubic Bezier control the smooth curve separately. Click-and-drag the circular blue control handle until you have the desired curve Modifying a Quadratic Bezier Quadratic Bezier segments can be modified be moving its Start point (green) or its End point (red) by dragging them with the mouse. Click-and-drag the blue control handle of the Quadratic Bezier until you have the desired curve Working with the Combine Feature The combine tasks, located on the Home tab, in the Selection group, allow you to combine two element shapes to create a new and separate path element. You have several options to determine how the two elements should be combined to create the new shape. The combine feature only works with the drawing elements that create shapes: Rectangle, Ellipse, Path, and the Polygon elements. The combine features do not work with the Text, Line, or Animation elements Creating a Union You are in Design or Test mode, and want to combine two or more elements to create a new, separate path element using the outside outline of the selected elements. 1. From the canvas, select the elements you want to merge together. 167

168 5 Overview of Graphics Editor Working with Element Types 2. On the Home tab, in the Selection group, click the Combine Union icon. A new path element is created over the original combined elements. 3. Click and drag the new element path to move it around the canvas Intersecting Elements You are in Design or Test mode, and want to combine two or more elements to create a new, separate path element shaped by the overlapping portions of two elements. 1. From the canvas, select the elements you want to merge together. 2. On the Home tab, in the Selection group, click the Combine Intersection icon. A new path element shaped like the overlapping areas of the two elements is created. 3. Click and drag the new path element to move and work with it on the canvas Using the Exclude Overlap Feature You are in Design or Test mode, you have two or more shape elements selected, and you want to create a path shape that excludes the nonintersecting portion of the first shape selected. 1. From the canvas, select the elements you want to combine. 2. On the Home tab, in the Selection group, click the Exclude icon. NOTE: The order you select the elements to combine, determines which element will be excluded to create the new path. The first element selected minus the second element becomes the new path element. A combined path element is created, minus the overlap area of the original two elements. The default Fill color of the new path is set to a gray tone. 3. Click and drag the new element path to move and work with it on the canvas Using the Subtraction Feature You are in Design or Test mode, you have two or more shape elements selected, and you want to create a path shape that excludes the nonintersecting portion of the first shape selected. 1. From the canvas, select the elements you want to combine. 2. On the Home tab, in the Selection group, click the Subtraction icon. NOTE: The order you select the elements to combine, determines which element will be excluded to create the new path. The first element selected minus the second element becomes the new path element Polygon Element The polygon element consists of one closed figure with three or more line segments. Example of a 5-corner polygon element, which is a pentagon: 168

169 Overview of Graphics Editor Working with Element Types 5 A polygon element with no Corner Offset A polygon element with the Corner Offset set to Working with the Polygon Element Drawing a Polygon You are in Design or Test mode and have a graphic open. 1. On the Home tab, in the Elements group, click Polygon. The mouse changes to a cross-hair cursor. 2. Click on the canvas and drag until the desired polygon is created, and then release the mouse button. A polygon element displays on the canvas Rectangle Element The rectangle element allows you to create rectangles and squares on a graphic canvas. The element has two properties that are used to modify the curvature of the rectangle edge. The default value of these properties, Radius X and Radius Y, is 0 which results in two intersecting lines as seen in a rectangle or square. Note: All corners of the rectangle are adjusted simultaneously; you cannot adjust them individually. The rectangle element has the following handles attached to it: Selection and Resizing Rotational Cornering Radius 169

170 5 Overview of Graphics Editor Working with Element Types Working with the Rectangle Element Drawing a Rectangle You are in Design or Test mode and have a graphic open. 1. On the Home tab, in the Elements group, click Rectangle. The mouse changes to a cross-hair cursor. 2. Click on the canvas and drag until the desired rectangle or square is created. Release the mouse button. A rectangle element displays on the canvas Rounding the Corners of a Rectangle Element You have a graphic open and have selected a rectangle element on the canvas. To round the corner angles of a rectangle, click on the element s yellow corner control handles and drag until the proper curvature is reached. All four angles of the rectangle element are adjusted simultaneously and the values of the Radius X and Radius Y properties are adjusted Modifying the Rectangle Properties You are in Design or Test mode, and have an existing rectangle on the canvas you want to modify. 1. Select the existing rectangle you want to change. 2. Navigate to the Properties view (Rectangle Properties) 3. In addition to the Rectangle properties, Radius X and Radius Y, all the other properties associated with the selected element display. 4. Make the necessary adjustments and selections to set the properties for the rectangle. 5. From the Graphics Editor toolbar or File menu, click Save The graphic is saved with the modified rectangle element settings Import Raster Image Element The import image element allows you to insert any of the following graphic file types onto the canvas: BMP JPG TIFF, TIF PNG Once an image file is inserted onto the canvas, the following properties of the image can be modified: Position Size 170

171 Overview of Graphics Editor Working with Element Types 5 Rotation Background color Clip TIP You can also import images directly via the clipboard. For example, a screen capture obtained by using the keyboard key, PRINT SCREEN, can be inserted on the canvas using the Paste Image elements can be stretched and clipped Working with Imported Images Importing Raster Image Files You are in Design or Test mode and have a graphic open. 1. On the Home tab, from the Elements group, click. The Open dialog box displays. 2. Navigate to and click on the image file to insert, and then click Open. The dialog box closes and the image displays in the top left corner of the canvas. 3. With the image selected on the canvas, navigate to the Properties view, and adjust the Image properties as necessary. NOTE: The performance of a graphic may be severely impacted if it contains one or more raster images with active values in the Rotation Speed property of the Layout group property. Raster images supported by the Graphics Editor include: BMP, JPG, GIF, TIF, TIFF, and PNG Importing XAML, XPS, and DWF Files You are in Design or Test mode, a graphic is open on the canvas, and you would like to insert a XAML, XPS, or DWF file into the graphic. 1. On the Home tab, from the Elements group, click. 2. From the Open dialog box, select the file you want to import. 3. Select Open. The file is imported to the active graphic and placed in the upper left-hand corner of the canvas. 4. Navigate to the Properties view and adjust the property settings as needed. 171

172 5 Overview of Graphics Editor Formatting Elements 5.15 Formatting Elements About Formatting Text Text elements are drawing elements that allow you to add alpha-numeric text to a graphic, or add a translatable text label. Line breaks (CTRL+ENTER) and tabbing (TAB key) are supported within a text element. You can apply formatting to the text elements from the Home tab, using the Format group options. Advanced text formatting and settings can be applied via the Properties view. Font Family and Size You can easily apply a font and font size to your text element from the Format group. Vertical and Horizontal Text Alignment You can determine how the actual text is aligned or set in the element s bounding rectangle. You can adjust the vertical and the horizontal alignment of text. These selections are available via the Format group. Standard Formatting Standard formatting such as bolding, italicizing, underlining, and applying strikethrough are quickly done from the Format group on the ribbon. You can apply one or more of these options to the content; however, when selected, the formatting is applied to the entire block of text in the element. You cannot select individual letters or numbers for formatting. Wrapping and Trimming Text The wrapping and trimming properties are set in the Properties view. These properties allow you to work with how the text displays within the viewable bounding rectangle. The Trimming property allows you to set text that is outside of the view of the bounding rectangle to either display the last viewable item a character, Character Ellipsis, or to allow you to see the last visible word within the elements bounding rectangle, Word Ellipses. The wrapping property allows you to apply wrapping to the content of the text element, so that the entire content is visible within the bounding rectangle. There are three options to choose for this property. No Wrap -The text will continue on the same line, without regard for the bounding rectangle. If the text exceeds the viewable boundaries of the element, horizontal scrollbars display allowing you to scroll through the text. This is the default wrapping property. Wrap This option automatically wraps the text within the bounding rectangles. The text wraps as soon as the first character exceeds the boundary. Wrap with Overflow This option does not separate words, but rather wraps the word to the next line if it exceeds the boundary. When the Auto Size property is set to size according to width or height, the Wrap with Overflow property is overridden and the wrapping property is ignored. Working with Short, Long, and Alias Text Type References The Short, Long, and Alias Text Type options allow you to add dynamic data point references to a graphic. A dynamic reference is basically the name and\or description of the data point displayed according to the format selected in the System Browser Display Mode list box. The Alias is also taken from the data point reference information. A data point will always have a name and a description associated with it. However, a data point only has an Alias if it was configured that way. 172

173 Overview of Graphics Editor Formatting Elements 5 If you have selected one of the text types, you must then drag-and-drop the data point over the Expression field in the Evaluation Editor and enclose the path in double-quotes ("") so that the path is evaluated as a string (text) and not as an object (monitored value). Displaying the data point reference is slightly different from displaying the data point value: - Invalid references (e.g. non existing data points) will show #FORMAT instead of #COM - Changing the display options in the System Browser automatically updates the references of all text elements. Any other animation also updates the text elements. Working with Text Tables and Translated Text Labels Text elements can be configured to display language-specific text from an existing text group. The language of the text displayed is then dependant on the current Desigo CC language setting, as long as the referenced text group offers a text option for the current language setting. For example, en-us (English All). When the software s language setting is changed by a user, the text displayed on the graphic--the text element label--also changes to match the new language setting. The two text element properties that must be configured for this feature are the Text and Text Type properties. To reference text from a text group,, create a text element on the canvas and from the Text Type property, manually select the Translated Text option, and then type the text group object name and value associated with the targeted text into the Text property field. The syntax for entering a text group object name and specifying a value from the text group is: [TextGroupObjectName].[Value]. The two components are separated by a.. For example, [TxG_Action.55]. The en-us textual reference for the value 55 in this text group is, Change of Password. See example below. Working with Numbers: Precision, Decimal Offset, and Units Text elements that contain numbers (for example, values of data points), can use the three Text properties that are specifically intended for formatting numbers. The Precision property, allows you to specifically set the maximum number of digits allowed for numeric data types. The higher the precision value entered, the more decimal places display. Negative precision rounds the value to the left of the decimal to the nearest to the nearest default precision is set to 2. This property shows 0 for non-numeric data types. With the Decimal Offset property, you can vertically align numbers by decimal point. The property is set by entering a value that specifies the distance in pixels from the elements X position to the decimal 173

174 5 Overview of Graphics Editor Formatting Elements delimiter position. The default value is set to empty or zero; the decimal delimiter is at the elements X coordinate. The Unit property, is optional, and allows you to specify an engineering unit to append to the value. If the property is left empty, the units of the last data point in the text expression are used. Resizing Fonts The Graphics Editor provides several methods to resize text contained in the text element. Once you have selected a font size for the text the options for resizing are as follows: Increase Font size and Decrease Font Size Buttons -- (Format group only). These buttons allow you to automatically increase or decrease the font size of the active element by one point with each click of the mouse. Resize Fonts Button -- (Format group only). If this button is enabled, you can set the content of the text element to maintain the aspect ratio whenever the size of the text element changes. This means if the element is enlarged, the text content will increase to the actual size of the element proportionately. Auto Size Property (Properties View only). This property allows you to resize the content of the text element to adjust according to Height or Width. The default setting is not set to resize. When this property is enabled, it overrides the wrapping property About Stroke Stroke describes the formatting applied to a drawing element s lines or borders. You can apply a number of different strokes to an element depending on what kind of lines or elements you are working with. Measurement for the stroke width, dashes, and spacing is usually measured in pixels. Most of the stroke formatting properties can be applied from the Stroke group or, through the Properties view, under the Stroke property. The Arrow Start and End shapes are configured in the Properties view only. Stroke Array A stroke array is a collection of values that determines whether or not an element s stroke is a solid line, or consists of a pattern of dashes and gaps. From the Stroke group, on the Home tab, you can select from a list of pre-defined arrays, or, if you navigate to the Properties view, you can enter the values in the Stroke Array property to create a pattern of dashes and gaps for your array. The first value entered determines the size of the dash measured in pixels, and the second value determines the distance of the gap between dashes. You can continue to add values for the alternating dash and gaps values. Whatever pattern is entered in the stroke array field is then repeated until the end of the stroke length. If you only have one value, this creates a dash and gap of equal length. Stroke Thickness You can set the width of the selected stroke. The width is measured in pixels and must have a value of zero or higher. The default stroke width for all drawing elements is set to one. Stroke Start and End Lines and Stroke Dash Cap The stroke start and end properties, and stroke dash cap properties all allow you to set the shape at the start and end of a line, segment, or dash--depending on the stroke array. For both lines and dashes, there are four shapes to choose from. The default shape is set to flat. You can choose from one of four shapes to apply to the start, end, and cap of a line, dash, or segment: Flat A shape or cap that does not extend past the last point of the line. This is the default shape for all stroke start, end, and dash cap properties. 174

175 Overview of Graphics Editor Formatting Elements 5 Square A rectangle shape that has a height equal to the line thickness and a length equal to half the line thickness. Round A semi-circle shape that has a diameter equal to the line thickness. Triangle An isosceles right triangle, whose base length is equal to the thickness of the line. Stroke Line Join You can determine how elements that have lines with corner joins meet. There are three join options to choose from: Miter Angular vertices, two 45 degree angles that create a 90 degree angle. The result is a pointed corner. This is the default join shape for elements with corner joins. Bevel -- The corners are flattened. Round The corners are rounded. Arrow Start and End Shape You can create a line that has an arrowhead at the start, end, or both ends, of a line. To configure a line with an arrowhead you use the Arrow Start and Arrow End Shape properties from the Properties view, Stroke group. These properties are not available from the ribbon s Stroke group Working with the Format Group Resizing Text Element Fonts Automatically You are in Design or Test mode, and have a graphic containing one or more text elements. You would like the text size to update relative to the bounding rectangle. This means, when you shrink or expand the element, the text will adjust according to size and display. From the Home tab, the Format group, click Resize Font. The icon background color turns orange. The text font size increases and decreases relative to the text element s bounding rectangle Formatting a Text Element Using the Format Group You are in Test or Design mode, and have a graphic containing one or more text elements. 1. Click on the text or text elements you want to apply the formatting to. The selected elements are active on the canvas. 2. On the Home tab, from the Format group, select a font from the Font Family drop-down menu, and select the size from the Font Size drop-down menu. The font family and style are applied to the text element(s). 3. (Optional) Apply one or more formatting options to the text by clicking on each of the following formats needed: Bold, Italic, Underline, or Strikethrough. 4. The selected formatting is applied to the text element(s). 5. (Optional) Select the appropriate alignment of your text, the text element. 175

176 5 Overview of Graphics Editor The Element Tree and Layers Horizontal Alignment - Select a horizontal placement of the text within the bounding rectangle. Options are: Left, Center, Right, or Justified. Vertical Alignment Select a vertical placement of the text within the bounding rectangle. Options are: Top, Center, or Bottom. The text element(s) are aligned within the bounding rectangles The Element Tree and Layers Element Tree View The Element Tree view allows you to work with a selected depth and layers to create complex graphics that represent your site or building facility. The Element Tree displays all the layers and associated drawing elements of the selected graphic or Symbol and also allows you to add or delete layers from the active graphic. Elements within a layer can be ordered using the positioning arrows at the bottom of the Element Tree view. Within the Element Tree you can also decide which layers, depths, or elements to display in Runtime or Design mode. Creating, Inserting, and Merging Layers You can create, name, rename, and delete layers in the Element Tree view, as well as insert one or more layers at a time. Each time you create a new depth, a new layer is created and associated with the new depth. Multiple layers can also be merged, resulting in a target layer absorbing all the elements in the order of the selected layers. The order of selection is used to determine the z-order of the merged graphic elements. Elements of the first selected layer have a lower z-order than elements from a later selected layer. Filtering and Sorting Layers The list of layers associated with the graphic can be sorted and filtered in the Element Tree view by name or by z-order. You can use the navigational arrows at the bottom of the Element Tree view to establish the z-order of layers. Viewing and Visibility of Layers The Element Tree view provides you with several options for viewing and previewing a graphics layers on the open canvas. When the Visible icon is checked, the layer is visible in Design, Test, and Runtime mode. If not checked, the layer is not visible on the canvas in any mode. This is useful if you want to isolate one or more layers on the canvas without viewing all the layers in the graphic. The Use check box determines the use of a layer in Runtime mode. If checked, the layer is active and visible in Runtime mode. If unchecked, the layer displays in both Design and Test mode, but not in Runtime mode. If you want to temporarily preview each layer, you can select the Hover check box and move your mouse over a layer to reveal the layer and its associated elements on the open canvas. Locking Layers You can lock all the elements of a layer by selecting the Lock icon. However, a locked layer does not allow you to select any graphic elements. 176

177 Overview of Graphics Editor The Element Tree and Layers 5 Displaying Elements The Element Tree allows you to either show or hide all the elements associated with the layer(s), using the Show All Elements icon Element Tree View The Element Tree displays all the layers and associated drawing elements of the selected graphic or symbol and also allows you to add or delete layers from the active graphic. Elements within a layer can be ordered using the positioning arrows at the bottom of the view. Within the Element Tree you can also decide which layers, depths, or elements to display in Runtime or Design mode. Element Tree Field Selected Depth Default Layer Type to Filter Name Use Visible Description Select a depth whose layers and elements will display on the canvas. The depth of the top most layer in the graphic is selected by default. Select which layer is active on the canvas. Any newly created elements will appear on the default layer. Display layers, elements, and depths by the text entered. Display the name of the layer, element, or group associated with the active graphic. You can enter and modify text in the name field. The following information may be included: type, description, and text preview depending on how it was set up in the Property View. If checked, the layer s visibility is extended to Runtime mode and the Graphics Viewer. If unchecked, the layer is only visible in the Graphics Editor. If checked, the layer is visible in any of the Graphic Editor s modes. If unchecked, the layer or element is not visible in any of the modes. 177

178 5 Overview of Graphics Editor The Element Tree and Layers NOTE: This check box has no bearing on what is visible in the Graphics Viewer. Lock Hover Mode Show All Lock an element so that it can t be selected or edited. Click on a layer or element from a layer and only see the associated content associated with that layer. Display all associated elements with the graphic. Elements Position New Layer Merge Layer Delete Change the element position in the display order. You can move an element to the top of the list, up a level at a time, down a level at a time, or to the bottom. Create and insert a new layer in the active graphic and display it in the Element Tree. Merge multiple selected layers into a single layer. The last layer selected absorbs the merged and their elements. Delete the selected item from the Element Tree Element Tree Icons Icon Description Expander Layer Group Drawing Element XAML Element Working with the Element Tree View Displaying Elements in the Element Tree You can select to display all the elements on your graphic in the Element Tree, or you can hide them from view, if you just want to see the layers of your graphics. 1. Navigate to the Element Tree view. 2. To display elements in the Element Tree view, click Show All Elements. The icon background changes to orange and the elements display in the Element Tree under their associated layers. To hide the elements, click the Show All Elements icon again. The icon background changes back to its default color, and the elements are not visible in the Element Tree. 178

179 Overview of Graphics Editor The Element Tree and Layers Deleting Elements from the Element Tree An element can be deleted from the Element Tree, unless it is the last remaining layer in the tree or it, and any of its child elements are locked. You have a graphic open in Design or Test mode to which you want to add a layer. 1. Expand the Element Tree View. 2. Within the view, select and right-click on the element you want to delete, and then select Delete. The element is deleted from the Element Tree and the active canvas Selecting Multiple Layers You can select several layers at one time using keyboard and mouse functions. Clicking the visible check box of one of the selected layers will make all selected layers visible or invisible. You have a graphic with multiple layers open in Design Mode. Do one of the following: Select Several layers by pressing CTRL or using the shift mouse click operations. Select All Layers by pressing CTRL+A. The selected layer rows are then displayed with a blue background. You can now apply another command to the selected layers. For example, selecting Delete, or clicking the visible check box of one of the selected layers will make all selected layers visible or invisible Using the Hover Mode You have a graphic with multiple layers open in Design or Test mode and you wish to see the contents of one layer only. 1. Click on the Hover Mode icon. Hover Mode is active and the icon background color changes to orange. 2. Move your mouse over the layer you want to view. Only the contents associated with that layer are now visible on the canvas. 3. To view a particular element of a layer, hover over the targeted element. All the elements of that layer are displayed and the selected element is surrounded by a purple rectangle. 4. To exit this mode, click on the active Hover Mode icon in the Element Tree. The Hover Mode is inactive and the icon is no longer highlighted. 179

180 5 Overview of Graphics Editor The Element Tree and Layers About Layers Layers are the building blocks of large graphics representing equipment, floors, buildings, facilities and entire campuses. Each layer of a graphic represents a grouping of graphical elements or system objects and has a unique name. Layers are combined and organized in different ways to create all the required views at a page level. Each time you create a new graphic, a default layer is automatically generated and displays in the Element Tree view. When you select a layer from the Element Tree, the layer properties also display in the Properties view. Anytime you add or import an element or image, you are adding it to the active layer. Additionally, every time you create a new layer, it is automatically added to the Depth view, as a column entry that can be associated with a specific depth. Grouping Layers To add more complexity to a graphic representing a facility, equipment, building for example, you can add further detail by also associating a grouping of layers with a depth. Alarm Category and Discipline Properties Layers can be assigned to an alarm category and also associated to pre-defined disciplines. This facilitates dynamic filtering of layers when a graphic is viewed in the Graphics Viewer. If you do not want to assign a layer to a discipline, you can select the "Any" option, and the layer always displays. The discipline for a layer is assigned in the Properties View, under the Layer properties. Layer Visibility Range Layers can have a visibility range so that they are only visible within a specific zoom factor range. As you zoom in or out, the layer will become visible depending on the current zoom factor. Semi-Transparent Layers Each layer can have a background color associated with it. The color of the background is chosen using the Background property of the Colors category. If a semi-transparent color is used, the elements on the layer are visible. If a nontransparent color is used, the elements on the layer are not visible. 180

181 Overview of Graphics Editor The Element Tree and Layers Working with Layers Adding a Layer When you create a graphic for the first time, a default layer is automatically created and displayed in the Element Tree view. Any elements deposited onto this layer are listed under the layer. To add more layers to a graphic, do the following: You have a graphic open and are in Design or Test mode. 1. From the Element Tree, click the New Layer icon. A new layer is created on the active graphic and added to the list of displayed layers in the Element Tree view in the order that it was created. 2. Set the following parameters for the layer: Use When checked, the layer will be visible in Runtime mode. Visible When checked, the layer will be visible in Design and Runtime mode. Lock When checked, the layer and all its associated elements are locked and no editing allowed in Design Mode. This check box has no effect on Runtime mode. 3. To associate a Discipline with the layer, make sure the layer is selected in the Element Tree view, and navigate to the Properties view and expand the Layer tab. The Layer properties for the active layer display. For a description of the properties, see the Layer [ 263] topic for more information. 4. Adjust the layer settings and parameters accordingly. You can now save the graphic Labeling a Layer Each layer in a graphic can have a unique label or name. Once created, the layer name will display in parenthesis next the object label, Layer. 1. Navigate to the Element Tree view. 2. In the Name section, click on the Layer you want to name or rename. The Layer Properties display in the Properties view. 3. In the Layer Properties view, navigate to the General property. 4. Click on the Description property and type the desired name for the layer. When you are done typing the name, with the mouse, click anywhere outside the field to save the change. In the Element Tree view, you can now see the layer name in parenthesis Deleting a Layer You have a graphic open and want to delete a delete a layer from the graphic. 1. In the Element Tree view, navigate to and click on the layer you want to delete. 2. Click on the Delete Selection icon. 181

182 5 Overview of Graphics Editor The Element Tree and Layers The selected layer is deleted from the Element Tree list and from the active graphic. Any elements that on the layer, are also deleted Dynamically Activating a Layer You can animate the visible property of a foreground layer by defining an object reference in the Evaluation field of the layer. NOTE: It is recommended that you only associate a foreground layer with a system object. A system object residing in a specific layer must always be associated with one depth. You have created a foreground layer and it is selected in the Elements Tree view. 1. Navigate to the Evaluations Editor view. 2. Select the Under the Layout properties, type the name of the system object you want to associate with the layer in the Evaluations field. The foreground layer is now associated with the system object and the visibility of the layer is determined by the objects current value in the Runtime and Test modes, and the Graphics Viewer Merging Layers You have a graphic open with multiple layers. 1. In the Element Tree view, press the CTRL key on the keyboard, and with your mouse, select each layer you want to merge. The entire Element View menu bar is active. 2. Click on the Merge Layer icon. The selected layers are now are now combined and merged into one layer. 182

183 Overview of Graphics Editor Working with the Brush View and Brushes Group Selecting Multi-Layers Several layers can be simultaneously selected with CTRL or Shift mouse click operations. All layers can be selected by pressing CTRL+A. The selected layer rows are then displayed with a blue background. Most of the above functions, such as delete, also work on multi selected layers, or clicking the visible check box of one of the selected layers will make all selected layers visible or invisible Working with the Brush View and Brushes Group Brush View and Brushes Group Overview Brush view one of many views available in the Graphics Editor allows you to modify your drawing elements with options such as colors, gradients, light angles, and other special effects to achieve a truly custom look. The Brushes group, found on the Home tab, is another way you can quickly apply fill, stroke, or background color to an element on the canvas. Color, Brush, CompoundBrush Most element properties are of type CompoundBrush but some are also just Brush or even Color, so it might be useful to understand the three different types: A Color is a simple solid color, represented with an ARGB value, for example, Blue or Pink. Or, a reference to a state text color defined in a Text Group using the following syntax: [TextGroupName].[Value]. A Brush is either a solid color brush or a gradient brush (linear or radial). The string representation can contain many ARGB values and control characters. A CompoundBrush represents a blinking brush and consists of two brushes, the main brush and the blink brush. Fills and Strokes The most common uses of the Brush view revolve around the fill and stroke functions. Fill refers to the process of coloring or shading the area inside of a geometric shape, whereas stroke refers to the font color or the line that serves as the path or border of the drawing element. You can apply a fill or a stroke to a drawing element by using any of the sixteen base colors, by either specifying a custom color from the ARGB using slider controls, by manually entering a hexadecimal color code, or by entering the name of a color from the list of HTML Literal Word Colors [ 272], for example, Blue. If you see a color anywhere on the monitor screen that you would like to apply to your drawing elements, you can use the color eyedropper to capture it instead of trying to determine the color s custom color through the slider controls. Finally, you can use the HSV palette to specify the hue, saturation, and light value of the color to fine-tune your selection. Additional Color Controls Additional color controls allow you to select the background color of a drawing element, apply a solid color to a drawing element, or specify a 2-state color that blinks alternately between the two colors you choose. The compound brushes in the Brush Editor, allow you to select a color for the on state of the blink, and the off state of the blink. Whereas, the Blink property, in the Property view of the selected element, affects the overall visibility of the entire element on the canvas. 183

184 5 Overview of Graphics Editor Working with the Brush View and Brushes Group Linear and Radial Gradients Linear and radial gradients allow you to gradually blend colors together. Radial gradients blend colors while radiating or branching out in all directions from a common, specified center, while linear gradients blend colors along a straight path. Brush view provides predefined gradient Stops in the form of drop-down menus that allow you to move your mouse over them to see what your element will look like before you actually select the stop. You can also specify a gradient fill by using the Gradient View Bar or by entering values into the Direct Radial or Direct Linear Gradient Control fields. You can achieve additional special effects with a gradient fill by employing the Mapping Mode options (Padded, Reflect, or Repeat), the Adorners options, and the Angle Control option which allows you to choose the angle of the light for a gradient fill. Copy and Paste The copy and paste functions allow you to copy the content of one element and paste it into one or more selected elements. This can save you time and effort when you have multiple graphical elements that all need the same look State Color Overview In addition to selecting and modifying element color properties with the Brush Editor and the Brushes group, you can also determine color by using references to existing Text Group tables that among other definitions (icon and text) have state colors defined for a data point s property, depending on its Value. These state settings are created in the Text Group Editor. Each Text Group is stored in the Management View > Libraries under the associated library. For example, if you open the Text Group, HVAC_Alarm_01 in the Text Group Editor, you see that it has two states defined, Normal and Alarm. Each state has the Value associated with it, as well as the assigned Color and an Icon. Referencing Color in Text Group Tables: There are two methods you can use in the Graphics Editor to reference the Text Group tables Color and Value information: Entering the correct syntax to reference the information from the Text Group, or, drag the Text Group object from the appropriate Library in System Browser and drop it into the supported field in the Graphics Editor. The syntax to manually reference state colors in a Text Group, is: TxG_[TextGroupName].[Value] For example, using the Text Group HVAC_Alarm_01 as an example, we can add the following references to element properties: TxG_HVAC_Alarm_01.1 = This references the Normal state (see above) which is represented by the Color green. TxG_HVAC_Alarm_01.2 = This references the Alarm state, which is represented by the Color red. Please note, that the Object Name of the Text Group table may not be the name you see in System Browser. Always use the Object Name, which prefaces the Text Group with TxG_ 184

185 Overview of Graphics Editor Working with the Brush View and Brushes Group 5 Supported Properties and Fields Most element color properties in the Graphics Editor support the state color references. Below is a list of areas that support manual or drag-and-drop references to state colors. Element Properties Fill Stroke Background Graphic Properties Background color Grid and Guideline colors Blinking supported Expressions and Substitutions in the Evaluation Editor Value field Expression Field Use double quotes when entering Text Group reference. Conditions in the Evaluation Editor Brush Editor View The Brush Editor view allows you to modify your graphical elements with brush options such as color, gradient, and light angles. The top portion of the Brush Editor view enables you to make your brush and color selections. When you choose either the Linear or Radial brush options, additional settings choices are enabled at the bottom of the Brush Editor view. 185

186 5 Overview of Graphics Editor Working with the Brush View and Brushes Group General Settings Brush Editor View Item Description Brush Editor Top 1 Base Color Palette Display the sixteen base colors for graphics you can choose from. 2 Brush Bar Select from the available brush types and tools available for working with the Selected elements, canvas, and work area. Also allows the user to select linear and radial gradient fill options, copy and paste features, and revert to the last brush. Fill Brush Set the color apply to the Fill (interior) property of the selected element(s). Stroke Brush Set the color that is applied to the Stroke property or the font color of the selected element(s). Background Brush Set the color that is applied to the Background property of the selected element on the canvas. Miscellaneous Color Brush Indicate a brush, other than the ones available from the Brush Bar, is currently active on the element. For example, when setting the shadow color of a property, etc. NOTE: The Miscellaneous Color Brush icon only displays on the Brush Editor when it is active, otherwise, it does not display on the Setting bar. Toggle Blinking Brush Split the Main Brush into two panes. When the Toggle Blinking brush is selected, the Main Brush is split in two, and two colors can be applied to the brush; one in each pane of the now split Main Brush. In Test or Runtime mode the element will toggle between the two state colors applied. NOTE: Do not confuse this with the Blinking property check box of the Layout group in the Properties view, which, when enabled allows the associated element to blink (toggle between visible and non-visible) on the graphic canvas. Main Brush The main brush reflects the current color(s) and brush settings applied to the 186

187 Overview of Graphics Editor Working with the Brush View and Brushes Group 5 selected element(s) on the canvas. Main Brush and Blink Brush When the Toggle Blinking Brush is selected, the Main Brush icon splits into two panes and displays the main brush color and then the blink brush color. Solid Color Brush Apply a single solid color without any blending, etc. Linear Gradient Brush Blend colors along a straight path. Radial Gradient: Brush Blend colors while radiating or branching out in all directions from a common, specified center. No Brush Remove any brushes applied to the element when selected. NOTE: Shapes without a fill brush are not selectable and do not show tooltips within the shape. Copy Brush Copy any brush applications from the selected element to the clipboard. Paste Brush Paste any brush applications from an element currently saved to the Copy Brush clipboard. Revert Back Re-apply the previous brush applications to the Main brush and the selected element. 3 Hue, Saturation, and Value (HSV) Palette Move the mouse over a spectrum of color, ranging in saturation. When the mouse is moved, the current hue is also reflected on the RGBA sliders, the Main brush, and the selected element on the canvas. The hexadecimal value is also updated. 4 Hue Slider Move the slider up and down the hue color spectrum to select a color. When the Hue slider is moved, the current hue is also reflected on the RGBA sliders, The HSV palette, the Main brush, and the selected element on the canvas. The hexadecimal value is also updated. 5 RGBA Sliders Adjust the opacity of your graphical elements and select custom colors from the RGBA Hue slider controls, or by entering a hexadecimal color code, or by entering the name of a color from the table of HTML Literal Word Colors [ 272]. The sliders have dynamically changing backgrounds showing the current color selection as they change. 6 Color Eyedropper Move your cursor over a color and brush content and copy it to the selected element. As the eyedropper is moved around, the current color or brush hovered over is previewed on the current element and the Brush Editor view color tools are updated as well. 7 Current Color and Initial Color Initial Color Displays the current color on the left, and the initial (previous) color selected. 187

188 5 Overview of Graphics Editor Working with the Brush View and Brushes Group Gradient Option Settings Brush Editor View Brush Editor View Gradient Options 8 Spread Mode Options Select padded, reflect, or repeat for a variety of visual gradient effects. 9 Gradient Options Select from common predefined gradient definitions or you can select the Custom option, and use the gradient stops. 10 Gradient Slide Bar Set the definition for linear and radial gradients using the gradient stops. 11 Gradient Stops Set the colors in the gradient by clicking on the gradient slide bar and selecting a color from the palette for the stop. 12 Angle Control Selector Select the angle of light for a linear and radial gradient. 13a 13b Linear Gradient Control Enter explicit values to define the linear gradient Start and End positions. Radial Gradient Control Enter explicit values to define the radial gradient Center, Origin, Radius X, and Radius Y positions. 14 Adorners Option Apply and control visual effects using gradient spread and vector position. 15 Absolute Option Define a coordinate system not relative to a bounding box. The values you enter are interpreted directly in local space. 188

189 Overview of Graphics Editor Working with the Brush View and Brushes Group Brush Editor View Tasks Applying Background Color Using the Brush Editor View You are in Design or Test mode and have a graphic open. 1. Select the drawing element or elements you want to apply background color. 2. Navigate to the Brush Editor view. 3. From the Brush bar at the top of the Brush view, click Background. 4. From the Base Color chart, select the color you want to use as a fill. The background color is applied to the drawing element s background. If this is the first color applied to the element, then the entire drawing element has the background applied to it, until a fill or stroke color is applied Applying Fills using the Brush Editor View You are in Design or Test mode and have a graphic open. 1. Select the drawing element or elements you want to fill. 2. Navigate to the Brush Editor view. 3. From the Brush bar at the top of the Brush view, click Fill. 4. From the Base Color chart, select the color you want to use as a fill. The fill is applied to the drawing element Applying Linear Gradients You are in Design or Test mode and have a graphic open. 1. Select the drawing element or elements you want a linear gradient applied to. 2. Navigate to the Brush Editor view. 3. From the Brush bar at the top of the Brush Editor view, click Linear Gradient. The options for linear gradients displays. 4. Select the options you want for your element or elements. The options for linear gradients displays, allowing you to edit the element as needed. 5. To set the gradient style, do one of the following: From the Pre-defined drop-down menu, select a gradient definition. From the Gradient slider, click and drag the gradient stops until the desired setting is achieved. To add more gradient stops, click on the gradient slider. A new stop is created. To remove a stop, simply click on the stop and drag it away from the slider. 6. To select a spread option, select a mode from the spread mode drop-down menu. 189

190 5 Overview of Graphics Editor Working with the Brush View and Brushes Group 7. By default the Start and End light source parameters are set so that they are relative to the element size. To maintain the position of the light source, regardless off the element size, click the Absolute check box. 8. To define the vector Start and End points of the light, choose from one of the following methods: Enter values directly in the associated fields. Click the Adorners check box to visually enable the adorners, consisting of a centered line with a blue Start handle, a white Middle handle, and a red End handle. Click and move the points to the appropriate positions Applying Radial Gradients You are in Design or Test mode and have a graphic open. Any options you set for the selected element are optional and are applied as the selections are made. 1. Select the drawing element or elements you want a radial gradient applied to. 2. Navigate to the Brush Editor view. 3. From the Settings bar at the top of the Brush Editor view, click Radial Gradient. The options for radial gradients displays, allowing you to edit the element as needed. 4. To set the gradient style, do one of the following: From the Pre-defined drop-down menu, select a gradient definition. From the Gradient slider, click and drag the gradient stops until the desired setting is achieved. To add more gradient stops, click anywhere in the Brush Editor view and then click on the gradient slider. A new stop is created. To remove a stop, simply click on the stop and drag it away from the slider. 5. To select a spread mode option, select a mode from the Spread Mode dropdown menu. 6. By default the light source parameters are set so that it is relative to the element size. To maintain the position of the light source, regardless off the element size, click the Absolute check box. 7. To define the Center, Origin, Radius X, and Radius Y parameters, choose from one of the following methods: Enter values directly in the associated fields. Click the Adorners checkbox to visually enable the adorners, consisting of the center point (icon), the origin, and the Radius X and Radius Y lines. Click and move each item around as needed to set the angle of the light source on the element Applying a Stroke Using the Brush Editor You are in Design or Test mode and have a graphic open. 1. Select the drawing element or elements you want to apply a stroke to. 2. Navigate to the Brush Editor view. 190

191 Overview of Graphics Editor Working with the Brush View and Brushes Group 5 3. From the Brush bar at the top of the Brush Editor view, click Stroke. The stroke is applied to the drawing element Copying and Pasting a Brush You are in Design or Test mode and have a graphic open. 1. Select the drawing element from where you want to copy the brush. 2. Navigate to the Brush Editor view. 3. From the Brush bar at the bottom of the Brush Editor view, click Copy Brush. 4. Select the drawing element or elements you want to paste the brush to. 5. From the Brush bar, click Paste brush. The brush is applied to the drawing element Applying the Toggle-Blinking Brush You are in Design or Test mode and have a graphic open. Any Brush Editor options you set for the selected element are optional and are applied as the selections are made. NOTE: Do not confuse this with the Blinking property check box of the Layout group, which when enabled allows the associated element to blink (toggle between visible and non-visible) on the graphic canvas. 1. Select the drawing element or elements you want to apply a blinking color to. 2. Navigate to the Brush Editor view. 3. From the Brush bar at the top of the Brush Editor view, click Fill, Stroke, or Background. 4. Select the Toggle Blinking icon. The main brush splits into a compound brush - the first half is the Main Brush, and the second half, yellow by default, is the Blink Brush. 5. From the Base Color chart, select a color you want to use for the Blink Brush. The Blink Brush color changes to the selected color. In Test or Runtime mode the element will toggle between the two colors applied to the main and blink brush Setting HSV You want to change an element s fill, stroke, or background color, you are in Design or Test mode, and you have a graphic open. 1. Select the drawing element you want to set HSV for a fill or stroke of an element. 2. Select the Brush Editor view. 191

192 5 Overview of Graphics Editor Working with the Brush View and Brushes Group 3. From the Brush bar, select the appropriate brush to apply to the element. The Brush Editor view color features are enabled and display. If you select the No Brush icon, the color palette does not display in the view. 4. Do one of the following: Click Fill. Click Stroke. Click Background. 5. Move the mouse pointer to the HSV palette. The pointer changes to display a crosshairs pointer. 6. Move the crosshairs pointer to the location on the HSV palette that has the color you want and Click on that location. The fill, stroke, or background changes Using the Color Eyedropper You are in Design or Test mode and have a graphic open. 1. Select the drawing element or elements you want to fill. 2. Expand the Brush Editor view. 3. Click-and-drag the Eyedropper icon and do one of the following: As you drag the eyedropper, it picks up the color of whatever you are moving your cursor over and the selected element on the canvas reflects the same updated color. Drag the eyedropper over a color property from the Brush Editor view, Base Color chart, select the color you want to use as a fill. 4. Release the Eyedropper when the selected element is the desired color Brushes Group Tasks Applying Fills Using the Brushes Group You are in Design or Test mode and have a graphic open. 1. Select the drawing element or elements you want to fill. 2. On the Home tab, from the Brushes group, click on the drop-down menu next to the Fill icon The Base Color chart displays. 3. Select the color you want to use as a fill. The fill is applied to the drawing element. NOTE: For more color and brush options, right-click on the brush group icon to display the Brush Editor view. From the Brush Editor view, you can also set or adjust the color, using one of the following methods: 192

193 Overview of Graphics Editor Working with the Brush View and Brushes Group 5 The RGBA sliders in the Brush Editor view. A hexadecimal color code or a name, for example, Green in the # field to set the transparency, red, green, and blue values of the color you want to use as a fill. The Color Eyedropper tool; and then move the eyedropper to the location on your monitor screen that has the color you want to use as a fill. Release the mouse button Applying Stroke Using the Brushes Group You are in Design or Test mode and have a graphic open. 1. Select the drawing element or elements you want to apply stroke. 2. On the Home tab, from the Brushes group, click on the drop-down menu next to the Stroke icon The Base Color chart displays. 3. Select the color you want to use as a stroke. The stroke is applied to the drawing element. NOTE: For more color and brush options, right-click on the brush group icon to display the Brush Editor view. From the Brush Editor view, you can also set or adjust the color, using one of the following methods: The RGBA sliders in the Brush Editor view. A hexadecimal color code or a name, for example, Green in the # field to set the transparency, red, green, and blue values of the color you want to use as a fill. The Color Eyedropper tool; and then move the eyedropper to the location on your monitor screen that has the color you want to use as a fill. Release the mouse button Applying Background Color Using the Brushes Group You are in Design or Test mode and have a graphic open. 1. Select the drawing element or elements to which you want to apply background color. 2. On the Home tab, from the Brushes group, click on the drop-down menu next to the Background icon. The Base Color chart displays. 3. Select the color you want to use as the background color. The background color is applied to the drawing element s background. If the element has not other color applied to it, then, the entire drawing element will have the background applied to it, until you apply a fill or stroke color. NOTE: For more color and brush options, right-click on the brush group icon to display the Brush Editor view. From the Brush Editor view, you can also set or adjust the color, using one of the following methods: The RGBA sliders in the Brush Editor view. A hexadecimal color code or a name, for example, Green in the # field to set the transparency, red, green, and blue values of the color you want to use as a fill. 193

194 5 Overview of Graphics Editor About Evaluations and Element Properties The Color Eyedropper tool; and then move the eyedropper to the location on your monitor screen that has the color you want to use as a fill. Release the mouse button About Evaluations and Element Properties About Property Evaluations Evaluations are expressions and conditions applied to element or Symbol property values to determine how an element or Symbol behaves in a graphic. Property evaluations are the basis for creating animated graphics that automatically update to show a graphical representation of real time conditions of your system or facility. Evaluation Types There are five types of evaluations you can apply to an expression: Simple, Linear, Discrete, Animated, and Multi. The type of animation or condition(s) required for your graphic will determine which evaluation type to use. Evaluations and expressions are configured in the Evaluation Editor view. Expressions The expression can be either a direct reference to a data point name or a literal (of type Boolean, number or string). An expression consists of a data point reference or value followed by an optional operator with another data point or value. The result of an evaluation to a property value, for example, can determine which image or Symbol instance to display or what color to apply to an element depending on the value of a property. Every property evaluation stems from the result of an expression that is used to determine how an image displays according to property values, expressions, and conditions. Expressions consist of a data point reference, for example, an object name or value followed by an optional operator with a second data point or value. This allows you to have simple comparisons or calculations as well as use constant literals. There are four types of Expressions you can enter: Reference Function Object Model Script Syntax and Conditions Expressions in the Evaluation Editor adhere to specific syntax and consist of data point references, such as an object name or object address, or one of three literal value types: boolean, double, and string. Conditions are applied to Linear, Discrete, and Multi evaluations. Text Group References In addition to using the Brush Editor or referencing a hexadecimal color code such as FFFF0000 (red) to determine the color for a property evaluation, you can also reference a color from an existing Text Group table. When the color reference is separated by a period as follows: [TextGroupName].[Value], the color associated with that value displays. Multi Editing You can simultaneously update multiple elements whose matching properties have evaluations applied to them. If an element in a group of elements doesn t have a matching property with the other elements in the group, the element is ignored and 194

195 Overview of Graphics Editor About Evaluations and Element Properties 5 not included in the evaluation. If the same property for multiple elements have different values applied to them, those properties display with a blue background and a new value can be entered that will be applied to all the elements that share the property Evaluation Types There are five evaluation types you can apply to an element or Symbol property in the Graphics Editor. Simple Simple evaluations are the most basic type of property evaluation. Simple evaluations allow you to specify a one-to-one substitution or behavior for the expression result of the property, without setting any conditions. Simple evaluations only require you select a property and enter an expression. Animated The Animated evaluation is used to change a property value by setting a value for each frame and then setting the interval times between frames and their associated values. In the Animated evaluation each value condition is considered a frame. One frame is used as the Off frame. Linear Linear allows you to broaden the range of the expression by mapping the expression result to a minimum and maximum range. The minimum and maximum values are set to the original expression range or you can manually enter a range. A range condition can be another literal value or a Symbol from the Symbol Library. You can have multiple range conditions for each property expression. If a minimum or maximum range is blank, the value is taken from the expression range. Discrete Discrete evaluations allow you to map the expression result to one or more conditions. However, unlike the linear evaluation, the conditions of the expression are evaluated and processed in order of priority from top-to-bottom in the Evaluation Editor view. The value of the first true condition is applied and all other conditions are not used. You can use the Discrete s And condition to compare individual bits of an analog data point expression. The And condition uses binary encoding to compare a hexadecimal value with the binary equivalent to see whether a condition is true. For example, the hexadecimal number 2A is equivalent to the binary value of , and the decimal value of 42. For any bit conditions that match the bit places of 2, 4, and 6 being ON or 1, the condition is true. Multi Multi evaluations allow you to create evaluations for digital data points. Every possible combination of digital data point states can have results which you can set or limit in your evaluation. The tri-state check box allows you to manage the number of required conditions for your evaluation. 195

196 5 Overview of Graphics Editor About Evaluations and Element Properties Expression Type and Results The Evaluation Editor's Expression field allows you to enter information whose resulting value is applied to the associated element property. In Runtime mode, the result of the value that is applied to the element evaluation displays in the Results field. The result of the Expression field is also used in creating evaluations with conditions. The information entered into the Expression field can be a value, a string literal, one or more data point references, or a JavaScript expression, whose value or result is applied to the element property evaluation. The information or objects accepted in the Expression field are: A literal (string, analog value, or True\False) One or more data point references Combination of a literal and a data point reference, separated by "?" A Multi-line JavaScript expression Data Point References in the Expression field All data points are associated to a Function, and some data points are also associated with Object Models. When the information in the Expression field is a data point reference, you can choose one of the following result types from the Type field, in order to obtain the desired result. Depending on your selection the results are as follows: Reference - The expression result is the COV value of the referenced data point. Function - The expression result is the Function name of the referenced data point. Object Model - The expression result is the Object Model name of the referenced data point. Script - The expression result is the result of the JavaScript. Working with Expression Results You can use the Result value in conjunction with the Condition field to create evaluations. For example, If you have an element in a Symbol that is invisible (the Visible property is deselected) by default, you can create a Discrete evaluation that allows the element to be visible under certain circumstances. In our evaluation below, the Expression field contains the data point, and the Function Type filter is applied. The Discrete evaluation states that if the Condition of the data point is of the Function "BoilerDigital" or "BoilerAnalog," then the value (property) is visible. 196

197 Overview of Graphics Editor About Evaluations and Element Properties 5 Working with a Function Type When you select Function, from the Type field, you can then use the actual Function name in the Condition field to create evaluations. All strings must be enclosed in a double quote, for example: Fan1ST - "Fan1ST" The Function type filters allows you to obtain a data points Function name in a Graphic Template, for example, and hide or display graphic elements Script Overview The Evaluation Editor allows you to create expressions based on the calculations and results of multiple data points or properties. These expressions are created when you select Script from the Type drop-down menu in the Expression area of the editor. You can also apply the calculations to the Condition field. The Script expressions use the JavaScript syntax. Desigo CC version 2.1 follows the ECMA standard for JavaScript (Standard ECMA Edition.) The Read and Trace methods are two statements specifically created to work with Desigo CC. The Read method allows you to obtain the current value of the specified data point and the Trace method lets you log a Trace message to the Trace channel Graphics.Scripting module. To view these graphic scripting related Trace messages, you must enable the Trace module in the Trace Viewer application (Siemens > Tools). Script expressions are helpful when creating graphics that display changing values, like a sensor, or for displaying positive and negative room pressure. You can also use the Script feature to create an expression for a floor plan that changes color based on how far the zone temperature is from the setpoint. See the following example. Local Variables and Functions Applied Globally All graphic scripts within the same System Manager use the same script engine. This means that all local variables and Functions actually have the same global scope. Example: A graphic contains two Text elements: Text Element One - Script: var x=3; x; Text Element Two - Script: var y=x+1; y; A possible outcome for the value of the text element scripts are: "3" for Text element one, and "4" for text element two. However, the resulting values depend on the order the scripts are executed and that cannot be determined. The next time 197

198 5 Overview of Graphics Editor About Evaluations and Element Properties text element two script runs, the outcome for the value could show an error stating "x" is not defined. NOTE: Using variables in a script is not an issue, even when two scripts on the same graphic use the same variable name. Scripts are not interrupted by other scripts; therefore, for the execution time the variable remains untouched. Script Expressions Requirements JavaScript objects are strings, numbers, math operators, arrays, and so on. The expressions support the following operators: +,-,*,/, %, ++ and, in addition to common operations like Math.abs(),Math.max(), Math.min(), Math.sqrt(), Math.average(), and Math.sum(), etc. A Script expression is evaluated when a graphic is loaded, or a data point value changes. You can drag-and-drop a data point reference from System Browser to any space in the Script field. When you drag-and-drop a data point reference, it is automatically inserted with the Read method. See the Read() Drag-and-Drop section below. Do not use global data in a script without declaring and initializing the data in the same script. Script syntax errors are indicated by a red frame around the Expression field and a tooltip displaying the actual error. A WARNING trace message is also logged. Script Examples The tables below provide a brief overview of some of the expressions you can write using the Script feature. Read Method The Read()-method returns the current value of the specified data point, when the data point path is enclosed in parenthesis. In this case, the specified data point is a string. In Expressions, all strings must be enclosed in double quotes. It is important to use the double quotes because data point designations can already contain single quotes. Read Method Expression Read("System1.LogicalView:Logical.Site'A S01.B.Ahu10.FanSu;") Read("{*}") Result Displays the current value of the data point. Displays the value of the object reference. Read("System1.LogicalView:Logical.Site'A S01.B.Ahu10.FanSu;.Value") - Read("System1.LogicalView:Logical.Site'A S01.B.Ahu10.FanSu;.SetPoint") (Read("System1.LogicalView:Logical.Site' AS01.A;.Value") + Read("System1.LogicalView:Logical.Site'A S01.B;.Value")/ 2 Displays the difference between the two properties of the data point. Displays the average value between the two properties. Read() Drag-and-Drop Support You can drop a data point reference from System Browser anywhere in the multiline Script field. It is automatically inserted with the Read()-method, unless you press the SHIFT key. 198

199 Overview of Graphics Editor About Evaluations and Element Properties 5 The figure below displays dragging-and-dropping a data point reference into the Evaluation Editor's Expression field for a Script evaluation. Resulting in the Read method directly applied to the dropped data point:? Operator in the Read Method - in the Read method, the "?" operator can be used as part of the data point designation. If at least one designation ends with a "?" - then the element is hidden if a data point referenced by the current Read method does not exist. See the last example in the table below. Expression Read("System1.LogicalView:Logical.Site'AS01. B.Ahu10.FanSu;?-1") Read("System1.LogicalView:Logical.Site'AS01. B.Ahu10.FanSu;?") Read("{*dp1}?{*dp2}?99")? in the Read Method Result The current value of the data point, if it exists. 1 - This displays data point does not exist. The current value of the data point, if it exists. The element on the canvas is hidden, if the data point does not exist. Expression in a Symbol: Returns the value of data point 1 or data point This displays if neither data point or property exists.. Read("xyz?dp1") + Read("xyz?abc?4") The value of data point Read("dp1?") + Read("xyz") Null. The element is hidden, even if data point 2 exists. 199

200 5 Overview of Graphics Editor About Evaluations and Element Properties Trace Method The Graphic.Scripting channel must be enabled in the Desigo CC Trace Viewer application for the Trace method to work. Refer to the Trace Viewer Help for more information on enabling a Trace channel. Trace Method Expression Var x = 1 +2; Trace("Value is " + x); Result 3 and the string Value is 3 is logged under Message Text in the Trace Viewer Common JavaScript Examples The table below provides you with common JavaScript examples. Note that the "//" is not a part of the syntax. In JavaScript "//" indicates a comment. Common JavaScript Examples: Expression Result Math.abs(3.4) // absolute 3 Math.average (10, 20) // average 15 Math.max (1.5, 2) // maximum 2 Math.min(1.5,2) // minimum 1.5 Math.sum (1,2,3) // sum 6 12%5 // % (modulus) 2 Math.sqrt(9) // square root 3 Var str = "Hello"; 1 Str.index0f("el"); Var value = ["A"; "B", "C"]; "B.3" Value[1] + "." + values.length Type Conversion The Type Conversion Expression Result 7 > 2 * 3 True. Same as: 7 > (2*3) (7 > 2) * 3 3, because True is converted to 1 Curly Brackets and Substitutions Curly brackets are reserved for substitutions and the substitutions are resolved prior to the Script evaluation. Therefore, when a curly bracket is part of the Script, two curly brackets are used. Curly Brackets\Substitutions Expression var result = 1; if (true) {{ var x = 2; result += x; }} result; var f1 = function() {{ var result="a"; if (false) Result 3 Ab 200

201 Overview of Graphics Editor About Evaluations and Element Properties 5 return "x"; return result + "b"; }} f1(); ar result = 1; try {{ throw("my error"); result = 2; }} catch (e) {{ Trace(e); result = 3; }} result; 3 and the message my error is logged Script Timeout All scripts within the same System Manager are executed sequentially and can slow down other graphics that also contain scripts. In order to avoid script delays or scripts blocked by scripts in other graphics, every script has a maximum running time of 4 seconds. After that, the script is stopped and returns a null, as follows: Text element displays: #COM Trace displays: WARNING Script Versus Reference Script Versus Reference Executing a script is generally slower than evaluating a Reference expression. Try to limit the usage of script when possible. The following are recommendations for librarians: Use scripts for Symbol in a graphic. However, do not use a script if the Symbol is displayed in a graphic more than 5 times, this number includes all nested Symbols. Use scripts to remove elements from a Symbol. Use scripts to reduce the number of substitutions, evaluations or conditions. Limit the number of Read() calls. Limit the number of if or while statements. Scripts should be simple as opposed to complex. If a task can be done with a Reference expression, use that before writing a script expression. See Reference versus Script example below: Script Versus Reference Example In this example, the objective is to hide the element on the graphic if the value of a given data point (dp1) is larger than the value of "25". The element property Visible receives the evaluation of the expression and depending on the value of the data point, the element is either visible on the graphic or not. The first example, illustrates a Script expression for this scenario. 201

202 5 Overview of Graphics Editor About Evaluations and Element Properties And, below, is the same evaluation, however, a straightforward Reference expression is used instead. In this example, the Reference expression is more efficient than a Script expression Condition Syntax Each evaluation type requires specific input and syntax for the Condition field. Linear Valid syntax and input include double or integer values. The Condition field can also be left blank, in which case the expression range is used. Discrete The following table shows examples of valid syntax for the Condition fields associated with Discrete evaluations. 202

203 Overview of Graphics Editor About Evaluations and Element Properties 5 Condition Example Condition is Double literal 12 Name reference. NOTE: It recommended that you use a range for the condition. <5 Condition is smaller than 5. <=5 Condition is smaller than or equal to 5. >5 Condition is greater than 5. >=5 Condition is greater than or equal to True, if equal to or less than True, if equal to or greater than True, if value is equal to or between12.34 and 56.. Always true. This is the same as a blank field. &2A Always true. True, if the (zero-based) bits 1, 3, and 5 are true. &4 True, if the (zero-based) bit 2 is true. &0002 True, if the (zero-based) bit 1 is true. Multi In this evaluation type, every condition has a check box that is associated with an expression created for the evaluation. If you have four expressions, each condition will display four check boxes. Each check box indicates if the expression is true, false, or unspecified (ignored) for the particular condition. The condition applied is then determined by how the associated check boxes are marked and the conditions are met. For each condition, the related expression check boxes from the top section of the Evaluation Editor are ordered from left (first expression) to right (last expression). The check box states are represented as follows: Checked = condition is true. Unchecked = condition is false. Green Fill = condition is neither true nor false (unspecified) and the corresponding expression is ignored. The example condition is true if: -Expression 1 is true or false (that is, this expression is ignored AND -Expression 2 is true AND -Expression 3 is false. If an expression is not digital, the result is false if the expression result is: 0 for integer, double, or any other analog types Empty string or 0 for string types Understanding Binary Encoding Analog data points use a range of values to represent a condition which has more than two states, for example, the temperature data point or damper position. Analog data points use a range of values to represent the information. A computer uses binary digits, consisting of 1 s and 0 s, to read and represent those values. A 1 usually represents an On state, and 0 represents Off. To simplify the binary coding for the user, hexadecimal numbers are used to map the binary numbers into more legible values. See the table below for binary, decimal, and hexadecimal equivalents. 203

204 5 Overview of Graphics Editor About Evaluations and Element Properties Binary and Hexadecimal Weights Binary numbers are based on two because it consists of a combination of the digits 0 and 1. Because a base of 2 is used in binary notation, the second place from the right has a weight of 2 because it is 2 raised to the power of 1. Hexadecimal notation is based on 16 because it is based on 16 digits. About Hexadecimal s The hexadecimal notation is based on 16 digits and uses the digits 0-9 and then the letters A-F to represent the digits Hexadecimal numbers are often preceded by Ox or followed by h. A hexadecimal number consists of two values; each value represents one of two nibbles. A nibble is a byte (8 bits) that has been separated into two nibbles, each consisting of 4 bits. The lowest value for a nibble with each bit turned off is: 0000, which equals a value of 0 The highest value for a nibble with each bit turned on is: 1111, which equals a value of 15 (1). Converting a Hexadecimal to a Binary To convert a hexadecimal to a binary number, use the table below. For example, the hexadecimal number: 2A From the table below, do the following: Locate the hexadecimal value 2 and note the binary equivalent. The binary value for 2 is 0010 Locate the hexadecimal value A and note the binary equivalent. The binary value for A is Therefore, the binary value for the hexadecimal number 2A is equivalent to: Binary, Decimal and Hexadecimal Equivalents Binary Decimal Hexadecimal Binary Decimal Hexadecimal A B C D E F Converting a Hexadecimal to a decimal We are working with the hexadecimal value: 2A. This value, according to the table above represents the nibble values of: 2 and 10. Since the hexadecimal values are based on 16 digits, to get the decimal value, it is necessary to multiply 2 and 10 by their position weight values and add them up. The weight is calculated This is calculated by adding the bit weight based on two digits from right to left, starting with 16 0 progressing to 16 1 : (2 *16 1 ) + (10*16 0 ) =

205 Overview of Graphics Editor About Evaluations and Element Properties 5 Analog data point Types Analog data point Types Name Type Description CHAR Character A 16-bit value. INT Integer A value that is either negative or positive. The range is as follows: Positive: 0 to Negative: -1 to UINT Unsigned Integer A positive value. An unsigned 16-bit integer has a range from: 0 65,535 INT32 Integer32 A positive or negative value: -2e31 to 2e31-1 Float Floating Point Values with decimals ( (1) This is calculated by multiplying each bit by its weight, based on its place, and added together with the other values. The weight based on two, from right to left, starting with 2 0 progressing to 2 1, 2 2, and finally, 23: (1 *23) + (1*22) + (1*21) + (1*20) = Property Evaluation Examples Animated Example Example: You have a rectangle drawn on the canvas and would like to change the Fill property color. Each frame is set to the color you would like the Fill to be for that frame. 205

206 5 Overview of Graphics Editor About Evaluations and Element Properties Linear Examples Linear Examples Examples of how the Linear Evaluation can be used: Example 1: The fill color of a rectangle is used to reflect the current water temperature. You can enable the Auto Range check box, and set the minimum and maximum temperature in Expression field. The fill color is set to dark blue to represent cold water (-50) and to represent a normal water (100) temperature the fill color is set to light blue. The Auto Range check box is enabled for this scenario. The fill color changes according to the set temperature range. Example 2: Same Example 1, however, the Auto Range is disabled, and a rate is set to The rectangle fill color is dark blue for any expression values below 10 and light blue for any values above 30. Example 3 Same as Example 1, however, Auto Range is disabled. The minimum range is set to 20; the maximum range is left empty. If either the Min or Max condition value is empty, the corresponding minimum or maximum range is taken from the Expression range. If the expression doesn t have a range, the values -1.79E+308 (Min) or +1.79E+308 (Max) are used Discrete Example Discrete Example I The Fill color of a rectangle should be depicted as follows: Blue if the temperature is below -20 Red if the temperature of the water is 40 or above 40. Orange for any other temperature. The design value of the rectangle is set to orange. Result If none of the conditions is true, the design value, orange, is taken. Optionally, a third color condition can be specified if the design color should be different from the default animated color. This could be relevant for the preview. Discrete Example II You want to change the background color of an analog object depending on the value of data point 2 (dp2). The first Condition is set to &1, and the Value is set to the Red. The second Condition is set to & 2A and the Value is set to Green. Result According to these conditions, see example below, the background color of the data point changes as follows: Red, if the first bit is set to 1, and when the actual value of dp2 is 1, 3, or any other odd number, the condition is true. Green, if the bits 2, 4, and 6 are set to 1. Therefore, when the actual value of dp2 is 42, 46, 254, or any value whose binary codes have the 2nd, 4th, and 6th bit set to 1, the condition is true. 206

207 Overview of Graphics Editor About Evaluations and Element Properties 5 If neither condition is True, then the background color is by default the design value Multi Example Multi Example Example: The property, Stroke Dash Cap, depends on three digital data points. The following conditions are set: In the first condition, if the expressions result for the digital data point BP1 is True, then data point BP2 and BP3 are ignored and the Round attribute is applied to the property Stroke Dash Cap. In the second condition, if the expression result for the digital data point BP2 and BP3 are True, the Flat attribute is applied to the property Stroke Dash Cap. In the third condition, if the expression result for the digital data point BP2 is True and data point BP3 is False, the Triangle attribute is applied to the property Stroke Dash Cap. A fourth condition with all check boxes set to unspecified could also have been added. If the expression value results in any other combination, the condition automatically applies the default value of the Stroke Dash Cap Script Scenario You can create areas of a floor plan that change color based on how far the zone temperature is from the setpoint. This is typically done by drawing a polygon, rectangle, or path element on a floor plan graphic. The Fill property color of the element is used to determine the color of the "room" based on the temperature. The Fill color changes represent a gradient blue (too cold), to white (just right), to red (too hot), depending on how it compares to the setpoint. The following examples illustrate how you can use the Script feature in the Evaluation Editor, to create a color-changing floor plan according to the actual temperature. Multiple examples are provided to illustrate the scope of using Script 207

208 5 Overview of Graphics Editor About Evaluations and Element Properties with property evaluations. Example 1, the simplest evaluation of the three, is the recommended method for using script for this scenario. Script Example 1 (Recommended) [ 208] This is the most straightforward and simplest form of using script in an evaluation to represent a changing Fill color of an element. A Discrete type of evaluation with Conditions is used. And, a script using two Read() methods is used. The script reads the actual temperature object reference and subtracts the value of the setpoint object reference. The value is examined by the evaluation, and depending on the value, the appropriate condition is chosen and the Fill color is changed. Script Example 2 [ 209] This example also uses a Discrete type of evaluation with Conditions. However, the script declares and uses substitution variables in the script to determine which Condition is applied to the Fill color. Script Example 3 [ 211] This example, is a more complicated use of Script for the original scenario. Uunlike the Script Examples 1 and 2, this example does not use the Condition fields. Instead, the script is used to create the hexadecimal color value for the Fill color depending on the temperature difference of the room Script Example 1 (Recommended) This is the most straightforward and simplest form of using script in an evaluation to represent a changing Fill color of an element. A Discrete type of evaluation with Conditions is used. And, a script using two Read() methods is used. The script reads the actual temperature object reference and subtracts the value of the setpoint object reference. The value is examined by the evaluation, and depending on the value, the appropriate condition is chosen and the Fill color is changed. 208

209 Overview of Graphics Editor About Evaluations and Element Properties Script Example 2 This example also uses a Discrete type of evaluation with Conditions. However, the script declares and uses substitution variables in the script to determine which Condition is applied to the Fill color.. /* The variables used in the script must first be declared. The first two variables are ActualTemp and SetPointTemp.*/ var ActualTemp = Read("{*}"); /*Substitution reads default Object Reference by looking at the value derived from the property of a data point.*/ var SetPointTemp = Read("{SetPoint}"); /*The value is derived by looking at whatever value was entered for the substition.*/ var TemperatureDifference = ActualTemp - SetPointTemp; /*Declares the variable TemperatureDifference which is equal to the value of the ActualTemp minus the value of the SetPointTemp.*/ var ColorValue = 0; /*Declares the variable ColorValue, which will represent the condition chosen in the evaluation. If the ColorValue is = "0" then the Fill is transparent.*/ if(temperaturedifference >= 6) {{ ColorValue = 1; 209

210 5 Overview of Graphics Editor About Evaluations and Element Properties }} /*This scope block states, that if the TemperatureDifference value is greater than or equal to 6, then, the ColorValue is set to "1", which in the section of the evaluation conditions is equal to the color #FFCB1737.*/ else if(temperaturedifference >= 4) {{ ColorValue = 2; }} /*This scope block states, that if the TemperatureDifference value is greater than or equal to "4", then, the ColorValue is set to"2", which in the section of the evaluation conditions is equal to the color #FFFF0000.*/ else if (TemperatureDifference >= 2) {{ ColorValue = 3; }} /*This scope block states, that if the TemperatureDifference value is greater than or equal to 2, then, the ColorValue is set to "3", which in the section of the evaluation conditions is equal to the color #FFFFC0CB.*/ else if (TemperatureDifference <= -6) {{ ColorValue = 4; }} /*This scope block states, that if the TemperatureDifference value is greater than or equal to -6, then, the ColorValue is set to "4", which in the section of the evaluation conditions is equal to the color #FFADD8E0.*/ else if (TemperatureDifference <= -4) {{ ColorValue = 5; }} /*This scope block states, that if the TemperatureDifference value is less than or equal to -4, then, the ColorValue is set to "5", which in the section of the evaluation conditions is equal to the color #FF0000FF. */ else if (TemperatureDifference <= -2) {{ ColorValue = 6; /*really cold */ }} /*This scope block states, that if the TemperatureDifference value is less than or equal to -2, then, the ColorValue is set to "6", which in the section of the evaluation conditions is equal to the color #FF */ ColorValue; /*This indicates the result of the script, which determines which value is used and which condition will be used to determine the color of the Fill property in the evaluation.*/ 210

211 Overview of Graphics Editor About Evaluations and Element Properties Script Example 3 This example, is a more complicated use of Script for the original scenario. In this example, a Simple evaluation is used. Therefore, unlike the Script Examples 1 and 2, this example does not use the Condition fields. Instead, the script is used to create the hexadecimal color value for the Fill color depending on the temperature difference of the room. /*The variables for the evaluations are declared.*/ var ActualTemp = Read("{*}"); /*Substitution reads default Object Reference by looking at the value from the property of a data point.*/ var SetPointTemp = Read("{SetPoint}"); /*Reads value declared for the substitution.*/ var Range = Read("RangeValue)"); /*RangeValue substitution value defines a threshold range ratio. Provides backdrop for the opacity range to apply depending on the difference from the Setpoint and the actual temperature.*/ var TemperatureDifference = AcutalTemp - SetPointTemp; /*Establishes the temperature difference.*/ var ColorValue = "#" + "00"; /*Declare the initial value of the color with the Alpha Channel initialized and "0" opacity in hexadecimal notation.*/ /*The evaluations begin.*/ 211

212 5 Overview of Graphics Editor Working with Evaluations and Element Properties if(temperaturedifference >3) /*If the temperature difference is greater than "3". Now determining an opacity for the color "red"*/ {{ var OpacityValue = Math.abs(255*ActualTemp)/Range); /*absolute value established to obtain an opacity value.*/ OpacityValue = Math.round(OpacityValue); /*Value rounded to a whole number - no decimal is hexadecimal color references.*/ if (OpacityValue > 255) OpacityValue = 255; /*OpacityValue is capped at 255. Hexadecimal values are between 1-255*/ }} /*Construction of the hexadecimal color reference starts, now that all variables declared*/ var OpacityHexValue = OpacityValue.toString(16); ColorValue = "#" + OpacityHexValue + "FF0000"; //red /*OpacityValue converted to a hexadecimal value. The hexadecimal notation is supplied and the value of the opacity value is added for the color "FF0000" (red)*/ /*Constructing the evaluation if the temperature is less than 3 - we are covering the other end of the spectrum - in our case to represent a cooler temperature difference with the color blue.*/ if(temperaturedifference < 3) {{ var OpacityValue = Math.abs((255 * (Range - ActualTemp)) / Range); OpacityValue = Math.round(OpacityValue); if (OpacityValue > 255) OpacityValue = 255; var OpacityHexValue = OpacityValue.toString(16); ColorValue = "#" + OpacityHexValue + "0000FF"; //blue }} result = ColorValue; /*Color value is now set. Returns value that sets the Fill property.*/ 5.19 Working with Evaluations and Element Properties Properties View The Properties view displays all the properties of the active canvas or a selected graphic element on the canvas. The title bar text of the Properties view changes to reflect the name of the selected element, and the associated properties are displayed by category in the view. Properties can also be filtered to display by property name or by a value. Within the Properties view you can view, edit, or delete a properties settings. If you are unsure of what a property does or what types of values are accepted for that 212

213 Overview of Graphics Editor Working with Evaluations and Element Properties 5 value, you can select to view detailed information about a property. The view also displays a brief description when you place your mouse over a property. Property View Item Name Description 1 Title Bar Display the name of the currently selected element on the active graphic. The title bar text changes to reflect the name of the active element whose properties display in the Property View list area. 2 Filtering Search Area Search the element s properties and limit the properties displayed. You can search by property name or by a property value. When you enter the text in the Search text box, the matching results display in the list area below the text box. When you enter text into the Search field, the displays and you can delete the entered text and restart your search. 3 Show Property Detail Button Enables the Property Detail Sub-section of the Property view. When Show Property Detail is enabled, at the bottom of the Property view, details about the selected property displays, such as property type, allowable values, the default setting, and property description. 4 Category\Property List Area Displays the properties and their settings associated with the active element. Click the Show Evaluation Editor to open the Evaluation Editor view and automatically enter the property into the Property field of the Evaluation Editor. When a property has an active evaluation the Evaluation Editor button changes from gray to green: 213

214 5 Overview of Graphics Editor Working with Evaluations and Element Properties. The following icons display next to if a property has an evaluation associated with it. - Deletes the associated property evaluation. Allows you to enable (box is checked) or disable (box is not checked) an associated property evaluation. Note, this is not the same as deleting the evaluation. The list area can also be filtered via the Search field. 5 Property Detail Sub-section Display information about a selected property when Show Property Detail is enabled. The following information displays for each property: the property Type, permitted Values, Default values, and a Description of the property. The sub-section can be resized by clicking and dragging the borderline Working with the Properties View Filtering in the Properties View You have a list of properties in the Properties view that are associated with elements on the canvas, and you want to filter the properties by name or value. Enter the name of a property or enter a value you want to filter by, doing one of the following: To filter on a property name, click Name and enter a property name. All matching properties display. To filter on property value, click Value and enter a value. All matching property values display Setting the Tooltip Property You are in Design or Test mode, and have elements on the active canvas you want to add tooltips to. In the Properties view, navigate to the General category and enter the desired tooltip text into the Tooltip property field. When you are in Runtime mode and move the mouse over the element, the tooltip now displays in with a yellow background. 214

215 Overview of Graphics Editor Working with Evaluations and Element Properties Modifying Element Property Details You want to view and modify the properties of a graphic, graphic object, or element. You have a graphic open and from the View tab, in the Display Views group, have check marked the Properties option. 1. Select the element or object on the canvas, whose properties you want to view or modify. To select the actual graphic properties, click anywhere on the canvas. The Properties view changes its title to the selected element or object type, and all the properties available for that object display in the view. 2. Optional. You can type a property name in the filter field to quickly locate a property by name or by value. 3. To change a property value, navigate to the property and click in the properties field. The property is highlighted in yellow. 4. Optional. To view more information about a property, select the property and click Show Property Detail. Detailed information about the selected property displays in the Properties view. 5. For each property you want to modify, do one of the following: From System Browser, you can drag-and-drop an object over the field. Type a value or text. In some cases, you will see up and down arrows in the field, which allows you to increase or decrease the current value. If you place your mouse over the arrows, the Horizontal and Vertical Slider displays. Click-and-drag to use the slider to change the value of that property. Check mark the box to enable or disable the property. NOTE: If you see a Substitutions property with a * next to it, you cannot change that property directly. The property takes the value from the Symbol Instance > Object Reference property. The property is automatically updated. 6. Optional. If you want to apply an evaluation to the property, click Show Evaluation Editor next to the property. The Evaluation Editor view displays the property in its Property field About Animation Animation is the visualization of a change and can be used to show moving units, flashing lights, and rotating elements. The visualization of change is represented by displaying images, Symbols, based on a data point s state or value range. All element properties in the Graphics Editor can be configured for animation using the animation element. 215

216 5 Overview of Graphics Editor Working with Evaluations and Element Properties Animation Element The Animation element, available from the Insert group, allows you to set the property evaluations that determine which images (Symbol instances) will display based on the resulting state or value range of the animation element s Symbol Reference property. For example, you can create animated Symbols to visually show the state of a fan: Display the Fan Stopped Symbol, when the fan speed = 0 Display the Fan Rotation Slow when the fan speed = 1 Display the Fan Rotation Fast when the fan speed = 2 Displaying the Animation Element The following rules apply to value of the Symbol Reference property of an animation and how the animation element or Symbol displays in Preview and Design mode: If the Symbol Reference property is empty: If there is no Symbol Reference evaluation The default Symbol icon displays. If a Symbol Reference evaluation exists - Display the first non-empty Symbol of the evaluations. If the Symbol Reference property is set - Display the associated Symbol. The following rules apply to the Animation element Symbol Reference property and how the animation element or Symbol displays in Test, Runtime, and in the Graphics Viewer: If there is no Symbol Reference evaluation: If the Symbol Reference property is empty - Show nothing. If the Symbol Reference property is set - Display this Symbol. If a Symbol Reference evaluation exists: If the evaluation result is empty - Show nothing. If the evaluation result is a valid Symbol Display the resulting Symbol. If the evaluation result is an invalid Symbol Display #Ref Size and Resizing Resizing an Animation element on the canvas affects all resulting Symbol instance frames with the same factor. This is only important if the resulting frames have different sizes. For example, If an Animation object is resized to half of its original size; all the resulting Symbol instances will be half of their original size. A Symbol instance can also be resized. Based on the currently visible Symbol instance, the resize factors for the Width and Height properties are used if and when the resulting visible Symbol is updated due to changes in the Symbol reference property. Position The position, as set by the X and Y properties, of a Symbol instance does not change when the resulting Symbol instance that is displayed on the canvas is updated due to changes in the Symbol Reference property, for example, after a data point COV. The anchor is used to specify the logical origin of the Symbol when it is displayed as an instance on the canvas. Every Symbol has an associated anchor, which can be toggled to be visible or not in the Element Tree using the Visible 216

217 Overview of Graphics Editor Working with Evaluations and Element Properties 5 check box. If the anchor is not visible, the top left corner of the bounding rectangle and all the Symbol elements are used for positioning Animation Matrix Any data point type can be used to create an expression for animating an element s property. The relationship between the data point type and the element property type are generally converted to the target element type. The table below represents the animation matrix and conversions possible between data point type and element property types. Property Type: Data Point Type: Double Eg. Angle String Eg. Text Bool Eg. Blinking CompoundBrush Eg. BackColor Sint32 Eg. Precision ENUM Eg. Ellipse Type UInt8 (char, byte) X X X X X X UINT32 (UInt, bit32) X X X X X X SInt32 (Int) X X X X X X Double (Float) X X X X X X Bool 1 X X X X X X String X X X X X X DateTime 2 X X X X X X Dpld NA X NA NA NA NA LangText NA X NA NA NA NA Blob NA X NA NA NA NA 1) O or an empty value is set to False and Black. Any other value is set to True and White. 2) Based on the number of seconds since 12:00:00 midnight, January 1st, 0001 for the date/time value. For example, May 5, 2010, 3 PM, is represented by the value: Evaluation Editor View The Evaluation Editor view allows you to create animated graphics by configuring and applying expressions and substitutions to the properties of an element and associated data point properties. 217

218 5 Overview of Graphics Editor Working with Evaluations and Element Properties Expression Section Evaluation Editor Item Expand/Collapse Button Property Type Description Expand and collapse the Evaluation Editor view. Select from a list of properties in the drop-down menu. The properties listed are all associated with the active element or object on the canvas. The property selected is affected by the evaluation. Select and display the type of evaluation to apply to the selected element property. Clear Empty all the fields in the Evaluation Editor, except for the Property field. The Type field is reset to Simple. Use this if you want to recreate an evaluation. Enable\Disable Evaluation Select the check box to enable the current evaluation or, deselect this check box to disable the evaluation. Use this during testing, if you want to temporarily disable an evaluation. Value Displays the current value used to manipulate the associated graphic object or data point. Read Only Field: Displays the current value of the property in Test and Runtime mode. In Design mode, the value displayed is the current value of the element property in the Property Viewer. Previous and Next Arrows Select previous or next arrow to scroll through recently created evaluations associated with the active element on the canvas. The arrows are only visible if there are existing evaluations associated with the active element. Expression The path, data point name and property that is being evaluated. The value or result is applied to the property being evaluated. The data point property value can be derived from one of the following: value string literal data point (s) JavaScript command The path and property name of the data point whose value is applied to the property evaluation. The path of the data point displays using the data point Names setting. (See System Browser) The data point s default property value is used, if none is specified in the path. For example, the following is the path to data point AI_1: System1.ManagementView:ManagementView.FieldNetwor ks.bacnetnetwork_1.hardware.tecdevice_1.local_io. AI_1; The default property above is.present_value. To specify a specific data point property, type.property_name 218

219 Overview of Graphics Editor Working with Evaluations and Element Properties 5 at the end of the data point path, after the ;. For example, System1.ManagementView:ManagementView.FieldNetwor ks.bacnetnetwork_1.hardware.tecdevice_1.local_io. AI_1;.Limit_Enable To find out what properties are associated with the currently selected data point, navigate to the Extended Operations tab in System Manager. Type Result: Allows you to select which information from the data point or source in the Expression field, you want to display in the Result field. The options are as follows: Reference (Default) - The COV value of the data point. Function - The Function name of the data point reference. Object Model - The Object Model name of the data point reference. Script - Returns a result based on JavaScript(TM) expressions entered. Display the result of the expression using the value type of the source. The data type of the expression result is always the type of the expression. This value is mapped to the property type. Evaluation Editor Tools Menu Evaluation Editor Tools Menu Item Condition Order Delete Condition Description Organize the conditions in order of preference. Only applies to Animated, Discrete, and Linear evaluations. Delete a condition. New Condition Add a new condition to the list. Only applies to Discrete and Linear evaluations. 219

220 5 Overview of Graphics Editor Working with Evaluations and Element Properties Linear Evaluation Editor Section Linear Evaluation Fields Item Range Value Auto Range Description Display the minimum and maximum range applied to the expression value. If the expression value falls below the Min value, then the associated Value is applied to the property evaluated. If the expression value is higher than the Max range, than that Value is applied to the property. Display the value associated with Min and Max fields determine how the property displays in the graphic. If checked, the Min and Max value range from the expression is applied. If one of the Min or Max values is left blank, then the corresponding minimum or maximum range is taken from the expression range. 220

221 Overview of Graphics Editor Working with Evaluations and Element Properties 5 Discrete Editor Evaluation Section Discrete Evaluation Fields Item Condition Description Display a range or threshold, when met by the expression result, applies the associated Value to the property evaluation. Multiple conditions are supported. Animation Editor Evaluation Section 221

222 5 Overview of Graphics Editor Working with Evaluations and Element Properties Animated Evaluated Fields Item Frame Value Animation Interval Description The frame number. The value that is applied to the expression result during that frame interval. The interval time between frames in mille-seconds when animated. The value must be greater than or equal to 100. Multi Evaluation Editor Section Multi Evaluated Fields Item Condition Value Description Associates one check box per expression, indicating whether an expression is true, false, or unspecified. If a condition(s) are true, the associated Value is applied from left (top) to right (bottom) expression. One checkbox per expression displays for each condition. If checked, the enumerated values of a property type display with the property value in the Discrete and Linear Value field Working with the Evaluation Editor View Starting an Evaluation You are in Design or Test mode and have a graphic or Symbol open and would like to provide some property substitutions to an element. 1. From the canvas or the Element Tree view, click on the element you want to evaluate. The Properties view title is updated to reflect the name of the selected element and the associated properties display in the view. Additionally, in the Evaluation Editor, the Property drop- down menu is populated with the associated properties. Navigate to the Evaluation Editor view. 2. From the Property drop-down menu, select the property you want to evaluate. 222

223 Overview of Graphics Editor Working with Evaluations and Element Properties 5 3. From the Type drop-down menu, select an evaluation type. 4. Proceed to the following topics to complete the evaluation configuration: Defining a Simple Evaluation [ 223] Defining a Linear Evaluation [ 223] Defining a Discrete Evaluation [ 223] Defining a Multi Evaluation [ 224] Defining an Animated Evaluation [ 224] Defining a Simple Evaluation You are in the Evaluation Editor, and have selected Type > Simple. In the Expression field, enter the data point name or address of a system object and the corresponding expression using the correct syntax. For help with expression syntax, see Expression Syntax Defining a Linear Evaluation You are in the Evaluation Editor and have selected Type > Linear. 1. In the Expression field, enter a data point name or address of a system object along with a minimum and maximum value range you want to apply. For help with expression syntax, see Expression Syntax. 2. Do one of the following: To manually enter a minimum and maximum range for the expression, deselect the Auto Range check box. Set the Range: enter values for the Min and Max fields and then enter a Value to apply for each range. If you leave a Min or Max value blank, the corresponding minimum or maximum range is taken from the expression range. If the expression doesn t have a range then the values -1.79E+308 (Min) or +1.79E+308 (Max) are used. To apply the minimum and maximum range of the expression to the Range, leave the Min and Max fields blank and enter a Value to represent each threshold. 3. On the Home tab, from the Modes group, select Test. 4. Navigate to the Value Simulator view and complete the fields to configure a simulation. The evaluation is simulated on the canvas Defining a Discrete Evaluation You are in the Evaluation Editor and have selected Type > Discrete. 1. In the Expression field, enter a data point name or address of a system object. For help with expression syntax, see Expression Syntax. 2. For each Condition, enter a value range and enter or select an associated Value to apply if the condition is met. Add and repeat for each condition as needed. 3. Sort the conditions in order of preference, using the arrow button at the bottom of the view. 223

224 5 Overview of Graphics Editor Working with Evaluations and Element Properties 4. On the Home tab, from the Modes group, select Test. 5. Navigate to the Value Simulator view and complete the fields to configure a simulation. The evaluation is simulated on the canvas Defining an Animated Evaluation You are in the Evaluation Editor, and have selected Type > Animated. 1. In the Expression field, enter a data point name or address of a system object along with a result or value you want to apply. For help with expression syntax, see Expression Sy. 2. For each Frame [Condition], enter the value to associate with that frame. To insert another frame, click. You are now ready to test your Evaluation with the Simulation View. Be sure you have enabled your evaluation by checking the Evaluation Enable check box. 3. On the Home tab, from the Modes group, select Test. 4. Navigate to the Value Simulator view and complete the fields to configure a simulation. The evaluation is simulated on the canvas Defining a Multi Evaluation You are in the Evaluation Editor and have selected Type > Multi. 1. Enter a data point name or address of a digital system object for each Expression as needed. 2. Enter or select the Value for each required Condition. 3. For every Condition, set the state for each related expression by using the check boxes. For each condition, the expression checkboxes are ordered from left (first expression in the expression list) to right (last expression in the list). 4. The check box states are represented as follows: Checked = condition is true. Unchecked = condition is false. Filled = condition is neither true nor false (unspecified) and the corresponding expression is ignored. 5. Sort the conditions in order of preference, using the arrow button at the bottom of the view. 6. On the Home tab, from the Modes group, select Test. 7. Navigate to the Value Simulator view and complete the fields to configure a simulation. The evaluation is simulated on the canvas. 224

225 Overview of Graphics Editor Working with Evaluations and Element Properties Modifying or Deleting an Existing Evaluation You are in Design or Test mode and have an active element on the canvas that has one or more properties associated with an evaluation. 1. On the canvas, click on the element whose property evaluation you want to modify. The element is active and the scrolling arrows in the Evaluation Editor view are active. 2. In the Evaluation Editor view, click on the navigation arrows until you get the property evaluation you want to modify. The property with the evaluation settings display. 3. Do one of the following: Clear all evaluations fields or delete the evaluation click on the icon. Modify the existing evaluation settings as necessary. 4. If you have not already enabled value simulation to test your settings, navigate to the Value Simulator view and select the Run Value Simulator check box. If necessary, adjust your simulation preferences. The results of the evaluation should be reflected in the running simulation. 225

226 5 Overview of Graphics Editor Working with Coverage Area 5.20 Working with Coverage Area Desigo CC graphics can contain cameras or monitoring devices to which objects, such as fire sensors, ceiling sprinklers, temperature sensors, etc. are associated to. In Run Time mode or in the Graphics Viewer, you can opt to view the coverage area of the camera(s) or monitoring device(s) on your graphic, and thereby identify the view the associated objects. A coverage area Symbol is created and associated with a device, allowing you to drag-and-drop a device associated with a coverage area Symbol on to a graphic, and then add objects to the coverage area shape with the result of creating a link between them. The coverage area shape is associated with the device object from System Browser by setting the Coverage Area property in the Advanced section of the Property View. When a graphic containing a coverage area is displayed in the Graphics Viewer, the coverage area of the devices are not visible by default. You must toggle the Coverage Area icon from the Graphics Viewer toolbar to view the coverage area of any monitoring device on the graphic Association of Documents in Coverage Area You can associate documents with system objects in the coverage area. In the Graphics Editor application, when you position a document in a floor plan graphic, you can define a coverage area of the document Symbol. To associate objects with that document, include the object Symbols within the boundaries of the document coverage area. The association displays in the Automatically assigned field of the Documents application Configuring Coverage Area Library Symbols Typically, a project librarian takes an existing device Symbol and draws a coverage area shape for the device image and then associates the coverage area with an object reference. In order for the coverage area to be modifiable in the future, the project librarian must assign a unique ID to the coverage area. 226

227 Overview of Graphics Editor Working with Coverage Area 5 For example, you have an existing video camera Symbol and you want to create a coverage area to graphically represent the area and objects it monitors and is linked to. Creating a coverage area involves drawing a coverage area shape on the Symbol with one of the following elements: Path, Ellipsis, Polygon, or Rectangle. If you do not have an existing video camera Symbol, create a new Symbol for your camera or monitoring device, and after importing your device image, draw the coverage area for the device. Once the coverage area shape is drawn, it is then associated with the object model definition. When you create a coverage area Symbol, you must make sure to give each coverage area shape a unique ID within the Symbol. Giving the coverage area shape an ID, allows the user, who is eventually creating a graphic with the Symbol, to modify the coverage area shape within the Symbol Instance. It is also recommended that prior to working with coverage area you have a good understanding of Symbol substitions and property evaluations. For an overview, see, Symbol Property Substitution [ 113] and About Property Evaluations [ 194]. For configuring coverage area shapes for device Symbols, see Drawing a Coverage Area Symbol [ 227]. For associating Symbols with object models or Functions, see Associating a Symbol with an Object Model [ 228] Drawing a Coverage Area Symbol You want to create and save a Symbol that consists of an image (for example, -a camera or motion sensor) and a pre-defined coverage area associated with the image. Or, you have an existing device Symbol in your Library and want to add a coverage area to the device Symbol. A user can then drag-and-drop the updated device Symbol onto a graphic and the coverage area is available to graphically associate other objects, to, for example, represent the objects the camera or motion sensor is monitoring. You should have an understanding of how Substitutions work with Symbols and Property Evaluations. For an overview, see Symbol Property Substitution [ 113] and About Property Evaluations [ 194]. You are in Engineering mode and have a new or existing Symbol open in the Graphics Editor. 1. If this is a new Symbol, drag-and-drop an image on to the canvas for the device that is going to monitor objects and data points on the graphic. Otherwise, if this is an existing device Symbol and already contains a device image, proceed to the next step. 2. On the Home tab, from the Elements group, click on one of the following elements to draw the coverage area on the Symbol: Path, Ellipsis, Polygon, and Rectangle. NOTE: The type of shape cannot be changed in the Symbol Instance. The Path element, however, has segments that can be adjusted individually in the Symbol instance, and is a recommended choice for drawing a coverage area. 3. Click on the canvas, and draw the coverage area. 4. With the coverage area selected on the canvas, navigate to the Properties View and expand the Advanced properties so that the Coverage Area Reference field is visible. 227

228 5 Overview of Graphics Editor Working with Coverage Area 5. To drag-and-drop a device reference to associate with the coverage area on the Symbol, do one of the following: In System Browser, from the Management View, navigate to the hardware device, camera or motion sensor object, and drag-and-drop it over the Graphics Editor's Properties View > Coverage Area Reference field. In the Evaluation Editor - From the Property drop-down menu, select Coverage Area Reference. In the Expression field, enter the coverage area reference or a substitution enclosed with double quotes for example: "{*objectref}" This allows you to bind the element to an Object Model. 6. In the Properties View, from the General section, do the following: In the Tooltip field, type a label for the coverage area. The text displays in the Graphics Viewer when the user hovers the mouse over the coverage area. (Optional) Click Next to assign the next available ID value in the ID field. In the Description field, type a description for the coverage area. (Optional) When you click away from the element, the Element Tree view lists the element with the ID number and Description in parentheses. NOTE: When the Symbol is a Symbol Instance in a graphic, you can change the dimensions of the coverage area element only if the element has an ID associated with it. If you leave the ID field blank, the element cannot be edited. 7. To save the Symbol, click Save As from the File menu. Expand the Libraries directory and navigate to the appropriate library and Symbol folder you want to save the Symbol to, and then click Save. 8. Do one of the following: If the device Symbol is not yet associated to an Object Model or a Function, to complete the process of creating a coverage area Symbol, you must associate the Symbol with an Object Model. Please see Associating a Symbol with an Object Model [ 228] If the Symbol is already associated with an Object Model or Function, the Symbol is ready for a System Engineer to use it in a project graphic to graphically represent a monitoring device. Linked data points and objects can be added to the coverage area. For more information, see Using Coverage Area Symbols in Project Graphics [ 229] Associating a Symbol with an Object Model 1. In System Browser, select Management View 2. From Field Networks, select a device. 3. In the Primary pane, from the Object Configuration tab, double-click on the text Object Model: The Models and Functions tab displays. 4. Click on the Models and Function tab, and then scroll down to the Symbols sections, so that it is visible on the screen. 228

229 Overview of Graphics Editor Working with Coverage Area 5 5. In System Browser, enable Manual navigation, and then navigate to the Symbol library folder where the Symbol you want to associate to the Object Model is saved. 6. Right-click on the Symbol folder, and from the context menu select Send to Secondary Pane. The Symbol Browser displays in the secondary pane, and displays the Symbols from the folder you selected in System Browser. 7. Drag the Symbol you want to associate to the Object Model and drop it into the Symbols section of the Models and Function pane. The Symbol is now associated with the Object Model. 8. To make the Symbol the default Symbol of the Object Model, right-click on the Symbol in the Symbols pane, and from the context menu, select Set as Default. 9. From the toolbar menu, select To save the changes. You have now associated the Symbol with Object Model, and made it the default Symbol for the object model, as well Using Coverage Area Symbols in Project Graphics If you are a System Engineer or someone tasked with the job of creating graphics in a project, you will not need to create the coverage area shapes or Symbols. Your monitoring device should already be associated to a coverage area in a device Symbol in one of your libraries. To use coverage area in a graphic, from System Browser drag a monitoring device that is associated with a coverage area drop it on the Graphics Editor canvas. You can adjust the shape of the coverage area for this particular instance of the coverage area Symbol. However, this requires the ID property of the coverage area in the Symbol to be set. You construct your coverage area by adding objects from System Browser that are in the monitoring range of your device. It is also recommended that prior to working with coverage area you have a good understanding of Symbol substitions and property evaluations. For an overview, see Symbol Property Substitution [ 113] and About Property Evaluations [ 194]. For information on using coverage area Symbols in project graphics, see Configuring a Coverage Area Symbol Instance [ 229] Configuring a Coverage Area Symbol Instance You can associate a coverage area shape to objects, such as detectors or sensors, for example. In Runtime mode or in the Graphics Viewer, you can then visually see all the objects associated with the coverage area on the graphic and in Related Items. A project graphic is open in the Graphics Editor. The Graphics Editor is in Operating mode. You should have an understanding of how Substitutions work with Symbols and Property Evaluations. For more information, refer to Symbol Property Substitution [ 113] and About Property Evaluations [ 194]. 1. In System Browser, select the appropriate View that contains the monitoring device you are adding to the graphic. 2. From that view, navigate to a camera or monitoring device, and then drag-anddrop the device on the graphic. The camera or monitoring device displays on the graphic. 229

230 5 Overview of Graphics Editor Working with Value Simulation 3. To select and adjust the coverage area shape, on the keyboard press SHIFT and click on the coverage area handles (for example, the path shape). You can now modify the element size, shape, color, etc. 4. To add color to the coverage area, go to the Home tab, select the Brush Editor group, select and then select a color. TIP: To revert back to the default state of the Symbol Instance, right-click and select Revert to Default. All changes to the Symbol Instance are cleared. Additionally, if you hover over the arrow, it lists the changes made to the elements within the Symbol Instance. 5. To associate other objects or devices, such as sensors, etc. to the coverage area, do one of the following or do both if needed: Drag-and-drop a detector or sensor from the System Browser > Management View on to the graphic. Repeat as needed until you have all the devices you want monitored in the coverage area. For existing detectors, sensors or any elements associated with a data point already on the graphic, drag-and-drop the detector\sensor objects into the coverage area. 6. To edit elements within the Symbol Instance, see Modifying Elements in a Symbol Instance [ 120]. 7. Once you have added modified the coverage area by adding objects and adjusting the coverage area size, from the Graphics Editor toolbar click. All the objects that are within a coverage area on any layer are now associated to the main object or device. When you select the device in System Browser, Related Items displays the main object Working with Value Simulation About Value Simulation Value simulation allows you to simulate COVs for data points while not online. You can test a graphics elements whose properties have values and expressions attributed to them when you are offline and do not have a live database to work with. The Value Simulator populates when you have a graphic open with values attributed to them. You can control the simulation of the data point in two ways: to control values of data points. Automatic the value simulator generates values based on a mathematical function cycle. Manual - The value simulation can be changed manually through a slider. You can also adjust the value range settings of the simulation and filter the data points displayed in the Object Selection section of the view. Types of Cycle Selections: You can choose the type of simulation you to use based on mathematical wave graphs. You can set the Sample Rate and the Cycle rate, which is the number of complete cycles passing a given point in one second (or the customized time) and is measured in Hertz. The wave type choices are as follows: 230

231 Overview of Graphics Editor Working with Value Simulation 5 Cosine: A cycle that represents the orthogonal projection of the rotated Unit Circle, starting at 1. Ramp: The values are incremented and decremented evenly. Random: Generates random values and ignores the cycle time. Sawtooth: A cycle that increases linearly with time for a fixed interval and then drops sharply and repeats the process. Sine: A cycle that represents the orthogonal projection of the rotated Unit Circle, starting at Value Simulator View The Value Simulator view allows you to select, view, and adjust the settings for simulating property values to test how graphic settings will be applied. The four sections, Automatic, Manual, Graphic Template, and Object Selection, can be expanded or collapsed. Value Simulator View Field Automatic Section Run Value Simulator Type Drop-Down Menu Auto Range Manual Section Description Select this option to run the automatic simulation of data points or values associated with element properties. If the check box is cleared, simulation will not be run on the data points. Select a simulation type, view the simulation type selected, and adjust the Sample Rate and Cycle of the simulation values. Run an enable automatic calculation of the minimum and maximum value range for each data point selected for simulation. If the check box is cleared, you can manually set the Min. and Max value range for each data point. Slider Manually control the simulation. The tick marks on the slider are 1/10 apart from each other and the value of each tick mark is dependent on the Min. and Max data value range entered. 231

232 5 Overview of Graphics Editor Working with Value Simulation Snap to Tick Marks Auto Range The data point Value range and Text are updated as you move the slider. Snap the slider to the nearest tick mark when moving the slider. Use the slider to represent the data point range and manually the values for simulation. If the check box is cleared, you can manually enter the Min. and Max value range for each data point. Graphic Template Section Enter a data point reference instance to assign to an object on a Graphic Template and test for COVs. Object Reference Enter a data point instance text to filter the list of all data points currently used in an evaluation and in a currently open graphic. Click Assign to start the COV subscription on the graphic. Object List Section All data points available for simulation are listed with the following information: Filter Enter text to filter the list of all data points currently used in an evaluation and in a currently open graphic. # Display the number of times the data point is used in any evaluation followed by the number of times this data point has been subscribed to for value changes. Display-Only field. Name Value Text Type Data Point Type Precision Min Max Units Status Display the name of the data point.. Display-Only field. Display the current value of the data point. Display-Only field. Display the formatted version of the current value. Display- Only field. Display the expression type of the data point or allows you to select a data point type from the drop-down menu. Display the PVSS-related data types and allows you to select a data point type from the drop-down menu. Display the actual number or decimal points. Formatted values are rounded with the precision. Display the minimum range of the data point. If the Minimum range is empty, NAN displays in the field, and the simulation is ignored. Display the maximum range of the data point. If the Maximum range is empty, NAN displays in the field, and the simulation is ignored. Enter a measure of units for the data point. Select a condition to apply to a data point from the drop-down menu or view the last current status of a data point. Available status messages: FormatError Invalid No Access the data point is not readable. Pending Undefined - default value; no status change has occurred. Valid Simulated Writable Include the data point value in the simulation. If checked, the data point is included in the value simulation. Use the manual slider and simulator to write values down to the system (for example, to a field device). NOTE: The Value field is not affected by this check box. This check box is not 232

233 Overview of Graphics Editor Working with Value Simulation 5 checked by default. Id Displays the unique communication ID of the data point. Display-Only field Working with Value Simulation Enabling Value Simulation You have a graphic open with elements whose properties have data points or values have evaluations applied to them in the Evaluation Editor view. 1. Navigate to the Value Simulator view. 2. Expand the Automatic section and enable the Run Value Simulator check box. 3. From the drop-down menu, choose a simulation pattern and enter values for the Sample Rate and Cycle. NOTE: The Cycle field is disabled if you have selected Random simulation. 4. You can manually enter the minimum and maximum value range for the data points in the simulation or have the range calculated automatically. Do one of the following: Check the Auto Range box to enable automatic calculation of the minimum and maximum value range for each data point selected for simulation. Enter a value in the Min and Max fields for manual range entry. 5. In the Manual section, do the following: Check the Auto Range box to enable automatic range selection or enter a value in the Min and Max fields for manual range entry. Check the Snap to Tick Marks box to increment the slider values 1/10th apart. When you move the slider, it will jump to the nearest tick mark. 6. The Object Selection and Control section displays a list of all the available data points in the graphic. Check the Simulate box for the data points you want to include in the simulation. 7. Optional. In the Graphic Template section, drag-and-drop a data point instance from System Browser to the Object Reference field. The object reference is not stored in the graphic template, it is purely for testing. A graphic template always has to be opened indirectly via a data point in order to see the correct COV values. 8. On the Home tab, from the Mode group, select Test. Test mode is enabled and the simulation of the selected data point values begins. 233

234 5 Overview of Graphics Editor About Depths 5.22 About Depths A depth is a grouping of layers displayed at a pre-defined zoom factor. The depth allows you to navigate up and down through a graphic to view increasing levels of functional detail. When you create a graphic, a default layer and a depth are automatically generated and associated with the graphic. Though you must have at least one layer associated with a graphic, it is not necessary to have an associated depth; therefore, using the default depth is optional. Each time you create a new depth, a layer is created and associated with the new depth. When a graphic or a graphic template is opened, the initial depth is selected as follows: If you open the graphic or graphic template, by clicking on a data point, the depth is determined by the primary selection of the point. If you open the graphic directly in the Graphics Viewer, the depth with the largest Display Size is selected. If you open the graphic in the Graphics Viewer by clicking on a manual viewport, the depth from the viewport is used. If the viewport has no depth associated with it, then the depth with the largest "Display Size" is selected. If you have a point associated with a manual viewport, the viewport has a higher priority for depth calculation. The Depths view is where you create, delete, and rename depths, as well as select which existing layer to associate with a given depth. For each depth, you can also manually set the display size and the Symbol scale factor Planning Your Depths When you create a new depth the current display size (based on the current zoom factor) is stored and displayed with the depth. If required, this display size can be manually modified. When you select a depth from the Depths view, the layers belonging to the depth display and the zoom factor is set so that the current display size is defined in the active depth Depths View The Depths view allows you create, rename, and delete a depth, re-order multiple depths, and to change the display size and Symbol scale factor properties of a depth. You can view a list of depths associated with the active canvas and move them up or down to order them. The width of the Depths Overview View columns can be adjusted manually. 234

235 Overview of Graphics Editor About Depths 5 Depths View Field Selected Depth Depth Name Display Size Symbol Scale Factor Layer...[value] Description Displays the selected depth and its associated layers on the canvas. Use the drop-down arrow to select from a list of available depths. When you select a depth, the current factor is adjusted according to the display size of the selected depth. Additionally, only the layers associated with this depth will be displayed. When checked, the Depths Overview expands the layer columns to display all available layers. To return to the default Depths View, uncheck the box. This is unchecked by default. The display size of the active depth. The default value in this column is taken from the display size of the main view at its current zoom factor when creating a depth. This value can be manually changed by clicking on the current value and entering the desired display factor. The current zoom factor in the Graphic Editor will then automatically be adjusted according to the display size value. Display size of symbol. The default value in this column is set to the display size\graphic size. This value can be manually changed by clicking on the current value and entering the desired value as a ratio. The available layers and their property descriptions for each depth. When checked, the associated layer appears with that depth. If unchecked, the layer does not appear with that depth. To remove the associations, deselect the layer box for each layer. The boxes are unchecked by default. All checked layers are visible in the Element View; unchecked layers are not. If you add a new layer, it will automatically be checked to display under in the active depth. Depth Order Arrows -- Allows you to change a depths position in the depth order. You can move a depth to the top of the list, up a level at a time, down a level at a time, and to the bottom. Insert New Depth -- Allows you to insert a new depth. Delete Depths -- Allows you delete the selected depth Working with Depths Adding a Depth You are in Design or Test mode and want to add a depth to the active graphic. 1. From the Depths view, click Insert New Depth. A new depth and a new layer associated with the depth are added to the list of depths in the Depths view, the Element Tree, and the active graphic. 2. Complete the following fields as necessary: Depth Name: Click in the current depth name field and type the new name for the depth. Display Size: The default size is displayed according to the current display size of the main menu. You can manually enter a value, by clicking in the field. To manually update the size, click in the field and enter a new value. Symbol Scale Factor: Enter a value Layer: Select a layer You have added a new depth to the graphic and can add elements, etc. 235

236 5 Overview of Graphics Editor Overview of Printing Selecting an Existing Depth You have an open graphic that contains multiple levels of depth, and you want to select a specific depth to view or work on in the canvas work area. From the Depths view, navigate to and double-click on the depth you would like to make active. The selected depth is now active on the canvas Deleting a Depth You are in Design or Test mode and have a graphic open with more than one depth level. NOTE: By default, every graphic (Symbol, graphic template, etc.) always contains at least one depth level for each graphic, and cannot be deleted. In the Depths view, do one of the following: Navigate to the depth you want to delete, and click Delete Depths. To delete more than one depth at a time, press down the CTRL key while selecting the depths you want to delete, and then click Delete Depths. The depth and any associated layers are deleted Renaming a Depth You are in Design or Test mode and have an open graphic. From the Depths view, click on the current name of the depth and then type the new name. The depth is named or renamed Overview of Printing You can print your documents (Symbols, graphics, templates, etc.) from the Graphics Editor. There are several views and panes that allow you to select what to print, how to format the printed copy and to preview the document before sending it to the printer. Printing options are accessible from the File menu or the Home tab. Printing You can print a document from the following locations: File Menu Home tab of the Ribbon Page Setup view Print Preview pane Page Setup View The Page Setup view allows you to select what or which document(s) to print, and provides filters to help you select the specific type of documents to locate and print. As you make your selection on the Page Setup view, a sample graphic instantly updates in the view to display how the selection will affects the printed document. To view your actual document with the applied settings, click on the Preview button at any time to view how the selections affect your document. 236

237 Overview of Graphics Editor Overview of Printing 5 From the Page Setup View you can specify the following print settings: The Zoom ratio of how the image(s) will display on the printer paper. How many sheets to Fit to Page; you can have more than one page printed on a sheet. Adjust the Paper Format to set paper type and page orientation, and set the Margins according to inches, millimeters, or pixels. How the Content of the graphic prints, such as color or grayscale, or you can enable an ink saving options, such as printing without the background or to print the wireframe only. Additionally, you can specify whether or not to print the bounding rectangles and the grid and guidelines, if enabled in the original document. How the Header and Footer should be customized by choosing from a list of existing Keywords or selecting Images from the Image Library. As you add items to the header and footer fields, a preview of your selections display below the customizable fields, showing the actual text used. The font type, size, and color for the header and footer. You can select to use the Graphics Editor Default settings or Import an existing print settings file (.xml). A print setting or page setup file is created when you make your Page Setup selections on then click on the Export button to save them as a page setup file (.xml). Preview Pane The Preview Pane allows you to view your document before sending it to the printer. You can adjust the viewing size of the printed document, by increasing or decreasing the zoom or selecting one of four viewing options: 100%, Page Width, Whole Page, and Two Pages. Additionally, you can highlight and copy text from the header or footer areas to use elsewhere. You can also right-click on the displayed document in the preview pane to access the context menu to access the viewing options. Image Library The Image Library pane, lists the available images for inserting into your printed document s header or footer. You can also add or delete images from the library. The Image Library is accessible via the Page Setup view in the Header and Footer section. 237

238 5 Overview of Graphics Editor Overview of Printing Print Preview The Print Preview pane allows you to view your document before sending it to the printer. You can increase or decrease the viewing area of the document to get either get a close-up of a specific area or to view the document from a distance for layout, formatting purposes etc. Icon Name and Functionality. Icon Name Description Print Copy Increase Content Size Decrease Content Size Launch the Print dialog box. Copy text from the headers and footers. Enlarge the content by increasing the magnification level in the Print Preview pane. Diminish the content by decreasing the magnification level. 100% Display the content at a 100% Page Width Whole Page Two Pages Adjust the view of the document to the width of the preview pane. Fit a whole page into the preview pane. Display two pages in book layout in the preview pane Page Setup View The Page Set-up pane is available from the Home tab > Printing group or from the File menu. Once displayed, the pane can be docked in the dock panel, just like the other Graphic Editor views. 238

239 Overview of Graphics Editor Overview of Printing Page Setup View Page Setup Pane Section Field Description Documents Look In Select a print option from the drop-down menu to choose what to print: Current Document Prints the active document. All Open Documents Prints all open documents. NOTE: When either one of the above options are selected, the Type and Name options are inactive. Entire Project Allows you to print all project documents, and any open graphics. Type Name Print Single Documents Print Only Visible Part Select what type of document to filter. Only active when the Entire Project option is chosen in the Documents section. Enter text to filter by a documents name. Print the documents selected in the Look In field as one single document. No print preview provided if this option is chosen. NOTE: Disabled if Current Document is selected. Print only the area of the current document that is visible and has the current focus. NOTE: In the Graphics Viewer this feature is 239

240 5 Overview of Graphics Editor Overview of Printing enabled by default. Zoom 100% View the document at a 100% zoom-factor. Custom Enter a value to adjust the zoom-factor rate at which you want to view the document. Fit to Page Grow Increase the graphic to fit on the selected number of pages as entered in the Number of Sheets area. Alignment Shrink Number of Sheets Decrease the graphic to fit on the selected number of pages as entered in the Number of Sheets area. Across Enter a value to specify how many sheets are displayed. Down - Enter a value to specify how many sheets are displayed vertically. Select the positioning of the graphics on the page. The sample graphic updates when you make your selection. Paper Format Paper Form Select a page size and format from the drop-down menu. Select the orientation of the printed documentation: Portrait Landscape Margins Left Enter a value to set the left margin. Right Top Bottom Units Enter a value to set the right margin. Enter a value to set the top margin. Enter a value to set the bottom margin. Select the measurement type to apply to the margin scale from the drop-down menu. Options include Inches, Millimeters, and Pixels. Mini Preview Pane Display a sample graphic of how the document will print. The sample graphics automatically adjusts with each selection made in the Page Setup pane. Margins can be adjusted by clicking on the blue margin lines. Content Color Mode Select how you want to print the content, header, and footer, choose from: Color Document is printed using the original colors. Greyscale Document is printed using a greyscale color scheme. Save Ink Mode Graphic Mode Select either print the document in its original color state, or to select from one of two ink-saving modes: Original Print document(s) as created. No Background Set the document background to white. Additionally, the nearlywhite colors (#FFFFFFFE) in all fill, stroke, background, shadow and glow properties are set to black. Images and XPS elements are not affected. Wireframe - Set the document background to white. Additionally, all fill and background properties are set to white. If the border of a modified shape is not set or transparent, it is also set to black. Print documents in the following modes: In Design Mode, the document prints: Without animation 240

241 Overview of Graphics Editor Overview of Printing 5 Invisible elements Grid and guidelines, if enabled Content outside the graphic boundaries In Runtime, the document prints: Animation, without actual values values set to zero for printing purposes. Content inside the graphic boundaries In Online the document prints: Animation, displaying real online values (User login required). Content inside the graphic boundaries. Timeout field is enabled. Enter a value to specify a maximum wait time until all data values are gathered and processed. As soon as all values are processed the document prints. Values not processed by the specified timeout period are displayed with the #COM error. Header and Footer Print Setup Toolbar Show Grid and Guidelines Show Bounding Rectangle Specify how any enabled grid and guidelines on your document are printed. From the drop-down menu select from the following: ON to always display and print. OFF to never display and not print. AUTO to show the grid and guidelines only in Design mode and only when the grid is enabled in the document. Select whether the bounding rectangle around the elements are visible on the printed document. ON - Display bounding. OFF - never display. AUTO - Display the document bounding rectangle only in Design mode. Add a customized Header and\or Footer to your documents, and then preview how they will appear on the documents. Header\Footer Field Font Preview Keywords Images Image Library Default Display the text, keywords or images currently added to the Header or Footer field. Display the Font Chooser [ 243] pane, which allows you to customize the Header\Footer font type, color, and size. Display the text and substituted key words that will display in the header\footer. NOTE: Images are not displayed in the preview filed. The substituted keywords show the final text, when possible. Some key words are updated during the print process. Select and insert predefined text from the dropdown menu to display in the Header or Footer fields. Select and insert an image reference from the Image Library [ 242] into the Header or Footer fields. Open the Image Library and allows you to add, modify, or delete images that can be inserted in the Header or Footer fields. Click this button to return to the default Page Setup settings and disregard any selections made. 241

242 5 Overview of Graphics Editor Overview of Printing Export Import Preview Print OK Cancel Apply Save the current settings as a page setup (.xml) file for future use. Navigate to and select an existing page setup file (.xml) file to open and use on the selected items to print. Apply the settings and displays the selected document(s) in print preview. Apply the settings and sends the document to the selected printer. Send the document(s) to the printer. Close the dialog box and discard any selections made without printing anything. Accept all selections made, but, do not print anything. 242

243 Overview of Graphics Editor Overview of Printing Image Library Window The Image Library window is where you can view, import, and delete images that can be added to a document s header or footer. The Image Library window is accessed from Page Setup pane. Image Library Section\Field Images Import Delete Copy Paste Preview OK Cancel Description Display a list of available images that can be inserted into the header or footer of your document. Display the Open dialog box that allows you to browse to and add images to the Image Library list. Delete the currently highlighted image in the Images list. Copies the bitmap of the selected image onto the clipboard. The Bitmap Transparency [ 61] color is applied. Replaces the image data of the selected image with the bitmap in the clipboard. The Bitmap Transparency [ 61] color is applied. Display the currently selected image from the Images list. Enable Fill check box to have the entire image displayed in the header or footer. Save any changes made in the Image Library and closes the pane. Do not save any of the changes made in the Images Library Font Chooser The Font Chooser window allows you to customize the font settings for text in the Header and Footer fields of a document. Settings made are stored with the header and footer settings in the user settings. The Font Chooser window is accessed from Page Setup window. 243

244 5 Overview of Graphics Editor Overview of Printing Font Chooser Section\Field Font Family Size Color Style Preview OK Cancel Description Display a list of available fonts that can be applied to the header or footer of your document. Enter a font point size. Select a color to apply to the text. Apply Bold and Italic styling to the text. Display how the current font selections will be applied to the Header\Footer. The preview pane updates automatically every time a font setting is made. Save selections made and close the Font Chooser pane. Ignore any selections make and close the Font Chooser pane Working with Printing Aligning a Graphic on the Print Page You can specify how you want to align documents images on a printed page. 1. On the Home tab, in Printing group, click Page Setup. The Page Setup view displays. 2. From the Alignment section, click on one of the nine squares to specify the location of the image on the printed page. The Sample Graphic thumbnail is updated to display selected alignment. 3. Click one of the following: OK The selected alignment is saved and the Page Setup view closes. Apply The selected alignment is saved; the Page Setup view remains open. 244