Initial release

view/assets/scripts/main.js

@@ -0,0 +1,105 @@
+if (!("controller" in window)) {
+	let socket;
+
+	let volumeMeterLeft;
+	let volumeMeterRight;
+
+	function connect(url) {
+		if (socket) {
+			socket.close();
+		}
+
+		socket = new WebSocket(url);
+
+		socket.onmessage = function (event) {
+			var data = JSON.parse(event.data);
+
+			switch (data.event) {
+				case "device-list":
+					if (data.data.devices.length > 0) {
+						socket.send(JSON.stringify({
+							"event": "open-device",
+							"data": {
+								"name": data.data.devices[0]
+							}
+						}));
+					}
+					break;
+				case "signal":
+					onSignal(event, data.data.name, data.data.value);
+					break;
+				default:
+					break;
+			}
+		};
+
+		socket.onopen = function () {
+			socket.send(JSON.stringify({
+				"event": "load-driver",
+				"data": {
+					"name": "linux-rawmidi"
+				}
+			}));
+			socket.send(JSON.stringify({
+				"event": "load-mappings",
+				"data": {
+					"name": "numark-mixtrackplatinum"
+				}
+			}));
+			socket.send(JSON.stringify({
+				"event": "list-devices"
+			}));
+		};
+	}
+
+	function sendControl(name, value = 0x00) {
+		socket.send(JSON.stringify({
+			"event": "control",
+			"data": {
+				"name": name,
+				"value": value
+			}
+		}));
+	}
+
+	window.controller = {
+		"load": function (deckIndex) {
+			sendControl("deck" + String(deckIndex) + ".load");
+		},
+		"play_pause": function (deckIndex) {
+			sendControl("deck" + String(deckIndex) + ".play_pause");
+		},
+		"volume": function (deckIndex, value) {
+			sendControl("deck" + String(deckIndex) + ".volume", value);
+		},
+		"speed": function (deckIndex, value) {
+			sendControl("deck" + String(deckIndex) + ".speed", value);
+		},
+		"pad": function (deckIndex, padIndex) {
+			sendControl("deck" + String(deckIndex) + ".pad" + String(padIndex));
+		},
+		"crossfade": function (value) {
+			sendControl("master.crossfade", value);
+		}
+	};
+
+	var onSignal = function (event, name, value = 0x00) {
+		switch (name) {
+			case "master.volume.left":
+				volumeMeterLeft.style.height = String(Math.round((value / 80) * 100)) + "%";
+				break;
+			case "master.volume.right":
+				volumeMeterRight.style.height = String(Math.round((value / 80) * 100)) + "%";
+				break;
+			default:
+				break;
+		}
+	};
+
+	window.onload = function (event) {
+		volumeMeterLeft = document.querySelector("#volume-meter-left");
+		volumeMeterRight = document.querySelector("#volume-meter-right");
+
+		connect("ws://" + window.location.host + "/socket");
+	};
+}

view/assets/stylesheets/style.css

@@ -0,0 +1,114 @@
+:root {
+	--text-color: #FDFDFD;
+
+	background-color: rgba(8, 12, 16, 1.0);
+}
+
+:root, body, main, #sections {
+	width: 100%;
+	height: 100%;
+}
+
+body {
+	margin: 0px;
+}
+
+button {
+	min-width: 96px;
+	min-height: 64px;
+}
+
+#sections, .deck, #mixer, #volume, #volume-meters, .volume-meter, .deck-pads {
+	display: flex;
+	justify-content: space-between;
+}
+
+#sections, #volume, #volume-meters, .deck-pads {
+	flex-direction: row;
+}
+
+#mixer, .deck {
+	flex-direction: column;
+	height: 100%;
+}
+
+.deck {
+	align-items: start;
+}
+
+.reverse.deck {
+	align-items: end;
+}
+
+#volume {
+	/* flex-grow: 1; */
+}
+
+.volume-slider, .speed-slider {
+	appearance: slider-vertical !important;
+	/* width: 8px;
+	height: 100%; */
+}
+
+.volume-meter {
+	flex-direction: column-reverse;
+	flex-grow: 1;
+	background-image: linear-gradient(0deg, lime 0%, orange 80%, red 100%);
+	width: 16px;
+}
+
+.volume-meter-level {
+	width: 100%;
+	background-color: white;
+	mix-blend-mode: multiply;
+	transition: height 0.05s ease-in-out;
+}
+
+.silence-meter-level {
+	flex-grow: 1;
+	width: 100%;
+	background-color: grey;
+	mix-blend-mode: multiply;
+}
+
+.deck-pads, .play {
+	margin: 16px;
+}
+
+.deck-pads {
+	flex-wrap: wrap;
+	width: 70%;
+	aspect-ratio: 4 / 2;
+}
+
+.deck-pad {
+	width: 25%;
+	aspect-ratio: 1 / 1;
+}
+
+/* input[type="range"] {
+	appearance: none;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	height: 8px;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+	appearance: none;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	background: var(--text-color);
+	width: 16px;
+	height: 48px;
+	border-radius: 0px;
+}
+
+input[type="range"]::-moz-range-thumb {
+	appearance: none;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	background: var(--text-color);
+	width: 16px;
+	height: 48px;
+	border-radius: 0px;
+} */