Initial commit
This commit is contained in:
jhartworks
@@ -0,0 +1,3 @@
|
||||
node_modules/
|
||||
dist/
|
||||
.env
|
||||
@@ -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
|
||||
+119
@@ -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
|
||||
}
|
||||
}
|
||||
@@ -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();
|
||||
}
|
||||
});
|
||||
Generated
+4855
File diff suppressed because it is too large
Load Diff
@@ -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"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
+941
@@ -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)
|
||||
}
|
||||
});
|
||||
+2376
File diff suppressed because it is too large
Load Diff
+333
@@ -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>
|
||||
+482
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
Reference in New Issue
Block a user