radmie / ng-knob Goto Github PK
View Code? Open in Web Editor NEWAngular.js directive to Knob component powered by d3.js (without jQuery)
Home Page: http://radmie.github.io/ng-knob
License: MIT License
Angular.js directive to Knob component powered by d3.js (without jQuery)
Home Page: http://radmie.github.io/ng-knob
License: MIT License
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.
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..
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?
Does this directive support AngularJS 2 beta?
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?
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);
}
};
}
In the comments say that: "touch, click and drag events implemented". How can i use those events
Thxs.
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 ...
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™?
Ios safari, page scrolls when interacting with knobs.
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/
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.
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.
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 ?
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.
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
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
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);
});
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.
initialization fails, the bar does not show well.
example
what could be the problem?
thanks!
Hi,
I need to use readonly as a attribute not in the $scope.options.
what can i do?
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 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?
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
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!
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!
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>
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.
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 ?
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
My bad, working properly
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?
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.
The value is displayed in the following format: "90.5", but I would like to display as follows: "90.
,5". Can you help me?
I would expect, that the value is either
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
I'm very happy using ng-knob 👍
but I would like you to make some improvements.
Features
Fix
I'm Brazilian, so my English is kinda bad. :)
Thanks
When trying to use the latest version of d3, ng-knob does not work..
页面加载第一次请求数据回来后现在,图表显示不正确,而且概率比较高,
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.