Ahh, good shout for the Sonos playlist card! I was looking for something to use actual Sonos playlists, but this is a fair compromise. Will investigate further and report back.
With regards to the light groups - how you explained it is how I’ve set it up. Weird that it isn’t working. But good to know that it does so I will tinker a bit more to see if it’s an issue on my end (which it most likely is!)
nope. grouped lights seem to be messing things up. this is what that section looks like when i have a light group (with a single bulb next to it for comparison)
does the group lights contain any dimmable bulbs? beacuse if not i think you can not use the slider you need to use the switch and set the parameters for the switch.
Looks good! Nice with a litttle more personal touch!. And for the sliders, it is a big no no to use them inside a swipe card for the same reason as you already find out 
I think with the slider entity card you have the option to change it to buttons instead. Another option is to use vertical sliders inside the swipe card.
Here’s an example of how to style the sonos playlist card to nicely blend in with the rest of the dashboard:
type: 'custom:sonos-playlist-card'
player: media_player.sonos_livingroom
playlist_type: 'user'
limit: 30
gridWidth: 30
style: |
ha-card {
width: 335px;
height: 265px;
overflow: scroll;
}
ha-card::-webkit-scrollbar {
display: none;
}
div.griditem > img {
border-radius: 10px;
}
Amazing. Thank you for sharing this! How do you manage which speaker shows up at the top of the panel (near the date?) Is this always set to one particular media player? Or is it possible to choose this on the fly or change dynamically?
It’s the same one from Daniel’s dashboard, the mini media player. I just use a fixed one, but you could use multiple conditional elements to achieve multiple mini mediaplayers:
- type: conditional
conditions:
- entity: media_player.sonos_livingroom
state_not: idle
elements:
- type: 'custom:mini-media-player'
entity: media_player.sonos_livingroom
card_mod:
style: |
ha-card {
--ha-card-background: transparent;
width: 340px;
height: 100px; }
hide:
power: true
name: true
source: true
volume: false
controls: false
progress: true
icon: true
artwork: none
info: scroll
style:
top: 115px
left: 415px
If you want flexability on how to prioritize your speakers when multiple speakers are playing, you could add a template sensor and use that in your conditions.
For example, this is what I did for the bottom-right Media block to nicely switch between my Apple TV, Sonos and playlist grid:
platform: template
sensors:
dash_media_item:
value_template: >-
{% if states('media_player.apple_tv') == 'playing' %} apple_tv
{% elif states('media_player.sonos_livingroom') == 'playing' and state_attr('media_player.sonos_livingroom', 'source') != 'TV' %} sonos
{% else %} idle
{% endif %}
Then configure the state-switch card as follows to benefit from advanced conditions:
- type: 'custom:state-switch'
entity: sensor.dash_media_item
style:
top: 200px
left: 558px
transition: flip
transition_time: 200
default: idle
states:
sonos:
type: 'custom:mini-media-player'
entity: media_player.sonos_livingroom
tap_action:
action: none
card_mod:
style: |
ha-card {
--ha-card-border-radius: 10px;
width: 335px;
height: 265px;
}
hide:
power: true
name: true
source: true
volume: true
controls: true
info: true
icon: true
artwork: cover-fit
apple_tv:
type: 'custom:mini-media-player'
entity: media_player.apple_tv
tap_action:
action: none
card_mod:
style: |
ha-card {
--ha-card-border-radius: 10px;
width: 335px;
height: 265px;
}
hide:
power: true
name: true
source: true
volume: true
controls: true
info: true
icon: true
artwork: cover-fit
idle:
type: 'custom:sonos-playlist-card'
player: media_player.sonos_livingroom
playlist_type: 'user'
limit: 50
gridWidth: 30
style: |
ha-card {
width: 335px;
height: 265px;
overflow: scroll;
}
ha-card::-webkit-scrollbar {
display: none;
}
div.griditem {
margin-bottom: 0.75em;
}
div.griditem > img {
border-radius: 10px;
}
Daniel this looks sick! I really want to try it out and use it on a wall mounted screen. However I havent bought one yet, but I was wondering what to get. So you mention that this is for an ipad 10.5" and I was wondering how that is to use. Are you able to get the screen to turn on when you are near by etc?
I do have an ipad pro 12.9" which I dont use that often, so some sort of wall mounted charging dock that would allow it to be in use when I dont need it would also be a good idea.
Really looking forward to hear your thoughts on using an ipad for this purpose!
Thank you ! An iPad is great for this because they are lagfree. I think even the smallest lag destroys the user experience.
The downside is that you cant use fully kioskbrowser. However i made guide a while ago how you can wake your iPad with an external sensor [HOW TO] Make ipad turn on screen automatically when motion is detected - Tutorials - Homey Community Forum .In the video you also see my iPad wallmounted in a steel case i bought on amazon for about 15dollars !
Thats nice! I would probably need a dedicated ipad for this to work, as I guess enabling/ disabling the notifications on ipad for each time I use it will be a bit of a pain.
I will think about it! Thanks
Try to add this to the light popup card: displayType: slider.
This worked for me.
yes, amazing! that fixed it. thank you!
Thanks for the advice. Although I’m not entirely sure this is solving what I’d like it to. I guess I didn’t explain myself well enough!
Essentially, I’d like to be able to select a playlist from the bottom right section and also select which Sonos speaker it plays on (I have 8 different Sonos zones). Then, that info is populated in the media player at the top near the date. Grouping would be great, too, but I’ll live without it if I can just get this to work.
This is basically the same functionality that Daniel has with Spotify playlists and Chromecast. But I can’t for the life of me figure out how to apply this to Sonos.
I even tried to just stick a regular mini media player in the bottom right section instead of the playlist grid, but you have to define a “master” Sonos speaker, so it doesn’t really fit what I need it to do. Plus, on an my iPad Mini, showing the full list of speakers for grouping ends up running the card off-screen.
I’m a little stumped…
I found a solution, so I can use notifications in home assistant app which allows me to either click a button, trigger a motion sensor etc which will fire off a notification to the iPad. I just made an input_boolean to control if I should send the notification or not.
So now I need to get started on implementation of your design! Is the first post up to date still?
That is a celever way, i took the easy path and just used my motion sensor in the Apple home app to send me the notification.
Yes i have not done any changes to the code so it is up to date and i am shure you can improve it!
Hey there,
I really love this UI and want to adapt it to my mobile.
Do you have an idea how to get (as a start) the width and height of the four cards to scale to the display of the mobile?
Hello! For mobile i would just take the code for the cards and placed them inside a horizontal stack nested inside a vertical stack. I think two cards on a row will actually work quite good on mobile and the size of the cards will work just fine if you only show two on a row.
For mobile i would ditch most of the other elements on my dashboard. For example i think it do not make sense to have a music player inside home assistant when you so easily can switch to the spotify app that is much better. Same goes for weather etc. So when i design i think alot about how you use the specific device. But thats is just my toughts, you do as you want ofcourse 
Hey @danieljarhult ,
thank you for your advice.
Another stupid noob question:
My background looks more like a grey than your gradient / blur effect. Do you have a hint for me, where the error is:
Addition: In the developer Tools section of the browser if find this error:
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (white_03.jpg, line 0)
thanks for share
If you can share your code i can have a look! But please start to check in the neon.theme file for errors. Try to change the background color from the gradient to a something like blue or white just to see if the background changes color.
