Sonos Control, Status & Favorites - Template Widget

sonos
Tags: #<Tag:0x00007f014779e178>

(Dark Lite1) #21

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.


(juppe1) #22

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?


(Neil) #23

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>

(Janroarjensen) #26

Hi,
I am new with openhab and habpanel.
Can anyone help me with this?
a step by step wizard?


(Normen) #27

Hello and thank you for this great work :slight_smile:


(Greg) #28

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.


(erick) #29

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”


(Steve Groom) #30

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


(Neil) #31

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. :slight_smile:


(Geri) #32

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!


(Geri) #33

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 …


(Andreas) #34

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.