Skip to content

UI Dashboards

Jump to bottom
Todd Lucas edited this page Oct 26, 2024 · 11 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

Masonry Dashboard Configuration

This example will configure the card to be used on a masonry dashboard. This is the configuration I used when putting together the card documentation.

Don't care how it looks? Jump to the YAML definition.

How it Looks

Player Section - Track content

Player Section - Audiobook content

Player Section - Podcast Show content

Player Section - Album Favorites

Masonry Dashboard Configuration YAML

Add the following YAML to a masonry dashboard of your choice. 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)

  • create a userpresets.json in the <configuration folder>/www/spotifyplus/ folder. This will contain user-defined presets. Please refer to the User Presets File topic JSON File Example for the JSON file content.

type: custom:spotifyplus-card
entity: media_player.YOUR_SPOTIFYPLUS_PLAYER_ENTITY_ID
sections:
  - player
  - albumfavorites
  - artistfavorites
  - playlistfavorites
  - recents
  - devices
  - trackfavorites
  - userpresets
  - searchmedia
  - audiobookfavorites
  - showfavorites
  - episodefavorites
playerHeaderTitle: "{player.source}"
playerHeaderArtistTrack: "{player.media_artist} - {player.media_title}"
playerHeaderAlbum: "{player.media_album_name}"
playerHeaderNoMediaPlayingText: "\"{player.name}\" state is \"{player.state}\""
albumFavBrowserTitle: Album Favorites for {player.sp_user_display_name} ({medialist.itemcount}
  items)
albumFavBrowserSubTitle: click a tile item to play the content; click-hold for actions
albumFavBrowserItemsPerRow: 4
albumFavBrowserItemsHideTitle: false
albumFavBrowserItemsHideSubTitle: false
albumFavBrowserItemsSortTitle: true
artistFavBrowserTitle: Artist Favorites for {player.sp_user_display_name} ({medialist.itemcount}
  items)
artistFavBrowserSubTitle: click a tile item to play the content; click-hold for actions
artistFavBrowserItemsPerRow: 4
artistFavBrowserItemsHideTitle: false
artistFavBrowserItemsHideSubTitle: true
artistFavBrowserItemsSortTitle: true
audiobookFavBrowserTitle: Audiobook Favorites for {player.sp_user_display_name} ({medialist.itemcount}
  items)
audiobookFavBrowserSubTitle: click a tile item to play the content; click-hold for actions
audiobookFavBrowserItemsHideTitle: false
audiobookFavBrowserItemsHideSubTitle: false
audiobookFavBrowserItemsSortTitle: true
audiobookFavBrowserItemsPerRow: 4
deviceBrowserTitle: Spotify Connect Devices ({medialist.itemcount} items)
deviceBrowserSubTitle: click an item to select the device; click-hold for device info
deviceBrowserItemsPerRow: 1
deviceBrowserItemsHideSubTitle: true
episodeFavBrowserTitle: Episode Favorites for {player.sp_user_display_name} ({medialist.itemcount}
  items)
episodeFavBrowserSubTitle: click a tile item to play the content; click-hold for actions
episodeFavBrowserItemsHideTitle: false
episodeFavBrowserItemsSortTitle: true
episodeFavBrowserItemsHideSubTitle: false
playlistFavBrowserTitle: Playlist Favorites for {player.sp_user_display_name} ({medialist.itemcount}
  items)
playlistFavBrowserSubTitle: click a tile item to play the content; click-hold for actions
playlistFavBrowserItemsPerRow: 4
playlistFavBrowserItemsHideTitle: false
playlistFavBrowserItemsHideSubTitle: false
playlistFavBrowserItemsSortTitle: true
recentBrowserTitle: Recently Played by {player.sp_user_display_name} ({medialist.itemcount} items)
recentBrowserSubTitle: click a tile item to play the content; click-hold for actions
recentBrowserItemsPerRow: 4
recentBrowserItemsHideTitle: false
recentBrowserItemsHideSubTitle: false
searchMediaBrowserTitle: Search Spotify for {player.sp_user_display_name} ({medialist.itemcount} items)
searchMediaBrowserSubTitle: click a tile item to play the content; click-hold for actions
searchMediaBrowserItemsPerRow: 4
searchMediaBrowserItemsHideTitle: false
searchMediaBrowserItemsHideSubTitle: false
searchMediaBrowserSearchLimit: 150
showFavBrowserTitle: Show Favorites for {player.sp_user_display_name} ({medialist.itemcount} items)
showFavBrowserSubTitle: click a tile item to play the content; click-hold for actions
showFavBrowserItemsHideSubTitle: false
showFavBrowserItemsHideTitle: false
showFavBrowserItemsSortTitle: true
trackFavBrowserTitle: Track Favorites for {player.sp_user_display_name} ({medialist.itemcount}
  items)
trackFavBrowserSubTitle: click a tile item to play the content; click-hold for actions
trackFavBrowserItemsPerRow: 4
trackFavBrowserItemsHideTitle: false
trackFavBrowserItemsHideSubTitle: false
trackFavBrowserItemsSortTitle: false
userPresetBrowserTitle: User Presets for {player.sp_user_display_name} ({medialist.itemcount} items)
userPresetBrowserSubTitle: click a tile item to play the content; click-hold for actions
userPresetBrowserItemsPerRow: 4
userPresetBrowserItemsHideTitle: false
userPresetBrowserItemsHideSubTitle: false
userPresetsFile: /local/spotifyplus/userpresets.json
userPresets:
  - name: Spotify Playlist Daily Mix 1
    subtitle: Various Artists
    image_url: >-
      https://dailymix-images.scdn.co/v2/img/ab6761610000e5ebcd3f796bd7ea49ed7615a550/1/en/default
    uri: spotify:playlist:37i9dQZF1E39vTG3GurFPW
    type: playlist

Panel Dashboard Configuration

This example will configure the card to be used on a panel dashboard. It will utilize 100% of the space on the dashboard.

Don't care how it looks? Jump to the YAML definition.

How it Looks

Player Section - Track content

Player Section - Podcast Show content

Album Favorites Section

Album Favorites Section - Actions

Search Media Section - Albums

Search Media Section - Album Actions

Panel Dashboard Configuration YAML

Add the following YAML to a panel dashboard of your choice. 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)

  • create a userpresets.json in the <configuration folder>/www/spotifyplus/ folder. This will contain user-defined presets. Please refer to the User Presets File topic JSON File Example for the JSON file content.

type: custom:spotifyplus-card
entity: media_player.spotifyplus_todd_l
width: fill
height: fill
sections:
  - player
  - albumfavorites
  - artistfavorites
  - playlistfavorites
  - recents
  - devices
  - trackfavorites
  - userpresets
  - searchmedia
  - audiobookfavorites
  - showfavorites
  - episodefavorites
playerHeaderTitle: "{player.source}"
playerHeaderArtistTrack: "{player.media_artist} - {player.media_title}"
playerHeaderAlbum: "{player.media_album_name}"
playerHeaderNoMediaPlayingText: "\"{player.name}\" state is \"{player.state}\""
albumFavBrowserTitle: >-
  Album Favorites for {player.sp_user_display_name} ({medialist.itemcount}
  items)
albumFavBrowserSubTitle: click a tile item to play the content; click-hold for actions
albumFavBrowserItemsPerRow: 10
albumFavBrowserItemsHideTitle: false
albumFavBrowserItemsHideSubTitle: false
albumFavBrowserItemsSortTitle: true
artistFavBrowserTitle: >-
  Artist Favorites for {player.sp_user_display_name} ({medialist.itemcount}
  items)
artistFavBrowserSubTitle: click a tile item to play the content; click-hold for actions
artistFavBrowserItemsPerRow: 10
artistFavBrowserItemsHideTitle: false
artistFavBrowserItemsHideSubTitle: true
artistFavBrowserItemsSortTitle: true
audiobookFavBrowserTitle: >-
  Audiobook Favorites for {player.sp_user_display_name} ({medialist.itemcount}
  items)
audiobookFavBrowserSubTitle: click a tile item to play the content; click-hold for actions
audiobookFavBrowserItemsHideTitle: false
audiobookFavBrowserItemsHideSubTitle: false
audiobookFavBrowserItemsSortTitle: true
audiobookFavBrowserItemsPerRow: 10
deviceBrowserTitle: Spotify Connect Devices ({medialist.itemcount} items)
deviceBrowserSubTitle: click an item to select the device; click-hold for device info
deviceBrowserItemsPerRow: 1
deviceBrowserItemsHideSubTitle: true
episodeFavBrowserTitle: >-
  Episode Favorites for {player.sp_user_display_name} ({medialist.itemcount}
  items)
episodeFavBrowserSubTitle: click a tile item to play the content; click-hold for actions
episodeFavBrowserItemsPerRow: 10
episodeFavBrowserItemsHideTitle: false
episodeFavBrowserItemsSortTitle: true
episodeFavBrowserItemsHideSubTitle: false
playlistFavBrowserTitle: >-
  Playlist Favorites for {player.sp_user_display_name} ({medialist.itemcount}
  items)
playlistFavBrowserSubTitle: click a tile item to play the content; click-hold for actions
playlistFavBrowserItemsPerRow: 10
playlistFavBrowserItemsHideTitle: false
playlistFavBrowserItemsHideSubTitle: false
playlistFavBrowserItemsSortTitle: true
recentBrowserTitle: Recently Played by {player.sp_user_display_name} ({medialist.itemcount} items)
recentBrowserSubTitle: click a tile item to play the content; click-hold for actions
recentBrowserItemsPerRow: 10
recentBrowserItemsHideTitle: false
recentBrowserItemsHideSubTitle: false
searchMediaBrowserTitle: Search Spotify for {player.sp_user_display_name} ({medialist.itemcount} items)
searchMediaBrowserSubTitle: click a tile item to play the content; click-hold for actions
searchMediaBrowserItemsPerRow: 10
searchMediaBrowserItemsHideTitle: false
searchMediaBrowserItemsHideSubTitle: false
searchMediaBrowserSearchLimit: 150
showFavBrowserTitle: Show Favorites for {player.sp_user_display_name} ({medialist.itemcount} items)
showFavBrowserSubTitle: click a tile item to play the content; click-hold for actions
showFavBrowserItemsPerRow: 10
showFavBrowserItemsHideSubTitle: false
showFavBrowserItemsHideTitle: false
showFavBrowserItemsSortTitle: true
trackFavBrowserTitle: >-
  Track Favorites for {player.sp_user_display_name} ({medialist.itemcount}
  items)
trackFavBrowserSubTitle: click a tile item to play the content; click-hold for actions
trackFavBrowserItemsPerRow: 10
trackFavBrowserItemsHideTitle: false
trackFavBrowserItemsHideSubTitle: false
trackFavBrowserItemsSortTitle: false
userPresetBrowserTitle: User Presets for {player.sp_user_display_name} ({medialist.itemcount} items)
userPresetBrowserSubTitle: click a tile item to play the content; click-hold for actions
userPresetBrowserItemsPerRow: 10
userPresetBrowserItemsHideTitle: false
userPresetBrowserItemsHideSubTitle: false
userPresetsFile: /local/spotifyplus/userpresets.json
userPresets:
  - name: Spotify Playlist Daily Mix 1
    subtitle: Various Artists
    image_url: >-
      https://dailymix-images.scdn.co/v2/img/ab6761610000e5ebcd3f796bd7ea49ed7615a550/1/en/default
    uri: spotify:playlist:37i9dQZF1E39vTG3GurFPW
    type: playlist
Clone this wiki locally