From f585af7fcb348cfccc2c624b95fc934923d484b5 Mon Sep 17 00:00:00 2001 From: Zach Supalla Date: Thu, 6 Sep 2012 11:45:37 -0500 Subject: [PATCH 1/3] First stab at adding a click event --- README.md | 2 ++ js/jquery.knob.js | 21 +++++++++++++++++---- 2 files changed, 19 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index c8a4c3f..580e53f 100644 --- a/README.md +++ b/README.md @@ -79,6 +79,8 @@ Hooks * 'cancel' : triggered on [esc] keydown +* 'clicked' : executed on release when the value hasn't changed (just a click) + The scope (this) of each hook function is the current Knob instance (refer to the demo code). Example diff --git a/js/jquery.knob.js b/js/jquery.knob.js index d3a6026..57bac64 100644 --- a/js/jquery.knob.js +++ b/js/jquery.knob.js @@ -63,6 +63,7 @@ this.cH = null; // change hook this.eH = null; // cancel hook this.rH = null; // release hook + this.clH = null; // clicked hook this.run = function () { var cf = function (e, conf) { @@ -103,7 +104,8 @@ draw : null, // function () {} change : null, // function (value) {} cancel : null, // function () {} - release : null // function (value) {} + release : null, // function (value) {} + clicked : null // function (value) {} }, this.o ); @@ -210,7 +212,7 @@ e.originalEvent.touches[s.t].pageY ); - if (v == s.cv) return; + if (v == s.cv) return; // this is where the click event should go. I think. if ( s.cH @@ -236,10 +238,15 @@ , function () { k.c.d.unbind('touchmove.k touchend.k'); + // If the touch is released but there's no new value, call a clicked event if ( s.rH && (s.rH(s.cv) === false) - ) return; + ) { + s.clH(); // Added a clicked hook + console.log("Clicked event"); // For debugging + return; + } s.val(s.cv); } @@ -290,10 +297,15 @@ , function (e) { k.c.d.unbind('mousemove.k mouseup.k keyup.k'); + // If the click is released and there's no change in value, call a clicked event if ( s.rH && (s.rH(s.cv) === false) - ) return; + ) { + s.clH; // Added a "clicked" event here + console.log("Clicked event"); // Just for debugging + return; + } s.val(s.cv); } @@ -342,6 +354,7 @@ if (this.o.change) this.cH = this.o.change; if (this.o.cancel) this.eH = this.o.cancel; if (this.o.release) this.rH = this.o.release; + if (this.o.clicked) this.clH = this.o.clicked; if (this.o.displayPrevious) { this.pColor = this.h2rgba(this.o.fgColor, "0.4"); From 28712b9c7a3e694b9cfccbcf39fad240649722b8 Mon Sep 17 00:00:00 2001 From: Zach Supalla Date: Thu, 6 Sep 2012 13:32:39 -0500 Subject: [PATCH 2/3] Click function works --- js/jquery.knob.js | 34 ++++++++++++++++++---------------- 1 file changed, 18 insertions(+), 16 deletions(-) diff --git a/js/jquery.knob.js b/js/jquery.knob.js index 57bac64..8757a37 100644 --- a/js/jquery.knob.js +++ b/js/jquery.knob.js @@ -238,14 +238,15 @@ , function () { k.c.d.unbind('touchmove.k touchend.k'); - // If the touch is released but there's no new value, call a clicked event - if ( - s.rH - && (s.rH(s.cv) === false) - ) { - s.clH(); // Added a clicked hook - console.log("Clicked event"); // For debugging - return; + if ( s.v === s.cv) { + if ( s.clH && (s.clH() === false) ) { + return; + } + } + else { + if ( s.rH && (s.rH(s.cv) === false) ) { + return; + } } s.val(s.cv); @@ -297,14 +298,15 @@ , function (e) { k.c.d.unbind('mousemove.k mouseup.k keyup.k'); - // If the click is released and there's no change in value, call a clicked event - if ( - s.rH - && (s.rH(s.cv) === false) - ) { - s.clH; // Added a "clicked" event here - console.log("Clicked event"); // Just for debugging - return; + if ( s.v === s.cv) { + if ( s.clH && (s.clH() === false) ) { + return; + } + } + else { + if ( s.rH && (s.rH(s.cv) === false) ) { + return; + } } s.val(s.cv); From 91891cbb77c8fdfdfcf671606b3ea8ff400cb76a Mon Sep 17 00:00:00 2001 From: Zach Supalla Date: Thu, 6 Sep 2012 16:23:54 -0500 Subject: [PATCH 3/3] Added button in the middle --- js/jquery.knob.js | 96 +++++++++++++++++++++++++++++++++++------------ 1 file changed, 73 insertions(+), 23 deletions(-) diff --git a/js/jquery.knob.js b/js/jquery.knob.js index 8757a37..5f3c698 100644 --- a/js/jquery.knob.js +++ b/js/jquery.knob.js @@ -51,6 +51,8 @@ this.g = null; // 2D graphics context for 'pre-rendering' this.v = null; // value ; mixed array or integer this.cv = null; // change value ; not commited value + this.did = null; + this.on = null; // on = true; off = false this.x = 0; // canvas x position this.y = 0; // canvas y position this.$c = null; // jQuery canvas element @@ -63,7 +65,8 @@ this.cH = null; // change hook this.eH = null; // cancel hook this.rH = null; // release hook - this.clH = null; // clicked hook + this.onH = null; + this.offH = null; this.run = function () { var cf = function (e, conf) { @@ -82,6 +85,10 @@ this.extend(); this.o = $.extend( { + // Device info + deviceid : this.$.data('deviceid') || "No ID", + devicestatus: this.$.data('devicestatus') || false, + // Config min : this.$.data('min') || 0, max : this.$.data('max') || 100, @@ -105,7 +112,8 @@ change : null, // function (value) {} cancel : null, // function () {} release : null, // function (value) {} - clicked : null // function (value) {} + turnon : null, + turnoff : null }, this.o ); @@ -212,7 +220,7 @@ e.originalEvent.touches[s.t].pageY ); - if (v == s.cv) return; // this is where the click event should go. I think. + if (v == s.cv) return; if ( s.cH @@ -238,15 +246,8 @@ , function () { k.c.d.unbind('touchmove.k touchend.k'); - if ( s.v === s.cv) { - if ( s.clH && (s.clH() === false) ) { - return; - } - } - else { - if ( s.rH && (s.rH(s.cv) === false) ) { - return; - } + if ( s.rH && (s.rH(s.cv, s.did) === false) ) { + return; } s.val(s.cv); @@ -258,17 +259,32 @@ this._mouse = function (e) { + var btn = s.testdistance(e.pageX, e.pageY); + + if (btn) { + s.toggle(); + return; + } + var mouseMove = function (e) { var v = s.xy2val(e.pageX, e.pageY); + + // If v returns false, toggle the light + if ( !v ) { + s.toggle(); + return false; + } + if (v == s.cv) return; if ( s.cH && (s.cH(v) === false) - ) return; + ) return true; s.change(v); s._draw(); + return true; }; // First click @@ -298,15 +314,8 @@ , function (e) { k.c.d.unbind('mousemove.k mouseup.k keyup.k'); - if ( s.v === s.cv) { - if ( s.clH && (s.clH() === false) ) { - return; - } - } - else { - if ( s.rH && (s.rH(s.cv) === false) ) { - return; - } + if ( s.rH && (s.rH(s.cv, s.did) === false) ) { + return; } s.val(s.cv); @@ -356,7 +365,8 @@ if (this.o.change) this.cH = this.o.change; if (this.o.cancel) this.eH = this.o.cancel; if (this.o.release) this.rH = this.o.release; - if (this.o.clicked) this.clH = this.o.clicked; + if (this.o.turnon) this.onH = this.o.turnon; + if (this.o.turnoff) this.offH = this.o.turnoff; if (this.o.displayPrevious) { this.pColor = this.h2rgba(this.o.fgColor, "0.4"); @@ -365,6 +375,9 @@ this.fgColor = this.o.fgColor; } + this.did = this.o.deviceid; + this.on = this.o.devicestatus; + return this; }; @@ -378,9 +391,11 @@ this.init = function () {}; // each time configure triggered this.change = function (v) {}; // on change this.val = function (v) {}; // on release + this.testdistance = function (x, y) {}; this.xy2val = function (x, y) {}; // this.draw = function () {}; // on change / on release this.clear = function () { this._clear(); }; + this.toggle = function () {}; // on button click // Utils this.h2rgba = function (h, a) { @@ -434,6 +449,14 @@ } }; + this.testdistance = function (x, y) { + var dist = Math.floor(Math.sqrt( + Math.pow(x - (this.x + this.w2), 2) + + Math.pow(y - (this.y + this.w2), 2))) + + return dist < this.radius - this.lineWidth / 2; + } + this.xy2val = function (x, y) { var a, ret; @@ -623,11 +646,26 @@ && (sat = eat - this.cursorExt) && (eat = eat + this.cursorExt); + // Draw the full-size arc c.beginPath(); c.strokeStyle = this.o.bgColor; c.arc(this.xy, this.xy, this.radius, this.endAngle, this.startAngle, true); c.stroke(); + // Create a button radius that is 3px less than the radius minus the lineWidth + var br = this.radius - this.lineWidth / 2 - 3; + + // Draw a circular button in the middle + c.beginPath(); + if (this.on) { + c.fillStyle = r ? this.o.fgColor : this.fgColor; + } + else { + c.fillStyle = this.o.bgColor; + } + c.arc(this.xy, this.xy, br, this.endAngle, this.startAngle, true); + c.fill(); + if (this.o.displayPrevious) { ea = this.startAngle + this.angle(this.v); sa = this.startAngle; @@ -642,12 +680,24 @@ r = (this.cv == this.v); } + // Draw the partial arc for the value c.beginPath(); c.strokeStyle = r ? this.o.fgColor : this.fgColor ; c.arc(this.xy, this.xy, this.radius, sat, eat, false); c.stroke(); }; + this.toggle = function () { + this.on = !this.on; + if (this.on && this.onH) { + this.onH(this.did); + } + else if (this.offH) { + this.offH(this.did); + } + this._draw(); + } + this.cancel = function () { this.val(this.v); };