Skip to content

UI Dashboards

Jump to bottom
Todd Lucas edited this page Apr 12, 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

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