I am trying to fetch value from server but its sometimes not updating knob

$scope.value= 0;
$http.post(link).then(function (res){

$timeout(function() {
$scope.value = res.value;
},1000);

});

Hi,

I would like to use the ng-knob as a zero-based knob.
For example, I have a knob which has a min/max of -100/100. I would like starting point to be zero.
Any positive values would be on the right of the mid-point and any negative values will be on the left.

Usage example: Grid power consumption.
If I am pushing power back into the grid (solar panels) it should swing on positive side and if I am using power it should be on the negative side.

Hoping someone brainier than I could help implement this?

When trying to use the latest version of d3, ng-knob does not work..

No matter what angles i setup, it will not behave like a speedometer, which is what im trying to show using the ng-knob directive.

1. let's have a knob with a defined maximum value (options.max)
2. pass a value that's less or equal to the maximum value
3. knob updates
4. pass a value that's greater than the defined maximum
5. knob updates to this value, but successive updates don't do anything (knob is frozen - doesn't react to changes to the value)

I would expect, that the value is either

• displayed regardless of the maximum value
• OR truncated to the maximum value
  and the arc shouldn't grow beyond the defined angles.

Here's a simple project that demonstrates this (it updates with a timer so just wait for it to freeze):
https://github.com/jakubhlavaty/ng-knob-bug

• run sample with npm (see readme)
• dependencies managed with bower (using ng-knob 0.1.3)

Does this directive support AngularJS 2 beta?

This is a really solid component. I was looking for a dial / knob type of control for selecting a heading (from 0 - 360). The control allows it, but it'd represent 270 not as a needle or arrow pointing to the left, but as a radial chart. I essentially don't want to render the selected track, but do want to render something (a line or arrow) at the value's location on the track.

I am attempting to use the ng-knob directive in a ng-repeat, this works fine with initial options and values, but when updating the options for max within a ng-repeat the chart does not update/redraw.

Options work fine when the knob directive is outside of a ng-repeat.

Is there a way of getting ng-knob to reevaluate the options within a ng-repeat?

页面加载第一次请求数据回来后现在，图表显示不正确，而且概率比较高，

I was trying to insert text after the property "subText.text". In this case you can see that the value of this property is 'restantes' but if I want to add additional text that will not move and will stick to it, no matter the screen size I had to write a directive as follows. My question here...is there any standard way to do this?

I had the jsfiddle that shows that it works !! but is not a testable. I hope you guys let me know if my question is wrong and if it is please provide proper feedback.

export function KnobFormat($injector: any): angular.IDirective {

    return {
        restrict: 'A',
        link: function(scope: any, element: any, attrs: any){

            var svg = element.find('svg')[0];
            var $jq = angular.element; 
            var rows = $jq(element).find('text');
            var $filter = $injector.get('$filter')('filter');

            let pattern = {id: ''};
            var elements = $filter(rows, pattern, (a: any, e: any) => {  return (a !== 'text') ? true : false; });

            $jq(elements).css('font-size', '14px');
            $jq(elements).css('dominant-baseline', 'central');



            var text = svg.getElementsByClassName('sub-text')[0];
           

            var transform =  text.getAttribute('transform');
            var index1 = transform.indexOf('(') + 1;
            var index2 = transform.indexOf(')');
            var vals = transform.substring(index1, index2).split(',').map((n: string) => { return parseInt(n); });
            var x = vals[0];
            var y = vals[1] + 18;
            
            var newElement = document.createElementNS('http://www.w3.org/2000/svg', 'text');
            newElement.setAttribute('id', 'knob-text');
            newElement.setAttribute('class', 'sub-text');
            newElement.setAttribute('text-anchor', 'middle');
            newElement.setAttribute('font-size', 'bold italic large serifpx');

            var translate = 'translate(' + x + ',' + y + ')';
            newElement.setAttribute('transform', translate);
            newElement.style.fontSize = '12px';
            newElement.style.dominantBaseline = 'central';

            newElement.textContent = attrs.note;

            text.insertAdjacentElement('afterend', newElement);
        }
    };
}

Thanks for writing this great module! It's very easy to use.

i am working on a dashboard using ng-knob and it works well. i love the animation feature but since the update interval is quite frequent, i would prefer having the trackbar move between different value instead of redrawing it from zero on each update.

Thanks again. =D

<ng-knob value="vm.value" options="vm.options"></ng-knob>

this.value = 6.5; this.options = { skin: { type: 'tron' } }

Ios safari, page scrolls when interacting with knobs.

The value is displayed in the following format: "90.5", but I would like to display as follows: "90.
,5". Can you help me?

Hey,
I really like this component, very well done!
I was wondering if there is a way to have the barCap (that I made round) with a border of a different color? I'd like to have a circle of a different color to make it easier for the users of my app to know they can click and drag the bar.
Thank you!

Hello !

Thanks for this very good tool.
I use it in all my applications.

I plug my own directive knob. To be responsive i use a ratio during the link directive i am able to know the screen size. So i have a false responsive behavior. Just for the initialisation.

My question : is it possible to have a responsive behavior for the size knob object with css ?
i would like this kind of behavior :

.knob {
data-width: 50;
data-height: 50;
}
....max-width 480px {
data-width:35;
data-height:35;
}

Thanks for your attention, have a nice day.
alien from south of france where the english is not fluent.

How much effort would it take to make this work with just d3.js on an otherwise static web-page? the use-case I'm thinking of just requires knobs for manipulating a data visualization, nothing more, and I don't know that it would be worth adding angular and dependencies just for that functionality.

The knob moves to 0 after rotating it to the max value. Is there a way to stop rotating the knob after reaching the maximum or minimum value?

initialization fails, the bar does not show well.
example
what could be the problem?

thanks!

Hello,

First of all, many thanks for this great piece of software. In fact this is not a "problem" or "error" report since the knob control works just fine, but, what about a possible control's "responsive" option? Too much complicated?

Anyway thanks very much for ng-knob.

Can we add an option/property to make it possible to update the value from a input/textbox?

Similar to this http://anthonyterrien.com/demo/knob/

Would that be possible or do I need to add my own textbox and update the value based on textbox value?

It does has a displayInput property, but it just hide/show the value. But since it use svg I am not sure if it should have a input outside or maybe use foreignObject http://stackoverflow.com/a/5975783

http://caniuse.com/#search=foreignObject

he also refer to this http://www.carto.net/papers/svg/gui/textbox/

Hello here is my html

<ui-knob id="mainKnob" value="value" options="options1"></ui-knob>

and js

.controller('AwardCtrl', function ($scope, getMembership){
  $scope.value = 10;

// called service
  getMembership.getMembership(userid).then(function(data) { 
       $scope.data = data; 
       $scope.value = parseInt(data.membership);
  });

  $scope.options1 = {
                animate : { enabled: true, duration: 1500, ease: 'bounce' },
                readOnly: true,
                size: 260,
                max: 31,
                subText: {
                    enabled: true,
                    text: 'DAYS LEFT',
                    color: '#f2f2f2;',
                    font: 'auto'
                },
                trackWidth: 55,
                barWidth: 30,
                trackColor: '#e6e6e6',
                barColor: '#81d8cf',
                dynamicOptions: true
            } 
})

But my knob is not updating after $scope.value has changed.

Hi,

im getting ngKnob: angular is not on the window! error how to fix this..

First, tanks for the work, it's really nice.
It would be very nice to be able to use function (with value as argument) for all color attributes.
This way, the color could vary in function of the value.

Hi, amazing job on this control! Quick question - Would like to be able to watch value, and change options but not have it re-draw, merge all the options... would like to change colors on the fly.
thanks Marty

For cases when displayInput: false, it would be good to have the subText.text visible. Of course, given that when subText.enabled: true. This is when the user doesn't want to see the value but just the text.

Hello, you can change subtext value from html ?

Example ...

<ui-knob value="value" options="options" subtext="'sample'" ></ui-knob>
or
<ui-knob value="value" options="{ baseoptions: options, subtext: 'sample' }" ></ui-knob>

thanks ...

Hi,

We're working on a tablet app with a circular slider. When modify the value, it works fine, but the next time you touch the screen, the slider value is modified again. It seems to use the y coordinate of the location you touched to assign the new value. This only happens on second touch.

Any idea where this comes from ?

Bower, is not able to use the latest version of the code because the release marked is 0.1.3, However, it looks like you have made changes, as you bumped to .1.4. Can you update this ?

Will be great if we can include tooltip to Arc with some text or value when mouse hover on it.

I want to set the value of the knob to a specific value (received over a websocket) from a javascript function.
Is it possible? And if yes, How?

I'm very happy using ng-knob 👍
but I would like you to make some improvements.

Features

• Animate value like a count when value changed
• Animate path circle when value changed

Fix

• barCar causes some errors

I'm Brazilian, so my English is kinda bad. :)

Thanks

Hello,

firstly, ng-knob is very nice component. Works great. My question is, are you considering to make "step" other type then integer?Unfortunately, I need to use step 0.5.

Thank you

Hi,
I need to use readonly as a attribute not in the $scope.options.
what can i do?

I am using ng-knob in my project but I want to update knob-dial value on mouse wheel.
Like jQuery Knob when mouse wheel up then increase ng-knob-dial value and when down then decrease ng-knob-dial value

So, is it possible to update knob-dial value on mouse wheel up and down?

Also, is it possible to edit dial value by typing I mean by keyboard events?

I would like to use this control to emulate a traditional gauge starting at say 7 and ending at 5 O'clock on the face. There were no examples to do that, but setting startAngle to a negative value appeared to work. However, changing the knob's value seems to have issues when dragging past 0, or the left side of the widget.

For instance:
startAngle: -160
endAngle: 160

Am I usingItWrong™?

After returning data from server request, the color of the knob cannot be updated as like as given image link http://screencast.com/t/Ueeonnx4 . My code is given below:

JavaScript Code

$scope.options = { /* knob option */   };

$http
   .get(url)
   .then(function(res) {
      $scope.details = res.data.rating   
   }, function(err) {});

html code

<ui-knob value="details" options="options "></ui-knob>

I would like to create a knob with a startAngle of about 210, which increases in value clockwise, and has an endAngle of about 150.

In other words, I'm basically trying to create the upside-down version of the "Angles" example on the demo page.

But, no matter what I do, I can't get ng-knob to draw a knob that crosses the 0° mark. Whenever I specify an endAngle that's less than the startAngle, I just get a knob with a narrow wedge that increases in value counterclockwise.

Could this be addressed by adding a spinDirection option, with possible values of "clockwise" and "counterclockwise"?

Or, alternately, with an angleBehavior option, with possible values of "useShortArc" and "useLongArc" (indicating whether to use the shorter of the two possible paths between startAngle and endAngle, or the longer)?

Great plugin, aside from this small detail!

My bad, working properly

Hello,

I'm wondering how to use the knobs to call a js function? I implemented the knobs to my design and all looks nice but I'm not able to call a function on changing the knob.
What works is ng-mousemove="...()" but this calls my function every time I move the mouse over the knob.
I just want to call my function when the knob value got changed by moving the knob.

Is there a way to make this possible?
Are there any other ways to readout the knob value? For now I don't see the uasge of these knobs when I'm not able to work with the values...

Thanks in advance.
Bernhard

In the comments say that: "touch, click and drag events implemented". How can i use those events
Thxs.