Creating a Floor Plan Graphic

Scenario: You want to create a project graphic that illustrates a floor plan that may contain one or more subsets, or zones, and devices that you would like to monitor and control independently. You want to be able to click a subsection of the floor plan in the Graphics Viewer, and get a zoomed-in view of that area.

The workflow to create a graphic floor plan covers the following:

  • Creating a background layer: This layer contains the AutoCAD drawing or image file that represents the actual layout of the floor plan. On this layer you will also create text labels to identify the Zones when the graphic displays in the Graphics Viewer.
  • Creating a zone (viewport) layer: This layer contains the zones that are created using viewports.
  • Creating a device depth and layer: The device depth and layer contains links to all, or a subset, of devices, such as field panels or fire extinguisher, and so on, relating to the zone layer. The device depth is where the zoom-factor for the zones and devices are set.
  • Configuring the automatic zoom level of selected objects – You must disable the graphic property Auto-Fit, so that selected objects display at the zoom level of the associated depth.

 

Reference:

  • For background information on depths, see Depths.
  • For background information on viewports, see Viewports.

 

Workflow diagram:

 

 

Steps:

1 – Configure a Background Layer and Depth
  • System Manager is in Engineering mode.
  • You have a graphic open and are in Design or Test mode.
  1. Make sure the Element Tree view is visible; from the bottom left side of the view, click Show all Elements .
  • The Element Tree now displays all elements and objects that are placed on the graphic.
  1. With Layer (Layer1) selected, do the following:
    a. Select the Use check box to enable it.
    b. Select the Visible check box to enable it.
  • The layer is now used and visible in Runtime mode and in the Graphics Viewer.
  1. Navigate to the Properties view (Layer Properties), expand the General section, and in the Description field, type Background.
  1. (Optional) Expand the Layer section, and from the Discipline drop–down menu select an associated discipline. In the future, when the graphic displays in the Graphics Viewer, you can sort the layers by discipline.
  1. Navigate to the Depths view, and click the current Depth Name and then type the new name for it.
  • For this example, type Background.
  • The depth is renamed.
  1. Click Save.
  • You are ready to import the background (floor plan) image or AutoCAD file.

 

2 – Import a Background Image File or DWFx AutoCAD Drawing

If you are importing a DWG or DFX AutoCAD drawing, see the Importing an AutoCAD Drawing section, and then right-click the topic and select Back to return to this workflow when you are finished.
NOTE: Importing a 2D DWFx drawing is possible on installed clients, as well as a web server and a remote client.

  • System Manager is in Engineering mode.
  • You have a graphic open. You are working in Design or Test mode.
  1. On the Home tab, in the Elements group, click Import AutoCAD and XML Image File .
  • The Open dialog box displays.
  1. From the Open dialog box, select the file you want to import, and click Open.
  • The file is imported and displays as an XPS element on the canvas because it is based on the XML Paper Specification (XPS) from Microsoft. Therefore, this file type does not require a conversion in the AutoCAD Importer window when imported.

 

3 – Import a DWG or DFX Drawing

Once you have finished customizing your 2D DWG or DXF drawing, you can do one or more of the following:

  • Import the drawing as an XPS element – This is the recommended method for importing an AutoCAD drawing into the Graphics Editor. To do this, click OK. The subsection displays in the Graphics Editor as an XPS element on a graphic.
  • Import a larger drawing as an Image element – This may help with system performance issues due to larger drawing files. To do this, select the Convert to check box, and select one of the following:
    NOTE: Lower image resolution results in low image quality, but better system performance, while a higher resolution results in higher image quality but slight performance degradation.
    • Highest Quality Image – (16000)
    • High Quality Image (8000)
    • High Quality Image (6000)
    • High Quality Image – (4000)
    • Normal Quality Image – (2000)
  • Save the drawing as a DWFx file – To do this, click Export to. The Save As dialog box displays. Enter a name and location for the new file, and click OK. The drawing is saved as a DWFx file.

NOTE: If you made any unit changes to the file, the Apply Units dialog box displays. Click Yes to apply the changes during the conversion to XPS or the save operation to a DWFx file.

 

4 – Create a Zone Layer

Scenario: You want to create graphic subviews, known as viewports, and then manually associate them to individual data points or system objects. The viewports are displayed as children of their parent graphic in System Browser.

This scenario explains creating a viewport layer or a zones layer for the floor plan example.

  • You have created a background layer for your floor plan graphic.
  1. From the Viewports group, click Viewport Mode .
  • The Viewport mode is now enabled and the icon background changes to a darker shade of blue. In the Element Tree, a Layer (Manual Viewports) item is added.
    NOTE    : In the Viewport mode, you can only modify manual viewports; all other elements on the graphic are visible, but not active for editing.
  1. From the Viewports group, click Manual Viewport . The mouse pointer turns to a crosshair on the canvas.
  1. On the graphic, draw the viewport over the area you want included. As you draw the viewport, the area is shaded in light blue. Release the mouse button when you are finished. The viewport area is enclosed in red brackets.
  • In the Element Tree, a Layer (Manual Viewports) is created, and Viewport 1 displays as a child of the layer.
  1. For each viewport you want to create, repeat steps 2 and 3, until you have the required number of viewports drawn on the graphic.
  • Each viewport is added to the Manual Viewport layer.
  1. From the Element Tree, select Viewport. Then navigate to the Properties view (Viewport Properties), expand the General section, and type a name for the viewport.
  • For this example, type Zone 1.
  • The name of the viewport displays on the graphic within the viewport brackets, and in the Element Tree, the name displays next to the viewport.
  • NOTE: Each viewport must have a name and must be unique from all other graphic viewports associated with the same graphic. All printable characters are allowed, including special characters; for example, spaces, dots, semicolons, brackets, and so on.
  1. Click Viewport mode to exit.
  1. Click Save .
  • In System Browser, the manual viewport displays under the associated graphic node as a child.

 

5 – Set the Navigation Target

Scenario: You want to associate a text label with a specific zone. In the Graphics Editor, when you click the label displayed on the graphic, the graphic will zoom into that zone. After this procedure, you will create a device layer and depth to complete this process.

  • You have a graphic open and have created viewports for a floor plan graphic.
  1. In the Element Tree, click the layer that contains the background image for your floor plan.
  • In this example, it is the Background layer.
  1. To create a text box in the center or at the top of a viewport, on the Home tab, from the Elements group, click Text and then draw a text box over the area of the viewport on the canvas.
  1. Do the following:
    a. Double-click the text element and type the name of the viewport, In this example, Zone 1.
    b. Format the text box as needed in the Properties view (Text properties) and the Home tab, Format group.
  • In the Element Tree, Text “Zone1” displays.
  1. Repeat Steps 2 and 3 for each viewport.
  1. In the Element Tree, select Text “Zone 1” and in the Properties view (Text Properties) expand the Command and Navigation section.
  1. In System Browser, select Application View.
  1. Select Graphics, and expand the floor plan graphic you are working on.
  1. Under the parent graphic, click and drag Zone 1 to the Command and Navigation section, and then drop it in the Target field.
  • The text box for Zone 1 and the viewport for Zone 1 are now associated.
  1. Repeat steps 5, 6, and 7 for each viewport zone until each one is matched to the text box with the same name.

 

6 – Create a Device Depth and Layer
  • You have created a background graphic with viewport subsections called zones. You want to create a layer and a depth that display, for example, all the Fire Detector devices.
  1. Navigate to the Depths view, and click Add New Depth to add a new depth.
  • A new depth named Depth 1 displays.
  1. Under the Depth Name column, click the Depth 1 text and type a name for the depth.
  • For this example, Device.
  1. In the Element Tree, click Add New Layer .
  • The new layer displays in the Element Tree. In this example, Layer(2).
  1. Navigate to the Properties view (Layer Properties), expand the General section, and in the Description field, type a name for the layer.
  • For this example, type Device.
  1. In System Browser, select Management View.
  1. Drag the devices that you want to display on the Devices layer.
  1. Click Save .

 

7 – Configure the Automatic Zoom Level of Selected Objects

The Graphic > Auto Fit allows the graphic to automatically adapt to the pane size. If you disable this feature, the graphic displays at a zoom factor of your graphic size divided by the depth display size and then multiplied by 100% . This allows your default zoom factor to zoom in on specific devices when you select them.

  • You have your floor plan graphic open.
  1. Click anywhere in the white space of the graphic, and then click Properties view (Graphic Properties).
  1. Navigate to and expand the Graphic property, and then select the Auto fit check box to disable the feature.
  1. In the Width property, the width property of your graphic, adjust as needed. This is the Graphic Size property that affects your automatic zoom.
  1. Navigate to the Depths view, and set the Device depth properties according to the zoom factor you want the devices to display at in the Graphics Viewer.
  • Display Size
  • Symbol Scale Factor
  1. Click Save.

You have created a graphic that allows you to zoom in on subsections of a floor plan and view devices and objects and specified zoom level.