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");
+	};
+}