From f17866efc35b181735c177421e85278f66118cb3 Mon Sep 17 00:00:00 2001
From: brunjo
Date: Sun, 27 May 2012 15:48:32 +0300
Subject: [PATCH 01/83] change input value with numpad and position:absolute
problem fixed
---
js/jquery.knob.js | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/js/jquery.knob.js b/js/jquery.knob.js
index 6ef1d48..89933dd 100644
--- a/js/jquery.knob.js
+++ b/js/jquery.knob.js
@@ -162,7 +162,7 @@ $(function () {
this.startDrag = function (e) {
- var p = c.position()
+ var p = c.offset()
,$doc = $(document);
x = p.left + (opt.width / 2);
@@ -360,6 +360,7 @@ $(function () {
"keydown"
,function (e) {
var kc = e.keyCode;
+ if (kc >= 96 && kc <= 105) kc -= 48; //numpad
kval = parseInt(String.fromCharCode(kc));
if (isNaN(kval)) {
From b60a6f29bc4e2ca67982e62f9f22419e696dfe07 Mon Sep 17 00:00:00 2001
From: eskimoblood
Date: Sun, 27 May 2012 15:34:27 +0200
Subject: [PATCH 02/83] adding a way to set the 0 position of the knob, fixing
issue #26
---
README.md | 1 +
index.html | 3 ++-
js/jquery.knob.js | 9 +++++++--
3 files changed, 10 insertions(+), 3 deletions(-)
diff --git a/README.md b/README.md
index 56e2bf9..b79a9b5 100644
--- a/README.md
+++ b/README.md
@@ -37,6 +37,7 @@ Behaviors :
* max : max value || default=100.
* stopper : stop at 0 & 100 on keydown/mousewheel || default=true.
* readOnly : disable input and events.
+* angleOffset: change the 0 position of the knob (in degree), || default=0.
UI :
* cursor : display mode "cursor" | default=gauge.
diff --git a/index.html b/index.html
index 768d1e5..c55d500 100644
--- a/index.html
+++ b/index.html
@@ -126,8 +126,9 @@
data-min="-100"
data-cgColor="#A9EFFD"
data-displayPrevious=true
+data-angleOffset="90"
-
+
diff --git a/js/jquery.knob.js b/js/jquery.knob.js
index 6ef1d48..7eaca08 100644
--- a/js/jquery.knob.js
+++ b/js/jquery.knob.js
@@ -19,7 +19,7 @@ $(function () {
var v = null
,ctx = c[0].getContext("2d")
- ,PI2 = 2*Math.PI
+ ,PI2 = 2 * Math.PI
,mx ,my ,x ,y
,self = this;
@@ -55,7 +55,7 @@ $(function () {
this.draw = function (nv) {
var a = this.angle(nv) // Angle
- ,sa = 1.5 * Math.PI // Previous start angle
+ ,sa = 1.5 * Math.PI + opt.angleOffset // Previous start angle
,sat = sa // Start angle
,ea = sa + this.angle(v) // Previous end angle
,eat = sat + a // End angle
@@ -242,6 +242,7 @@ $(function () {
,'tickWidth' : $this.data('tickWidth') || 0.02
,'tickColorizeValues' : $this.data('tickColorizeValues') || true
,'skin' : $this.data('skin') || 'default'
+ ,'angleOffset': degreeToRadians($this.data('angleoffset'))
// Hooks
,'draw' :
@@ -418,4 +419,8 @@ $(function () {
}
).parent();
};
+
+ function degreeToRadians (angle) {
+ return $.isNumeric(angle) ? angle * Math.PI / 180 : 0;
+ }
});
\ No newline at end of file
From 31c003641d1acb7d97585fa433c0eba3ac495164 Mon Sep 17 00:00:00 2001
From: aterrien
Date: Mon, 28 May 2012 22:48:53 +0200
Subject: [PATCH 03/83] fix a minor bug with angleOffset
---
js/jquery.knob.js | 24 ++++++++++++------------
1 file changed, 12 insertions(+), 12 deletions(-)
diff --git a/js/jquery.knob.js b/js/jquery.knob.js
index 7eaca08..4cf6a90 100644
--- a/js/jquery.knob.js
+++ b/js/jquery.knob.js
@@ -35,7 +35,7 @@ $(function () {
this.draw(nv);
} else {
var b, a;
- b = a = Math.atan2(mx - x, -(my - y - opt.width / 2));
+ b = a = Math.atan2(mx - x, -(my - y - opt.width / 2)) - opt.angleOffset;
(a < 0) && (b = a + PI2);
nv = Math.round(b * (opt.max - opt.min) / PI2) + opt.min;
return (nv > opt.max) ? opt.max : nv;
@@ -54,13 +54,13 @@ $(function () {
this.draw = function (nv) {
- var a = this.angle(nv) // Angle
- ,sa = 1.5 * Math.PI + opt.angleOffset // Previous start angle
- ,sat = sa // Start angle
- ,ea = sa + this.angle(v) // Previous end angle
- ,eat = sat + a // End angle
- ,r = opt.width / 2 // Radius
- ,lw = r * opt.thickness // Line width
+ var a = this.angle(nv) // Angle
+ ,sa = 1.5 * Math.PI + opt.angleOffset // Previous start angle
+ ,sat = sa // Start angle
+ ,ea = sa + this.angle(v) // Previous end angle
+ ,eat = sat + a // End angle
+ ,r = opt.width / 2 // Radius
+ ,lw = r * opt.thickness // Line width
,cgcolor = Dial.getCgColor(opt.cgColor)
,tick
;
@@ -242,7 +242,7 @@ $(function () {
,'tickWidth' : $this.data('tickWidth') || 0.02
,'tickColorizeValues' : $this.data('tickColorizeValues') || true
,'skin' : $this.data('skin') || 'default'
- ,'angleOffset': degreeToRadians($this.data('angleoffset'))
+ ,'angleOffset': degreeToRadians($this.data('angleoffset'))
// Hooks
,'draw' :
@@ -420,7 +420,7 @@ $(function () {
).parent();
};
- function degreeToRadians (angle) {
- return $.isNumeric(angle) ? angle * Math.PI / 180 : 0;
- }
+ function degreeToRadians (angle) {
+ return $.isNumeric(angle) ? angle * Math.PI / 180 : 0;
+ }
});
\ No newline at end of file
From 0a883f3595620cef592ee804787219c376ed2403 Mon Sep 17 00:00:00 2001
From: aterrien
Date: Sun, 15 Jul 2012 23:49:31 +0200
Subject: [PATCH 04/83] global refactoring / optimizations / fix #36
- refactoring of hooks
- angleOffset, angleArc (fix #36)
- canvas pre-rendering
- (lot of) optimizations
- 5+ digit support
- improved positioning of the input
- Knob is now part of Kontrol ^^
- tron skin removed
- ticks removed
---
README.md | 87 ++---
index.html | 284 ++++++++------
js/jquery.knob.js | 927 ++++++++++++++++++++++++++++------------------
3 files changed, 791 insertions(+), 507 deletions(-)
diff --git a/README.md b/README.md
index b79a9b5..c8a4c3f 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@ jQuery Knob
=============
- canvas based ; no png or jpg sprites.
-- touch, mousewheel, keyboard events implemented.
+- touch, mouse and mousewheel, keyboard events implemented.
- downward compatible ; overloads an input element.
Example
@@ -33,11 +33,12 @@ Options are provided as attributes 'data-option':
The following options are supported :
Behaviors :
-* min : min value || default=0.
-* max : max value || default=100.
-* stopper : stop at 0 & 100 on keydown/mousewheel || default=true.
-* readOnly : disable input and events.
-* angleOffset: change the 0 position of the knob (in degree), || default=0.
+* min : min value | default=0.
+* max : max value | default=100.
+* angleOffset : starting angle in degrees | default=0.
+* angleArc : arc size in degrees | default=360.
+* stopper : stop at min & max on keydown/mousewheel | default=true.
+* readOnly : disable input and events | default=false.
UI :
* cursor : display mode "cursor" | default=gauge.
@@ -47,19 +48,13 @@ UI :
* displayPrevious : default=false | true=displays the previous value with transparency.
* fgColor : foreground color.
* bgColor : background color.
-* ticks : number of ticks | 0=disable.
-* tickColor.
-* tickLength.
-* tickWidth.
-* tickColorizeValues : colorize ticks.
-* skin : default | "tron".
Hooks
-------
@@ -67,7 +62,6 @@ Hooks
Parameters :
+ value : int, current value
- + input : jQuery element, input element
* 'change' : executed at each change of the value
@@ -76,11 +70,16 @@ Hooks
* 'draw' : when drawing the canvas
- Parameters :
- + angle : computed angle
- + value : current value
- + opt : plugin options
- + context : Canvas context 2d
+ Context :
+ - this.g : canvas context 2D (see Canvas documentation)
+ - this.$ : jQuery wrapped element
+ - this.o : options
+ - this.i : input
+ - ... console.log(this);
+
+* 'cancel' : triggered on [esc] keydown
+
+The scope (this) of each hook function is the current Knob instance (refer to the demo code).
Example
-------
@@ -88,13 +87,9 @@ Example
@@ -102,31 +97,29 @@ Dynamically configure
-------
-Supported browser
+Set the value
-------
-Tested on Chrome, Safari, Firefox, IE 9.0.
+
-Revision 1.1.2
--------
-- removed padding around the wheel in default skin / default thickness = 0.35.
-- 'configure' event.
-- added 'displayPrevious' option.
-- change color cgColor / 'displayPrevious' must be true.
-- escape keycode supported while changing = restore the current value.
-- tab keycode supported.
-- added 'stopper'.
-- bugfix init when 'value' attribute is not defined.
-- JSLint qa.
-- infinite mode demo.
-
-Revision 1.1.1
+Supported browser
-------
-- keyboard/mousewheel control refactoring / acceleration.
-- bugfix no keyboard or mousewheel when readonly.
-- bugfix min/max can be exceeded.
-- hooks / keyboard events.
+Tested on Chrome, Safari, Firefox, IE 9.0.
\ No newline at end of file
diff --git a/index.html b/index.html
index c55d500..f3e6785 100644
--- a/index.html
+++ b/index.html
@@ -6,142 +6,203 @@
-
- Knob demo
- 
+
+
jQuery Knob
-
+
+
Nice, downward compatible, touchable, jQuery dial. 
+
* implemented interactions : mouse click and wheel mouse, keyboard (on focus) and fingers (touch events)
+
+
-
+
-
+
-
+
-
+
-
+
-
-
Ticks
-
-data-cursor=true
-data-skin="tron"
-data-ticks="8"
-
-
+
+
× Overloaded 'draw' method
+
+
+
+
+ data-width="75"
+ data-fgColor="#ffec03"
+ data-skin="tron"
+ data-thickness=".2"
+ data-displayPrevious=true
+
+
+
+
+
+ data-width="150"
+ data-fgColor="#ffec03"
+ data-skin="tron"
+ data-thickness=".2"
+ data-displayPrevious=true
+
+
+
+
+
+ data-width="150"
+ data-fgColor="#C0ffff"
+ data-skin="tron"
+ data-thickness=".1"
+ data-angleOffset="180"
+
+
+
-
-
Readonly
+
+
-
-
Knobify!
+
-
-
-
Infinite / iPod click wheel
-
+
+
× Infinite || iPod click wheel
+
+
+
+
× Big !
+
+data-width="700"
+
+
+
+
+
+
jQuery Knob is © 2012 Anthony Terrien and dual licensed under the MIT or GPL licenses.
+
-