preset knobs

db
km0 2 years ago
parent 368952c35a
commit ef1ceab64a

@ -63,10 +63,10 @@
display: inline-block; display: inline-block;
} }
svg #params, /* svg #params,
svg #sockets { svg #sockets {
display: none; display: none;
} } */
.instrument .cables { .instrument .cables {
position: absolute; position: absolute;

@ -93,15 +93,17 @@ class Panel {
model = {}; model = {};
params = []; params = [];
sockets = []; sockets = [];
preset = {};
cable = null; cable = null;
cables = null; cables = null;
constructor(svg, container, debug = false) { constructor(svg, container, preset = {}, debug = false) {
this.svg = this.htmlToElement(svg); this.svg = this.htmlToElement(svg);
this.container = container; this.container = container;
this.container.style.position = "relative"; this.container.style.position = "relative";
this.containerRect = container.getBoundingClientRect(); this.containerRect = container.getBoundingClientRect();
this.preset = { ...preset };
this.debug = debug; this.debug = debug;
while (container.firstChild) { while (container.firstChild) {
@ -111,6 +113,7 @@ class Panel {
this.setSize(); this.setSize();
this.createParams(); this.createParams();
this.createSockets(); this.createSockets();
this.createCables(); this.createCables();
@ -155,6 +158,10 @@ class Panel {
control.setAttribute("name", param.id); control.setAttribute("name", param.id);
if (this.preset.hasOwnProperty(param.id)) {
control.value = this.preset[param.id];
}
this.container.appendChild(control); this.container.appendChild(control);
this.model.params.push(param.id); this.model.params.push(param.id);

@ -1,4 +1,8 @@
const container = document.querySelector("#panel-container"); const container = document.querySelector("#panel-container");
const preset = { ...document.querySelector("#data-params").dataset };
const svg = container.querySelector("svg").outerHTML; const svg = container.querySelector("svg").outerHTML;
let panel = new Panel(svg, container); let panel = new Panel(svg, container, preset);
// there is something about ... but is not that

@ -13,7 +13,7 @@
<script src="{{ url_for('static', filename='js/input-knobs.js') }}" defer></script> <script src="{{ url_for('static', filename='js/input-knobs.js') }}" defer></script>
<script src="{{ url_for('static', filename='js/panel.js') }}" defer></script> <script src="{{ url_for('static', filename='js/panel.js') }}" defer></script>
<!-- <script src="{{ url_for('static', filename='js/patch.js') }}" defer></script> --> <script src="{{ url_for('static', filename='js/patch.js') }}" defer></script>
</head> </head>
<body> <body>
<header> <header>
@ -27,7 +27,7 @@
<span class="path-slash"> / </span> <span class="path-slash"> / </span>
<h2 class="title">{{patch['name']}}</h2> <h2 class="title">{{patch['name']}}</h2>
<button class="print"> <button class="print" onclick="print()">
<svg <svg
width="54" width="54"
height="54" height="54"
@ -55,6 +55,10 @@
{% endif %} {% endif %}
</div> </div>
<form method="POST" enctype="multipart/form-data"> <form method="POST" enctype="multipart/form-data">
<input type="text" class="description" name="description" /> <input type="text" class="description" name="description" />
<input type="file" name="snippet" accept="audio/*" /> <input type="file" name="snippet" accept="audio/*" />
@ -102,5 +106,13 @@
{% endfor %} {% endfor %}
</ul> </ul>
</div> </div>
<div id="data-params"
{% for param in params %}
data-{{param['param_name']}}="{{param['value']}}"
{% endfor %}
></div>
</body> </body>
</html> </html>

@ -216,7 +216,7 @@ def patch(instrument, name):
connection.close() connection.close()
return render_template('patch.html', instrument=instrument, patch=patch, panel=panel, snippets=snippets) return render_template('patch.html', instrument=instrument, patch=patch, params=params, panel=panel, snippets=snippets)

Loading…
Cancel
Save