This is really cool! Thank you very much for sharing this awesome piece of code. Played a bit with it and got it up and running. The only thing I was wondering, would it be possible to combine the Pause icon and the Play icon into one? So when it plays it shows a Pause or Stop icon and when it’s stopped it shows a Play icon to resume?
Thank you again for this wonderful template. Really appreciate it.
I’m trying to get this widget to work. I think I’ve got all the controlls to work, but I cant seem to get the widget to show the favorites images. Where shall I put them? I’ve tested to put them in every folder under conf and in the conf folder, but nothing seems to work. Hope someone can help me with this. Is there anything else I have to do to get it to work?
Here’s my code.
The directory ‘static’ is actually a directory called html in conf (so /conf/html)
Hope that helps.
<button class="sonosbutton" style="background-image: url(/static/sonos/bbc_6music.png); background-size: contain; background-repeat: no-repeat;background-position: center center"
ng-click="sendCmd('Sonos_2_playradio', 'BBC Radio 6 Music')">
</button>
Hi,
I am new with openhab and habpanel.
Can anyone help me with this?
a step by step wizard?
Hello and thank you for this great work 
This is exactly what I’m looking for. A way to select stations but that is the part I can’t get to work.
How do I configure radio stations to work? I added one image for testing.
Thank you for sharing this. I got it set up and working I just need to decide what stations I want to use. One question with your rules what does this line do and mean? “var Number v_volume = dim_sonos_bad_volume.state as DecimalType”
Hello,
I’m just starting with OH2 2.3 and found this control. It took me a while to get it to work - mainly the sonos.items file was mostly not needed, as I used OH2 auto discovery and updated the references to the items from PaperUI.
@tailor hanks’ for the work you put into this.
I am trying to store the radio stations as string items, but I keep getting a N/A when I refer to them in the panel
This habpanel.template html snippet has two buttons - one with a string constant and the is supposed to retrieve a value.
<div class="col-md-4 modgrid">
<button class="sonosbutton" style="background-image: url(/static/sonos/1.png); background-size: contain; background-repeat: no-repeat;background-position: center center"
ng-click="sendCmd('SonosBeamLivingRoom_Radio', 'BBC Radio 2')">
</button>
</div>
<div class="col-xs-4 modgrid">
<button class="sonosbutton" style="background-image: url(/static/sonos/2.png); background-size: contain; background-repeat: no-repeat;background-position: center center"
ng-click="sendCmd('SonosBeamLivingRoom_Radio', itemValue(str_sonos_radio_radio4))">
</button>
</div>
In the first div the station is correctly changed to ‘BBC Radio 2’
In the second the browser console reports:
Command sent: SonosBeamLivingRoom_Radio=N/A
sonos.items snippet
String str_sonos_radio_radio2 (Sonos)
String str_sonos_radio_radio4 (Sonos)
I even tried to a rule to initials, but that did not help either
sonos.rules snippet
rule "Sonos System Started"
when
System started
then
str_sonos_radio_radio2.postUpdate("BBC Radio 2")
str_sonos_radio_radio4.postUpdate("BBC Radio 4 93.5 (National News)")
end
Any idea how I go about creating an item to store the station name?
Next step is to get an item with the Sonos favourite name that I can retrieve in to the HABPanel Widget, later on, I’ll try to have an input to add new favourites.
regards
Steve Groom
Firstly, I believe that the radio station you want openHAB to access has to be set-up within ‘My Radio Stations’ in the SONOS app/desktop app/etc.
Then the reference to the radio station in openHAB has to exactly match how it’s worded in ‘My Radio Stations’. (I have ‘BBC Radio 2’ set-up myself, worded as exactly that)
in my rules (triggered when a scene is set; not required for HABpanel use) I have:-
Sonos_2_playradio.sendCommand("BBC Radio 2")
Sonos_2_Volume.sendCommand(10)
Sonos_2_Controller.sendCommand("PLAY")
my (relevant) items:-
String Sonos_2_playradio "Radio" {channel="sonos:PLAY1:RINCON_xxxxxxxxxxxxxxxxx:radio" }
and in my HABpanel:-
<div class="col-xs-4 modgrid">
<button class="sonosbutton" style="background-image: url(/static/sonos/bbc_radio_two.png); background-size: contain; background-repeat: no-repeat;background-position: center center"
ng-click="sendCmd('Sonos_2_playradio', 'BBC Radio 2')">
</button>
</div>
I hope that helps. 
Hello There,
thank you very much for sharing this as i really like the approach on using Sonos via Habpanel.
I’ve invested a couple of hours now but i just cannot get it to run completely. I seem still to be much too noob…sorry for that.
for now i have been entering following configuration.
HapPanel Code:
<style>
.sonosbutton {width: 90%; height: 4em; border: 0; color: white; background-color: transparent;}
.sonosctrl {width: 90%; height: 3em; border: 0; color: white; background-color: transparent;}
.sonosbuttontxt_white {width: 100%;height: 4em; border: 0; color: white;font-size: 10pt; background-color: transparent;}
.sonosbuttontxt_red {width: 100%;height: 4em; border: 0; color: red;font-size: 10pt; background-color: transparent;}
.modgrid {padding-left: 2px; padding-right: 2px; padding-top: 2px; padding-bottom: 2px;}
.butticon {font-size:1em;}
</style>
<div id="sonos-control" class="table" >
<div class="row">
{{ itemValue('str_sonos_wohnzimmer_zonename')}}
</div>
<div class="row" style="height:150px;" ng-if="itemValue('str_sonos_wohnzimmer_currentalbumarturl') != 'UNDEF'" >
<img style="max-width: 90%; max-height: 90%;" ng-src="{{itemValue('str_sonos_wohnzimmer_currentalbumarturl')}}" aria-hidden="false"/>
</div>
<div class="row" style="height:150px;" ng-if="itemValue('str_sonos_wohnzimmer_currentalbumarturl') == 'UNDEF'" >
<img style="max-width: 90%; max-height: 90%;" ng-src="../static/sonos/sonos_logo.png"/>
</div>
<div class="row" style="height:40px;">
{{ itemValue('str_sonos_wohnzimmer_currenttrack') | limitTo: 80 }}{{itemValue('str_sonos_wohnzimmer_currenttrack').length > 80 ? '...' : ''}}
</div>
<div class="row">
<div class="col-md-3 modgrid">
<button class="sonosctrl" style="background-size: contain; background-repeat: no-repeat;background-position: center center;font-size:20px;"
ng-click="sendCmd('pl_sonos_wohnzimmer_control', 'PREVIOUS')">
<i class="glyphicon glyphicon-step-backward butticon" alt="Step Backward"></i>
</button>
</div>
<div class="col-md-3 modgrid">
<button class="sonosctrl" style="background-size: contain; background-repeat: no-repeat;background-position: center center;font-size:20px;"
ng-click="sendCmd('pl_sonos_wohnzimmer_control', 'PAUSE')">
<i class="glyphicon glyphicon-pause butticon" alt="PAUSE"></i>
</button>
</div>
<div class="col-xs-3 modgrid">
<button class="sonosctrl" style="background-size: contain; background-repeat: no-repeat;background-position: center center;font-size:20px;"
ng-click="sendCmd('pl_sonos_wohnzimmer_control', 'PLAY')">
<i class="glyphicon glyphicon-play butticon" alt="Play"></i>
</button>
</div>
<div class="col-xs-3 modgrid">
<button class="sonosctrl" style="background-size: contain; background-repeat: no-repeat;background-position: center center;font-size:20px;"
ng-click="sendCmd('pl_sonos_wohnzimmer_control', 'NEXT')">
<i class="glyphicon glyphicon-step-forward butticon" alt="Step Forward"></i>
</button>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div ng-init="slider = {
'item': 'dim_sonos_wohnzimmer_volume',
'vertical': false,
'floor': 0,
'ceil': 100,
'step': 2,
'precision': 1,
'unit': '%',
'hidelabel': true,
'hidelimits': false,
'hidepointer': false,
'showticks': false,
'bigslider': false
}">
</div>
<widget-slider ng-model="slider"/>
</div>
</div>
<div class="row">
<div class="col-md-4 modgrid">
<button class="sonosbutton" style="background-image: url(/static/sonos/1.png); background-size: contain; background-repeat: no-repeat;background-position: center center"
ng-click="sendCmd('str_sonos_wohnzimmer_radio', 'Hitradio Ö3')">
</button>
</div>
<div class="col-xs-4 modgrid">
<button class="sonosbutton" style="background-image: url(/static/sonos/2.png); background-size: contain; background-repeat: no-repeat;background-position: center center"
ng-click="sendCmd('str_sonos_wohnzimmer_radio', 'KRONEHIT 105.8')">
</button>
</div>
<div class="col-xs-4 modgrid">
<button class="sonosbutton" style="background-image: url(/static/sonos/3.png); background-size: contain; background-repeat: no-repeat;background-position: center center"
ng-click="sendCmd('str_sonos_wohnzimmer_radio', 'Superfly FM')">
</button>
</div>
</div>
thats my sonos.items:
Group grSonos <player>
/*Player*/
Player pl_sonos_wohnzimmer_control "Sonos Playbase Wohnzimmer Controller" (grSonos) {channel="sonos:PLAYBASE:Wohnzimmer:RINCON_XXXXXXXXXX1400:control"}
/*Radio String*/
String str_sonos_wohnzimmer_radio "Sonos Playbase Wohnzimmer Radiosender [%s]" (grSonos) {channel="sonos:PLAYBASE:Wohnzimmer:RINCON_XXXXXXXXXX1400:radio"}
/*Current Track String*/
String str_sonos_wohnzimmer_currenttrack "Sonos Playbase Wohnzimmer Current Track [%s]" (grSonos) {channel="sonos:PLAYBASE:Wohnzimmer:RINCON_XXXXXXXXXX1400:currenttrack"}
/*Current Artist String*/
String str_sonos_wohnzimmer_currentartist "Sonos Playbase Wohnzimmer Current Track [%s]" (grSonos) {channel="sonos:PLAYBASE:Wohnzimmer:RINCON_XXXXXXXXXX1400:currentartist"}
/*Current Title String*/
String str_sonos_wohnzimmer_currenttitle "Sonos Playbase Wohnzimmer Current Track [%s]" (grSonos) {channel="sonos:PLAYBASE:Wohnzimmer:RINCON_XXXXXXXXXX1400:currenttitle"}
/*Current Cover Image*/
Image img_sonos_wohnzimmer_currentalbumart "Sonos Playbase Wohnzimmer Current Cover" (grSonos) {channel="sonos:PLAYBASE:Wohnzimmer:RINCON_XXXXXXXXXX1400:currentalbumart"}
/*Current Cover Image URL*/
String str_sonos_wohnzimmer_currentalbumarturl "Sonos Playbase Wohnzimmer Current Cover URL" (grSonos) {channel="sonos:PLAYBASE:Wohnzimmer:RINCON_XXXXXXXXXX1400:currentalbumarturl"}
/*Current Album*/
String str_sonos_wohnzimmer_currentalbum "Sonos Playbase Wohnzimmer Current Track [%s]" (grSonos) {channel="sonos:PLAYBASE:Wohnzimmer:RINCON_XXXXXXXXXX1400:currentalbum"}
/*Playlist Switch*/
String str_sonos_wohnzimmer_playlist "Sonos Playbase Wohnzimmer Playlist [%s]" (grSonos) {channel="sonos:PLAYBASE:Wohnzimmer:RINCON_XXXXXXXXXX1400:playlist"}
/*Current State String*/
String str_sonos_wohnzimmer_state "Sonos Playbase Wohnzimmer Current Track [%s]" (grSonos) {channel="sonos:PLAYBASE:Wohnzimmer:RINCON_XXXXXXXXXX1400:state"}
/*Standalone Switch*/
Switch sw_sonos_wohnzimmer_standalone "Sonos Playbase Wohnzimmer Standalone Schalter" (grSonos) {channel="sonos:PLAYBASE:Wohnzimmer:RINCON_XXXXXXXXXX1400:standalone"}
/*Save Switch*/
Switch sw_sonos_wohnzimmer_save "Sonos Playbase Wohnzimmer Save Schalter" (grSonos) {channel="sonos:PLAYBASE:Wohnzimmer:RINCON_XXXXXXXXXX1400:save"}
/*Restore Switch*/
Switch sw_sonos_wohnzimmer_restore "Sonos Playbase Wohnzimmer restore Schalter" (grSonos) {channel="sonos:PLAYBASE:Wohnzimmer:RINCON_XXXXXXXXXX1400:restore"}
/*Current Zone Name String*/
String str_sonos_wohnzimmer_zonename "Sonos Playbase Wohnzimmer Zone Name [%s]" (grSonos) {channel="sonos:PLAYBASE:Wohnzimmer:RINCON_XXXXXXXXXX1400:zonename"}
/*Volume Dimmer*/
Dimmer dim_sonos_wohnzimmer_volume "Sonos Playbase Wohnzimmer Volume [%.1f %%]" (grSonos) {channel="sonos:PLAYBASE:Wohnzimmer:RINCON_XXXXXXXXXX1400:volume"}
/*Notification Sound*/
String str_sonos_wohnzimmer_notification "Sonos Playbase Notification" (grSonos) {channel="sonos:PLAYBASE:Wohnzimmer:RINCON_XXXXXXXXXX1400:notificationsound"}
/*Notification Volume*/
Dimmer dim_sonos_wohnzimmer_notification_volume "Sonos Playbase Wohnzimmer Volume Not [%.1f %%]" (grSonos) {channel="sonos:PLAYBASE:Wohnzimmer:RINCON_XXXXXXXXXX1400:notificationvolume"}
/*ADD*/
String str_sonos_wohnzimmer_add "Sonos Playbase Wohnzimmer Add" (grSonos) {channel="sonos:PLAYBASE:Wohnzimmer:RINCON_XXXXXXXXXX1400:add"}
I did not enter any rules as i do not have any groups enabled yet - just running with a playbase at the moment. so i’ve shortened the code…
This is how my panel looks like at the moment. I’ve also copied the png’s in, but it still does not work at all. i’ve tried it in the sitemap where i could get it to work switching on and off - but thats all.
i cannot do anything - i am really clueless.
i would be really thankfut if somebody could look over and help me get out of stucking here…thank you so much!
sorry for reasking - still trying around to fix it.
really nobody has an idea why i cant get it to work? thank you so much …
Hello and thanks a lot for your work. I have a small question who is a bit “offtopic”. As I can supose because of the items definition you also use the sonos for annauncements:
Switch sw_sonos_kitchen_doorbell “Rule Trigger Kitchen Doorbell” (grSonos)
How can I do a Announcement like “Windows toilet still open”
I allready have a roule who send a push-message.
@toxiroxi : your problem is that Playbase support is not available in the Sonos binding. I am currently trying to add it. You can see my PR: https://github.com/eclipse/smarthome/pull/6719
It will help me if you could give me the result of this HTTP call: http://IP:1400/xml/device_description.xml replacing IP by the IP address of your Sonos Playbase device.
@toxiroxi : and if you are enough technical to know how to deploy a specific version of a binding, you could try the test version I joined in the PR https://github.com/eclipse/smarthome/pull/6719 and give me a feedback.
Playbase and Beam are now supported in 2.5 snapshots.
sorry i was away quite a long time, and did not see your responses here earlier.
i am a bit technical - so if there is anything to help i am happy of doing so.
great to see that there is support in 2.5 already. i will try out the binding as i do not want to upgrade my production system to that early snapshot at the moment.
will let you know how my experience was. thank you so much for your efforts!
Does anyone know how to build Sonos favorites widget? I’m trying to build a widget that displays everything in the favorite channel. I know there’s a way to use Habpanel’s selection widget but I’d like to create my own widget. If I use ng-repeat I’m able to display favorites list but can’t seem to find a way to parse the information correctly:
String office_sonos_favorite "Play Favorite [%s]" (gOffice_favorite)) {channel="sonos:One:RINCON.favorite"}
<li style="background:transparent;height:100%;"class="list-group-item"ng-repeat="item in itemsInGroup('gOffice_favorite')" >
{{item.commandDescription.commandOptions}}
</li>
This is the output:
Hi Christian,
all.
Thanks for the inspiration - I used your code and applied some improvements.
Since this is my first contribution to this platform I created a seperate post to share those improvements back to the community (to not mess up this thread):
The template now includes the following changes/improvements:
Your command output let me do some try and errors 
Here is the result:
<h4>Sonos Favoriten</h4>
<div class="btn-group" uib-dropdown dropdown-append-to-body="true"
ng-init="sonos_favorites = getItem('str_sonos_kitchen_favorite').commandDescription.commandOptions">
<button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle>
{{itemValue('str_sonos_kitchen_favorite')}} <span class="caret"></span>
</button>
<ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
<li role="menuitem" ng-repeat="favorite in sonos_favorites">
<a ng-if="$index != 0" ng-click="sendCmd('str_sonos_kitchen_favorite', favorite.command)">{{favorite.command}}</a>
</li>
</ul>
</div>
Replace str_sonos_kitchen_favorite with your office_sonos_favorite
Hi all,
@GuidoS’s work on this inspired some changes. I’ve included the updated file on another thread here.