Building a Home Assistant Dashboard with Whole Home Audio Control

My Home Assistant dashboard has evolved significantly over the past year. What started as the default auto-generated cards has become a carefully organized interface that my whole family actually uses. Here’s how I built it, with a focus on the whole home audio system that ties everything together.

Dashboard Philosophy

Before diving into implementation, a few principles guided the design:

  1. Function over flash - Every card earns its screen space
  2. One-tap actions - Common tasks shouldn’t require drilling into menus
  3. Status at a glance - The overview tells you what’s happening without interaction
  4. Mobile-first - Tablets mounted around the house are the primary interface

The Stack

  • Lovelace YAML mode - Full control over layout and structure
  • Mushroom cards - Clean, consistent UI components
  • Custom Layout Card - Responsive grid layouts that work on any screen
  • Stack-in-card - Grouping related controls together

Overview Page

The overview page is designed to answer “what’s happening right now?” at a glance:

- type: custom:mushroom-chips-card
  alignment: center
  chips:
    - type: weather
      entity: weather.katw

    - type: template
      entity: person.rusty_bower
      icon: mdi:account
      icon_color: "{{ 'green' if is_state('person.rusty_bower', 'home') else 'grey' }}"
      content: Rusty

    - type: template
      icon: mdi:lightbulb-group
      icon_color: "{{ 'amber' if states.light | selectattr('state', 'eq', 'on') | list | count > 0 else 'disabled' }}"
      content: "{{ states.light | selectattr('state', 'eq', 'on') | list | count }} lights"

The chip bar at the top shows:

  • Current weather
  • Who’s home (person tracking)
  • How many lights are on (tap to navigate to lighting)
  • Garage door status (red = open, green = closed)
  • HVAC status (heating/cooling active)
  • Upcoming trash/recycling days

Quick actions provide one-tap scenes: Goodnight, Spa Mode, All Lights Off, Close All Garage Doors.

Whole Home Audio Architecture

The audio system uses a Xantech DAX66 multi-zone amplifier - a commercial-grade matrix amplifier that can route any of 6 sources to any of 18 zones independently. Each zone has its own volume control and can play different content simultaneously.

The Zones

The house is wired with in-ceiling speakers across 15 zones spanning three floors - main living areas, bedrooms/offices upstairs, and utility/recreation spaces in the basement. Plus a dedicated Theater with an Anthem AV receiver for serious listening.

Integration Approach

The Xantech communicates via RS-232, but I needed network access from Kubernetes. The solution is a socat bridge running as a sidecar:

containers:
  - name: socat
    image: alpine/socat:latest
    args:
      - "-d"
      - "-d"
      - "TCP-LISTEN:7001,reuseaddr,fork"
      - "TCP:10.0.10.209:4999,keepalive,forever,interval=10"

This bridges TCP connections from Home Assistant to the serial-to-ethernet adapter connected to the Xantech. The keepalive,forever ensures the connection recovers from network hiccups.

Home Assistant sees each zone as a media_player entity with source selection and volume control.

Audio Dashboard Design

Designing the audio UI was tricky. With 15 zones, a traditional media player card for each would be overwhelming. The solution is a two-column layout: streaming controls on the left, zone controls on the right.

Streaming Column

The maxi-media-player card provides a full-featured player with album art as a blurred background:

- type: custom:maxi-media-player
  entities:
    - media_player.spotify
    - media_player.zone_1
    - media_player.zone_2
    # ... all zones
  sections:
    - player
  artworkAsBackgroundBlur: true

This gives you playback controls, track info, and the ability to cast to any zone - all in one card.

Zone Controls Column

For the individual zones, I use mushroom-media-player-card with a horizontal layout. Tap to toggle on/off, volume buttons for quick adjustments:

- type: custom:stack-in-card
  cards:
    - type: custom:mushroom-title-card
      title: Whole Home Audio
      subtitle: Upstairs
    - type: custom:mushroom-media-player-card
      entity: media_player.zone_1
      name: Zone 1
      layout: horizontal
      volume_controls:
        - volume_buttons
        - volume_set
      media_controls: []
      collapsible_controls: false
      tap_action:
        action: toggle
    - type: custom:mushroom-media-player-card
      entity: media_player.zone_2
      name: Zone 2
      layout: horizontal
      volume_controls:
        - volume_buttons
        - volume_set
      media_controls: []
      collapsible_controls: false
      tap_action:
        action: toggle
    # ... more zones

    - type: custom:mushroom-title-card
      title: ""
      subtitle: Main Floor
    # ... main floor zones

The key settings:

  • layout: horizontal - Compact single-line layout
  • volume_controls: [volume_buttons, volume_set] - Both +/- buttons and a slider
  • media_controls: [] - Hide play/pause since we control that from the streaming card
  • tap_action: action: toggle - Tap the card to turn the zone on/off

This puts all zones in a scrollable card organized by floor, with the streaming player always visible on the left.

Scene Integration

The real power comes from combining audio with other automations:

Spa Mode

One tap: dims the outdoor lights, starts a relaxation playlist in the relevant zone, adjusts the HVAC.

- type: custom:mushroom-template-card
  primary: Spa Mode
  icon: mdi:hot-tub
  icon_color: cyan
  tap_action:
    action: call-service
    service: scene.turn_on
    target:
      entity_id: scene.spa_mode

Goodnight

Turns off all audio zones, sets overnight temperature setpoints, dims lights to 5% in hallways, locks doors.

Party Mode

Syncs all main floor and outdoor zones to the same source at matched volumes.

Theater Integration

The theater runs separately on an Anthem AV receiver, integrated via IP control. It gets its own section with proper media controls:

- type: custom:mushroom-media-player-card
  entity: media_player.anthem_av
  name: Anthem AV
  use_media_info: true
  show_volume_level: true
  volume_controls:
    - volume_set
    - volume_mute

The theater lighting also has dedicated scene buttons: Off, Movie (5% seating lights), Intermission (50%), and Full brightness for cleaning.

Tablet Deployment

Fire tablets run Fully Kiosk Browser showing the dashboard at key locations - one on the main floor for everyday use, one upstairs, and a portable tablet that docks at a charging station when not in use.

The Admin page shows tablet connectivity status so I know if one has gone offline.

Lessons Learned

  1. YAML mode is worth it - The visual editor can’t do responsive layouts or template chips
  2. Group by function, not location - “Lighting” view is more useful than “Living Room” view
  3. Limit visible options - Show the 80% use case, hide the edge cases behind taps
  4. Test with family - My initial designs were too information-dense

What’s Next

  • Music Assistant integration for better source management
  • Voice control via local Whisper for “play jazz in the kitchen”
  • Presence-based audio - automatically route music to follow occupancy

The dashboard continues to evolve, but the core principle stays the same: make the smart home actually easier to use than the dumb version.