Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

adding a way set the arc angle of the knob #36

Closed
wants to merge 8 commits into from

2 participants

@FabrizioC

No description provided.

@aterrien aterrien closed this pull request from a commit
@aterrien global refactoring / optimizations / fix #36
- refactoring of hooks
- angleOffset, angleArc (fix #36)
- canvas pre-rendering
- (lot of) optimizations
- 5+ digit support
- improved positioning of the input
- Knob is now part of Kontrol ^^
- tron skin removed
- ticks removed
0a883f3
@aterrien aterrien closed this in 0a883f3
@Aeon Aeon referenced this pull request from a commit in Aeon/jQuery-Knob
@aterrien global refactoring / optimizations / fix #36
- refactoring of hooks
- angleOffset, angleArc (fix #36)
- canvas pre-rendering
- (lot of) optimizations
- 5+ digit support
- improved positioning of the input
- Knob is now part of Kontrol ^^
- tron skin removed
- ticks removed
a6bd227
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Jun 26, 2012
  1. @FabrizioC

    added option 'angleAperture' || default = 360

    FabrizioC authored
    'angleAperture' define maximum angle of knob (in degree)
Commits on Jun 27, 2012
  1. @FabrizioC
  2. @FabrizioC
  3. @FabrizioC
  4. @FabrizioC

    added option 'angleArc' || default = 360

    FabrizioC authored
    'angleArc' define the angle of knob (in degree)
  5. @FabrizioC

    Added angleArc example

    FabrizioC authored
  6. @FabrizioC

    added 'angleArc' description

    FabrizioC authored
  7. @FabrizioC

    added option 'angleBgCircle' || default = false

    FabrizioC authored
    'angleBgCircle' show a full circle background when 'angleArc' is less
    than 360 degrees.
This page is out of date. Refresh to see the latest.
Showing with 25 additions and 5 deletions.
  1. +1 −0  README.md
  2. +12 −0 index.html
  3. +12 −5 js/jquery.knob.js
View
1  README.md
@@ -38,6 +38,7 @@ Behaviors :
* stopper : stop at 0 & 100 on keydown/mousewheel || default=true.
* readOnly : disable input and events.
* angleOffset: change the 0 position of the knob (in degree), || default=0.
+* angleArc: change the angle of the knob (in degree), || default=360.
UI :
* cursor : display mode "cursor" | default=gauge.
View
12 index.html
@@ -130,6 +130,18 @@
</pre>
<input class="knob"data-width="200" data-min="-100" data-angleOffset="90" data-displayPrevious=true value="44">
</div>
+ <div style="float:left;width:300px;height:300px;padding:20px">
+ <pre>
+data-width="200"
+data-min="0"
+data-max="100"
+data-cgColor="#A9EFFD"
+data-displayPrevious=true
+data-angleOffset="-135"
+data-angleArc="270"
+ </pre>
+ <input class="knob"data-width="200" data-min="0" data-max="100" data-angleOffset="-135" data-angleArc="270" data-displayPrevious=true value="44">
+ </div>
<div style="clear:both"></div>
<div style="float:left;width:300px;height:320px;padding:20px">
<h2>Ticks</h2>
View
17 js/jquery.knob.js
@@ -36,8 +36,10 @@ $(function () {
} else {
var b, a;
b = a = Math.atan2(mx - x, -(my - y - opt.width / 2)) - opt.angleOffset;
- (a < 0) && (b = a + PI2);
- nv = Math.round(b * (opt.max - opt.min) / PI2) + opt.min;
+// (a < 0) && (b = a + PI2);
+ (a < 0) && (b = a + opt.angleArc);
+// nv = Math.round(b * (opt.max - opt.min) / PI2) + opt.min;
+ nv = Math.round(b * (opt.max - opt.min) / opt.angleArc) + opt.min;
return (nv > opt.max) ? opt.max : nv;
}
};
@@ -49,7 +51,7 @@ $(function () {
};
this.angle = function (nv) {
- return (nv - opt.min) * PI2 / (opt.max - opt.min);
+ return (nv - opt.min) * opt.angleArc / (opt.max - opt.min);
};
this.draw = function (nv) {
@@ -63,6 +65,8 @@ $(function () {
,lw = r * opt.thickness // Line width
,cgcolor = Dial.getCgColor(opt.cgColor)
,tick
+ ,bsa = sa
+ ,bea = bsa + (opt.angleBgCircle ? (2 * Math.PI) : opt.angleArc)
;
ctx.clearRect(0, 0, opt.width, opt.width);
@@ -98,7 +102,7 @@ $(function () {
ctx.beginPath();
ctx.strokeStyle = opt.bgColor;
- ctx.arc(r, r, r - lw / 2, 0, PI2, true);
+ ctx.arc(r, r, r - lw / 2, bea, bsa, true);
ctx.stroke();
if (opt.displayPrevious) {
@@ -242,7 +246,10 @@ $(function () {
,'tickWidth' : $this.data('tickWidth') || 0.02
,'tickColorizeValues' : $this.data('tickColorizeValues') || true
,'skin' : $this.data('skin') || 'default'
- ,'angleOffset': degreeToRadians($this.data('angleoffset'))
+ ,'angleOffset': degreeToRadians($this.data('angleoffset'))
+ ,'angleArc': degreeToRadians($this.data('anglearc')) || 2 * Math.PI
+ ,'angleBgCircle': $this.data('anglebgcircle') || false
+
// Hooks
,'draw' :
Something went wrong with that request. Please try again.