From dc9df18e9c8bf34105c76c50013385a8adb37394 Mon Sep 17 00:00:00 2001 From: aterrien Date: Tue, 22 May 2012 22:21:45 +0200 Subject: [PATCH 01/89] Revision 1.1.2 - removed padding around the wheel in default skin - '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 --- index.html | 65 +++++-- js/jquery.knob-1.1.2.js | 422 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 469 insertions(+), 18 deletions(-) create mode 100644 js/jquery.knob-1.1.2.js diff --git a/index.html b/index.html index ac450e0..5aeddca 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ jQuery Knob demo - + -
+
Knob demo -Flattr this + Flattr this
 data-width="75"
 data-fgColor="#fff"
 data-skin="tron"
+data-displayPrevious=true
             
- +
@@ -68,8 +93,9 @@
 data-fgColor="#fff"
 data-skin="tron"
 data-thickness=".2"
+data-displayPrevious=true
             
- +
@@ -80,26 +106,29 @@
             
-
+
+
 data-width="100"
 data-displayInput=false
             
-
+
-data-width="300"
+data-width="200"
 data-cursor=true
             
- +
-
+
-data-width="250"
+data-width="200"
 data-min="-100"
+data-cgColor="#A9EFFD"
+data-displayPrevious=true
             
- +
@@ -137,17 +166,17 @@

Knobify!

Infinite / iPod click wheel

-
+
-data-width="200"
+data-width="150"
 data-cursor=true
-data-thickness=".4"
+data-thickness=".5"
 data-fgColor="#AAAAAA"
 data-bgColor="#FFFFFF"
 data-displayInput="false"
 + some code
                 
- +
0
diff --git a/js/jquery.knob-1.1.2.js b/js/jquery.knob-1.1.2.js new file mode 100644 index 0000000..2654507 --- /dev/null +++ b/js/jquery.knob-1.1.2.js @@ -0,0 +1,422 @@ +/** + * Knob - jQuery Plugin + * Downward compatible, touchable dial + * + * Version: 1.1.2 (10/05/2012) + * Requires: jQuery v1.7+ + * + * Copyright (c) 2011 Anthony Terrien + * Under MIT and GPL licenses: + * http://www.opensource.org/licenses/mit-license.php + * http://www.gnu.org/licenses/gpl.html + * + * Thanks to vor, eskimoblood, spiffistan + */ +$(function () { + + // Dial logic + var Dial = function (c, opt) { + + var v = null + ,ctx = c[0].getContext("2d") + ,PI2 = 2*Math.PI + ,mx ,my ,x ,y + ,self = this; + + this.onChange = function () {}; + this.onCancel = function () {}; + this.onRelease = function () {}; + + this.val = function (nv) { + if (null != nv) { + opt.stopper && (nv = Math.max(Math.min(nv, opt.max), opt.min)); + v = nv; + this.onChange(nv); + this.draw(nv); + } else { + var b, a; + b = a = Math.atan2(mx - x, -(my - y - opt.width / 2)); + (a < 0) && (b = a + PI2); + nv = Math.round(b * (opt.max - opt.min) / PI2) + opt.min; + return (nv > opt.max) ? opt.max : nv; + } + }; + + this.change = function (nv) { + opt.stopper && (nv = Math.max(Math.min(nv, opt.max), opt.min)); + this.onChange(nv); + this.draw(nv); + }; + + this.angle = function (nv) { + return (nv - opt.min) * PI2 / (opt.max - opt.min); + }; + + this.draw = function (nv) { + + var a = this.angle(nv) + ,sa = 1.5 * Math.PI // Start angle + ,sat = sa + ,ea = sa + this.angle(v) // End angle + ,eat = sat + a + ,r = opt.width / 2 // Radius + ,lw = r * opt.thickness // Line width + ,cgcolor = Dial.getCgColor(opt.cgColor) + ,tick + ; + + ctx.clearRect(0, 0, opt.width, opt.width); + ctx.lineWidth = lw; + + // Hook draw + //{"startAngle":sa,"endAngle":ea,"radius":r,"lineWidth":lw} + if (opt.draw(a, v, opt, ctx)) { return; } + + for (tick = 0; tick < opt.ticks; tick++) { + + ctx.beginPath(); + + if (a > (((2 * Math.PI) / opt.ticks) * tick) && opt.tickColorizeValues) { + ctx.strokeStyle = opt.fgColor; + } else { + ctx.strokeStyle = opt.tickColor; + } + + var tick_sa = (((2 * Math.PI) / opt.ticks) * tick) - (0.5 * Math.PI); + ctx.arc( r, r, r-lw-opt.tickLength, tick_sa, tick_sa+opt.tickWidth , false); + ctx.stroke(); + } + + opt.cursor + && (sa = ea - 0.3) + && (ea = ea + 0.3) + && (sat = eat - 0.3) + && (eat = eat + 0.3); + + switch (opt.skin) { + + case 'default' : + + ctx.beginPath(); + ctx.strokeStyle = opt.bgColor; + ctx.arc(r, r, r - lw / 2, 0, PI2, true); + ctx.stroke(); + + if (opt.displayPrevious) { + ctx.beginPath(); + ctx.strokeStyle = (v == nv) ? opt.fgColor : cgcolor; + ctx.arc(r, r, r - lw / 2, sa, ea, false); + ctx.stroke(); + } + + ctx.beginPath(); + ctx.strokeStyle = opt.fgColor; + ctx.arc(r, r, r - lw / 2, sat, eat, false); + ctx.stroke(); + + break; + + case 'tron' : + + if (opt.displayPrevious) { + ctx.beginPath(); + ctx.strokeStyle = (v == nv) ? opt.fgColor : cgcolor; + ctx.arc( r, r, r - lw, sa, ea, false); + ctx.stroke(); + } + + ctx.beginPath(); + ctx.strokeStyle = opt.fgColor; + ctx.arc( r, r, r - lw, sat, eat, false); + ctx.stroke(); + + ctx.lineWidth = 2; + ctx.beginPath(); + ctx.strokeStyle = opt.fgColor; + ctx.arc( r, r, r - lw + 1 + lw * 2 / 3, 0, 2 * Math.PI, false); + ctx.stroke(); + + break; + } + }; + + this.capture = function (e) { + switch (e.type) { + case 'mousemove' : + case 'mousedown' : + mx = e.pageX; + my = e.pageY; + break; + case 'touchmove' : + case 'touchstart' : + mx = e.originalEvent.touches[0].pageX; + my = e.originalEvent.touches[0].pageY; + break; + } + this.change( this.val() ); + }; + + this.cancel = function () { + self.val(v); + self.onCancel(); + }; + + this.startDrag = function (e) { + + var p = c.position() + ,$doc = $(document); + + x = p.left + (opt.width / 2); + y = p.top; + + this.capture(e); + + // Listen mouse and touch events + $doc.bind( + "mousemove.dial touchmove.dial" + ,function (e) { + self.capture(e); + } + ) + .bind( + // Escape + "keyup.dial" + ,function (e) { + if(e.keyCode === 27) { + $doc.unbind("mouseup.dial mousemove.dial keyup.dial"); + self.cancel(); + } + } + ) + .bind( + "mouseup.dial touchend.dial" + ,function (e) { + $doc.unbind('mousemove.dial touchmove.dial mouseup.dial touchend.dial keyup.dial'); + self.val(self.val()); + self.onRelease(v); + } + ); + }; + }; + + // Dial static func + Dial.getCgColor = function (h) { + h = h.substring(1,7); + var rgb = [parseInt(h.substring(0,2),16) + ,parseInt(h.substring(2,4),16) + ,parseInt(h.substring(4,6),16)]; + return "rgba("+rgb[0]+","+rgb[1]+","+rgb[2]+",.5)"; + }; + + // jQuery plugin + $.fn.knob = $.fn.dial = function (gopt) { + + return this.each( + + function () { + + var $this = $(this), opt; + + if ($this.data('dialed')) { return $this; } + $this.data('dialed', true); + + opt = $.extend( + { + // Config + 'min' : $this.data('min') || 0 + ,'max' : $this.data('max') || 100 + ,'stopper' : true + ,'readOnly' : $this.data('readonly') + + // UI + ,'cursor' : $this.data('cursor') + ,'thickness' : $this.data('thickness') || 0.35 + ,'width' : $this.data('width') || 200 + ,'displayInput' : $this.data('displayinput') == null || $this.data('displayinput') + ,'displayPrevious' : $this.data('displayprevious') + ,'fgColor' : $this.data('fgcolor') || '#87CEEB' + ,'cgColor' : $this.data('cgcolor') || $this.data('fgcolor') || '#87CEEB' + ,'bgColor' : $this.data('bgcolor') || '#EEEEEE' + ,'tickColor' : $this.data('tickColor') || $this.data('fgcolor') || '#DDDDDD' + ,'ticks' : $this.data('ticks') || 0 + ,'tickLength' : $this.data('tickLength') || 0 + ,'tickWidth' : $this.data('tickWidth') || 0.02 + ,'tickColorizeValues' : $this.data('tickColorizeValues') || true + ,'skin' : $this.data('skin') || 'default' + + // Hooks + ,'draw' : + /** + * @param int a angle + * @param int v current value + * @param array opt plugin options + * @param context ctx Canvas context 2d + * @return bool true:bypass default draw methode + */ + function (a, v, opt, ctx) {} + ,'change' : + /** + * @param int v Current value + */ + function (v) {} + ,'release' : + /** + * @param int v Current value + * @param jQuery ipt Input + */ + function (v, ipt) {} + } + ,gopt + ); + + var c = $('') + ,wd = $('
') + ,k + ,vl = $this.val() + ,initStyle = function () { + opt.displayInput + && $this.css({ + 'width' : opt.width / 2 + 'px' + ,'position' : 'absolute' + ,'margin-top' : (opt.width * 5 / 14) + 'px' + ,'margin-left' : '-' + (opt.width * 3 / 4) + 'px' + ,'font-size' : (opt.width / 4) + 'px' + ,'border' : 'none' + ,'background' : 'none' + ,'font-family' : 'Arial' + ,'font-weight' : 'bold' + ,'text-align' : 'center' + ,'color' : opt.fgColor + ,'padding' : '0px' + ,'-webkit-appearance': 'none' + }) + || $this.css({ + 'width' : '0px' + ,'visibility' : 'hidden' + }); + }; + + // Canvas insert + $this.wrap(wd).before(c); + + initStyle(); + + // Invoke dial logic + k = new Dial(c, opt); + vl || (vl = opt.min); + $this.val(vl); + k.val(vl); + + k.onRelease = function (v) { + opt.release(v, $this); + }; + k.onChange = function (v) { + $this.val(v); + opt.change(v); + }; + + // bind change on input + $this.bind( + 'change' + ,function (e) { + k.val($this.val()); + } + ); + + if (!opt.readOnly) { + + // canvas + c.bind( + "mousedown touchstart" + ,function (e) { + e.preventDefault(); + k.startDrag(e); + } + ) + .bind( + "mousewheel DOMMouseScroll" + ,mw = function (e) { + e.preventDefault(); + var ori = e.originalEvent + ,deltaX = ori.detail || ori.wheelDeltaX + ,deltaY = ori.detail || ori.wheelDeltaY + ,val = parseInt($this.val()) + (deltaX>0 || deltaY>0 ? 1 : deltaX<0 || deltaY<0 ? -1 : 0); + k.val(val); + } + ); + + // input + var kval, val, to, m = 1, kv = {37:-1, 38:1, 39:1, 40:-1}; + $this + .bind( + "configure" + ,function (e, aconf) { + var kconf; + for (kconf in aconf) { opt[kconf] = aconf[kconf]; } + initStyle(); + k.val($this.val()); + } + ) + .bind( + "keydown" + ,function (e) { + var kc = e.keyCode; + kval = parseInt(String.fromCharCode(kc)); + + if (isNaN(kval)) { + + (kc !== 13) // enter + && (kc !== 8) // bs + && (kc !== 9) // tab + && (kc !== 189) // - + && e.preventDefault(); + + // arrows + if ($.inArray(kc,[37,38,39,40]) > -1) { + k.change(parseInt($this.val()) + kv[kc] * m); + + // long time keydown speed-up + to = window.setTimeout( + function () { m < 20 && m++; } + ,50 + ); + + e.preventDefault(); + } + } + } + ) + .bind( + "keyup" + ,function(e) { + if (isNaN(kval)) { + if (to) { + window.clearTimeout(to); + to = null; + m = 1; + k.val($this.val()); + k.onRelease($this.val(), $this); + } else { + // enter + (e.keyCode === 13) + && k.onRelease($this.val(), $this); + } + } else { + // kval postcond + ($this.val() > opt.max && $this.val(opt.max)) + || ($this.val() < opt.min && $this.val(opt.min)); + } + + } + ) + .bind( + "mousewheel DOMMouseScroll" + ,mw + ); + } else { + $this.attr('readonly', 'readonly'); + } + } + ).parent(); + }; +}); \ No newline at end of file From cad36a58b4aa4fa349da410277a89b3016ddb642 Mon Sep 17 00:00:00 2001 From: aterrien Date: Tue, 22 May 2012 22:23:52 +0200 Subject: [PATCH 02/89] Version date --- js/jquery.knob-1.1.2.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/jquery.knob-1.1.2.js b/js/jquery.knob-1.1.2.js index 2654507..eff80a9 100644 --- a/js/jquery.knob-1.1.2.js +++ b/js/jquery.knob-1.1.2.js @@ -2,7 +2,7 @@ * Knob - jQuery Plugin * Downward compatible, touchable dial * - * Version: 1.1.2 (10/05/2012) + * Version: 1.1.2 (22/05/2012) * Requires: jQuery v1.7+ * * Copyright (c) 2011 Anthony Terrien From de7b83dddabae9af860a9f542141c9ea79e13c15 Mon Sep 17 00:00:00 2001 From: aterrien Date: Tue, 22 May 2012 22:26:12 +0200 Subject: [PATCH 03/89] README.md --- README.md | 125 +++++++++++++++++++++++++++++++++++------------------- 1 file changed, 81 insertions(+), 44 deletions(-) diff --git a/README.md b/README.md index 14a0e28..dad5588 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,20 @@ jQuery Knob ============= -- canvas based ; no png or jpg sprites -- touch, mousewheel, keyboard events implemented -- downward compatible ; overloads an input element +- canvas based ; no png or jpg sprites. +- touch, mousewheel, keyboard events implemented. +- downward compatible ; overloads an input element. + +Example +------- + + + + Options ------- @@ -12,23 +23,35 @@ Options are provided as attributes 'data-option': +... or in the "knob()" call : + + $(".dial").knob({ + 'min':-50 + ,'max':50 + }) + The following options are supported : -* min : min value -* max : max value -* cursor : display mode "cursor" | default=gauge -* thickness : gauge thickness -* width : dial width -* displayInput : default=true | false=hide input -* fgColor : foreground color -* bgColor : background color -* ticks : number of ticks | 0=disable -* tickColor -* tickLength -* tickWidth -* tickColorizeValues : colorize ticks -* readOnly : disable input and events -* skin : default | "tron" +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. + +UI : +* cursor : display mode "cursor" | default=gauge. +* thickness : gauge thickness. +* width : dial width. +* displayInput : default=true | false=hide input. +* 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 ------- @@ -39,32 +62,26 @@ Hooks }); -* 'release' : executed on release. +* 'release' : executed on release - Parameters : - - value : int, current value - - input : jQuery element, input element + Parameters : + value : int, current value + input : jQuery element, input element * 'change' : executed at each change of the value - Parameters : - - value : int, current value + Parameters : + value : int, current value * 'draw' : when drawing the canvas -Example 1 -------- - - + Parameters : + angle : computed angle + value : current value + opt : plugin options + context : Canvas context 2d - - - -Example 2 +Example ------- @@ -76,19 +93,39 @@ Example 2 console.log(e); } } - ) - .val(79); + ); -Tested on Chrome, Safari, Firefox. -Not tested on MSIE. +Dynamically configure +------- + + +Supported browser +------- + +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 ------- -- keyboard/mousewheel control refactoring / acceleration -- bugfix no keyboard or mousewheel when readonly -- bugfix min/max can be exceeded -- hooks / keyboard events +- keyboard/mousewheel control refactoring / acceleration. +- bugfix no keyboard or mousewheel when readonly. +- bugfix min/max can be exceeded. +- hooks / keyboard events. From eb9e3946034e13490c58cbc5bf800d7c1918993c Mon Sep 17 00:00:00 2001 From: aterrien Date: Tue, 22 May 2012 22:29:58 +0200 Subject: [PATCH 04/89] README.md --- README.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index dad5588..56e2bf9 100644 --- a/README.md +++ b/README.md @@ -58,28 +58,28 @@ Hooks * 'release' : executed on release Parameters : - value : int, current value - input : jQuery element, input element + + value : int, current value + + input : jQuery element, input element * 'change' : executed at each change of the value Parameters : - value : int, current value + + value : int, current value * 'draw' : when drawing the canvas Parameters : - angle : computed angle - value : current value - opt : plugin options - context : Canvas context 2d + + angle : computed angle + + value : current value + + opt : plugin options + + context : Canvas context 2d Example ------- From d6c80891235ffe333100ab052d654c00262c4e7f Mon Sep 17 00:00:00 2001 From: aterrien Date: Wed, 23 May 2012 22:21:22 +0200 Subject: [PATCH 05/89] maintains a single js file without version number --- index.html | 3 +- js/jquery.knob-1.0.0.js | 217 ------------- js/jquery.knob-1.0.1.js | 233 -------------- js/jquery.knob-1.1.0.js | 295 ----------------- js/jquery.knob-1.1.1.js | 330 -------------------- js/{jquery.knob-1.1.2.js => jquery.knob.js} | 0 6 files changed, 1 insertion(+), 1077 deletions(-) delete mode 100644 js/jquery.knob-1.0.0.js delete mode 100644 js/jquery.knob-1.0.1.js delete mode 100644 js/jquery.knob-1.1.0.js delete mode 100644 js/jquery.knob-1.1.1.js rename js/{jquery.knob-1.1.2.js => jquery.knob.js} (100%) diff --git a/index.html b/index.html index 5aeddca..768d1e5 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ jQuery Knob demo - + @@ -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 - Flattr this +
+

jQuery Knob

-
+
+

Nice, downward compatible, touchable, jQuery dial. Flattr this

+

* implemented interactions : mouse click and wheel mouse, keyboard (on focus) and fingers (touch events)

+
+
+

× Disable display input

-data-width="75"
-data-fgColor="#fff"
-data-skin="tron"
-data-displayPrevious=true
+data-width="100"
+data-displayInput=false
             
- +
-
+
+

× 'cursor' mode

 data-width="150"
-data-fgColor="#fff"
-data-skin="tron"
-data-thickness=".2"
-data-displayPrevious=true
+data-cursor=true
+data-thickness=.3
+data-fgColor="#222222"
             
- +
-
+
+

× Display previous value

-data-width="150"
-data-fgColor="#fff"
-data-skin="tron"
-data-thickness=".1"
+data-displayPrevious=true
+data-min="-100"
             
- +
-
+
+

× Angle offset

-data-width="100"
-data-displayInput=false
+data-angleOffset=90
             
- +
-
+
+

× Angle offset and arc

-data-width="200"
-data-cursor=true
+data-fgColor="#66CC66"
+data-angleOffset=-125
+data-angleArc=250
             
- +
-
+
+

× 5-digit values

-data-width="200"
-data-min="-100"
-data-cgColor="#A9EFFD"
-data-displayPrevious=true
-data-angleOffset="90"
+data-min="-15000"
+data-max="15000"
             
- +
-
-

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

+
+
+

× Readonly

 data-thickness=".4"
 data-fgColor="chartreuse"
@@ -149,8 +210,8 @@ 

Readonly

-
-

Knobify!

+
+

× Dynamic

 data-width="200"
             
@@ -163,10 +224,9 @@

Knobify!

-
-
-

Infinite / iPod click wheel

-
+
+

× Infinite || iPod click wheel

+
 data-width="150"
 data-cursor=true
@@ -179,10 +239,22 @@ 

Infinite / iPod click wheel

-
0
-
+
0
+
+
+
+

× Big !

+
+data-width="700"
+            
+ +
+
+
+

jQuery Knob is © 2012 Anthony Terrien and dual licensed under the MIT or GPL licenses.

+
- \ No newline at end of file From 6bda39943e34fec3c9e76812ed59a7ac636e3ca6 Mon Sep 17 00:00:00 2001 From: root Date: Thu, 24 Jan 2013 22:32:59 +0100 Subject: [PATCH 19/89] Release 1.2.0 --- README.md | 24 +++++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index c8a4c3f..be26c6e 100644 --- a/README.md +++ b/README.md @@ -122,4 +122,26 @@ Set the value Supported browser ------- -Tested on Chrome, Safari, Firefox, IE 9.0. \ No newline at end of file +Tested on Chrome, Safari, Firefox, IE 9.0. + +MIT License +------- + +Copyright (C) 2013 Anthony Terrien + +Permission is hereby granted, free of charge, to any person obtaining a copy of +this software and associated documentation files (the "Software"), to deal in +the Software without restriction, including without limitation the rights to +use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of + the Software, and to permit persons to whom the Software is furnished to do so, +subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS +FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR +COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER +IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN +CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. \ No newline at end of file From 9a3e5a76c507766400b6bceb9b2eb98d630e789c Mon Sep 17 00:00:00 2001 From: Anthony Terrien Date: Thu, 24 Jan 2013 23:08:08 +0100 Subject: [PATCH 20/89] Add jQuery manifest --- knob.jquery.json | 35 +++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 knob.jquery.json diff --git a/knob.jquery.json b/knob.jquery.json new file mode 100644 index 0000000..fae6b41 --- /dev/null +++ b/knob.jquery.json @@ -0,0 +1,35 @@ +{ + "name": "knob", + "title": "jQuery Knob", + "description": "Nice, downward compatible, touchable, jQuery dial.", + "keywords": [ + "dial", + "button", + "knob" + ], + "version": "1.2.0", + "author": { + "name": "Anthony Terrien", + "url": "https://github.com/aterrien" + }, + "maintainers": [ + { + "name": "Anthony Terrien", + "email": "kontrol@anthonyterrien.com", + "url": "http://anthonyterrien.com/knob" + } + ], + "licenses": [ + { + "type": "MIT", + "url": "http://opensource.org/licenses/mit-license.php" + } + ], + "bugs": "https://github.com/aterrien/jQuery-Knob/issues", + "homepage": "https://github.com/aterrien/jQuery-Knob", + "docs": "https://github.com/aterrien/jQuery-Knob", + "download": "https://github.com/aterrien/jQuery-Knob/tags", + "dependencies": { + "jquery": ">=1.7" + } +} \ No newline at end of file From 4ba94db55ae863487d5710299bd55c15e8a3a0b7 Mon Sep 17 00:00:00 2001 From: Anthony Terrien Date: Thu, 24 Jan 2013 23:19:45 +0100 Subject: [PATCH 21/89] jquery manifest --- knob.jquery.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/knob.jquery.json b/knob.jquery.json index fae6b41..f130ac1 100644 --- a/knob.jquery.json +++ b/knob.jquery.json @@ -28,8 +28,7 @@ "bugs": "https://github.com/aterrien/jQuery-Knob/issues", "homepage": "https://github.com/aterrien/jQuery-Knob", "docs": "https://github.com/aterrien/jQuery-Knob", - "download": "https://github.com/aterrien/jQuery-Knob/tags", "dependencies": { - "jquery": ">=1.7" + "jquery": ">=1.7.0" } } \ No newline at end of file From 44f3207f48010c4a81024e7440e68942853934ff Mon Sep 17 00:00:00 2001 From: Anthony Terrien Date: Thu, 24 Jan 2013 23:26:52 +0100 Subject: [PATCH 22/89] add some popular tags --- knob.jquery.json | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/knob.jquery.json b/knob.jquery.json index f130ac1..b6c8e5b 100644 --- a/knob.jquery.json +++ b/knob.jquery.json @@ -5,7 +5,9 @@ "keywords": [ "dial", "button", - "knob" + "knob", + "ui", + "input" ], "version": "1.2.0", "author": { From 979795e50ed7f6e3f6a70dde6d0cdaf859b6e897 Mon Sep 17 00:00:00 2001 From: aterrien Date: Fri, 25 Jan 2013 16:29:40 +0100 Subject: [PATCH 23/89] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 29dcd24..4fc2ba4 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,7 @@ Example Options @@ -28,7 +28,7 @@ Options are provided as attributes 'data-option': $(".dial").knob({ 'min':-50 ,'max':50 - }) + }); The following options are supported : From bc89c87cca60a9128bce5f8b1def99f3530f8357 Mon Sep 17 00:00:00 2001 From: Anthony Terrien Date: Fri, 25 Jan 2013 19:37:17 +0100 Subject: [PATCH 24/89] Add download link --- knob.jquery.json | 1 + 1 file changed, 1 insertion(+) diff --git a/knob.jquery.json b/knob.jquery.json index b6c8e5b..40b2337 100644 --- a/knob.jquery.json +++ b/knob.jquery.json @@ -30,6 +30,7 @@ "bugs": "https://github.com/aterrien/jQuery-Knob/issues", "homepage": "https://github.com/aterrien/jQuery-Knob", "docs": "https://github.com/aterrien/jQuery-Knob", + "download": "https://github.com/aterrien/jQuery-Knob/tags", "dependencies": { "jquery": ">=1.7.0" } From bf70456ca13329158ad48c9e2049967b9133cdec Mon Sep 17 00:00:00 2001 From: root Date: Wed, 30 Jan 2013 00:07:10 +0100 Subject: [PATCH 25/89] Release 1.2.2 --- knob.jquery.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/knob.jquery.json b/knob.jquery.json index 40b2337..28f295d 100644 --- a/knob.jquery.json +++ b/knob.jquery.json @@ -9,7 +9,7 @@ "ui", "input" ], - "version": "1.2.0", + "version": "1.2.2", "author": { "name": "Anthony Terrien", "url": "https://github.com/aterrien" @@ -34,4 +34,4 @@ "dependencies": { "jquery": ">=1.7.0" } -} \ No newline at end of file +} From 9dea10469ac9e6e576bc866f11162187ac1e913d Mon Sep 17 00:00:00 2001 From: Anthony Terrien Date: Sat, 9 Feb 2013 19:19:25 +0100 Subject: [PATCH 26/89] use of $ passed to the ready() function / compat with noConflict --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 6123e93..9d61a9a 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ +
+

× Superpose (clock)

+
+
+ +
+
+ +
+
+ +
+
+
+

× Readonly


From 738eabcd49a3a66ad750833da5c0348137447c13 Mon Sep 17 00:00:00 2001
From: Philippe Masset 
Date: Tue, 9 Apr 2013 16:05:55 +0200
Subject: [PATCH 31/89] Prevent errors in browsers that don't support canvases.

Added feature detection to prevent the plugin from executing if the
browser doesn't support canvases.
Added the `error` hook, triggered if the browser doesn't support
canvases.
---
 js/jquery.knob.js | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/js/jquery.knob.js b/js/jquery.knob.js
index 32caa3d..ef3ab5f 100644
--- a/js/jquery.knob.js
+++ b/js/jquery.knob.js
@@ -106,7 +106,8 @@
                     draw : null, // function () {}
                     change : null, // function (value) {}
                     cancel : null, // function () {}
-                    release : null // function (value) {}
+                    release : null, // function (value) {}
+                    error : null // function () {}
                 }, this.o
             );
 
@@ -151,7 +152,13 @@
             this.$c = $('');
-            this.c = this.$c[0].getContext("2d");
+            
+            this.c = this.$c[0].getContext? this.$c[0].getContext('2d') : null;
+			
+            if (!this.c) {
+                this.o.error && this.o.error();
+                return;
+            }
 
             this.$
                 .wrap($('
Date: Thu, 27 Jun 2013 23:16:02 +0200 Subject: [PATCH 34/89] Support for HiDPI screens #99 #93 #61 --- js/jquery.knob.js | 23 ++++++++++++++++++++--- 1 file changed, 20 insertions(+), 3 deletions(-) diff --git a/js/jquery.knob.js b/js/jquery.knob.js index ef3ab5f..ae36b6b 100644 --- a/js/jquery.knob.js +++ b/js/jquery.knob.js @@ -63,6 +63,7 @@ this.cH = null; // change hook this.eH = null; // cancel hook this.rH = null; // release hook + this.scale = 1; // scale factor this.run = function () { var cf = function (e, conf) { @@ -166,6 +167,21 @@ this.o.height + 'px;">
')) .before(this.$c); + this.scale = (window.devicePixelRatio || 1) / + ( + this.c.webkitBackingStorePixelRatio || + this.c.mozBackingStorePixelRatio || + this.c.msBackingStorePixelRatio || + this.c.oBackingStorePixelRatio || + this.c.backingStorePixelRatio || 1 + ); + if (this.scale !== 1) { + this.$c[0].width = this.$c[0].width * this.scale; + this.$c[0].height = this.$c[0].height * this.scale; + this.$c.width(this.o.width); + this.$c.height(this.o.height); + } + if (this.v instanceof Object) { this.cv = {}; this.copy(this.v, this.cv); @@ -196,8 +212,9 @@ var d = true, c = document.createElement('canvas'); - c.width = s.o.width; - c.height = s.o.height; + c.width = s.o.width * s.scale; + c.height = s.o.height * s.scale; + s.g = c.getContext('2d'); s.clear(); @@ -551,7 +568,7 @@ this.$.val(this.v); this.w2 = this.o.width / 2; this.cursorExt = this.o.cursor / 100; - this.xy = this.w2; + this.xy = this.w2 * this.scale; this.lineWidth = this.xy * this.o.thickness; this.lineCap = this.o.lineCap; this.radius = this.xy - this.lineWidth / 2; From bc468f9540e507e6ba557bc754e1355d9d7f4f9d Mon Sep 17 00:00:00 2001 From: fadomire Date: Tue, 27 Aug 2013 09:54:13 +0200 Subject: [PATCH 35/89] excanvas support for IE7/8 compatibility added excanvas support code from @buradleix https://github.com/buradleix/jQuery-Knob/ --- js/jquery.knob.js | 23 +++++++++++------------ 1 file changed, 11 insertions(+), 12 deletions(-) diff --git a/js/jquery.knob.js b/js/jquery.knob.js index ae36b6b..a0b4729 100644 --- a/js/jquery.knob.js +++ b/js/jquery.knob.js @@ -150,10 +150,15 @@ (!this.o.displayInput) && this.$.hide(); - this.$c = $(''); + this.$c = $(document.createElement('canvas')).attr({ + width: this.o.width, + height: this.o.height + }); + if (typeof G_vmlCanvasManager !== 'undefined') { + G_vmlCanvasManager.initElement(this.$c[0]); + } + this.c = this.$c[0].getContext? this.$c[0].getContext('2d') : null; if (!this.c) { @@ -209,13 +214,9 @@ this._draw = function () { // canvas pre-rendering - var d = true, - c = document.createElement('canvas'); - - c.width = s.o.width * s.scale; - c.height = s.o.height * s.scale; + var d = true; - s.g = c.getContext('2d'); + s.g = s.c; s.clear(); @@ -224,8 +225,6 @@ (d !== false) && s.draw(); - s.c.drawImage(c, 0, 0); - c = null; }; this._touch = function (e) { @@ -682,4 +681,4 @@ ).parent(); }; -})(jQuery); \ No newline at end of file +})(jQuery); From 6dca8a7a79ade47c70835b06b2509ce688ecd3b9 Mon Sep 17 00:00:00 2001 From: root Date: Mon, 2 Sep 2013 22:13:19 +0200 Subject: [PATCH 36/89] font and fontWeight support #100 @kylestetz @asnyder --- README.md | 0 index.html | 0 js/jquery.knob.js | 10 ++++++---- knob.jquery.json | 0 4 files changed, 6 insertions(+), 4 deletions(-) mode change 100644 => 100755 README.md mode change 100644 => 100755 index.html mode change 100644 => 100755 js/jquery.knob.js mode change 100644 => 100755 knob.jquery.json diff --git a/README.md b/README.md old mode 100644 new mode 100755 diff --git a/index.html b/index.html old mode 100644 new mode 100755 diff --git a/js/jquery.knob.js b/js/jquery.knob.js old mode 100644 new mode 100755 index a0b4729..79b4f0e --- a/js/jquery.knob.js +++ b/js/jquery.knob.js @@ -48,7 +48,7 @@ this.o = null; // array of options this.$ = null; // jQuery wrapped element this.i = null; // mixed HTMLInputElement or array of HTMLInputElement - this.g = null; // 2D graphics context for 'pre-rendering' + this.g = null; // deprecated 2D graphics context for 'pre-rendering' this.v = null; // value ; mixed array or integer this.cv = null; // change value ; not commited value this.x = 0; // canvas x position @@ -100,6 +100,8 @@ displayPrevious : this.$.data('displayprevious'), fgColor : this.$.data('fgcolor') || '#87CEEB', inputColor: this.$.data('inputcolor') || this.$.data('fgcolor') || '#87CEEB', + font: this.$.data('font') || 'Arial', + fontWeight: this.$.data('font-weight') || 'bold', inline : false, step : this.$.data('step') || 1, @@ -154,13 +156,13 @@ width: this.o.width, height: this.o.height }); - + if (typeof G_vmlCanvasManager !== 'undefined') { G_vmlCanvasManager.initElement(this.$c[0]); } this.c = this.$c[0].getContext? this.$c[0].getContext('2d') : null; - + if (!this.c) { this.o.error && this.o.error(); return; @@ -602,7 +604,7 @@ ,'margin-left' : '-' + ((this.o.width * 3 / 4 + 2) >> 0) + 'px' ,'border' : 0 ,'background' : 'none' - ,'font' : 'bold ' + ((this.o.width / s) >> 0) + 'px Arial' + ,'font' : this.o.fontWeight + ' ' + ((this.o.width / s) >> 0) + 'px ' + this.o.font ,'text-align' : 'center' ,'color' : this.o.inputColor || this.o.fgColor ,'padding' : '0px' diff --git a/knob.jquery.json b/knob.jquery.json old mode 100644 new mode 100755 From ac5e0b8d478b2b17ed22e40849c4801b49db7e15 Mon Sep 17 00:00:00 2001 From: root Date: Mon, 2 Sep 2013 22:18:03 +0200 Subject: [PATCH 37/89] font and fontWeight support #100 @kylestetz @asnyder --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 2b33108..8c6dd33 100755 --- a/README.md +++ b/README.md @@ -50,6 +50,8 @@ UI : * displayPrevious : default=false | true=displays the previous value with transparency. * fgColor : foreground color. * inputColor : input value (number) color. +* font : font family. +* fontWeight : font weight. * bgColor : background color. Hooks From e83f4fb9f92837caa6402eac72ccf5480fe0970a Mon Sep 17 00:00:00 2001 From: root Date: Fri, 13 Sep 2013 01:01:18 +0200 Subject: [PATCH 38/89] First implem of responsive support #98 --- index.html | 18 ++++++++ js/jquery.knob.js | 106 ++++++++++++++++++++++++++++++++++------------ 2 files changed, 98 insertions(+), 26 deletions(-) diff --git a/index.html b/index.html index 67b1530..d003bb0 100755 --- a/index.html +++ b/index.html @@ -205,6 +205,24 @@

jQuery Knob

+
+

× Responsive

+
+data-width="80%"
+            
+
+ + Current div width is 30% of window width.
+ Knob width is 80% of current div.
+ Knob width is 80% of 30% of window width.
+ Test resizing window. +
+
+
+ +
+
+
+ + + - + + +``` Options ------- Options are provided as attributes 'data-option': - +```html + +``` ... or in the "knob()" call : - $(".dial").knob({ - 'min':-50 - ,'max':50 - }); +```javascript +$(".dial").knob({ + 'min':-50, + 'max':50 +}); +``` The following options are supported : @@ -58,11 +64,13 @@ UI : Hooks ------- - + 'release' : function (v) { /*make something*/ } + }); + +``` * 'release' : executed on release @@ -92,40 +100,44 @@ The scope (this) of each hook function is the current Knob instance (refer to th Example ------- - +```html + - - + 'change' : function (v) { console.log(v); } + }); + +``` Dynamically configure ------- - + } + ); + +``` Set the value ------- - + +``` Supported browser ------- From 4fb9bab8d87c4e705cdb1ea47d00b5190191b29e Mon Sep 17 00:00:00 2001 From: Felix Milea-Ciobanu Date: Tue, 14 Jul 2015 10:54:38 -0600 Subject: [PATCH 84/89] added basic package.json for npm package --- package.json | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 package.json diff --git a/package.json b/package.json new file mode 100644 index 0000000..28b7fb1 --- /dev/null +++ b/package.json @@ -0,0 +1,24 @@ +{ + "name": "jquery-knob", + "version": "1.2.11", + "description": "Nice, downward compatible, touchable, jQuery dial", + "main": "dist/jquery.knob.min.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/aterrien/jQuery-Knob.git" + }, + "keywords": [ + "jquery", + "knob", + "dial" + ], + "author": "Anthony Terrien", + "license": "MIT", + "bugs": { + "url": "https://github.com/aterrien/jQuery-Knob/issues" + }, + "homepage": "https://github.com/aterrien/jQuery-Knob#readme" +} From cf505336e7c50e3b6eae1210d321d27832d5ff90 Mon Sep 17 00:00:00 2001 From: legitalk Date: Wed, 14 Oct 2015 10:04:42 +0200 Subject: [PATCH 85/89] Update jquery.knob.js Missing ";" --- js/jquery.knob.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/jquery.knob.js b/js/jquery.knob.js index 5294ffa..44220f2 100644 --- a/js/jquery.knob.js +++ b/js/jquery.knob.js @@ -472,7 +472,7 @@ // Utils this.h2rgba = function (h, a) { var rgb; - h = h.substring(1,7) + h = h.substring(1,7); rgb = [ parseInt(h.substring(0,2), 16), parseInt(h.substring(2,4), 16), From 28bb63e72a2de1571fd6d1e25d9f1855d820fa4a Mon Sep 17 00:00:00 2001 From: legitalk Date: Wed, 14 Oct 2015 10:11:21 +0200 Subject: [PATCH 86/89] Update Missing 3x ";" --- js/jquery.knob.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/js/jquery.knob.js b/js/jquery.knob.js index 5294ffa..8bae662 100644 --- a/js/jquery.knob.js +++ b/js/jquery.knob.js @@ -297,7 +297,7 @@ } return this; - } + }; this._draw = function () { @@ -472,7 +472,7 @@ // Utils this.h2rgba = function (h, a) { var rgb; - h = h.substring(1,7) + h = h.substring(1,7); rgb = [ parseInt(h.substring(0,2), 16), parseInt(h.substring(2,4), 16), @@ -669,7 +669,7 @@ ); this.$c.bind("mousewheel DOMMouseScroll", mw); - this.$.bind("mousewheel DOMMouseScroll", mw) + this.$.bind("mousewheel DOMMouseScroll", mw); }; this.init = function () { From 148307aa5475980dbc85133f16e7cf88cf03fde8 Mon Sep 17 00:00:00 2001 From: Jason Williams Date: Fri, 23 Oct 2015 16:58:23 +0100 Subject: [PATCH 87/89] adding height to dial documentation --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index d20c58a..2257ff4 100755 --- a/README.md +++ b/README.md @@ -53,6 +53,7 @@ UI : * thickness : gauge thickness. * lineCap : gauge stroke endings. | default=butt, round=rounded line endings * width : dial width. +* height : dial height. * displayInput : default=true | false=hide input. * displayPrevious : default=false | true=displays the previous value with transparency. * fgColor : foreground color. From fa1c321fd1a9a471130a1a56746462c8330bcf7b Mon Sep 17 00:00:00 2001 From: aterrien Date: Tue, 3 Nov 2015 21:13:28 +0000 Subject: [PATCH 88/89] Release 1.2.12, fix bower version and add npm package --- bower.json | 2 +- js/jquery.knob.js | 2 +- knob.jquery.json | 2 +- package.json | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/bower.json b/bower.json index 7969769..ef03e4e 100755 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "aterrien/jQuery-Knob", - "version": "1.2.11", + "version": "1.2.12", "main": "js/jquery.knob.js", "description": "Nice, downward compatible, touchable, jQuery dial.", "license": "MIT", diff --git a/js/jquery.knob.js b/js/jquery.knob.js index 8bae662..792313c 100644 --- a/js/jquery.knob.js +++ b/js/jquery.knob.js @@ -2,7 +2,7 @@ /** * Downward compatible, touchable dial * - * Version: 1.2.11 + * Version: 1.2.12 * Requires: jQuery v1.7+ * * Copyright (c) 2012 Anthony Terrien diff --git a/knob.jquery.json b/knob.jquery.json index 26564ad..c442552 100755 --- a/knob.jquery.json +++ b/knob.jquery.json @@ -9,7 +9,7 @@ "ui", "input" ], - "version": "1.2.11", + "version": "1.2.12", "author": { "name": "Anthony Terrien", "url": "https://github.com/aterrien" diff --git a/package.json b/package.json index 28b7fb1..de9f0ce 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "jquery-knob", - "version": "1.2.11", + "version": "1.2.12", "description": "Nice, downward compatible, touchable, jQuery dial", "main": "dist/jquery.knob.min.js", "scripts": { From 755309e933d326ffaa5a2d758dc377147b766515 Mon Sep 17 00:00:00 2001 From: Anthony Terrien Date: Wed, 16 Dec 2015 21:12:42 +0100 Subject: [PATCH 89/89] Changed bower package name to jquery-knob --- bower.json | 4 ++-- knob.jquery.json | 2 +- package.json | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/bower.json b/bower.json index ef03e4e..1eeb316 100755 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { - "name": "aterrien/jQuery-Knob", - "version": "1.2.12", + "name": "jquery-knob", + "version": "1.2.13", "main": "js/jquery.knob.js", "description": "Nice, downward compatible, touchable, jQuery dial.", "license": "MIT", diff --git a/knob.jquery.json b/knob.jquery.json index c442552..01a9063 100755 --- a/knob.jquery.json +++ b/knob.jquery.json @@ -9,7 +9,7 @@ "ui", "input" ], - "version": "1.2.12", + "version": "1.2.13", "author": { "name": "Anthony Terrien", "url": "https://github.com/aterrien" diff --git a/package.json b/package.json index de9f0ce..fbb4245 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "jquery-knob", - "version": "1.2.12", + "version": "1.2.13", "description": "Nice, downward compatible, touchable, jQuery dial", "main": "dist/jquery.knob.min.js", "scripts": {