Skip to content

Commit

Permalink
Merge branch 'issue-105' of https://github.com/mal/jQuery-Knob into m…
Browse files Browse the repository at this point in the history 
…al-issue-105
  • Loading branch information
@aterrien
aterrien committed Mar 4, 2014
2 parents ac8320d + 3ef3110 commit 9af8860
Show file tree
Hide file tree
Showing 3 changed files with 43 additions and 34 deletions.
3 changes: 2 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ Behaviors :
* angleArc : arc size in degrees | default=360.
* stopper : stop at min & max on keydown/mousewheel | default=true.
* readOnly : disable input and events | default=false.
* rotation : direction of progression | default=clockwise.

UI :
* cursor : display mode "cursor", cursor size could be changed passing a numeric value to the option, default width is used when passing boolean value "true" | default=gauge.
Expand Down Expand Up @@ -131,4 +132,4 @@ Supported browser

Tested on Chrome, Safari, Firefox, IE>=8.0 (IE8.0 with excanvas).

![secretplan](https://raw.github.com/aterrien/jQuery-Knob/master/secretplan.jpg)
![secretplan](https://raw.github.com/aterrien/jQuery-Knob/master/secretplan.jpg)
25 changes: 9 additions & 16 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,33 +27,25 @@
// "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
this.cursorExt = 0.3;

var a = this.arc(this.cv) // Arc
, pa // Previous arc
, r = 1;

this.g.lineWidth = this.lineWidth;

this.o.cursor
&& (sat = eat - 0.3)
&& (eat = eat + 0.3);

if (this.o.displayPrevious) {
ea = this.startAngle + this.angle(this.v);
this.o.cursor
&& (sa = ea - 0.3)
&& (ea = ea + 0.3);
pa = this.arc(this.v);
this.g.beginPath();
this.g.strokeStyle = this.pColor;
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sa, ea, false);
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, pa.s, pa.e, pa.d);
this.g.stroke();
}

this.g.beginPath();
this.g.strokeStyle = r ? this.o.fgColor : this.fgColor ;
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sat, eat, false);
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, a.s, a.e, a.d);
this.g.stroke();

this.g.lineWidth = 2;
Expand Down Expand Up @@ -159,8 +151,9 @@ <h1>jQuery Knob</h1>
data-fgColor="#66CC66"
data-angleOffset=-125
data-angleArc=250
data-rotation=anticlockwise
</pre>
<input class="knob" data-angleOffset=-125 data-angleArc=250 data-fgColor="#66EE66" value="35">
<input class="knob" data-angleOffset=-125 data-angleArc=250 data-fgColor="#66EE66" data-rotation="anticlockwise" value="35">
</div>
<div class="demo" >
<p>&#215; 5-digit values, step 1000</p>
Expand Down
49 changes: 32 additions & 17 deletions js/jquery.knob.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,7 @@
fontWeight: this.$.data('font-weight') || 'bold',
inline : false,
step : this.$.data('step') || 1,
rotation: this.$.data('rotation'),

// Hooks
draw : null, // function () {}
Expand All @@ -128,6 +129,7 @@
);

// finalize options
this.o.flip = this.o.rotation === 'anticlockwise' || this.o.rotation === 'acw';
if(!this.o.inputColor) {
this.o.inputColor = this.o.fgColor;
}
Expand Down Expand Up @@ -537,6 +539,10 @@
, - (y - this.y - this.w2)
) - this.angleOffset;

if (this.o.flip) {
a = this.angleArc - a - this.PI2;
}

if(this.angleArc != this.PI2 && (a < 0) && (a > -0.5)) {
// if isset angleArc option, set to min if .5 under min
a = 0;
Expand Down Expand Up @@ -716,45 +722,54 @@
return (v - this.o.min) * this.angleArc / (this.o.max - this.o.min);
};

this.arc = function (v) {
var sa, ea;
v = this.angle(v);
if (this.o.flip) {
sa = this.endAngle + 0.00001;
ea = sa - v - 0.00001;
} else {
sa = this.startAngle - 0.00001;
ea = sa + v + 0.00001;
}
this.o.cursor
&& (sa = ea - this.cursorExt)
&& (ea = ea + this.cursorExt);
return {
s: sa,
e: ea,
d: this.o.flip && !this.o.cursor
};
};

this.draw = function () {

var c = this.g, // context
a = this.angle(this.cv) // Angle
, sat = this.startAngle // Start angle
, eat = sat + a // End angle
, sa, ea // Previous angles
a = this.arc(this.cv) // Arc
, pa // Previous arc
, r = 1;

c.lineWidth = this.lineWidth;

c.lineCap = this.lineCap;

this.o.cursor
&& (sat = eat - this.cursorExt)
&& (eat = eat + this.cursorExt);

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.stroke();

if (this.o.displayPrevious) {
ea = this.startAngle + this.angle(this.v);
sa = this.startAngle;
this.o.cursor
&& (sa = ea - this.cursorExt)
&& (ea = ea + this.cursorExt);

pa = this.arc(this.v);
c.beginPath();
c.strokeStyle = this.pColor;
c.arc(this.xy, this.xy, this.radius, sa - 0.00001, ea + 0.00001, false);
c.arc(this.xy, this.xy, this.radius, pa.s, pa.e, pa.d);
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 - 0.00001, eat + 0.00001, false);
c.arc(this.xy, this.xy, this.radius, a.s, a.e, a.d);
c.stroke();
};

Expand All @@ -774,4 +789,4 @@
).parent();
};

})(jQuery);
})(jQuery);

0 comments on commit 9af8860

Please sign in to comment.