> ## 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.

# Device graphics

> Create and interact with equipment-level visual representations showing live point data, status indicators, and control options.

<Info>
  Device graphics are a building-level feature. Select a building from the [sites list](/products/kode-os/sites-and-map) to access device graphics through the Devices module or Graphic Tool.
</Info>

Device graphics are equipment-level visual representations that display live point data, status indicators, and interactive controls for a single device. They provide a focused view of how an individual piece of equipment is operating, making them valuable for troubleshooting, commissioning, and day-to-day monitoring.

## Access a device graphic

You can reach a device graphic from two locations:

* **Device details page** -- select a device from the [devices list](/products/kode-os/devices/devices), open its details, and click the `Graphic` tab
* **Graphics module** -- click `Graphics` in the left sidebar, select the `Devices` tab, and open an existing device graphic

<Frame caption="The Graphics module Devices tab lists device graphics with options to edit, save as template, or delete">
  <img src="https://mintcdn.com/kodelabs/1vjgtnWf-CUbC2z9/images/kode-os/graphics/kode-os-graphics-device-list-menu.png?fit=max&auto=format&n=1vjgtnWf-CUbC2z9&q=85&s=95b54e8ec61094932386f805c40cffd9" alt="Graphics module showing the Devices tab with device graphic cards, and a three-dot menu expanded on VAV_310 showing Edit, Save as template, and Delete options" width="941" height="330" data-path="images/kode-os/graphics/kode-os-graphics-device-list-menu.png" />
</Frame>

From the Devices tab in the Graphics module, click the three-dot menu on a graphic card to access `Edit`, `Save as template`, or `Delete` options.

## Create a device graphic

You can create a device graphic from two entry points:

* **Device details page** -- navigate to a device, click the `Graphic` tab, and click `+ Create New`
* **Graphics module** -- click `Graphics` in the left sidebar, select the `Devices` tab, and click `New Graphic`

<Frame caption="The Graphic tab on a device shows options to apply a template or create a new graphic">
  <img src="https://mintcdn.com/kodelabs/1vjgtnWf-CUbC2z9/images/kode-os/graphics/kode-os-graphics-device-empty-state.png?fit=max&auto=format&n=1vjgtnWf-CUbC2z9&q=85&s=908a31bed65101a49d9d06ce3f84fb4a" alt="VAV_304 device details page showing the Graphic tab with Apply Template and Create New buttons on an empty canvas" width="1024" height="736" data-path="images/kode-os/graphics/kode-os-graphics-device-empty-state.png" />
</Frame>

Click `+ Create New` to open the New Device Graphic dialog.

<Frame caption="The New Device Graphic dialog collects the graphic name, device assignment, description, and an optional device file upload">
  <img src="https://mintcdn.com/kodelabs/XLzbYkNX6LnaxcLs/images/kode-os/graphics/kode-os-graphics-new-device-graphic.png?fit=max&auto=format&n=XLzbYkNX6LnaxcLs&q=85&s=fa8ebac261a3372c2f37556708b97832" alt="New Device Graphic dialog with fields for Graphic Name, Device dropdown showing VAV_304, Description, and a Device File drag-and-drop upload area" width="1024" height="864" data-path="images/kode-os/graphics/kode-os-graphics-new-device-graphic.png" />
</Frame>

<ParamField path="Graphic Name" type="Field">
  Enter a descriptive name for the device graphic.
</ParamField>

<ParamField path="Device" type="Field">
  The device this graphic belongs to. When creating from the device details page, this is pre-filled. When creating from the Graphics module, select the device from the dropdown.
</ParamField>

<ParamField path="Description" type="Field">
  Add an optional description of the graphic's purpose.
</ParamField>

<ParamField path="Device File" type="Field">
  Upload a background image, equipment diagram, or schematic. Drag and drop a file, click `Browse files` to upload from your computer, or click `Browse from files` to select from previously uploaded files.
</ParamField>

Click `Done` to create the graphic and open it in the [Graphic Tool](/products/kode-os/graphics/graphic-tool) editor.

## Build the device graphic

The Graphic Tool editor provides three tabs for building device graphics: Devices, Elements, and Basics.

### Devices tab

The `Devices` tab lists all devices and their points. The main device assigned to this graphic appears at the top of the list with a red flag icon. A green checkmark with a number indicates how many points from that device are already placed on the graphic.

<Frame caption="The Devices tab shows the main device with a red flag and all available devices with their points">
  <img src="https://mintcdn.com/kodelabs/1vjgtnWf-CUbC2z9/images/kode-os/graphics/kode-os-graphics-device-devices-tab.png?fit=max&auto=format&n=1vjgtnWf-CUbC2z9&q=85&s=98ab83324140d7261efaf574158eeaf6" alt="Graphic Tool editor showing the Devices tab with VAV_407 flagged as the main device, a 3D AHU model on the canvas with point markers showing Discharge Air Temp and other readings" width="1024" height="744" data-path="images/kode-os/graphics/kode-os-graphics-device-devices-tab.png" />
</Frame>

Expand a device to see its points with current values. Drag a point onto the canvas to place a marker at the corresponding location on the diagram. You can add points from any device, not only the main device assigned to the graphic.

### Elements tab

The `Elements` tab lists all elements placed on the graphic canvas, including device markers and text labels. Select an element from the list to highlight it on the canvas and access its style options.

<Frame caption="The Elements tab lists placed elements such as device markers and text labels">
  <img src="https://mintcdn.com/kodelabs/1vjgtnWf-CUbC2z9/images/kode-os/graphics/kode-os-graphics-device-elements-tab.png?fit=max&auto=format&n=1vjgtnWf-CUbC2z9&q=85&s=fa6d17806d21e69ccd2dd13ac3ae1f63" alt="Graphic Tool showing the Elements tab with VAV_409, VAV_407, and Text entries listed, and the device graphic on the canvas" width="1024" height="748" data-path="images/kode-os/graphics/kode-os-graphics-device-elements-tab.png" />
</Frame>

### Basics tab

The `Basics` tab contains shapes, device widgets, uploads, and built-in drawings for constructing device graphics.

<Frame caption="The Basics tab provides shapes, device widgets, uploads, and built-in drawing components">
  <img src="https://mintcdn.com/kodelabs/1vjgtnWf-CUbC2z9/images/kode-os/graphics/kode-os-graphics-device-basics-tab.png?fit=max&auto=format&n=1vjgtnWf-CUbC2z9&q=85&s=5113a78a0f66c3f3bad115685e953466" alt="Graphic Tool showing the Basics tab with Shapes, Device Widgets, Uploads, and Drawings sections including AHU Elements with Sensor and Fan categories" width="1024" height="760" data-path="images/kode-os/graphics/kode-os-graphics-device-basics-tab.png" />
</Frame>

* **Shapes** -- add rectangles, circles, triangles, arrows, polygons, lines, and text labels
* **Device Widgets** -- add device tables, zone tools, and pivot tables
* **Uploads** -- upload custom images from your computer
* **Drawings** -- use pre-built equipment components (AHU elements, sensors, fans, coils) from the built-in library

For details on each section, see the [Graphic Tool Basics tab](/products/kode-os/graphics/graphic-tool#basics-tab) documentation.

## Save as template

Device graphics can be saved as templates and applied to other devices of the same type. Click `Save as template` in the upper right corner of the editor.

<Frame caption="The Save as template dialog lets you name and describe the template">
  <img src="https://mintcdn.com/kodelabs/1vjgtnWf-CUbC2z9/images/kode-os/graphics/kode-os-graphics-device-save-template.png?fit=max&auto=format&n=1vjgtnWf-CUbC2z9&q=85&s=6ebb88f80da7b770aec5309e6f28acd7" alt="Save as template dialog with Template Name field showing VAV Template, a Description field, and Cancel, Save and Apply, and Save buttons" width="634" height="377" data-path="images/kode-os/graphics/kode-os-graphics-device-save-template.png" />
</Frame>

<ParamField path="Template Name" type="Field">
  Enter a name for the template (for example, `VAV Template`).
</ParamField>

<ParamField path="Description" type="Field">
  Add an optional description for the template.
</ParamField>

* **Save** -- saves the template for future use
* **Save and Apply** -- saves the template and opens the Apply Template dialog, where you can select other devices to apply the template to

<Frame caption="The Apply Template dialog lets you search and select devices to apply the template to">
  <img src="https://mintcdn.com/kodelabs/1vjgtnWf-CUbC2z9/images/kode-os/graphics/kode-os-graphics-device-apply-template.png?fit=max&auto=format&n=1vjgtnWf-CUbC2z9&q=85&s=686d26e5baf4a4d1ad4aa541cff7569c" alt="Apply Template dialog showing a search field with vav_310 entered, a device list with VAV_310 on Floor 3, and Close and Next buttons" width="810" height="555" data-path="images/kode-os/graphics/kode-os-graphics-device-apply-template.png" />
</Frame>

Search for devices by name, filter by type or area, and select the devices you want to apply the template to. Click `Next` to proceed.

On the next step, choose how the template maps points to the target devices:

* **Ontology field** -- matches points based on their ontology classification
* **Point name** -- matches points based on their exact point names

The `Compatibility` column shows how many points from the template match the target device (for example, `6/6` means all six points matched).

<Frame caption="Apply template based on Ontology field matching, showing compatibility score per device">
  <img src="https://mintcdn.com/kodelabs/1vjgtnWf-CUbC2z9/images/kode-os/graphics/kode-os-graphics-device-template-ontology.png?fit=max&auto=format&n=1vjgtnWf-CUbC2z9&q=85&s=329d14f0156e67730745f7e31fd5a5db" alt="Apply Template dialog with Ontology field selected, showing VAV_310 with 6 out of 6 compatibility" width="811" height="595" data-path="images/kode-os/graphics/kode-os-graphics-device-template-ontology.png" />
</Frame>

<Frame caption="Apply template based on Point name matching">
  <img src="https://mintcdn.com/kodelabs/1vjgtnWf-CUbC2z9/images/kode-os/graphics/kode-os-graphics-device-template-pointname.png?fit=max&auto=format&n=1vjgtnWf-CUbC2z9&q=85&s=69b97373d1e8e29903193cae5ff32902" alt="Apply Template dialog with Point name selected, showing VAV_310 with 6 out of 6 compatibility" width="808" height="592" data-path="images/kode-os/graphics/kode-os-graphics-device-template-pointname.png" />
</Frame>

Select the target devices and click `Apply`. The Activity Log tracks the template application status.

<Frame caption="The Activity Log confirms the template was applied successfully">
  <img src="https://mintcdn.com/kodelabs/1vjgtnWf-CUbC2z9/images/kode-os/graphics/kode-os-graphics-device-template-activity.png?fit=max&auto=format&n=1vjgtnWf-CUbC2z9&q=85&s=b91923b9991b4a506c8bbfb50dc4fab0" alt="Activity Log showing Graphic Template VAV_310 with Completed status" width="288" height="144" data-path="images/kode-os/graphics/kode-os-graphics-device-template-activity.png" />
</Frame>

Once applied, the target device's Graphic tab displays the same layout and markers as the original template.

<Frame caption="The device graphic on VAV_310 after applying the VAV Template">
  <img src="https://mintcdn.com/kodelabs/1vjgtnWf-CUbC2z9/images/kode-os/graphics/kode-os-graphics-device-template-result.png?fit=max&auto=format&n=1vjgtnWf-CUbC2z9&q=85&s=4873a9ac89c65b13e80da35b01dba5af" alt="VAV_310 device Graphic tab showing the applied template with a 3D AHU model, point markers, and live data values" width="1024" height="722" data-path="images/kode-os/graphics/kode-os-graphics-device-template-result.png" />
</Frame>

You can also apply a saved template from a device's `Graphic` tab by clicking `Apply Template`.

## Manage device templates

Click `Templates` at the bottom of the Graphics module sidebar to view all saved device templates.

<Frame caption="The Templates page in the Graphics module shows saved device templates with search and import options">
  <img src="https://mintcdn.com/kodelabs/1vjgtnWf-CUbC2z9/images/kode-os/graphics/kode-os-graphics-device-templates-nav.png?fit=max&auto=format&n=1vjgtnWf-CUbC2z9&q=85&s=c417b65c3739d2417670207791aac7fc" alt="Graphics module showing the Templates link in the sidebar and the Device Templates page with a VAV Template card, search bar, and Import Template button" width="1024" height="726" data-path="images/kode-os/graphics/kode-os-graphics-device-templates-nav.png" />
</Frame>

Click the three-dot menu on a template card to access management options.

<Frame caption="The three-dot menu on a template card provides Apply template, Export template, and Delete options">
  <img src="https://mintcdn.com/kodelabs/1vjgtnWf-CUbC2z9/images/kode-os/graphics/kode-os-graphics-device-templates-menu.png?fit=max&auto=format&n=1vjgtnWf-CUbC2z9&q=85&s=7cadba53c360e22e0e9d1d251086abe4" alt="Device Templates page with three-dot menu expanded on VAV Template showing Apply template, Export template, and Delete options" width="1024" height="248" data-path="images/kode-os/graphics/kode-os-graphics-device-templates-menu.png" />
</Frame>

### Apply a template

Select `Apply template` to open the Apply Template dialog. Search and select the devices you want to apply the template to, then click `Next`.

<Frame caption="Select devices to apply the template to from the searchable device list">
  <img src="https://mintcdn.com/kodelabs/1vjgtnWf-CUbC2z9/images/kode-os/graphics/kode-os-graphics-device-templates-apply-select.png?fit=max&auto=format&n=1vjgtnWf-CUbC2z9&q=85&s=b7d2d2ecf0b8e836cffc22375693c554" alt="Apply Template dialog showing a list of VAV devices with Device, Type, and Area columns, a search bar, and filter options" width="996" height="815" data-path="images/kode-os/graphics/kode-os-graphics-device-templates-apply-select.png" />
</Frame>

Choose the matching method (Ontology field or Point name), review the compatibility scores, and click `Apply`.

<Frame caption="Review compatibility scores before applying the template to selected devices">
  <img src="https://mintcdn.com/kodelabs/1vjgtnWf-CUbC2z9/images/kode-os/graphics/kode-os-graphics-device-templates-apply-confirm.png?fit=max&auto=format&n=1vjgtnWf-CUbC2z9&q=85&s=158843a76be9f82108598dd40039ed1c" alt="Apply Template confirmation showing VAV_304 with 6 out of 0 compatibility and VAV_101 with 6 out of 6 compatibility" width="824" height="611" data-path="images/kode-os/graphics/kode-os-graphics-device-templates-apply-confirm.png" />
</Frame>

### Export and import templates

Select `Export template` from the three-dot menu to generate a shareable link. The link is copied to your clipboard automatically.

<Frame caption="A notification confirms the export link has been generated and copied to the clipboard">
  <img src="https://mintcdn.com/kodelabs/1vjgtnWf-CUbC2z9/images/kode-os/graphics/kode-os-graphics-device-templates-export.png?fit=max&auto=format&n=1vjgtnWf-CUbC2z9&q=85&s=a21783f0363ca87f1bb0630767e5da44" alt="Export Link Generated notification showing the link has been copied to clipboard with instructions to use the import button" width="775" height="204" data-path="images/kode-os/graphics/kode-os-graphics-device-templates-export.png" />
</Frame>

To import a template from another building or site, click `Import Template` at the top right of the Device Templates page. Paste the exported link, enter a name and canonical type, and add an optional description.

<Frame caption="The Import Template dialog accepts the exported link, a template name, canonical type, and description">
  <img src="https://mintcdn.com/kodelabs/1vjgtnWf-CUbC2z9/images/kode-os/graphics/kode-os-graphics-device-templates-import.png?fit=max&auto=format&n=1vjgtnWf-CUbC2z9&q=85&s=2b518e5291a19e031c1a302e3035d6d3" alt="Import Template dialog with fields for Import URL, Name showing FCU Template, Canonical Type showing fcu, and Description" width="582" height="612" data-path="images/kode-os/graphics/kode-os-graphics-device-templates-import.png" />
</Frame>

<ParamField path="Import URL" type="Field">
  Paste the template link copied from the export step.
</ParamField>

<ParamField path="Name" type="Field">
  Enter a name for the imported template (for example, `FCU Template`).
</ParamField>

<ParamField path="Canonical Type" type="Field">
  The device type this template applies to (for example, `fcu`). This value is carried over from the exported template and cannot be edited.
</ParamField>

<ParamField path="Description" type="Field">
  Add an optional description for the template.
</ParamField>

Click `Save` to add the template to your Device Templates library.

## Interact with writable points

Writable points on a device graphic display an interactive indicator. Click a writable point marker to open the command panel. The panel displays the device's variables on the left and the action form on the right.

<Frame caption="The command panel shows device variables and the action form for overriding a point value">
  <img src="https://mintcdn.com/kodelabs/1vjgtnWf-CUbC2z9/images/kode-os/graphics/kode-os-graphics-device-command-panel.png?fit=max&auto=format&n=1vjgtnWf-CUbC2z9&q=85&s=d0e47fb457de2d7d2c0c9dcd1eb0f15b" alt="Command panel for VAV_301 showing variables including Discharge Air Flow, setpoints, and cooling flow on the left, with action fields for Priority, Value, Duration, Reason, and Specific Reason on the right" width="947" height="779" data-path="images/kode-os/graphics/kode-os-graphics-device-command-panel.png" />
</Frame>

* **Priority** -- select the command priority level (for example, `Override`)
* **Value** -- set the target value. Use `+` and `-` to adjust.
* **Duration** -- specify how long the command remains active. Check `Permanent` for an indefinite override.
* **Reason** -- select a predefined reason from the dropdown
* **Specific Reason** -- enter a custom reason for the change

The bottom of the panel displays the current priority level and value. Click `Save Changes` to send the command, or `Close` to cancel. Click `Activity Log` in the upper right corner to view the command history.

<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>

## Tables on device graphics

Add table views to a device graphic to display multiple point values in a structured format. Tables are useful when a device has many points that do not map well to specific positions on a diagram.

* Select points from the device (or from related devices)
* Tables support two columns: point name and current value
* Customize colors, column width, and font sizes
* Batch-edit table styling across the graphic

## Use device graphics for troubleshooting

Device graphics support troubleshooting by providing a visual context for equipment behavior:

* **Ductwork and airflow visualization** -- position supply air, return air, mixed air, and exhaust temperature readings along the airflow path to trace issues through the system
* **Valve and damper positions** -- display valve and damper positions alongside their corresponding temperature or pressure readings to identify control loop problems
* **Alarm and fault indicators** -- point status icons (alarm, down, fault, stale, overridden) appear next to markers, highlighting which points have active issues
* **Setpoint comparison** -- use difference-from-setpoint smart markers to visually identify when a device is not achieving its target

### Common troubleshooting scenarios

| Scenario                               | What to look for on the graphic                                                                                                                   |
| -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| Comfort complaint in a zone            | Compare zone temperature against the cooling or heating setpoint. Check if the VAV damper is fully open or the valve is at the expected position. |
| AHU not maintaining supply temperature | Verify the cooling valve position and chilled water temperatures. Check the mixed air damper and outdoor air readings.                            |
| Equipment cycling                      | Watch the run status and command points for rapid on/off transitions. Compare against the setpoint and deadband.                                  |
| Sensor disagreement                    | Overlay supply, return, and zone temperatures to identify readings that diverge from expected patterns.                                           |

## Next steps

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

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

  <Card title="Floor plan graphics" icon="map" href="/products/kode-os/graphics/floor-plans" arrow={true} cta="Navigate">
    View devices on spatial floor plan layouts.
  </Card>
</CardGroup>
