diff --git a/README.md b/README.md index c8a4c3f..0f6f8e5 100644 --- a/README.md +++ b/README.md @@ -4,10 +4,14 @@ 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 +- 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 : @@ -44,19 +53,51 @@ 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. -* bgColor : background color. +* 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. +* 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 + +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 @@ -84,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 ------- -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 diff --git a/index.html b/index.html index f3e6785..c5bb7b8 100644 --- a/index.html +++ b/index.html @@ -116,55 +116,119 @@

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-canvasBgColor="#BAD9E8"
+    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"
+
+

× 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

@@ -214,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 d3a6026..525bc31 100644 --- a/js/jquery.knob.js +++ b/js/jquery.knob.js @@ -93,17 +93,27 @@ || 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, // Hooks 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 ); @@ -145,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) { @@ -186,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(); @@ -423,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)) { @@ -538,9 +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.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); @@ -564,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' @@ -602,8 +615,21 @@ , 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, twoPi, true); + c.fill(); + } + this.o.cursor && (sat = eat - this.cursorExt) && (eat = eat + this.cursorExt); @@ -631,6 +657,31 @@ 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 step = this.angleArc / 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 () {