Skip to content

UI Dashboards

Jump to bottom
Todd Lucas edited this page Apr 6, 2024 · 13 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.

Index

Mini Media Player

Configuration using the Mini Media Player custom card by kalkih.

Check out the Using the Card page section for details on how to modify the look and feel of the player UI.

How it Looks

Requirements

The following are required in order to use this dashboard:

Lovelace UI Card Definition

Add the following YAML to a dashboard of your choice.

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

  • change media_player.YOUR_SPOTIFYPLUS_PLAYER_ENTITY_ID to your SpotifyPlus player entity_id (e.g. media_player.spotifyplus_username)
type: entities
title: Mini Media Player - SpotifyPlus
entities:
  - type: custom:mini-media-player
    entity: media_player.YOUR_SPOTIFYPLUS_PLAYER_ENTITY_ID
    artwork: full-cover
    artwork_border: true
    power_color: true
    show_source: true
    group: false
    source: full
    info: long
    hide:
      power: true
      repeat: false
      runtime: false
      shuffle: false
      source: false
      volume: false

Add Track To Favorites

Configuration using the Mini Media Player custom card (by kalkih) that defines shortcut buttons to add / remove the currently playing track to your Spotify user favorite tracks list.

This only works for track and episode items being played.

Note that there is no feedback that the track was added to the favorites; however, a popup message is displayed if an error occurs while calling the underlying service.

Check out the Using the Card page section for details on how to modify the look and feel of the player UI.

How it Looks

Requirements

The following are required in order to use this dashboard:

Lovelace UI Card Definition

Add the following YAML to a dashboard of your choice.

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

  • change media_player.YOUR_SPOTIFYPLUS_PLAYER_ENTITY_ID to your SpotifyPlus player entity_id (e.g. media_player.spotifyplus_username)
type: entities
title: Mini Media Player - SpotifyPlus
entities:
  - type: custom:mini-media-player
    entity: media_player.YOUR_SPOTIFYPLUS_PLAYER_ENTITY_ID
    artwork: full-cover
    artwork_border: true
    power_color: true
    show_source: true
    group: false
    source: full
    info: long
    hide:
      power: true
      repeat: false
      runtime: false
      shuffle: false
      source: false
      volume: false
    shortcuts:
      columns: 2
      buttons:
        - name: Add Favorite
          type: service
          id: spotifyplus.save_track_favorites
          data:
            entity_id: media_player.YOUR_SPOTIFYPLUS_PLAYER_ENTITY_ID
        - name: Remove Favorite
          type: service
          id: spotifyplus.remove_track_favorites
          data:
            entity_id: media_player.YOUR_SPOTIFYPLUS_PLAYER_ENTITY_ID

Add Track To Playlist

Configuration using the Mini Media Player custom card (by kalkih) that defines a shortcut button to add the currently playing track to a specified Spotify playlist.

Note that there is no feedback that the track was added to the playlist; however, a popup message is displayed if an error occurs while calling the underlying service.

Check out the Using the Card page section for details on how to modify the look and feel of the player UI.

How it Looks

Requirements

The following are required in order to use this dashboard:

Lovelace UI Card Definition

Add the following YAML to a dashboard of your choice.

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

  • change media_player.YOUR_SPOTIFYPLUS_PLAYER_ENTITY_ID to your SpotifyPlus player entity_id (e.g. media_player.spotifyplus_username)
  • change SPOTIFY_PLAYLIST_ID to your Spotify playlist id. Note that this is an ID value (e.g. 4yptcTKnXjCu3V92tVVafS) and not a URI value (e.g. spotify:playlist:4yptcTKnXjCu3V92tVVafS).
type: entities
title: Mini Media Player - SpotifyPlus
entities:
  - type: custom:mini-media-player
    entity: media_player.YOUR_SPOTIFYPLUS_PLAYER_ENTITY_ID
    artwork: full-cover
    artwork_border: true
    power_color: true
    show_source: true
    group: false
    source: full
    info: long
    hide:
      power: true
      repeat: false
      runtime: false
      shuffle: false
      source: false
      volume: false
    shortcuts:
      columns: 1
      buttons:
        - name: Add Playing Track to Playlist
          type: service
          id: spotifyplus.playlist_items_add
          data:
            entity_id: media_player.YOUR_SPOTIFYPLUS_PLAYER_ENTITY_ID
            playlist_id: SPOTIFY_PLAYLIST_ID

Browse Media Library

Configuration using the Mini Media Player custom card (by kalkih) that defines shortcut buttons to display the Media Library Browser for a specified media player that support media browsing. In this example, five buttons are defined that take you directly to the specified Spotify content: Playlists, Followed Artists, Favorite Albums, Favorite Tracks, and the root Spotify media Library node.

Check out the Using the Card page section for details on how to modify the look and feel of the player UI.

How it Looks

Requirements

The following are required in order to use this dashboard:

  • Mini Media Player Custom Card is used to display the player UI. Install it via HACS using the Install Instructions.
  • Browser_Mod 2 Custom Card is used to navigate to the media library. Install it via HACS using the Install Instructions.
  • Ensure you have configured your browser(s) in the Browser Mod configuration settings.
  • Ensure you have popups enabled in your browser of choice for the Home Assistant site. Failure to allow popups for the HA site will result in nothing happening when you click a button shortcut.

Lovelace UI Card Definition

Add the following YAML to a dashboard of your choice.

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

  • change media_player.YOUR_SPOTIFYPLUS_PLAYER_ENTITY_ID to your SpotifyPlus player entity_id (e.g. media_player.spotifyplus_username)
  • change http://homeassistant.local:8123 to your Home Assistant UI url prefix (if needed).
type: entities
title: Mini Media Player - SpotifyPlus
entities:
  - type: custom:mini-media-player
    entity: media_player.YOUR_SPOTIFYPLUS_PLAYER_ENTITY_ID
    artwork: full-cover
    artwork_border: true
    power_color: true
    show_source: true
    group: false
    source: full
    info: long
    hide:
      power: true
      repeat: false
      runtime: false
      shuffle: false
      source: false
      volume: false
    shortcuts:
      columns: 4
      buttons:
        - name: Playlists
          type: service
          id: browser_mod.navigate
          data:
            entity_id: media_player.YOUR_SPOTIFYPLUS_PLAYER_ENTITY_ID
            device_id: THIS
            path: >-
              http://homeassistant.local:8123/media-browser/media_player.YOUR_SPOTIFYPLUS_PLAYER_ENTITY_ID/spotify_user_playlists%2Cspotify_user_playlists
        - name: Artists
          type: service
          id: browser_mod.navigate
          data:
            entity_id: media_player.YOUR_SPOTIFYPLUS_PLAYER_ENTITY_ID
            device_id: THIS
            path: >-
              http://homeassistant.local:8123/media-browser/media_player.YOUR_SPOTIFYPLUS_PLAYER_ENTITY_ID/spotify_user_followed_artists%2Cspotify_user_followed_artists
        - name: Albums
          type: service
          id: browser_mod.navigate
          data:
            entity_id: media_player.YOUR_SPOTIFYPLUS_PLAYER_ENTITY_ID
            device_id: THIS
            path: >-
              http://homeassistant.local:8123/media-browser/media_player.YOUR_SPOTIFYPLUS_PLAYER_ENTITY_ID/spotify_user_saved_albums%2Cspotify_user_saved_albums
        - name: Tracks
          type: service
          id: browser_mod.navigate
          data:
            entity_id: media_player.YOUR_SPOTIFYPLUS_PLAYER_ENTITY_ID
            device_id: THIS
            path: >-
              http://homeassistant.local:8123/media-browser/media_player.YOUR_SPOTIFYPLUS_PLAYER_ENTITY_ID/spotify_user_saved_tracks%2Cspotify_user_saved_tracks
        - name: Browse All Media
          type: service
          id: browser_mod.navigate
          data:
            entity_id: media_player.YOUR_SPOTIFYPLUS_PLAYER_ENTITY_ID
            device_id: THIS
            path: >-
              http://homeassistant.local:8123/media-browser/media_player.YOUR_SPOTIFYPLUS_PLAYER_ENTITY_ID

Sonos Card Media Player

Configuration using the Sonos Card Media Player custom card by punxaphil.

Check out the Configuration section for details on how to modify the look and feel of the player UI.

Note that I have only tested this card with my SpotifyPlus integration, which is a NOT Sonos player. I do not own any Sonos gear as of yet, as I spent all my money on Bose SoundTouch gear instead.

How it Looks

Requirements

The following are required in order to use this dashboard:

Lovelace UI Card Definition

Add the following YAML to a dashboard of your choice.

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

  • change media_player.YOUR_SPOTIFYPLUS_PLAYER_ENTITY_ID to your SpotifyPlus player entity_id (e.g. media_player.spotifyplus_username)
type: custom:sonos-card
sections:
  - player
entities:
  - media_player.YOUR_SPOTIFYPLUS_PLAYER_ENTITY_ID
showVolumeUpAndDownButtons: true
showNonSonosPlayers: true
showAudioInputFormat: true
artworkAsBackground: true
card_mod:
  debug: false
  style:
    .: ''
    sonos-player$: |
      .controls {
        background-color: rgba(var(--rgb-card-background-color), 0.4) !important;
      }
    sonos-player$ sonos-player-controls$: |
      .icons * {    
        --mdc-icon-button-size: 3rem !important;
        --mdc-icon-size: 2rem !important;
      } 
      ha-icon-button {
        display: none !important;
      }
    sonos-player$ sonos-player-controls$ sonos-ha-player$ more-info-content$ more-info-media_player$: |
      ha-icon-button[action="shuffle_set"] {
        display: none !important;
      }
      ha-icon-button[action="media_previous_track"] {
        display: inline !important;
      }
    sonos-player$ sonos-player-controls$ sonos-ha-player+sonos-ha-player+sonos-ha-player$ more-info-content$ more-info-media_player$: |
      ha-icon-button[action="repeat_set"] {
        display: none !important;
      }
      ha-icon-button[action="media_next_track"] {
        display: inline !important;
      }
    sonos-player$ sonos-player-controls$ sonos-volume$: |
      ha-control-slider {
        height: 14px !important;
      } 
      ha-icon-button {
        --mdc-icon-button-size: 2rem !important;
        --mdc-icon-size: 1.5rem !important;
      }

Sonos Card Customizations

The Sonos Card can be customized by adjusting various card_mod settings. Note that the Card Mod Custom component must be installed for card_mod to take effect.

  • Sonos Card Customized Info Area

    This is the informational area (at the top of the player) that contains song title, track progress bar, etc.

    Use the sonos-player$ \ sonos-player-header selector to style this area.

    Background Color / Transparency

    Adjust the background-color CSS style attribute. The --rgb-card-background-color value is a CSS variable that can be overridden with whatever background color you want. The last argument (e.g. 0.4 in the example below) controls transparency, with the range of 0.0 (transparent) to 1.0 (solid).

    sonos-player$: |
  sonos-player-header {
    background-color: rgba(var(--rgb-card-background-color), 0.4) !important;
  }

  • Sonos Card Customized Playback Control Area

    This is the playback control area (at the bottom of the player) that contains playback controls (pause, resume, next / prev track, repeat, shuffle, volume up / down buttons) as well as the volume slider and mute control.

    Use the sonos-player$ \ .controls selector to style this area.

    Background Color / Transparency
    Adjust the background-color CSS style attribute. The --rgb-card-background-color value is a CSS variable that can be overridden with whatever background color you want. The last argument (e.g. 0.4 in the example below) controls transparency, with the range of 0.0 (transparent) to 1.0 (solid).

    sonos-player$: |
  .controls {
    background-color: rgba(var(--rgb-card-background-color), 0.4) !important;
  }

    Volume Step Down Button
    Use the sonos-player$ sonos-player-controls$ \ ha-icon-button selector to style this area. Adjust the display CSS style attribute to show (inline) or hide (none) the button.

      sonos-player$ sonos-player-controls$: |
    ha-icon-button {
      display: none !important;
    }

    Volume Step Up Button
    Use the sonos-player$ sonos-player-controls$ \ ha-icon-button+ha-icon-button selector to style this area. Adjust the display CSS style attribute to show (inline) or hide (none) the button.

      sonos-player$ sonos-player-controls$: |
    ha-icon-button+ha-icon-button {
      display: none !important;
    }

    Shuffle Button
    Use the sonos-player$ sonos-player-controls$ sonos-ha-player$ more-info-content$ more-info-media_player$ \ ha-icon-button[action="shuffle_set"] selector to style this area. Adjust the display CSS style attribute to show (inline) or hide (none) the button.

      sonos-player$ sonos-player-controls$ sonos-ha-player$ more-info-content$ more-info-media_player$: |
    ha-icon-button[action="shuffle_set"] {
      display: none !important;
    }

    Previous Track Button
    Use the sonos-player$ sonos-player-controls$ sonos-ha-player$ more-info-content$ more-info-media_player$ \ ha-icon-button[action="media_previous_track"] selector to style this area. Adjust the display CSS style attribute to show (inline) or hide (none) the button.

      sonos-player$ sonos-player-controls$ sonos-ha-player$ more-info-content$ more-info-media_player$: |
    ha-icon-button[action="media_previous_track"] {
      display: none !important;
    }

    Next Track Button
    Use the sonos-player$ sonos-player-controls$ sonos-ha-player+sonos-ha-player+sonos-ha-player$ more-info-content$ more-info-media_player$ \ ha-icon-button[action="media_next_track"] selector to style this area. Adjust the display CSS style attribute to show (inline) or hide (none) the button.

      sonos-player$ sonos-player-controls$ sonos-ha-player+sonos-ha-player+sonos-ha-player$ more-info-content$ more-info-media_player$: |
    ha-icon-button[action="media_next_track"] {
      display: none !important;
    }

    Repeat Button
    Use the sonos-player$ sonos-player-controls$ sonos-ha-player+sonos-ha-player+sonos-ha-player$ more-info-content$ more-info-media_player$ \ ha-icon-button[action="media_next_track"] selector to style this area. Adjust the display CSS style attribute to show (inline) or hide (none) the button.

      sonos-player$ sonos-player-controls$ sonos-ha-player+sonos-ha-player+sonos-ha-player$ more-info-content$ more-info-media_player$: |
    ha-icon-button[action="repeat_set"] {
      display: none !important;
    }

Standard Media Player

Configuration using the Standard HA Media Player.

Check out the Configuration Variables section for details on how to modify the look and feel of the player UI.

How it Looks

Requirements

The following are required in order to use this dashboard:

  • Standard HA Media Player is used to display the player UI. Install is not necessary, as it comes pre-installed with HA.

Lovelace UI Card Definition

Add the following YAML to a dashboard of your choice.

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

  • change media_player.YOUR_SPOTIFYPLUS_PLAYER_ENTITY_ID to your SpotifyPlus player entity_id (e.g. media_player.spotifyplus_username)
type: media-control
entity: media_player.YOUR_SPOTIFYPLUS_PLAYER_ENTITY_ID
Clone this wiki locally