Knob widget inside a custom widget

Apps & Services HABPanel
1

I was trying to use a knob widget as part of a custom widget. I put the following code in my custom widget:

<div ng-init='volume={"name": "Volume", "item": "Receiver_Zone1_Volume" }'>
  <widget-knob ng-model="volume"/>
</div>

When I preview the widget, I get nothing but a blank widget. In chrome, I ran an inspect, and noticed the following in the console:

Error: <svg> attribute width: A negative value is not valid. ("-20") @ vendor.js:358
Error: <svg> attribute height: A negative value is not valid. ("-20") @ vendor.js: 358

Looking at the inspect window, I see the area for the ui-knob, which contains an <svg> with a specified width and height of -20.

I have looked through the code as much as I am able, and I don’t see any way to specify the width and height. I can (and did) specify the size, but that had no effect.

So my question is, has anyone used a knob widget inside a template or custom widget? If so, what did I miss?

2

Hi Tim,

I have run into the same problem as you when trying to use a knob widget inside a custom widget, so far I have been unable to find a solution.

I have however been able to use a knob inside a custom widget for my Sonos widget using the Angular.js knob directive
The only problem I am having with this directive is that although it is sending updates to the item value on ngclick the status of the knob value is not updating when changed from an external control ie Sonos app
I believe this is a similar issue to what you were having with the rzslider directive in your Ecobee widget.

I have only just started learning HTML and CSS for the purpose of creating my own widgets so I have very little experience in troubleshooting the problem, hopefully someone can help us solve the issue.

For what it’s worth here is the code I am using for the knob control for volume in my Sonos widget.

<div ng-init="knob = {
                    value: itemValue(config.vol_item),
                    options: {
                      scale: {
                        enabled: true,
                        type: 'dots',
                        color: 'gray',
                        width: 2,
                        spaceWidth: 10,
                        quantity: 10,
                        height: 8
                      },
                      skin: {
                        type:	'tron',
                        width:	5,
                        color: 'orange',
                        spaceWidth: 5
                      },
                      trackWidth: 30,
                      barWidth: 30,
                      step: 1,
                      startAngle: 20,
                      endAngle: 340,
                      trackColor: 'rgba(52,152,219,.1)',
                      barColor: 'rgba(52,152,219,.5)',
                      textColor: 'white',
                      subText: {
                        enabled: true,
                        text: 'Volume',
                        color: 'gray',
                        font: 'auto'
                    },
                    }
                   };">
      </div>
      <div>
          <ui-knob value="knob.value" options="knob.options" ng-click="sendCmd(config.vol_item, knob.value)"/>
      </div>

Cheers,

Dom

3

Thanks for the response. I tried doing the same thing you did, with about the same level of success. It does work, but like yours, it doesn’t update properly. With my success with the slider, I was hoping I could figure this out, but so far, no luck. Fortunately (?) I have moved on to some other things I can’t figure out, so for now I am just using stand alone knob widgets with a layout I don’t like while I work on other things.

I am trying to create a custom widget to control my stereo. I have an Onkyo receiver, which has a great OH2 binding. In PaperUI, there are controls for play, stop, skip forward, etc that work, but I am not sure what commands to put into buttons to duplicate them. I am having lots of fun using the chrome developer tools trying to capture the commands in PaperUI, without much success yet. Once I get that worked out, I will circle back to this. If I get it worked out, I’ll post an update, but it probably wont be soon.

4

Just a stupid question! How can I change this code to adapt to my system. I tried many way but my corresponding item doesn’t change. Also, if I want to change the min value and the max value of this knob widget, what should I do?

5

Where it reads

<ui-knob value="knob.value" options="knob.options" ng-click="sendCmd(config.vol_item, knob.value)"/>

Change the item reference to your item name you have setup in the settings tab of the custom widget eg config.your_item
After you have saved and added the widget to your dashboard, edit the widget and assign the item to the widget control. As stated in my previous post though, the status will not update properly, still working on a solution for that.
To change the min and max values of the knob add those options to the CSS so it looks like this

<div ng-init="knob = {
                    value: itemValue(config.vol_item),
                    options: {
                      scale: {
                        enabled: true,
                        type: 'dots',
                        color: 'gray',
                        width: 2,
                        spaceWidth: 10,
                        quantity: 10,
                        height: 8
                      },
                      skin: {
                        type:	'tron',
                        width:	5,
                        color: 'orange',
                        spaceWidth: 5
                      },
                      trackWidth: 30,
                      barWidth: 30,
                      step: 1,
                      min: 0,
                      max:100,
                      startAngle: 20,
                      endAngle: 340,
                      trackColor: 'rgba(52,152,219,.1)',
                      barColor: 'rgba(52,152,219,.5)',
                      textColor: 'white',
                      subText: {
                        enabled: true,
                        text: 'Volume',
                        color: 'gray',
                        font: 'auto'
                    },
                    }
                   };">
      </div>

For more info on what options can be changed go to the following link

https://radmie.github.io/ng-knob/

6

Oh thanks it works perfectly but there’s a small problem
I click on the knob widget in HABpanel and the corresponding item on classic UI can be updated consequently. But if I change the item’s value in classic UI, the knob widget seems like doesn’t respond, please explain why?
One more thing, whenever I refresh HABpanel, your knob widget displays N/A. Is it a bug?
I hope you could fix this! Thanks

7

Err
Can anybody give me a hint

8

How can I set a 0 decimal the knob.value?
I use a float but %0f seems does not work as in other case.

Thanks for your help

Lorenzo
PS: for Nguy, I do not have your problem, my knob has the same classic UI value

9

Hi Dominic

I also like to integrate a knob into a custom widget. Is there any progress concerning the value not updating?

Thank you.

EDIT:
I was able to implement a working knob based on this thread:
https://community.openhab.org/t/please-help-custom-knob-widget-n-a-everytime-get-refreshed-cannot-update-value/20624

Unbenannt3

<div ng-init='battery={"name": "Batterie",
                "sizeX": 2,
                "sizeY": 2,
                "item": "dim_sonos_kitchen_volume",
                "type": "knob",
                "row": 0,
                "col": 10,
                "floor": 0,
                "ceil": 100,
                "step": 1,
                "unit": "%",
                "startAngle": -150,
                "endAngle": 150,
                "readOnly": true,
                "subTextEnabled": true,
                "scaleEnabled": false,
                "scaleType": "lines",
                "skinType": "tron",
                "skinWidth": null,
                "skinSpaceWidth": null,
                "rangesEnabled": true,
                "rangesTextColorMatching": true,
                "ranges": [
                    {
                        "min": 20,
                        "max": 70,
                        "barColor": "#FFCC00",
                        "$$hashKey": "object:3700"
                    },
                    {
                        "min": 0,
                        "max": 20,
                        "barColor": "#FF0000",
                        "$$hashKey": "object:3701"
                    },
                    {
                        "min": 70,
                        "max": 100,
                        "barColor": "#006600",
                        "$$hashKey": "object:3702"
                    }
                ],
                "$$hashKey": "object:183"
            }'>
   <div style="width:200px">
      <div>
         <div><widget-knob ng-model="battery" /></div>
      </div>
  </div>
</div>
1 Like
10

Note, the $$hashKey properties are automatically added by AngularJS to identify objects in an array, you can (and should) remove them from your model.

11

Hi,

IÂŽd like to combine the ng-knob with some svg-elements to archieve something similar to this: https://www.npmjs.com/package/ng2-knob

Is it possible to change the default HABPanel knob svg to a custom one? I get it managed to show the background-svg in the same size as the ng-knob, but the foreground knob canÂŽt be adjusted, or at least I donÂŽt know how.

I donÂŽt need a final soloution. It would be enough to know, if itÂŽs possible or not. :slight_smile:

Thanks!

12

Ok so I now also fight with the knob in a custom template widget and while I managed to place it there. Its behavior is quite strange. I wanted to have a gauge of the netto power in the house (solar generation - current load) and that can reach values from -7000W till 7000W but that is not predictable, can spike to 11k even if there is a super strong shine after the rain that cooled solar panels. If the knob widget gets a single value outside the floor celing range it will display it and then die 
 (stop updating the values)

What is the way to access the knob code and fix that and maybe some other things?
I’d love to chage the behaviour that the value bar for negative values is going left not right.
The code is already there as if you send a value below the “floor” it will go left below the start angle but then die
 die 
 die
 as I mentioned before.

TIA