Graphic Components and Types

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 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 the 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 tab. 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 but no named substitutions.

Sample Graphic

A sample graphic is a graphic page that does not have a corresponding data point, since it is not stored in the project’s Graphics folder. Sample graphics are located in a library's Sample Graphics 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.

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 management platform. A graphic has the following additional attributes:

A graphic is created is created and edited in the Graphics Editor 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.

Information

NOTE 1:
Images larger than ten million pixels will not display in the Web Client due to memory consumption restrictions. If you have an image this large and want to view it in the Web Client, use an image resizing tool to reduce the size of the image.
NOTE 2:
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 2D AutoCAD file created with the Autodesk software. This is accomplished in the AutoCAD importer tool installed with the Desigo CC software.

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


	Height	Width	Logical Scale Factor	Logical Width	Logical Height
Height	x				x
Width		x		x
Logical Scale Factor			x	x	x
Logical Width			x	x	x
Logical Height			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.

Information

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 menu available on right-click, 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 can be viewed using 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.
The image of the selected elements 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).