cables wip
parent
94f524840c
commit
5b40644a38
@ -0,0 +1,47 @@
|
|||||||
|
.module {
|
||||||
|
display: inline-flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.socket + .socket {
|
||||||
|
margin-top: 64px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.socket input[type='text']{
|
||||||
|
display: inline-block;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 1px solid currentColor;
|
||||||
|
cursor: alias;
|
||||||
|
position: relative;
|
||||||
|
z-index: 50;
|
||||||
|
background: none;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#svgElement {
|
||||||
|
z-index: 10;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
mix-blend-mode: multiply;
|
||||||
|
}
|
||||||
|
|
||||||
|
#logs {
|
||||||
|
list-style: none;
|
||||||
|
margin: 8px;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.marker {
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 8px;
|
||||||
|
width: 0.75em;
|
||||||
|
height: 0.75em;
|
||||||
|
border-radius: 50%;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
@ -0,0 +1,63 @@
|
|||||||
|
let test = {
|
||||||
|
attack: "50",
|
||||||
|
decay: "83",
|
||||||
|
sustain: "0",
|
||||||
|
release: "50",
|
||||||
|
name: "tasto",
|
||||||
|
};
|
||||||
|
|
||||||
|
const rack = document.getElementById("rack");
|
||||||
|
|
||||||
|
let createKnob = function (control, value) {
|
||||||
|
let container = document.createElement("div");
|
||||||
|
container.classList.add("control");
|
||||||
|
|
||||||
|
let knob = document.createElement("input");
|
||||||
|
knob.setAttribute("type", "range");
|
||||||
|
knob.classList.add("input-knob");
|
||||||
|
knob.dataset.fgcolor = "white";
|
||||||
|
knob.setAttribute("name", control);
|
||||||
|
knob.setAttribute("value", value);
|
||||||
|
|
||||||
|
let label = document.createElement("label");
|
||||||
|
label.setAttribute("for", control);
|
||||||
|
label.innerHTML = control;
|
||||||
|
|
||||||
|
container.appendChild(knob);
|
||||||
|
container.appendChild(label);
|
||||||
|
|
||||||
|
return container;
|
||||||
|
};
|
||||||
|
|
||||||
|
let deserialize = function (patch) {
|
||||||
|
let module = document.createElement("div");
|
||||||
|
module.classList.add("module");
|
||||||
|
|
||||||
|
let name = document.createElement("input");
|
||||||
|
name.id = "name";
|
||||||
|
name.value = patch.name || "";
|
||||||
|
name.placeholder = "Name";
|
||||||
|
name.setAttribute("type", "text");
|
||||||
|
|
||||||
|
module.appendChild(name);
|
||||||
|
|
||||||
|
let save = document.createElement("input");
|
||||||
|
save.setAttribute("type", "submit");
|
||||||
|
save.id = "submit";
|
||||||
|
save.value = "Save";
|
||||||
|
|
||||||
|
module.appendChild(save);
|
||||||
|
|
||||||
|
for (const [key, value] of Object.entries(patch)) {
|
||||||
|
console.log(key, value);
|
||||||
|
if (key == "name") {
|
||||||
|
name.value = value;
|
||||||
|
} else {
|
||||||
|
module.appendChild(createKnob(key, value));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
rack.appendChild(module);
|
||||||
|
};
|
||||||
|
|
||||||
|
deserialize(test);
|
||||||
@ -0,0 +1,193 @@
|
|||||||
|
// Great resource from https://stackoverflow.com/a/40700068
|
||||||
|
// Thank you ConnorFan
|
||||||
|
|
||||||
|
var strokeWidth = 10;
|
||||||
|
var bufferSize;
|
||||||
|
|
||||||
|
var svgElement = document.getElementById("svgElement");
|
||||||
|
var rect = svgElement.getBoundingClientRect();
|
||||||
|
var path = null;
|
||||||
|
var strPath;
|
||||||
|
var buffer = []; // Contains the last positions of the mouse cursor
|
||||||
|
var cable;
|
||||||
|
|
||||||
|
const logs = document.getElementById("logs");
|
||||||
|
|
||||||
|
class Cable {
|
||||||
|
start = "";
|
||||||
|
end = "";
|
||||||
|
path = "";
|
||||||
|
color = "";
|
||||||
|
|
||||||
|
constructor(start) {
|
||||||
|
this.start = start;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
svgElement.addEventListener("mousedown", function (e) {
|
||||||
|
bufferSize = document.getElementById("cmbBufferSize").value;
|
||||||
|
path = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
||||||
|
path.setAttribute("fill", "none");
|
||||||
|
|
||||||
|
let color = randomColor();
|
||||||
|
path.setAttribute("stroke", color);
|
||||||
|
path.setAttribute("stroke-width", strokeWidth);
|
||||||
|
path.setAttribute("stroke-linecap", "round");
|
||||||
|
buffer = [];
|
||||||
|
var pt = getMousePosition(e);
|
||||||
|
appendToBuffer(pt);
|
||||||
|
strPath = "M" + pt.x + " " + pt.y;
|
||||||
|
path.setAttribute("d", strPath);
|
||||||
|
svgElement.appendChild(path);
|
||||||
|
|
||||||
|
let socket = getSocket(pt);
|
||||||
|
if (socket) {
|
||||||
|
cable = new Cable(socket.querySelector("input").getAttribute("name"));
|
||||||
|
cable.color = color;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
svgElement.addEventListener("mousemove", function (e) {
|
||||||
|
if (path) {
|
||||||
|
appendToBuffer(getMousePosition(e));
|
||||||
|
updateSvgPath();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
svgElement.addEventListener("mouseup", function (e) {
|
||||||
|
if (path) {
|
||||||
|
let pt = getMousePosition(e);
|
||||||
|
let socket = getSocket(pt);
|
||||||
|
if (socket) {
|
||||||
|
cable.end = socket.querySelector("input").getAttribute("name");
|
||||||
|
cable.path = path.getAttribute("d");
|
||||||
|
logCable(cable);
|
||||||
|
}
|
||||||
|
|
||||||
|
path = null;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
svgElement.addEventListener("mouseleave", function (e) {
|
||||||
|
if (path) {
|
||||||
|
let pt = getMousePosition(e);
|
||||||
|
let socket = getSocket(pt);
|
||||||
|
if (socket) {
|
||||||
|
cable.end = socket.querySelector("input").getAttribute("name");
|
||||||
|
cable.path = path.getAttribute("d");
|
||||||
|
logCable(cable);
|
||||||
|
}
|
||||||
|
|
||||||
|
path = null;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
var getMousePosition = function (e) {
|
||||||
|
return {
|
||||||
|
x: e.pageX - rect.left,
|
||||||
|
y: e.pageY - rect.top,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
var appendToBuffer = function (pt) {
|
||||||
|
buffer.push(pt);
|
||||||
|
while (buffer.length > bufferSize) {
|
||||||
|
buffer.shift();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Calculate the average point, starting at offset in the buffer
|
||||||
|
var getAveragePoint = function (offset) {
|
||||||
|
var len = buffer.length;
|
||||||
|
if (len % 2 === 1 || len >= bufferSize) {
|
||||||
|
var totalX = 0;
|
||||||
|
var totalY = 0;
|
||||||
|
var pt, i;
|
||||||
|
var count = 0;
|
||||||
|
for (i = offset; i < len; i++) {
|
||||||
|
count++;
|
||||||
|
pt = buffer[i];
|
||||||
|
totalX += pt.x;
|
||||||
|
totalY += pt.y;
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
x: totalX / count,
|
||||||
|
y: totalY / count,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
};
|
||||||
|
|
||||||
|
var updateSvgPath = function () {
|
||||||
|
var pt = getAveragePoint(0);
|
||||||
|
|
||||||
|
if (pt) {
|
||||||
|
// Get the smoothed part of the path that will not change
|
||||||
|
strPath += " L" + pt.x + " " + pt.y;
|
||||||
|
|
||||||
|
// Get the last part of the path (close to the current mouse position)
|
||||||
|
// This part will change if the mouse moves again
|
||||||
|
var tmpPath = "";
|
||||||
|
for (var offset = 2; offset < buffer.length; offset += 2) {
|
||||||
|
pt = getAveragePoint(offset);
|
||||||
|
tmpPath += " L" + pt.x + " " + pt.y;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set the complete current path coordinates
|
||||||
|
path.setAttribute("d", strPath + tmpPath);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var randomColor = function () {
|
||||||
|
const hue = Math.floor(Math.random() * 360);
|
||||||
|
const saturation = Math.floor(50 + Math.random() * (50 + 1)) + "%";
|
||||||
|
const lightness = "75%";
|
||||||
|
return "hsl(" + hue + ", " + saturation + ", " + lightness + ")";
|
||||||
|
};
|
||||||
|
|
||||||
|
var getSocket = function (position) {
|
||||||
|
precision = 8;
|
||||||
|
size = 24;
|
||||||
|
|
||||||
|
const sockets = document.querySelectorAll(".socket");
|
||||||
|
sock = Array.from(sockets).filter((socket) => {
|
||||||
|
input = socket.querySelector("input");
|
||||||
|
return (
|
||||||
|
position.x >= input.offsetLeft - precision + size / 2 &&
|
||||||
|
position.x <= input.offsetLeft + precision + size / 2 &&
|
||||||
|
position.y >= input.offsetTop - precision + size / 2 &&
|
||||||
|
position.y <= input.offsetTop + precision + size / 2
|
||||||
|
);
|
||||||
|
})[0];
|
||||||
|
return sock;
|
||||||
|
};
|
||||||
|
|
||||||
|
let logCable = function (cable) {
|
||||||
|
let entry = document.createElement("li");
|
||||||
|
let marker = document.createElement("span");
|
||||||
|
marker.classList.add("marker");
|
||||||
|
marker.style.backgroundColor = cable.color;
|
||||||
|
|
||||||
|
entry.appendChild(marker);
|
||||||
|
|
||||||
|
let text = document.createElement("span");
|
||||||
|
text.innerHTML = `connects ${cable.start} with ${cable.end}`;
|
||||||
|
|
||||||
|
entry.appendChild(text);
|
||||||
|
|
||||||
|
logs.appendChild(entry);
|
||||||
|
};
|
||||||
|
|
||||||
|
//
|
||||||
|
//
|
||||||
|
//
|
||||||
|
// SAVE THE BRANCH
|
||||||
|
|
||||||
|
// const form = document.querySelector("form");
|
||||||
|
|
||||||
|
// form.addEventListener("submit", () => {
|
||||||
|
// let wrapper = document.createElement("div");
|
||||||
|
// wrapper.appendChild(svgElement);
|
||||||
|
// form["content"].value = wrapper.innerHTML;
|
||||||
|
// return true;
|
||||||
|
// });
|
||||||
@ -0,0 +1,68 @@
|
|||||||
|
<!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>
|
||||||
|
<script src="{{url_for('static', filename='js/draw.js')}}" defer></script>
|
||||||
|
<!-- <script src="{{url_for('static', filename='js/controls.js')}}" defer></script> -->
|
||||||
|
<script src="{{url_for('static', filename='js/cables.js')}}" defer></script>
|
||||||
|
<link rel="stylesheet" href="{{url_for('static', filename='css/style.css')}}" />
|
||||||
|
<link rel="stylesheet" href="{{url_for('static', filename='css/cables.css')}}" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="divSmoothingFactor">
|
||||||
|
<label for="cmbBufferSize">Smoothing</label>
|
||||||
|
<select id="cmbBufferSize">
|
||||||
|
<option value="1">1 - No smoothing</option>
|
||||||
|
<option value="4">4 - Sharp curves</option>
|
||||||
|
<option value="8" selected="selected">8 - Smooth curves</option>
|
||||||
|
<option value="12">12 - Very smooth curves</option>
|
||||||
|
<option value="16">16 - Super smooth curves</option>
|
||||||
|
<option value="20">20 - Hyper smooth curves</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form class="module">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
version="1.1"
|
||||||
|
id="svgElement"
|
||||||
|
x="0px"
|
||||||
|
y="0px"
|
||||||
|
width="480px"
|
||||||
|
height="240px"
|
||||||
|
viewBox="0 0 480 240"
|
||||||
|
enable-background="new 0 0 480 240"
|
||||||
|
xml:space="preserve"
|
||||||
|
></svg>
|
||||||
|
|
||||||
|
<div class="left">
|
||||||
|
<div class="socket">
|
||||||
|
<input type="text" name="LFO" />
|
||||||
|
<label for="LFO">LFO</label>
|
||||||
|
</div>
|
||||||
|
<div class="socket">
|
||||||
|
<input type="text" name="ENV" />
|
||||||
|
<label for="ENV">ENV</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="right">
|
||||||
|
<div class="socket">
|
||||||
|
<input type="text" name="frequency" />
|
||||||
|
<label for="frequency">Frequency</label>
|
||||||
|
</div>
|
||||||
|
<div class="socket">
|
||||||
|
<input type="text" name="amp" />
|
||||||
|
<label for="amp">Amp</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<ul id="logs"></ul>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue