Is anyone using the custom-Sonos-card in HACS? I stumbled on it yesterday and am trying to figure out what all the options are. I checked GitHub but the example YAML is not very extensive.
I am not but I am new to HA and I’m just using what was immediately available and works well
but I’m definitely interested in learning about other SONOS cards.
I had some trouble getting it to display like others with the same complaint on git but I got it. After dinner, I’ll go back and refine it with all my devices and then actually look at what it can do and report back.
I went back and reconfigured it. It was as slow as everyone was saying on git for me. I could tell it was fighting the groupings back and forth and playback was miserable. My experience was laden with issues and I can’t consider this a viable solution for me.
Could you possibly provide some hints on how you got the card to show up? I am still struggling.
Hello, I’d like to introduce you to this forked, working, and actively being improved Sonos Card: Lovelace: Sonos card
If you have questions about THIS card, I’ll be happy to help you out but this is the one we’re all using as of a few weeks ago.
Not that this is relavent to any conversation here but trying to learn this stuff is taxing… I realize some of you guys just zip zip and it’s done but I’ve been trying to get this working for 2 days… FINALLY after literally guessing it works.
SO I’m posting what I did so maybe if a new person needs help they have a reference to work from because it works… I also realize that there are a ton of programmers here that right stuff and it makes sense to them but let me tell what a NON programmer that just wants to get something working sees…
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc sed augue lacus viverra vitae congue eu consequat ac.
Yeah makes about that much sense to a new fella or fellet. Compounded by the documentation is usually outdated to start with.
- type: custom:custom-sonos-card
shuffleFavorites: false
noMediaText: 'No media selected'
allVolumesText: 'All volumes'
entityNameRegexToReplace: 'SONOS ' # Regex pattern to replace parts of the entity names
entityNameReplacement: ''
layout:
mobileThresholdPx: 1000
groups:
width: 80%
mobileWidth: 80%
players:
width: 70%
mobileWidth: 90%
mediaBrowser:
width: 100%
mobileWidth: 70%
mediaItem:
width: 20%
mobileWidth: 50%'
selectedPlayer: media_player.sonos_five
backgroundBehindButtonSections: false # default is false, which means no background behind the different button sections
skipAdditionalPlayerSwitches: false
styles:
button-section:
backgroundColor: lightblue
border: 1px solid blue
ha-card:
padding: 3rem
background-size: contain
#background-image: >-
# url(/local/images/circle.jpg)
groups:
order: 2
players:
order: 0
player-body:
border: 5px black
player-song:
color: '#005cbb'
font-family: Times New Roman
font-weight: 900
mediaBrowser:
order: 1
member:
background: '#005cbb'
color: yellow
title:
fontSize: 30px
fontWeight: lighter
textTransform: uppercase
color: darkblue
Now I realize that there may be some inconsistencies with this and a repeat of un-needed code here and there but it works… and a good starting point for someone who hasn’t got a clue. I literally pasted that together and guessed… but the result is… it’s working.
Hello, I’d like to introduce you to this forked, working, and actively being improved Sonos Card: Lovelace: Sonos card
This OTHER thread has tons of examples and folks willing to help you with the SONOS card. I’m glad you got it working, but a word to the wise: the 2022.5 beta version of HA has introduced breaking changes for this card which will render the display of your card useless. This has been reported and the author is aware. You’ll be fine as long as you don’t download 2022.5 before we get a fix for the card.
You can follow along with the state of that fix in the other thread. If you post questions about sonos in that other thread, you’re very likely to get an engaged response.
That’s pretty much the card I finally got working LOL
Thank you!
Not happy that the backgrounds don’t show up on the Media section… well they do then they don’t…
I think it depends on their mood LOL
My suggestion is that if someone only has 1 entity then the ‘Grouping’ should be an option in the config… a boolean… As you see it just sits there being all ugly LOL
My outcome was basically pasting two existing cards together but it’s working… ugly but working LOL
Now mind you I found a layout that spreads the entire “Media” across the bottom in a horizontal row but never got that working and I have this player on it’s own page so it should have all the space in the world.
They just updated the card to work with 2022.5. Now I can go in and play with it and tell you the settings you need. I have to redo mine because I wiped out my settings when I was troubleshooting why it wasn’t displaying.
Here is my exact card:
type: custom:custom-sonos-card
name: ''
groupsTitle: ''
groupingTitle: ''
favoritesTitle: ''
headerImage: ''
shuffleFavorites: false
noMediaText: No media selected
allVolumesText: All volumes
backgroundBehindButtonSections: true
entityNameRegexToReplace: SONOS
entityNameReplacement: ''
entities:
- media_player.bedroom_sonos
- media_player.bedroom_2_sonos
- media_player.deck_sonos
- media_player.dining_room_sonos
- media_player.garage_sonos
- media_player.living_room_sonos
- media_player.media_room_sonos
- media_player.office_sonos
- media_player.stairway_sonos
layout:
mobileThresholdPx: 500
groups:
width: 15%
mobileWidth: 100%
players:
width: 25%
mobileWidth: 100%
favorites:
width: 60%
mobileWidth: 100%
favorite:
width: 10%
mobileWidth: 25%
You gave feedback about the grouping should be optional if you only have 1 entity. I think that’s great feedback and totally a doable request based on the other requests I’ve seen. You should post that in the other thread there this card’s author is watching.
The cover images issue, yeah something definitely isn’t right with that (as you can see from my card). I know a few people had trouble getting custom things to show but as far as I know, all that is working. If you continue to have this issue, I’d encourage you to ask about it in the other thread. I’ve never had cover art issues so I can’t help there.
It does look like there’s some styling issues going on in your screenshot but those can easily be fixed a number of ways.
Here’s some CSS styling that you can use if you want to edit:
styles:
button-section:
backgroundColor: lightyellow
border: 1px solid blue
ha-card:
padding: 3rem
background-size: contain
background-image: >-
url(https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/Flag_of_Ukraine.svg/1200px-Flag_of_Ukraine.svg.png)
groups:
order: 1
players:
order: 2
player-body:
border: 5px black dashed
player-song:
color: '#005cbb'
font-family: Times New Roman
font-weight: 900
mediaBrowser:
order: 0
member:
background: '#005cbb'
color: yellow
title:
fontSize: 30px
fontWeight: lighter
textTransform: uppercase
color: darkblue
The other thing this offers is a way to make the placement of the parts of the card in the order you want. You CAN use this to force the favorites to the bottom if you want. What I’ve noticed seems to work easiest for me is just adjusting the widths of all modules to exceed 100% and this pushes the favorites down. Like this:
layout:
mobileThresholdPx: 500
groups:
width: 30%
mobileWidth: 100%
players:
width: 30%
mobileWidth: 100%
favorites:
width: 100%
mobileWidth: 100%
favorite:
width: 10%
mobileWidth: 25%
I like that!! Thank you! I’ll post the request in the other forum topic… I think it should be ‘hideable’ if you only have 1 entity.
I’ll make a github request too!
No matter what I set it to I cannot force it to the bottom… at this point I’d settle for putting them to the right of the player…
Thank you VERY much!
Hey, how did you get this card?
Hello, I’d like to introduce you to this forked, working, and actively being improved Sonos Card: Lovelace: Sonos card The instructions are in the first post.