input-knobs and json modules
commit
cebde38caa
@ -0,0 +1,18 @@
|
||||
venv/
|
||||
|
||||
*.pyc
|
||||
__pycache__/
|
||||
.ipynb_checkpoints
|
||||
|
||||
|
||||
|
||||
.pytest_cache/
|
||||
.coverage
|
||||
htmlcov/
|
||||
|
||||
dist/
|
||||
build/
|
||||
*.egg-info/
|
||||
|
||||
.env
|
||||
.vscode
|
||||
@ -0,0 +1,41 @@
|
||||
import os
|
||||
from flask import Flask, send_from_directory
|
||||
from . import prefix
|
||||
|
||||
|
||||
def create_app(test_config=None):
|
||||
# Create and configure the Flask App
|
||||
app = Flask(__name__, instance_relative_config=True)
|
||||
app.config.from_mapping(
|
||||
SECRET_KEY="dev",
|
||||
)
|
||||
|
||||
if test_config is None:
|
||||
# load the instance config, if it exists, when not testing
|
||||
app.config.from_pyfile("config.py", silent=True)
|
||||
else:
|
||||
# load the test config if passed in
|
||||
app.config.from_mapping(test_config)
|
||||
|
||||
# ensure the instance folder exists
|
||||
try:
|
||||
os.makedirs(os.environ.get('MODULES', 'modules'))
|
||||
except OSError:
|
||||
pass
|
||||
|
||||
@app.route("/favicon.ico")
|
||||
def favicon():
|
||||
return send_from_directory(
|
||||
os.path.join(app.root_path, "static"),
|
||||
"favicon.ico",
|
||||
mimetype="image/vnd.microsoft.icon",
|
||||
)
|
||||
|
||||
from . import module
|
||||
app.register_blueprint(module.bp)
|
||||
|
||||
app.wsgi_app = prefix.PrefixMiddleware(
|
||||
app.wsgi_app, prefix=os.environ.get("URL_PREFIX", "")
|
||||
)
|
||||
|
||||
return app
|
||||
@ -0,0 +1,23 @@
|
||||
from flask import Blueprint, render_template, request
|
||||
from datetime import datetime
|
||||
import json
|
||||
import os
|
||||
|
||||
bp = Blueprint('module', __name__, url_prefix="/")
|
||||
|
||||
|
||||
@bp.route('/', methods=['GET', 'POST'])
|
||||
def module():
|
||||
if request.method == 'POST':
|
||||
preset = {}
|
||||
for key in request.form.keys():
|
||||
preset[key] = request.form.get(key)
|
||||
name = preset.get('name', '')
|
||||
filename = f"{name}_{datetime.now().strftime('%Y-%m-%d_%H-%M-%S')}.json"
|
||||
with open(os.path.join(os.environ.get('MODULES'), filename), 'w') as f:
|
||||
f.write(json.dumps(preset))
|
||||
|
||||
modules = [os.path.splitext(filename)[0]
|
||||
for filename in os.listdir(os.environ.get('MODULES'))]
|
||||
|
||||
return render_template('module.html', modules=modules)
|
||||
@ -0,0 +1,14 @@
|
||||
class PrefixMiddleware(object):
|
||||
def __init__(self, app, prefix=""):
|
||||
self.app = app
|
||||
self.prefix = prefix
|
||||
|
||||
def __call__(self, environ, start_response):
|
||||
|
||||
if environ["PATH_INFO"].startswith(self.prefix):
|
||||
environ["PATH_INFO"] = environ["PATH_INFO"][len(self.prefix) :]
|
||||
environ["SCRIPT_NAME"] = self.prefix
|
||||
return self.app(environ, start_response)
|
||||
else:
|
||||
start_response("404", [("Content-Type", "text/plain")])
|
||||
return ["This url does not belong to the app.".encode()]
|
||||
@ -0,0 +1,63 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
}
|
||||
|
||||
:root {
|
||||
--radius: 2px;
|
||||
}
|
||||
|
||||
.module {
|
||||
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: start;
|
||||
width: 480px;
|
||||
height: 240px;
|
||||
border-radius: var(--radius);
|
||||
|
||||
padding: 32px;
|
||||
border: 1px solid currentColor;
|
||||
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.control {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.control label {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.control + .control {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.module input[type='submit'] {
|
||||
position: absolute;
|
||||
right: 32px;
|
||||
bottom: 32px;
|
||||
border: 1px solid currentColor;
|
||||
background: none;
|
||||
border-radius: var(--radius);
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
.module #name {
|
||||
position: absolute;
|
||||
bottom: 32px;
|
||||
left: 32px;
|
||||
padding: 4px 8px;
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid currentColor;
|
||||
}
|
||||
@ -0,0 +1,375 @@
|
||||
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 || "#f00";
|
||||
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);
|
||||
});
|
||||
@ -0,0 +1,43 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Module test</title>
|
||||
<script src="{{url_for('static', filename='js/input-knobs.js')}}"></script>
|
||||
<link rel="stylesheet" href="{{url_for('static', filename='css/style.css')}}" />
|
||||
</head>
|
||||
<body>
|
||||
<ul>
|
||||
{% for module in modules%}
|
||||
<li>{{module}}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
<form class="module" method="POST">
|
||||
<div class="control">
|
||||
<input type="range" class="input-knob" name="attack" data-fgcolor="white" />
|
||||
<label for="attack">Attack</label>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<input type="range" class="input-knob" name="decay" data-fgcolor="white" />
|
||||
<label for="decay">Decay</label>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<input type="range" class="input-knob" name="sustain" data-fgcolor="white" />
|
||||
<label for="sustain">Sustain</label>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<input type="range" class="input-knob" name="release" data-fgcolor="white" />
|
||||
<label for="release">Release</label>
|
||||
</div>
|
||||
|
||||
<input type="text" name="name" id="name" placeholder="Name" />
|
||||
<input type="submit" id="submit" value="Save" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1 @@
|
||||
{"attack": "62", "decay": "17", "sustain": "78", "release": "100", "name": "A long pad"}
|
||||
@ -0,0 +1 @@
|
||||
{"attack": "50", "decay": "50", "sustain": "50", "release": "50", "name": "AHahah"}
|
||||
@ -0,0 +1 @@
|
||||
{"attack": "0", "decay": "0", "sustain": "14", "release": "20", "name": "a short stab"}
|
||||
@ -0,0 +1 @@
|
||||
{"attack": "76", "decay": "50", "sustain": "31", "release": "73", "name": "af"}
|
||||
Loading…
Reference in New Issue