Greetings all! As you may have guessed from the title, today's post will going into detail around my 'Media' dashboard and how I've created and setup the different elements on this page.

I recently posted this amongst the other dashboards I've made on Reddit (post here) and had a ton of responses and questions so I thought I'd knock something up and go into detail around each part.

As you can see from the screenshot above I've created 4 columns, each relating and displaying certain elements to my media integrations in Home Assistant. Some of these parts can be used in other places so let's delve in!

Header/Title Cards (with images)

One of the questions I get asked the most is how I've managed to create the header/title cards which I use on all of my Home Assistant dashboards above each element. It's rather simple however it did take some time to perfect. I've created these using a 'markdown' card and here is how:

content: >
  # <img width="30" height="30" src='/local/googlehome.png'
  style='vertical-align:middle' /> Speakers 
style:
  .: |
    ha-card {
      background-color: transparent !important;
      box-shadow: none !important;
    }
  ha-markdown:
    $: |
      h1 {
        font-size: 25px;
       # font-weight: bold;
        text-align: center;
        letter-spacing: '-0.01em';
      }
type: markdown

Some things to note with this setup:

  • Displaying images next to the title is done using the <img... /> value. Here you can change the size (width="30" height="30") and the source of image (src='/local/googlehome.png') alongside the alignment (style='vertical-align:middle'). At the end of the line is the title you want to display, Speakers in this case. If you didn't want to include an image in the title, simple remove <img... /> and only put # Speakers.
  • In order to make the header/title transparent, the background-color: transparent !important; and box-shadow: none !important; is added under the ha-card style field.
  • Finally to alter the text size and appearance, change the values under the h1 field, font-size: 25px; for example.

Players (Google Home's, Chromecast's and PlayStation 4)

Audio Players

Until I invest in a proper sound system setup, such as Sonos, I am using Google Home Mini's for speakers and Chromecast's to cast/watch videos around the house. To display and control these players, I am using the 'custom:mini-media-player' card which you can find here or via HACS. This card houses a ton of different options and features so I won't go into too much detail however here is an example of what I've setup in HA ...

artwork: cover
entity: media_player.googlehome4654
hide:
  power_state: false
  source: true
  volume: false
icon: 'mdi:google-home'
tts:
  platform: google_translate
type: 'custom:mini-media-player'

For the Google Home Mini's I've included the tts option to allow me to send custom voice commands to each speaker, just in case I want to either annoy the Mrs or ask for a cup of tea to be brought upstairs.

Video Players

I've not done anything special for the Chromecast cards, here is the config which is similar to above.

artwork: cover
entity: media_player.snug_tv
hide:
  power: false
  power_state: true
  source: true
  volume: true
icon: 'mdi:cast-connected'
name: Snug Chromecast
type: 'custom:mini-media-player'

Playstation 4

The last player in this column/card is one I've setup for my PlayStation 4. Using the same 'custom:mini-media-player' card, I've simply pointed it to the 'media_player.playstation_4' entity which I've setup via an integration (Configuration > Integrations). There is another addon/integration for the PlayStation 4 called 'ps4-waker' (more details here) however I've not got around to setting this up so keep an eye out in the future for a write up around that!

Casting Media (Radio, Spotify and Camera Streams)

Radio Streaming

The next column on the media dashboard is all about casting shit. The first element I've setup is for casting radio channels to the Google Home Mini's. This part took some time to create and requires the creation of a group, input selects and script element to do the magic. Here is how its done!

Firstly we need to setup two input select lists, one for the radio stations and another for the media players to cast to:

input_select:

  radio_station:
    name: 'Select Radio Station:'
    options:
      - BBC Radio 1
      - BBC Radio 1xtra
      - BBC Radio Nottingham
      - KISSTORY
      - Kemet FM
      - Capital Xtra
      
  googlehome_radio:
    name: 'Select Speakers:'
    options:
      - Livingroom
      - Master Bedroom
      - Kitchen
    initial: Kitchen
    icon: mdi:speaker-wireless 

The second part is to create a script in order to do the magic for what to play when each radio station and media player is chosen. There are three things you need to edit in this script:

  • In the top part you will need to change the entity_id to the media players you have setup in HA. You can also alter the volume_level if you want them to start either louder or quieter on initial playback.
  • Next the entries under entity_id (underneath service: media_player.play_media and data_template) need to be altered to include the input_select list and media_player entities which will be used, for example:
    {% if is_state("input_select.googlehome_radio", "Kitchen") %} media_player.googlehome4654
  • Finally, this is where we add in the input_select list for the radio stations of your choosing and also the URL's for these streams. To find these you can use the power of Google and simply search 'radio mp3 stream urls'. If you're based in the UK, here is where I found mine.
script:
  radio:
    alias: Play Radio on Google Home Audio
    sequence:
      - service: media_player.volume_set
        data:
          entity_id: media_player.googlehome4654
          volume_level: '0.35'
      -  service: media_player.volume_set
         data:
           entity_id: media_player.living_room_speaker
           volume_level: '0.20'
      -  service: media_player.volume_set
         data:
           entity_id: media_player.master_bedroom_speaker
           volume_level: '0.30'
      -  service: media_player.play_media
         data_template:
           entity_id: >
            {% if is_state("input_select.googlehome_radio", "Kitchen") %} media_player.googlehome4654
            {% elif is_state("input_select.googlehome_radio", "Living Room") %} media_player.living_room_speaker 
            {% elif is_state("input_select.googlehome_radio", "Bedroom") %} media_player.master_bedroom_speaker
            {% endif %}
           media_content_id: >
            {% if is_state("input_select.radio_station", "BBC Radio 1") %} http://open.live.bbc.co.uk/mediaselector/5/select/version/2.0/mediaset/http-icy-mp3-a/vpid/bbc_radio_one/format/pls.pls
            {% elif is_state("input_select.radio_station", "BBC Radio 1xtra") %} http://open.live.bbc.co.uk/mediaselector/5/select/version/2.0/mediaset/http-icy-mp3-a/vpid/bbc_1xtra/format/pls.pls
            {% elif is_state("input_select.radio_station", "BBC Radio Nottingham") %} http://open.live.bbc.co.uk/mediaselector/5/select/version/2.0/mediaset/http-icy-mp3-a/vpid/bbc_radio_nottingham/format/pls.pls
            {% elif is_state("input_select.radio_station", "KISSTORY") %} http://www.radiofeeds.co.uk/bauer.pls?station=kisstory.mp3.m3u
            {% elif is_state("input_select.radio_station", "Kemet FM") %} http://109.169.26.139:8120/listen.pls?sid=1
            {% elif is_state("input_select.radio_station", "Capital Xtra") %} http://icecast.thisisdax.com/CapitalXTRANationalMP3.m3u
            {% endif %}
           media_content_type: 'audio/mp4' 

The last thing to setup is a group to link the two input_selects and the script together. Simply create a group like so:

group:
  uk_radio:
   name: UK Radio
   entities:
      - input_select.radio_station
      - input_select.googlehome_radio
      - script.radio 

Once those bits are done, head back to your dashboard and create an entity card including the two input_selects and the script:

entities:
  - entity: input_select.radio_station
    icon: 'mdi:radio'
  - entity: input_select.googlehome_radio
  - action_name: Play
    entity: script.radio
    icon: 'mdi:play'
    name: Start Listening
title: false
type: entities

The end result should look something like this ...

Spotify

Next it's onto the Spotify card! A few elements are needed to get this working, first is to setup and enable the integration within HA. Head to Configuration then Integrations and search for 'Spotify'. Follow the instructions here on what you need to setup in your Spotify Developer account. Some people have struggled when it comes to adding in the Redirect URLs within the Spotify Dev portal however I got this working by adding these two URLS (one with and without the HA port, just to cover all bases):

  • http://xxx.xxx.xxx.xxx:8123/auth/external/callback
  • http://xxx.xxx.xxx.xxx/auth/external/callback

Now we've got the official integration setup, there are two custom elements that need to be added to HA in order to get the Spotify card working. The first one is 'spotcast'. You can either install this via HACS (search for 'Start Spotify on chromecast' under Integrations) or manually add it in by following the instructions here. Once the custom component has been installed, follow the configuration instructions in regards to capturing the sp_dc and sp_key cookie values and adding them to your config. Lastly you need to add the main Spotify Playlist card again via HACS or manually, follow the instructions here. Now the three parts to the Spotify integration have been added and configured, we can add the card to the dashboard like so ...

account: default
device: media_player.googlehome4654
display_style: grid
grid_center_covers: true
grid_covers_per_row: 5
hide_warning: true
limit: 15
playlist_type: default
spotify_entity: media_player.spotify_user
type: 'custom:spotify-card'

If you're using the Lovelace UI to add this, you can change the settings and appearance under the 'Visual Editor'. The end result should look something like this:

Camera Casting

This element allows you to cast any camera streams you have setup in HA to Chromecast devices. In my case I have three Ubiquiti UVC cameras integrated into HA using the 'Unifi Protect Integration for Home Assistant' component via HACS. This element uses the same sort of setup as the radio streaming as mentioned above with a slight few changes to certain bits. Like before you'll need two input_selects, a script and group in order to perform this magic.

input_select:
  chromecast_tv:
    name: 'Select Chromecast:'
    options:
      - Livingroom
      - Master Bedroom
      - Snug
    initial: Master Bedroom
    icon: mdi:cast-connected 
    
  camera_select:
    name: 'Select Camera:'
    options:
      - Front
      - Kitchen
      - Back
    initial: Front
    icon: mdi:cctv 
script:
  cameracast:
    alias: Stream Cameras to Chromecast
    sequence:
      -  service: camera.play_stream
         data_template:
           entity_id: >
            {% if is_state("input_select.camera_select", "Front") %} camera.swk_cr_uniuvc1
            {% elif is_state("input_select.camera_select", "Kitchen") %} camera.swk_cr_uniuvc3
            {% elif is_state("input_select.camera_select", "Back") %} camera.swk_cr_uniuvc2
            {% endif %}
           media_player: >
            {% if is_state("input_select.chromecast_tv", "Snug") %} media_player.snug_tv
            {% elif is_state("input_select.chromecast_tv", "Living Room") %} media_player.snug_tv
            {% elif is_state("input_select.chromecast_tv", "Master Bedroom") %} media_player.master_bedroom_tv
            {% endif %}
           format: 'hls' 
group:
  camera_cast:
   name: Camera Cast
   entities:
      - input_select.camera_select
      - input_select.chromecast_tv
      - script.cameracast  

Once those bits have been added, we can now go back to the dashboard and add the card like so ...

entities:
  - entity: input_select.chromecast_tv
    icon: 'mdi:cast-connected'
  - entity: input_select.camera_select
    icon: 'mdi:cctv'
  - action_name: Stream
    entity: script.cameracast
    icon: 'mdi:play'
    name: Start Casting
title: false
type: entities

Recently Added and Upcoming Media for Plex

The third column on the media dashboard shows any recently added and upcoming media using integrations for Plex, Sonarr and Radarr. The main component we need to start with is the 'custom:upcoming-media-card' which can be installed via HACS or manually (details here). Once installed the other parts we'll need are the following (all of can be found in HACS under Integrations)

These component setups require a sensor entry to include the host, port and token/API for each solution, along the lines of ...

sensor:
  - platform: sonarr_upcoming_media
    api_key: YOUR_API_KEY
    host: 127.0.0.1
    port: 8989
    days: 7
    ssl: false
    max: 10

Once these have been added, we can go back to setting up the 'custom:upcoming-media-card' to display all the media goodness. In my setup I have created two entries for TV and Movies under Recently Added and a single entry for Upcoming Media however these can be changed easily to show as many or little results as you want. There are a lot of options for the Upcoming Media card when it comes to styling and displaying certain details so its worth reading through the GitHub page and experimenting. Here is what I've used on my dashboard:

accent_color: '#2b374e'
border_color: '#13274b'
date: ddmm
entity: sensor.recently_added_tvshows
flag: false
flag_color: '#13274b'
image_style: fanart
line1_text: $empty
line2_size: small
line2_text: $episode
line3_text: $number
line4_text: 'Runtime: $runtime'
max: 2
title: false
title_size: large
title_text: $title
type: 'custom:upcoming-media-card'

For Recently Added TV shows, I've added certain values (which are only applicable to TV shows) for certain lines to show shit like episode name (line2_text: $episode) and season number (line3_text: $number). To space out some of the details I've also added a empty line/gap using the line1_text: $empty value. For Recently Added Movies, a similar setup however I've included a IMDB rating (line2_text: $rating) and genre (line3_text: $genres). Each of these have the max: 2 value to display only 2 entries.

The Upcoming Media card is near enough the same in regards to values with the only difference being the entity as sensor.radarr_upcoming_media/sensor.sonarr_upcoming_media and the max value set to 1.

Plex Media Server Overview

The last and final column on the media dashboard displays the nitty gritty system details around Plex and the components that feed it. There are two main things going on here, the general system information for the OS that Plex runs on (CPU, RAM and Disk) and also an 'service' checker to determine if a component such as Sonarr, Transmission etc is currently up and operational.

Service/Application Checker

Lucky for me (in regards to writing it up), I've already created a blog post around how to setup this element which you can find here but to give you a gist, it uses a command line sensor to ping the port each application sits on and determine whether it's up (online) or down (offline).

System Statistics

When it comes to displaying system information for an OS/machine within my network, I've done this using Glances on the host machine as well as an integration within HA. On the host I've installed Glances and edited the service configuration (/etc/systemd/system/glances.service) to ensure it starts in 'web-server' mode like so ...

[Unit]
Description=Glances
After=network.target

[Service]
ExecStart=/usr/local/bin/glances -w
Restart=on-abort
RemainAfterExit=yes

[Install]
WantedBy=multi-user.target

From here I then setup the integration within HA by creating an entry in my configuration file ...

glances:
  - host: !secret glances_HASS_host
    port: !secret glances_HASS_port
    name: HASS
  - host: !secret glances_PMS_host
    port: !secret glances_PMS_port
    name: PMS

Now I have sensors within HA to display the certain values such as CPU, RAM and Disk usage as well as others. The card I've used in this instance is the 'custom:mini-graph-card' and here is the end result:

SABnzbd/Transmission

These two elements simply show the current downloads and status on the Plex server. I won't go into too much details as these are pretty simple to setup and integrate. Simply follow the integration instructions each of them here (SABnzbd) and here (Transmission).

Ombi Requests

The very last thing on the list is Ombi which shows the amount of approved and pending request for either TV or movies. Again nothing really specials in regards to this setup/integration, just follow the guide here in order to get this up and running.

So, we've finally come to the end of this rather long but hopefully informative blog post on the in's and out's of my media dashboard setup. If I can be arsed I will endeavor to document the other dashboards I've managed to create but for now you can find more details and configuration bits on my GitHub page here or follow me on Reddit here.

If you've enjoy this post and want to support me ...🍺Buy me a Beer