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).
  • Collapse synchronized speaker groups — when speakers play together as a group, the page shows just the group card instead of the group plus each member. Recognises standard group_members groups (Cast / Sonos / Squeezebox), Music Assistant sync groups (shared active_queue), and the silent passive speaker outputs an MA group drives — and never hides a lone playing speaker. Toggle per page with Combine grouped speakers (on by default, view.mediaSplitGroups).
  • 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.
  • Per-device artwork settings (edit mode) — each device row has an image icon ("Artwork and media settings") that opens a popup to toggle Show artwork and pick an Artwork source (a companion media_player to borrow album art from). Saved per device on the view (view.mediaOverrides) and applied to every media_player merged into that device. See Recipes → Fix missing media artwork.
  • 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).

How Music Assistant search works

The Music Search tile is a launcher: tapping it opens a right-side flyout where you search the Music Assistant library and cast a result to any player — all from the dashboard, without leaving for the HA media browser.

  • Requirement. The Music Assistant integration must be set up in Home Assistant (it adds the music_assistant.* services and exposes its players as media_player.* entities). Glance auto-discovers the integration's config entry — there's nothing to configure in the dashboard.
  • Search. Type a term and (optionally) narrow by type — All / Artists / Albums / Tracks / Playlists / Radio — set a result limit, and toggle Library only (your own library vs. streaming providers) and Favourites only. Results come back grouped with artwork and a subtitle (artist / album / version). Under the hood this calls the music_assistant.search service.
  • Cast. Pick a player from the dropdown and tap any result to play it (music_assistant.play_media). Your last-used player is remembered. The player list is only Music Assistant players (resolved from the entity registry by platform === 'music_assistant') and only active ones — players you disabled in MA drop off, while sync / speaker groups stay.
  • Adding the tile. In Edit mode, add the Music Search special tile from the tile picker (it appears alongside your entities). On a Media page you can also toggle the Music Assistant button on/off in the page's edit controls. See Recipes.

Credit. The Music Assistant search idea was inspired by fastxl2024/mass-search-card.

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. See Pages & Board Types for what each board type does and every per-page setting, plus the recipes for Now Playing, Sensor graphs and Cameras.
  • 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