Working with Drawing Tools and Shapes

How do I open the Drawing Tools And Shapes panel?

To open the Drawing Tools And Shapes panel, click in the Graphics Editor.

What shapes are available in the Drawing Tools And Shapes panel?

There are three categories of shapes in the Drawing Tools And Shapes panel:

What are the drawing tools available in the Drawing Tools And Shapes panel?

The following table lists the available drawing tools.
Table 1. Drawing Tools
Tool Name Description


Select Tool Selects a shape or symbol on the Graphic Canvas.

Keyboard shortcut: v


Pan Tool Pan the Graphic Canvas.

Keyboard shortcut: h


Line Tool Draws a line.

Keyboard shortcut: l

Note: The keyboard shortcut for this shape selects the shape from the Drawing Tools. You must click and drag your cursor on the Graphic Canvas to draw the shape.


Path Tool Draws a custom shape.

Keyboard shortcut: p

Note: The keyboard shortcut for this shape selects the shape from the Drawing Tools. You must click and drag your cursor on the Graphic Canvas to draw the shape.


Text Tool Adds text on the Graphic Canvas or to label a shape or a symbol.

Keyboard shortcut: t

Note: The keyboard shortcut for this shape selects the shape from the Drawing Tools. You must click and drag your cursor on the Graphic Canvas to draw the shape.


Image Tool Adds an image from your computer.
Note: The following file formats are supported: .jpg, .jpeg, .png, .gif, and .bmp. The maximum supported file size is 1 MB.

How do I pan the Graphic Canvas?

When zoomed in to the Graphic Canvas, portions of the Graphic Canvas may be hidden.

To pan the Graphic Canvas to view the hidden portions of the Graphic Canvas:
  1. Click on the Pan Tool icon in the Drawing Tools And Shapes panel.
  2. Click on and drag the Graphic Canvas.

How do I draw a line?

To draw a line, do one of the following:
  • Click on the Line Tool icon in the Drawing Tools And Shapes panel and hold the left-click button of the mouse. Drag the line to the Graphic Canvas and draw the line to the desired length.
  • Click on the Line Tool icon. Click on the Graphic Canvas and draw the line to the desired length.

What is the Path tool and how do I use it?

The Path tool allows you to create a custom shape. You can use the Path tool to draw a shape not available from the Basic Shapes, Arrow Shapes, and Flowchart Shapes. You can also use the Path tool to draw a shape over a floor of a building or a room on a floor plan. You can use the Path tool on the floor of a building to navigate to that floor's Space dashboard or use the Path tool over the room on a floor plan to display a thermographic of the temperature status.

To use the Path tool to draw a custom shape (straight lines and curves):
  1. Click on the Path Tool icon in the Drawing Tools And Shapes panel. The cursor changes to a plus icon.
  2. Click on the Graphic Canvas to create an anchor point and begin drawing the custom shape.
    Note: This first anchor point appears red on the Graphics Canvas. The default anchor point type is straight line. See step 6 for creating curves.
  3. Continue clicking on the Graphic Canvas to draw the shape.
  4. Click on the first place you clicked (the red anchor point) for the shape to complete drawing the shape. A blue selection box frames the shape.
  5. Double-click on the shape to activate the Edit function and use the Edit toolbar to edit the properties of the custom shape.
  6. To create a curve, right-click on the desired anchor point and select Curved.
To use the Path Tool to trace a floor of a building for navigation to the floor's Space dashboard or to an Equipment dashboard:
  1. Ensure you have a background image of your building added to the Graphics Canvas.
  2. Add a layer to your graphic.
  3. Click on the Path Too icon in the Drawing Tools And Shapes panel. The cursor changes to a plus icon.
  4. Click on the Graphic Canvas to create an anchor point and begin drawing the path shape to outline the floor.
    Note: This first anchor point appears red on the Graphics Canvas. The default anchor point type is straight line. See step 8 for creating curves.
  5. Continue clicking on the Graphic Canvas to draw the outline of the floor.
  6. Click on the first place you clicked (the red anchor point) for the shape to complete drawing the outline of the floor. A blue selection box frames the shape.
  7. Double-click on the shape to activate the Edit function.
  8. To create a curve, right-click on the desired anchor point and select Curved.
  9. From the Edit toolbar, click to change the opacity of the path shape.
  10. Click the Fill Color option. The Fill Color window appears. Use the Opac slider or field in the bottom-right corner of the window to change the opacity of the path shape. Click OK.
  11. From the Edit toolbar, click to bind the path shape to a Space dashboard or Equipment dashboard. The Binding panel opens.
  12. From the Binding panel – Explicit tab, click on the desired space or equipment and drag it to the Navigation field under the Edit toolbar Bindings option. Alternatively, select the Network tab from the Bindings panel, click on the desired Point and drag it to the navigation field under the Edit toolbar Bindings option.
    Figure: Binding – navigation example


To use the Path tool to outline a room on a floor plan and then bind to a point to view the point status:
  1. Ensure you have a background image of your floor plan added to the Graphics Canvas.
  2. Click on the Path Tool icon in the Drawing Tools And Shapes panel. The cursor changes to a plus icon.
  3. Click on the Graphic Canvas to create an anchor point and begin drawing the path shape to outline the room.
    Note: This first anchor point appears red on the Graphics Canvas. The default anchor point type is straight line. See step 7 for creating curves.
  4. Continue clicking on the Graphic Canvas to draw the outline of the room.
  5. Click on the first place you clicked (the red anchor point) for the shape to complete drawing the outline of the room. A blue selection box frames the shape.
  6. Double-click on the shape to activate the Edit function.
  7. To create a curve, right-click on the desired anchor point and select Curved.
  8. From the Edit toolbar, click to change the opacity of the path shape.
  9. Click the Fill Color option. The Fill Color window appears. Use the Opac slider or field in the bottom-right corner of the window to change the opacity of the path shape. Click OK.
  10. From the Edit toolbar, click to bind the path shape to a Space dashboard or Equipment dashboard. The Binding panel opens.
  11. From the Binding Panel – Explicit tab, select the desired point and drag it to the bound point field under the Edit toolbar Bindings option. Alternatively, select the Network tab from the Bindings panel, click on the desired Point and drag it to the navigation field under the Edit toolbar Bindings option.
  12. Select the Bound Point check box.
    Figure: Binding – point example


Note: A path takes a point's status color over the fill color. This means that the fill color of the shape you draw with the path tool automatically matches the status color of the point to which you bind the shape, even if you choose a different fill color. The status color appears as defined in the System Preferences in the Graphic Settings tab in SMP.

What is the Edit function within the Path tool?

The Edit function allows you to edit an existing path created by using the Path tool. This function includes paths that are created in Metasys UI versions 2.1 and 3.0.

How do I activate the Edit function within the Path tool?

Double-click on an existing path that was created by using the Path tool to activate the Edit function .
Note: When the Edit function is activated, the Path Tool icon is highlighted in the library, and all anchor points appear. The Path tool cursor icon changes to a Path tool plus cursor icon when you move your cursor on the path stroke, and it changes to a Path tool drag cursor icon when you move your cursor on an anchor point.

How do I edit an existing path created with the Path tool?

  1. Double-click on the path to activate the Edit function. When the edit function is activated, all anchor points appear.
    Note: You need to double-click on the actual path and not the selection box to activate the Edit function, as the Edit function is disabled outside the path boundary.
  2. Edit the path shape as desired by moving the anchor points.

How do I edit an existing path created by the Path tool which is grouped with other elements?

  1. Double-click on the group to enable the group edit.
  2. Double-click on the path in the group to activate the Edit function. When the Edit function is activated, all anchor points appear.
    Note: You need to double-click on the actual path and not the selection frame to activate the Edit function, as the Edit function is disabled outside the path boundary.
  3. Edit the path shape as desired.

How do I add new anchor and control points to an existing path?

To add new anchor and control points to an existing path (straight line):
  1. Double-click on the existing path to activate the Edit function.
  2. Move your cursor on the path stroke and the Path tool plus cursor icon appears. When you move your cursor onto a line, the line turns blue.
    Note: When you move your cursor out of the path area, changes back to your standard cursor icon.
  3. Move the cursor along the line until you see the add point cursor with a blue dot, which shows you the exact location of the proposed new point:
  4. Click on the line with the blue dot to create the proposed anchor point.

To add new anchor and control points to an existing path (curve):
  1. Double-click on the existing path to activate the Edit function.
  2. Move your cursor on the path stroke and the Path tool plus cursor icon appears. When you move your cursor onto a curve, the curve turns blue.
    Note: When you move your cursor out of the path area, changes back to your standard cursor icon.
  3. Move the cursor along the curve until you see the add point cursor with a blue dot, which shows you the exact location of the proposed new point:
  4. Click on the curve with the blue dot to create the proposed anchor point with control handles.
    Note: This action does not change the shape of the curve. See How can I edit a path or shape by dragging points? for information about changing the shape of the curve.

Is there a restriction on the number of anchor and control points that can be added?

There is no restriction on point addition. You can add a point to an existing point, for example.

How can I edit a path or shape by dragging points?

When the Edit function is activated, all anchor points appear. You can edit the path or shape by moving these anchor points:

  1. Hold the left-click button of the mouse to select a point for dragging.
  2. Drag the point to change the form of the path or shape.
  3. Press Esc to complete the editing.
  4. Move the path or shape to your desired location on the canvas.
See also How do I convert anchor point types?.
Note: When you work with MAC IOS version 10.13.1 (Safari version 11.0.1), the graphic reverts to its original shape after you edit the path and move it on the canvas. To prevent this, complete the following steps:
  1. Hold the left-click button of the mouse to select a point for dragging.
  2. Drag the point to change the form of the path or shape.
  3. Press Esc to complete the editing.
  4. Click SAVE.
  5. Click EXIT to exit the Graphics Editor.
  6. Reopen the edited graphic in the Graphics Editor.
  7. Move the graphic on the canvas as desired.

How do I convert anchor point types?

To change the anchor point from curved to straight or vice versa:

  1. Right-click the anchor point that you want to change and the Path Editing window displays.
  2. Select Curved or Straight accordingly.
Note: You cannot convert points on multiple layers, as the path editing option only applies to the active layer at any given time.

How can I delete anchor and control points?

To delete an anchor point or a control point (with control handles):
  1. Right-click the anchor or control point that you want to delete and the Path Editing window displays.
  2. Select Delete.
Notes:
  • You can only delete anchor points if there are more than three.
  • After you delete a point, the adjoining points are connected and the shape changes accordingly.
  • You cannot delete points from multiple layers, as the path editing option only applies to the active layer at any given time.

Is the Graphics Canvas disabled while the Edit function is activated?

No, the Graphics Canvas is not disabled while the Edit function is activated.

What happens when I click on the Tab button on my keyboard while the Edit function is activated?

When you click on the Tab button while in Edit function:
  • The first click moves you out of the editing mode.
  • The second click works as usual and takes you to the next element on the Graphics Canvas.

How do I exit the Edit function?

To exit the Edit function you can press Esc or any other supported keyboard shortcut keys, except P, H, Zoom in and Zoom out.

How do I add text?

To add text:
  1. Click on the Text Tool icon in the Drawing Tools And Shapes panel .
  2. Click on the Graphic Canvas.
  3. Enter the text.

How do I add an image?

To add an image (not a background image):
  1. Click on the Image Tool icon in the Drawing Tools And Shapes panel. When you hover your cursor over the Graphic Canvas, appears as your cursor.
  2. Click in the location you would like the image placed. The Import File window appears.
  3. Click Choose file. The Open dialog box appears.
  4. Browse to the image location and select the image. Click Open.
    Note: The following file formats are supported: .jpg, .jpeg, .png, .gif, and .bmp.
  5. In the Import file window, click SAVE.

How do I intersect two shapes?

Retains the overlapping areas and removes the non-overlapping areas of the selected shapes. This option is only enabled when two closed shapes are selected on the Graphic Canvas. To intersect two shapes that overlap each other:
  1. Draw two shapes that overlap each other. Or select two shapes that overlap each other.
  2. Click . The intersected shapes are now one shape on the Graphic Canvas.