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
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;
}
}