This section provides background information for the Graphics Viewer. For related procedures or workflows, see the step-by-step section.

The Graphics Viewer allows you to view the graphics representing your facility or equipment. You can change the current state of an object’s properties in the Properties pane by selecting a symbol on the graphic.

Select a topic to continue:

Graphics Viewer Workspace – Tile View

Filtering in the Graphics Viewer tab

Graphics are located in the Application View under Applications > Graphics.

In System Browser:

  • When you select Graphics, the Graphics Viewer tab displays all the graphics and viewports in a tile view.
  • When you select a Graphics subfolder, the Graphics Viewer tab displays the tile icons of the graphics and viewports available for that folder.
  • When you select a graphic or viewport, the selection displays in the Graphics Viewer tab.

From the Graphics Viewer tab:

Click on a graphic or viewport tile to display the graphic in the Graphics Viewer tab.

Filtering in the Graphics Viewer tab

You can filter the Graphics Viewer tab by using the Search box. As you enter the desired text, the filtered graphic objects display in the view.

Graphics Viewer Workspace

The Graphics Viewer workspace provides tools that enhance your view of the current graphic. The tools display when you have a graphic open in the Graphics Viewer tab.

Graphics Viewer Workspace




Coverage Area

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 one of the following filter menus for depths, disciplines, and layers, depending on the graphic configuration:

Show All and Hide All allows you to toggle between the visibility of all items in the Layers and Discipline menus.

  • Depths Menu
    • Displays when a graphic has multiple depths.
  • Disciplines Menu
    • Displays all the layers associated with a discipline.
  • Layers Menu
    • Displays when a graphic has multiple layers without disciplines assigned to them, and one depth.
    • Displays all the layers configured within the graphic.


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.

Zoom-In (+)

Allows you to zoom in by + 25% on the active graphic with each mouse click or tap.

Zoom-Out (-)

Allows you to zoom out by - 25% on the active graphic with each mouse click or tap.

Keyboard, Mouse, and Touch-Gestures

The following are tasks available in the Graphics Viewer that can be accomplished using keyboard and mouse shortcuts or touch-gestures.


Keyboard and Mouse

Touch-Gesture Equivalent

Primary Selection



Secondary Selection







CTRL + Mouse Wheel

Pinch Gesture

Alarm Notification in Graphics

Alarm Popover

Alarm Indicator Customization

When a data point goes into alarm, an alarm notification icon displays in the top-left corner of the object, element, or Symbol on the graphic. As you manage the alarm via the regular workflows in the Flex Client application or the installed client, the alarm notification icon changes according to where the alarm or event is in the alarm management process. Alarm Indicator positioning on a graphic is customizable in the Desigo CC management station.

For information on managing alarms and event notification, see Event Handling.

The alarm notification icons in the Graphics Viewer provide information about:

  • The current step in the alarm process.
  • The condition of the point that triggered the alarm.

For information on the alarm notification icons, the status of the condition, see Event Details.

Alarm Popover

If a graphic has an object with one or more alarm events, an alarm popover displays on the canvas and allows you to view the event list details for each alarm as well as acknowledge, reset, and silence them from within the popover. You can also access the Desigo CC event list from within the popover.

The alarm popover header displays the object name or description that is in alarm, depending on the Text Layout selected for System Browser. If there are multiple events for an object, the header provides a count of the number of items in alarm.

For more details on event management, see Event Details.

Alarm Indicator Customization

You can customize the size of the alarm indicators that display on the graphic when an object is in alarm, or you can disable them so that they do not display at all. The following parameters are configurable in the Default.hldl.json file found in the project’s WebSites profiles folder:

  • EnableAlarmIndication – Allows you to enable or disable the display of alarm indicators on a graphic:
    • True – The alarm indicator displays when the object is in alarm.
    • False – The alarm indicator does not display when the object is in alarm.
  • AlarmIconSize – Allows you to set the size of the indicator between 8 – 64 pixels. The default pixel size is set to16.

Coverage Area

Allows you to display 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. The background color of the coverage area varies depending on the configuration of the 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 devices 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 areas that are associated with the graphic under the heading that is named after the type of the monitoring object. For example, if the monitoring object is a camera, the heading displays Camera in the Related Items tab.

Filtering within a Graphic

Using a filter helps you view and focus on parts of the graphic that are of current interest. Filter menus are available for depths, disciplines, or layers of a graphic. The configuration of the graphic determines which filter menu is available.

The Filter menu allows you to use the Show All and Hide All options to toggle between the visibility of all items in the Layers or Discipline menus.

The filter selections do not save when you navigate to another graphic in System Browser. However, the selection is retained when you switch back and forth between the active graphic and the Textual Viewer.

When the user switches back from the textual viewer to the graphics viewer of the same graphic, then the saved filter settings of that graphic will be restored.

You access the filtering features by selecting the Filter icon . The following menus may be available:

Depths: This menu displays when the graphic has more than one depth. You can select one depth at a time to display in the graphic. The active depth that is displayed has the Selection indicator next to it.

Disciplines: Displays when layers have been associated with disciplines during configuration. Select the disciplines you want to display in the graphic; grayed out disciplines do not display. This menu allows you to Show All and Hide All.

Layers: Displays when there are multiple layers, no depths, and no configured disciplines. Select the layers to display. As you do so, a checkmark displays next to the layer. This menu allows you to Show All and Hide All.


Primary and Secondary Selections

When you select a graphic or an object associated with a graphic in System Browser, the Graphics Viewer tab displays the representative graphic or graphic template in the Primary pane and the Property Viewer tab displays the associated object properties.

The object properties displayed in the Property Viewer change according to your selection, as follows:

  • Primary selection – Double-clicking a symbol in a graphic changes the selection in the System Browser to the top Related Item of the selected object, which can change what is displayed in the Primary pane. The properties displayed in the Property Viewer are replaced with the object properties that correspond to the current selection.
  • Secondary Selection – Single-clicking an object in a graphic replaces the properties displayed in the Property Viewer with the object properties that correspond to the current selection.


Related Items Navigation

The selection logic allows you to navigate through a selected node’s related items and all the graphical items, if any, of its ancestors. Ancestors follow a child-parent-grandparent model, so when you select an object, you are working your way up the hierarchical tree of the System Browser. The selection logic searches all views where the selected node resides in and has a different ancestor. If the object and its ancestors have any related graphic items, the graphic displays in the Primary pane, and you can navigate via the next and previous button on the toolbar.

When you select a subpoint in System Browser, the graphic template of the parent object displays. The Graphics Viewer selects (adorns) the subpoint’s associated symbol on the graphic template, if it exists.


Standard Install Client (.CCG) versus Flex Client Application (.SVG)

Graphics and Symbols are created in the standard install client and upon saving, three file types are created. One for use on the standard install client (.CCG/.CCS), a .PNG, and a .SVG for use in the Flex Client application. If a graphic has objects that contain a radial gradient fill, you may notice subtle variations between its .CCG file on the standard install client and its .SVG file on the Flex client. Additionally, prior to 4.2 SR2 the Radial Gradient fill would not display properly.