Please help! custom knob widget N/A everytime get refreshed & cannot update value!

Hi everybody,I have 2 questions and I really hope someone can help me:

  1. I created this knob widget by using template widget:
<div ng-init="knob = {
                    value: itemValue(SetTemp_FF_Office ),
                    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(SetTemp_FF_Office , knob.value)"/>
      </div>

This knob widget can send value properly whenever I clicked on it (on Habpanel side). But when I turn into classic UI and change the value, the HABpanel can not update the new value, it only shows up the old one. For example:
my .item:

Number SetTemp_GF_Living 	"Livingroom Setpoint Temp. [%.1f °C]"

my .sitemap:

Setpoint item=SetTemp_GF_Living minValue=21 maxValue=35 step=1

On habpanel side, I click to change the range of value and the corresponding item on classic UI updates its value immediately (exp: 33 celcius)
But when I increase/decrease the value from classic UI:


Only the value on classic UI changes, the value on HABpanel still remains (30 celcius - this is the previous value I clicked on HABpanel UI)
How can I fix that? Please show me how

  1. Beside above problem, whenever I refresh habpanel UI, all the knob widgets’ values become NULL or N/A. It’s very frustrating, please show me how to fix it?

Hello? Can anyone help?

Pretty sure you can’t use ui-knob directly, you have to include a widget-knob like @scottr did here:

Also you have to specify a fixed size in pixels like he did (width:100px) on the grand-grandparent div or it simply won’t show, that’s a limitation of the way the widget calculate sizes.

@ysc thanks for your reply
The knob widget from @scottr works like I expected, but its appearance is little bit ugly.
Can you provide some more parameters so that I can customize the knob widget such as these:
(using widget-knob ofcourse)
https://radmie.github.io/ng-knob/
Scotts only provides us the knob with several option like: item":“your_control”,“type”:“knob”,“floor”:0,“ceil”:100,“step”:1, I want to know more option

Easiest way to figure it out (apart from looking at the knob widget’s controller code) is to use a separate standard knob widget and tweak the settings with the dialog, then go to Advanced Settings (gear icon in the drawer) > Edit the local panel configuration, find your widget back with its name or whatever and see how it translates to JSON - options like type, col, row, sizeX, sizeY can be left out.

Oh thanks for your suggestion I am now able to customize the knob widget as I want
But the only problem remaining is that the number of dots scale are too many and I don’t see any parameters allow me to change the number of dots displayed. Can you help me how to change this? I want to display less dots than it should:

Well, looks like I overlooked ui-knob’s scale.quantity (and a couple others) so it cannot be defined with the widget’s options. I’ll add it.

1 Like

Oh thanks, very happy to hear that
I hope you could share as soon as possible
Might be you want to look at widget-slider also, I want to customize it like one of these:

http://angular-slider.github.io/angularjs-slider/

but it lacks quite a lot of parameters. I hope you could also develop this widget so that it can be more flexible!

Hi,

is there any news on how to include a widget-knob in a template? I tried the workaroundas described by @scottr but the preview stays empty.

Thanks a lot and best regards,
Andreas

brother,
can you share the code for the above knob?