diff --git a/README.md b/README.md index da0dd70..9a98802 100755 --- a/README.md +++ b/README.md @@ -49,10 +49,13 @@ 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. * bgColor : background color. +* glow : glow effect value. +* unit : textual unit (%, ms, $). Hooks ------- diff --git a/index.html b/index.html index 9352ab0..2515b7d 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; @@ -60,8 +60,7 @@ return false; } - }, - change: function (val) { console.log("Change: " + val) } + } }); // Example of infinite knob, iPod click wheel @@ -134,12 +133,13 @@

jQuery Knob

-

× Display previous value

+

× Display previous value / unit

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

jQuery Knob

+
+

× Glow effect

+
+
+
+ 
+data-glow=10
+data-displayPrevious=true
+data-linecap="round"
+data-thickness=".1"
+
+ +
+
+ 
+data-glow=10
+data-linecap="round"
+data-thickness=".05"
+
+
+ +
+
+ 
+data-glow=10
+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 5a2ae3f..8ad5e4e 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,43 @@ 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', + innerColor: this.$.data('innercolor') || 'transparent', 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 +206,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 +266,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) { @@ -302,6 +317,7 @@ e.originalEvent.touches[s.t].pageX, e.originalEvent.touches[s.t].pageY ); + s.change(s._validate(v)); s._draw(); }; @@ -404,7 +420,6 @@ s._xy()._touch(e); } ); - this.listen(); } else { this.$.attr('readonly', 'readonly'); @@ -413,11 +428,10 @@ if(this.relative) { $(window).resize(function() { s._carve() - .init(); + .init(); s._draw(); }); } - return this; }; @@ -490,10 +504,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 ); }; @@ -645,32 +659,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) { @@ -689,12 +749,20 @@ 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 , 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; @@ -705,7 +773,7 @@ c.beginPath(); c.strokeStyle = this.o.bgColor; - c.arc(this.xy, this.xy, this.radius, this.endAngle - 0.00001, this.startAngle + 0.00001, true); + c.arc(this.xy, this.xy, this.radius - this.o.glow, this.endAngle - 0.00001, this.startAngle + 0.00001, true); c.stroke(); if (this.o.displayPrevious) { @@ -717,14 +785,16 @@ 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, 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, 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 780e111..d3c1d68 100755 --- a/knob.jquery.json +++ b/knob.jquery.json @@ -9,7 +9,7 @@ "ui", "input" ], - "version": "1.2.3", + "version": "1.3.1", "author": { "name": "Anthony Terrien", "url": "https://github.com/aterrien"