Sonos Control, Status & Favorites - Template Widget

tailor · May 18, 2017, 9:15pm

I created a template widget for my Sonos system (2x Play:1, 1x Playbar) showing cover, track, controls, favorites and grouping possibilties. I use one template per player.

Please feel free to use it, develop further and give feedback. I’m not a HTML crack, so my code is not really streamlined or optimized

Screenshot

Template 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_bad_zonename')}}
      </div>
   <div  class="row" style="height:150px;" ng-if="itemValue('str_sonos_bad_currentalbumarturl') != 'UNDEF'" >
      <img style="max-width: 90%; max-height: 90%;" ng-src="{{itemValue('str_sonos_bad_currentalbumarturl')}}" aria-hidden="false"/> 
   </div>
   <div class="row" style="height:150px;" ng-if="itemValue('str_sonos_bad_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_bad_currenttrack') | limitTo: 80 }}{{itemValue('str_sonos_bad_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_bad_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_bad_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_bad_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_bad_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_bad_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_bad_radio', 'SRF 1 Basel')">
         </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_bad_radio', 'SRF 2 Kultur')">
         </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_bad_radio', 'SRF 3')">
         </button>
      </div>
   </div>
   <div  class="row">
      <div class="col-md-4 modgrid">
         <button class="sonosbutton" style="background-image: url(/static/sonos/4.png); background-size: contain; background-repeat: no-repeat;background-position: center center" 
            ng-click="sendCmd('str_sonos_bad_radio', 'SRF 4 News')">
         </button>
      </div>
      <div class="col-xs-4 modgrid">
         <button class="sonosbutton" style="background-image: url(/static/sonos/5.png); background-size: contain; background-repeat: no-repeat;background-position: center center" 
            ng-click="sendCmd('str_sonos_bad_radio', 'Radio Basilisk')">
         </button>
      </div>
      <div class="col-xs-4 modgrid">
         <button class="sonosbutton" style="background-image: url(/static/sonos/6.png); background-size: contain; background-repeat: no-repeat;background-position: center center" 
            ng-click="sendCmd('str_sonos_bad_radio', 'NRJ Basel')">
         </button>
      </div>
   </div>
   <div  class="row">
      <div class="col-md-4 modgrid">
         <button class="sonosbuttontxt_red" style="background-size: contain; background-repeat: no-repeat;background-position: center center" 
            ng-click="sendCmd('sw_sonos_bad_standalone', 'ON')">
         <i class="glyphicon glyphicon-fullscreen" alt="Step Backward"></i><br>
         <b>Ungroup</b>
         </button>
      </div>
      <div class="col-md-4 modgrid">
         <button class="sonosbuttontxt_white" style="background-size: contain; background-repeat: no-repeat;background-position: center center" 
            ng-click="sendCmd('sw_sonos_group_livingroom_with_bad', 'ON')"> 
         <i class="glyphicon glyphicon-plus-sign butticon" alt="Step Backward"></i><br>
         <b>Living</b>
         </button>
      </div>
      <div class="col-xs-4 modgrid">
         <button class="sonosbuttontxt_white" style="background-size: contain; background-repeat: no-repeat;background-position: center center" 
            ng-click="sendCmd('sw_sonos_group_kitchen_with_bad', 'ON')">			
         <i class="glyphicon glyphicon-plus-sign butticon" alt="Step Backward"></i><br>
         <b>Kitchen</b>
         </button>
      </div>
   </div>
</div>

Items

Group grSonos <player>

/*Player*/
Player pl_sonos_kitchen_control 			"Sonos Play:1 Küche Controller" 					(grSonos)   {channel="sonos:PLAY1:RINCON_XXXXXXXXXXX8801400:control"}
Player pl_sonos_livingroom_control 			"Sonos Playbar Livingroom Controller" 				(grSonos) {channel="sonos:PLAYBAR:RINCON_XXXXXXXXXXX201400:control"}
Player pl_sonos_bad_control 				"Sonos Play:1 Bad Controller" 						(grSonos)   {channel="sonos:PLAY1:RINCON_XXXXXXXXXXX401400:control"}

/*Radio String*/
String str_sonos_kitchen_radio 				"Sonos Play:1 Küche Radiosender  [%s]" 				(grSonos) {channel="sonos:PLAY1:RINCON_XXXXXXXXXXX8801400:radio"}
String str_sonos_livingroom_radio 			"Sonos Playbar Livingroom Radiosender [%s]" 		(grSonos) {channel="sonos:PLAYBAR:RINCON_XXXXXXXXXXX201400:radio"}
String str_sonos_bad_radio 					"Sonos Play:1 Bad Radiosender [%s]" 				(grSonos) {channel="sonos:PLAY1:RINCON_XXXXXXXXXXX401400:radio"}

/*Current Track String*/
String str_sonos_kitchen_currenttrack 		"Sonos Play:1 Küche Current Track [%s]" 			(grSonos) {channel="sonos:PLAY1:RINCON_XXXXXXXXXXX8801400:currenttrack"}
String str_sonos_livingroom_currenttrack 	"Sonos Playbar Livingroom Current Track [%s]" 		(grSonos) {channel="sonos:PLAYBAR:RINCON_XXXXXXXXXXX201400:currenttrack"}
String str_sonos_bad_currenttrack 			"Sonos Play:1 Bad Current Track [%s]" 				(grSonos) {channel="sonos:PLAY1:RINCON_XXXXXXXXXXX401400:currenttrack"}

/*Current Artist String*/
String str_sonos_kitchen_currentartist 		"Sonos Play:1 Küche Current Track [%s]" 			(grSonos) {channel="sonos:PLAY1:RINCON_XXXXXXXXXXX8801400:currentartist"}
String str_sonos_livingroom_currentartist 	"Sonos Playbar Livingroom Current Track [%s]" 		(grSonos) {channel="sonos:PLAYBAR:RINCON_XXXXXXXXXXX201400:currentartist"}
String str_sonos_bad_currentartist 			"Sonos Play:1 Bad Current Track [%s]" 				(grSonos) {channel="sonos:PLAY1:RINCON_XXXXXXXXXXX401400:currentartist"}

/*Current Title String*/
String str_sonos_kitchen_currenttitle 		"Sonos Play:1 Küche Current Track [%s]" 			(grSonos) {channel="sonos:PLAY1:RINCON_XXXXXXXXXXX8801400:currenttitle"}
String str_sonos_livingroom_currenttitle 	"Sonos Playbar Livingroom Current Track [%s]" 		(grSonos) {channel="sonos:PLAYBAR:RINCON_XXXXXXXXXXX201400:currenttitle"}
String str_sonos_bad_currenttitle 			"Sonos Play:1 Bad Current Track [%s]" 				(grSonos) {channel="sonos:PLAY1:RINCON_XXXXXXXXXXX401400:currenttitle"}

/*Current Cover Image*/
Image img_sonos_kitchen_currentalbumart 	"Sonos Play:1 Küche Current Cover" 					(grSonos) {channel="sonos:PLAY1:RINCON_XXXXXXXXXXX8801400:currentalbumart"}
Image img_sonos_livingroom_currentalbumart 	"Sonos Playbar Livingroom Current Cover" 			(grSonos) {channel="sonos:PLAYBAR:RINCON_XXXXXXXXXXX201400:currentalbumart"}
Image img_sonos_bad_currentalbumart 		"Sonos Play:1 Bad Current Cover" 					(grSonos) {channel="sonos:PLAY1:RINCON_XXXXXXXXXXX401400:currentalbumart"}

/*Current Cover Image URL*/
String str_sonos_kitchen_currentalbumarturl 	"Sonos Play:1 Küche Current Cover URL" 					(grSonos) {channel="sonos:PLAY1:RINCON_XXXXXXXXXXX8801400:currentalbumarturl"}
String str_sonos_livingroom_currentalbumarturl 	"Sonos Playbar Livingroom Current Cover URL" 			(grSonos) {channel="sonos:PLAYBAR:RINCON_XXXXXXXXXXX201400:currentalbumarturl"}
String str_sonos_bad_currentalbumarturl 		"Sonos Play:1 Bad Current Cover URL" 					(grSonos) {channel="sonos:PLAY1:RINCON_XXXXXXXXXXX401400:currentalbumarturl"}

/*Current Album*/
String str_sonos_kitchen_currentalbum 		"Sonos Play:1 Küche Current Track [%s]" 			(grSonos) {channel="sonos:PLAY1:RINCON_XXXXXXXXXXX8801400:currentalbum"}
String str_sonos_livingroom_currentalbum 	"Sonos Playbar Livingroom Current Track [%s]" 		(grSonos) {channel="sonos:PLAYBAR:RINCON_XXXXXXXXXXX201400:currentalbum"}
String str_sonos_bad_currentalbum 			"Sonos Play:1 Bad Current Track [%s]" 				(grSonos) {channel="sonos:PLAY1:RINCON_XXXXXXXXXXX401400:currentalbum"}

/*Current State String*/
String str_sonos_kitchen_state 				"Sonos Play:1 Küche Current Track [%s]" 			(grSonos) {channel="sonos:PLAY1:RINCON_XXXXXXXXXXX8801400:state"}
String str_sonos_livingroom_state 			"Sonos Playbar Livingroom Current Track [%s]" 		(grSonos) {channel="sonos:PLAYBAR:RINCON_XXXXXXXXXXX201400:state"}
String str_sonos_bad_state 					"Sonos Play:1 Bad Current Track [%s]" 				(grSonos) {channel="sonos:PLAY1:RINCON_XXXXXXXXXXX401400:state"}

/*Standalone Switch*/
Switch sw_sonos_kitchen_standalone 			"Sonos Play:1 Küche Standalone Schalter" 			(grSonos) {channel="sonos:PLAY1:RINCON_XXXXXXXXXXX8801400:standalone"}
Switch sw_sonos_livingroom_standalone 		"Sonos Playbar Livingroom Standalone Schalter" 		(grSonos) {channel="sonos:PLAYBAR:RINCON_XXXXXXXXXXX201400:standalone"}
Switch sw_sonos_bad_standalone 				"Sonos Play:1 Bad Standalone Schalter" 				(grSonos) {channel="sonos:PLAY1:RINCON_XXXXXXXXXXX401400:standalone"}

/*Save Switch*/
Switch sw_sonos_kitchen_save 			"Sonos Play:1 Küche Save Schalter" 			(grSonos) {channel="sonos:PLAY1:RINCON_XXXXXXXXXXX8801400:save"}
Switch sw_sonos_livingroom_save 		"Sonos Playbar Livingroom Save Schalter" 		(grSonos) {channel="sonos:PLAYBAR:RINCON_XXXXXXXXXXX201400:save"}
Switch sw_sonos_bad_save 				"Sonos Play:1 Bad Save Schalter" 				(grSonos) {channel="sonos:PLAY1:RINCON_XXXXXXXXXXX401400:save"}

/*Restore Switch*/
Switch sw_sonos_kitchen_restore 			"Sonos Play:1 Küche restore Schalter" 			(grSonos) {channel="sonos:PLAY1:RINCON_XXXXXXXXXXX8801400:restore"}
Switch sw_sonos_livingroom_restore 		"Sonos Playbar Livingroom restore Schalter" 		(grSonos) {channel="sonos:PLAYBAR:RINCON_XXXXXXXXXXX201400:restore"}
Switch sw_sonos_bad_restore				"Sonos Play:1 Bad restore Schalter" 				(grSonos) {channel="sonos:PLAY1:RINCON_XXXXXXXXXXX401400:restore"}

/*Current Zone Name String*/
String str_sonos_kitchen_zonename 			"Sonos Play:1 Küche Zone Name [%s]" 			    (grSonos) {channel="sonos:PLAY1:RINCON_XXXXXXXXXXX8801400:zonename"}
String str_sonos_livingroom_zonename		"Sonos Playbar Livingroom Zone Name [%s]" 		   	(grSonos) {channel="sonos:PLAYBAR:RINCON_XXXXXXXXXXX201400:zonename"}
String str_sonos_bad_zonename 				"Sonos Play:1 Bad Zone Name [%s]" 					(grSonos) {channel="sonos:PLAY1:RINCON_XXXXXXXXXXX401400:zonename"}

/*Volume Dimmer*/
Dimmer dim_sonos_kitchen_volume 			"Sonos Play:1 Küche Volume [%.1f %%]" 			    (grSonos) {channel="sonos:PLAY1:RINCON_XXXXXXXXXXX8801400:volume"}
Dimmer dim_sonos_livingroom_volume			"Sonos Playbar Livingroom Volume [%.1f %%]" 		(grSonos) {channel="sonos:PLAYBAR:RINCON_XXXXXXXXXXX201400:volume"}
Dimmer dim_sonos_bad_volume 				"Sonos Play:1 Bad Volume [%.1f %%]" 				(grSonos) {channel="sonos:PLAY1:RINCON_XXXXXXXXXXX401400:volume"}

/*Notification Sound*/
String str_sonos_kitchen_notification 				"Sonos Play:1 Notification" 			(grSonos) {channel="sonos:PLAY1:RINCON_XXXXXXXXXXX8801400:notificationsound"}
String str_sonos_livingroom_notification			"Sonos Playbar Notification" 		    (grSonos) {channel="sonos:PLAYBAR:RINCON_XXXXXXXXXXX201400:notificationsound"}
String str_sonos_bad_notification 					"Sonos Play:1 Notification" 			(grSonos) {channel="sonos:PLAY1:RINCON_XXXXXXXXXXX401400:notificationsound"}

/*Notification Volume*/
Dimmer dim_sonos_kitchen_notification_volume 			"Sonos Play:1 Küche Volume Not [%.1f %%]" 			    (grSonos) {channel="sonos:PLAY1:RINCON_XXXXXXXXXXX8801400:notificationvolume"}
Dimmer dim_sonos_livingroom_notification_volume			"Sonos Playbar Livingroom Volume Not[%.1f %%]" 		(grSonos) {channel="sonos:PLAYBAR:RINCON_XXXXXXXXXXX201400:notificationvolume"}
Dimmer dim_sonos_bad_notification_volume 				"Sonos Play:1 Bad Volume Not [%.1f %%]" 				(grSonos) {channel="sonos:PLAY1:RINCON_XXXXXXXXXXX401400:notificationvolume"}

/*ADD*/
String str_sonos_kitchen_add 			"Sonos Play:1 Küche Add" 			(grSonos) {channel="sonos:PLAY1:RINCON_XXXXXXXXXXX8801400:add"}
String str_sonos_livingroom_add 		"Sonos Playbar Livingroom Add" 		(grSonos) {channel="sonos:PLAYBAR:RINCON_XXXXXXXXXXX201400:add"}
String str_sonos_bad_add 				"Sonos Play:1 Bad Add" 				(grSonos) {channel="sonos:PLAY1:RINCON_XXXXXXXXXXX401400:add"}

/*Virtual Switches for Grouping*/
Switch sw_sonos_group_livingroom_with_bad "Rule Trigger group_livingroom_with_bad"
Switch sw_sonos_group_livingroom_with_kitchen "Rule Trigger group_livingroom_with_kitchen"
Switch sw_sonos_group_kitchen_with_bad "Rule Trigger group_kitchen_with_bad"
Switch sw_sonos_group_kitchen_with_livingroom "Rule Trigger group_kitchen_with_livingroom"
Switch sw_sonos_group_bad_with_kitchen "Rule Trigger group_bad_with_kitchen"
Switch sw_sonos_group_bad_with_livingroom "Rule Trigger group_bad_with_livingroom"

Switch sw_sonos_kitchen_doorbell "Rule Trigger Kitchen Doorbell" (grSonos)
Switch sw_sonos_livingroom_doorbell "Rule Trigger Livingroom Doorbell" (grSonos)
Switch sw_sonos_bad_doorbell "Rule Trigger Bad Doorbell" (grSonos)

Rules

rule "Group Livingroom with Bad"
when
	Item sw_sonos_group_livingroom_with_bad changed to ON
then
    var Number v_volume = dim_sonos_bad_volume.state as DecimalType
	sendCommand(dim_sonos_livingroom_volume, v_volume)
	sendCommand(str_sonos_bad_add, "RINCON_XXXXXXXXXXX201400")
	sendCommand(sw_sonos_group_livingroom_with_bad, "OFF")
end
	
rule "Group Livingroom with Küche"
when
	Item sw_sonos_group_livingroom_with_kitchen changed to ON
then
	var Number v_volume = dim_sonos_kitchen_volume.state as DecimalType
	sendCommand(dim_sonos_livingroom_volume, v_volume)
	sendCommand(str_sonos_kitchen_add, "RINCON_XXXXXXXXXXX201400")
	sendCommand(sw_sonos_group_livingroom_with_kitchen, "OFF")
end
	
	
rule "Group Küche with Bad"
when
	Item sw_sonos_group_kitchen_with_bad changed to ON
then
	var Number v_volume = dim_sonos_bad_volume.state as DecimalType
	sendCommand(dim_sonos_kitchen_volume, v_volume)
	sendCommand(str_sonos_bad_add, "RINCON_XXXXXXXXXXX8801400")
	sendCommand(sw_sonos_group_kitchen_with_bad, "OFF")
end
	
	
rule "Group Küche with Livingroom"
when
	Item sw_sonos_group_kitchen_with_livingroom changed to ON
then
	var Number v_volume = dim_sonos_livingroom_volume.state as DecimalType
	sendCommand(dim_sonos_kitchen_volume, v_volume)
	sendCommand(str_sonos_livingroom_add, "RINCON_XXXXXXXXXXX8801400")
	sendCommand(sw_sonos_group_kitchen_with_livingroom, "OFF") 	
end
	
rule "Group Bad with Küche"
when
	Item sw_sonos_group_bad_with_kitchen changed to ON
then
	var Number v_volume = dim_sonos_kitchen_volume.state as DecimalType
	sendCommand(dim_sonos_bad_volume, v_volume)
	sendCommand(str_sonos_kitchen_add, "RINCON_XXXXXXXXXXX401400")
	sendCommand(sw_sonos_group_bad_with_kitchen, "OFF")
end
	
	
rule "Group Bad with Livingroom"
when
	Item sw_sonos_group_bad_with_livingroom changed to ON
then
	var Number v_volume = dim_sonos_livingroom_volume.state as DecimalType
	sendCommand(dim_sonos_bad_volume, v_volume)
	sendCommand(str_sonos_livingroom_add, "RINCON_XXXXXXXXXXX401400")
	sendCommand(sw_sonos_group_bad_with_livingroom, "OFF")
end

pahansen · May 18, 2017, 11:08pm

This sir, just made me want to set up Habpanel properly for the first time… Damn you for giving me an excuse to procrastinate while at work!

James_Hiscott · July 15, 2017, 11:08am

Hi @tailor

I got it sort of working… I am a bit new to this, so have a few questions:

As you can see, I am missing the favourites section. Can you explain how it gets the logos. it seems to be able to pull the “…/static/sonos/sonos_logo.png” ok but the 1.png are now showing, are they the favourites added to sonos or something else?
Anyway to show the play button as highlighted if it is playing and pause if its not?
Any way to put the TV audio as an option when using a playbar?

tailor · July 15, 2017, 9:08pm

Hi James

You need to save manually 6 logos of your favorite radio stations (1.png, 2.png, …) and save 6 radio stations via Sonos app. The HABPanel code calls then these stations by name.

There’s a new version including highlighted PLAY and PAUSE buttons:

<style>
   .sonoscover {width: 90%; height: 14em; border: 0; color: white; background-color: transparent;}
   .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;}
   .modgrid2 {height: 6em; padding-left: 2px; padding-right: 2px; padding-top: 2px; padding-bottom: 2px;}
   .butticon {font-size:1em;}
</style>
<div id="sonos-control"  class="table" style= "position: absolute; top: 10px; left: 0; width: 100%; height: 90%;">
   <div class="row">
      {{itemValue('str_sonos_livingroom_zonename')}}
   </div>
   <div  class="row" style="height:150px;" ng-if="itemValue('str_sonos_livingroom_currentalbumarturl') != 'UNDEF'" >
      <img style="max-width: 90%; height: 90%;" ng-src="{{itemValue('str_sonos_livingroom_currentalbumarturl')}}" aria-hidden="false"/> 
   </div>
   <div class="row" style="height:150px;" ng-if="itemValue('str_sonos_livingroom_currentalbumarturl') == 'UNDEF'" >
      <img style="max-width: 90%; max-height: 90%;" ng-src="../static/sonos/sonos_logo.png"/> 
   </div>   
   <div class="row" style="height:40px;padding-left: 25px; padding-right: 25px;">
      {{ itemValue('str_sonos_livingroom_currenttrack') | limitTo: 80 }}{{itemValue('str_sonos_livingroom_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:25px;" 
            ng-click="sendCmd('pl_sonos_livingroom_control', 'PREVIOUS')">
         <i class="glyphicon glyphicon-step-backward butticon" alt="Step Backward"></i>
         </button>
      </div>
      <div ng-if="itemValue('str_sonos_livingroom_state')=='PLAYING'" class="col-xs-3 modgrid">
         <button class="sonosctrl" style="background-size: contain; background-repeat: no-repeat;background-position: center center;font-size:25px;" 
            ng-click="sendCmd('pl_sonos_livingroom_control', 'PAUSE')">
         <i class="glyphicon glyphicon-pause butticon" alt="PAUSE"></i>
         </button>
      </div>
      <div ng-if="itemValue('str_sonos_livingroom_state')!='PLAYING'" class="col-xs-3 modgrid">
         <button class="sonosctrl" style="background-size: contain; background-repeat: no-repeat;background-position: center center;font-size:25px;color:red;" 
            ng-click="sendCmd('pl_sonos_livingroom_control', 'PAUSE')">
         <i class="glyphicon glyphicon-pause butticon" alt="PAUSE"></i>
         </button>
      </div>	  
      <div ng-if="itemValue('str_sonos_livingroom_state')=='PLAYING'" class="col-xs-3 modgrid">
         <button class="sonosctrl" style="background-size: contain; background-repeat: no-repeat;background-position: center center;font-size:25px;color:green;" 
            ng-click="sendCmd('pl_sonos_livingroom_control', 'PLAY')">
         <i class="glyphicon glyphicon-play butticon" alt="Play"></i>
         </button>
      </div>  
       <div ng-if="itemValue('str_sonos_livingroom_state')!='PLAYING'" class="col-xs-3 modgrid">
         <button class="sonosctrl" style="background-size: contain; background-repeat: no-repeat;background-position: center center;font-size:30px;" 
            ng-click="sendCmd('pl_sonos_livingroom_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:30px;" 
            ng-click="sendCmd('pl_sonos_livingroom_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_livingroom_volume',
            'vertical': false,
            'floor': 0,
            'ceil': 50,
            '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_livingroom_radio', 'SRF 1 Basel')">
         </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_livingroom_radio', 'SRF 2 Kultur')">
         </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_livingroom_radio', 'SRF 3')">
         </button>
      </div>
   </div>
   <div  class="row">
      <div class="col-md-4 modgrid">
         <button class="sonosbutton" style="background-image: url(/static/sonos/4.png); background-size: contain; background-repeat: no-repeat;background-position: center center" 
            ng-click="sendCmd('str_sonos_livingroom_radio', 'SRF 4 News')">
         </button>
      </div>
      <div class="col-xs-4 modgrid">
         <button class="sonosbutton" style="background-image: url(/static/sonos/5.png); background-size: contain; background-repeat: no-repeat;background-position: center center" 
            ng-click="sendCmd('str_sonos_livingroom_radio', 'Radio Basilisk')">
         </button>
      </div>
      <div class="col-xs-4 modgrid">
         <button class="sonosbutton" style="background-image: url(/static/sonos/6.png); background-size: contain; background-repeat: no-repeat;background-position: center center" 
            ng-click="sendCmd('str_sonos_livingroom_radio', 'NRJ Basel')">
         </button>
      </div>
   </div>
   <div  class="row">
      <div class="col-md-4 modgrid">
         <button class="sonosbuttontxt_red" style="background-size: contain; background-repeat: no-repeat;background-position: center center" 
            ng-click="sendCmd('sw_sonos_livingroom_standalone', 'ON')">
         <i class="glyphicon glyphicon-fullscreen" alt="Step Backward"></i><br>
         <b>Ungroup</b>
         </button>
      </div>
      <div class="col-md-4 modgrid">
         <button class="sonosbuttontxt_white" style="background-size: contain; background-repeat: no-repeat;background-position: center center" 
            ng-click="sendCmd('sw_sonos_group_kitchen_with_livingroom', 'ON')"> 
         <i class="glyphicon glyphicon-plus-sign butticon" alt="Step Backward"></i><br>
         <b>Kitchen</b>
         </button>
      </div>
      <div class="col-xs-4 modgrid">
         <button class="sonosbuttontxt_white" style="background-size: contain; background-repeat: no-repeat;background-position: center center" 
            ng-click="sendCmd('sw_sonos_group_bad_with_livingroom', 'ON')">			
         <i class="glyphicon glyphicon-plus-sign butticon" alt="Step Backward"></i><br>
         <b>Bath</b>
         </button>
      </div>
   </div>
</div>

James_Hiscott · July 20, 2017, 12:21pm

Thanks for that, silly question i am sure, but where would i find:

“…/static/sonos/”

I have looked everywhere i can think of in the openhab share or do i need a new folder named “static” in my “openhab2-conf” folder?

Edit:

Found it, its actualy named “html” not “static”. Obviously…

Anyway, now thats sorted, its working well now, thanks.

James

wood007 · July 27, 2017, 10:41am

Hi Tailor. Many thanks for your super custom widget for sonos. I have copied your code and substituted the sonos play1 id for mine. Saved the radio logos and saved my favorites on the sonos app. It is working up to a point. I can not get the current radio station logo to display nor can I change the stations once playing. I know it’s not much to go on but could you help please?

wood007 · July 27, 2017, 9:31pm

Just a quick update. Been messing around with this all day and finally got the stations to work. Now if I can get the playing station logo to appear. Any help?

pahansen · July 27, 2017, 10:35pm

Make sure you have the cover art items set up for the Sonos correctly. These are what determine the current playing art.

/*Current Cover Image*/
Image img_sonos_kitchen_currentalbumart 	"Sonos Play:1 Küche Current Cover" 					(grSonos) {channel="sonos:PLAY1:RINCON_XXXXXXXXXXX8801400:currentalbumart"}
Image img_sonos_livingroom_currentalbumart 	"Sonos Playbar Livingroom Current Cover" 			(grSonos) {channel="sonos:PLAYBAR:RINCON_XXXXXXXXXXX201400:currentalbumart"}
Image img_sonos_bad_currentalbumart 		"Sonos Play:1 Bad Current Cover" 					(grSonos) {channel="sonos:PLAY1:RINCON_XXXXXXXXXXX401400:currentalbumart"}

/*Current Cover Image URL*/
String str_sonos_kitchen_currentalbumarturl 	"Sonos Play:1 Küche Current Cover URL" 					(grSonos) {channel="sonos:PLAY1:RINCON_XXXXXXXXXXX8801400:currentalbumarturl"}
String str_sonos_livingroom_currentalbumarturl 	"Sonos Playbar Livingroom Current Cover URL" 			(grSonos) {channel="sonos:PLAYBAR:RINCON_XXXXXXXXXXX201400:currentalbumarturl"}
String str_sonos_bad_currentalbumarturl 		"Sonos Play:1 Bad Current Cover URL" 					(grSonos) {channel="sonos:PLAY1:RINCON_XXXXXXXXXXX401400:currentalbumarturl"}

wood007 · July 28, 2017, 8:30pm

Thanks Paul for getting back to me. I have checked and double checked those settings and all appears correct. I have habpanel pull the stations URL and get the name of the station, whats playing, etc, but not the current station logo. I have my radio station icons store in /etc/openhab2/html, wondering if its anything to do with this line Quote ???. Screenshot supplied.

wood007 · July 28, 2017, 8:37pm

sorry the quote never cam out. Here it is

tailor · August 7, 2017, 6:29am

Hi Iain

Coudl you please check your OH version? The channel needed for current cover (currentalbumart) is not available in all OH versions. You could also check Paper UI if this channel is available for SONOS things.

wood007 · August 7, 2017, 7:11am

Many thanks for helping. Checked openhab version 2.1 and can see an entry in paper ui. Working my way thru your code and from what I can understand ( very limited knowledge) the image is displayed from the saved png files. These files are numbered 1.png, 2.png etc. To display the images in the lower panel I have to omit the sonos tag ie static/sonos/1.png renamed to static/1.png.

tailor · August 7, 2017, 7:58am

No, local png files are just used for favorites. Current cover comes from an OH item based on currentalbumart channel.

wood007 · August 7, 2017, 9:19am

Right ok. So I taken a screen shot of my PLAY1 thing in Paper UI. Is this configured right?

wood007 · August 7, 2017, 9:49am

I just noticed there is nothing in my list describing currentalbumart. might need to reload sonos binding again?

tailor · August 7, 2017, 9:56am

yes,it looks like currentalbumart is missing.

wood007 · August 7, 2017, 10:01am

Thanks Christian. Will look at this later. Wife calling me to go shopping:sleepy:. Thanks for your help.

skeal · August 7, 2017, 10:07am

You’ve clicked “Show more” on the upper right of the list?

wood007 · August 9, 2017, 8:13pm

Thank you to everyone who contributed to solve my problem. What I did in the end was uninstall the bindings, things, etc and then reinstalled and hey presto there was the album art…Thanks to all. Now going to try flashing a sonoff smart switch

raverlution · August 23, 2017, 9:55am

Thanks - does look nice:)