Hi , yes was that 
fullscreen: false
thank you
Hello, I am curious to know what is your LMS setup and especially your card/lovelace setup.
I have a 3 RPi setup with PicorePlayer and a LMS server on MAC.but my lovelace setup sucks, I need inspiration and guidance. I am kinda new to the Home assistant world. Would you be kind enough to show your current setup, I would really like to be able to learn from you, I sould say learn MORE from you because you’ve been helping me learn a whole lot already.
Please please please 
I second that. 
s’il te plait tu rendrait un petit quebecois bien heureux!
Mais, je ne parle pas Francais.
If this help, you can look at “Burningstone91” Setup he is on Git:
2 Likes
Hi, a user recreated my previous setup and has shared his code. So you can use that
I now use a LMS webview in fullscreen, which I can access through Lovelace with webcard. There is not much to share about that, since its just my LMS server (with material skin) which I added the volume popup sliders to.
But that is a separate thing, this thread is only about the media player card, which I use on my dashboard as media entities.
This was my previous music setup: Show off your picture-elements uses - #259 by ASNNetworks
Now using this: Show off your picture-elements uses - #290 by ASNNetworks Which is LMS material skin (inside Lovelace and addes volume sliders).
1 Like
Thats also what Ive been using with my rpi4 + khadas LeTone 2 DAC. I am really digging this little DAC… its the best sounding thing i’ve bought… you should check it out its cheap for the sound quality… anyways im off topic. thanks for this answer ill go check it out. Ill let you know what ive ended up doing… thanks for answering!
Hi. How can i do to make this card fit in a swiper card? because of the multiple button card entity, it will not work.
Thxs
EDIT: Ok, i managed to do it by setting all the button card inside a picture element
How you make this ? Can you config delen whit me ?
Thank you for sharing !
i would like to test but the link for your overlay svg is dead. Can you post a new link please ?
thanks
I updated the link. Btw: I don’t get notifications with new responses, only when mentioned directly.
Thanks you very much !
Hey @ASNNetworks
Love you media card.
I have implemented it in Mattias’s homekits beautiful concept but I get errors. I’m thinking it’s styling errors?
The music works though and the cover art is shown.
This is the code:
- type: grid
title: Media
view_layout:
grid-area: media
columns: 1
cards:
- type: custom:swipe-card
start_card: 1
parameters:
roundLengths: true
effect: coverflow
speed: 650
spaceBetween: 20
threshold: 7
coverflowEffect:
rotate: 80
depth: 300
cards:
- type: horizontal-stack
cards:
- type: picture-elements
image: 'local/tablet/overlay.svg'
style: |
ha-card {
--ha-card-background: none !important;
box-shadow: none !important;
}
elements:
- aspect_ratio: 1/1
entity: media_player.lesboutin
icon: 'mdi:speaker-wireless'
label: Living Room Sonos
name: Sonos
show_icon: false
show_label: false
show_last_changed: false
show_entity_picture: true
show_name: false
show_state: false
tap_action:
action: none
style:
height: 100%
width: 100%
top: 50%
left: 50%
state:
- styles:
entity_picture:
- filter: grayscale(100%) blur(4px)
- transition: all 0.5s ease
value: paused
styles:
card:
- padding: 0px
- background-color: var(--card-background-off) #the color when there is no artwork, change or remove to use own color
entity_picture:
- border-radius: 20px
- height: 100%
- width: 100%
- position: absolute
- transition: all 0.5s ease
type: 'custom:button-card'
- type: 'custom:mod-card'
style:
'--mini-media-player-icon-color': var(--text-color) #change or remove to use own color
'--mini-media-player-base-color': var(--text-color) #change or remove to use own color
'--mini-media-player-accent-color': var(--music-accent-color) #change or remove to use own color
border-top-left-radius: 0px !important
border-top-right-radius: 0px !important
width: 100%
transform: 'translate(0%, -100%'
card:
artwork: none
entity: media_player.lesboutin
group: false
hide:
controls: true
icon: false
name: false
power: true
runtime: false
source: true
volume: true
hold_action:
action: none
tap_action:
action: none
icon: 'mdi:speaker-wireless'
info: scroll
source: true
# change the styling variable below to the color and width of scrolling info you want. Change height or remove line for default.
style: |
.mmp-player {
background: rgba(0, 0, 0, 0.75) !important;
border-top-left-radius: 0px !important;
border-top-right-radius: 0px !important;
height: 95px;
}
.entity__info {
max-width: 60% !important;
}
type: 'custom:mini-media-player'
#This here below is if you want to have the option to tap_hold anywhere on the card for more-info popup. Remove this part if not needed.
- aspect_ratio: 1.2/1
entity: media_player.lesboutin
icon: 'mdi:speaker-wireless'
label: Living Room Sonos
name: Sonos
show_icon: false
show_label: false
show_last_changed: false
show_entity_picture: false
show_name: false
show_state: false
tap_action:
action: none
hold_action:
action: more-info
style:
height: 80%
width: 100%
top: 40%
left: 50%
styles:
card:
- filter: opacity(0%)
type: 'custom:button-card'
- aspect_ratio: 1/1
show_name: false
show_icon: true
icon: 'mdi:skip-next-circle'
type: 'custom:button-card'
size: 100%
entity: media_player.lesboutin
style:
right: '-5%'
top: 50%
height: 25%
width: 25%
state:
- styles:
icon:
- filter: opacity(100%)
- transition: all 0.5s ease
- color: '#FFFFFF' #color of button while paused
value: paused
styles:
card:
- padding: 0px
- border-radius: 50%
icon:
- filter: opacity(30%)
- transition: all 0.5s ease
- color: var(--music-accent-color) #color of button while playing
tap_action:
action: call-service
service: media_player.media_next_track
service_data:
entity_id: media_player.lesboutin
haptic: medium
hold_action:
action: none
- aspect_ratio: 1/1
show_name: false
show_icon: true
icon: 'mdi:skip-previous-circle'
type: 'custom:button-card'
size: 100%
entity: media_player.lesboutin
style:
right: 55%
top: 50%
height: 25%
width: 25%
state:
- styles:
icon:
- filter: opacity(100%)
- transition: all 0.5s ease
- color: '#FFFFFF' #color of button while paused
value: paused
styles:
card:
- padding: 0px
- border-radius: 50%
icon:
- filter: opacity(30%)
- transition: all 0.5s ease
- color: var(--music-accent-color) #color of button while playing
tap_action:
action: call-service
service: media_player.media_previous_track
service_data:
entity_id: media_player.lesboutin
haptic: medium
hold_action:
action: none
- aspect_ratio: 1/1
show_name: false
show_icon: true
icon: 'mdi:pause-circle'
type: 'custom:button-card'
size: 100%
entity: media_player.lesboutin
style:
right: 10%
top: 50%
height: 40%
width: 40%
state:
- styles:
icon:
- filter: opacity(100%)
- transition: all 0.5s ease
- color: '#FFFFFF' #color of button while paused
value: paused
icon: 'mdi:play-circle'
styles:
card:
- padding: 0px
- border-radius: 50%
icon:
- filter: opacity(30%)
- transition: all 0.5s ease
- color: var(--music-accent-color) #color of button while playing
tap_action:
action: call-service
service: media_player.media_play_pause
service_data:
entity_id: media_player.lesboutin
haptic: medium
hold_action:
action: none
- aspect_ratio: 1/1
show_name: false
show_icon: true
icon: 'mdi:heart-plus'
type: 'custom:button-card'
size: 90%
style:
right: 10%
top: 88%
height: 5%
width: 5%
styles:
card:
- padding: 0px
- border-radius: 50%
icon:
- color: var(--text-color)
tap_action:
action: call-service
service: script.add_to_playlist_sonos
haptic: medium
hold_action:
action: none
- aspect_ratio: 1/1
show_name: false
show_icon: true
icon: 'mdi:power-standby'
type: 'custom:button-card'
size: 90%
style:
right: 2%
top: 88%
height: 5%
width: 5%
styles:
card:
- padding: 0px
- border-radius: 50%
icon:
- color: var(--text-color)
tap_action:
action: call-service
service: media_player.turn_off
service_data:
entity_id: media_player.lesboutin
haptic: medium
hold_action:
action: none
- aspect_ratio: 1/1
show_name: false
show_icon: true
icon: 'mdi:dots-horizontal-circle'
type: 'custom:button-card'
size: 90%
style:
right: 18%
top: 88%
height: 5%
width: 5%
styles:
card:
- padding: 0px
- border-radius: 50%
icon:
- color: var(--text-color)
tap_action:
action: call-service
service: browser_mod.more_info
service_data:
entity_id: media_player.lesboutin
deviceID: this
haptic: medium
hold_action:
action: none
- type: grid
columns: 2
cards:
- type: custom:button-card
entity: media_player.livingroom_appletv
name: Living Room
template:
- media
- icon_apple_tv
- type: custom:button-card
name: Bedroom
entity: media_player.bedroom_appletv
template:
- media
- icon_apple_tv
- type: custom:button-card
entity: media_player.spotify_cheznath
name: Spotify
template:
- media
- icon_spotify
- type: custom:button-card
entity: media_player.livingroom_sonos
name: Sonos
template:
- media
- icon_sonos
Would you be able to help me out, trying to figure things out?
I’m also using this in my config:
media_player:
- platform: universal
name: media_player.lesboutin
children:
- media_player.bathroom_sonos
- media_player.livingroom_sonos
- media_player.onkyo_tx_nr686_f0935c_2
- media_player.spotify_cheznath
And I’m using your script too. But I’m guessing I’m missing something with iftt.
alias: add_to_playlist_sonos
sequence:
- service: ifttt.trigger
data_template:
event: add_to_playlist
value1: '{{ states.media_player.lesboutin.attributes.media_title }}'
value2: '{{ states.media_player.lesboutin.attributes.media_artist }}'
mode: single
Thanks. And I realize it’s been a while for you. 
No problem if you can’t bother.
Thanks again
EDIT: Yes, I do have card-mod, mini media player and button card. also using your overlay.svg in the correct folder.
Oh, when music is playing it look the same.
How can I not have the code in there? And bringing down the buttons?
I’m getting places… I got the damn overlay to now be seen. Now, what is that css text in the button? How can I take that out?
So I’m guessing this needs to be re written with card_mod 3 changes.
I’ll try and see if I can do that? But I doubt it.
EDIT: I got tit working.
I just switched - type: 'custom:mod-card' to
card_mod:
Hi, I’ve been busy on holidays. Have you gotten everything working now? Yes, I changed the codes when card_mod was updated. I don’t visit this thread much, so haven’t updated the code on here.
@ASNNetworks Yes, it’s all working great.
I had one though. When nothing is playing, it’s blank right? Do you have any else going on while it’s blank? I mean, did you update it to show something else or you just see it blank?
Glad you got it working. I just updated the code in my post. Btw regarding the favorite/heart button: I used that prior when I used Spotcast and created a script using IFTTT. I switched all my audio to Logitech Media Server for a while now and ditched IFTTT. Currently it’s a non-functional button in my own setup.
When nothing is playing the card is blank, since there is no artwork. In my case all my media players are hidden. All my speakers have their own media card, which are all inside their own conditional card. So when a speaker is off, the specific media card is hidden. I also wrapped them all inside one swiper card, so I can easily swipe between media cards/speakers.
See in action: Imgur: The magic of the Internet
Oh wow, that’s cool. Something new I have to do now… argh… haha. It just never ends it seems.
You wouldn’t happen to have your code on a github. 
I know Mattias also did something like this, with conditions. I didn’t dwell into conditions yet.
On your code, the only thing that doesn’t work are the actions. For some reason, the three dot actions and the main whole button press action don’t work at all.