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.