← Manual
This page describes the persistent shell that wraps every page in AwareVue: the top app bar, side navigation, footer, bottom panels, and global overlay components that float above all content.
Every page shares the following structural frame:
┌─────────────────────────────────────────────────────────────────┐
│ App Bar (top) │
├──────────┬──────────────────────────────────────────────────────┤
│ │ │
│ Nav │ Active Page Content │
│ (left) │ │
│ │ ┌──────────────────────────────────────────────┐ │
│ │ │ Panel Contents (bottom, optional) │ │
│ │ └──────────────────────────────────────────────┘ │
├──────────┴──────────────────────────────────────────────────────┤
│ Panel Selector (panel tabs) │
└─────────────────────────────────────────────────────────────────┘
The app bar can be pinned (always visible) or unpinned (auto-hides — see Auto-hide Behaviour).
On narrow viewports the bar wraps to two rows; on wide viewports it sits in a single row.
| Element | Description |
|---|---|
| Menu icon | Toggles the left-side Navigation panel |
| Logo | Double-clicking downloads the current debug log bundle and reloads the page. Greyed out when offline. |
| Offline chip | Appears next to the logo when the backend is unreachable |
| Update chip | Appears next to the logo when a new application version is available |
All controls in this group are governed by the UI Profile and user permissions, so some may not be visible to all users.
| UI Profile Flag | Button | Permission | Description |
|---|---|---|---|
appBar.securityLevels |
Security Level | security-level:update (to change) |
Shows the currently active security level. Opens a selection menu for permitted users. Disabled when offline. |
appBar.muster |
Muster | presence:read |
Navigates to the People page filtered to show only those with status In |
appBar.accessPaths |
Access Paths | access-path:read |
Opens the active Access Paths selection menu. Disabled when offline. |
appBar.macros |
Macros | macro:run |
Opens a menu to run a Macro, start recording a new macro, or navigate to macro management. While recording, the button changes to a blinking red Stop button. Disabled when offline. |
appBar.alarm |
Arm/Disarm | alarm:arm / alarm:disarm |
Opens a menu to arm or disarm all devices. Shows per-device arm/bypass status. When any devices are armed the button displays the armed device count. Disabled when offline. |
appBar.citadelMode |
Citadel Mode | citadel-mode:toggle |
Toggles Citadel Mode. Disabled when offline. |
| Button | Description |
|---|---|
| Full-screen | Enters or exits browser full-screen mode |
| Notification Bell | Badge count = active alarm triggers (if minimised) + unacknowledged device notifications. Red badge when an alarm is active; yellow for other notifications. Opens a dropdown with two sections (see §2.4). |
| Sun/Moon | Toggles between light and dark colour schemes |
| Pin | Pins the app bar so it stays visible at all times. Grey when unpinned. |
Requires alarm:read or notification:read permission.
Alarms section (alarm:read):
| State | Display |
|---|---|
| No active alarm | No Alerts |
| Active alarm | View Active Alarm Details button — maximises the Alarm floating window |
| (always) | Do Not Disturb toggle — silences alarm sounds without acknowledging |
Device Notifications section (notification:read):
| State | Display |
|---|---|
| No notifications | No Device Notifications |
| Notifications present | List of notifications; each item has an Acknowledge button that clears it |
Toggled by the hamburger button in the app bar. The navigation list is filtered based on user permissions.
| Title | Primary Route | Notes |
|---|---|---|
| Layouts | /layouts |
→ Layouts |
| Views | /views |
→ Views |
| Media | /media |
→ Media |
| Access | /access |
→ Access |
| Devices | /devices/devices |
→ Devices |
| People | /presence |
→ People — enabled even when offline |
| History | /events |
→ History — Events |
| Settings | /settings |
→ Settings — expandable |
| Profile | /profile |
→ Profile |
| Logout | — | Logs out the current user |
Expanding Settings reveals the following sub-items (shown only if the user has permission):
| Sub-item | Route | Reference |
|---|---|---|
| Users | /settings/users |
→ Users |
| Roles | /settings/roles |
→ Roles |
| Modules & Devices | /settings/modules |
→ Modules & Devices |
| Automation Rules | /settings/automation |
→ Automation Rules |
| Device Groups | /settings/device-groups |
→ Device Groups |
| Custom Devices | /settings/factory |
→ Custom Devices |
| Macros | /settings/macros |
→ Macros |
| Access Paths | /settings/access-paths |
→ Access Paths |
| Templates | /settings/templates |
→ Templates |
| Custom Fields | /settings/custom-fields |
→ Custom Fields |
| Token Conversions | /settings/token-conversions |
→ Token Conversions |
| Security Levels | /settings/security-levels |
→ Security Levels |
| Access Control | /settings/access-control |
→ Access Control |
| Person Types | /settings/person-types |
→ Person Types |
| Agreements | /settings/agreements |
→ Agreements |
| About | /settings/about |
→ About |
| API Keys | /settings/api-keys |
→ API Keys |
Animated: hidden when the app bar is unpinned and no bottom panel is open.
| Area | Content |
|---|---|
| Left | Copyright line |
| Right | Panel Selection Tabs — tab strip for activating bottom panels |
Bottom panels are opened via the tabs in the footer. Available content varies by the current route.
20+).These components float above all other content across all routes.
A draggable, resizable floating window.
Visible when: an alarm is active and has not been minimised.
Requires alarm:read permission.
| UI Element | Description |
|---|---|
| Title bar | “Alarm was triggered <relative timestamp>” with a red bell icon |
| Body | Scrollable list of triggering events; first item is expanded by default |
| Do Not Disturb toggle | Silences the alarm sound without acknowledging |
| Acknowledge button | Closes the window and acknowledges the alarm |
| Dismiss button | Hides the window (alarm remains active; badge persists) |
| Sound | Repeating alarm sound plays until Acknowledged, Dismissed, or Do Not Disturb is activated |
Shown as a floating panel during an active macro recording session.
| UI Element | Description |
|---|---|
| Recording panel | Live list of recorded steps; each step has a delete button |
| Stop button | Ends recording |
| Cancel button | Discards all steps |
| Save dialog | Appears when recording ends — enter a macro display name |
| Access Path dialog | Secondary dialog in the save flow — creates an access-path shortcut for the new macro |
Full-viewport dark overlay shown when navigating away from a page with unsaved edits.
| Condition | Message |
|---|---|
| Unsaved changes present | “You have unsaved changes. Tap or click here to go back and save or discard them.” |
| In edit mode, no unsaved changes | “You must exit Edit Mode before navigating away.” |
Four colour-coded snack bar types provide feedback on user actions:
| Style | Colour |
|---|---|
| Success Alert | Green |
| Warning Alert | Amber |
| Error Alert | Red |
| Progress Alert | Progress indicator with message |
When the app bar is unpinned, the bar and footer auto-hide to maximise screen real estate.
| Condition | Effect |
|---|---|
| App bar pinned | Bars always visible |
| Navigation drawer open | Bars always visible |
| Right side panel open | Bars always visible |
| None of the above | App bar slides off-screen |
| User double-clicks anywhere | Bars reappear temporarily for 3 seconds |
| Bottom panel open & unpinned | Only footer bar visible |
URL contains ?hidePanels |
Side panel, footer, and all panels render nothing (used for embedded/kiosk views) |