The Left Builder Menu contains important panes that allow you to choose from multiple views to help with the graphic building process.
Pane Menu Views
Click to display a list of available panes.
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
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
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.
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.
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.
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.
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.
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.
Programs
The Programs pane displays all programs within the current graphic.
You can add, delete, or edit programs.