Sonos Dashboard

Hi guys,

I am very thankful for the work you guys put into making this dashboard so I was thinking I could share a project of mine.
I currently have two Sonos speakers, one in the living room and one in the kitchen.
I wanted a nice dashboard for controling these speakers.
There are a couple of things i wanted to be able to control using the dashboard.

  • Start playing my sonos favorites
  • Join/Unjoin the speakers (play on both or only on one speaker)
  • Control volume
  • Control shuffle/repeat/crossfade
  • Display what is playing with a picture and text
  • Display next track

The result:

##Playing

##Select a favorite to start playing

##Music stopped

In my setup I am using:

Sonos HTTP Api

For getting state and doing all the controlling. I found this easy to use and fast. In Home Assistant I use shell_commands to talk to the API.

HADashboard V3

Well you probably know where to find this already.

Hygge skin


Only thing I added to the skin was some CSS code in dashboard.css to make the Title texts bigger and to change the font.
The code added to dashboard.css
/*  current song widget  */
.widget-basedisplay-default-current-media-title .value{
  display: block !important;
  font-size: 150%;
  margin-top: 7px;
}
.widget-basedisplay-default-current-media-title .value::first-line{
  font-size: 200%;
  line-height: 150%;
}
.widget-basedisplay-default-current-media-title .valueunit {
  top: 25px !important;
}

/*  next song widget  */
.widget-basedisplay-default-next-media-title .value{
  display: block !important;
  font-size: 100%;
  margin-top: 10px;
}
.widget-basedisplay-default-next-media-title .value::first-line{
  font-size: 150%;
  line-height: 150%;
}
.widget-basedisplay-default-next-media-title .valueunit {
  top: 25px !important;
}

/*  fix font  */
.widget {font-family: 'Lato', sans-serif;}

get_dashboard_media_picture.py

I wrote a Python daemon that I have running on my Home Assistant host (RPi3) which fetch the current media picture from Home Assistant.

My cronjob to keep the daemon running

* * * * * ps x| grep get_dashboard_media_picture.py |grep -v grep > /dev/null 2>&1 ||/srv/homeassistant/homeassistant_venv/bin/python3 /home/homeassistant/.homeassistant/includes/python_code/get_dashboard_media_picture.py

The get_dashboard_media_picture.py code
#!/usr/bin/env python3
import homeassistant.remote as remote
import urllib.request
import time
import daemon
import filecmp
from shutil import copyfile

def run():
    with daemon.DaemonContext():
        get_media_picture()

def get_media_picture():
    media_picture_path = "/home/homeassistant/.homeassistant/www/media_picture.jpg"
    nothing_playing_picture_path = "/home/homeassistant/.homeassistant/www/not_playing.jpg"
    while True:
      try:
        media_picture_address = None
        api = remote.API('127.0.0.1', 'Secret Password')
        living_room = remote.get_state(api, 'media_player.living_room')
        kitchen = remote.get_state(api, 'media_player.kitchen')

        if living_room.state == 'playing':
          media_picture_address = 'http://skywlkr.se' + str(living_room.attributes['entity_picture'])
        elif kitchen.state == 'playing':
          media_picture_address = 'http://skywlkr.se' + str(kitchen.attributes['entity_picture'])

        if media_picture_address:
          urllib.request.urlretrieve(media_picture_address, media_picture_path)
        else:
          if not filecmp.cmp(nothing_playing_picture_path, media_picture_path):
            copyfile(nothing_playing_picture_path, media_picture_path)
            
      except:
        print('An error occured.')

      time.sleep(1)

if __name__ == "__main__":
    run()

One last thing I had to do to get the dashboard to update the media picture correctly instead of showing a cached file was to add some code to appdaemon.
You can read about it in this thread:
https://community.home-assistant.io/t/using-media-player-entity-picture/


Home Assistant Configuration

Files that contains code for the Sonos dashboard:

  • includes/automations/sonos/volume.yaml
  • includes/scripts/play_on_sonos.yaml
  • includes/scripts/sonos_controls.yaml
  • includes/sensors/sonos.yaml
  • includes/shell_commands/sonos/sonos_basic.yaml
  • includes/shell_commands/sonos/sonos_favorites.yaml
  • includes/standalonefiles/switch.yaml
  • includes/standalonefiles/input_slider.yaml

HADashboard Configuration

Files that contains code for the Sonos dashboard:

  • music.dash
  • play_music.dash

There are much room for improvements so I gladly take any feedback.
Hope I inspire someone and you are more than welcome to use my code, much of it is already stolen from this forum. :slight_smile:

6 Likes

That’s a nice dashboard for this purpose, I’ve chosen to go with the Chromecast instead of Sonos but I guess it could be adapted.

Thanks for sharing it :slight_smile: I’ll get a deeper look at it later this week :grin:

2 Likes

This looks amazing. I have 2 5.1 setups and 5 other speakers around my house and have been looking for something like this, be a lot easier than using your phone constantly and make the dashboards that much more useful. I just got dashboard to a good spot where I want to hang them in a few rooms, I am going to start working on this now…great work!

Are you using spotify playlists here?

@christian.ek Are you using a Sonos Bridge? Seems like all your join and unjoin refer to the same IP address.
Just got a Sonos system yesterday and trying to make sense of all these posts to see which method would work best for me.

There are some Spotify playlists but I run them via the Sonos HTTP Api after adding them in the sonos app as “Sonos Favorites”.

I use the Sonos HTTP API and all Join/Unjoin goes to that service.

Thanks Christian … do you still recommend this type of setup? Not sure if it would be possible, but would be great if HA would incorporate this code so that we could use it right out of the box.

thanks! it looks great.
I’ve tried it but the configuration validator says: “Component not found: input_slider”
Do you know what might be the problem?
I’m using HASSIO.

@Alex_Modelevich the input_slider component is now called input_number. Change that in your configuration and hopefully should work.

I’ve done all the setup work.
Restarting HA doesn’t give any errors, but I don’t get any Sonos switch, sensor etc. at all.
I think I’ve missed something, but don’t know what?

Looks awesome!! Anyone who would like to make a step by step guide for newbies like me?

Hi,

this looks like a component i really need, but i ve no idea how to setup in hassio. Can anyone help?

Got it. :slight_smile:

@erger Can you share please? :slight_smile:

Hi,

i couldnt get it to work on the hass.io System. So i set up the http-sonos-api System on
another Pi, which is running raspbian. I first installed node.js and then the http-sonos-api system.
After that, i use the ip-adress of the second pi to publish my sonos-api-commands. Ist working very well.

1 Like

Gotcha @erger thank you. It’s unbelievable there is no way to install this stuff on HassOS though, it’s weird to have a separate dedicated device to run this one thing.

Sure. But im running more than only this - so its running anyway :upside_down_face:

Do you know what the sensor command line for getting the Sonos sub level? I can see it it when I look when I pull up the states.

http://localhost:5005/livingroom/states