Control Sonos

Apps & Services HABPanel
1

Hi there

I’m trying to crate my first dashboard for controlling Hue lights and Sonos players. So far everything is ok for the lights.

Volume control for Sonos players is also easy but I’m struggling with the simple implementation of any control command (play, pause, stop, skip…).
https://github.com/openhab/openhab/wiki/Sonos-Binding#sonos-commands

Which widget can be used for the commands? Do I need to create a widget on my own with a new template? I tried a button with a specific “Command value”, but nothing happens…

Thank you very much.

2

Don’t know much about habpanel. What I do to control my players in the basic ui /Openhab2 is:

Group  SonosKitchen "Sonos PLAY:5 Kitchen"                  (Sonos)
Player SonosKitchenControl    "Control"     <settings>      (SonosKitchen,SonosControl) { channel="sonos:PLAY5:RINCON_000E5857B06E01400:control"}
Dimmer SonosKitchenVolume     "Volume [%.1f %%]" <video>    (SonosKitchen) { channel="sonos:PLAY5:RINCON_000E5857B06E01400:volume" }

Where SonosKitchenControl can do play/pause/next/prev)

I guess it’s up to habpanel to render the Player widget.

Regards, S

3

I use a button with the control-item of the sonos thing and the command value that i need. PLAY, PAUSE, NEXT, PREV

4

Thanks for your inputs. Single commands work now with a button! But the commands need to be written with UPPER case letters:
PLAY
STOP
…

5

ok, the buttons work, but I’d like to implememt a switch (toggle play/stop).

There’s an example on the wiki pages:

Switch Sonos "Power Sonos" { sonos="[ON:kitchen:play], [OFF:kitchen:stop]" }

But how dioes it work with channels in OH2? The channel of the player is a s follows: sonos:PLAY1:RINCON_5CAAFDC2E58801400

Thank you very much.

6

This should do it. Just create the control item for easier usage.
Put this into a template widget:

<div ng-if="itemValue('Sonos_Speaker_Control')=='PLAY'">
  <button class="btn btn-lg" style="background: red; color: white"
  ng-click="sendCmd('Sonos_Speaker_Control', 'PAUSE')">
  Press to Stop
  </button>
</div>

<div ng-if="itemValue('Sonos_Speaker_Control')=='PAUSE'">
  <button class="btn btn-lg" style="background: green; color: black"
  ng-click="sendCmd('Sonos_Speaker_Control', 'PLAY')">
  Press to Play
  </button>
</div>
7

Hi @skeal, maybe a silly question, but what is a “control item”? Do you have an example?

8

It would be for you:

Player Sonos_Speaker_Control “Sonos Player XXX” {channel=“sonos:PLAY1:RINCON_5CAAFDC2E58801400:control”}

This is an item for your Sonos control. Then Sonos_Speaker_Control is the item used in the template widget i’ve posted before

9

here my version:

do you know how to highlight the active button (ie if it is playing or paused)?

<button style="width: 1.5em; height: 1.5em;
border: 0; color: white; background: #428bca; text-align: center;
padding: 0px; margin: 0px auto; 
font-size: 30px" ng-click="sendCmd('PlayLR', 'PREVIOUS')">
<i class="glyphicon glyphicon-step-backward"></i>
</button>

<button style="width: 1.5em; height: 1.5em;
border: 0; color: white; background: #428bca; text-align: center;
padding: 0px; margin: 0px auto; 
font-size: 30px" ng-click="sendCmd('PlayLR', 'PAUSE')">
<i class="glyphicon glyphicon-pause"></i>
</button>
  
<button style="width: 1.5em; height: 1.5em;
border: 0; color: white; background: #428bca; text-align: center;
padding: 0px; margin: 0px auto; 
font-size: 30px" ng-click="sendCmd('PlayLR', 'PLAY')">
<i class="glyphicon glyphicon-play"></i>
</button>

<button style="width: 1.5em; height: 1.5em;
border: 0; color: white; background: #428bca; text-align: center;
padding: 0px; margin: 0px auto; 
font-size: 30px" ng-click="sendCmd('PlayLR', 'NEXT')">
<i class="glyphicon glyphicon-step-forward"></i>
</button>
</div>
10

Probably something like:

<button style="width: 1.5em; height: 1.5em;
border: 0; color: white; text-align: center;
padding: 0px; margin: 0px auto; 
font-size: 30px"
        ng-style="{ 'background': itemValue('PlayLR')==='PAUSE'?'#ff0000':'#428bca' }"
        ng-click="sendCmd('PlayLR', 'PAUSE')">
<i class="glyphicon glyphicon-pause"></i>
</button>
  
<button style="width: 1.5em; height: 1.5em;
border: 0; color: white; text-align: center;
padding: 0px; margin: 0px auto; 
font-size: 30px"
        ng-style="{ 'background': itemValue('PlayLR')==='PLAY'?'#ff0000':'#428bca' }"
        ng-click="sendCmd('PlayLR', 'PLAY')">
<i class="glyphicon glyphicon-play"></i>
</button>

would turn the buttons red (#ff0000).