Skip to main content

UI Pages

UI Pages are custom dashboard pages composed of widgets. Unlike standard control pages, UI Pages provide complete flexibility to design custom layouts with charts, gauges, cameras, weather, and any custom visualization.

Overview​

UI Pages enable:

  • Custom Dashboards: Create purpose-built information displays
  • Widget Composition: Combine multiple widgets on a single page
  • Responsive Layouts: Widgets flow and resize based on screen size
  • Live Preview: See changes in real-time while editing
  • Page Templates: Copy and reuse successful page designs

Page Management​

The UI Pages interface is organized with selectors and action buttons at the top, followed by content areas.

Selectors​

UI Page Selector

  • Dropdown of all UI pages
  • Select to view and edit page
  • Shows page title and name

Actions​

Rename Page

  • Change page title and name
  • Updates all references

Copy Page

  • Duplicate entire page including all widgets
  • Creates independent copy
  • Useful for templates

Delete Page

  • Remove page (confirmation required)
  • Removes all page-widget assignments
  • Widgets themselves are not deleted

Save Page

  • Save title, enabled state, and override route changes

Preview Page

  • Opens live preview modal
  • Shows actual rendering with theme
  • Supports theme switching in preview
  • Interactive widgets (if live mode enabled)

Page Configuration​

Page Title

  • Display name shown in navigation
  • Appears in page tabs/selector
  • User-friendly text

Page Enabled

  • Toggle to show/hide page
  • Disabled pages:
    • Don't appear in navigation
    • Cannot be accessed
    • Configuration preserved

Override Route

  • Optional Svelte route to override
  • Advanced: Replace built-in page with custom page
  • Example: Override /controls/lighting with custom lighting page
  • Leave blank for normal pages

Widgets Section​

Manage widgets assigned to the selected page.

Available Widgets (Left)​

Dropdown selector showing all UI widgets:

  • Shows widget name and type
  • Search/filter capabilities
  • Select widget to add to page

Current Page Widgets (Right)​

Grid or list of widgets on this page:

  • Widget name
  • Widget type
  • Container assignment
  • Enabled state
  • Sort order

Widget Actions​

Add Widget to Page

  1. Select widget from dropdown
  2. Choose container (if page has multiple containers)
  3. Click Add
  4. Widget appears on page

Remove Widget from Page

  1. Select widget in current page widgets list
  2. Click Remove
  3. Widget removed from page (widget itself not deleted)

Reorder Widgets

  • Drag widgets to reorder
  • Or use ▲ ▼ buttons
  • Affects display order on page

Configure Widget

  • Widget-specific settings
  • Size (percent width/height)
  • Container assignment
  • Enabled state

Widget Containers​

UI Pages can have multiple widget containers for advanced layouts:

Container Types​

Main Container (default):

  • Full width of page
  • Widgets flow left to right, top to bottom
  • Responsive grid layout

Tabbed Containers:

  • Multiple tabs on page
  • Each tab contains different widgets
  • Useful for organizing many widgets

Fixed Containers:

  • Specific positions (header, footer, sidebar)
  • Fixed widgets that don't scroll
  • Status bars, quick controls

Creating Containers​

  1. In page configuration, add container
  2. Configure:
    • Name - Container identifier
    • Title - Display title (for tabs)
    • Type - Container type
    • Config - Layout configuration (JSON)
  3. Assign widgets to specific containers

Managing Containers​

Container Selector:

  • Choose which container to add widgets to
  • Defaults to main container
  • Required for multi-container pages

Page Preview​

The preview feature allows real-time visualization:

Opening Preview​

Click Preview Page button to:

  • Open modal with live page render
  • Apply selected theme
  • Show all widgets in their configured layout
  • See actual sizing and positioning

Preview Controls​

Theme Selector

  • Dropdown of available themes
  • Switch themes to see how page looks
  • Doesn't change actual UI theme, just preview

Interactive Mode

  • Toggle to enable widget interactivity
  • When enabled:
    • Widgets load real data
    • Controls are functional
    • Charts update live
  • When disabled:
    • Static preview only
    • Faster rendering

Close

  • Close preview modal
  • Returns to edit mode

Preview Use Cases​

  1. Layout Testing: Verify widget arrangement
  2. Theme Compatibility: Test page with different themes
  3. Responsive Design: Resize browser to test different screen sizes
  4. Client Approval: Show clients the page before deploying
  5. Iteration: Make changes, preview, refine, repeat

Page Templates​

Copying Pages​

Duplicate successful page designs:

  1. Select page to copy

  2. Click Copy Page

  3. Enter new page name

  4. New page created with:

    • All widgets copied
    • Same layout
    • Same configuration
    • Independent from original

  5. Customize new page as needed

Use Cases:

  • Floor plan pages (copy layout, change zones)
  • Dashboard templates (copy structure, change data sources)
  • Client dashboards (copy template, customize branding)

Built-In Page Templates​

GEM includes starter templates:

  • Dashboard - Overview with status widgets
  • Monitoring - Charts and graphs
  • Security - Cameras and alarm status
  • Energy - Power monitoring and usage

Copy and customize these templates rather than starting from scratch.

Assigning Pages to UIs​

UI Assignment​

Pages can be assigned to specific UIs:

  1. In page configuration, select Assign to UIs
  2. Choose which UIs should have this page
  3. Save

Options:

  • All UIs - Page appears in every UI
  • Specific UIs - Page appears only in selected UIs
  • No UIs - Page exists but isn't accessible (draft state)

Assigned pages appear in UI navigation:

  • Page tabs (if UI has page navigation)
  • Menu items
  • Home screen tiles

Override Routes​

Advanced feature to replace built-in pages:

Use Case​

Replace standard /controls/lighting with custom page:

  1. Create UI page with custom lighting interface
  2. Set Override Route: /controls/lighting
  3. Enable page
  4. When users navigate to Lighting control, they see your custom page instead

Considerations​

  • Only override if custom page is truly better than built-in
  • Maintain expected functionality in override
  • Test thoroughly
  • Document customizations

Widget Layout​

Responsive Grid​

Widgets are arranged in a responsive grid:

  • Desktop: Multiple columns based on widget widths
  • Tablet: Fewer columns, widgets may stack
  • Mobile: Single column, full width

Widget Sizing​

Each widget has:

  • Width Percentage: 0-100% of container width
  • Height Percentage: 0-100% of container height
  • Minimum Size: Widget-specific minimum dimensions

Example Layouts:

Full Width Widget:

Width: 100%
Height: 40%

Half Width Widgets:

Widget 1: Width 50%, Height 30%
Widget 2: Width 50%, Height 30%
(Displayed side-by-side)

Third Width Widgets:

Widget 1: Width 33%, Height 25%
Widget 2: Width 33%, Height 25%
Widget 3: Width 33%, Height 25%
(Displayed in a row)

Common Page Types​

Status Dashboard​

Monitor system at a glance:

Widgets:

  • System status widget (online/offline devices)
  • Security status widget (armed/disarmed, sensors)
  • Climate widget (all temperatures)
  • Energy widget (current usage)
  • Weather widget

Layout:

[ System Status - 50%] [Security - 50%  ]
[ Climate - 33%      ] [Energy - 33%     ] [Weather - 33%]

Camera Dashboard​

Security camera monitoring:

Widgets:

  • Multiple camera feed widgets
  • Motion detection status
  • Recording status
  • PTZ controls

Layout:

[ Camera 1 - 50% ] [ Camera 2 - 50% ]
[ Camera 3 - 50% ] [ Camera 4 - 50% ]

Energy Monitoring​

Power and energy analytics:

Widgets:

  • Real-time power chart
  • Daily usage chart
  • Cost calculator
  • Top consumers list
  • Solar production (if applicable)

Floor Plan Dashboard​

Interactive floor plan:

Widgets:

  • Floor plan widget (custom)
  • Zone status overlays
  • Quick controls
  • Room temperature display

Best Practices​

  1. Page Purpose: Each page should have a clear purpose

    • Don't combine unrelated widgets
    • Keep pages focused

  2. Widget Count: Limit widgets per page

    • Desktop: 4-8 widgets
    • Tablet: 3-5 widgets
    • Mobile: 2-3 widgets

  3. Layout Balance: Distribute screen space appropriately

    • Important widgets get more space
    • Support widgets use less space
    • Avoid one widget dominating

  4. Performance: Consider widget update frequency

    • Too many live-updating widgets can slow page
    • Stagger update intervals
    • Use static widgets where appropriate

  5. Responsive Design: Test on multiple screen sizes

    • Preview with different window sizes
    • Ensure widgets remain readable when stacked
    • Test on actual target devices

  6. Color Coordination: Widgets should complement theme

    • Use theme colors in custom widgets
    • Avoid clashing colors
    • Consider dark/light theme variants

  7. Loading States: Widgets should handle loading gracefully

    • Show loading indicators
    • Don't block entire page
    • Fail gracefully if data unavailable

Troubleshooting​

Page Not Appearing in UI​

Check:

  1. Page Enabled: Page must be enabled
  2. UI Assignment: Page must be assigned to UI
  3. User Permissions: User role allows access
  4. Navigation: Verify page appears in UI's navigation

Widget Not Showing on Page​

Check:

  1. Widget Enabled: Widget must be enabled
  2. Page Assignment: Widget must be added to page
  3. Container: Widget assigned to correct container
  4. Size: Widget has reasonable size (not 0%)
  5. Widget Errors: Check widget itself works

Preview Not Loading​

Check:

  1. Page Selected: Select a page first
  2. Widgets: Page has widgets assigned
  3. Theme: Theme is valid and loaded
  4. Browser: Try different browser
  5. Cache: Clear browser cache

Copy Failed​

Check:

  1. Name Unique: New page name must be unique
  2. Permissions: User has permission to create pages
  3. Widgets Exist: All widgets on source page still exist

Override Not Working​

Check:

  1. Route Format: Must match existing route exactly
  2. Page Enabled: Override page must be enabled
  3. Page Content: Page has appropriate widgets/content
  4. Cache: Clear browser cache and reload

Advanced Topics​

Dynamic Page Loading​

Pages can load different widgets based on:

  • User role
  • Time of day
  • System mode
  • Screen size

Requires custom page implementation or JavaScript in theme.

API Integration​

Display external data in widgets:

  • Weather data from API
  • Stock prices
  • News feeds
  • Calendar events
  • Smart home integrations

Configure in individual widgets.

Custom Page Components​

For maximum flexibility, create custom page components:

  1. Develop Svelte component in src/routes/
  2. Add as override route
  3. Full control over layout and behavior