aware

Views

The Views section provides a configurable camera and device grid display system. Each View is a named grid of areas — cells that can show a live camera feed, a device carousel, a layout map, a playback track, or be left empty. Views can be public (visible to all users) or private (only visible to their creator).

Page Structure

┌──────────────────────────────────────────┬──────────────┐
│  View Grid (CSS grid, n columns × m rows)│  Right       │
│  ┌──────┐ ┌──────┐ ┌──────┐              │  Drawer      │
│  │Area 1│ │Area 2│ │Area 3│              │  Panel       │
│  └──────┘ └──────┘ └──────┘              │  - Mode      │
│  ┌──────┐ ┌──────┐ ┌──────┐              │    toggle    │
│  │Area 4│ │Area 5│ │Area 6│              │  - Actions   │
│  └──────┘ └──────┘ └──────┘              │  - Save btn  │
│                                          │  - Cast ctrl │
└──────────────────────────────────────────┴──────────────┘
Bottom panel (collapsible):
  - View selector (all views, draggable to reorder)
  - "+ Add" button (requires public-view:create or private-view:read)

The bottom panel lists all available views. Clicking one navigates to /views/:id. The right drawer changes contents between View Mode and Edit Mode.

Sub-routes

Route	Description
`/views`	Auto-navigates to the default view; shows empty state if none exist
`/views/:id`	Renders the selected view’s grid and drawer

View Mode

Right Drawer — View Mode

Control	Description	Permission
Edit Mode Toggle	Switches to Edit Mode	`public-view:update` or `private-view:read`
Actions → Rename	Opens the Update View dialog	Same as above
Actions → Delete	Opens Delete confirmation	`public-view:delete` or `private-view:read`
Cast Control	Sends this view to a connected display device	`display:read`

Hotspot Behaviour

When a view template includes a hotspot area, clicking a device in a regular area “focuses” it into the hotspot cell at full size. Clicking elsewhere clears the hotspot.

Edit Mode

Right Drawer — Edit Mode

Control	Description
Edit Mode Toggle	Returns to View Mode (prompts to discard if there are unsaved changes)
Actions → Change Template	Opens the Change Template dialog
Save Changes button	Persists all pending changes (disabled when nothing has changed)

Area Content Assignment

Clicking any area cell in Edit Mode opens the “Choose What to Display” dialog:

Content Type	Description
Empty	Clears the area
Device	Displays a single device (camera feed, door status, etc.)
Device Carousel	Rotates through multiple devices at a configurable interval

Layout Map and Playback Track area types exist in the data model and are visible in the grid, but are typically assigned via the “Add to View” flow from the Layouts section rather than directly here.

Drag-and-Drop

In Edit Mode, area cells can be dragged onto other cells to swap their contents. A chip label follows the cursor during drag.

Right-clicking anywhere on the view surface opens a context menu with mode-appropriate options (Edit View / Cancel / Change Template / Save Changes).

Dialogs

Dialog	Trigger	Key Fields
Create New View	+ button	Name, Public/Private toggle, Default for me, Template
Choose What to Display	Clicking any area cell in Edit Mode	Content type, device selector (type-specific)
Change Template	Actions → Change Template (Edit Mode)	Template selector
Update View	Actions → Rename (View Mode)	Name, Public/Private, Default for me
Discard Changes	Toggling out of Edit Mode with unsaved changes	Confirm / Abort
Delete View	Actions → Delete (View Mode)	Confirm / Abort

View Templates

A View Template defines the grid layout — number of rows, columns, and named areas. When creating a view, you pick a template. You can change the template later via Edit Mode → Actions → Change Template (note: changing to a smaller template may remove existing area assignments).

Actions & Permissions

Action	Permission
View this section	`/views` route
Create public view	`public-view:create`
Create private view	`private-view:read`
Reorder views	`public-view:update` or `private-view:read`
Enter Edit Mode	`public-view:update` or `private-view:read`
Rename / update view	Same as Edit Mode
Delete public view	`public-view:delete`
Delete private view	`private-view:read`
Cast to display	`display:read`

Empty & Error States

State	Display
No views exist	Empty state prompt
Views exist but none selected	“Select a view from below”
View loading	Spinner

← Back to Manual