Skip to content

UI Dashboards

Jump to bottom
Todd Lucas edited this page Sep 20, 2024 · 14 revisions

The following dashboards are useful to me in my environment, so I thought I would post them here in case anyone else finds them useful.

Check out the Configuration Options page for details on how to modify the look and feel of the card.

Index

Panel Configurations

The following cards are configured using the dashboard Panel (1 card) view type.

Player Panel Card

Displays the Player in a full-width panel.

How it Looks

Card Definition YAML

Add the following YAML to a dashboard of your choice who's view type is set to Panel (1 card).

You will need to make the following changes to the YAML:

  • change media_player.YOUR_SOUNDTOUCHPLUS_PLAYER_ENTITY_ID to your SoundTouchPlus player entity_id (e.g. media_player.livingroom_soundbar)
type: custom:soundtouchplus-card
sections:
  - player
entity: media_player.YOUR_SOUNDTOUCHPLUS_PLAYER_ENTITY_ID
width: fill
height: fill
playerHeaderTitle: '{player.name}'
playerHeaderArtistTrack: '{player.media_artist} - {player.media_title}'
playerHeaderAlbum: '{player.media_album_name}'
playerHeaderNoMediaPlayingText: no media is playing
customImageUrls:
  default: /local/images/soundtouchplus_card_customimages/default.png

Pandora Stations Panel Card

Displays your Pandora Stations in a full-width panel.

How it Looks

Card Definition YAML

Add the following YAML to a dashboard of your choice who's view type is set to Panel (1 card).

You will need to make the following changes to the YAML:

  • change media_player.YOUR_SOUNDTOUCHPLUS_PLAYER_ENTITY_ID to your SoundTouchPlus player entity_id (e.g. media_player.livingroom_soundbar)
  • change YOUR_PANDORA_USERNAME to your SoundTouch Pandora source account name (e.g. [email protected])
type: custom:soundtouchplus-card
entity: media_player.YOUR_SOUNDTOUCHPLUS_PLAYER_ENTITY_ID
sections:
  - pandorastations
title: My Pandora Stations
width: fill
height: fill
pandoraBrowserSubTitle: >-
  refreshed on {lastupdatedon} from device "{player.name}" using
  "{config.pandorasourceaccount}" account
pandoraBrowserItemsPerRow: 9
pandoraBrowserItemsHideTitle: false
pandoraSourceAccount: YOUR_PANDORA_USERNAME
customImageUrls:
  default: /local/images/soundtouchplus_card_customimages/default.png

Device Presets Panel Card

Displays your Device Presets in a full-width panel.

How it Looks

Card Definition YAML

Add the following YAML to a dashboard of your choice who's view type is set to Panel (1 card).

You will need to make the following changes to the YAML:

  • change media_player.YOUR_SOUNDTOUCHPLUS_PLAYER_ENTITY_ID to your SoundTouchPlus player entity_id (e.g. media_player.livingroom_soundbar)
type: custom:soundtouchplus-card
entity: media_player.YOUR_SOUNDTOUCHPLUS_PLAYER_ENTITY_ID
sections:
  - presets
height: fill
width: fill
presetBrowserTitle: My SoundTouch Presets
presetBrowserSubTitle: >-
  refreshed on {player.soundtouchplus_presets_lastupdated} from device
  "{player.name}"
presetBrowserItemsPerRow: 6
presetBrowserItemsHideTitle: false
presetBrowserItemsHideSource: false
customImageUrls:
  default: /local/images/soundtouchplus_card_customimages/default.png
  empty preset: /local/images/soundtouchplus_card_customimages/empty_preset.png
  My Private Playlist: /local/images/soundtouchplus_card_customimages/logo_spotify.png
  Daily Mix 1: https://brands.home-assistant.io/spotifyplus/icon.png

User Presets Panel Card

Displays your User Presets in a full-width panel.

How it Looks

Card Definition YAML

Add the following YAML to a dashboard of your choice who's view type is set to Panel (1 card).

Please refer to the User Preset Configuration wiki document for examples of how to define user preset content items.

You will need to make the following changes to the YAML:

  • change media_player.YOUR_SOUNDTOUCHPLUS_PLAYER_ENTITY_ID to your SoundTouchPlus player entity_id (e.g. media_player.livingroom_soundbar)
type: custom:soundtouchplus-card
entity: media_player.YOUR_SOUNDTOUCHPLUS_PLAYER_ENTITY_ID
sections:
  - presets
userPresetBrowserTitle: User Presets
userPresetBrowserSubTitle: >-
  refreshed on {medialist.lastupdatedon} ({medialist.itemcount} items)
userPresetBrowserItemsPerRow: 4
userPresetBrowserItemsHideTitle: false
userPresetBrowserItemsHideSource: false
userPresets:
  - ContentItem:
      Name: K-Love Radio
      ContainerArt: >-
        http://cdn-profiles.tunein.com/s33828/images/logog.png?t=637986894890000000
      Location: /v1/playback/station/s33828
      Source: TUNEIN
      TypeValue: stationurl
... truncated for brevity

Recently Played Panel Card

Displays your Recently Played media items in a full-width panel.

How it Looks

Card Definition YAML

Add the following YAML to a dashboard of your choice who's view type is set to Panel (1 card).

You will need to make the following changes to the YAML:

  • change media_player.YOUR_SOUNDTOUCHPLUS_PLAYER_ENTITY_ID to your SoundTouchPlus player entity_id (e.g. media_player.livingroom_soundbar)
type: custom:soundtouchplus-card
entity: media_player.YOUR_SOUNDTOUCHPLUS_PLAYER_ENTITY_ID
sections:
  - recents
height: fill
width: fill
recentBrowserTitle: My SoundTouch Recently Played Media
recentBrowserSubTitle: >-
  refreshed on {player.soundtouchplus_recents_lastupdated} from device "{player.name}"
recentBrowserItemsPerRow: 10
recentBrowserItemsHideTitle: false
recentBrowserItemsHideSource: false
customImageUrls:
  default: /local/images/soundtouchplus_card_customimages/default.png
  empty preset: /local/images/soundtouchplus_card_customimages/empty_preset.png
  My Private Playlist: /local/images/soundtouchplus_card_customimages/logo_spotify.png
  Daily Mix 1: https://brands.home-assistant.io/spotifyplus/icon.png

Masonry Configurations

The following cards are configured using the dashboard Masonry view type.

Player Masonry Card

Displays the Player in a card with default dimensions.

How it Looks

Card Definition YAML

Add the following YAML to a dashboard of your choice who's view type is set to Masonry.

You will need to make the following changes to the YAML:

  • change media_player.YOUR_SOUNDTOUCHPLUS_PLAYER_ENTITY_ID to your SoundTouchPlus player entity_id (e.g. media_player.livingroom_soundbar)
type: custom:soundtouchplus-card
sections:
  - player
entity: media_player.YOUR_SOUNDTOUCHPLUS_PLAYER_ENTITY_ID
playerHeaderTitle: '{player.name}'
playerHeaderArtistTrack: '{player.media_artist} - {player.media_title}'
playerHeaderAlbum: '{player.media_album_name}'
playerHeaderNoMediaPlayingText: no media is playing
customImageUrls:
  default: /local/images/soundtouchplus_card_customimages/empty_preset.png

Pandora Stations Masonry Card

Displays your Pandora Stations in a card with default dimensions.

How it Looks

Card Definition YAML

Add the following YAML to a dashboard of your choice who's view type is set to Masonry.

You will need to make the following changes to the YAML:

  • change media_player.YOUR_SOUNDTOUCHPLUS_PLAYER_ENTITY_ID to your SoundTouchPlus player entity_id (e.g. media_player.livingroom_soundbar)
  • change YOUR_PANDORA_USERNAME to your SoundTouch Pandora source account name (e.g. [email protected])
type: custom:soundtouchplus-card
entity: media_player.YOUR_SOUNDTOUCHPLUS_PLAYER_ENTITY_ID
sections:
  - pandorastations
pandoraBrowserTitle: My Pandora Stations - "{player.name}"
pandoraBrowserSubTitle: refreshed on {lastupdatedon}
pandoraBrowserItemsPerRow: 4
pandoraBrowserItemsHideTitle: false
pandoraSourceAccount: YOUR_PANDORA_USERNAME
customImageUrls:
  default: /local/images/soundtouchplus_card_customimages/default.png

Device Presets Masonry Card

Displays your Device Presets in a card with default dimensions.

How it Looks

Card Definition YAML

Add the following YAML to a dashboard of your choice who's view type is set to Panel (1 card).

You will need to make the following changes to the YAML:

  • change media_player.YOUR_SOUNDTOUCHPLUS_PLAYER_ENTITY_ID to your SoundTouchPlus player entity_id (e.g. media_player.livingroom_soundbar)
type: custom:soundtouchplus-card
entity: media_player.YOUR_SOUNDTOUCHPLUS_PLAYER_ENTITY_ID
sections:
  - presets
presetBrowserTitle: My SoundTouch Presets
presetBrowserSubTitle: >-
  refreshed on {player.soundtouchplus_presets_lastupdated} from device
  "{player.name}"
presetBrowserItemsPerRow: 3
presetBrowserItemsHideTitle: false
presetBrowserItemsHideSource: false
customImageUrls:
  default: /local/images/soundtouchplus_card_customimages/default.png
  empty preset: /local/images/soundtouchplus_card_customimages/empty_preset.png
  My Private Playlist: /local/images/soundtouchplus_card_customimages/logo_spotify.png
  Daily Mix 1: https://brands.home-assistant.io/spotifyplus/icon.png

User Presets Masonry Card

Displays your User Presets in a card with default dimensions.

How it Looks

Card Definition YAML

Add the following YAML to a dashboard of your choice who's view type is set to Panel (1 card).

Please refer to the User Preset Configuration wiki document for examples of how to define user preset content items.

You will need to make the following changes to the YAML:

  • change media_player.YOUR_SOUNDTOUCHPLUS_PLAYER_ENTITY_ID to your SoundTouchPlus player entity_id (e.g. media_player.livingroom_soundbar)
type: custom:soundtouchplus-card
entity: media_player.YOUR_SOUNDTOUCHPLUS_PLAYER_ENTITY_ID
sections:
  - presets
userPresetBrowserTitle: User Presets
userPresetBrowserSubTitle: >-
  refreshed on {medialist.lastupdatedon} ({medialist.itemcount} items)
userPresetBrowserItemsPerRow: 4
userPresetBrowserItemsHideTitle: false
userPresetBrowserItemsHideSource: false
userPresets:
  - ContentItem:
      Name: K-Love Radio
      ContainerArt: >-
        http://cdn-profiles.tunein.com/s33828/images/logog.png?t=637986894890000000
      Location: /v1/playback/station/s33828
      Source: TUNEIN
      TypeValue: stationurl
... truncated for brevity

Recently Played Masonry Card

Displays your Recently Played media items in a card with default dimensions.

How it Looks

Card Definition YAML

Add the following YAML to a dashboard of your choice who's view type is set to Masonry.

You will need to make the following changes to the YAML:

  • change media_player.YOUR_SOUNDTOUCHPLUS_PLAYER_ENTITY_ID to your SoundTouchPlus player entity_id (e.g. media_player.livingroom_soundbar)
type: custom:soundtouchplus-card
entity: media_player.YOUR_SOUNDTOUCHPLUS_PLAYER_ENTITY_ID
sections:
  - recents
recentBrowserTitle: My SoundTouch Recently Played Media
recentBrowserSubTitle: >-
  refreshed on {player.soundtouchplus_recents_lastupdated} from device
  "{player.name}"
recentBrowserItemsPerRow: 4
recentBrowserItemsHideTitle: false
recentBrowserItemsHideSource: false
customImageUrls:
  default: /local/images/soundtouchplus_card_customimages/default.png
  empty preset: /local/images/soundtouchplus_card_customimages/empty_preset.png
  My Private Playlist: /local/images/soundtouchplus_card_customimages/logo_spotify.png
  Daily Mix 1: https://brands.home-assistant.io/spotifyplus/icon.png

Card Picker Dialog

The custom card can be found in the HA Card Picker dialog by searching for SoundTouch. Click on the Custom: SoundTouchPlus Card tile to add the card to a dashboard.

How it Looks

Clone this wiki locally