From 8be26fb211438e8d9c3b772363250ad4f11fb9a3 Mon Sep 17 00:00:00 2001 From: Gabriel Nau Date: Mon, 14 Apr 2014 16:02:37 +0200 Subject: [PATCH 1/4] Add an optionnal circle knob Allows to optionally have a knob above the stroke. It reduces the whole widget radius if activated, or the knob would overflow the canvas. The knob's own radius must be expressed as a percentage of the ```lineWidth``` ( 0 < r < 1 ). If no ```knobRadius``` config argument is given, the value is set to ```0``` to avoid adding special cases further in the code for users that don't use it. --- js/jquery.knob.js | 21 +++++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/js/jquery.knob.js b/js/jquery.knob.js index 83d6327..8eaff6e 100755 --- a/js/jquery.knob.js +++ b/js/jquery.knob.js @@ -104,6 +104,7 @@ height : this.$.data('height') || 200, displayInput : this.$.data('displayinput') == null || this.$.data('displayinput'), displayPrevious : this.$.data('displayprevious'), + displayKnob: this.$.data('displayknob') || false, fgColor : this.$.data('fgcolor') || '#87CEEB', inputColor: this.$.data('inputcolor'), font: this.$.data('font') || 'Arial', @@ -111,6 +112,8 @@ inline : false, step : this.$.data('step') || 1, rotation: this.$.data('rotation'), + knobColor: this.$.data('knobcolor'), + knobRadius: this.$.data('knobradius') || 0, // Hooks draw : null, // function () {} @@ -134,6 +137,10 @@ this.o.inputColor = this.o.fgColor; } + if(!this.o.knobColor) { + this.o.knobColor = this.o.fgColor; + } + // routing value if(this.$.is('fieldset')) { @@ -669,7 +676,7 @@ 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; + this.radius = this.xy - this.lineWidth / 2 - this.o.knobRadius * this.lineWidth / 2; this.o.angleOffset && (this.o.angleOffset = isNaN(this.o.angleOffset) ? 0 : this.o.angleOffset); @@ -697,7 +704,7 @@ ,'height' : ((this.w / 3) >> 0) + 'px' ,'position' : 'absolute' ,'vertical-align' : 'middle' - ,'margin-top' : ((this.w / 3) >> 0) + 'px' + ,'margin-top' : (this.w / 3 + this.o.knobRadius * this.lineWidth / 3 >> 0) + 'px' ,'margin-left' : '-' + ((this.w * 3 / 4 + 2) >> 0) + 'px' ,'border' : 0 ,'background' : 'none' @@ -768,6 +775,16 @@ c.strokeStyle = r ? this.o.fgColor : this.fgColor ; c.arc(this.xy, this.xy, this.radius, a.s, a.e, a.d); c.stroke(); + + if(this.o.displayKnob) { + var dx = Math.sin(a.e - a.s) * this.radius; + var dy = - Math.cos(a.e - a.s) * this.radius; + + c.beginPath(); + c.arc(this.xy + dx, this.xy + dy, this.o.knobRadius * this.lineWidth, 0, 2 * Math.PI, false); + c.fillStyle = this.o.knobColor; + c.fill(); + } }; this.cancel = function () { From af09da3fb5c24cb864b081bc8c94d1f33eca52ad Mon Sep 17 00:00:00 2001 From: Gabriel Nau Date: Mon, 14 Apr 2014 16:21:39 +0200 Subject: [PATCH 2/4] Remove wrong margin calculation Previous commit #8be26fb211438e8d9c3b772363250ad4f11fb9a3 was misguided by non agnostic development environment. --- 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 8eaff6e..f7d6771 100755 --- a/js/jquery.knob.js +++ b/js/jquery.knob.js @@ -704,7 +704,7 @@ ,'height' : ((this.w / 3) >> 0) + 'px' ,'position' : 'absolute' ,'vertical-align' : 'middle' - ,'margin-top' : (this.w / 3 + this.o.knobRadius * this.lineWidth / 3 >> 0) + 'px' + ,'margin-top' : (this.w / 3 >> 0) + 'px' ,'margin-left' : '-' + ((this.w * 3 / 4 + 2) >> 0) + 'px' ,'border' : 0 ,'background' : 'none' From 5fb5da0c3d433579aa7e22f745b50130f3deec51 Mon Sep 17 00:00:00 2001 From: Gabriel Nau Date: Mon, 14 Apr 2014 16:22:35 +0200 Subject: [PATCH 3/4] Add an example of knob usage --- index.html | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/index.html b/index.html index 3928f0c..1ed6e11 100755 --- a/index.html +++ b/index.html @@ -166,6 +166,16 @@

jQuery Knob

+
+

× knob

+ 
+data-displayknob="true"
+data-knobcolor="#5bbce4"
+data-knobradius="1.4"
+
+ +
+

× Overloaded 'draw' method

From 8212679cce42762679836d74e2d6c1e430abb004 Mon Sep 17 00:00:00 2001 From: Gabriel Nau Date: Mon, 14 Apr 2014 16:25:05 +0200 Subject: [PATCH 4/4] Default knob radius to 0.7 (of lineWidth) --- 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 f7d6771..3424849 100755 --- a/js/jquery.knob.js +++ b/js/jquery.knob.js @@ -113,7 +113,7 @@ step : this.$.data('step') || 1, rotation: this.$.data('rotation'), knobColor: this.$.data('knobcolor'), - knobRadius: this.$.data('knobradius') || 0, + knobRadius: this.$.data('knobradius') || 0.7, // Hooks draw : null, // function () {}