Knob control

Subject: Knob control Tue Feb 07, 2017 2:56 pm

I was working on a knob control (rotary button) simply customizing a code found online and built by Anthony Terrien. It's basically required some more development in the making more flexible but its working fine at the moment.

Here just a pic:

and here you can have my HTML file (copy the code below and save it as simple html page):

Code:: <!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Knob demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="knob.js"></script>
</head>

<body>
<input type="text" class="dial">

<script>
/* */
$(".dial").knob({
'min':0,
'max':360,
'step':0.1,
'width':100,
'thickness':.05,
'lineCap':'butt',
'angleArc':360,
'angleOffset':0,
'bgColor':'#F4F4F4',
'fgColor':'#FF0000',
'cursor':true
});
</script>

</body>
</html>

... and the knob.js library (copy the code below and save it as knob.js):

Code:: (function(e) {
if (typeof define === "function" && define.amd) {
define(["jquery"], e)
} else {
e(jQuery)
}
})(function(e) {
"use strict";
var t = {},
n = Math.max,
r = Math.min;
t.c = {};
t.c.d = e(document);
t.c.t = function(e) {
return e.originalEvent.touches.length - 1
};
t.o = function() {
var n = this;
this.o = null;
this.$ = null;
this.i = null;
this.g = null;
this.v = null;
this.cv = null;
this.x = 0;
this.y = 0;
this.w = 0;
this.h = 0;
this.$c = null;
this.c = null;
this.t = 0;
this.isInit = false;
this.fgColor = null;
this.pColor = null;
this.dH = null;
this.cH = null;
this.eH = null;
this.rH = null;
this.scale = 1;
this.relative = false;
this.relativeWidth = false;
this.relativeHeight = false;
this.$div = null;
this.run = function() {
var t = function(e, t) {
var r;
for (r in t) {
n.o[r] = t[r]
}
n._carve().init();
n._configure()._draw()
};
if (this.$.data("kontroled")) return;
this.$.data("kontroled", true);
this.extend();
this.o = e.extend({
min: this.$.data("min") !== undefined ? this.$.data("min") : 0,
max: this.$.data("max") !== undefined ? this.$.data("max") : 100,
stopper: true,
readOnly: this.$.data("readonly") || this.$.attr("readonly") === "readonly",
cursor: this.$.data("cursor") === true && 30 || this.$.data("cursor") || 0,
thickness: this.$.data("thickness") && Math.max(Math.min(this.$.data("thickness"), 1), .01) || .35,
lineCap: this.$.data("linecap") || "butt",
width: this.$.data("width") || 200,
height: this.$.data("height") || 200,
displayInput: this.$.data("displayinput") == null || this.$.data("displayinput"),
displayPrevious: this.$.data("displayprevious"),
fgColor: this.$.data("fgcolor") || "#87CEEB",
inputColor: this.$.data("inputcolor"),
font: this.$.data("font") || "Arial",
fontWeight: this.$.data("font-weight") || "bold",
inline: false,
step: this.$.data("step") || 1,
rotation: this.$.data("rotation"),
draw: null,
change: null,
cancel: null,
release: null,
format: function(e) {
return e
},
parse: function(e) {
return parseFloat(e)
}
}, this.o);
this.o.flip = this.o.rotation === "anticlockwise" || this.o.rotation === "acw";
if (!this.o.inputColor) {
this.o.inputColor = this.o.fgColor
}
if (this.$.is("fieldset")) {
this.v = {};
this.i = this.$.find("input");
this.i.each(function(t) {
var r = e(this);
n.i[t] = r;
n.v[t] = n.o.parse(r.val());
r.bind("change blur", function() {
var e = {};
e[t] = r.val();
n.val(n._validate(e))
})
});
this.$.find("legend").remove()
} else {
this.i = this.$;
this.v = this.o.parse(this.$.val());
this.v === "" && (this.v = this.o.min);
this.$.bind("change blur", function() {
n.val(n._validate(n.o.parse(n.$.val())))
})
}!this.o.displayInput && this.$.hide();
this.$c = e(document.createElement("canvas")).attr({
width: this.o.width,
height: this.o.height
});
this.$div = e('<div style="' + (this.o.inline ? "display:inline;" : "") + "width:" + this.o.width + "px;height:" + this.o.height + "px;" + '"></div>');
this.$.wrap(this.$div).before(this.$c);
this.$div = this.$.parent();
if (typeof G_vmlCanvasManager !== "undefined") {
G_vmlCanvasManager.initElement(this.$c[0])
}
this.c = this.$c[0].getContext ? this.$c[0].getContext("2d") : null;
if (!this.c) {
throw {
name: "CanvasNotSupportedException",
message: "Canvas not supported. Please use excanvas on IE8.0.",
toString: function() {
return this.name + ": " + this.message
}
}
}
this.scale = (window.devicePixelRatio || 1) / (this.c.webkitBackingStorePixelRatio || this.c.mozBackingStorePixelRatio || this.c.msBackingStorePixelRatio || this.c.oBackingStorePixelRatio || this.c.backingStorePixelRatio || 1);
this.relativeWidth = this.o.width % 1 !== 0 && this.o.width.indexOf("%");
this.relativeHeight = this.o.height % 1 !== 0 && this.o.height.indexOf("%");
this.relative = this.relativeWidth || this.relativeHeight;
this._carve();
if (this.v instanceof Object) {
this.cv = {};
this.copy(this.v, this.cv)
} else {
this.cv = this.v
}
this.$.bind("configure", t).parent().bind("configure", t);
this._listen()._configure()._xy().init();
this.isInit = true;
this.$.val(this.o.format(this.v));
this._draw();
return this
};
this._carve = function() {
if (this.relative) {
var e = this.relativeWidth ? this.$div.parent().width() * parseInt(this.o.width) / 100 : this.$div.parent().width(),
t = this.relativeHeight ? this.$div.parent().height() * parseInt(this.o.height) / 100 : this.$div.parent().height();
this.w = this.h = Math.min(e, t)
} else {
this.w = this.o.width;
this.h = this.o.height
}
this.$div.css({
width: this.w + "px",
height: this.h + "px"
});
this.$c.attr({
width: this.w,
height: this.h
});
if (this.scale !== 1) {
this.$c[0].width = this.$c[0].width * this.scale;
this.$c[0].height = this.$c[0].height * this.scale;
this.$c.width(this.w);
this.$c.height(this.h)
}
return this
};
this._draw = function() {
var e = true;
n.g = n.c;
n.clear();
n.dH && (e = n.dH());
e !== false && n.draw()
};
this._touch = function(e) {
var r = function(e) {
var t = n.xy2val(e.originalEvent.touches[n.t].pageX, e.originalEvent.touches[n.t].pageY);
if (t == n.cv) return;
if (n.cH && n.cH(t) === false) return;
n.change(n._validate(t));
n._draw()
};
this.t = t.c.t(e);
r(e);
t.c.d.bind("touchmove.k", r).bind("touchend.k", function() {
t.c.d.unbind("touchmove.k touchend.k");
n.val(n.cv)
});
return this
};
this._mouse = function(e) {
var r = function(e) {
var t = n.xy2val(e.pageX, e.pageY);
if (t == n.cv) return;
if (n.cH && n.cH(t) === false) return;
n.change(n._validate(t));
n._draw()
};
r(e);
t.c.d.bind("mousemove.k", r).bind("keyup.k", function(e) {
if (e.keyCode === 27) {
t.c.d.unbind("mouseup.k mousemove.k keyup.k");
if (n.eH && n.eH() === false) return;
n.cancel()
}
}).bind("mouseup.k", function(e) {
t.c.d.unbind("mousemove.k mouseup.k keyup.k");
n.val(n.cv)
});
return this
};
this._xy = function() {
var e = this.$c.offset();
this.x = e.left;
this.y = e.top;
return this
};
this._listen = function() {
if (!this.o.readOnly) {
this.$c.bind("mousedown", function(e) {
e.preventDefault();
n._xy()._mouse(e)
}).bind("touchstart", function(e) {
e.preventDefault();
n._xy()._touch(e)
});
this.listen()
} else {
this.$.attr("readonly", "readonly")
}
if (this.relative) {
e(window).resize(function() {
n._carve().init();
n._draw()
})
}
return this
};
this._configure = function() {
if (this.o.draw) this.dH = this.o.draw;
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.displayPrevious) {
this.pColor = this.h2rgba(this.o.fgColor, "0.4");
this.fgColor = this.h2rgba(this.o.fgColor, "0.6")
} else {
this.fgColor = this.o.fgColor
}
return this
};
this._clear = function() {
this.$c[0].width = this.$c[0].width
};
this._validate = function(e) {
var t = ~~((e < 0 ? -.5 : .5) + e / this.o.step) * this.o.step;
return Math.round(t * 100) / 100
};
this.listen = function() {};
this.extend = function() {};
this.init = function() {};
this.change = function(e) {};
this.val = function(e) {};
this.xy2val = function(e, t) {};
this.draw = function() {};
this.clear = function() {
this._clear()
};
this.h2rgba = function(e, t) {
var n;
e = e.substring(1, 7);
n = [parseInt(e.substring(0, 2), 16), parseInt(e.substring(2, 4), 16), parseInt(e.substring(4, 6), 16)];
return "rgba(" + n[0] + "," + n[1] + "," + n[2] + "," + t + ")"
};
this.copy = function(e, t) {
for (var n in e) {
t[n] = e[n]
}
}
};
t.Dial = function() {
t.o.call(this);
this.startAngle = null;
this.xy = null;
this.radius = null;
this.lineWidth = null;
this.cursorExt = null;
this.w2 = null;
this.PI2 = 2 * Math.PI;
this.extend = function() {
this.o = e.extend({
bgColor: this.$.data("bgcolor") || "#EEEEEE",
angleOffset: this.$.data("angleoffset") || 0,
angleArc: this.$.data("anglearc") || 360,
inline: true
}, this.o)
};
this.val = function(e, t) {
if (null != e) {
e = this.o.parse(e);
if (t !== false && e != this.v && this.rH && this.rH(e) === false) {
return
}
this.cv = this.o.stopper ? n(r(e, this.o.max), this.o.min) : e;
this.v = this.cv;
this.$.val(this.o.format(this.v));
this._draw()
} else {
return this.v
}
};
this.xy2val = function(e, t) {
var i, s;
i = Math.atan2(e - (this.x + this.w2), -(t - this.y - this.w2)) - this.angleOffset;
if (this.o.flip) {
i = this.angleArc - i - this.PI2
}
if (this.angleArc != this.PI2 && i < 0 && i > -.5) {
i = 0
} else if (i < 0) {
i += this.PI2
}
s = i * (this.o.max - this.o.min) / this.angleArc + this.o.min;
this.o.stopper && (s = n(r(s, this.o.max), this.o.min));
return s
};
this.listen = function() {
var t = this,
i, s, o = function(e) {
e.preventDefault();
var o = e.originalEvent,
u = o.detail || o.wheelDeltaX,
a = o.detail || o.wheelDeltaY,
f = t._validate(t.o.parse(t.$.val())) + (u > 0 || a > 0 ? t.o.step : u < 0 || a < 0 ? -t.o.step : 0);
f = n(r(f, t.o.max), t.o.min);
t.val(f, false);
if (t.rH) {
clearTimeout(i);
i = setTimeout(function() {
t.rH(f);
i = null
}, 100);
if (!s) {
s = setTimeout(function() {
if (i) t.rH(f);
s = null
}, 200)
}
}
},
u, a, f = 1,
l = {
37: -t.o.step,
38: t.o.step,
39: t.o.step,
40: -t.o.step
};
this.$.bind("keydown", function(i) {
var s = i.keyCode;
if (s >= 96 && s <= 105) {
s = i.keyCode = s - 48
}
u = parseInt(String.fromCharCode(s));
if (isNaN(u)) {
s !== 13 && s !== 8 && s !== 9 && s !== 189 && (s !== 190 || t.$.val().match(/\./)) && i.preventDefault();
if (e.inArray(s, [37, 38, 39, 40]) > -1) {
i.preventDefault();
var o = t.o.parse(t.$.val()) + l[s] * f;
t.o.stopper && (o = n(r(o, t.o.max), t.o.min));
t.change(t._validate(o));
t._draw();
a = window.setTimeout(function() {
f *= 2
}, 30)
}
}
}).bind("keyup", function(e) {
if (isNaN(u)) {
if (a) {
window.clearTimeout(a);
a = null;
f = 1;
t.val(t.$.val())
}
} else {
t.$.val() > t.o.max && t.$.val(t.o.max) || t.$.val() < t.o.min && t.$.val(t.o.min)
}
});
this.$c.bind("mousewheel DOMMouseScroll", o);
this.$.bind("mousewheel DOMMouseScroll", o)
};
this.init = function() {
if (this.v < this.o.min || this.v > this.o.max) {
this.v = this.o.min
}
this.$.val(this.v);
this.w2 = this.w / 2;
this.cursorExt = this.o.cursor / 100;
this.xy = this.w2 * this.scale;
this.lineWidth = this.xy * this.o.thickness;
this.lineCap = this.o.lineCap;
this.radius = this.xy - this.lineWidth / 2;
this.o.angleOffset && (this.o.angleOffset = isNaN(this.o.angleOffset) ? 0 : this.o.angleOffset);
this.o.angleArc && (this.o.angleArc = isNaN(this.o.angleArc) ? this.PI2 : this.o.angleArc);
this.angleOffset = this.o.angleOffset * Math.PI / 180;
this.angleArc = this.o.angleArc * Math.PI / 180;
this.startAngle = 1.5 * Math.PI + this.angleOffset;
this.endAngle = 1.5 * Math.PI + this.angleOffset + this.angleArc;
var e = n(String(Math.abs(this.o.max)).length, String(Math.abs(this.o.min)).length, 2) + 2;
this.o.displayInput && this.i.css({
width: (this.w / 2 + 4 >> 0) + "px",
height: (this.w / 3 >> 0) + "px",
position: "absolute",
"vertical-align": "middle",
"margin-top": (this.w / 3 >> 0) + "px",
"margin-left": "-" + (this.w * 3 / 4 + 2 >> 0) + "px",
border: 0,
background: "none",
font: this.o.fontWeight + " " + (this.w / e >> 0) + "px " + this.o.font,
"text-align": "center",
color: this.o.inputColor || this.o.fgColor,
padding: "0px",
"-webkit-appearance": "none"
}) || this.i.css({
width: "0px",
visibility: "hidden"
})
};
this.change = function(e) {
this.cv = e;
this.$.val(this.o.format(e))
};
this.angle = function(e) {
return (e - this.o.min) * this.angleArc / (this.o.max - this.o.min)
};
this.arc = function(e) {
var t, n;
e = this.angle(e);
if (this.o.flip) {
t = this.endAngle + 1e-5;
n = t - e - 1e-5
} else {
t = this.startAngle - 1e-5;
n = t + e + 1e-5
}
this.o.cursor && (t = n - this.cursorExt) && (n = n + this.cursorExt);
return {
s: t,
e: n,
d: this.o.flip && !this.o.cursor
}
};
this.draw = function() {
var e = this.g,
t = this.arc(this.cv),
n, r = 1;
e.lineWidth = this.lineWidth;
e.lineCap = this.lineCap;
if (this.o.bgColor !== "none") {
e.beginPath();
e.strokeStyle = this.o.bgColor;
e.arc(this.xy, this.xy, this.radius, this.endAngle - 1e-5, this.startAngle + 1e-5, true);
e.stroke()
}
if (this.o.displayPrevious) {
n = this.arc(this.v);
e.beginPath();
e.strokeStyle = this.pColor;
e.arc(this.xy, this.xy, this.radius, n.s, n.e, n.d);
e.stroke();
r = this.cv == this.v
}
e.beginPath();
e.strokeStyle = r ? this.o.fgColor : this.fgColor;
e.arc(this.xy, this.xy, this.radius, t.s, t.e, t.d);
e.stroke()
};
this.cancel = function() {
this.val(this.v)
}
};
e.fn.dial = e.fn.knob = function(n) {
return this.each(function() {
var r = new t.Dial;
r.o = n;
r.$ = e(this);
r.run()
}).parent()
}
})

Subject: Re: Knob control Tue Feb 07, 2017 3:03 pm

You can customize the knob control in your script with a lot of parameters, but in my vision I basically need a bit more customizations, especially graphic customization. Im working on the Anthony code.

<script>
/* */
$(".dial").knob({
'min':0,
'max':360,
'step':0.1,
'width':100,
'thickness':.05,
'lineCap':'butt',
'angleArc':360,
'angleOffset':0,
'bgColor':'#F4F4F4',
'fgColor':'#FF0000',
'cursor':true
});
</script>

Subject: Re: Knob control Tue Feb 07, 2017 4:46 pm

I just downloaded and tried this code Admin,
ok yes its working good but i moved the knobsì.js out from a root dir.

So now, how the way i can use it in with three.s is just getting info from the input field right?

Subject: Re: Knob control Tue Feb 07, 2017 8:11 pm

Wow yes this is what i was looking for man. Is there a way to customize it via CSS?

Subject: Re: Knob control Wed Feb 08, 2017 9:25 am

Is is compatible with dat.gui or should i use that as a new library?

Subject: Re: Knob control Wed Feb 08, 2017 2:49 pm

No WebForce
as you can see inside the code it must be executed as a single code.
"dat.gui" library is another thing

More than 20 users,
almost 150 posts,
a new big project is coming,
about …

Dear members,

I have personally made some changements into the forum, now …

Dear Members,

it is my pleasure to tell you below all the new functions I …