From 09e031e50ed3fb2d1ec21ec55dab75c669e0e964 Mon Sep 17 00:00:00 2001 From: X3F200C Date: Sun, 15 Oct 2023 19:48:02 -0400 Subject: [PATCH] Make the main program a server and add knobs along with some mappings --- mappings/numark-mixtrackplatinum.json | 48 +++++++-- preload.js | 9 ++ view/assets/scripts/knobs.js | 148 ++++++++++++++++++++++++++ view/assets/scripts/main.js | 6 ++ view/assets/stylesheets/style.css | 8 +- view/index.html | 13 ++- 6 files changed, 219 insertions(+), 13 deletions(-) create mode 100644 view/assets/scripts/knobs.js diff --git a/mappings/numark-mixtrackplatinum.json b/mappings/numark-mixtrackplatinum.json index 0ef1062..b537ce2 100644 --- a/mappings/numark-mixtrackplatinum.json +++ b/mappings/numark-mixtrackplatinum.json @@ -4,18 +4,50 @@ "bf 44 [0-9a-f]{2} 45 ([0-9a-f]{2})": "master.volume.right" }, "outbound": { - "deck0.load": [144, 16, 127], - "deck1.load": [145, 16, 127], - "deck2.load": [146, 16, 127], - "deck3.load": [147, 16, 127], - "deck0.play_pause": [144, 4, 127], - "deck1.play_pause": [145, 4, 127], - "deck2.play_pause": [146, 4, 127], - "deck3.play_pause": [147, 4, 127], + "deck0.load": [144, 16, 127, 144, 16, 0], + "deck1.load": [145, 16, 127, 145, 16, 0], + "deck2.load": [146, 16, 127, 146, 16, 0], + "deck3.load": [147, 16, 127, 147, 16, 0], + "deck0.play_pause": [144, 4, 127, 144, 4, 0], + "deck1.play_pause": [145, 4, 127, 145, 4, 0], + "deck2.play_pause": [146, 4, 127, 146, 4, 0], + "deck3.play_pause": [147, 4, 127, 147, 4, 0], + "deck0.sync": [144, 2, 127, 144, 2, 0], + "deck1.sync": [145, 2, 127, 145, 2, 0], + "deck2.sync": [146, 2, 127, 146, 2, 0], + "deck3.sync": [147, 2, 127, 147, 2, 0], + "deck0.pad0": [159, 33, 127, 159, 33, 0], + "deck0.pad1": [159, 34, 127, 159, 34, 0], + "deck0.pad2": [159, 35, 127, 159, 35, 0], + "deck0.pad3": [159, 36, 127, 159, 36, 0], + "deck0.pad4": [148, 24, 127, 148, 24, 0], + "deck0.pad5": [148, 25, 127, 148, 25, 0], + "deck0.pad6": [148, 26, 127, 148, 26, 0], + "deck0.pad7": [148, 27, 127, 148, 27, 0], + "deck1.pad0": [159, 33, 127, 159, 33, 0], + "deck1.pad1": [159, 34, 127, 159, 34, 0], + "deck1.pad2": [159, 35, 127, 159, 35, 0], + "deck1.pad3": [159, 36, 127, 159, 36, 0], + "deck1.pad4": [149, 24, 127, 148, 24, 0], + "deck1.pad5": [149, 25, 127, 148, 25, 0], + "deck1.pad6": [149, 26, 127, 148, 26, 0], + "deck1.pad7": [149, 27, 127, 148, 27, 0], "deck0.volume": [176, 28, ""], "deck1.volume": [177, 28, ""], "deck2.volume": [178, 28, ""], "deck3.volume": [179, 28, ""], + "deck0.eq_high": [176, 23, ""], + "deck0.eq_mid": [176, 24, ""], + "deck0.eq_low": [176, 25, ""], + "deck1.eq_high": [177, 23, ""], + "deck1.eq_mid": [177, 24, ""], + "deck1.eq_low": [177, 25, ""], + "deck2.eq_high": [178, 23, ""], + "deck2.eq_mid": [178, 24, ""], + "deck2.eq_low": [178, 25, ""], + "deck3.eq_high": [179, 23, ""], + "deck3.eq_mid": [179, 24, ""], + "deck3.eq_low": [179, 25, ""], "deck0.speed": [176, 9, "", 176, 119, ""], "deck1.speed": [177, 9, "", 177, 119, ""], "deck2.speed": [178, 9, "", 178, 119, ""], diff --git a/preload.js b/preload.js index 3f171ef..5b34262 100644 --- a/preload.js +++ b/preload.js @@ -14,12 +14,21 @@ electron.contextBridge.exposeInMainWorld("controller", { "play_pause": function (deckIndex) { sendControl("deck" + String(deckIndex) + ".play_pause"); }, + "sync": function (deckIndex) { + sendControl("deck" + String(deckIndex) + ".sync"); + }, "volume": function (deckIndex, value) { sendControl("deck" + String(deckIndex) + ".volume", value); }, + "eq": function (deckIndex, freq, value) { + sendControl("deck" + String(deckIndex) + ".eq_" + freq, 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); } diff --git a/view/assets/scripts/knobs.js b/view/assets/scripts/knobs.js new file mode 100644 index 0000000..d749106 --- /dev/null +++ b/view/assets/scripts/knobs.js @@ -0,0 +1,148 @@ +class KnobElement extends HTMLElement { + static observedAttributes = ["min", "max", "value", "step"]; + + _min = -1; + rawValue = 0; + _value = 0; + step = 1; + _max = 1; + + constructor() { + super(); + } + connectedCallback() { + // if ("min" in this.attributes) { + // this._min = parseFloat(this.attributes["min"].value); + // } + // if ("max" in this.attributes) { + // this._max = parseFloat(this.attributes["max"].value); + // } + if ("value" in this.attributes) { + this.value = parseFloat(this.attributes["value"].value); + } + // if ("step" in this.attributes) { + // this.step = parseFloat(this.attributes["step"].value); + // } + + var shadow = this.attachShadow({ + "mode": "open" + }); + + var style = document.createElement("style"); + style.textContent = ` + #wrapper { + background-color: rgba(24, 24, 24, 1.0); + width: 40px; + height: 40px; + border-radius: 100%; + } + + #cursor { + position: relative; + background-color: rgba(232, 232, 232, 1.0); + width: 4px; + height: 16px; + left: calc(50% - 2px); + } + `; + + var wrapper = document.createElement("div"); + wrapper.id = "wrapper"; + + wrapper.onmousedown = (function (event) { + window.onmousemove = (function (event) { + this.rawValue += event.movementX / 2; + if (this.rawValue < -128) { + this.rawValue = -128; + } + if (this.rawValue > 127) { + this.rawValue = 127; + } + var range = this._max - this._min; + var theoreticalValue = (((this.rawValue + Math.abs(-128)) * range) / 255) + this._min; + + var invertedStep = 1 / this.step; + this._value = Math.round(theoreticalValue * invertedStep) / invertedStep; + + + this.wrapper.style.rotate = String((this.rawValue * 135) / 128) + "deg"; + + var inputEvent = new InputEvent("input"); + this.dispatchEvent(inputEvent); + }).bind(this); + + window.onmouseup = function (event) { + window.onmousemove = null; + window.onmouseup = null; + }; + }).bind(this); + + var cursor = document.createElement("div"); + cursor.id = "cursor"; + + wrapper.appendChild(cursor); + + shadow.appendChild(style); + shadow.appendChild(wrapper); + + this.wrapper = wrapper; + } + attributeChangedCallback(name, oldValue, newValue) { + this[name] = parseFloat(newValue); + } + get min() { + return this._min; + } + set min(value) { + if (isNaN(value)) return; + + this._min = value; + + if (this._value < this._min) { + this._value = this._min; + } + + this.rawValue = (((this._value + Math.abs(this._min)) * 255) / (this._max - this._min)) + -128; + + if ("wrapper" in this) + this.wrapper.style.rotate = String((this.rawValue * 135) / 128) + "deg"; + } + get value() { + return this._value; + } + set value(value) { + if (isNaN(value)) return; + + if (value < this._min) { + this._value = this._min; + } else if (value > this._max) { + this._value = this._max; + } else { + this._value = value; + } + + this.rawValue = (((this._value + Math.abs(this._min)) * 255) / (this._max - this._min)) + -128; + + if ("wrapper" in this) + this.wrapper.style.rotate = String((this.rawValue * 135) / 128) + "deg"; + } + get max() { + return this._max; + } + set max(value) { + if (isNaN(value)) return; + + this._max = value; + + if (this._value > this._max) { + this._value = this._max; + } + + this.rawValue = (((this._value + Math.abs(this._min)) * 255) / (this._max - this._min)) + -128; + + if ("wrapper" in this) + this.wrapper.style.rotate = String((this.rawValue * 135) / 128) + "deg"; + } +} + +customElements.define("knob-input", KnobElement); diff --git a/view/assets/scripts/main.js b/view/assets/scripts/main.js index c1f868e..030b14c 100644 --- a/view/assets/scripts/main.js +++ b/view/assets/scripts/main.js @@ -69,9 +69,15 @@ if (!("controller" in window)) { "play_pause": function (deckIndex) { sendControl("deck" + String(deckIndex) + ".play_pause"); }, + "sync": function (deckIndex) { + sendControl("deck" + String(deckIndex) + ".sync"); + }, "volume": function (deckIndex, value) { sendControl("deck" + String(deckIndex) + ".volume", value); }, + "eq": function (deckIndex, freq, value) { + sendControl("deck" + String(deckIndex) + ".eq_" + freq, value); + }, "speed": function (deckIndex, value) { sendControl("deck" + String(deckIndex) + ".speed", value); }, diff --git a/view/assets/stylesheets/style.css b/view/assets/stylesheets/style.css index f748427..2dd330a 100644 --- a/view/assets/stylesheets/style.css +++ b/view/assets/stylesheets/style.css @@ -4,6 +4,10 @@ background-color: rgba(8, 12, 16, 1.0); } +* { + user-select: none; +} + :root, body, main, #sections { width: 100%; height: 100%; @@ -18,12 +22,12 @@ button { min-height: 64px; } -#sections, .deck, #mixer, #volume, #volume-meters, .volume-meter, .deck-pads { +#sections, .deck, #mixer, #eq-knobs, #volume, #volume-meters, .volume-meter, .deck-pads { display: flex; justify-content: space-between; } -#sections, #volume, #volume-meters, .deck-pads { +#sections, #eq-knobs, #volume, #volume-meters, .deck-pads { flex-direction: row; } diff --git a/view/index.html b/view/index.html index 9448df6..37f69be 100644 --- a/view/index.html +++ b/view/index.html @@ -5,6 +5,7 @@ DJ Controller Emulator + @@ -30,15 +31,20 @@ +
-
+
- + + +
- + + +
@@ -77,6 +83,7 @@
+