From 13c91dfec8a73362bc6d292ae071243fad3ef3e6 Mon Sep 17 00:00:00 2001 From: root Date: Mon, 11 Nov 2013 14:41:58 +0100 Subject: [PATCH 1/4] Textual unit (%, $ ...), glow fx --- LICENSE | 20 +++++ README.md | 26 +------ index.html | 48 ++++++++++-- js/jquery.knob.js | 184 ++++++++++++++++++++++++++++++---------------- knob.jquery.json | 2 +- 5 files changed, 186 insertions(+), 94 deletions(-) create mode 100755 LICENSE diff --git a/LICENSE b/LICENSE new file mode 100755 index 0000000..f5db321 --- /dev/null +++ b/LICENSE @@ -0,0 +1,20 @@ +The MIT License (MIT) + +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. diff --git a/README.md b/README.md index 8c6dd33..2d565ec 100755 --- a/README.md +++ b/README.md @@ -53,6 +53,8 @@ UI : * font : font family. * fontWeight : font weight. * bgColor : background color. +* glow : glow effect value. +* unit : textual unit (%, ms, $). Hooks ------- @@ -129,26 +131,4 @@ Set the value Supported browser ------- -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. +Tested on Chrome, Safari, Firefox, IE 9.0. \ No newline at end of file diff --git a/index.html b/index.html index 7184b74..03ad5c6 100755 --- a/index.html +++ b/index.html @@ -23,11 +23,11 @@ // "tron" case 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 + 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; @@ -133,12 +133,13 @@

jQuery Knob

-

× Display previous value

+

× Display previous value / unit

 data-displayPrevious=true
 data-min="-100"
+data-unit="%"
- +
@@ -169,6 +170,39 @@

jQuery Knob

+
+

× Glow effect

+
+
+
+ 
+data-glow = 20
+data-displayPrevious=true
+data-linecap="round"
+data-thickness=".1"
+
+ +
+
+ 
+data-glow = 20
+data-linecap="round"
+data-thickness=".05"
+
+
+ +
+
+ 
+data-glow = 20
+data-linecap="round"
+data-fgColor="chartreuse"
+data-thickness=".1"
+
+ +
+
+

× Overloaded 'draw' method

diff --git a/js/jquery.knob.js b/js/jquery.knob.js index d6fa7b7..12a0125 100755 --- a/js/jquery.knob.js +++ b/js/jquery.knob.js @@ -70,6 +70,7 @@ this.relativeWidth = false; this.relativeHeight = false; this.$div = null; // component div + this.$inputDiv = null; // component div this.run = function () { var cf = function (e, conf) { @@ -89,38 +90,42 @@ this.o = $.extend( { // Config - min : this.$.data('min') || 0, - max : this.$.data('max') || 100, - stopper : true, - readOnly : this.$.data('readonly') || (this.$.attr('readonly') == 'readonly'), + min: this.$.data('min') || 0, + max: this.$.data('max') || 100, + stopper: true, + readOnly: this.$.data('readonly') || (this.$.attr('readonly') == 'readonly'), // UI - cursor : (this.$.data('cursor') === true && 30) + cursor: (this.$.data('cursor') === true && 30) || this.$.data('cursor') || 0, - thickness : ( + thickness: ( this.$.data('thickness') && Math.max(Math.min(this.$.data('thickness'), 1), 0.01) ) || 0.35, - lineCap : this.$.data('linecap') || 'butt', - width : this.$.data('width') || 200, - height : this.$.data('height') || 200, - displayInput : this.$.data('displayinput') == null || this.$.data('displayinput'), - displayPrevious : this.$.data('displayprevious'), - fgColor : this.$.data('fgcolor') || '#87CEEB', + lineCap: this.$.data('linecap') || 'butt', + width: this.$.data('width') || 200, + height: this.$.data('height') || 200, + displayInput: this.$.data('displayinput') == null || this.$.data('displayinput'), + displayPrevious: this.$.data('displayprevious'), + fgColor: this.$.data('fgcolor') || '#87CEEB', inputColor: this.$.data('inputcolor'), font: this.$.data('font') || 'Arial', fontWeight: this.$.data('font-weight') || 'bold', - inline : false, - step : this.$.data('step') || 1, + inline: false, + step: this.$.data('step') || 1, + unit: this.$.data('unit'), + + // fx + glow: this.$.data('glow') || 0, // Hooks - draw : null, // function () {} - change : null, // function (value) {} - cancel : null, // function () {} - release : null, // function (value) {} - error : null // function () {} + draw: null, // function () {} + change: null, // function (value) {} + cancel: null, // function () {} + release: null, // function (value) {} + error: null // function () {} }, this.o ); @@ -200,11 +205,14 @@ // wraps all elements in a div this.$div = $('
'); - this.$.wrap(this.$div).before(this.$c); - this.$div = this.$.parent(); + this.$inputDiv = $('
'); + this.$div.append(this.$inputDiv); + this.$.wrap(this.$inputDiv); this.$inputDiv = this.$.parent(); + this.$inputDiv.wrap(this.$div); this.$div = this.$inputDiv.parent(); + this.$div.prepend(this.$c); // computes size and carves the component this._carve(); @@ -257,15 +265,21 @@ // finalize div this.$div.css({ - 'width': this.w + 'px', - 'height': this.h + 'px' + width: this.w + 'px', + height: this.h + 'px', + position: 'relative' }); // finalize canvas with computed width - this.$c.attr({ - width: this.w, - height: this.h - }); + this.$c + .css({ + position: 'absolute', //'z-index': -1, + top: '0px', left: '0px' + }) + .attr({ + width: this.w, + height: this.h + }); // scaling if (this.scale !== 1) { @@ -310,7 +324,6 @@ && (s.cH(v) === false) ) return; - s.change(s._validate(v)); s._draw(); }; @@ -420,7 +433,6 @@ s._xy()._touch(e); } ); - this.listen(); } else { this.$.attr('readonly', 'readonly'); @@ -429,11 +441,10 @@ if(this.relative) { $(window).resize(function() { s._carve() - .init(); + .init(); s._draw(); }); } - return this; }; @@ -506,10 +517,10 @@ this.extend = function () { this.o = $.extend( { - bgColor : this.$.data('bgcolor') || '#EEEEEE', - angleOffset : this.$.data('angleoffset') || 0, - angleArc : this.$.data('anglearc') || 360, - inline : true + bgColor: this.$.data('bgcolor') || '#EEEEEE', + angleOffset: this.$.data('angleoffset') || 0, + angleArc: this.$.data('anglearc') || 360, + inline: false }, this.o ); }; @@ -662,32 +673,78 @@ this.startAngle = 1.5 * Math.PI + this.angleOffset; this.endAngle = 1.5 * Math.PI + this.angleOffset + this.angleArc; - var s = max( + + if(this.o.displayInput) { + + var fontSize, inputWidth + , inputLen = max( String(Math.abs(this.o.max)).length , String(Math.abs(this.o.min)).length - , 2 - ) + 2; - - this.o.displayInput - && this.i.css({ - 'width' : ((this.w / 2 + 4) >> 0) + 'px' - ,'height' : ((this.w / 3) >> 0) + 'px' - ,'position' : 'absolute' - ,'vertical-align' : 'middle' - ,'margin-top' : ((this.w / 3) >> 0) + 'px' - ,'margin-left' : '-' + ((this.w * 3 / 4 + 2) >> 0) + 'px' - ,'border' : 0 - ,'background' : 'none' - ,'font' : this.o.fontWeight + ' ' + ((this.w / s) >> 0) + 'px ' + this.o.font - ,'text-align' : 'center' - ,'color' : this.o.inputColor || this.o.fgColor - ,'padding' : '0px' - ,'-webkit-appearance': 'none' + , 2); + + if(this.o.unit) { + fontSize = (this.w / (inputLen * 1.6)) >> 0; + inputWidth = (this.w / 2.3) >> 0; + + $("" + this.o.unit + "") + .css({ + 'font': this.o.fontWeight + ' ' + (fontSize / 2) + 'px ' + this.o.font + ,'color': this.o.inputColor || this.o.fgColor + ,'height': ((this.w / 3) >> 0) + 'px' + ,'vertical-align': 'middle' + ,'display': 'inline-block' }) - || this.i.css({ - 'width' : '0px' - ,'visibility' : 'hidden' - }); + .appendTo(this.$inputDiv); + + this.$inputDiv.css({ + 'top': (((this.w / 3.8) + .5) >> 0) + 'px' + }); + + this.i.css({ + 'text-align': 'center' + ,'padding-right': '0px' + }); + } else { + fontSize = (this.w / (inputLen * 1.4)) >> 0; + inputWidth = (this.w / 1.8) >> 0; + + this.$inputDiv.css({ + 'top': (((this.w / 3) + .5) >> 0) + 'px' + }); + + this.i.css({ + 'text-align': 'center' + ,'padding': '0px' + }); + } + + this.$inputDiv.css({ + 'position': 'absolute' + ,'left': '0px' + ,'right': '0px' + ,'display': 'block' + ,'margin': 'auto' + ,'width': inputWidth + 'px' + }); + + this.i.css({ + 'font': this.o.fontWeight + ' ' + fontSize + 'px ' + this.o.font + ,'color': this.o.inputColor || this.o.fgColor + ,'width': inputWidth + 'px' + ,'height': ((this.w / 3) >> 0) + 'px' + ,'vertical-align': 'middle' + ,'border': 0 + ,'background': 'none' + ,'-webkit-appearance': 'none' + ,'text-shadow': this.o.glow ? '0px 0px '+ ((this.o.glow / 6) >> 0) + 'px ' + this.o.fgColor : 'none' + }); + + } else { + this.i.css({ + 'width': '0px' + ,'visibility': 'hidden' + }); + } }; this.change = function (v) { @@ -702,7 +759,7 @@ this.draw = function () { var c = this.g, // context - a = this.angle(this.cv) // Angle + a = this.angle(this.cv) // Angle , sat = this.startAngle // Start angle , eat = sat + a // End angle , sa, ea // Previous angles @@ -718,7 +775,7 @@ c.beginPath(); c.strokeStyle = this.o.bgColor; - c.arc(this.xy, this.xy, this.radius, this.endAngle, this.startAngle, true); + c.arc(this.xy, this.xy, this.radius - (this.o.glow / 2), this.endAngle, this.startAngle, true); c.stroke(); if (this.o.displayPrevious) { @@ -730,14 +787,15 @@ c.beginPath(); c.strokeStyle = this.pColor; - c.arc(this.xy, this.xy, this.radius, sa, ea, false); + c.arc(this.xy, this.xy, this.radius - (this.o.glow / 2), sa, ea, false); c.stroke(); r = (this.cv == this.v); } c.beginPath(); c.strokeStyle = r ? this.o.fgColor : this.fgColor ; - c.arc(this.xy, this.xy, this.radius, sat, eat, false); + c.arc(this.xy, this.xy, this.radius - (this.o.glow / 2), sat, eat, false); + c.shadowColor = this.o.fgColor; c.shadowBlur = this.o.glow; c.stroke(); }; diff --git a/knob.jquery.json b/knob.jquery.json index 28f295d..a887806 100755 --- a/knob.jquery.json +++ b/knob.jquery.json @@ -9,7 +9,7 @@ "ui", "input" ], - "version": "1.2.2", + "version": "1.3.0", "author": { "name": "Anthony Terrien", "url": "https://github.com/aterrien" From 15b8252f544f6b025408c17b085b8e015f3fe781 Mon Sep 17 00:00:00 2001 From: root Date: Mon, 11 Nov 2013 15:29:12 +0100 Subject: [PATCH 2/4] inner color --- README.md | 1 + js/jquery.knob.js | 9 +++++++++ knob.jquery.json | 2 +- 3 files changed, 11 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 2d565ec..6b9db1b 100755 --- a/README.md +++ b/README.md @@ -49,6 +49,7 @@ UI : * displayInput : default=true | false=hide input. * displayPrevious : default=false | true=displays the previous value with transparency. * fgColor : foreground color. +* innerColor : inner color. * inputColor : input value (number) color. * font : font family. * fontWeight : font weight. diff --git a/js/jquery.knob.js b/js/jquery.knob.js index 12a0125..774cba3 100755 --- a/js/jquery.knob.js +++ b/js/jquery.knob.js @@ -110,6 +110,7 @@ displayInput: this.$.data('displayinput') == null || this.$.data('displayinput'), displayPrevious: this.$.data('displayprevious'), fgColor: this.$.data('fgcolor') || '#87CEEB', + innerColor: this.$.data('innercolor') || 'transparent', inputColor: this.$.data('inputcolor'), font: this.$.data('font') || 'Arial', fontWeight: this.$.data('font-weight') || 'bold', @@ -765,6 +766,14 @@ , sa, ea // Previous angles , r = 1; + if(this.o.innerColor != 'transparent'){ + c.beginPath(); + c.fillStyle = this.o.innerColor; + c.arc(this.xy,this.xy,this.radius,(this.o.angleArc==360) ? this.endAngle : this.endAngle - 0.0075,this.startAngle,true); + c.lineTo(this.xy,this.xy) + c.fill(); + } + c.lineWidth = this.lineWidth; c.lineCap = this.lineCap; diff --git a/knob.jquery.json b/knob.jquery.json index a887806..d3c1d68 100755 --- a/knob.jquery.json +++ b/knob.jquery.json @@ -9,7 +9,7 @@ "ui", "input" ], - "version": "1.3.0", + "version": "1.3.1", "author": { "name": "Anthony Terrien", "url": "https://github.com/aterrien" From 95e3e7cd76c99ac000208dd9df56ae7306cf65fd Mon Sep 17 00:00:00 2001 From: root Date: Mon, 11 Nov 2013 15:56:49 +0100 Subject: [PATCH 3/4] glow --- index.html | 12 ++++++------ js/jquery.knob.js | 9 +++++---- 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index 03ad5c6..70e5fbd 100755 --- a/index.html +++ b/index.html @@ -176,30 +176,30 @@

jQuery Knob

-data-glow = 20
+data-glow=10
 data-displayPrevious=true
 data-linecap="round"
 data-thickness=".1"
- + 
-data-glow = 20
+data-glow=10
 data-linecap="round"
 data-thickness=".05"
- + 
-data-glow = 20
+data-glow=10
 data-linecap="round"
 data-fgColor="chartreuse"
 data-thickness=".1"
- +
diff --git a/js/jquery.knob.js b/js/jquery.knob.js index 774cba3..15d0eae 100755 --- a/js/jquery.knob.js +++ b/js/jquery.knob.js @@ -784,7 +784,7 @@ c.beginPath(); c.strokeStyle = this.o.bgColor; - c.arc(this.xy, this.xy, this.radius - (this.o.glow / 2), this.endAngle, this.startAngle, true); + c.arc(this.xy, this.xy, this.radius - this.o.glow, this.endAngle, this.startAngle, true); c.stroke(); if (this.o.displayPrevious) { @@ -796,15 +796,16 @@ c.beginPath(); c.strokeStyle = this.pColor; - c.arc(this.xy, this.xy, this.radius - (this.o.glow / 2), sa, ea, false); + c.arc(this.xy, this.xy, this.radius - this.o.glow, sa, ea, false); c.stroke(); r = (this.cv == this.v); } c.beginPath(); c.strokeStyle = r ? this.o.fgColor : this.fgColor ; - c.arc(this.xy, this.xy, this.radius - (this.o.glow / 2), sat, eat, false); - c.shadowColor = this.o.fgColor; c.shadowBlur = this.o.glow; + c.arc(this.xy, this.xy, this.radius - this.o.glow, sat, eat, false); + c.shadowColor = this.o.fgColor; + c.shadowBlur = this.o.glow; c.stroke(); }; From c3080b8badccda5b64f84d9fde15c5eda9bd3989 Mon Sep 17 00:00:00 2001 From: Anthony Terrien Date: Wed, 13 Nov 2013 22:50:28 +0100 Subject: [PATCH 4/4] Update README.md --- README.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 6b9db1b..5f913c0 100755 --- a/README.md +++ b/README.md @@ -132,4 +132,7 @@ 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. + + +![secretplan](https://raw.github.com/aterrien/jQuery-Knob/master/secretplan.jpg)