Control Sonos Music in 2020?

Smartly is really nice!

The one thing i would love with smartly is to set a uniform color for active tiles and inactive tiles,
The default for this theme: smartly dark, is the grayish inactive and a blue active color. I'd much rather make each tile dark when inactive and light when active. The same color as the sonos tile when inactive and then the color it has currently when active.

Is there an easy way to do that?

Just been approved I see. Welcome :stuck_out_tongue_winking_eye:

1 Like

very cool! i'm downloading it now!

2 Likes

You are using the latest smartly with JSinjector (drag n drop) correct?

If so you can set those in the custom CSS section with a code like this.

.tile.switch.on {
   background-color:rgba(0,0,0,0.5)!important;
}
.tile.switch.off {
   background-color:rgba(0,0,0,0.8)!important;
}

Change the 0's for color and 0.X at the end for opacity. You'll need one for each tile type like dimmer, motion, and mode on/off etc. Any changes made at the very bottom of the custom CSS will be preserved during smartly updates.

I just got the virtual music player working. Neat stuff!
On the smartly i use this link: https://hubitat.ezeek.us/smartly/
I don't know if this is the latest version or not, i saw a post about it a few days ago and decided to give it a try. its seriously nice and thats what i've been working off.

Thanks for the heads up on the json property. I can hack that up easily.

you are all awesome! thanks for the help!

1 Like

yep that's it. If you want to get the most out of the pre-release be sure to install the smartly JSinjector via HPM. But that is mostly for drag n drop. Caution if using stacked tiles you cannot use drag n drop (it will mess them all up)

Make sure you put that in the CSS not JSON.

Got it!

I'll play with stacking on sunday. superbusy tomorrow. Thanks a bunch!

On a side note, as a heavy Sonos users, I ended up adding a Raspberry PI to my setup and installed the Sonos HTTP framework and hooked up a Momentary Switch so I could do some more advanced voice controls like "Alexa, play music outside" which will join my outside amp to the corresponding speaker (upstairs) I know will be playing. Likewise I say "Alexa, stop music outside" and it splits the outside speaker from the group playing music". So much better than manually pulling out my phone to join/unjoin speakers.

Sonos HTTP allows a whole bunch of advanced Sonos control you can easily trigger with rest calls via RM or the Momentary switches I'm using for Alexa/Homekit easy support.

Once you add a RPI (or any really always on device), you might also end up exploring other awesomeness like Homebridge (this has made my life and WAF so much better for specific scenarios) if your' using apple devices, or Node-Red (I've installed it but haven't done anything with node red yet) is another awesome advanced tool many here are using to complement HE.

I have a raspberry pi coming alive in the next week or two. I have a pool with pentair automation and I'm getting a pi with the pool controller node.js packages that integrates with hubitat.

I had a Google nest wifi system with 6 nest wifi routers using hardwired backhaul but my internet was unstable. While I debugged that I didn't want to add more network devices. I just did a factory reset and replaced the main router as it was overheating and since then my network seems more stable. So I think I'm ready to add the pi and I can easily add more things that this pi can run.

Thanks for the suggestion!!!

1 Like

Mind elaborating on how you (or the helper :wink:) did this?

1 Like

tile 17 is the top tile. Tile 64/65 are the bottom two. Note if using smartly/drag and drop once you add stacked tiles you can no longer use that feature (it will break the stacks)

#tile-17{
  padding-bottom:8em
}
#tile-17 .tile-contents{
  display:inline-flex
}
#tile-17 .material-icons{
  font-size:43px!important; 
  line-height:1em
}
#tile-17 .vue-slider{
  margin-top:4em!important
}
#tile-17 .trackDescription{
  overflow:hidden;
  white-space:nowrap;
  padding-bottom:1em;
  margin:0.5em
}
#tile-17 .music-player{
  margin-top:-3px
}
#tile-17 .tile-primary,
#tile-64 .tile-primary,
#tile-65 .tile-primary{
  width:100%
}
#tile-64,
#tile-65{
  border:0 none;
  background-color:transparent!important
}
#tile-65{
  margin-top:-1em
}
#tile-64 .tile-title{
  padding-bottom:.5em
}
#tile-64 .music-player,
#tile-65 .music-player,
#tile-64 .trackDescription,
#tile-65 .trackDescription{
  display:none
}
#tile-17 .music-player>div.previous,
#tile-17 .music-player>div.play-pause,
#tile-17 .music-player>div.next,
#tile-17 .music-player>div.muteControl{
  margin-top:0;
  top:unset;
  width:unset;
  position:relative
}
#tile-17 .music-player>div{
  top:4.75em;
  position:absolute;
  width:100%
}
#tile-17 .trackDescription{
  position:absolute;
  left:0;
  top:2.75em;
  height:100%;
  width:auto;
  padding:0;
  animation:slideshow 10s linear infinite
}

@keyframes slideshow {0%{left:100%}100%{left:-150%}}

#tile-17 .tile-primary>.music-player{
  margin-top:5px
}
1 Like

Hello all, apologies for jumping in on this thread with another question, but it does relate to Sonos.

I do see many people using Dashboard and Alexa to control their speakers. In our home, we've actually gone another way and are using the Lutron Pico integration. This isn't going through HE, even though both the Picos and Sonos speakers are paired top HE.

So, long story short, we aren't crazy about how the integration between Lutron and Sonos is working. Our main gripe is how the middle button operates. Instead of cycling through favourites and replacing the Queue as it goes, our playlists end up getting stacked together in a mish mash of everything. Not ideal. I've spoken to techs at Sonos and they told me that I had to speak with Lutron (a wild goose chase if you ask me).

Any advice on how I can create this functionality within HE? When I look at the device page, I don't see anything similar to what I am looking for,

I'm looking for a way to cycle through favourites on my Sonos Speakers from Pico (but could be any remote), abnd replace the queue as I go.

From there, I can get into some more advanced functionality, but I'd liek to tackle this one first.

Thanks,

@TechMedX, CSS code works brilliantly thank you. I had to tweek some of the vertical positioning, which I assume was due to the fact I'm not using Smartly. I've copied the changed code below for anyone who follows that's interested. I'm working on a 3-speaker and 4-speaker combo, as well. If anyone wants that, just ping me and I'll post that too.

Summary

#tile-97{padding-bottom:8em}
#tile-97 .tile-contents{display:inline-flex}
#tile-97 .material-icons{font-size:43px!important;line-height:1em}
#tile-97 .vue-slider{margin-top:2em!important}
#tile-97 .trackDescription{overflow:hidden;white-space:nowrap;padding-bottom:1em;margin:0 .5em}
#tile-97 .music-player{margin-top:-3px}
#tile-97 .tile-primary,#tile-99 .tile-primary,#tile-98 .tile-primary{width:100%}
#tile-98,#tile-100{border:0 none;background-color:transparent!important}
#tile-98{margin-top:-1em}
#tile-100 .tile-title{padding-bottom:.5em}
#tile-100 .music-player,#tile-98 .music-player,#tile-100 .trackDescription,#tile-98 .trackDescription{display:none}
#tile-97 .music-player>div.previous,#tile-97 .music-player>div.play-pause,#tile-97 .music-player>div.next,#tile-97 .music-player>div.muteControl{margin-top:0;top:unset;width:unset;position:relative}
#tile-97 .music-player>div{top:6em;position:absolute;width:100%}
#tile-97 .trackDescription{position:absolute;left:0;top:4em;height:100%;width:auto;padding:0;animation:slideshow 10s linear infinite}
@keyframes slideshow {0%{left:100%}100%{left:-150%}}
#tile-97 .tile-primary>.music-player{margin-top:5px}

I am having one problem with the Virtual Music Player app from @Cobra. When I change the volume of the parent virtual player, all the children change volume too as expected, but only for a minute or so, then they revert to their previous settings. My guess is that this has something to do with the fact that I'm not using Sonos groups. Even though the VMP docs on Cobra's website suggests this works for any speaker device, not only Sonos. I could use RM4 to could everything in sync, but I'd really rather use VMP if feasible.

In my setup, I'm using one Sonos as a source and a bunch of dumb speakers. In between, I've got a smart matrix amp that does the source and speaker selection. Any ideas?

Something else must be changing the speakersā€™ settings
You could try ā€˜Speaker Volume Chaseā€™ to see if that works better for you

Andy

There's literally nothing else attached to the speaker devices. confused. Could it be because I'm not using Sonos speakers? Will check out SVC, thanks Andy.

Edit: I wonder if I've messed up the config of Virtual Music Player app. Since I have a bunch of non-Sonos speaker devices and just one Sonos that I use as a source, I created a virtual device and then just picked one of the speakers to use as the master in. your app. Wonder if I should be configuring the app differently?

@SoundersDude

I know this is a bit old, but man I'm struggling. I'm waffling back and forth about how to get my multiroom audio working and integrated into my home.

Options include Hubitat interface, rasperry pi, or HomeKit. I have all available but it's just overwhelming to figure out which to use and how!

Can you explain a bit more about how yours is setup? Would really appreciate it.

No problem.
So yeah, I went with both;

  1. The built in Sonos integrations
  2. Hosting Sonos HTTP on an RPI (where I also - unrelated- have Homebridge installed which has been great)

I use the HTTP Momentary switches to trigger Sonos HTTP commands like grouping/ungrouping as you see in the screenshot.

And I use the native Sonos integration to do things in apps like RM to play a specific song file if motion is detected while in away more, or to use Sonos as speach to text speakers for things like HSM.

Does that help?

1 Like

Just in case it is useful, I use this for more quickly making buttons that do various things with the node-sonos-http-api:

@SoundersDude

Yes that helps very much. I just need to really wrap my head around this node.js stuff I guess and learn. I feel like I've jumped off the high dive without swimming lessons.

I'm hopeful that I can get those installed on my NAS under docker as that's where I have almost all my home stuff so far. I do have a pi but it's just one more thing to ssh into and manage so I've been trying to dockerize everything under one NAS point.

I will spend some time trying to understand the tools you have pointed out, what you're doing is exactly what I'm trying to do so it's very appreciated!

Cool cool.
Yeah, I took a fast route by installing the RPI image here from community member @csteele which already has NodeJS, Node-Red (I don't use this yet) and HomeBridge on it.

Then installed HTTP Sonos using their instructions.

What took me a while to figure out is how to get it to run all the time on a RPI reboot, which I ended up just adding it to PM2 per this comment: Raspberry PI Image for Homebridge + Node-Red - Integrations - Hubitat