Room Tabs
Rooms from the Configurator appear as tabs across the top of your dashboard. Each tab represents a logical group of sensors and actuators.
Tab Customization
- Rename — Click the tab label to edit inline
- Icons — Click the tab icon to open the icon picker modal with categories like plants, climate, water, and industrial
- Reorder — Drag tabs to rearrange their display order
- Add Room — The "+" tab lets you create new rooms directly from the dashboard
Tab Persistence
Room tab order and icon selections are saved to Firestore and persist across sessions and devices.
Card Layout
Within each room tab, cards are arranged in a responsive grid (2 columns on small screens, 3 on medium, 4 on wide displays).
Rearranging Cards
Drag any card to a new position in the grid using the drag handle icon in the top-right corner of the card. The layout auto-saves when you drop the card in place.
On mobile, long-press a card to reveal quick actions. The drag handle requires a short press-and-hold before the card lifts, preventing accidental drags during scrolling.
Resizing Cards
Cards support two widths:
- Normal — Occupies one column (default for all cards)
- Wide — Spans two columns, giving more horizontal space to sparklines and charts
To resize a card, open its options menu (the three-dot icon in the top-left corner) and select Wide or Normal. The icon changes between an expand arrow and a collapse arrow to reflect the current state.
Wide cards are tracked per room in the wideCards field of your dashboard layout. When wide cards are present in a room, the grid uses a free-form drop strategy so mixed-width rows sort correctly.
Hiding Cards
Hide cards you do not need without removing the underlying sensor:
- Open the card options menu (three-dot icon in the top-left corner)
- Select Hide Card
- Hidden cards can be re-shown from the layout settings panel
Spacer Cards
Insert blank spacer cards to create visual separation between groups of related cards. Use the card options menu and choose Add spacer left or Add spacer right. Spacers cannot be hidden or resized, but they can be dragged and deleted.
Layout Presets
Layout presets let you snapshot the current arrangement of a room and restore it later. Useful for switching between a monitoring view (many small cards) and a control view (fewer, wider cards).
Saving a Preset
- Arrange your cards, resize any to wide, and hide anything you do not need.
- Click the Save as preset button (bookmark icon) in the dashboard toolbar.
- Enter a name for the preset (e.g. "Monitoring View" or "Control View") and click Save.
The preset captures the current card order, room order, hidden cards, and wide card selections. You can save up to 5 presets per device.
Loading a Preset
- Click the Load preset button (stack icon) in the dashboard toolbar. The button is only visible when at least one preset exists.
- A dropdown lists all saved presets sorted by creation date.
- Click a preset name. A confirmation prompt appears — click Yes to apply.
Loading a preset immediately applies all saved card positions, wide/normal sizes, and hidden card state for all rooms.
Deleting a Preset
In the preset dropdown, each preset row has a trash icon on the right. Click it to remove the preset. This does not affect the current dashboard layout.
How Layout is Persisted
All layout state — card order, room order, hidden cards, wide cards, and presets — is stored in a single Firestore document at:
users/{uid}/prefs/dashboardLayoutEvery drag-and-drop reorder, resize, hide/show action, and preset save writes to this path. Changes are applied optimistically in the UI (no spinner) and rolled back automatically if the Firestore write fails.
The layout is shared across all browsers and devices signed in to the same account. Team members with editor or owner roles see their own independent layout for the same device.
Dense Grid Mode
For dashboards with many sensors, enable dense grid mode to fit more cards on screen. Cards use a compact layout with smaller text and reduced padding.
Mobile Layout
On mobile devices, the grid automatically adjusts to a single-column layout. Room tabs become swipeable for quick navigation. The drag-and-drop system uses a touch-optimized sensor with a 150ms hold delay and 8px tolerance to distinguish taps from drags.
Next Steps
- Sharing Dashboards for public read-only links
- Analytics and History for historical data