Skip to content

Allow choice of rotation; clockwise/anticlockwise #136

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Mar 4, 2014
Merged

Allow choice of rotation; clockwise/anticlockwise #136

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e0f3b77
Allow choice of rotation; clockwise/anticlockwise
mal Nov 3, 2013
337ab0e
Update tron skin to use new arc function
mal Nov 7, 2013
3ef3110
Add an example of the rotation option
mal Nov 7, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion README.md
View file
Open in desktop
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
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,33 +24,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 @@ -156,8 +148,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
Open in desktop
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 @@ -120,6 +121,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 @@ -526,6 +528,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 @@ -705,45 +711,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 @@ -763,4 +778,4 @@
).parent();
};

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