X3F200C/DJCtrlEmu
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Initial release

Browse Source
This commit is contained in:
X3F200C 2023-10-03 06:53:25 -04:00
parent ab3fb26e64
commit 77ae4f9885
10 changed files with 707 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
drivers/linux-rawmidi.js Normal file
View File

@ -0,0 +1,52 @@
const path = require("node:path");
const fs = require("node:fs");
const midiDeviceRegExp = new RegExp("^midi[0-9]+$");
let openDevice;
let callback;
module.exports = {
"list": function () {
var deviceNodeList = fs.readdirSync("/dev").filter(d => d.match(midiDeviceRegExp));
return deviceNodeList.map(d => path.join("/dev", d));
},
"open": function (device, eventCB) {
if (openDevice) {
openDevice["read"].close();
openDevice["write"].close();
}
var deviceName = path.basename(device);
var devicePath = path.join("/dev", deviceName);
openDevice = {
"read": fs.createReadStream(devicePath),
"write": fs.createWriteStream(devicePath)
};
if (eventCB) {
callback = eventCB;
openDevice.read.on("data", function (chunk) {
callback(chunk);
});
}
},
"send": function (message) {
if (!openDevice) return;
var data = Buffer.from(new Uint8Array(message));
openDevice["write"].write(data);
},
"close": function () {
if (!openDevice) return;
openDevice["read"].close();
openDevice["write"].close();
delete openDevice;
delete callback;
}
};

5
index.js Normal file
View File

@ -0,0 +1,5 @@
if ("electron" in process.versions) {
require("./main.js");
} else {
require("./server.js");
}

101
main.js Normal file
View File

@ -0,0 +1,101 @@
const path = require("node:path");
const fs = require("node:fs");
const electron = require("electron");
let window;
let driver;
let mappings;
electron.app.on("ready", function () {
window = new electron.BrowserWindow({
"width": 1280,
"height": 480,
"backgroundColor": "#080C10FF",
"title": "DJ Controller Emulator",
"webPreferences": {
"preload": path.join(__dirname, "preload.js")
},
"show": false
});
window.loadFile(path.join(__dirname, "view", "index.html"));
window.once("ready-to-show", function () {
window.show();
});
});
electron.app.on("window-all-closed", function () {
electron.app.quit();
});
electron.ipcMain.handle("load-driver", function (event, driverName) {
if (driver) {
driver.close();
delete driver;
}
var driverPath = path.join(__dirname, "drivers", path.basename(driverName) + ".js");
driver = require(driverPath);
return true;
});
electron.ipcMain.handle("load-mappings", function (event, mappingsName) {
if (mappings) {
delete mappings;
}
var mappingsPath = path.join(__dirname, "mappings", path.basename(mappingsName) + ".json");
mappings = JSON.parse(fs.readFileSync(mappingsPath));
return true;
});
electron.ipcMain.handle("list-devices", function (event) {
return driver.list();
});
electron.ipcMain.handle("open-device", function (event, name) {
return driver.open(name, function (message) {
var byteArray = new Array(...message);
var hexStringifiedMessage = byteArray.map(b => b.toString(16)).map(c => ("00".substring(c.length) + c)).join(" ");
for (var mappingRegExpString in mappings.inbound) {
if (mappings.inbound.hasOwnProperty(mappingRegExpString)) {
var mappingRegExp = new RegExp(mappingRegExpString);
var mappingMatches = hexStringifiedMessage.match(mappingRegExp);
if (!mappingMatches) continue;
var mappingName = mappings.inbound[mappingRegExpString];
mappingMatches.shift();
var value = parseInt(mappingMatches[0], 16);
window.webContents.send("signal", mappingName, value);
}
}
});
});
electron.ipcMain.handle("control", function (event, name, value = 0x00) {
if (!driver) return false;
if (!mappings.outbound[name]) return false;
var message = mappings.outbound[name].map(function (byte) {
if (typeof byte != "number") {
return value;
} else {
return byte;
}
});
driver.send(message);
});
electron.ipcMain.handle("close-device", function (event) {
return driver.close();
});

25
mappings/numark-mixtrackplatinum.json Normal file
View File

@ -0,0 +1,25 @@
{
"inbound": {
"bf 44 ([0-9a-f]{2})": "master.volume.left",
"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.volume": [176, 28, ""],
"deck1.volume": [177, 28, ""],
"deck2.volume": [178, 28, ""],
"deck3.volume": [179, 28, ""],
"deck0.speed": [176, 9, "", 176, 119, ""],
"deck1.speed": [177, 9, "", 177, 119, ""],
"deck2.speed": [178, 9, "", 178, 119, ""],
"deck3.speed": [179, 9, "", 179, 119, ""],
"master.crossfade": [191, 8, ""]
}
}

12
package.json Normal file
View File

@ -0,0 +1,12 @@
{
"name": "dj-controller-emulator",
"version": "0.0.1",
"description": "A DJ controller emulator",
"main": "index.js",
"repository": "https://gitea.x3f200c.net/X3F200C/DJCtrlEmu",
"author": "X3F200C",
"license": "GPL-3.0",
"dependencies": {
"ws": "^8.14.2"
}
}

55
preload.js Normal file
View File

@ -0,0 +1,55 @@
const electron = require("electron");
let volumeMeterLeft;
let volumeMeterRight;
function sendControl(name, value = 0x00) {
electron.ipcRenderer.invoke("control", name, value);
}
electron.contextBridge.exposeInMainWorld("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);
},
"crossfade": function (value) {
sendControl("master.crossfade", value);
}
});
electron.ipcRenderer.on("signal", 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;
}
});
electron.ipcRenderer.invoke("load-driver", "linux-rawmidi");
electron.ipcRenderer.invoke("load-mappings", "numark-mixtrackplatinum");
(async function () {
var devices = await electron.ipcRenderer.invoke("list-devices");
if (devices.length > 0) {
electron.ipcRenderer.invoke("open-device", devices[0]);
}
})();
window.onload = function (event) {
volumeMeterLeft = document.querySelector("#volume-meter-left");
volumeMeterRight = document.querySelector("#volume-meter-right");
};

153
server.js Normal file
View File

@ -0,0 +1,153 @@
const path = require("node:path");
const fs = require("node:fs");
const http = require("node:http");
const ws = require("ws");
let driver;
let mappings;
const webServer = new http.Server();
const socketServer = new ws.WebSocketServer({
"noServer": true
});
function sendToClients(message) {
socketServer.clients.forEach(function (client) {
if (client.readyState === ws.OPEN) {
client.send(message);
}
});
}
webServer.on("request", function (request, response) {
switch (request.method) {
case "GET":
switch (request.url) {
default:
var filePath = path.join(__dirname, "view", request.url);
if (!fs.existsSync(filePath)) {
response.writeHead(404);
return response.end("No entry. ");
}
if (fs.statSync(filePath).isDirectory()) {
var entryPath = path.join(filePath, "index.html");
if (!fs.existsSync(entryPath)) {
response.writeHead(404);
return response.end("No entry. ");
}
response.writeHead(200);
fs.createReadStream(entryPath).pipe(response);
} else {
response.writeHead(200);
fs.createReadStream(filePath).pipe(response);
}
break;
}
break;
default:
response.writeHead(404);
return response.end("No entry. ");
break;
}
});
webServer.on("upgrade", function (request, socket, head) {
if (request.url === "/socket") {
socketServer.handleUpgrade(request, socket, head, function (ws) {
socketServer.emit("connection", ws, request);
});
} else {
socket.destroy();
}
});
socketServer.on("connection", function (socket) {
socket.on("error", console.error);
socket.on("message", function (event) {
var data = JSON.parse(event);
switch (data.event) {
case "load-driver":
if (driver) {
driver.close();
delete driver;
}
var driverPath = path.join(__dirname, "drivers", path.basename(data.data.name) + ".js");
driver = require(driverPath);
break;
case "load-mappings":
if (mappings) {
delete mappings;
}
var mappingsPath = path.join(__dirname, "mappings", path.basename(data.data.name) + ".json");
mappings = JSON.parse(fs.readFileSync(mappingsPath));
break;
case "list-devices":
socket.send(JSON.stringify({
"event": "device-list",
"data": {
"devices": driver.list()
}
}));
break;
case "open-device":
driver.open(data.data.name, function (message) {
var byteArray = new Array(...message);
var hexStringifiedMessage = byteArray.map(b => b.toString(16)).map(c => ("00".substring(c.length) + c)).join(" ");
for (var mappingRegExpString in mappings.inbound) {
if (mappings.inbound.hasOwnProperty(mappingRegExpString)) {
var mappingRegExp = new RegExp(mappingRegExpString);
var mappingMatches = hexStringifiedMessage.match(mappingRegExp);
if (!mappingMatches) continue;
var mappingName = mappings.inbound[mappingRegExpString];
mappingMatches.shift();
var value = parseInt(mappingMatches[0], 16);
sendToClients(JSON.stringify({
"event": "signal",
"data": {
"name": mappingName,
"value": value
}
}));
}
}
});
break;
case "control":
if (!driver) return;
if (!mappings.outbound[data.data.name]) return;
var message = mappings.outbound[data.data.name].map(function (byte) {
if (typeof byte != "number") {
return data.data.value;
} else {
return byte;
}
});
driver.send(message);
break;
case "close-device":
driver.close();
break;
default:
}
});
});
webServer.listen(23272);

105
view/assets/scripts/main.js Normal file
View File

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

114
view/assets/stylesheets/style.css Normal file
View File

@ -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;
} */

85
view/index.html Normal file
View File

@ -0,0 +1,85 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>DJ Controller Emulator</title>
<link rel="stylesheet" href="assets/stylesheets/style.css">
<script src="assets/scripts/main.js" charset="utf-8"></script>
</head>
<body>
<main>
<div id="sections">
<div class="deck">
<div class="deck-effects">
</div>
<div class="deck-playback">
<input class="speed-slider" type="range" min="0" value="63" step="1" max="127" oninput="controller.speed(0, 127 - this.value);" ondblclick="controller.speed(0, this.value = 63);">
</div>
<div class="play">
<div class="deck-pads">
<button type="button" class="deck-pad" onclick="controller.pad(0, 0);"></button>
<button type="button" class="deck-pad" onclick="controller.pad(0, 1);"></button>
<button type="button" class="deck-pad" onclick="controller.pad(0, 2);"></button>
<button type="button" class="deck-pad" onclick="controller.pad(0, 3);"></button>
<button type="button" class="deck-pad" onclick="controller.pad(0, 4);"></button>
<button type="button" class="deck-pad" onclick="controller.pad(0, 5);"></button>
<button type="button" class="deck-pad" onclick="controller.pad(0, 6);"></button>
<button type="button" class="deck-pad" onclick="controller.pad(0, 7);"></button>
</div>
<button type="button" onclick="controller.load(0);">Load</button>
<button type="button" onclick="controller.play_pause(0);">PlayPause</button>
</div>
</div>
<div id="mixer">
<div id="knobs">
<div class="deck-eq-knobs">
</div>
<div class="deck-eq-knobs">
</div>
</div>
<div id="volume">
<input class="volume-slider" type="range" min="0" value="127" step="1" max="127" oninput="controller.volume(0, this.value);">
<div id="volume-meters">
<div class="volume-meter">
<div id="volume-meter-left" class="volume-meter-level"></div>
<div class="silence-meter-level"></div>
</div>
<div class="volume-meter">
<div id="volume-meter-right" class="volume-meter-level"></div>
<div class="silence-meter-level"></div>
</div>
</div>
<input class="volume-slider" type="range" min="0" value="127" step="1" max="127" oninput="controller.volume(1, this.value);">
</div>
<input id="crossfader" type="range" min="0" value="63" step="1" max="127" oninput="controller.crossfade(this.value);">
</div>
<div class="reverse deck">
<div class="deck-effects">
</div>
<div class="deck-playback">
<input class="speed-slider" type="range" min="0" value="63" step="1" max="127" oninput="controller.speed(1, 127 - this.value);" ondblclick="controller.speed(1, this.value = 63);">
</div>
<div class="play">
<div class="deck-pads">
<button type="button" class="deck-pad" onclick="controller.pad(1, 0);"></button>
<button type="button" class="deck-pad" onclick="controller.pad(1, 1);"></button>
<button type="button" class="deck-pad" onclick="controller.pad(1, 2);"></button>
<button type="button" class="deck-pad" onclick="controller.pad(1, 3);"></button>
<button type="button" class="deck-pad" onclick="controller.pad(1, 4);"></button>
<button type="button" class="deck-pad" onclick="controller.pad(1, 5);"></button>
<button type="button" class="deck-pad" onclick="controller.pad(1, 6);"></button>
<button type="button" class="deck-pad" onclick="controller.pad(1, 7);"></button>
</div>
<button type="button" onclick="controller.load(1);">Load</button>
<button type="button" onclick="controller.play_pause(1);">PlayPause</button>
</div>
</div>
</div>
</main>
</body>
</html>