Habpanel Sonos Widgets

Hi All
I’ve been playing with Habpanel widgets to create a Dashboard for Sonos. Attached are 3 widgets which link to my Sonos system of 7 rooms. All are extensively reworked from other people’s versions for similar things and I’m no expert at coding so I’m quite sure they can be improved on!

There are three widgets:
SonosControlWithArt shows AlbumArt and does player controls and volume
SonosControlWithArt.widget.json (10.1 KB)

SonosAlbumSelect shows 8 slots which link to Sonos favourite playlists (or stations etc) with a link to png for Album cover
SonosAlbumSelect.widget.json (7.0 KB)

SonosSystemVolume groups different speakers (I use the one called SN_DiningRoom as a master) and controls the volume. The top right master one runs buttons called Chill and Loud which run rules which set all speakers to a pre-determined volume for background music and party mode. This one is a bit more complicated and I can post more detailed instructions if helpful to people!
SonosSystemVolume.widget.json (18.3 KB)

Hopefully of use to someone - improvements and code tips helpful as learnt from scratch through copying and guesswork!!


Nice work, gonna try this some time

1 Like

Great let me know your thoughts!

Could you please explain how to start Sonos favourite playlists or stations.

Last time I got trouble by playing my favorite tunein radio stations. So I decided to switch to radio.net.
There are no problems using them via sonos app, but for me it is absolutely impossible to start them via openhab.


You need a favourite item:

String SN_DiningRoom_Faves "DiningRoom Faves"  {channel="sonos:CONNECTAMP:RINCON_000000:favorite"}

And then you need to pass the name of a Sonos favourite as a string, e.g. in a sitemap button:

Switch item=SN_DiningRoom_Faves label="" mappings=["Chill"="Chill"]

Note that the playlist must be set up as a Sonos favourite (this confused me for ages). The favourite can be anything - a radio station, playlist etc. As long as the word match.

1 Like


i need help.
i install and config the Widget 2 but i cant see the music/volume control icons.
They are control the music but i cant see them.

thx for help

Thanks for trying this! Bit of a guess but it looks like the widget isn’t big enough - on mine it covers a whole page. Click edit and make the widget taller and wider.

The Widget looks great. But I don’t see the control neither. I tried to resize the widget but the never appear.

Do I have to put the control images like Play.png into the folder /static/sonos/? Where do I get them from? Is it located at /etc/openhab2/html?

Regards, Fred

Hmm, thanks for the feedback @Fred_H

I’m no expert at this but will try and get it to work!

I think you are absolutely right - you need the icons in the conf\html\sonos folder

Sorry, should have referenced these! Would love to know if it works after this

@kalki this is probably what you had going wrong too? Sorry I never replied to this

You can use any icon I guess but the ones attached work very nicely


Play VolDown Back

Thanks. That was the problem.

Put the Files
in the folder /etc/openhab2/html/sonos and it’s working.

1 Like


Wow this is awesome…

Tried to set it up ,but strungling a bit since i am very new to Openhab.
So have a few questions.
1.Which widget needs to be used ,i cant seem to find where multible buttons can be configured. ?
2. Dont have a /etc/openhab2/html/sonos folder ,Do i need to create it ? what should file be called.

I am by the way talking only about the SonosControlWithArt

Hi @BDE happy to help - there may well be issues with it as a long way from being an expert myself!

To Q1 - I’m not quite sure I understand what you mean - what have you done so far? Have you got as far as installing the custom widget?

To Q2 - The sonos folder you will need to create within the html folder. The rest of the path should already be created as part of your standard openhab installation.

Hallo Fraser

Thank you for offering ,i really need it since i am only a few weeks into Openhab in general.

Well after i posted i played some more with it to gain some more understanding which made understand that my questions were uselees since i seem to have misunderstanded what needed to be done totally.

this unfortunately set me back several steps,so i need to start entirely from start.

I guees i need

Setup Sonos in things, sitemap and item file (paper UI is not enough i guess ?)
Then import the custom widget made ,and fill in items data in below .

am i on the right path now ?

     "type": "item",
        "id": "media_art",
        "label": "Image Art",
        "description": "Artwork for video or album covers for music can be shown here and will make up the background image of the widget.",
        "default": "SN_DiningRoom_currentalbumart"

wow now its really going the wrong way.

creating sitemap for Sonos “crashes” Basic UI

Frame label="Sonos " {
Default item=Sonos_Controller
Slider item=Sonos_Volume
Switch item=Sonos_Mute
Switch item=Sonos_LED
Text item=Sonos_CurrentTrack
Text item=Sonos_State
String item=Sonos_currentalbumarturl
Image item=Sonos_currentalbumart


Adding the 2 last lines crashes it otherwise it works…
Any ideas.


Unless I’ve done something very wrong (possible, even likely) you shouldn’t need to change the code in the widget. You should be able to:

  1. Set up things and items (paper UI is fine - I use this)
  2. Add the custom widget to habpanel
  3. With habpanel in edit mode click the …in the top right
    4 click edit
  4. Link to the appropriate items - explanation of the item type is shown, they need to be the right type - image, controller, string, string respectively

That should be all you need to do.

If you’ve changed the underlying code you may need to delete and start again.

You can of course change the code to directly reference your items but shouldn’t be needed

thx for your patience

when i follow your guide clicking edit give me this

Hi there. I think this is the wrong widget - it should have more options and also mine isn’t in German.

Hi Fraser

I managed to get to next step.

  1. Link to the appropriate items - explanation of the item type is shown, they need to be the right type - image, controller, string, string respectively

This is is teasing me a bit ,since when i am defining tyoe image and controller is not an option.

OK So i believe i am progressing although very slowly.

So now i just need to get the controls visible.

i have copied “ikons/pictures” as stated above…