This site is my go to for mdi icons: Material Design Icons - Icon Library - Pictogrammers
They recently switched their URL from materialdesignicons.com
thank you, do you use Illustrator or other tool to resize the svg icons from (0 0 24 24) to (0 0 50 50)? I think that it’s difficult for me this “svg job” 
I do use Illustrator because I work with it every day, but there are other options like Inkscape or Affinity Designer. Or, check out this post by @masoncrawford1994 which details the whole process and uses a website to resize the icons.
2 Likes
Thanks for the work on this. Can someone tell me where to put the downloaded github files? The installation instructions simply say " Manually copy over these files from [matt8707/hass-config]" I don’t exactly know where to put them. I see a reference to /hacsfiles/ in the configuration.yaml entry…I don’t have such a folder. Any help is appreciated.
Same folder as your configuration.yaml here chemgeek. I was a bit unsure too then it was a case of find and add.
Hello, I try to use a iPad to show home assistant in my house . And I use your front end ( your amazing theme ).
But I see no icon on the dashboard .
It’s work great on iPhone but on iPad no way to show the icon . Do you know why ?
Thanks
Whoa wait - I don’t have this entity at all. Followed all your steps but i guess i missed something prior to that? How do i get this entity?
The entity id is select.conditional_media. It’s a template select that’s created in packages/tv_media.yaml. I’m guessing you probably do have it if the conditional media cards are working with your install.
Beacuse of this dashboard I publish all devices from Homey to HA. Bought two tablets and a NUC for HA. 
Awesome work @Mattias_Persson
The buttons for “stäng allt” and “Hemma”
How do I get them to return to an off state after pressing them?
Have them trigger virtual device linked to a flow or is it better to run scripts within HA instead?
I’m just getting set up now and the conditional media cards don’t work, I would have never figured out why if it wasn’t for your post! That said, i’m not sure how to get that entity, it doesn’t appear for me.
I realized i had missed the entire /oackages folder when installing the UI to begin with. I have it in there now (including the tv_media.yaml) however I can’t find the entity in ha… I’m very new to all this.
Attached my tv_media.yaml if you’re able to help
homeassistant:
customize:
media_player.sony_xbr_65x900h:
friendly_name: Living Room TV
device_class: tv
media_player.samsung:
friendly_name: Bedroom TV
device_class: tv
media_player.spotify_biggulpshuh:
friendly_name: Spotify
switch.ps5_957_power:
friendly_name: PS5
sensor.ps5_957_activity:
friendly_name: Playstation
template:
- select:
- name: conditional_media
state: >
{% set recently_added = 'Recently Added' %}
{% set paused_timeout_minutes = 15 %}
{% set media_players = [
states.media_player.mass_living_room,
states.media_player.sony_xbr_65x900h,
states.media_player.spotify_biggulpshuh ] %}
{% macro media(state) %}
{% set state = media_players | selectattr('state','eq',state) | list %}
{% set last_changed = recently_added if state | length == 0 else state | map(attribute='last_changed') | list | max %}
{{ state | selectattr('last_changed','eq', last_changed) | map(attribute='name') | list | join }}
{% endmacro %}
{% set playing = media_players | selectattr('state','eq','playing') | list %}
{% set timeout_playing = False if playing | length == 0 else
(as_timestamp(now()) - as_timestamp(playing | map(attribute='last_changed') | list | max)) < paused_timeout_minutes * 60 %}
{% set paused = media_players | selectattr('state','eq','paused') | list %}
{% set timeout_paused = False if paused | length == 0 else
(as_timestamp(now()) - as_timestamp(paused | map(attribute='last_changed') | list | max)) < paused_timeout_minutes * 60 %}
{% if playing %}
{{ media('playing') if timeout_playing else media('paused') if timeout_paused else media('playing') }}
{% elif paused %}
{{ media('paused') if timeout_paused else recently_added }}
{% else %}
{{ recently_added }}
{% endif %}
options: >
{% set recently_added = 'Recently Added' %}
{% set media_players = [
states.media_player.mass_living_room,
states.media_player.sony_xbr_65x900h,
states.media_player.spotify_biggulpshuh ] %}
{{ recently_added + media_players | map(attribute='name') | list }}
select_option:
service: select.select_option
target:
entity_id: select.conditional_media
data:
option: >
{{ option }
Based on that, you should have the template select if you also have
homeassistant:
...
packages: !include_dir_named packages
...
in your configuration.yaml
If you do have that, check ‘Developer Tools > States’ and filter for select.conditional_media to see if it shows up there.
If you don’t, I’d carefully inspect the default configuration.yaml and compare it to your own, adapting as needed. It’s always a good idea to make of backup of your own configuration.yaml before editing, and also use ‘Developer Tools > YAML’ “check configuration” button after edits but before restarting. Next here’s my tv_media.yaml for comparison.
template:
- select:
- name: conditional_media
state: >
{% set recently_added = 'Recently Added' %}
{% set paused_timeout_minutes = 15 %}
{% set media_players = [
states.media_player.shield_tv_plex,
states.media_player.master_bedroom_tv_plex,
states.media_player.garage_tv_plex,
states.media_player.upstairs_tv_plex,
states.media_player.desktop_plex,
states.media_player.guest_room_tv_plex,
states.media_player.spotify_d34dc3n73r,
states.sensor.ps5_activity ] %}
{% macro media(state) %}
{% set state = media_players | selectattr('state','eq',state) | list %}
{% set last_changed = recently_added if state | length == 0 else state | map(attribute='last_changed') | list | max %}
{{ state | selectattr('last_changed','eq', last_changed) | map(attribute='name') | list | join }}
{% endmacro %}
{% set playing = media_players | selectattr('state','eq','playing') | list %}
{% set timeout_playing = False if playing | length == 0 else
(as_timestamp(now()) - as_timestamp(playing | map(attribute='last_changed') | list | max)) < paused_timeout_minutes * 60 %}
{% set paused = media_players | selectattr('state','eq','paused') | list %}
{% set timeout_paused = False if paused | length == 0 else
(as_timestamp(now()) - as_timestamp(paused | map(attribute='last_changed') | list | max)) < paused_timeout_minutes * 60 %}
{% if playing %}
{{ media('playing') if timeout_playing else media('paused') if timeout_paused else media('playing') }}
{% elif paused %}
{{ media('paused') if timeout_paused else recently_added }}
{% else %}
{{ recently_added }}
{% endif %}
options: >
{% set recently_added = ['Recently Added'] %}
{% set media_players = [
states.media_player.shield_tv_plex,
states.media_player.master_bedroom_tv_plex,
states.media_player.garage_tv_plex,
states.media_player.upstairs_tv_plex,
states.media_player.desktop_plex,
states.media_player.guest_room_tv_plex,
states.media_player.spotify_d34dc3n73r,
states.sensor.ps5_activity ] %}
{{ recently_added + media_players | map(attribute='name') | list }}
select_option:
service: select.select_option
target:
entity_id: select.conditional_media
data:
option: >
{{ option }}
The only thing I’ve really edited is the media_players array (in two places), and you don’t really need the
homeassistant:
customize:
section if you edit the media player entities’ friendly names directly. Those friendly names will be the conditions you set in ui-lovelace.yaml media section.
Hi
I have problem with showing entity_picture for conditional_media. I have copied @Laffer active_media_players sensor and modified conditional_media template like this:
- background-image: &media_background_image >
[[[
if (entity) {
if (variables.is_youtube) {
return `url(${states[this._config?.triggers_update].state})`;
} else {
let data = entity.attributes.data;
return data && (data[variables.i].fanart || data[variables.i].poster)
? `url("${data[variables.i].fanart}"), url("${data[variables.i].poster}")`
: `url("${states['sensor.active_media_players'].attributes.entity_picture}")`;
}
}
]]]
Now card show app images but not pictures that are embedded in media_player like spotify album covers etc.
What should I change to make it work?
Hi! It’s really amazing work @Mattias_Persson, my dashboard is hugely inspired by your configuration.
I’ve also added your loader into my dashboard and it works perfectly! But even tough I’ve tried to understand it, i don’t get why this even works! Could you explain me the basics of this loader?
Here my current dashboard:
PS: for anyone interested, my second inspiration is from: https://www.reddit.com/r/homeassistant/comments/tbjel8/my_dashboard_still_a_work_in_progress_most_prob/
You could try this:
conditional_media:
aspect_ratio: 1000/996
template:
- base
- base_media
- icon_play_pause
variables:
entity_picture: '[[[ return entity.entity_id; ]]]'
And
- background-image: &media_background_image >
[[[
if (entity) {
if (entity.state === "Active") {
return entity.attributes.data !== undefined
? `url("${entity.attributes.fanart}"), url("${entity.attributes.poster}")`
: `url("${states[variables.entity_picture].attributes.entity_picture}")`;
}
else {
return entity.attributes.data !== undefined
? `url("${entity.attributes.data[variables.i].fanart}"), url("${entity.attributes.data[variables.i].poster}")`
: `url("${states[variables.entity_picture].attributes.entity_picture}")`;
}
}
]]]
And then just don’t define any entity_picture variable in your card.
But you can also override the entity_picture, like this:
# ATV 1
- type: conditional
conditions:
- entity: select.conditional_media
state: Apple TV 1
card:
type: custom:button-card
entity: media_player.apple_tv_1
template:
- conditional_media
- icon_apple_tv
variables:
entity_picture: sensor.active_media_players
triggers_update:
- sensor.active_media_players
PS: Keep in mind that I’m not using the YouTube logic for anything, so copying all of this will obviously remove that for you. But I’m sure you can take parts of this and make it your own.
1 Like
Hey there! I know that this layout is designed to be just a one pager. But is it even possible to create some sort of carousel like for example like this screenshot https://i.imgur.com/dSJ7UCT.png. The toggles are on the sidebar and clicking for example on the ccrtv icon the whole middle section switches to the surveillance cameras.
I already tried to tweak the ui-lovelace with paper-row cards but I can’t get the middle section to switch the layout.
You’re missing a comma between
states.media_player.spotify_biggulpshuh
states.sensor.ps5_957_activity
Only the last line shouldn’t have a comma.
Ha you managed to reply before I could delete my message. thank you for your help. It’s finally working now, I owe you!
What a great dashboard! Thanks for sharing it with everyone!
I have a few questions about my current setup though (see screenshot below):
-
For some reason the date outputs “null”. Haven’t changed anything in the sidebar.yaml except the changed the language of the days of the week. Any clue what is causing this?fixed by adding the time_date sensor to my configuration.yaml. - My sidebar stops halfway through my dashboard, why does this happen?
- My light cards are squared, but I would want to change them to round edges. Where can I do so?
1 Like
Experts, I am a novice, how to cancel the white line in the red frame, thank you.
1 Like