From 4bbf1298cf99701f3cd39a79c00d1c49de393c18 Mon Sep 17 00:00:00 2001 From: tchapi Date: Sun, 11 Nov 2012 23:24:26 +0100 Subject: [PATCH 1/8] Add tick functionality - New available options are ticks, tickColor, tickLength, tickWidth, and tickFgColor - Full support for angleOffset and angleArc values Update index.html demo file --- index.html | 60 ++++++++++++++++++++++++++++++++++++----------- js/jquery.knob.js | 37 ++++++++++++++++++++++++++++- 2 files changed, 82 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index f3e6785..9ec2bf6 100644 --- a/index.html +++ b/index.html @@ -116,51 +116,83 @@

jQuery Knob

× Disable display input

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

× 'cursor' mode

-data-width="150"
-data-cursor=true
-data-thickness=.3
-data-fgColor="#222222"
+    data-width="150"
+    data-cursor=true
+    data-thickness=.3
+    data-fgColor="#222222"

× Display previous value

-data-displayPrevious=true
-data-min="-100"
+    data-displayPrevious=true
+    data-min="-100"
+
+

× Angle offset with ticks

+ 
+    data-ticks=20
+    data-angleOffset=90
+    data-tickLength=0.2
+
+ +
+
+

× Angle offset and arc with ticks

+ 
+    data-ticks=20
+    data-fgColor="#66CC66"
+    data-tickFgColor="#00CC00"
+    data-angleOffset=-125
+    data-angleArc=250
+
+ +
+
+

× Previous value with ticks

+ 
+    data-ticks=20
+    data-tickWidth=0.05
+    data-tickLength=0.05
+    data-displayPrevious=true
+    data-min="-100"
+
+ +
+

× Angle offset

-data-angleOffset=90
+    data-angleOffset=90

× Angle offset and arc

-data-fgColor="#66CC66"
-data-angleOffset=-125
-data-angleArc=250
+    data-fgColor="#66CC66"
+    data-angleOffset=-125
+    data-angleArc=250

× 5-digit values

-data-min="-15000"
-data-max="15000"
+    data-min="-15000"
+    data-max="15000"
diff --git a/js/jquery.knob.js b/js/jquery.knob.js index d3a6026..a44cce8 100644 --- a/js/jquery.knob.js +++ b/js/jquery.knob.js @@ -103,7 +103,14 @@ draw : null, // function () {} change : null, // function (value) {} cancel : null, // function () {} - release : null // function (value) {} + release : null, // function (value) {} + + // Ticks + ticks : this.$.data('ticks') || 0, + tickColor : this.$.data('tickcolor') || '#ccc', + tickLength : this.$.data('ticklength') || this.$.data('thickness')*0.8 || 0.25, + tickWidth : this.$.data('tickwidth') || 0.01, + tickFgColor : this.$.data('tickfgcolor') || '#08c', }, this.o ); @@ -540,6 +547,7 @@ this.cursorExt = this.o.cursor / 100; this.xy = this.w2; this.lineWidth = this.xy * this.o.thickness; + this.tickLength = this.xy * this.o.tickLength; this.radius = this.xy - this.lineWidth / 2; this.o.angleOffset @@ -631,6 +639,33 @@ c.strokeStyle = r ? this.o.fgColor : this.fgColor ; c.arc(this.xy, this.xy, this.radius, sat, eat, false); c.stroke(); + + if (this.o.ticks != 0){ + + var halfPi = .5 * Math.PI, + twoPi = halfPi * 4, + step = twoPi / this.o.ticks; + + c.lineWidth = this.tickLength; + + for(var tick = 0; tick < this.o.ticks; tick++) { + + var tick_sa = step * tick; + + if (tick_sa > this.angleArc) continue; + + c.beginPath(); + + if (sat + tick_sa < eat) { + c.strokeStyle = this.o.tickFgColor; + } else { + c.strokeStyle = this.o.tickColor; + } + + c.arc(this.xy, this.xy, this.radius, sat + tick_sa, sat + tick_sa + this.o.tickWidth, false); + c.stroke(); + } + } }; this.cancel = function () { From 6f7a0aa49fbb636ce59834bf921ff53a17bc21aa Mon Sep 17 00:00:00 2001 From: tchapi Date: Sun, 11 Nov 2012 23:31:39 +0100 Subject: [PATCH 2/8] Modify README for new tick functionality --- README.md | 22 +++++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index c8a4c3f..1735d5c 100644 --- a/README.md +++ b/README.md @@ -4,6 +4,7 @@ jQuery Knob - canvas based ; no png or jpg sprites. - touch, mouse and mousewheel, keyboard events implemented. - downward compatible ; overloads an input element. +- nice ticks for various styling effects Example ------- @@ -46,8 +47,16 @@ UI : * 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. +* fgColor : foreground color | default=#87CEEB +* bgColor : background color | default=#EEEEEE + +UI - ticks (_new_) : +* ticks : displays ticks or not | default=false. +* tickLength : length of the ticks, consistent with the thickness of the gauge (if equal, the ticks take the full thickness of the gauge) | default=80% of thickness +* tickWidth : width of the ticks | default=0.02 +* tickColor : Default tick color | default=#CCCCCC +* tickFgColor : Default foreground tick color | default=#0088CC + Hooks ------- @@ -122,4 +131,11 @@ 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. + + +Credits +------- + +Forked from aterrien (https://github.com/aterrien/jQuery-Knob - http://anthonyterrien.com/knob/) +Thanks to eskimoblood (https://github.com/eskimoblood/jQuery-Knob) \ No newline at end of file From 302d4e17bde08af123aa2aba26af3a9895d3b33a Mon Sep 17 00:00:00 2001 From: tchap Date: Sun, 11 Nov 2012 23:32:48 +0100 Subject: [PATCH 3/8] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 1735d5c..6f3de30 100644 --- a/README.md +++ b/README.md @@ -50,7 +50,7 @@ UI : * fgColor : foreground color | default=#87CEEB * bgColor : background color | default=#EEEEEE -UI - ticks (_new_) : +UI - ticks ( _new_ ) : * ticks : displays ticks or not | default=false. * tickLength : length of the ticks, consistent with the thickness of the gauge (if equal, the ticks take the full thickness of the gauge) | default=80% of thickness * tickWidth : width of the ticks | default=0.02 From a7dfeb5f419fc22487972769c3c4a3e375f3d008 Mon Sep 17 00:00:00 2001 From: tchapi Date: Sun, 11 Nov 2012 23:36:29 +0100 Subject: [PATCH 4/8] Correct step value in draw function --- 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 a44cce8..c0e5f34 100644 --- a/js/jquery.knob.js +++ b/js/jquery.knob.js @@ -644,7 +644,7 @@ var halfPi = .5 * Math.PI, twoPi = halfPi * 4, - step = twoPi / this.o.ticks; + step = this.angleArc / this.o.ticks; c.lineWidth = this.tickLength; From 3c368be728c1271557e47ce689956dbafc841aae Mon Sep 17 00:00:00 2001 From: tchapi Date: Sun, 11 Nov 2012 23:51:21 +0100 Subject: [PATCH 5/8] Add background functionality for the canvas (limited to the inside of the circle) Amend index.html and README files accordingly --- README.md | 2 ++ index.html | 3 ++- js/jquery.knob.js | 8 ++++++++ 3 files changed, 12 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 1735d5c..b68be25 100644 --- a/README.md +++ b/README.md @@ -49,6 +49,7 @@ UI : * displayPrevious : default=false | true=displays the previous value with transparency. * fgColor : foreground color | default=#87CEEB * bgColor : background color | default=#EEEEEE +* canvasBgColor : background color for the knob | default=false UI - ticks (_new_) : * ticks : displays ticks or not | default=false. @@ -138,4 +139,5 @@ Credits ------- Forked from aterrien (https://github.com/aterrien/jQuery-Knob - http://anthonyterrien.com/knob/) + Thanks to eskimoblood (https://github.com/eskimoblood/jQuery-Knob) \ No newline at end of file diff --git a/index.html b/index.html index 9ec2bf6..ab59690 100644 --- a/index.html +++ b/index.html @@ -135,9 +135,10 @@

jQuery Knob

× Display previous value

     data-displayPrevious=true
+    data-canvasBgColor="#BAD9E8"
     data-min="-100"
- +
diff --git a/js/jquery.knob.js b/js/jquery.knob.js index c0e5f34..3d8ce5c 100644 --- a/js/jquery.knob.js +++ b/js/jquery.knob.js @@ -97,6 +97,7 @@ displayInput : this.$.data('displayinput') == null || this.$.data('displayinput'), displayPrevious : this.$.data('displayprevious'), fgColor : this.$.data('fgcolor') || '#87CEEB', + canvasBgColor : this.$.data('canvasbgcolor') || false, inline : false, // Hooks @@ -612,6 +613,13 @@ c.lineWidth = this.lineWidth; + if (this.o.canvasBgColor !== false) { + c.beginPath(); + c.fillStyle = this.o.canvasBgColor; + c.arc(this.xy, this.xy, this.radius, 0, 2*Math.PI, true); + c.fill(); + } + this.o.cursor && (sat = eat - this.cursorExt) && (eat = eat + this.cursorExt); From 6226ad3a463db38b122ee98ed111be535b7719b6 Mon Sep 17 00:00:00 2001 From: tchapi Date: Tue, 13 Nov 2012 23:59:00 +0100 Subject: [PATCH 6/8] Add new shadow functionality. New parameters : - shadow : blur of the shadow, if 0 : no shadow - shadowColor : color of the shadow Add an extendCanvasRatio represented by a realSize object to take the size of the shadow into account when drawing the HTML5 canvas (so that no clipping occur) --- index.html | 33 +++++++++++++++++++++++++++++- js/jquery.knob.js | 52 +++++++++++++++++++++++++++-------------------- 2 files changed, 62 insertions(+), 23 deletions(-) diff --git a/index.html b/index.html index ab59690..c5bb7b8 100644 --- a/index.html +++ b/index.html @@ -198,6 +198,37 @@

jQuery Knob

+
+

× Angle offset with shadow

+ 
+    data-angleOffset=90
+    data-shadow=10
+
+ +
+
+

× Angle offset and arc

+ 
+    data-fgColor="#66CC66"
+    data-angleOffset=-125
+    data-shadow=30
+    data-angleArc=250
+
+ +
+
+

× Ticks and shadow

+ 
+    data-min="-150"
+    data-max="150"
+    data-shadow=20
+    data-ticks=20
+    data-tickWidth=0.05
+    data-tickLength=0.05
+
+ +
+

× Overloaded 'draw' method

@@ -247,12 +278,12 @@

jQuery Knob

× Dynamic

 data-width="200"
+data-cursor=true
             
 data-width="50"
-data-cursor=true
diff --git a/js/jquery.knob.js b/js/jquery.knob.js index 3d8ce5c..525bc31 100644 --- a/js/jquery.knob.js +++ b/js/jquery.knob.js @@ -93,10 +93,12 @@ || 0, thickness : this.$.data('thickness') || 0.35, width : this.$.data('width') || 200, - height : this.$.data('height') || 200, + height : this.$.data('height') || this.$.data('width') || 200, displayInput : this.$.data('displayinput') == null || this.$.data('displayinput'), displayPrevious : this.$.data('displayprevious'), fgColor : this.$.data('fgcolor') || '#87CEEB', + shadow : this.$.data('shadow') || 0, + shadowColor : this.$.data('shadowcolor') || 'rgba(0,0,0,0.5)', canvasBgColor : this.$.data('canvasbgcolor') || false, inline : false, @@ -153,15 +155,17 @@ (!this.o.displayInput) && this.$.hide(); + this.realSize = { width: this.o.width + this.o.shadow, height: this.o.height + this.o.shadow }; + this.$c = $(''); + this.realSize.width + 'px" height="' + + this.realSize.height + 'px">'); this.c = this.$c[0].getContext("2d"); this.$ .wrap($('
')) + 'width:' + this.realSize.width + 'px;height:' + + this.realSize.height + 'px;">')) .before(this.$c); if (this.v instanceof Object) { @@ -194,8 +198,8 @@ var d = true, c = document.createElement('canvas'); - c.width = s.o.width; - c.height = s.o.height; + c.width = s.o.width + s.o.shadow; + c.height = s.o.height + s.o.shadow; s.g = c.getContext('2d'); s.clear(); @@ -431,8 +435,8 @@ var a, ret; a = Math.atan2( - x - (this.x + this.w2) - , - (y - this.y - this.w2) + x - (this.x + this.xy) + , - (y - this.y - this.xy) ) - this.angleOffset; if(this.angleArc != this.PI2 && (a < 0) && (a > -0.5)) { @@ -546,10 +550,10 @@ this.$.val(this.v); this.w2 = this.o.width / 2; this.cursorExt = this.o.cursor / 100; - this.xy = this.w2; - this.lineWidth = this.xy * this.o.thickness; - this.tickLength = this.xy * this.o.tickLength; - this.radius = this.xy - this.lineWidth / 2; + this.xy = this.realSize.width / 2; + this.lineWidth = this.w2 * this.o.thickness; + this.tickLength = this.w2 * this.o.tickLength; + this.radius = this.w2 - this.lineWidth / 2; this.o.angleOffset && (this.o.angleOffset = isNaN(this.o.angleOffset) ? 0 : this.o.angleOffset); @@ -573,15 +577,15 @@ this.o.displayInput && this.i.css({ - 'width' : ((this.o.width / 2 + 4) >> 0) + 'px' - ,'height' : ((this.o.width / 3) >> 0) + 'px' + 'width' : ((this.realSize.width / 2 + 4) >> 0) + 'px' + ,'height' : ((this.realSize.width / 3) >> 0) + 'px' ,'position' : 'absolute' ,'vertical-align' : 'middle' - ,'margin-top' : ((this.o.width / 3) >> 0) + 'px' - ,'margin-left' : '-' + ((this.o.width * 3 / 4 + 2) >> 0) + 'px' + ,'margin-top' : ((this.realSize.width / 3) >> 0) + 'px' + ,'margin-left' : '-' + ((this.realSize.width * 3 / 4 + 2) >> 0) + 'px' ,'border' : 0 ,'background' : 'none' - ,'font' : 'bold ' + ((this.o.width / s) >> 0) + 'px Arial' + ,'font' : 'bold ' + ((this.realSize.width / s) >> 0) + 'px Arial' ,'text-align' : 'center' ,'color' : this.o.fgColor ,'padding' : '0px' @@ -611,12 +615,18 @@ , sa, ea // Previous angles , r = 1; + var halfPi = .5 * Math.PI, + twoPi = halfPi * 4; + c.lineWidth = this.lineWidth; + c.shadowBlur = this.o.shadow; + c.shadowColor = this.o.shadowColor; + if (this.o.canvasBgColor !== false) { c.beginPath(); c.fillStyle = this.o.canvasBgColor; - c.arc(this.xy, this.xy, this.radius, 0, 2*Math.PI, true); + c.arc(this.xy, this.xy, this.radius, 0, twoPi, true); c.fill(); } @@ -650,9 +660,7 @@ if (this.o.ticks != 0){ - var halfPi = .5 * Math.PI, - twoPi = halfPi * 4, - step = this.angleArc / this.o.ticks; + var step = this.angleArc / this.o.ticks; c.lineWidth = this.tickLength; From 9f216f33cd969a93426aa1ae490de20a9639bec2 Mon Sep 17 00:00:00 2001 From: tchapi Date: Wed, 14 Nov 2012 00:00:52 +0100 Subject: [PATCH 7/8] Amend README.md for new shadow parameter --- README.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/README.md b/README.md index c87b2ae..7ac8269 100644 --- a/README.md +++ b/README.md @@ -5,6 +5,7 @@ jQuery Knob - touch, mouse and mousewheel, keyboard events implemented. - downward compatible ; overloads an input element. - nice ticks for various styling effects +- shadow effect for the knob Example ------- @@ -45,6 +46,7 @@ UI : * cursor : display mode "cursor" | default=gauge. * thickness : gauge thickness. * width : dial width. +* height : dial height | default=[same as width]. * displayInput : default=true | false=hide input. * displayPrevious : default=false | true=displays the previous value with transparency. * fgColor : foreground color | default=#87CEEB @@ -58,6 +60,9 @@ UI - ticks ( _new_ ) : * tickColor : Default tick color | default=#CCCCCC * tickFgColor : Default foreground tick color | default=#0088CC +UI - shadow ( _new_ ) : +* shadow : amount of blur of the shadow effet | default=0 (no shadow at all) +* shadowColor : color of the shadow | default=rgba(0,0,0,0.5) Hooks ------- From 24af9b209b60c61bce96b751ccfe653d412c1ade Mon Sep 17 00:00:00 2001 From: tchapi Date: Sun, 18 Nov 2012 12:01:55 +0100 Subject: [PATCH 8/8] Add new gradient (linear) functionality --- README.md | 33 ++++++++++++++++++++++++++++++++- 1 file changed, 32 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 7ac8269..0f6f8e5 100644 --- a/README.md +++ b/README.md @@ -6,10 +6,12 @@ jQuery Knob - downward compatible ; overloads an input element. - nice ticks for various styling effects - shadow effect for the knob +- gradients Example ------- +```html +``` Options ------- Options are provided as attributes 'data-option': +```html +``` ... or in the "knob()" call : +```javascript $(".dial").knob({ 'min':-50 ,'max':50 }) +``` The following options are supported : @@ -64,14 +71,33 @@ UI - shadow ( _new_ ) : * shadow : amount of blur of the shadow effet | default=0 (no shadow at all) * shadowColor : color of the shadow | default=rgba(0,0,0,0.5) +Gradients +------- + +To make the foreground color a gradient, just pass an array of colors and color stops as the fgColor parameter as per below : + +```html + +``` + +> NB : Adding a gradient can only be done programmatically. + +As it is a linear gradient form, it works well with half-circles dials. + Hooks ------- +```html +``` * 'release' : executed on release @@ -99,6 +125,7 @@ The scope (this) of each hook function is the current Knob instance (refer to th Example ------- +```html - +``` Dynamically configure ------- +```html +``` Set the value ------- +```html +``` Supported browser -------