Skip to content

Features

jv edited this page Jun 6, 2026 · 8 revisions

Features

Layout & editing

  • Multiple views/pages with a left Sidebar + RoomNav.
  • Edit mode — drag-and-drop tiles (@dnd-kit), add/remove tiles, add/reorder/ remove scenes per view, reset to defaults. Saved to layouts.json (syncs across devices on the same host; persists to /data on the add-on).
  • Per-tile settings (TileSettings) — camera entity, links, quick actions, flyout config, reverse slider, custom artwork entity, tile size/span.
  • Tile sizes — by default tiles are compact 1x1; vacuums and covers (with a current_position attribute) auto-pick a tall 1x2 to fit their controls. Light tiles stay 1x1 even when on (the brightness slider works across the compact tile) so toggling a light doesn't reflow the grid. You can override any tile's size in TileSettings (1x1, 2x1, 1x2, 2x2) — those manual choices are always preserved on the auto-sized defaults.
  • Gap-filling layout — the tile grid uses grid-auto-flow: dense, so 1x1 tiles backfill empty space left by taller (1x2) tiles instead of leaving holes.
  • Compact sections (Settings → Appearance, on by default) — flows whole room sections into a responsive masonry so short sections sit side-by-side and fill the screen width instead of each claiming a full-width band with a tall empty gap. Section headings and separation stay intact; column count scales with the viewport (1 → 4). Turn it off to stack every section full-width.
  • Header layout — the People avatars live in the header's top-right in their own glass bubble, level with the weather widget. Scenes render in a card at the bottom of the page so the room tiles appear sooner without scrolling.
  • Layout export / import (Settings → Dashboard data) — see Layout: Backup & Restore.

Tiles & cards

  • DeviceTile — lights, switches, media players, covers, locks, buttons, etc. with slide-to-dim, live artwork backgrounds, and per-domain controls.
  • ClimateCards, LockCards, VacuumCard, CameraGrid, SensorWidgets, RoomCard / RoomPanel, PersonTracker, Sparkline, ScenePills.
  • DashboardView renders a view's scenes + tile grid; RoomNav switches rooms.
  • DetailPanel flyout — full controls, camera feed, history graph, scenes, links.

Vacuum control center

The vacuum tile shows the live map as its background with battery, status and quick Clean/Dock buttons; its flyout is a full control center (large live map, status summary, Clean/Stop/Dock/Locate, suction + cleaning-mode selectors with friendly Vac & Mop / Vac / Mop / Vac → Mop labels, per-room selection with one-tap clean, and maintenance bars for brushes/filter/sensors). Built for the Dreame (Tasshack dreame_vacuum) integration.

Add it yourself by picking any vacuum.* entity in the tile picker — the rich tile + flyout apply automatically, and the map, rooms, modes and consumables are auto-discovered from the entity's companion camera.*_map and select.* entities (it degrades gracefully for non-Dreame vacuums).

Media & Music Assistant

  • Auto "Now Playing" media view (MediaAutoView, page kind: 'media') — automatically lists every media device and shows transport controls only when something is actually playing on that device. No manual tile placement needed.
  • Media de-duplication (lib/mediaDevices.ts) — one physical device that exposes several media_player entities (e.g. an Android TV with ADB + Cast + remote) is collapsed to a single entry. The same matching rule feeds the Media page, the header subtitle, and the at-a-glance strip so they always agree.
  • Manual merge — when name heuristics can't tell two entities are the same device (abbreviations, possessives), select them in the Media page edit mode and Merge into one; a badge + split button let you undo. Persists on the view (view.mediaMerge).
  • Per-page controls (edit mode) — type-ahead device filter to show/hide devices, a Small / Medium / Large tile-size selector (fixed-width columns so a lone playing tile doesn't span the page), and a toggle for the Music Assistant button.
  • Music Assistant search (MusicAssistantSearch) — search the MA library (artists, albums, tracks, playlists) from a right-side flyout and tap a result to play it on any MA player. The player list is filtered to MA devices via the entity registry and narrowed to only active (available) players; sync / speaker groups remain. Artwork shows by default (opt-out per tile).

In-app page management

  • PagesManager — create, rename, re-icon, reorder, and delete pages directly in the app, no layout JSON editing by hand. Each page also has a board-type selector (Tiles, Sensor graphs, NOC (servers), Cameras, Now Playing) and per-page header toggles to hide the greeting/weather/people.
  • NOC (servers) board — a monitoring page for infrastructure. See the dedicated NOC / Servers Dashboard page.
  • Guided onboarding & empty states — first-run guidance, friendlier empty/loading states, and optimistic toggles (tiles respond instantly and reconcile with HA).

Theming

  • 4 themes — Midnight, Slate, OLED Black, Light (Settings modal).
  • Accent color picker (8 swatches + custom). applyTheme() sets --accent-orange, --accent-primary, and an --accent-rgb triplet so the accent recolors the entire UI (no hardcoded orange).
  • Date & time format — choose how timestamps render (e.g. MM/DD/YY · 12-hour, DD/MM/YY · 24-hour, YYYY-MM-DD, or your system locale) and a duration / uptime style (3d 4h 23m, 3:04:23:24, or words). Everything is drawn in the browser's own timezone, and uptime/boot sensors are auto-shown as elapsed time.

At-a-glance header strip

GlanceStrip shows a row of summary buttons (lights on, who's home, climate, media, etc.). Fully configurable in edit mode:

  • Pick each button's metric (lights/switches/fans/locks/covers/climate/people/media).
  • Set a custom label.
  • Toggle the flyout on/off (tap a button to see the entities behind the number).
  • Build a per-button exclude list — tablet/kiosk screen lights are filtered by default so they aren't counted as room lights.

Config persists on the view (view.glance) so it syncs across devices. The header greeting is dynamic — it names whoever is actually home from the person.* states (e.g. "Good night, Jeff & Carissa!" or just one name). When nobody is home it drops the names entirely and shows only the time-of-day greeting ("Good morning") — so a user viewing the dashboard while away isn't greeted by name.

"Premium feel" polish

Top picks

  • Album-art color extraction — dominant color from now-playing artwork tints the media tile/flyout glow (useArtworkColor + colorExtract).
  • Shared-element artwork → flyout — media artwork morphs into the flyout via the View Transitions API.
  • Animated media progress bar / equalizer on playing media tiles.
  • Haptics + spring press — a delegated pointerdown listener fires navigator.vibrate(8) on touch/pen taps; tiles snap on :active.

Motion & micro-interactions

  • Spring-physics flyout open (scale + blur-in).
  • Staggered tile-entrance cascade on view switch.
  • Animated value transitions — count-up temps, smooth brightness fills, crossfading album art.

Living, ambient feel (AmbientBackdrop)

  • Time-of-day ambiance — dawn/day/dusk/night gradient tint, refreshed each minute.
  • Weather-reactive backdrop — rain streaks / snow flakes driven by the weather entity; nothing renders for clear weather; lightning during thunderstorms.
  • Live light color — a light tile's glow matches its real RGB / color-temp.

All animations respect prefers-reduced-motion: reduce.

Clone this wiki locally