> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.kodelabs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Floor plan graphics

> Place devices on floor plans, configure smart markers, zone drawings, tables, and interactive data overlays using the Graphic Tool.

<Info>
  Floor plan graphics are a building-level feature. Select a building from the [sites list](/products/kode-os/sites-and-map) to access floor plans through the Areas module.
</Info>

Floor plan graphics display building floor plans with device locations and live data overlays. The [Graphic Tool](/products/kode-os/graphics/graphic-tool) provides advanced features including smart markers, tables, zone drawings, hover-over interactions, and layer configurations that go beyond basic device placement.

For 3D BIM models on area dashboards, see [Add a BIM model to an area](/products/kode-os/areas#add-a-bim-model-to-an-area).

## Navigate to a floor plan

<Steps>
  <Step title="Select your site">
    Click `Sites` in the left navigation bar and select the building.
  </Step>

  <Step title="Open areas">
    Click `Areas` in the left sidebar menu. Select a floor from the area list.
  </Step>

  <Step title="View the floor plan">
    The floor plan displays with device pins and live data overlays for the selected floor.
  </Step>
</Steps>

## Interact with devices on the floor plan

Each device appears as a marker on the floor plan with its current value displayed. Devices are color-coded by status:

* **Green** means the device is online and operating normally
* **Red** means the device has an active alarm
* **Grey** means the device is offline

Click a **device pin** to open a quick-access panel with options to view readings, command writable points, or navigate to device details.

<Info>
  ### Command actions and priority levels

  Cloud BMS uses a BACnet-inspired priority model for writable points. The same command dialog appears for BACnet and non-BACnet integrations, such as REST API thermostats. How each action maps on the device depends on the connector.

  BACnet points that accept commands have **16 priority levels** (1 is highest, 16 is lowest). When every level is empty (`null`), the point uses a **fallback / default** value (`Relinquish_Default` in BACnet). That fallback is **not** a 17th BACnet priority. Some interfaces label it as level 17 for display only.

  `Override` and `Set` turn different knobs under the hood, even when the visible value looks the same.

  | Action     | What it writes\*     | Description                                                                                 |
  | ---------- | -------------------- | ------------------------------------------------------------------------------------------- |
  | `Override` | Priority 8\*         | Temporary exception in the priority array. Takes precedence over lower-priority automation. |
  | `Set`      | Fallback / default\* | Changes the fallback or default value.                                                      |
  | `Auto`     | —                    | Clears an `Override`                                                                        |
  | `Release`  | —                    | Clears a `Set`                                                                              |

  \*Typical for most BACnet and Niagara deployments. Connectors and site standards can differ.

  `Override`, `Auto`, and `Set` borrow Niagara-style action names. `Release` is a Cloud BMS action that clears a `Set`.

  In Niagara-style control, `Set` keeps a non-null fallback so sequences and logic keep a reliable baseline. Use the priority array (including `Override`) for programmed automation and temporary exceptions.

  To make `Set` write to priority 16 instead of the fallback or default, enable **`Set in Slot16`** (Niagara) on the point. Configure that option from [device details](/products/kode-os/devices/devices#view-and-edit-points), [device templates](/products/kode-os/devices/device-templates), or [points batch update](/products/kode-os/points/points-batch-update).
</Info>

## Create a floor plan graphic

Before creating a floor plan graphic, make sure you have [created an area](/products/kode-os/areas#add-areas) in the Areas module. The graphic must be linked to an existing area.

Navigate to `Graphics` in the left sidebar and select the `Floor Plans` tab. Click `New Graphic` and select the area to link the graphic to. You can also create a floor plan from within an area by opening the area dashboard and [adding a graphic widget](/products/kode-os/areas#add-a-graphic-widget-to-an-area).

## Place devices on floor plans

<Steps>
  <Step title="Enter edit mode">
    Navigate to the floor plan view. Click the three-dot menu and select `Edit`.
  </Step>

  <Step title="Select a layer">
    Use the layer tabs in the bottom toolbar to select the device category layer.
  </Step>

  <Step title="Drag devices onto the plan">
    From the `Devices` tab on the left panel, drag equipment onto the floor plan at their physical locations. Zoom in for precise placement.

    <Frame caption="The Devices tab lists all devices and points available for the selected area">
      <img src="https://mintcdn.com/kodelabs/1vjgtnWf-CUbC2z9/images/kode-os/graphics/kode-os-graphics-canvas-devices.png?fit=max&auto=format&n=1vjgtnWf-CUbC2z9&q=85&s=7182c570d3351cb147716ce13cfd5ccb" alt="Graphic Tool workspace showing a device list with FCU and VAV devices on the left and a floor plan with device markers on the right" width="1024" height="749" data-path="images/kode-os/graphics/kode-os-graphics-canvas-devices.png" />
    </Frame>
  </Step>

  <Step title="Use auto-suggest">
    Switch to the temperature layer and click `Auto Suggest` in the upper right corner. Cloud BMS maps the temperature points to the placed devices.
  </Step>

  <Step title="Save the placement">
    Click `Save` to finalize the device placement.
  </Step>
</Steps>

## Smart markers

Smart markers provide dynamic, color-coded visualizations based on live point values. Instead of showing a static icon, smart markers change their appearance as values enter different ranges.

<Frame caption="Smart markers on the Temperature layer display live temperature readings with color coding">
  <img src="https://mintcdn.com/kodelabs/XLzbYkNX6LnaxcLs/images/kode-os/graphics/kode-os-graphics-temperature-markers.png?fit=max&auto=format&n=XLzbYkNX6LnaxcLs&q=85&s=72de753a3f308883fc9e6be4d59a8a5f" alt="Graphic Tool in Temperature layer view showing expanded device points and orange smart markers displaying temperature values on the floor plan" width="1024" height="673" data-path="images/kode-os/graphics/kode-os-graphics-temperature-markers.png" />
</Frame>

Each smart marker supports three display modes:

* **Icon only** -- the marker displays as a colored icon reflecting the current value range
* **Value only** -- the marker displays the numeric value with color coding
* **Icon and value** -- the marker displays both the icon and the value

The color rules and ranges are configured in the [Graphic Tool settings](/products/kode-os/graphics/graphic-tool#settings). For each marker, you select a point and a smart marker configuration. See the [Graphic Tool](/products/kode-os/graphics/graphic-tool#smart-markers) for full details on smart marker display options and marker style configuration.

### Difference from setpoint smart markers

These smart markers change appearance based on how far the current value is from the device's setpoint. This is useful for quickly identifying zones that are not achieving their target temperature.

<Frame caption="Green markers indicate values within tolerance. Red markers exceed tolerance. The bell icon signals an active FDD alarm.">
  <img src="https://mintcdn.com/kodelabs/XLzbYkNX6LnaxcLs/images/kode-os/graphics/kode-os-graphics-setpoint-markers.png?fit=max&auto=format&n=XLzbYkNX6LnaxcLs&q=85&s=f37b8a49f6a6db0b1567f87c642e341b" alt="Floor plan with difference from setpoint smart markers showing green markers within tolerance and red markers exceeding tolerance, with bell icons indicating active FDD alarms" width="945" height="611" data-path="images/kode-os/graphics/kode-os-graphics-setpoint-markers.png" />
</Frame>

* **Green** markers indicate the current value is within the configured tolerance of the setpoint
* **Red** markers indicate the value has drifted beyond the tolerated deviation
* The **bell icon** on a marker indicates that the point has an active alarm generated by [FDD](/products/fdd/fdd-overview)
* Hovering over a marker reveals the device name, current value, and effective setpoint
* Supports dual setpoints for heating and cooling modes

## Tables in graphics

Table views list point values from devices directly within floor plan graphics. Drag the **Device Table** widget from the `Basics` tab onto the canvas to create a table.

<Frame caption="Select a device and check the points you want to display in the table">
  <img src="https://mintcdn.com/kodelabs/1vjgtnWf-CUbC2z9/images/kode-os/graphics/kode-os-graphics-add-table.png?fit=max&auto=format&n=1vjgtnWf-CUbC2z9&q=85&s=2267da9fdaee0583f0f28a83f942670a" alt="Add new table dialog showing a device list with FCU208 expanded to reveal individual points with live values" width="574" height="520" data-path="images/kode-os/graphics/kode-os-graphics-add-table.png" />
</Frame>

Expand a device to see its points with current values. Check the points you want to include, then click `Save`. The table appears as a single element on the graphic that you can move and resize.

<Tip>
  Use the batch style editor to update the appearance of all tables in a graphic at once. See the [Graphic Tool](/products/kode-os/graphics/graphic-tool#device-table) for table style configuration details.
</Tip>

## Zone drawings and control

Zone drawings define colored regions on a floor plan that change appearance based on live device data. Click the **Zone Tool** widget from the `Basics` tab, then click on the floor plan to draw the zone outline. Each click places a point that defines a start and end line of the zone boundary. Close the shape to complete the zone.

<Frame caption="The Zones Configuration panel defines the zone's data source, states, style, and navigation behavior">
  <img src="https://mintcdn.com/kodelabs/XLzbYkNX6LnaxcLs/images/kode-os/graphics/kode-os-graphics-zone-config.png?fit=max&auto=format&n=XLzbYkNX6LnaxcLs&q=85&s=95c144e979038be28b5fd496b0b89dcf" alt="Zones Configuration panel with Properties, States, Style, and Navigation sections for a selected zone on a floor plan" width="755" height="782" data-path="images/kode-os/graphics/kode-os-graphics-zone-config.png" />
</Frame>

Select a zone to configure it. The configuration panel contains:

* **Properties** -- select the data type (`Number` or `String/Boolean`), controlling devices, the common point, and the aggregation operator (`AVG`, `MIN`, `MAX`, `SUM`, `MED` for numeric points; `AND` or `OR` for boolean/enum points)
* **States** -- define value ranges with corresponding colors. Select a `Smart Configuration` or create custom ranges manually.

<Frame caption="Each state maps a value range to a color. The zone changes color as the aggregated value moves between ranges.">
  <img src="https://mintcdn.com/kodelabs/XLzbYkNX6LnaxcLs/images/kode-os/graphics/kode-os-graphics-zone-states.png?fit=max&auto=format&n=XLzbYkNX6LnaxcLs&q=85&s=b393f0114b046be7ef140b1755f1bb94" alt="Zone States configuration showing five value ranges with corresponding colors ranging from blue through green to red" width="802" height="766" data-path="images/kode-os/graphics/kode-os-graphics-zone-states.png" />
</Frame>

* **Style** -- set the zone name and default zone color
* **Navigation** -- link the zone to a URL or a Cloud BMS device, area, or system

See the [Graphic Tool](/products/kode-os/graphics/graphic-tool#zone-tool) for full zone configuration details.

<Note>
  The current version supports one point reference per zone. Each zone evaluates a single point type across the devices within its borders.
</Note>

## Hover-over markers

Hover-over markers allow you to reference multiple points on a single marker while showing only one value by default. The additional points appear when the user hovers over the marker.

<Frame caption="Hovering over a smart marker reveals the device name and additional point values">
  <img src="https://mintcdn.com/kodelabs/XLzbYkNX6LnaxcLs/images/kode-os/graphics/kode-os-graphics-hover-marker.png?fit=max&auto=format&n=XLzbYkNX6LnaxcLs&q=85&s=9a26c8a992a5feefcdd0f7b4b23366e9" alt="Hover-over marker on a floor plan showing VAV_203 with Zone Temp Setpt and Zone Temp values expanded on hover" width="349" height="242" data-path="images/kode-os/graphics/kode-os-graphics-hover-marker.png" />
</Frame>

* Works with both smart markers and default markers
* Marker headers and labels can be hidden until hover
* When used with smart markers, hovering shows the device name with a link to navigate to device details

## Point statuses and states

Markers on floor plans display real-time status indicators next to point values:

| State          | Indicator   | Meaning                                            |
| -------------- | ----------- | -------------------------------------------------- |
| **Alarm**      | Red icon    | Active alarm condition                             |
| **Down**       | Grey icon   | Device or point is not communicating               |
| **Fault**      | Orange icon | Fault condition detected                           |
| **Stale**      | Yellow icon | Value has not updated within the expected interval |
| **Overridden** | Purple icon | Point is currently overridden by a manual command  |

Status icons are enabled by default on smart markers.

## Layers and overlays

Layers organize a floor plan graphic into multiple views. Each layer displays its own set of markers, tables, and points. Switch between layers using the tabs in the bottom toolbar.

<Frame caption="A duct overlay rendered on top of a floor plan, showing supply and return duct paths in separate colors">
  <img src="https://mintcdn.com/kodelabs/XLzbYkNX6LnaxcLs/images/kode-os/graphics/kode-os-graphics-overlay-ducts.png?fit=max&auto=format&n=XLzbYkNX6LnaxcLs&q=85&s=4266768ff50416834e3907e062e76747" alt="Floor plan with blue and purple duct overlays showing supply and return duct routing across the building" width="1024" height="757" data-path="images/kode-os/graphics/kode-os-graphics-overlay-ducts.png" />
</Frame>

Overlays are visual elements (such as ductwork or piping paths) that render on top of the floor plan and can be toggled on or off independently from layers. See the [Graphic Tool](/products/kode-os/graphics/graphic-tool#layers) for details on creating layers and overlays.

## Filter the floor plan

Use the system type tabs at the top of the floor plan view to filter visible devices:

* **HVAC** shows temperature devices, AHUs, VAVs, and related equipment
* **Lighting** shows lighting controllers and fixtures
* **Fire Detection** shows smoke detectors, pull stations, and alarm panels

Additional display options in the upper right corner:

* **Icons** toggles between value labels and icon-based display for dense floors
* **Legend** shows or hides the icon legend

## Next steps

<CardGroup cols={2}>
  <Card title="Graphic Tool" icon="pen-tool" href="/products/kode-os/graphics/graphic-tool" arrow={true} cta="Configure">
    Configure smart markers, zones, layers, and global settings for all graphic types.
  </Card>

  <Card title="System graphics" icon="layout-dashboard" href="/products/kode-os/graphics/system-graphics" arrow={true} cta="Visualize">
    Create schematic diagrams with live data overlays.
  </Card>

  <Card title="Areas" icon="map-pin" href="/products/kode-os/areas" arrow={true} cta="Configure">
    Add and manage the spatial zones displayed on floor plans.
  </Card>
</CardGroup>
