aware

Layouts

The Layouts section lets operators view floor-plan or site-map canvases with interactive device overlays. In View Mode you can monitor live device status and issue commands; in Edit Mode you can place and arrange devices on the map, change the background image, and configure camera cones.

Page Structure

┌────────────────────────────────────────┬─────────────────────┐
│  Main Canvas Area                      │  Right Drawer Panel │
│  - Layout name                         │  - Mode toggle      │
│  - Interactive map                     │  - Action menu      │
│  - Layer picker (top-right)            │  - Device list      │
│  - Multi-selection toggle              │  - Commands         │
└────────────────────────────────────────┴─────────────────────┘
Bottom panel (collapsible):
  - Layout selector (all layouts, draggable to reorder)
  - "+ Add" button (requires layout:create)

The bottom panel lists all layouts. Clicking one navigates to /layouts/:id.

The right drawer changes its contents depending on whether you are in View Mode or Edit Mode.

Sub-routes

Route	Description
`/layouts`	Auto-navigates to the default layout; shows an empty state if none exist
`/layouts/:id`	Displays the selected layout canvas

View Mode

In View Mode you interact with the live layout — selecting devices to open callouts, issuing commands, and casting to displays.

Right Drawer — View Mode

The drawer shows two tabs:

Layout Devices — devices placed on this layout; clicking a device selects it on the canvas and opens its callout.
Device Bag — accumulate devices from multiple layouts before performing a bulk “Add to View” action.

Additional controls:

Button	Description	Permission
Add to View	Adds selected devices to an existing View	View permissions
Cast Control	Sends selected camera feeds to a display device	`display:read`

Button	Description	Permission
Layer Picker	Selects which device-type layer is visible on the canvas	—
Multi-Selection Toggle	Enables clicking multiple devices to bulk-select them	—
Edit Mode Toggle	Switches to Edit Mode	`layout:update`
Actions menu	Rename, Change Image, Set Default, Delete	Varies (see below)

Device Callouts

Clicking any device icon on the canvas opens a floating callout window (draggable, resizable) connected to the icon by a line. Content is device-type specific:

Device Type	Reference
Camera	Camera Callout
Door	Door Callout
Motion Sensor	Motion Sensor Callout
Intercom Terminal	Intercom Callout
Panic Button	Panic Button Callout

Double-clicking the canvas clears all selections.

Edit Mode

In Edit Mode you can position and configure device objects on the canvas.

Right Drawer — Edit Mode

Layout Devices — devices already placed; each has a delete button to remove it from the canvas.
Add — searchable list of devices that can be placed; drag a device from this tab onto the canvas to position it.

Button	Description
Undo	Undoes the last canvas operation
Redo	Redoes the last undone operation
Save	Persists all pending changes (disabled when nothing has changed)

Camera Cone Settings

Clicking a camera device on the canvas in Edit Mode opens the Cone Settings popover with sliders for rotation, fov (field of view angle), and far (depth) to overlay a visual coverage cone on the map.

Switching Back to View Mode

If there are unsaved changes, a confirmation dialog asks whether to discard them before switching. Once confirmed, changes are lost.

Dialogs

Dialog	Trigger	Key Fields
Create New Layout	+ button in layout selector	Name, background image
Rename Layout	Actions → Rename (View Mode only)	Name
Change Image	Actions → Change Image (View Mode only)	Image file, Colorize checkbox
Add to View	Add to View button (View Mode)	View selector, device list
Discard Changes	Switching to View Mode with unsaved changes	Confirm / Abort
Delete Layout	Actions → Delete (View Mode only)	Confirm / Abort

The Colorize option tints the background image with the active theme colour.

Actions & Permissions

Action	Permission
View layouts	`/layouts` route
Create layout	`layout:create`
Reorder layouts	`layout:update`
Enter Edit Mode	`layout:update`
Rename layout	`layout:update`
Change background image	`layout:update`
Set as default layout	`layout:update`
Delete layout	`layout:delete`

Empty & Error States

State	Display
No layouts exist	Prompt to create the first layout
Layout ID not found	“Layout could not be found” message
Layouts exist but none selected	“Select a layout from the panel”

← Back to Manual