supisara
/
workbook-front
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

homepage

Browse Source
main
km0 3 years ago
parent 2f2398b523
commit 7e18ba2726
8 changed files with 331 additions and 126 deletions
Show Stats Download Patch File Download Diff File

17
assets/css/global.css
Unescape Escape View File

@ -0,0 +1,17 @@
* {
box-sizing: border-box;
}
html,
body {
font-family: sans-serif;
}
a {
color: currentColor;
text-decoration: none;
}
a:hover {
opacity: 0.5;
}

35
assets/css/home.css
Unescape Escape View File

@ -0,0 +1,35 @@
.homepanel .socket {
position: absolute;
}
.socket .plug {
display: inline-block;
width: 24px;
height: 24px;
border: 1px solid currentColor;
cursor: alias;
position: relative;
z-index: 50;
background: none;
user-select: none;
vertical-align: middle;
}
.plug.out {
border-radius: 50%;
}
.socket label {
text-transform: uppercase;
line-height: 1;
}
svg {
position: absolute;
top: 0;
left: 0;
border: 1px solid currentColor;
width: 100%;
height: 100%;
}

185
assets/css/workbook.css
Unescape Escape View File

@ -1,168 +1,129 @@
* {
box-sizing: border-box;
}
html, body {
font-family: sans-serif;
}
a {
color: currentColor;
text-decoration: none;
}
a:hover {
opacity: 0.5;
}
header { header {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 8px; padding: 8px;
font-size: 32px; font-size: 32px;
} }
header > * { header > * {
flex-shrink: 0; flex-shrink: 0;
} }
header .title { header .title {
margin: 0; margin: 0;
margin-right: 32px; margin-right: 32px;
font-size: 32px; font-size: 32px;
font-weight: normal; font-weight: normal;
} }
.path-slash { .path-slash {
margin: 0 4px; margin: 0 4px;
} }
.parent { .parent {
/* color: rgb(147, 149, 161); */ /* color: rgb(147, 149, 161); */
} }
.search { .search {
position: relative; position: relative;
display: inline-block; display: inline-block;
height: 32px; height: 32px;
margin-left: auto; margin-left: auto;
overflow: hidden; overflow: hidden;
flex: 0 0 32px; flex: 0 0 32px;
transition: flex 0.3s ease-in; transition: flex 0.3s ease-in;
} }
.search:hover{ .search:hover {
transition: flex 0.6s ease-out; transition: flex 0.6s ease-out;
flex: 1 0 auto; flex: 1 0 auto;
} }
.search svg { .search svg {
width: 32px; width: 32px;
height: 32px; height: 32px;
padding: 4px; padding: 4px;
margin: 0; margin: 0;
} }
.search input { .search input {
border: none; border: none;
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
top: 0; top: 0;
left: 32px; left: 32px;
outline: none; outline: none;
border-bottom: 1px solid currentColor; border-bottom: 1px solid currentColor;
font-size: 32px; font-size: 32px;
padding: 0; padding: 0;
padding-left: 4px; padding-left: 4px;
background: none; background: none;
} }
main { main {
padding: 0 8px; padding: 0 8px;
} }
.list { .list {
padding: 0; padding: 0;
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 16px; gap: 16px;
} }
.card { .card {
/* transform: skew(14deg); */ /* transform: skew(14deg); */
aspect-ratio: 1; aspect-ratio: 1;
border: 1px solid currentColor; border: 1px solid currentColor;
padding: 32px; padding: 32px;
font-stretch: 50%; font-stretch: 50%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: 32px;
text-align: center;
font-size: 32px;
text-align: center;
} }
.card:hover { .card:hover {
background-color: grey; background-color: grey;
} }
.card > * { .card > * {
/* transform: skew(-28deg); */ /* transform: skew(-28deg); */
} }
.card svg { .card svg {
width: 32px; width: 32px;
height: 32px; height: 32px;
} }
@media (max-width: 767px) {
header {
display: block;
font-size: 28px;
}
header .title {
display: inline;
font-size: 28px;
}
.search {
margin-top: 16px;
display: block;
}
@media (max-width: 767px){ .search input {
font-size: 28px;
}
header {
display: block;
font-size: 28px;
} }
header .title {
display: inline;
font-size: 28px;
}
.search {
margin-top: 16px;
display: block;
}
.search input {
font-size: 28px;
}
}

140
assets/js/cables.js
Unescape Escape View File

@ -0,0 +1,140 @@
// Great resource from https://stackoverflow.com/a/40700068
// Thank you ConnorFan
var strokeWidth = 10;
var bufferSize = 10;
var svgElement = document.getElementById("svgElement");
svgElement.setAttribute("viewBox", `0 0 ${svgElement.clientWidth} ${svgElement.clientHeight}`);
var rect = svgElement.getBoundingClientRect();
var path = null;
var strPath;
var buffer = []; // Contains the last positions of the mouse cursor
var cable;
class Cable {
start = "";
end = "";
path = "";
color = "";
constructor(start) {
this.start = start;
}
}
window.addEventListener("mousedown", function (e) {
let socket = e.target;
if (socket.matches(".plug.out")) {
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);
cable = new Cable(socket.nextElementSibling.innerHTML);
cable.color = color;
}
});
window.addEventListener("mousemove", function (e) {
if (path) {
appendToBuffer(getMousePosition(e));
updateSvgPath();
}
});
window.addEventListener("mouseup", (e) => appendCable(e));
window.addEventListener("mouseleave", (e) => appendCable(e));
var appendCable = function (e) {
if (path) {
let socket = e.target;
if (socket.matches(".plug.in")) {
cable.end = socket.nextElementSibling.innerHTML;
cable.path = path.getAttribute("d");
}
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;
};
// ok
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);
}
};
// ok
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 + ")";
};
const enter = document.getElementById("enter");
enter.addEventListener("mouseup", (e) => {
console.log(cable);
window.location = cable.start.toLowerCase() + ".html";
});

59
index.html
Unescape Escape View File

@ -1,17 +1,50 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>workbook</title> <link rel="stylesheet" type="text/css" href="assets/css/global.css" />
<link rel="stylesheet" type="text/css" href="css/global.css" /> <link rel="stylesheet" href="assets/css/home.css" />
</head> <script src="assets/js/cables.js" defer></script>
<body> <title>modbook</title>
<div class="topnav"> </head>
<a href="./instruments.html">Workbook</a> <body>
<a href="./about.html">About</a> <main class="homepanel">
</div> <!-- SVG CONTAINER FOR THE CABLES -->
<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="500px"
height="500px"
viewBox="0 0 500 500"
enable-background="new 0 0 500 500"
xml:space="preserve"
></svg>
</body> <!-- OUT -->
<div class="socket" style="top: 10%; left: 10%">
<script type="text/javascript" src="js/main.js"></script> <span class="plug out"></span>
<label>Workbook</label>
</div>
<div class="socket" style="top: 20%; left: 5%">
<span class="plug out"></span>
<label>About</label>
</div>
<div class="socket" style="top: 30%; left: 10%">
<span class="plug out"></span>
<label> Test</label>
</div>
<!-- IN -->
<div class="socket" style="bottom: 40%; right: 20%">
<span class="plug in" id="enter"></span>
<label>Enter</label>
</div>
</main>
</body>
</html> </html>

0
kastle-v.1.5-patches.html → patches.html
Unescape Escape View File

19
test.html
Unescape Escape View File

@ -0,0 +1,19 @@
<!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>Test</title>
</head>
<body>
<h1>Test test test</h1>
<p>
Sit ex laboris aliqua aliqua deserunt ex laboris pariatur labore laboris exercitation
proident qui. Anim culpa esse anim in ipsum magna qui ipsum sit sint culpa commodo
Lorem. Consectetur excepteur Lorem occaecat duis ut aliquip do qui esse id cillum qui in
sunt. Anim pariatur laboris culpa ex commodo enim id amet reprehenderit velit.
</p>
</body>
</html>

2
workbook.html
Unescape Escape View File

@ -34,7 +34,7 @@
</li> </li>
<li class="card"><a href="#all">All</a></li> <li class="card"><a href="#all">All</a></li>
<li class="card"><a href="#kastledrum">Bastl Kastle Drum</a></li> <li class="card"><a href="patches.html">Bastl Kastle Drum</a></li>
<li class="card"><a href="kastle-v.1.5-patches.html">Bastl Kastle v1.5</a></li> <li class="card"><a href="kastle-v.1.5-patches.html">Bastl Kastle v1.5</a></li>
<li class="card"><a href="#microgranny">Bastl Microgranny 2</a></li> <li class="card"><a href="#microgranny">Bastl Microgranny 2</a></li>

Write Preview
Loading…
Cancel
Save