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:
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).
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.
I have somewhat changed the code throughout time because I started using decluttering-card. But the three dots should open more-info. So make sure that service call is still correct. Same applies to the main play/pause button.
I believe browser_mod has been changed a few times as well, which changes the more_info command. I donāt use it as a more-info anymore myself. I think you can just set it as:
tap_action:
action: more-info
And get rid of browser_mod command there.
Regarding conditions: itās very simple, the HA documentations explain the usage of that card very well: Conditional Card - Home Assistant
Example in your case:
type: conditional
conditions:
- entity: media_player.media_player.lesboutin
state_not: 'off'
- entity: media_player.media_player.lesboutin
state_not: unavailable
card:
type: picture-elements
image: 'local/tablet/overlay.svg'
REST OF THE CODE OF THIS MEDIA CARD
This will hide the card if itās either off or unavailable for some reason (like disconnected). When itās playing, idle, paused etc it will show. You can change the conditions to what you see fit yourself.