What do you mean with âthis code ⌠AND this custom cardâ? This way you define it twice.
EDIT: Didnât had an eye on it, in each of the 5 items you define the same mediaplayer entity.
Finally, i restarted from scratch by copy/paste the card_media_player_with_controls code from the button_card_template.yaml file and it works now.
First, i copied/pasted the code from the wiki. Maybe an issue when pasting or some difference between the button_card_template.yaml in wiki and github.
Here is the result :
Aaaah, super-nice 
Still with my custom media card. Itâs for Google Home entities.
Here are my differents code :
Custom card media player
custom_card_media_player:
template:
- "icon_info_bg"
- "custom_ulm_language_variables"
icon: |
[[[
var icon = "mdi:google-home";
if(entity.attributes.app_name){
var app = entity.attributes.app_name.toLowerCase();
if(app == "spotify"){
var icon = "mdi:spotify";
} else if(app == "google podcasts"){
var icon = "mdi:google-podcast";
} else if(app == "plex"){
var icon = "mdi:plex";
} else if(app == "soundcloud"){
var icon = "mdi:soundcloud";
} else if(app == "youtube music"){
var icon = "mdi:youtube";
} else if (app == "oto music"){
var icon = "mdi:music-circle";
}
}
return icon;
]]]
label: |
[[[
if (entity.state == "off"){
return variables.ulm_media_player_off;
} else if (entity.state == "playing"){
return variables.ulm_media_player_on;
} else if (entity.state == "paused"){
return variables.ulm_media_player_pause;
} else {
return variables.ulm_media_player_ko;
}
]]]
state:
- operator: "template"
value: "[[[ return entity.state != 'off' ]]]"
name: "[[[ return states[entity.entity_id].attributes.media_title; ]]]"
label: |
[[[
var label = variables.ulm_media_player_on;
if(states[entity.entity_id].attributes.media_album_name){
var label = states[entity.entity_id].attributes.media_album_name;
}
Custom media player with controls :
custom_card_media_player_with_controls_2:
template: card_media_player_with_controls
variables:
ulm_card_media_player_with_controls_name: "No name set"
ulm_card_media_player_with_controls_entity:
triggers_update: "all"
styles:
grid:
- grid-template-areas: "'item1' 'item2' 'item3"
- grid-template-columns: "1fr"
- grid-template-rows: "min-content min-content"
- row-gap: "12px"
custom_fields:
item1:
card:
type: "custom:button-card"
template:
- "custom_ulm_language_variables"
- "custom_card_media_player"
tap_action:
action: "more-info"
entity: "[[[ return variables.ulm_card_media_player_with_controls_entity ]]]"
name: "[[[ return variables.ulm_card_media_player_with_controls_name ]]]"
styles:
card:
- box-shadow: "none"
- padding: "0px"
item2:
card:
type: "custom:button-card"
template: "custom_list_5_items"
custom_fields:
item1:
card:
type: "custom:button-card"
template: "widget_icon"
tap_action:
action: "call-service"
service: "media_player.toggle"
service_data:
entity_id: "[[[ return variables.ulm_card_media_player_with_controls_entity ]]]"
icon: "mdi:power"
item4:
card:
type: "custom:button-card"
template: "widget_icon"
tap_action:
action: "call-service"
service: "media_player.volume_down"
service_data:
entity_id: "[[[ return variables.ulm_card_media_player_with_controls_entity ]]]"
icon: "mdi:volume-minus"
item5:
card:
type: "custom:button-card"
template: "widget_icon"
tap_action:
action: "call-service"
service: "media_player.volume_up"
service_data:
entity_id: "[[[ return variables.ulm_card_media_player_with_controls_entity ]]]"
icon: "mdi:volume-plus"
item3:
card:
type: "custom:button-card"
template: "custom_list_5_items"
custom_fields:
item1:
card:
type: "custom:button-card"
template: "widget_icon"
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: "[[[ return variables.ulm_card_media_player_with_controls_entity ]]]"
media_content_id: 'http://streaming.radio.rtl2.fr/rtl2-1-44-128'
media_content_type: music
custom_fields:
i: |
<img width= 90% src='/local/icon_radio/RadioRTL2.png'>
item2:
card:
type: "custom:button-card"
template: "widget_icon"
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: "[[[ return variables.ulm_card_media_player_with_controls_entity ]]]"
media_content_id: 'https://ais-live.cloud-services.paris:8443/rfm.mp3'
media_content_type: music
custom_fields:
i: |
<img width= 90% src='/local/icon_radio/RadioRFM.png'>
item3:
card:
type: "custom:button-card"
template: "widget_icon"
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: "[[[ return variables.ulm_card_media_player_with_controls_entity ]]]"
media_content_id: 'https://ais-live.cloud-services.paris:8443/virgin.mp3'
media_content_type: music
custom_fields:
i: |
<img width= 90% src='/local/icon_radio/RadioVirgin.png'>
item4:
card:
type: "custom:button-card"
template: "widget_icon"
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: "[[[ return variables.ulm_card_media_player_with_controls_entity ]]]"
media_content_id: 'http://cdn.nrjaudio.fm/audio1/fr/30201/mp3_128.mp3?origine=fluxradios'
media_content_type: music
custom_fields:
i: |
<img width= 90% src='/local/icon_radio/RadioCherieFM.png'>
item5:
card:
type: "custom:button-card"
template: "widget_icon"
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: "[[[ return variables.ulm_card_media_player_with_controls_entity ]]]"
media_content_id: script.radio_guims_spotify
media_content_type: script
custom_fields:
i: |
<img width= 90% src='/local/icon_radio/Spotify2.png'>
the custom language variables :
custom_ulm_language_variables:
variables:
ulm_media_player_on: "Lecture"
ulm_media_player_off: "Eteint"
ulm_media_player_pause: "Pause"
ulm_media_player_ko: "Indisponible"
and the custom list 5 item :
custom_list_5_items:
styles:
grid:
- grid-template-areas: '"item1 item2 item3 item4 item5"'
- grid-template-columns: 1fr 1fr 1fr 1fr 1fr
- grid-template-rows: min-content
- column-gap: 5px
card:
- box-shadow: none
- padding: 0px
the result :
when Off looks OK
but when On (i use shortcuts in row 3 to stream web radio), some things are missing
I just want to have entity name and entity state displayed.
And with the script for Spotify, nothing appens. The script is ok, because works with a previous configuration using simple media card.
I donât see a variable for (entity.state == "on") .
And do you want the entity name or the media attributes?
I have the variable (entity.state == âplayingâ) in custom_card_media_player.yaml
Just the entity.name or i would like to display a name when using my shortcuts.
when using shortcuts 1 = > display â1â as name and status âplayingâ will be very cool 
But in the image you posted thereâs state = on. Or is this standby? I donât know Google dvices.
Ii donât know why it shows âOnâ because when Off, my custom language variable works :
ulm_media_player_off : âEteintâ as show in picture 1.
maybe something is wrong in this part :
label: |
[[[
if (entity.state == "off"){
return variables.ulm_media_player_off;
} else if (entity.state == "playing"){
return variables.ulm_media_player_on;
} else if (entity.state == "paused"){
return variables.ulm_media_player_pause;
} else {
return variables.ulm_media_player_ko;
}
]]]
Thanks. You were right, I was missing one of the cards, added it and voila.
HI, how did you make nice name for your thermostat? Iâve got the entity name on the card which doesnât look good.
My Echos have no state âonâ, either âplayingâ or âstandbyâ. This is a part of my template (based on Minimalist media player temolate):
#### MEDIAPLAYER AKTIV
#
#
state:
- operator: template
value: |
[[[
return entity.state != 'standby' && entity.state != 'off'
]]]
name: |
[[[
if (entity.attributes.media_title == 'App' && entity.entity_id == 'media_player.sony_bravia_tv')
return entity.attributes.media_title;
if (entity.attributes.media_title && entity.entity_id == 'media_player.sony_bravia_tv')
return entity.attributes.media_title.split(':')[1];
return entity.attributes.media_title + '<br>(' + entity.attributes.media_artist + ')';
]]]
label: |
[[[
var sony = states['media_player.sony_bravia_tv'].attributes.media_title;
if (entity.entity_id == 'media_player.sony_bravia_tv')
return entity.attributes.source;
if (sony == 'App') return 'Streaming';
return entity.attributes.media_album_name;
]]]
state_display: |
[[[
if (entity.state == 'playing') return 'spielt gerade';
if (entity.state == 'paused') return 'pausiert';
else return ' ';
]]]
Hello all,
I installed the themes and on desktop i can select the âminimalist-desktopâ theme. However on my mobile device I canât see any of the installed themes.
Any idea why that is?
On desktop:
Could you please share this code? This is awesome!
A little question : how to set a variable in the code of my shortcuts in order to change the background of the card depending the shortcut used ?
item3:
card:
type: "custom:button-card"
template: "custom_list_5_items"
custom_fields:
item1:
card:
type: "custom:button-card"
template: "widget_icon"
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: "[[[ return variables.ulm_card_media_player_with_controls_entity ]]]"
media_content_id: 'http://streaming.radio.rtl2.fr/rtl2-1-44-128'
media_content_type: music
custom_fields:
i: |
<img width= 90% src='/local/icon_radio/RadioRTL2.png'>
Ok, my fault, lazy people will be punished. I was too lazy to copy your entire custom code. Now I did it and the âonâ error is based on a missing variable:
label: |
[[[
var label = variables.ulm_media_player_on;
if(states[entity.entity_id].attributes.media_album_name){
var label = states[entity.entity_id].attributes.media_album_name;
}
return label <â #### add this
]]]
The spotify issue: No offense, but I canât imagine that this service call would work. How did you implemented it in the default media card?
The missing variable is already in the code :
in the custom_card_media_player,
state:
- operator: "template"
value: "[[[ return entity.state != 'off' ]]]"
name: "[[[ return states[entity.entity_id].attributes.media_title; ]]]"
label: |
[[[
var label = variables.ulm_media_player_on;
if(states[entity.entity_id].attributes.media_album_name){
var label = states[entity.entity_id].attributes.media_album_name;
}
return label;
]]]
For spotify, here is the code used in the media card :
type: custom:mini-media-player
entity: media_player.reveil_guims
icon: mdi:google-home
volume_step: '5'
volume_stateless: true
hide:
volume_level: false
name: Reveil Guims
artwork: cover
shortcuts:
buttons:
- id: http://streaming.radio.rtl2.fr/rtl2-1-44-128
image: /local/icon_radio/RTL2_Radio.png
type: mp3
- id: https://ais-live.cloud-services.paris:8443/rfm.mp3
image: /local/icon_radio/RFM_Radio.png
type: mp3
- id: https://ais-live.cloud-services.paris:8443/virgin.mp3
image: /local/icon_radio/VIRGIN_Radio.png
type: mp3
- id: http://cdn.nrjaudio.fm/audio1/fr/30201/mp3_128.mp3?origine=fluxradios
image: /local/icon_radio/CHERIEFM_Radio.png
type: mp3
- id: script.radio_guims_spotify
image: /local/icon_radio/SPOTIFY_Radio.png
type: script
columns: 5
Hi,
I am looking for a similar implementation since my backbone system is KNX, and ACs do the thermostating function and all I need to do is reflect their states and control them. Could you kindly post the code to create this?
Thanks in advance
Hi @Juve_A have had any progress on this card? Really hoping it can be included in the custom_cards soon because this is the only thing missing to really use my Tado system 
Or could you maybe share your code so I could have a swing at it myself?
Hi,
You can find the Code template here in the new Wiki. At the bottom of the page is the code. Ask if you need help. Enjoy
1 Like