The Left Builder Menu contains important panes that allow you to choose from multiple views to help with the graphic building process.

Builder Panel Menus (Left)

Pane Menu Views

Click to display a list of available panes.

Pane views

Pane options

Collapse

Collapses the selected the pane.

Add

Adds an additional pane to the left menu.

Float

Allows for the selected pane to be placed at any location within the browser / Builder pane.
To have the selected pane go back to the original location, click Dock from the drop-down.

Properties Pane

You can view, edit, add, or remove any object or component property within the graphic (including the background of the graphic itself).

Classes

Classes

The Classes property allows you to add in special classes on certain components to change the way they look or act.

You can add CSS and Classes by following this guide: Adding CSS to Graphic.

The Properties pane has two sections:

  • Basic
  • Advanced

Basic Properties

Basic Properties

In the Basic section, the most basic properties that are available to that component such as:

  • Background: Choose between a Color or Image as a background. Selecting Image gives you the option to upload, position, and repeat/norepeat for the image.
  • Content Layout: Allows you to choose how the components are laid out and organized. Absolute, Horizontal, Vertical, centered, left aligned etc.
  • Position and Size: Adjust X & Y positions, Width, and Height.
  • Dynamic Scaling: When enabled, allows you to adjust the scaling of the object, Initial Size, Grow %, Shrink %.
  • Border: Gives the object a border and determines how it displays.
  • Drop Shadow: Allows you to add or remove a drop shadow effect.
  • Rotation: Allows you to rotate the component.

Advanced Properties

The Advanced section contains tags and property tags that belong to that component.
You can add, edit and remove tags to any component or object in the Graphics Builder.

Advanced Properties

Click to add a new tag or property tag to the component.

Click the icon left of the tag to edit the property type or remove the tag all together.

virtualPointRefis important and indicates what point is bound to that component.

Components

Components section contains multiple graphical components provided in the Desigo Optic graphic library.

The Components panel also contains any saved Models or Animations the user may have previously saved/created in the graphics builder. 

  • Components
  • HTML Components
  • AM Charts Category
  • Central Plant l 2D
  • Central Plant Sensors Category
  • Coils
  • Dampers
  • Ducts
  • Fans
  • Filters
  • Misc
  • Round Ducts
  • Sensors
  • SVG Gauges Category
  • SVG Misc Category
  • Models

Layers

The Layers pane allows you to view all components and objects within your graphic file.

Layers pane

Click to show or hide components.

Click lock or unlock a component.
Locking a component makes it non-selectable

Virtual Points

The Virtual Points pane contains all of the points that have been brought into the current graphic. This menu allows for you to do several different things.

Virtual Points pane

Create a Smart Label

To create a smartLabel, drag-and-drop one or more points onto the Builder.
To multi select points, hold CTRL and select the points.

Binding Points

To bind points, drag the point from the Virtual Points pane and then drop it onto the object in the Builder.

Editing and Tagging Virtual points

You can add, remove, or edit tags on points in the Virtual Points pane.

Click the text to rename the point internally.
This does not affect the name of the point outside of the graphic.

Click the icon next to the points name and then name the tag.
If it needs to be a certain type of property tag, click on the icon to the left of the tag name.

Click to add a new tag or property tag, and in the drop-down, select Add Property.

Tag types

Equipment

The Equipment pane allows you to view the database tree architecture. You can drag-and-drop a site, floor, equip, or points from the pane onto the graphic.

Equipments pane

Events

The Events pane displays all events available within the graphic, and displays what type of event it is and what it is running on.
You can add, delete, or edit any event.

Events pane

Programs

The Programs pane displays all programs within the current graphic.
You can add, delete, or edit programs.

Programs