Hannes/Time4Midi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
jhartworks
2026-06-16 11:00:24 +02:00
commit bc3a61462a
11 changed files with 9284 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+3
View File
@@ -0,0 +1,3 @@
node_modules/
dist/
.env
README.md
+38
View File
@@ -0,0 +1,38 @@
# Time4Midi
Desktop-Prototyp fuer einen plattformuebergreifenden Timeline-Editor fuer:
- MIDI Notes
- Art-Net DMX Values
- externe Synchronisation via MIDI Timecode (MTC)
- externe Synchronisation via Art-Net Timecode
## Aktueller Stand
Die erste Version enthaelt bereits:
- mehrere Timelines pro Projekt
- Speichern und Laden als JSON
- Tracks fuer `MIDI Note` und `Art-Net Channel`
- Punkt-/Keyframe-Editing direkt auf dem Zeitstrahl
- `Hold` und `Linear` pro Segment
- konfigurierbare MIDI In/Out Ports
- konfigurierbares Art-Net Ziel inklusive Broadcast/Unicast
- Live-Playhead fuer `Internal`, `MTC` und `Art-Net Timecode`
## Starten
```bash
npm install
npm start
```
Unter Windows kannst du alternativ einfach die Datei `start-time4midi.cmd` im Projektordner doppelklicken.
## Naechste sinnvolle Ausbaustufen
1. Mehr Track-Typen: MIDI CC, Program Change, komplette DMX-Ranges
2. Copy/Paste, Zoom, Snapping, Loop, Undo/Redo
3. bessere MTC-Unterstuetzung inkl. Full-Frame und Locate
4. Projektbrowser, mehrere Cue-Listen, Szenen und Trigger
5. Packaging fuer Windows, macOS und Linux
blablub.json
+119
View File
@@ -0,0 +1,119 @@
{
"version": 2,
"name": "BlaBlub",
"timelines": [
{
"id": "timeline-9lqfedny",
"name": "Timeline A",
"duration": 120,
"tracks": [
{
"id": "track-c3e8j63s",
"name": "Kick Note",
"type": "midi-note",
"channel": 1,
"note": 36,
"interpolationDefault": "hold",
"points": [
{
"id": "point-fg40zfhx",
"time": 2,
"value": 127,
"mode": "hold"
},
{
"id": "point-mop7wxzy",
"time": 3,
"value": 0,
"mode": "hold"
},
{
"id": "point-dtrij6iv",
"time": 15.55,
"value": 127,
"mode": "hold"
},
{
"id": "point-jvnqrede",
"time": 25.15,
"value": 6,
"mode": "hold"
}
]
},
{
"id": "track-soj6wtrn",
"name": "Dimmer Ramp",
"type": "artnet-channel",
"universe": 0,
"address": 1,
"interpolationDefault": "linear",
"points": [
{
"id": "point-s9nb1b40",
"time": 0.77,
"value": 0,
"mode": "linear"
},
{
"id": "point-gfe4chv8",
"time": 10,
"value": 255,
"mode": "linear"
},
{
"id": "point-x9fzsv8x",
"time": 18,
"value": 60,
"mode": "linear"
}
]
},
{
"id": "track-aq46qmrj",
"name": "MIDI CC 3",
"type": "midi-cc",
"channel": 1,
"controller": 1,
"interpolationDefault": "linear",
"points": [
{
"id": "point-utl6tzni",
"time": 3.63,
"value": 127,
"mode": "linear"
},
{
"id": "point-jacus9hx",
"time": 12.16,
"value": 0,
"mode": "linear"
},
{
"id": "point-jh4u1bze",
"time": 20.17,
"value": 118,
"mode": "linear"
},
{
"id": "point-penaibyl",
"time": 38.2,
"value": 10,
"mode": "linear"
}
]
}
]
}
],
"selectedTimelineId": "timeline-9lqfedny",
"routing": {
"midiInputId": "input-2",
"midiOutputId": "output-4",
"artnetHost": "255.255.255.255",
"artnetPort": 6454,
"artnetUniverse": 0,
"artnetTimecodePort": 6454,
"artnetBroadcast": true
}
}
main.js
+76
View File
@@ -0,0 +1,76 @@
const { app, BrowserWindow, dialog, ipcMain } = require("electron");
const fs = require("node:fs/promises");
const path = require("node:path");
app.commandLine.appendSwitch("enable-blink-features", "WebMidi");
function createWindow() {
const win = new BrowserWindow({
width: 1600,
height: 980,
minWidth: 1200,
minHeight: 760,
backgroundColor: "#0f1117",
webPreferences: {
contextIsolation: true,
sandbox: false,
preload: path.join(__dirname, "preload.js")
}
});
win.loadFile(path.join(__dirname, "src", "index.html"));
}
ipcMain.handle("project:save", async (_event, payload) => {
if (payload?.filePath) {
await fs.writeFile(payload.filePath, payload.data, "utf8");
return { canceled: false, filePath: payload.filePath };
}
const result = await dialog.showSaveDialog({
defaultPath: payload?.defaultPath || "time4midi-project.json",
filters: [
{ name: "Time4Midi Project", extensions: ["json"] }
]
});
if (result.canceled || !result.filePath) {
return { canceled: true };
}
await fs.writeFile(result.filePath, payload.data, "utf8");
return { canceled: false, filePath: result.filePath };
});
ipcMain.handle("project:load", async () => {
const result = await dialog.showOpenDialog({
properties: ["openFile"],
filters: [
{ name: "Time4Midi Project", extensions: ["json"] }
]
});
if (result.canceled || result.filePaths.length === 0) {
return { canceled: true };
}
const filePath = result.filePaths[0];
const data = await fs.readFile(filePath, "utf8");
return { canceled: false, filePath, data };
});
app.whenReady().then(() => {
createWindow();
app.on("activate", () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
});
app.on("window-all-closed", () => {
if (process.platform !== "darwin") {
app.quit();
}
});
package-lock.json
Generated
+4855
View File
File diff suppressed because it is too large Load Diff
package.json
+45
View File
@@ -0,0 +1,45 @@
{
"name": "time4midi",
"version": "0.1.0",
"description": "Cross-platform timeline editor for MIDI notes and Art-Net values, slaved to incoming timecode.",
"main": "main.js",
"author": "J.H. Artworks",
"scripts": {
"start": "electron .",
"dist:win": "set CSC_IDENTITY_AUTO_DISCOVERY=false&& electron-builder --win portable"
},
"devDependencies": {
"electron": "^31.7.7",
"electron-builder": "^24.13.3"
},
"dependencies": {
"knx": "^2.5.4",
"modbus-serial": "^8.0.25",
"mqtt": "^5.10.4",
"serialport": "^13.0.0"
},
"build": {
"appId": "com.jhartworks.time4midi",
"productName": "Time4Midi",
"files": [
"main.js",
"preload.js",
"src/**/*",
"package.json"
],
"directories": {
"output": "dist"
},
"win": {
"signAndEditExecutable": false,
"target": [
{
"target": "portable",
"arch": [
"x64"
]
}
]
}
}
}
preload.js
+941
View File
@@ -0,0 +1,941 @@
const { contextBridge, ipcRenderer } = require("electron");
const crypto = require("node:crypto");
const dgram = require("node:dgram");
const mqtt = require("mqtt");
const { SerialPort } = require("serialport");
const ModbusRTU = require("modbus-serial");
const knx = require("knx");
const ARTNET_PORT = 6454;
const SACN_PORT = 5568;
const KNX_PORT = 3671;
const ARTNET_HEADER = Buffer.from("Art-Net\0", "ascii");
const ARTNET_OPCODE_DMX = 0x5000;
const ARTNET_OPCODE_TIMECODE = 0x9700;
function createStatusEmitter() {
return {
statusListeners: new Set(),
lastError: ""
};
}
function emitStatus(target, message) {
target.lastError = message || "";
const payload = {
ok: !target.lastError,
error: target.lastError
};
for (const listener of target.statusListeners) {
listener(payload);
}
}
function addStatusApi(target, handler) {
target.statusListeners.add(handler);
handler({
ok: !target.lastError,
error: target.lastError
});
return () => {
target.statusListeners.delete(handler);
};
}
const artnet = {
...createStatusEmitter(),
sendSocket: dgram.createSocket("udp4"),
listenSocket: null,
listeners: new Set(),
config: {
enabled: true,
host: "255.255.255.255",
port: ARTNET_PORT,
broadcast: true,
timecodeListenPort: ARTNET_PORT
},
sequence: 1
};
const sacn = {
...createStatusEmitter(),
socket: dgram.createSocket("udp4"),
config: {
enabled: false,
host: "",
port: SACN_PORT,
multicast: true,
sourceName: "Time4Midi"
},
sequence: 1,
cid: crypto.randomBytes(16)
};
const osc = {
...createStatusEmitter(),
socket: dgram.createSocket("udp4"),
config: {
enabled: false,
host: "127.0.0.1",
port: 8000
}
};
const mqttState = {
...createStatusEmitter(),
client: null,
connected: false,
config: {
enabled: false,
brokerUrl: "mqtt://127.0.0.1:1883",
username: "",
password: "",
clientId: ""
}
};
const serialState = {
...createStatusEmitter(),
port: null,
config: {
enabled: false,
path: "",
baudRate: 9600,
dataBits: 8,
stopBits: 1,
parity: "none",
mode: "rs232"
}
};
const modbusTcpState = {
...createStatusEmitter(),
client: new ModbusRTU(),
connected: false,
signature: "",
config: {
enabled: false,
host: "127.0.0.1",
port: 502,
timeout: 1000
}
};
const modbusRtuState = {
...createStatusEmitter(),
client: new ModbusRTU(),
connected: false,
signature: "",
config: {
enabled: false,
path: "",
baudRate: 9600,
dataBits: 8,
stopBits: 1,
parity: "none",
timeout: 1000
}
};
const knxState = {
...createStatusEmitter(),
connection: null,
connecting: null,
connected: false,
config: {
enabled: false,
ipAddr: "224.0.23.12",
ipPort: KNX_PORT,
physAddr: "15.15.15",
forceTunneling: false
}
};
function normalizeArtNetConfig(nextConfig = {}) {
return {
enabled: nextConfig.enabled !== false,
host: nextConfig.host || "255.255.255.255",
port: Number.isFinite(Number(nextConfig.port)) ? Number(nextConfig.port) : ARTNET_PORT,
broadcast: Boolean(nextConfig.broadcast),
timecodeListenPort: Number.isFinite(Number(nextConfig.timecodeListenPort))
? Number(nextConfig.timecodeListenPort)
: ARTNET_PORT
};
}
function normalizeSacnConfig(nextConfig = {}) {
return {
enabled: Boolean(nextConfig.enabled),
host: String(nextConfig.host || ""),
port: Number.isFinite(Number(nextConfig.port)) ? Number(nextConfig.port) : SACN_PORT,
multicast: nextConfig.multicast !== false,
sourceName: String(nextConfig.sourceName || "Time4Midi").slice(0, 63)
};
}
function normalizeOscConfig(nextConfig = {}) {
return {
enabled: Boolean(nextConfig.enabled),
host: nextConfig.host || "127.0.0.1",
port: Number.isFinite(Number(nextConfig.port)) ? Number(nextConfig.port) : 8000
};
}
function normalizeMqttConfig(nextConfig = {}) {
return {
enabled: Boolean(nextConfig.enabled),
brokerUrl: String(nextConfig.brokerUrl || "").trim() || "mqtt://127.0.0.1:1883",
username: String(nextConfig.username || ""),
password: String(nextConfig.password || ""),
clientId: String(nextConfig.clientId || "")
};
}
function normalizeSerialConfig(nextConfig = {}) {
return {
enabled: Boolean(nextConfig.enabled),
path: String(nextConfig.path || ""),
baudRate: Number.isFinite(Number(nextConfig.baudRate)) ? Number(nextConfig.baudRate) : 9600,
dataBits: [7, 8].includes(Number(nextConfig.dataBits)) ? Number(nextConfig.dataBits) : 8,
stopBits: [1, 2].includes(Number(nextConfig.stopBits)) ? Number(nextConfig.stopBits) : 1,
parity: ["none", "even", "odd"].includes(String(nextConfig.parity || "none")) ? String(nextConfig.parity || "none") : "none",
mode: String(nextConfig.mode || "rs232")
};
}
function normalizeModbusTcpConfig(nextConfig = {}) {
return {
enabled: Boolean(nextConfig.enabled),
host: String(nextConfig.host || "127.0.0.1"),
port: Number.isFinite(Number(nextConfig.port)) ? Number(nextConfig.port) : 502,
timeout: Number.isFinite(Number(nextConfig.timeout)) ? Number(nextConfig.timeout) : 1000
};
}
function normalizeModbusRtuConfig(nextConfig = {}) {
return {
enabled: Boolean(nextConfig.enabled),
path: String(nextConfig.path || ""),
baudRate: Number.isFinite(Number(nextConfig.baudRate)) ? Number(nextConfig.baudRate) : 9600,
dataBits: [7, 8].includes(Number(nextConfig.dataBits)) ? Number(nextConfig.dataBits) : 8,
stopBits: [1, 2].includes(Number(nextConfig.stopBits)) ? Number(nextConfig.stopBits) : 1,
parity: ["none", "even", "odd"].includes(String(nextConfig.parity || "none")) ? String(nextConfig.parity || "none") : "none",
timeout: Number.isFinite(Number(nextConfig.timeout)) ? Number(nextConfig.timeout) : 1000
};
}
function normalizeKnxConfig(nextConfig = {}) {
return {
enabled: Boolean(nextConfig.enabled),
ipAddr: String(nextConfig.ipAddr || "224.0.23.12"),
ipPort: Number.isFinite(Number(nextConfig.ipPort)) ? Number(nextConfig.ipPort) : KNX_PORT,
physAddr: String(nextConfig.physAddr || "15.15.15"),
forceTunneling: Boolean(nextConfig.forceTunneling)
};
}
function closeArtNetListener() {
if (artnet.listenSocket) {
try {
artnet.listenSocket.close();
} catch (_error) {
// Ignore listener close races.
}
artnet.listenSocket = null;
}
}
function parseArtNetTimecode(message) {
if (message.length < 19) {
return null;
}
if (!message.subarray(0, 8).equals(ARTNET_HEADER)) {
return null;
}
const opcode = message.readUInt16LE(8);
if (opcode !== ARTNET_OPCODE_TIMECODE) {
return null;
}
const frames = message[14];
const seconds = message[15];
const minutes = message[16];
const hours = message[17];
const frameType = message[18] & 0x03;
const fpsMap = [24, 25, 29.97, 30];
const fps = fpsMap[frameType] || 30;
const totalSeconds = (hours * 3600) + (minutes * 60) + seconds + (frames / fps);
return { hours, minutes, seconds, frames, fps, totalSeconds };
}
function ensureArtNetListener() {
if (!artnet.config.enabled || artnet.listenSocket) {
return;
}
artnet.listenSocket = dgram.createSocket("udp4");
artnet.listenSocket.on("error", (error) => {
emitStatus(artnet, `Art-Net Listen Fehler: ${error.message}`);
});
artnet.listenSocket.on("listening", () => {
emitStatus(artnet, "");
});
artnet.listenSocket.on("message", (message) => {
const parsed = parseArtNetTimecode(message);
if (!parsed) return;
for (const listener of artnet.listeners) {
listener(parsed);
}
});
try {
artnet.listenSocket.bind(artnet.config.timecodeListenPort);
} catch (error) {
emitStatus(artnet, `Art-Net Listen Fehler: ${error.message}`);
}
}
function configureArtNet(nextConfig) {
const previousPort = artnet.config.timecodeListenPort;
artnet.config = normalizeArtNetConfig(nextConfig);
try {
artnet.sendSocket.setBroadcast(artnet.config.broadcast);
} catch (error) {
emitStatus(artnet, `Art-Net Konfig Fehler: ${error.message}`);
}
if (!artnet.config.enabled) {
closeArtNetListener();
emitStatus(artnet, "");
return artnet.config;
}
if (previousPort !== artnet.config.timecodeListenPort) {
closeArtNetListener();
}
if (artnet.listeners.size > 0) {
ensureArtNetListener();
}
return artnet.config;
}
function sendArtNetDmx(payload) {
if (!artnet.config.enabled) {
return Promise.resolve(false);
}
const universe = Math.max(0, Math.min(32767, Number(payload.universe) || 0));
const values = Array.isArray(payload.values) ? payload.values : [];
const length = Math.max(2, Math.min(512, values.length || 512));
const evenLength = length % 2 === 0 ? length : length + 1;
const packet = Buffer.alloc(18 + evenLength);
ARTNET_HEADER.copy(packet, 0);
packet.writeUInt16LE(ARTNET_OPCODE_DMX, 8);
packet[10] = 0x00;
packet[11] = 0x0e;
packet[12] = artnet.sequence;
packet[13] = 0x00;
packet.writeUInt16LE(universe, 14);
packet.writeUInt16BE(evenLength, 16);
for (let index = 0; index < evenLength; index += 1) {
packet[18 + index] = Math.max(0, Math.min(255, Math.round(values[index] || 0)));
}
artnet.sequence = artnet.sequence >= 255 ? 1 : artnet.sequence + 1;
return new Promise((resolve, reject) => {
artnet.sendSocket.send(packet, 0, packet.length, artnet.config.port, artnet.config.host, (error) => {
if (error) {
emitStatus(artnet, `Art-Net Send Fehler: ${error.message}`);
reject(error);
return;
}
emitStatus(artnet, "");
resolve(true);
});
});
}
function configureOsc(nextConfig) {
osc.config = normalizeOscConfig(nextConfig);
emitStatus(osc, "");
return osc.config;
}
function encodeOscString(value) {
const base = Buffer.from(`${value}\0`, "utf8");
const padding = (4 - (base.length % 4)) % 4;
return padding === 0 ? base : Buffer.concat([base, Buffer.alloc(padding)]);
}
function encodeOscArgument(value, argType) {
if (argType === "string") {
return { tag: "s", data: encodeOscString(String(value ?? "")) };
}
if (argType === "int") {
const data = Buffer.alloc(4);
data.writeInt32BE(Math.round(Number(value) || 0), 0);
return { tag: "i", data };
}
const data = Buffer.alloc(4);
data.writeFloatBE(Number(value) || 0, 0);
return { tag: "f", data };
}
function sendOsc(payload) {
if (!osc.config.enabled) {
return Promise.resolve(false);
}
const address = String(payload.address || "/time4midi");
const normalizedAddress = address.startsWith("/") ? address : `/${address}`;
const argument = encodeOscArgument(payload.value, payload.argType || "float");
const packet = Buffer.concat([
encodeOscString(normalizedAddress),
encodeOscString(`,${argument.tag}`),
argument.data
]);
return new Promise((resolve, reject) => {
osc.socket.send(packet, 0, packet.length, osc.config.port, osc.config.host, (error) => {
if (error) {
emitStatus(osc, `OSC Send Fehler: ${error.message}`);
reject(error);
return;
}
emitStatus(osc, "");
resolve(true);
});
});
}
function configureSacn(nextConfig) {
sacn.config = normalizeSacnConfig(nextConfig);
emitStatus(sacn, "");
return sacn.config;
}
function clampSacnUniverse(universe) {
return Math.max(1, Math.min(63999, Number(universe) || 1));
}
function sacnDestination(universe) {
const safeUniverse = clampSacnUniverse(universe);
if (!sacn.config.multicast) {
return sacn.config.host || "127.0.0.1";
}
const high = (safeUniverse >> 8) & 0xff;
const low = safeUniverse & 0xff;
return `239.255.${high}.${low}`;
}
function encodeFlagsAndLength(length) {
return 0x7000 | length;
}
function writeFixedString(buffer, offset, size, value) {
buffer.fill(0, offset, offset + size);
Buffer.from(String(value || ""), "utf8").copy(buffer, offset, 0, size);
}
function sendSacnDmx(payload) {
if (!sacn.config.enabled) {
return Promise.resolve(false);
}
const universe = clampSacnUniverse(payload.universe);
const values = Array.isArray(payload.values) ? payload.values : [];
const slotCount = Math.max(1, Math.min(512, values.length || 512));
const packetLength = 126 + slotCount;
const propertyValueCount = slotCount + 1;
const packet = Buffer.alloc(packetLength);
packet.writeUInt16BE(0x0010, 0);
packet.writeUInt16BE(0x0000, 2);
writeFixedString(packet, 4, 12, "ASC-E1.17");
packet.writeUInt16BE(encodeFlagsAndLength(packetLength - 16), 16);
packet.writeUInt32BE(0x00000004, 18);
sacn.cid.copy(packet, 22);
packet.writeUInt16BE(encodeFlagsAndLength(packetLength - 38), 38);
packet.writeUInt32BE(0x00000002, 40);
writeFixedString(packet, 44, 64, sacn.config.sourceName || "Time4Midi");
packet[108] = 100;
packet.writeUInt16BE(0x0000, 109);
packet[111] = sacn.sequence;
packet[112] = 0x00;
packet.writeUInt16BE(universe, 113);
packet.writeUInt16BE(encodeFlagsAndLength(packetLength - 115), 115);
packet[117] = 0x02;
packet[118] = 0xa1;
packet.writeUInt16BE(0x0000, 119);
packet.writeUInt16BE(0x0001, 121);
packet.writeUInt16BE(propertyValueCount, 123);
packet[125] = 0x00;
for (let index = 0; index < slotCount; index += 1) {
packet[126 + index] = Math.max(0, Math.min(255, Math.round(values[index] || 0)));
}
sacn.sequence = sacn.sequence >= 255 ? 1 : sacn.sequence + 1;
const host = sacnDestination(universe);
return new Promise((resolve, reject) => {
sacn.socket.send(packet, 0, packet.length, sacn.config.port, host, (error) => {
if (error) {
emitStatus(sacn, `sACN Send Fehler: ${error.message}`);
reject(error);
return;
}
emitStatus(sacn, "");
resolve(true);
});
});
}
function disconnectMqtt() {
if (mqttState.client) {
try {
mqttState.client.removeAllListeners();
mqttState.client.end(true);
} catch (_error) {
// Best effort disconnect.
}
}
mqttState.client = null;
mqttState.connected = false;
}
function configureMqtt(nextConfig) {
mqttState.config = normalizeMqttConfig(nextConfig);
disconnectMqtt();
if (!mqttState.config.enabled) {
emitStatus(mqttState, "");
return mqttState.config;
}
const options = { reconnectPeriod: 1000 };
if (mqttState.config.clientId) options.clientId = mqttState.config.clientId;
if (mqttState.config.username) options.username = mqttState.config.username;
if (mqttState.config.password) options.password = mqttState.config.password;
try {
mqttState.client = mqtt.connect(mqttState.config.brokerUrl, options);
mqttState.client.on("connect", () => {
mqttState.connected = true;
emitStatus(mqttState, "");
});
mqttState.client.on("reconnect", () => {
mqttState.connected = false;
emitStatus(mqttState, "MQTT verbindet neu...");
});
mqttState.client.on("close", () => {
mqttState.connected = false;
});
mqttState.client.on("error", (error) => {
mqttState.connected = false;
emitStatus(mqttState, `MQTT Fehler: ${error.message}`);
});
} catch (error) {
emitStatus(mqttState, `MQTT Fehler: ${error.message}`);
}
return mqttState.config;
}
function publishMqtt(payload) {
if (!mqttState.config.enabled) {
return Promise.resolve(false);
}
return new Promise((resolve, reject) => {
if (!mqttState.client || !mqttState.connected) {
reject(new Error("MQTT nicht verbunden"));
return;
}
mqttState.client.publish(String(payload.topic || ""), String(payload.value ?? ""), {}, (error) => {
if (error) {
emitStatus(mqttState, `MQTT Send Fehler: ${error.message}`);
reject(error);
return;
}
emitStatus(mqttState, "");
resolve(true);
});
});
}
function closeSerialPort() {
return new Promise((resolve) => {
if (!serialState.port) {
resolve();
return;
}
const port = serialState.port;
serialState.port = null;
if (!port.isOpen) {
resolve();
return;
}
port.close(() => resolve());
});
}
async function configureSerial(nextConfig) {
serialState.config = normalizeSerialConfig(nextConfig);
await closeSerialPort();
emitStatus(serialState, "");
return serialState.config;
}
async function ensureSerialPortOpen() {
if (!serialState.config.enabled) {
throw new Error("Serial deaktiviert");
}
if (!serialState.config.path) {
throw new Error("Serial Port nicht gesetzt");
}
if (serialState.port && serialState.port.isOpen && serialState.port.path === serialState.config.path) {
return serialState.port;
}
await closeSerialPort();
serialState.port = new SerialPort({
path: serialState.config.path,
baudRate: serialState.config.baudRate,
dataBits: serialState.config.dataBits,
stopBits: serialState.config.stopBits,
parity: serialState.config.parity,
autoOpen: false
});
serialState.port.on("error", (error) => {
emitStatus(serialState, `Serial Fehler: ${error.message}`);
});
await new Promise((resolve, reject) => {
serialState.port.open((error) => {
if (error) {
reject(error);
return;
}
resolve(true);
});
});
emitStatus(serialState, "");
return serialState.port;
}
async function sendSerial(payload) {
if (!serialState.config.enabled) {
return false;
}
const port = await ensureSerialPortOpen();
const text = String(payload.text ?? "");
return new Promise((resolve, reject) => {
port.write(text, "utf8", (error) => {
if (error) {
emitStatus(serialState, `Serial Send Fehler: ${error.message}`);
reject(error);
return;
}
emitStatus(serialState, "");
resolve(true);
});
});
}
async function listSerialPorts() {
const ports = await SerialPort.list();
return ports.map((port) => ({
path: port.path,
manufacturer: port.manufacturer || "",
friendlyName: port.path
}));
}
async function disconnectModbusClient(state) {
if (state.client?.isOpen) {
try {
await state.client.close();
} catch (_error) {
// Best effort close.
}
}
state.connected = false;
state.signature = "";
}
async function configureModbusTcp(nextConfig) {
modbusTcpState.config = normalizeModbusTcpConfig(nextConfig);
await disconnectModbusClient(modbusTcpState);
emitStatus(modbusTcpState, "");
return modbusTcpState.config;
}
async function configureModbusRtu(nextConfig) {
modbusRtuState.config = normalizeModbusRtuConfig(nextConfig);
await disconnectModbusClient(modbusRtuState);
emitStatus(modbusRtuState, "");
return modbusRtuState.config;
}
async function ensureModbusTcpConnected() {
if (!modbusTcpState.config.enabled) {
throw new Error("Modbus TCP deaktiviert");
}
const signature = `${modbusTcpState.config.host}:${modbusTcpState.config.port}:${modbusTcpState.config.timeout}`;
if (modbusTcpState.connected && modbusTcpState.signature === signature && modbusTcpState.client.isOpen) {
return modbusTcpState.client;
}
await disconnectModbusClient(modbusTcpState);
await modbusTcpState.client.connectTCP(modbusTcpState.config.host, {
port: modbusTcpState.config.port,
timeout: modbusTcpState.config.timeout
});
modbusTcpState.client.setTimeout(modbusTcpState.config.timeout);
modbusTcpState.connected = true;
modbusTcpState.signature = signature;
emitStatus(modbusTcpState, "");
return modbusTcpState.client;
}
async function ensureModbusRtuConnected() {
if (!modbusRtuState.config.enabled) {
throw new Error("Modbus RTU deaktiviert");
}
if (!modbusRtuState.config.path) {
throw new Error("Modbus RTU Port nicht gesetzt");
}
const signature = `${modbusRtuState.config.path}:${modbusRtuState.config.baudRate}:${modbusRtuState.config.parity}:${modbusRtuState.config.dataBits}:${modbusRtuState.config.stopBits}`;
if (modbusRtuState.connected && modbusRtuState.signature === signature && modbusRtuState.client.isOpen) {
return modbusRtuState.client;
}
await disconnectModbusClient(modbusRtuState);
await modbusRtuState.client.connectRTUBuffered(modbusRtuState.config.path, {
baudRate: modbusRtuState.config.baudRate,
parity: modbusRtuState.config.parity,
dataBits: modbusRtuState.config.dataBits,
stopBits: modbusRtuState.config.stopBits
});
modbusRtuState.client.setTimeout(modbusRtuState.config.timeout);
modbusRtuState.connected = true;
modbusRtuState.signature = signature;
emitStatus(modbusRtuState, "");
return modbusRtuState.client;
}
async function writeModbus(client, payload) {
client.setID(Number(payload.unitId) || 1);
const address = Number(payload.address) || 0;
const value = Number(payload.value) || 0;
if (payload.registerType === "coil") {
await client.writeCoil(address, value >= 1);
} else {
await client.writeRegister(address, Math.max(0, Math.min(65535, Math.round(value))));
}
}
async function sendModbusTcp(payload) {
const client = await ensureModbusTcpConnected();
try {
await writeModbus(client, payload);
emitStatus(modbusTcpState, "");
return true;
} catch (error) {
emitStatus(modbusTcpState, `Modbus TCP Fehler: ${error.message}`);
throw error;
}
}
async function sendModbusRtu(payload) {
const client = await ensureModbusRtuConnected();
try {
await writeModbus(client, payload);
emitStatus(modbusRtuState, "");
return true;
} catch (error) {
emitStatus(modbusRtuState, `Modbus RTU Fehler: ${error.message}`);
throw error;
}
}
function disconnectKnx() {
return new Promise((resolve) => {
if (!knxState.connection) {
knxState.connected = false;
knxState.connecting = null;
resolve();
return;
}
const connection = knxState.connection;
knxState.connection = null;
knxState.connected = false;
knxState.connecting = null;
try {
connection.Disconnect(() => resolve());
} catch (_error) {
resolve();
}
});
}
async function configureKnx(nextConfig) {
knxState.config = normalizeKnxConfig(nextConfig);
await disconnectKnx();
emitStatus(knxState, "");
return knxState.config;
}
async function ensureKnxConnection() {
if (!knxState.config.enabled) {
throw new Error("KNX deaktiviert");
}
if (knxState.connection && knxState.connected) {
return knxState.connection;
}
if (knxState.connecting) {
return knxState.connecting;
}
knxState.connecting = new Promise((resolve, reject) => {
try {
const connection = knx.Connection({
ipAddr: knxState.config.ipAddr,
ipPort: knxState.config.ipPort,
physAddr: knxState.config.physAddr,
forceTunneling: knxState.config.forceTunneling,
handlers: {
connected: function () {
knxState.connection = connection;
knxState.connected = true;
knxState.connecting = null;
emitStatus(knxState, "");
resolve(connection);
},
disconnected: function () {
knxState.connected = false;
knxState.connection = null;
},
error: function (error) {
knxState.connected = false;
knxState.connection = null;
knxState.connecting = null;
const message = error?.message || String(error);
emitStatus(knxState, `KNX Fehler: ${message}`);
reject(error instanceof Error ? error : new Error(message));
}
}
});
knxState.connection = connection;
} catch (error) {
knxState.connecting = null;
emitStatus(knxState, `KNX Fehler: ${error.message}`);
reject(error);
}
});
return knxState.connecting;
}
async function sendKnx(payload) {
const connection = await ensureKnxConnection();
const dpt = String(payload.dpt || "DPT5.001");
let value = payload.value;
if (dpt.startsWith("DPT1")) {
value = Number(value) >= 1;
} else if (dpt.startsWith("DPT16")) {
value = String(value ?? "");
} else {
value = Number(value) || 0;
}
return new Promise((resolve, reject) => {
try {
connection.write(String(payload.groupAddress || "1/1/1"), value, dpt, (error) => {
if (error) {
emitStatus(knxState, `KNX Send Fehler: ${error.message}`);
reject(error);
return;
}
emitStatus(knxState, "");
resolve(true);
});
} catch (error) {
emitStatus(knxState, `KNX Send Fehler: ${error.message}`);
reject(error);
}
});
}
artnet.sendSocket.on("error", (error) => {
emitStatus(artnet, `Art-Net Socket Fehler: ${error.message}`);
});
osc.socket.on("error", (error) => {
emitStatus(osc, `OSC Socket Fehler: ${error.message}`);
});
sacn.socket.on("error", (error) => {
emitStatus(sacn, `sACN Socket Fehler: ${error.message}`);
});
configureMqtt(mqttState.config);
contextBridge.exposeInMainWorld("time4midi", {
project: {
save: (payload) => ipcRenderer.invoke("project:save", payload),
load: () => ipcRenderer.invoke("project:load")
},
artnet: {
configure: (config) => configureArtNet(config),
sendDmx: (payload) => sendArtNetDmx(payload),
onTimecode: (handler) => {
artnet.listeners.add(handler);
ensureArtNetListener();
return () => {
artnet.listeners.delete(handler);
};
},
onStatus: (handler) => addStatusApi(artnet, handler)
},
sacn: {
configure: (config) => configureSacn(config),
sendDmx: (payload) => sendSacnDmx(payload),
onStatus: (handler) => addStatusApi(sacn, handler)
},
osc: {
configure: (config) => configureOsc(config),
send: (payload) => sendOsc(payload),
onStatus: (handler) => addStatusApi(osc, handler)
},
mqtt: {
configure: (config) => configureMqtt(config),
publish: (payload) => publishMqtt(payload),
onStatus: (handler) => addStatusApi(mqttState, handler)
},
serial: {
configure: (config) => configureSerial(config),
send: (payload) => sendSerial(payload),
listPorts: () => listSerialPorts(),
onStatus: (handler) => addStatusApi(serialState, handler)
},
modbusTcp: {
configure: (config) => configureModbusTcp(config),
send: (payload) => sendModbusTcp(payload),
onStatus: (handler) => addStatusApi(modbusTcpState, handler)
},
modbusRtu: {
configure: (config) => configureModbusRtu(config),
send: (payload) => sendModbusRtu(payload),
onStatus: (handler) => addStatusApi(modbusRtuState, handler)
},
knx: {
configure: (config) => configureKnx(config),
send: (payload) => sendKnx(payload),
onStatus: (handler) => addStatusApi(knxState, handler)
}
});
src/app.js
+2376
View File
File diff suppressed because it is too large Load Diff
src/index.html
+333
View File
@@ -0,0 +1,333 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Time4Midi</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="app-shell">
<aside class="sidebar">
<div class="panel brand-panel">
<div class="brand-lockup">
<div class="logo-mark" aria-hidden="true">
<span></span>
</div>
<div>
<h1>Time4Midi</h1>
<div class="brand-credit">a J.H. Artworks Product</div>
</div>
</div>
</div>
<div class="panel">
<div class="panel-header">
<h2>Projekt</h2>
<div class="panel-actions">
<button id="newProjectButton" class="ghost">Neu</button>
<button id="saveProjectButton" class="ghost">Speichern</button>
<button id="loadProjectButton" class="ghost">Laden</button>
</div>
</div>
<label class="field">
<span>Projektname</span>
<input id="projectNameInput" type="text" maxlength="80">
</label>
<div class="meta-row">
<span>Aktive Datei</span>
<strong id="projectPathLabel" class="path-label">Noch nicht gespeichert</strong>
</div>
</div>
<div class="panel">
<div class="panel-header">
<h2>Timelines</h2>
<button id="addTimelineButton">+ Timeline</button>
</div>
<div id="timelineList" class="timeline-list"></div>
</div>
<div class="panel">
<div class="panel-header">
<h2>Tracks</h2>
<div class="panel-actions">
<button id="addMidiTrackButton" class="ghost">+ Note</button>
<button id="addMidiCcTrackButton" class="ghost">+ CC</button>
<button id="addArtNetTrackButton" class="ghost">+ Art-Net</button>
<button id="addSacnTrackButton" class="ghost">+ sACN</button>
<button id="addSerialTrackButton" class="ghost">+ Serial</button>
<button id="addModbusTcpTrackButton" class="ghost">+ MB TCP</button>
<button id="addModbusRtuTrackButton" class="ghost">+ MB RTU</button>
<button id="addKnxTrackButton" class="ghost">+ KNX</button>
<button id="addOscTrackButton" class="ghost">+ OSC</button>
<button id="addMqttTrackButton" class="ghost">+ MQTT</button>
</div>
</div>
<div id="trackList" class="track-list"></div>
</div>
</aside>
<main class="workspace">
<section class="transport-bar panel">
<div class="transport-main">
<div class="transport-block">
<span class="transport-label">Quelle</span>
<select id="syncSourceSelect">
<option value="internal">Internal</option>
<option value="mtc">MTC</option>
<option value="artnet">Art-Net Timecode</option>
</select>
</div>
<div class="transport-block">
<span class="transport-label">Timecode</span>
<strong id="timecodeLabel">00:00:00:00</strong>
</div>
<div class="transport-block">
<span class="transport-label">Status</span>
<strong id="transportStatusLabel">Idle</strong>
</div>
<div class="transport-controls">
<button id="playButton">Play</button>
<button id="pauseButton" class="ghost">Pause</button>
<button id="stopButton" class="ghost">Stop</button>
</div>
</div>
</section>
<section class="editor panel">
<div class="editor-header">
<div>
<div class="eyebrow">Editor</div>
<h2 id="timelineTitle">Keine Timeline ausgewählt</h2>
</div>
<div class="editor-hints">
<span>Doppelklick: Punkt setzen</span>
<span>Ziehen: Zeit/Wert ändern</span>
<span>Entf: Punkt löschen</span>
</div>
</div>
<div class="canvas-frame">
<canvas id="timelineCanvas"></canvas>
</div>
</section>
</main>
<aside class="inspector" id="inspectorPane">
<button id="inspectorToggleButton" class="inspector-toggle ghost" title="Rechte Leiste ein-/ausklappen">
>
</button>
<div class="panel">
<div class="panel-header">
<h2>Routing</h2>
</div>
<label class="field">
<span>MIDI Input</span>
<select id="midiInputSelect"></select>
</label>
<label class="field">
<span>MIDI Output</span>
<select id="midiOutputSelect"></select>
</label>
<label class="field">
<span>Art-Net Ziel</span>
<input id="artnetHostInput" type="text" placeholder="255.255.255.255">
</label>
<label class="field checkbox-row">
<span>Art-Net aktiv</span>
<input id="artnetEnabledInput" type="checkbox">
</label>
<div class="field-grid">
<label class="field">
<span>Port</span>
<input id="artnetPortInput" type="number" min="1" max="65535">
</label>
<label class="field">
<span>Universe</span>
<input id="artnetUniverseInput" type="number" min="0" max="32767">
</label>
</div>
<div class="field-grid">
<label class="field">
<span>Timecode Port</span>
<input id="artnetTimecodePortInput" type="number" min="1" max="65535">
</label>
<label class="field checkbox">
<span>Broadcast</span>
<input id="artnetBroadcastInput" type="checkbox">
</label>
</div>
<div class="field-grid">
<label class="field">
<span>OSC Host</span>
<input id="oscHostInput" type="text" placeholder="127.0.0.1">
</label>
<label class="field">
<span>OSC Port</span>
<input id="oscPortInput" type="number" min="1" max="65535">
</label>
</div>
<label class="field checkbox-row">
<span>OSC aktiv</span>
<input id="oscEnabledInput" type="checkbox">
</label>
<div class="field-grid">
<label class="field">
<span>sACN Host</span>
<input id="sacnHostInput" type="text" placeholder="239.255.x.x oder Node-IP">
</label>
<label class="field">
<span>sACN Port</span>
<input id="sacnPortInput" type="number" min="1" max="65535">
</label>
</div>
<label class="field checkbox-row">
<span>sACN aktiv</span>
<input id="sacnEnabledInput" type="checkbox">
</label>
<div class="field-grid">
<label class="field">
<span>sACN Source</span>
<input id="sacnSourceNameInput" type="text" placeholder="Time4Midi">
</label>
<label class="field checkbox">
<span>Multicast</span>
<input id="sacnMulticastInput" type="checkbox">
</label>
</div>
<label class="field">
<span>MQTT Broker</span>
<input id="mqttBrokerInput" type="text" placeholder="mqtt://127.0.0.1:1883">
</label>
<label class="field checkbox-row">
<span>MQTT aktiv</span>
<input id="mqttEnabledInput" type="checkbox">
</label>
<div class="field-grid">
<label class="field">
<span>MQTT User</span>
<input id="mqttUsernameInput" type="text">
</label>
<label class="field">
<span>MQTT Password</span>
<input id="mqttPasswordInput" type="password">
</label>
</div>
<label class="field">
<span>MQTT Client ID</span>
<input id="mqttClientIdInput" type="text" placeholder="time4midi-desktop">
</label>
<div class="field-grid">
<label class="field">
<span>Serial Port</span>
<input id="serialPathInput" type="text" placeholder="COM3 oder /dev/ttyUSB0">
</label>
<label class="field">
<span>Baud</span>
<input id="serialBaudInput" type="number" min="300" max="921600">
</label>
</div>
<div class="field-grid">
<label class="field">
<span>Parity</span>
<select id="serialParitySelect">
<option value="none">None</option>
<option value="even">Even</option>
<option value="odd">Odd</option>
</select>
</label>
<label class="field">
<span>Mode</span>
<select id="serialModeSelect">
<option value="rs232">RS232</option>
<option value="rs485">RS485</option>
</select>
</label>
</div>
<label class="field checkbox-row">
<span>Serial aktiv</span>
<input id="serialEnabledInput" type="checkbox">
</label>
<div class="field-grid">
<label class="field">
<span>Modbus TCP Host</span>
<input id="modbusTcpHostInput" type="text" placeholder="127.0.0.1">
</label>
<label class="field">
<span>Port</span>
<input id="modbusTcpPortInput" type="number" min="1" max="65535">
</label>
</div>
<label class="field checkbox-row">
<span>Modbus TCP aktiv</span>
<input id="modbusTcpEnabledInput" type="checkbox">
</label>
<div class="field-grid">
<label class="field">
<span>Modbus RTU Port</span>
<input id="modbusRtuPathInput" type="text" placeholder="COM4 oder /dev/ttyUSB1">
</label>
<label class="field">
<span>Baud</span>
<input id="modbusRtuBaudInput" type="number" min="300" max="921600">
</label>
</div>
<div class="field-grid">
<label class="field">
<span>Parity</span>
<select id="modbusRtuParitySelect">
<option value="none">None</option>
<option value="even">Even</option>
<option value="odd">Odd</option>
</select>
</label>
<label class="field checkbox-row">
<span>Modbus RTU aktiv</span>
<input id="modbusRtuEnabledInput" type="checkbox">
</label>
</div>
<div class="field-grid">
<label class="field">
<span>KNX IP</span>
<input id="knxIpInput" type="text" placeholder="224.0.23.12 oder Gateway-IP">
</label>
<label class="field">
<span>Port</span>
<input id="knxPortInput" type="number" min="1" max="65535">
</label>
</div>
<div class="field-grid">
<label class="field">
<span>Phys Addr</span>
<input id="knxPhysAddrInput" type="text" placeholder="15.15.15">
</label>
<label class="field checkbox-row">
<span>Tunneling</span>
<input id="knxTunnelingInput" type="checkbox">
</label>
</div>
<label class="field checkbox-row">
<span>KNX aktiv</span>
<input id="knxEnabledInput" type="checkbox">
</label>
</div>
<div class="panel">
<div class="panel-header">
<h2>Timeline</h2>
</div>
<div id="timelineInspector"></div>
</div>
<div class="panel">
<div class="panel-header">
<h2>Auswahl</h2>
</div>
<div id="selectionInspector"></div>
</div>
</aside>
</div>
<script src="./app.js"></script>
</body>
</html>
src/styles.css
+482
View File
@@ -0,0 +1,482 @@
:root {
color-scheme: dark;
--bg: #0b0e14;
--bg-elevated: #141a24;
--bg-soft: #1b2331;
--panel: rgba(20, 26, 36, 0.86);
--panel-border: rgba(255, 255, 255, 0.08);
--text: #ecf2ff;
--muted: #a4b2cc;
--accent: #6ef2c6;
--accent-strong: #17c98d;
--danger: #ff7e87;
--grid: rgba(255, 255, 255, 0.08);
--midi: #61c8ff;
--artnet: #ffb35c;
--shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
min-height: 100%;
background:
radial-gradient(circle at top left, rgba(110, 242, 198, 0.14), transparent 32%),
radial-gradient(circle at top right, rgba(97, 200, 255, 0.14), transparent 28%),
linear-gradient(180deg, #0a0d13 0%, #111722 100%);
color: var(--text);
font-family: "Trebuchet MS", "Segoe UI Variable Text", "Aptos", sans-serif;
}
body {
min-height: 100vh;
}
button,
input,
select {
font: inherit;
}
button {
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 12px;
background: linear-gradient(180deg, rgba(110, 242, 198, 0.2), rgba(23, 201, 141, 0.15));
color: var(--text);
padding: 0.65rem 0.95rem;
cursor: pointer;
transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
}
button:hover {
transform: translateY(-1px);
border-color: rgba(110, 242, 198, 0.45);
}
button.ghost {
background: rgba(255, 255, 255, 0.04);
}
input,
select {
width: 100%;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 12px;
padding: 0.7rem 0.8rem;
background: rgba(0, 0, 0, 0.22);
color: var(--text);
}
.app-shell {
display: grid;
grid-template-columns: 332px minmax(0, 1fr) 292px;
gap: 18px;
min-height: 100vh;
padding: 18px;
}
.app-shell.inspector-collapsed {
grid-template-columns: 332px minmax(0, 1fr) 54px;
}
.sidebar,
.workspace,
.inspector {
display: flex;
flex-direction: column;
gap: 18px;
}
.panel {
background: var(--panel);
border: 1px solid var(--panel-border);
border-radius: 24px;
box-shadow: var(--shadow);
backdrop-filter: blur(18px);
padding: 18px;
}
.inspector {
position: relative;
gap: 12px;
min-width: 0;
overflow-y: auto;
padding-right: 2px;
}
.inspector .panel {
padding: 12px;
border-radius: 20px;
}
.inspector-toggle {
align-self: flex-end;
width: 40px;
height: 40px;
padding: 0;
border-radius: 12px;
}
.app-shell.inspector-collapsed .inspector .panel {
display: none;
}
.app-shell.inspector-collapsed .inspector {
align-items: center;
}
.brand-panel {
overflow: hidden;
position: relative;
}
.brand-lockup {
display: flex;
align-items: center;
gap: 14px;
}
.logo-mark {
width: 64px;
height: 64px;
border-radius: 18px;
position: relative;
background:
linear-gradient(160deg, rgba(110, 242, 198, 0.3), rgba(97, 200, 255, 0.18)),
rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.12);
}
.logo-mark::before,
.logo-mark::after,
.logo-mark span {
content: "";
position: absolute;
bottom: 12px;
width: 10px;
border-radius: 999px;
background: linear-gradient(180deg, #6ef2c6, #61c8ff);
}
.logo-mark::before {
left: 16px;
height: 22px;
}
.logo-mark span {
left: 28px;
height: 34px;
}
.logo-mark::after {
left: 40px;
height: 46px;
}
.brand-panel::after {
content: "";
position: absolute;
inset: auto -80px -100px auto;
width: 220px;
height: 220px;
background: radial-gradient(circle, rgba(110, 242, 198, 0.24), transparent 68%);
pointer-events: none;
}
.eyebrow {
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 0.72rem;
color: var(--accent);
}
h1,
h2 {
margin: 0;
}
h1 {
font-size: 1.6rem;
line-height: 1.15;
}
.brand-credit {
margin-top: 0.35rem;
color: var(--muted);
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
h2 {
font-size: 1.02rem;
}
p {
color: var(--muted);
line-height: 1.5;
}
.panel-header,
.transport-main,
.editor-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.panel-actions,
.transport-controls,
.editor-hints {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.editor-hints span,
.meta-row span,
.transport-label {
font-size: 0.78rem;
color: var(--muted);
}
.field,
.field-grid {
display: grid;
gap: 0.45rem;
}
.field {
margin-top: 12px;
}
.checkbox-row {
grid-template-columns: 1fr auto;
align-items: center;
}
.checkbox-row input {
width: 20px;
height: 20px;
}
.field span {
font-size: 0.82rem;
color: var(--muted);
}
.field-grid {
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.checkbox {
align-content: end;
}
.checkbox input {
width: 20px;
height: 20px;
}
.meta-row {
margin-top: 12px;
display: grid;
gap: 0.3rem;
}
.path-label {
display: block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.timeline-list,
.track-list,
#timelineInspector,
#selectionInspector {
display: grid;
gap: 10px;
margin-top: 12px;
}
.timeline-card,
.track-card,
.info-card {
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 18px;
padding: 12px 14px;
background: rgba(255, 255, 255, 0.03);
}
.selectable-card {
cursor: pointer;
}
.timeline-card.active,
.track-card.active {
border-color: rgba(110, 242, 198, 0.52);
background: rgba(110, 242, 198, 0.09);
}
.track-pill {
display: inline-flex;
align-items: center;
border-radius: 999px;
padding: 0.2rem 0.55rem;
font-size: 0.72rem;
font-weight: 700;
color: #081118;
}
.track-pill.midi {
background: var(--midi);
}
.track-pill.artnet {
background: var(--artnet);
}
.track-pill.midicc {
background: #8fd86f;
}
.track-pill.osc {
background: #ff8fd1;
}
.track-pill.sacn {
background: #9ca8ff;
}
.track-pill.serial {
background: #ff9e6b;
}
.track-pill.modbus {
background: #63e0d3;
}
.track-pill.knx {
background: #f26f7d;
}
.track-pill.mqtt {
background: #f7df68;
}
.track-card-top {
display: flex;
gap: 10px;
align-items: flex-start;
}
.track-card-body {
flex: 1;
}
.track-card-actions {
display: flex;
gap: 6px;
}
.track-action {
min-width: 34px;
height: 34px;
padding: 0;
border-radius: 10px;
}
.workspace {
min-width: 0;
}
.transport-bar {
padding: 16px 18px;
}
.transport-main {
align-items: end;
}
.transport-block {
display: grid;
gap: 4px;
}
#timecodeLabel {
font-size: 1.55rem;
letter-spacing: 0.08em;
}
.editor {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
.canvas-frame {
margin-top: 14px;
flex: 1;
min-height: 0;
border-radius: 20px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent),
rgba(5, 8, 12, 0.62);
overflow: auto;
border: 1px solid rgba(255, 255, 255, 0.08);
}
#timelineCanvas {
display: block;
width: 100%;
height: 100%;
}
.empty-state {
color: var(--muted);
font-size: 0.92rem;
line-height: 1.5;
}
.inspector-grid {
display: grid;
gap: 10px;
}
.section-label {
color: var(--muted);
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.14em;
}
@media (max-width: 1320px) {
.app-shell {
grid-template-columns: 320px minmax(0, 1fr);
}
.inspector {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 980px) {
.app-shell {
grid-template-columns: 1fr;
}
.inspector {
grid-template-columns: 1fr;
}
}
start-time4midi.cmd
+16
View File
@@ -0,0 +1,16 @@
@echo off
setlocal
cd /d "%~dp0"
if not exist node_modules (
echo Installing dependencies...
call npm install
if errorlevel 1 (
echo.
echo npm install failed.
pause
exit /b 1
)
)
call npm start