You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
376 lines
12 KiB
JavaScript
376 lines
12 KiB
JavaScript
3 years ago
|
window.addEventListener("load", () => {
|
||
|
|
let op = window.inputKnobsOptions || {};
|
||
|
|
op.knobWidth = op.knobWidth || op.knobDiameter || 64;
|
||
|
|
op.knobHeight = op.knobHeight || op.knobDiameter || 64;
|
||
|
|
op.sliderWidth = op.sliderWidth || op.sliderDiameter || 128;
|
||
|
|
op.sliderHeight = op.sliderHeight || op.sliderDiameter || 20;
|
||
|
|
op.switchWidth = op.switchWidth || op.switchDiameter || 24;
|
||
|
|
op.switchHeight = op.switchHeight || op.switchDiameter || 24;
|
||
|
|
op.fgcolor = op.fgcolor || "#fff";
|
||
|
|
op.bgcolor = op.bgcolor || "#000";
|
||
|
|
op.knobMode = op.knobMode || "linear";
|
||
|
|
op.sliderMode = op.sliderMode || "relative";
|
||
|
|
let styles = document.createElement("style");
|
||
|
|
styles.innerHTML = `input[type=range].input-knob,input[type=range].input-slider{
|
||
|
|
-webkit-appearance:none;
|
||
|
|
-moz-appearance:none;
|
||
|
|
border:none;
|
||
|
|
box-sizing:border-box;
|
||
|
|
overflow:hidden;
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
background-size:100% 100%;
|
||
|
|
background-position:0px 0%;
|
||
|
|
background-color:transparent;
|
||
|
|
touch-action:none;
|
||
|
|
}
|
||
|
|
input[type=range].input-knob{
|
||
|
|
width:${op.knobWidth}px; height:${op.knobHeight}px;
|
||
|
|
}
|
||
|
|
input[type=range].input-slider{
|
||
|
|
width:${op.sliderWidth}px; height:${op.sliderHeight}px;
|
||
|
|
}
|
||
|
|
input[type=range].input-knob::-webkit-slider-thumb,input[type=range].input-slider::-webkit-slider-thumb{
|
||
|
|
-webkit-appearance:none;
|
||
|
|
opacity:0;
|
||
|
|
}
|
||
|
|
input[type=range].input-knob::-moz-range-thumb,input[type=range].input-slider::-moz-range-thumb{
|
||
|
|
-moz-appearance:none;
|
||
|
|
height:0;
|
||
|
|
border:none;
|
||
|
|
}
|
||
|
|
input[type=range].input-knob::-moz-range-track,input[type=range].input-slider::-moz-range-track{
|
||
|
|
-moz-appearance:none;
|
||
|
|
height:0;
|
||
|
|
border:none;
|
||
|
|
}
|
||
|
|
input[type=checkbox].input-switch,input[type=radio].input-switch {
|
||
|
|
width:${op.switchWidth}px;
|
||
|
|
height:${op.switchHeight}px;
|
||
|
|
-webkit-appearance:none;
|
||
|
|
-moz-appearance:none;
|
||
|
|
background-size:100% 200%;
|
||
|
|
background-position:0% 0%;
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
border:none;
|
||
|
|
border-radius:0;
|
||
|
|
background-color:transparent;
|
||
|
|
}
|
||
|
|
input[type=checkbox].input-switch:checked,input[type=radio].input-switch:checked {
|
||
|
|
background-position:0% 100%;
|
||
|
|
}`;
|
||
|
|
document.head.appendChild(styles);
|
||
|
|
let makeKnobFrames = (fr, fg, bg) => {
|
||
|
|
let r = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="${
|
||
|
|
fr * 64
|
||
|
|
}" viewBox="0 0 64 ${fr * 64}" preserveAspectRatio="none">
|
||
|
|
<defs><g id="K"><circle cx="32" cy="32" r="30" fill="${bg}"/>
|
||
|
|
<line x1="32" y1="28" x2="32" y2="7" stroke-linecap="round" stroke-width="6" stroke="${fg}"/></g></defs>
|
||
|
|
<use xlink:href="#K" transform="rotate(-135,32,32)"/>`;
|
||
|
|
for (let i = 1; i < fr; ++i)
|
||
|
|
r += `<use xlink:href="#K" transform="translate(0,${64 * i}) rotate(${
|
||
|
|
-135 + (270 * i) / fr
|
||
|
|
},32,32)"/>`;
|
||
|
|
return r + "</svg>";
|
||
|
|
};
|
||
|
|
let makeHSliderFrames = (fr, fg, bg, w, h) => {
|
||
|
|
let r = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${w}" height="${
|
||
|
|
fr * h
|
||
|
|
}" viewBox="0 0 ${w} ${fr * h}" preserveAspectRatio="none">
|
||
|
|
<defs><g id="B"><rect x="0" y="0" width="${w}" height="${h}" rx="${h / 2}" ry="${
|
||
|
|
h / 2
|
||
|
|
}" fill="${bg}"/></g>
|
||
|
|
<g id="K"><circle x="${w / 2}" y="0" r="${(h / 2) * 0.9}" fill="${fg}"/></g></defs>`;
|
||
|
|
for (let i = 0; i < fr; ++i) {
|
||
|
|
r += `<use xlink:href="#B" transform="translate(0,${h * i})"/>`;
|
||
|
|
r += `<use xlink:href="#K" transform="translate(${h / 2 + ((w - h) * i) / 100},${
|
||
|
|
h / 2 + h * i
|
||
|
|
})"/>`;
|
||
|
|
}
|
||
|
|
return r + "</svg>";
|
||
|
|
};
|
||
|
|
let makeVSliderFrames = (fr, fg, bg, w, h) => {
|
||
|
|
let r = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${w}" height="${
|
||
|
|
fr * h
|
||
|
|
}" viewBox="0 0 ${w} ${fr * h}" preserveAspectRatio="none">
|
||
|
|
<defs><rect id="B" x="0" y="0" width="${w}" height="${h}" rx="${w / 2}" ry="${w / 2}" fill="${bg}"/>
|
||
|
|
<circle id="K" x="0" y="0" r="${(w / 2) * 0.9}" fill="${fg}"/></defs>`;
|
||
|
|
for (let i = 0; i < fr; ++i) {
|
||
|
|
r += `<use xlink:href="#B" transform="translate(0,${h * i})"/>`;
|
||
|
|
r += `<use xlink:href="#K" transform="translate(${w / 2} ${
|
||
|
|
h * (i + 1) - w / 2 - (i * (h - w)) / 100
|
||
|
|
})"/>`;
|
||
|
|
}
|
||
|
|
return r + "</svg>";
|
||
|
|
};
|
||
|
|
let initSwitches = (el) => {
|
||
|
|
let w, h, d, fg, bg;
|
||
|
|
if (el.inputKnobs) return;
|
||
|
|
el.inputKnobs = {};
|
||
|
|
el.refresh = () => {
|
||
|
|
let src = el.getAttribute("data-src");
|
||
|
|
d = +el.getAttribute("data-diameter");
|
||
|
|
let st = document.defaultView.getComputedStyle(el, null);
|
||
|
|
w = parseFloat(el.getAttribute("data-width") || d || st.width);
|
||
|
|
h = parseFloat(el.getAttribute("data-height") || d || st.height);
|
||
|
|
bg = el.getAttribute("data-bgcolor") || op.bgcolor;
|
||
|
|
fg = el.getAttribute("data-fgcolor") || op.fgcolor;
|
||
|
|
el.style.width = w + "px";
|
||
|
|
el.style.height = h + "px";
|
||
|
|
if (src) el.style.backgroundImage = "url(" + src + ")";
|
||
|
|
else {
|
||
|
|
let minwh = Math.min(w, h);
|
||
|
|
let svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${
|
||
|
|
h * 2
|
||
|
|
}" viewBox="0 0 ${w} ${h * 2}" preserveAspectRatio="none">
|
||
|
|
<g><rect fill="${bg}" x="1" y="1" width="${w - 2}" height="${h - 2}" rx="${minwh * 0.25}" ry="${
|
||
|
|
minwh * 0.25
|
||
|
|
}"/>
|
||
|
|
<rect fill="${bg}" x="1" y="${h + 1}" width="${w - 2}" height="${h - 2}" rx="${minwh * 0.25}" ry="${
|
||
|
|
minwh * 0.25
|
||
|
|
}"/>
|
||
|
|
<circle fill="${fg}" cx="${w * 0.5}" cy="${h * 1.5}" r="${minwh * 0.25}"/></g></svg>`;
|
||
|
|
el.style.backgroundImage = "url(data:image/svg+xml;base64," + btoa(svg) + ")";
|
||
|
|
}
|
||
|
|
};
|
||
|
|
el.refresh();
|
||
|
|
};
|
||
|
|
let initKnobs = (el) => {
|
||
|
|
let w, h, d, fg, bg;
|
||
|
|
if (el.inputKnobs) {
|
||
|
|
el.redraw();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
let ik = (el.inputKnobs = {});
|
||
|
|
el.refresh = () => {
|
||
|
|
d = +el.getAttribute("data-diameter");
|
||
|
|
let st = document.defaultView.getComputedStyle(el, null);
|
||
|
|
w = parseFloat(el.getAttribute("data-width") || d || st.width);
|
||
|
|
h = parseFloat(el.getAttribute("data-height") || d || st.height);
|
||
|
|
bg = el.getAttribute("data-bgcolor") || op.bgcolor;
|
||
|
|
fg = el.getAttribute("data-fgcolor") || op.fgcolor;
|
||
|
|
ik.sensex = ik.sensey = 200;
|
||
|
|
if (el.className.indexOf("input-knob") >= 0) ik.itype = "k";
|
||
|
|
else {
|
||
|
|
if (w >= h) {
|
||
|
|
ik.itype = "h";
|
||
|
|
ik.sensex = w - h;
|
||
|
|
ik.sensey = Infinity;
|
||
|
|
el.style.backgroundSize = "auto 100%";
|
||
|
|
} else {
|
||
|
|
ik.itype = "v";
|
||
|
|
ik.sensex = Infinity;
|
||
|
|
ik.sensey = h - w;
|
||
|
|
el.style.backgroundSize = "100% auto";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
el.style.width = w + "px";
|
||
|
|
el.style.height = h + "px";
|
||
|
|
ik.frameheight = h;
|
||
|
|
let src = el.getAttribute("data-src");
|
||
|
|
if (src) {
|
||
|
|
el.style.backgroundImage = `url(${src})`;
|
||
|
|
let sp = +el.getAttribute("data-sprites");
|
||
|
|
if (sp) ik.sprites = sp;
|
||
|
|
else ik.sprites = 0;
|
||
|
|
if (ik.sprites >= 1) el.style.backgroundSize = `100% ${(ik.sprites + 1) * 100}%`;
|
||
|
|
else if (ik.itype != "k") {
|
||
|
|
el.style.backgroundColor = bg;
|
||
|
|
el.style.borderRadius = Math.min(w, h) * 0.25 + "px";
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
let svg;
|
||
|
|
switch (ik.itype) {
|
||
|
|
case "k":
|
||
|
|
svg = makeKnobFrames(101, fg, bg);
|
||
|
|
break;
|
||
|
|
case "h":
|
||
|
|
svg = makeHSliderFrames(101, fg, bg, w, h);
|
||
|
|
break;
|
||
|
|
case "v":
|
||
|
|
svg = makeVSliderFrames(101, fg, bg, w, h);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
ik.sprites = 100;
|
||
|
|
el.style.backgroundImage = "url(data:image/svg+xml;base64," + btoa(svg) + ")";
|
||
|
|
el.style.backgroundSize = `100% ${(ik.sprites + 1) * 100}%`;
|
||
|
|
}
|
||
|
|
ik.valrange = {
|
||
|
|
min: +el.min,
|
||
|
|
max: el.max == "" ? 100 : +el.max,
|
||
|
|
step: el.step == "" ? 1 : +el.step,
|
||
|
|
};
|
||
|
|
el.redraw(true);
|
||
|
|
};
|
||
|
|
el.setValue = (v) => {
|
||
|
|
v =
|
||
|
|
Math.round((v - ik.valrange.min) / ik.valrange.step) * ik.valrange.step +
|
||
|
|
ik.valrange.min;
|
||
|
|
if (v < ik.valrange.min) v = ik.valrange.min;
|
||
|
|
if (v > ik.valrange.max) v = ik.valrange.max;
|
||
|
|
el.value = v;
|
||
|
|
if (el.value != ik.oldvalue) {
|
||
|
|
el.setAttribute("value", el.value);
|
||
|
|
el.redraw();
|
||
|
|
let event = document.createEvent("HTMLEvents");
|
||
|
|
event.initEvent("input", false, true);
|
||
|
|
el.dispatchEvent(event);
|
||
|
|
ik.oldvalue = el.value;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
ik.pointerdown = (ev) => {
|
||
|
|
el.focus();
|
||
|
|
const evorg = ev;
|
||
|
|
if (ev.touches) ev = ev.touches[0];
|
||
|
|
let rc = el.getBoundingClientRect();
|
||
|
|
let cx = (rc.left + rc.right) * 0.5,
|
||
|
|
cy = (rc.top + rc.bottom) * 0.5;
|
||
|
|
let dx = ev.clientX,
|
||
|
|
dy = ev.clientY;
|
||
|
|
let da = Math.atan2(ev.clientX - cx, cy - ev.clientY);
|
||
|
|
if (ik.itype == "k" && op.knobMode == "circularabs") {
|
||
|
|
dv =
|
||
|
|
ik.valrange.min +
|
||
|
|
((da / Math.PI) * 0.75 + 0.5) * (ik.valrange.max - ik.valrange.min);
|
||
|
|
el.setValue(dv);
|
||
|
|
}
|
||
|
|
if (ik.itype != "k" && op.sliderMode == "abs") {
|
||
|
|
dv =
|
||
|
|
(ik.valrange.min + ik.valrange.max) * 0.5 +
|
||
|
|
((dx - cx) / ik.sensex - (dy - cy) / ik.sensey) *
|
||
|
|
(ik.valrange.max - ik.valrange.min);
|
||
|
|
el.setValue(dv);
|
||
|
|
}
|
||
|
|
ik.dragfrom = {
|
||
|
|
x: ev.clientX,
|
||
|
|
y: ev.clientY,
|
||
|
|
a: Math.atan2(ev.clientX - cx, cy - ev.clientY),
|
||
|
|
v: +el.value,
|
||
|
|
};
|
||
|
|
document.addEventListener("mousemove", ik.pointermove);
|
||
|
|
document.addEventListener("mouseup", ik.pointerup);
|
||
|
|
document.addEventListener("touchmove", ik.pointermove);
|
||
|
|
document.addEventListener("touchend", ik.pointerup);
|
||
|
|
document.addEventListener("touchcancel", ik.pointerup);
|
||
|
|
document.addEventListener("touchstart", ik.preventScroll);
|
||
|
|
evorg.preventDefault();
|
||
|
|
evorg.stopPropagation();
|
||
|
|
};
|
||
|
|
ik.pointermove = (ev) => {
|
||
|
|
let dv;
|
||
|
|
let rc = el.getBoundingClientRect();
|
||
|
|
let cx = (rc.left + rc.right) * 0.5,
|
||
|
|
cy = (rc.top + rc.bottom) * 0.5;
|
||
|
|
if (ev.touches) ev = ev.touches[0];
|
||
|
|
let dx = ev.clientX - ik.dragfrom.x,
|
||
|
|
dy = ev.clientY - ik.dragfrom.y;
|
||
|
|
let da = Math.atan2(ev.clientX - cx, cy - ev.clientY);
|
||
|
|
switch (ik.itype) {
|
||
|
|
case "k":
|
||
|
|
switch (op.knobMode) {
|
||
|
|
case "linear":
|
||
|
|
dv =
|
||
|
|
(dx / ik.sensex - dy / ik.sensey) *
|
||
|
|
(ik.valrange.max - ik.valrange.min);
|
||
|
|
if (ev.shiftKey) dv *= 0.2;
|
||
|
|
el.setValue(ik.dragfrom.v + dv);
|
||
|
|
break;
|
||
|
|
case "circularabs":
|
||
|
|
if (!ev.shiftKey) {
|
||
|
|
dv =
|
||
|
|
ik.valrange.min +
|
||
|
|
((da / Math.PI) * 0.75 + 0.5) *
|
||
|
|
(ik.valrange.max - ik.valrange.min);
|
||
|
|
el.setValue(dv);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
case "circularrel":
|
||
|
|
if (da > ik.dragfrom.a + Math.PI) da -= Math.PI * 2;
|
||
|
|
if (da < ik.dragfrom.a - Math.PI) da += Math.PI * 2;
|
||
|
|
da -= ik.dragfrom.a;
|
||
|
|
dv = (da / Math.PI / 1.5) * (ik.valrange.max - ik.valrange.min);
|
||
|
|
if (ev.shiftKey) dv *= 0.2;
|
||
|
|
el.setValue(ik.dragfrom.v + dv);
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
case "h":
|
||
|
|
case "v":
|
||
|
|
dv = (dx / ik.sensex - dy / ik.sensey) * (ik.valrange.max - ik.valrange.min);
|
||
|
|
if (ev.shiftKey) dv *= 0.2;
|
||
|
|
el.setValue(ik.dragfrom.v + dv);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
ik.pointerup = () => {
|
||
|
|
document.removeEventListener("mousemove", ik.pointermove);
|
||
|
|
document.removeEventListener("touchmove", ik.pointermove);
|
||
|
|
document.removeEventListener("mouseup", ik.pointerup);
|
||
|
|
document.removeEventListener("touchend", ik.pointerup);
|
||
|
|
document.removeEventListener("touchcancel", ik.pointerup);
|
||
|
|
document.removeEventListener("touchstart", ik.preventScroll);
|
||
|
|
let event = document.createEvent("HTMLEvents");
|
||
|
|
event.initEvent("change", false, true);
|
||
|
|
el.dispatchEvent(event);
|
||
|
|
};
|
||
|
|
ik.preventScroll = (ev) => {
|
||
|
|
ev.preventDefault();
|
||
|
|
};
|
||
|
|
ik.keydown = () => {
|
||
|
|
el.redraw();
|
||
|
|
};
|
||
|
|
ik.wheel = (ev) => {
|
||
|
|
let delta = ev.deltaY > 0 ? -ik.valrange.step : ik.valrange.step;
|
||
|
|
if (!ev.shiftKey) delta *= 5;
|
||
|
|
el.setValue(+el.value + delta);
|
||
|
|
ev.preventDefault();
|
||
|
|
ev.stopPropagation();
|
||
|
|
};
|
||
|
|
el.redraw = (f) => {
|
||
|
|
if (f || ik.valueold != el.value) {
|
||
|
|
let v = (el.value - ik.valrange.min) / (ik.valrange.max - ik.valrange.min);
|
||
|
|
if (ik.sprites >= 1)
|
||
|
|
el.style.backgroundPosition =
|
||
|
|
"0px " + -((v * ik.sprites) | 0) * ik.frameheight + "px";
|
||
|
|
else {
|
||
|
|
switch (ik.itype) {
|
||
|
|
case "k":
|
||
|
|
el.style.transform = "rotate(" + (270 * v - 135) + "deg)";
|
||
|
|
break;
|
||
|
|
case "h":
|
||
|
|
el.style.backgroundPosition = (w - h) * v + "px 0px";
|
||
|
|
break;
|
||
|
|
case "v":
|
||
|
|
el.style.backgroundPosition = "0px " + (h - w) * (1 - v) + "px";
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
ik.valueold = el.value;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
el.refresh();
|
||
|
|
el.redraw(true);
|
||
|
|
el.addEventListener("keydown", ik.keydown);
|
||
|
|
el.addEventListener("mousedown", ik.pointerdown);
|
||
|
|
el.addEventListener("touchstart", ik.pointerdown);
|
||
|
|
el.addEventListener("wheel", ik.wheel);
|
||
|
|
};
|
||
|
|
let refreshque = () => {
|
||
|
|
let elem = document.querySelectorAll("input.input-knob,input.input-slider");
|
||
|
|
for (let i = 0; i < elem.length; ++i) procque.push([initKnobs, elem[i]]);
|
||
|
|
elem = document.querySelectorAll(
|
||
|
|
"input[type=checkbox].input-switch,input[type=radio].input-switch"
|
||
|
|
);
|
||
|
|
for (let i = 0; i < elem.length; ++i) {
|
||
|
|
procque.push([initSwitches, elem[i]]);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
let procque = [];
|
||
|
|
refreshque();
|
||
|
|
setInterval(() => {
|
||
|
|
for (let i = 0; procque.length > 0 && i < 8; ++i) {
|
||
|
|
let q = procque.shift();
|
||
|
|
q[0](q[1]);
|
||
|
|
}
|
||
|
|
if (procque.length <= 0) refreshque();
|
||
|
|
}, 50);
|
||
|
|
});
|