Skip to content

Features

jv edited this page Jun 3, 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.
  • 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.

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