Help me understand how to add a slider in Template Mode

Apps & Services HABPanel
1

Hi,

So, I’ve just started out with OH2, and the learning curve is steeeeep. However, I’ve managed to get my Pinell radio running and controlled in HabPanel, and I’ve managed to get the Weather Binding running. Now I’m working on an interface for SONOS, but I can’t wrap my head around how to add a volume slider in TEMPLATE mode. The closest I get is to list the current volume by itemValue. I tried also making a slider directly in HabPanel, but then choosing Sonos_Bath_Volume as item doesn’t give me anything or any slider.

I’ve looked at this: http://angular-slider.github.io/angularjs-slider/ but being in newbie mode, I can’t wrap my head around how to get these to control the Volume on my Sonos items…

Any tips are greatly appreciated!

TJ

2

Hello, and welcome!

First off, using the standard slider widget should work. Just to make sure that is set up correctly, make sure you have done the following:

  1. There should be a ‘Thing’ shown in PaperUI for your SONOS device you are trying to control.
  2. On the page for the SONOS Thing, there are a list of “channels” like Volume, Control, etc. Make sure that the item you created is linked to Volume.
  3. On the control page in PaperUI, make sure you can control the volume. If you have an item linked to the volume channel of your SONOS thing, it should show up on the control page, and it should work.

(Sorry if that is a bit redundant, but I remember when I started with OH missing one or more of those steps, and being confused as to why stuff wasn’t working.)

Now, on to HABpanel. If the above steps are done, you should be able to create a standard slider widget, link it to your item, and it should work. If that doesn’t work, you are probably going to have a bad time using the template widget. Once it is working, you can add a slider to a template widget using the following:


<div class="slider-div" ng-init='volumeModel={"name": "volume", "item": "ITEM_NAME", 
                    "floor" : 0, "ceil": 100, "step": 1, "hidelabel" : "true", "hidelimits": "true" }'>
  <widget-slider ng-model="volumeModel"/>
</div>

The basic idea is you are defining a variable, in this case called volumeModel, with whatever settings you would normally set in the settings page of the slider widget itself. You can then create a slider widget, and pass in your variable to config it. Change ITEM_NAME to the name of your item, and you should be set.

Note: You can create an angular-js slider the same way. You can replace “widget-slider” with “rzslider” in the above example. However, doing that will have issues. You will not get updates, so if you change the volume outside of HABpanel, it will still show the old values. I fought that when I was doing a couple custom widgets, and finally just realized it is far better/easier to just use the widget-slider.

If that is the only code in your template, though, it is really easier to just use the standard slider widget. The template widget, as well as custom widgets, allow you to add other html around the widgets, to give you more custom look and feel.

Hope that helps.

3 Likes
3

Thank you very much! I’ll give your explanation a go.

I have managed to get a working play/pause button, so I’m getting the item/reference thing, but I wasn’t ware how to make the slider and reference it to the item. Ideally I would like my slider to be in the box together with the buttons I’m making, but ofcourse a separate slider is also an option.

I’ll give it a shot, thanks!

4

Just a quick update, the above solved my issue - thanks! :slight_smile: