-
Notifications
You must be signed in to change notification settings - Fork 2
Features
- 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 tolayouts.json(syncs across devices on the same host; persists to/dataon 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.
-
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. -
DashboardViewrenders a view's scenes + tile grid;RoomNavswitches rooms. -
DetailPanelflyout — full controls, camera feed, history graph, scenes, links.
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).
-
Auto "Now Playing" media view (
MediaAutoView, pagekind: '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 severalmedia_playerentities (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.
-
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_playerto borrow album art from). Saved per device on the view (view.mediaOverrides) and applied to everymedia_playermerged 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).
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 asmedia_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.searchservice. -
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 byplatform === '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.
- 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. Switching board type is one dropdown — see 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).
- 4 themes — Midnight, Slate, OLED Black, Light (Settings modal).
-
Accent color picker (8 swatches + custom).
applyTheme()sets--accent-orange,--accent-primary, and an--accent-rgbtriplet 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.
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.
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
pointerdownlistener firesnavigator.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.