4CM split routing: stereo pipeline + breakpoint + Web UI

Pipeline:
- process() dispatches to _process_mono() or _process_4cm() based on routing_mode
- _process_4cm() splits chain at routing_breakpoint: pre blocks on ch0, post on ch1
- _process_single_block() extracted for reuse in both mono and 4cm paths
- routing_mode/routing_breakpoint load from preset via load_preset()
- set_routing() for runtime configuration
- Properties: routing_mode (mono|4cm), routing_breakpoint with validation

Web server:
- GET /api/routing — current routing mode and breakpoint
- POST /api/routing — set routing mode/breakpoint, persist to current preset, WS broadcast
- _gather_state() includes routing_mode and routing_breakpoint

Web UI:
- Settings page: 4CM toggle + breakpoint slider with routing description
- Dashboard: routing badge (4CM/Mono) with breakpoint info
- app.js: WebSocket handler, updateRoutingUI(), toggle4cm(), set4cmBreakpoint()
- style.css: .badge, .badge-4cm, .badge-mono, .routing-status, .routing-desc

Tests: mock pipeline fixture updated with routing_mode/routing_breakpoint
This commit is contained in:
2026-06-08 10:57:47 -04:00
parent c2071a9724
commit 8ff584cea9
7 changed files with 382 additions and 47 deletions
+25
View File
@@ -85,5 +85,30 @@
</div>
</div>
</div>
<!-- 4CM Routing Status -->
<div class="card">
<div class="card-header">
<h2>Routing</h2>
</div>
<div class="card-body">
<div class="routing-status">
<span class="routing-indicator" id="routing-mode-indicator" data-mode="{{ routing_mode }}">
{% if routing_mode == '4cm' %}
<span class="badge badge-4cm">4CM</span>
{% else %}
<span class="badge badge-mono">Mono</span>
{% endif %}
</span>
<span class="routing-info" id="routing-info">
{% if routing_mode == '4cm' %}
Breakpoint: {{ routing_breakpoint }}
{% else %}
Full chain
{% endif %}
</span>
</div>
</div>
</div>
</div>
{% endblock %}
+40
View File
@@ -52,6 +52,46 @@
</div>
</div>
<div class="card">
<div class="card-header">
<h2>4-Cable Method (4CM)</h2>
</div>
<div class="card-body">
<div class="setting-row">
<div class="setting-label">4CM Mode</div>
<div class="setting-value">
<button class="btn toggle-btn {% if routing_mode == '4cm' %}active{% endif %}"
id="4cm-toggle-btn" onclick="toggle4cm()">
{% if routing_mode == '4cm' %}ON{% else %}OFF{% endif %}
</button>
</div>
</div>
<div class="setting-row" id="breakpoint-row"
{% if routing_mode != '4cm' %}style="opacity: 0.4; pointer-events: none;"{% endif %}>
<div class="setting-label">Breakpoint</div>
<div class="setting-value">
<input type="range" class="slider" id="4cm-breakpoint"
min="0" max="16" value="{{ routing_breakpoint }}"
oninput="set4cmBreakpoint(this.value)">
<span id="4cm-breakpoint-text">{{ routing_breakpoint }}</span>
</div>
</div>
<div class="setting-row">
<div class="setting-label">Routing</div>
<div class="setting-value">
<span id="4cm-routing-desc" class="routing-desc">
{% if routing_mode == '4cm' %}
Input 1 (Guitar) → Pre blocks [0..{{ routing_breakpoint }}) → Send
&nbsp;|&nbsp; Input 2 (Return) → Post blocks [{{ routing_breakpoint }}..] → Output
{% else %}
Mono: Guitar → Full chain → Output
{% endif %}
</span>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h2>About</h2>