aterrien / jquery-knob Goto Github PK
View Code? Open in Web Editor NEWNice, downward compatible, touchable, jQuery dial
Home Page: http://anthonyterrien.com/knob/
License: MIT License
Nice, downward compatible, touchable, jQuery dial
Home Page: http://anthonyterrien.com/knob/
License: MIT License
Would like to see the padding currently around the knob removed. This seems to be achievable by changing the arcs in draw from
'ctx.arc( r, r, r-lw, sa, ea, false);'
to
'ctx.arc( r, r, r-(lw/2), sa, ea, false);'
worked on the default theme for me.
It seems that all of the knobs work as expected with the scroll wheel on my mouse, with one exception: the infinite knob will only track up or down to the current "zero" point on the knob. That is, no matter what the current value is, I can only scroll up or down to the top-most position on the knob. I'm not sure whether this is an issue in the plug-in code or in the demo code.
I'm running the demo page in Chrome 18.0.1025.168 m on Windows 7 Pro.
i think that the knob need a suffix such as $ or %
You create a new file for every version. Wouldn't it be better to use branches for that. So you have master branch where everyone can get the latest stable version. And for your version just create a new branch where you can develop new features. When a feature is ready merge it back into the master. Its also better to handle pull requests, cause if you create a new version file and someone works on the old version file it will be hard to merge.
why? this breaks code that doesn't wait till DOM Ready to run. Commenting out the surrounding wrapper or switching to an IIFE works just fine.
I am unable to get the knob working with pageslider ๐ (http://srobbin.com/jquery-plugins/pageslide/)
The jdfiddle is : http://jsfiddle.net/WfqgJ/5/
It works just fine OUTSIDE of the pageslide div but once inside it does not seem to show anything.
I am hoping someone can find the reason since i am unable still to find the cause mysqlf.
Hi,
I set a min value of 0 and a max value of 15, yet I am only able to reach up to 13 when I use the mouse and I am able to reach 16 and -1 when using the scroll wheel. No special settings.
What's going on here?
I love jQuery Knob, but I'm having some issues getting it to step by decimal values. I'd like to be able to select any interval of 0.1 between 0 and 5 (3.4, 4.1, etc..). Any suggestions?
As its very difficult to use the slider accurate with the mouse it would be nice to move the slider with keyboard or mouseWheel
And it pull down my interface. How can I fix it without editing the code?
Knobs demo page was open and running just fine in Firefox....left for an hour came back .... system is in sleep mode...I wake it up and Firefox is in non-responsive mode...attempting to shutdown FF control-alt-del.... non functional, screen's go Black only mouse ponter. I give it some time like 20min, come back still black screens and system still non-responsive.
Basically Locked up my Xeon....Had to do a system reset.
My computer system:
HP Z800 Workstation
My system never locks up unless its fed bad code...
By the way...Love the Knobs. I hope development continues as it is rather sweet.
If you click on the value in the middle of the knob and use your up/right or down/left keys to increment or decrement the value, you are not limited by the minimum or maximum values of the knob.
For instance, on a knob which is ordinarily in the range [0,100], you are able to go way past 0 to -1 and beyond. Likewise you can exceed 100 by incrementing forever.
This issue exists also when you have explicitly set a data-min or data-max.
Couldn't make it changing data attributes...
I am looking to submit the knob value to a database after the user has "turned" it to a number of their choice. Is there a way to extract this number and insert into a database???
Might be a good idea to be able to specify prepend/append a decorator to the displayed value, eg "c", "f", "%", "$".
So a DecoratorChar='x', DecoratorPos='prepend|append'
I want to update the knob using javascript, there's a way to do it?
Hi!
I am trying to modify the code, so i could use the knob as a circular progress bar. I am struggling a bit with animating the drawing of the arc. Do you have any tips how would I go about it?
Should I use the draw hook for that and use setInterval inside that?
There is a problem when you change the value.
You can solve the problem by replacing var p = c.position() by var p = c.offset(). This solution works also with normal knobs without position:absolute.
Hello, I tried to contact you ATerrien but no replies, so I decided to post this here:
I created a jQuery plugin for a countdown and add jQuery-Knob alongside it to complete it. Now I'm going to sell it. I will make sure to add in the "Credits" section of my item that the Knob and animation is from you, not taking any feedback, I'm just using Knob alongside my countdown script. I just don't know if I can use it commercially, so I decided to contact you sir. Please, reply back.
It would be helpful to change the starting angle of the knob. Currently the 'zero' position always appears to start a the top or zero degrees. If we were able to set the 'zero' value to the down position(180 degrees), some setups would make more sense.
Hope that makes sense.
g
Now we have contstant value change when scrolling mouse. (and it's very small)
The idea is to made various step relies on distance from center of knob.
As example - if cursor points to center mouse wheel has min shanging step. When we move cursor to outer edge of knob the step are changing to bigger one. So on edge it would be biggest.
Example here: http://jsfiddle.net/Ve9Nt/
Thank you for the plugin, quick question:
Anyway to turn off the scroll wheel behavior? To be clear, I do not want to disable, I want the UI to not be impacted by a users scroll.
The problem now: if a user scrolls the webpage, and their mouse is ends up over a jQuery-Knob (accidentally as they scroll) the page scrolling stops and the knob UI changes. This is not the desired intent of the user.
I would like to have control over all the font attributes of the knob value label. Size, colour, etc.
Possible?
I'm using the ipod demo and would like to know if there is a way to set the foreground to be larger. It currently takes up only about 8% of the circle, I'd like to be able to customize this size.
I created the knob inputs in the document.ready event (with readonly set at the default false value).
I want to set the readonly option to true for all the .knob objects when i click on a buttton.
The click event is well triggered and bind and I trigger the configure event of the knob as written just after, but i still can click and change the value of the input... is it my code, or just that i can't change the readonly value after the knob's creation ?
$('.knob').trigger('configure',{'readOnly': true});
Waiting for an answer,
Thanks for any help...
It could be work in IE 7 - 8 if you integrate for example explorercanvas.
Looks awesome so far! But music people like myself often prefer knobs that move with just vertical click-and-drag movement (see any PropellerHeads product). When quickly moving around it's easier to be more accurate than tracking your cursor around the circle.
Might be nice to include an option for that. And thanks!
Hi,
I noticed, if I call a jQuery.noConlict() before using Knob, it only shows the input fields. The Knob script doesn't work with noConflict() for me. I also tested it on the example index.html file.
When the page first loads, it shows the value in bright green off to the side and then after a second it jumps to how it should look with the correct color and location. Does this have to do with the placement of the jquery within the script?
Hi. Great knobs!! :)
I'm using them for an audio app and I need to have logarithmic (and maybe exponential) knobs for some parameters.
Can you recommend a way to add a "transfer function" to the knobs so that the angle can be related to the value in a non-linear way? I know my way around js pretty well and It'd be great to merge my changes back into your repo.
Thanks.
With JQuery Mobile 1.2.0, the data-displayInput box can't be positioned properly, other functions work good;
To verify the issue, just add following two lines into the HTML head section
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.css" />
<script src="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.js"></script>
Also tried with previous JQuery Mobile 1.1.1, had the same issue;
Also Tried with more early JQuery Mobile 1.0a4.1, the index.html even didn't show up.
Would be awesome if you could fill the inner circle with a color.
Hi, This is not an issue but, I need a slightly different version of the dial.
Is it possible to display input (current value of dial) on the dial itself?
And can we display min. & max limits at the base. (I'm using semi circle dial; like speedometer).
The knob does not seem to accept inputs from the numeric keypad!
If any attempt to enter more than data-max value is restricted but gauge display dont be updated accordingly.
I can't get even the simple example to work:
<script> $(function() { $(".dial").knob(); } </script>p.s. The functions is not closed, but fixing it doesnt make knob work either.
My Console reports the following:
$(".dial").knob();
TypeError: Object [object Object] has no method 'knob'
I think it would be handy to have the value of the knob to calculate the fgColor or bgColor of the wheel. You could set the "lower" and "upper" colours and the display colour would be calculated.
So bgColorLower=#FF0000 bgColorUpper=#00B200
With the value of the knob at 50 (min=0 max=100) the calculated bgColor would be something like #8E6415
Does that make sense? Great for things like dashboard apps where colour could help convey the meaning of the current value at a glance.
Any plans to implement an infinite knob a la the iPod clickwheel? The more you scroll the faster the value changes, and you could go on forever or until the desired value is reached. A use case for this would be as an alternative to sliders when you don't know what the the min and max values are.
Hi,
jquery-knob looks funky on screens with high pixel density, like Retina displays
I suggest window.devicePixelRatio, when available, to adjust the resolution of the canvas.
When using the infinite scroller, it crashes the android browser after doing a few circles around the turnwheel....
does anybody know why this is happening?
Currently it appears there is only support for integers in the text field. It would be great to be able to set a range that was say from 1 to 3, then set a value 0.1 which would determine the interval. Then the user could select, 1.1, 1.2, 1.3, etc.
Not sure how feasible this is, but could prove useful (especially to me :)).
on android 2.3.3 stock browser, the circle does not show up regardless of data-bgcolor. The arc of selected portion does show up, but the full circle does not.
also it can change back to round shape.
Hard to tell and debug in what conditions it happens.
I am using this JQuery Extension along with JQuery Mobile (1.2.0-alpha.1 mini) on a Blackberry BB10 Dev Device.
Also It happened with JQuery Mobile 1.1.1 sometimes.
Sorry I can't post all but brief code here:
//html page//////////////////////////////
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<title>Page Title</title>
<script src="jquery.min/jquery-1.7.1.min.js"></script>
<link rel="stylesheet" href="jquery.mobile-1.2.0a/jquery.mobile-1.2.0-alpha.1.min.css" />
<script src="jquery.mobile-1.2.0a/jquery.mobile-1.2.0-alpha.1.min.js"></script>
<script src="jquery.knob/jquery.knob.js"></script>
<script type="text/javascript">
touchMove = function(event) {
event.preventDefault();
}
</script>
</head>
<body>
...
<div data-role="page" id="nav_snd_nr" data-position="fixed" ontouchmove="touchMove(event)">
<div data-role="header">
<h1>Send - Noise Reduction</h1>
<a href="#nav_home" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
</div><!-- /header -->
<div data-role="content" id="content">
<div class="ui-grid-a">
<div class="ui-block-a" style="font-size:15px;width:307px">
<div data-role="fieldcontain">
<input type="checkbox" name="ck_snd_nr" id="ck_snd_nr" class="custom" data-theme="b"/>
<label for="ck_snd_nr">Enable Noise Reduction</label>
</div>
<div data-role="fieldcontain">
<input type="checkbox" name="ck_snd_lfr" id="ck_snd_lfr" class="custom" data-theme="b"/>
<label for="ck_snd_lfr">Enable Low Frequency Reconstruction</label>
</div>
<div class="ui-grid-a">
<div class="ui-block-a" style="width:80%"><label>Attenuation(-2500,0)</label></div>
<div class="ui-block-b" style="width:20%"><input type="text" name="snd_enr" id="snd_enr" value="-1234" readonly="readonly" data-mini="true" data-theme="b"/></div>
</div>
<div class="ui-grid-a">
<div class="ui-block-a" style="width:80%"><label>Impulse Smoothing Range(0,600)</label></div>
<div class="ui-block-b" style="width:20%"><input type="text" name="snd_isr" id="snd_isr" value="278" readonly="readonly" data-mini="true" data-theme="b"/></div>
</div>
</div>
<div class="ui-block-b" style="width:230px">
<div>
<input class="knob_snd_nr" data-width="225" data-displayInput=false data-displayPrevious=true value="50" >
</div>
</div>
</div><!-- /grid-a -->
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#nav_snd_aec">Back</a></li>
<li><a href="#nav_snd_wnd">Next</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page -->
...
<embed id="objJSExt" type="application/jnext-scriptable-plugin" width="0" height="0"/>
</body>
</html>
//javascript///////////////////////////////
function do_knob() {
var current_id;
$(".knob").knob({
draw : function () {
if(this.$.data('skin') == 'tron') {
var a = this.angle(this.cv) // Angle
, sa = this.startAngle // Previous start angle
, sat = this.startAngle // Start angle
, ea // Previous end angle
, eat = sat + a // End angle
, r = 1;
this.g.lineWidth = this.lineWidth;
this.o.cursor
&& (sat = eat - 0.3)
&& (eat = eat + 0.3);
if (this.o.displayPrevious) {
ea = this.startAngle + this.angle(this.v);
this.o.cursor
&& (sa = ea - 0.3)
&& (ea = ea + 0.3);
this.g.beginPath();
this.g.strokeStyle = this.pColor;
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sa, ea, false);
this.g.stroke();
}
this.g.beginPath();
this.g.strokeStyle = r ? this.o.fgColor : this.fgColor ;
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sat, eat, false);
this.g.stroke();
this.g.lineWidth = 2;
this.g.beginPath();
this.g.strokeStyle = this.o.fgColor;
this.g.arc( this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false);
this.g.stroke();
return false;
}
}
});
$("input.knob_snd_nr").knob({
change : function (value) {
if (current_id === 'snd_enr') {
$('#snd_enr').val(value);
}
if (current_id === 'snd_isr') {
$('#snd_isr').val(value);
}
}
});
...
$("input.knob_snd_nr").trigger("configure", {'thickness':0.5});
...
$('#snd_enr').bind(
'focus'
, function(e) {
current_id = 'snd_enr';
$("input.knob_snd_nr").trigger("configure", {'min':-2500, 'max':0});
$("input.knob_snd_nr").val($(this).val());
$("input.knob_snd_nr").trigger("change");
}
);
$('#snd_isr').bind(
'focus'
, function(e) {
current_id = 'snd_isr';
$("input.knob_snd_nr").trigger("configure", {'min':0, 'max':600});
$("input.knob_snd_nr").val($(this).val());
$("input.knob_snd_nr").trigger("change");
}
);
...
}
window.onload = function()
{
...
do_knob(); //knob setting
...
};
Hey,
My request is less code more documentations :)
Can you please attach readme file with browser (+version) support? Would be great to work with your tool !
Thanks for your time,
Shak
I got one of the knobs to go to -100, which seems wrong. Screenshot:
http://dl.dropbox.com/u/6736045/-100.png
Aside from that minor issue, this is great!
Hi,
On the demo we can't change the value using the keyboard (i mean typping the exact number), is that a limiation or a missing feature ?
I'd love to have that to replace some by Jquery Knob inputs in my form.
I got jquery-knob to work on regular page loads. However, it fails when integrated with jQuery-Flippy. The HTML is generated correctly, but the canvas isn't drawn. If I execute .knob(), it creates another set of HTML, but the canvas is drawn correctly. Is there a way to call some function to redraw the canvas, but without generating more HTML? I was looking at trigger(), but that doesn't seem to work.
$('.rating-readonly')
.trigger(
'configure',
{
'min': 0,
'max': 10,
'angleOffset': -125,
'angleArc': 250,
'fgColor': '#ABD9B9',
'width': 70,
'height': 70,
'readOnly': true
}
);
i can add suffix or prefix ?
no 70 same as 70%
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.