Add Parallel Printing Visualization tab

New fourth tab plots all three shapes simultaneously as filament tubes,
offset along X so they do not overlap, and animates them printing in
parallel on a shared cumulative-path-length time axis (shorter parts
finish first). Features:
- per-part color dropdowns (live recolor)
- travel tubes per part with an opacity slider (0 = hidden)
- filament/travel width and gap-between-parts sliders
- full animation control bar (play/pause, speed, scrub, frame step),
driven by a dedicated multi-part engine independent of the single-plot
tab so that tab is unaffected

Adds build_parallel_figure() in gcode_viewer.py.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

app.py

@@ -21,7 +21,7 @@ import numpy as np
 from PIL import Image, ImageDraw, ImageFont
 import trimesh
 
-from gcode_viewer import build_toolpath_figure, parse_gcode_path
+from gcode_viewer import build_parallel_figure, build_toolpath_figure, parse_gcode_path
 from stl_slicer import SliceStack, load_mesh, slice_stl_to_tiffs
 from tiff_to_gcode import generate_snake_path_gcode
 
@@ -168,6 +168,43 @@ APP_CSS = """
 #gcode-upload-col {
     display: none;
 }
+
+/* Parallel-printing animation controls share the look of the single-plot bar. */
+#parallel-anim-controls {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+    flex-wrap: wrap;
+    padding: 0.4rem 0.2rem;
+}
+
+#parallel-anim-controls button,
+#parallel-anim-controls select {
+    background: var(--button-secondary-background-fill);
+    color: var(--button-secondary-text-color);
+    border: 1px solid var(--border-color-primary);
+    border-radius: 0.4rem;
+    padding: 0.25rem 0.7rem;
+    font-size: 0.85rem;
+    cursor: pointer;
+}
+
+#parallel-anim-controls button:hover,
+#parallel-anim-controls select:hover {
+    border-color: #f97316;
+}
+
+#pp-scrub {
+    flex: 1 1 140px;
+    min-width: 120px;
+    accent-color: #f97316;
+}
+
+#pp-readout {
+    font-size: 0.85rem;
+    color: var(--body-text-color-subdued);
+    flex-basis: 100%;
+}
 """
 
 # Gradio 6.10's gr.Model3D leaves the Undo (reset view) button permanently
@@ -462,6 +499,173 @@ TOOLPATH_CONTROLS_HTML = """
 """
 
 
+# Parallel-printing animation engine: drives multiple parts in one plot off a
+# shared cumulative-length time axis. Independent of the single-plot engine so
+# the G-Code Visualization tab is unaffected. Targets #parallel_plot / #pp-*.
+PARALLEL_ANIM_HEAD = """
+<script>
+(function () {
+    var anim = { gd:null, meta:null, cache:null, playing:false, scrubbing:false,
+                 cutoff:0, speed:1, lastTick:null, lastDraw:0, raf:null };
+
+    function findPlot() {
+        var c = document.getElementById('parallel_plot');
+        return c ? c.querySelector('.js-plotly-plot') : null;
+    }
+
+    function ensureInit() {
+        var gd = findPlot();
+        if (!gd || !gd.data || !gd.layout || !gd.layout.meta || !gd.layout.meta.animation) return false;
+        var meta = gd.layout.meta.animation;
+        if (gd === anim.gd && meta === anim.meta && anim.cache) return true;
+
+        var nameToIdx = {};
+        for (var i = 0; i < gd.data.length; i++) nameToIdx[gd.data[i].name] = i;
+        function snapMesh(idx, t) {
+            if (idx == null || idx < 0 || !t || !t.length) return null;
+            var tr = gd.data[idx];
+            return { i: Array.from(tr.i), j: Array.from(tr.j), k: Array.from(tr.k), t: t };
+        }
+        var parts = meta.parts.map(function (p) {
+            var printIdx = nameToIdx[p.printName]; if (printIdx == null) printIdx = -1;
+            var travelIdx = nameToIdx[p.travelName]; if (travelIdx == null) travelIdx = -1;
+            var nozzleIdx = nameToIdx[p.nozzleName]; if (nozzleIdx == null) nozzleIdx = -1;
+            return {
+                printIdx: printIdx, travelIdx: travelIdx, nozzleIdx: nozzleIdx,
+                printMesh: snapMesh(printIdx, p.print_face_t),
+                travelMesh: snapMesh(travelIdx, p.travel_face_t),
+                path: (p.path_t && p.path_t.length) ? {x:p.path_x, y:p.path_y, z:p.path_z, t:p.path_t} : null
+            };
+        });
+        var times = [];
+        meta.parts.forEach(function (p) { if (p.path_t) for (var j=0;j<p.path_t.length;j++) times.push(p.path_t[j]); });
+        times.sort(function (a, b) { return a - b; });
+        anim.cache = { parts: parts, times: times.filter(function (v, j) { return j === 0 || v !== times[j-1]; }) };
+        anim.gd = gd; anim.meta = meta; anim.cutoff = meta.total_length; anim.playing = false;
+        return true;
+    }
+
+    function upperBound(arr, v) {
+        var lo = 0, hi = arr.length;
+        while (lo < hi) { var m = (lo + hi) >> 1; if (arr[m] <= v) lo = m + 1; else hi = m; }
+        return lo;
+    }
+    function nozzlePos(path, cutoff) {
+        var n = upperBound(path.t, cutoff);
+        if (n <= 0) return [path.x[0], path.y[0], path.z[0]];
+        if (n >= path.t.length) { var m = path.t.length - 1; return [path.x[m], path.y[m], path.z[m]]; }
+        var t0 = path.t[n-1], t1 = path.t[n], f = t1 > t0 ? (cutoff - t0) / (t1 - t0) : 1;
+        return [path.x[n-1]+(path.x[n]-path.x[n-1])*f, path.y[n-1]+(path.y[n]-path.y[n-1])*f, path.z[n-1]+(path.z[n]-path.z[n-1])*f];
+    }
+
+    function applyCutoff() {
+        if (!ensureInit()) return;
+        var cutoff = anim.cutoff;
+        var meshIdxs=[], fis=[], fjs=[], fks=[], nozIdxs=[], nx=[], ny=[], nz=[];
+        anim.cache.parts.forEach(function (pt) {
+            [['travelMesh','travelIdx'],['printMesh','printIdx']].forEach(function (pair) {
+                var mesh = pt[pair[0]], idx = pt[pair[1]];
+                if (!mesh || idx < 0) return;
+                var nf = upperBound(mesh.t, cutoff);
+                meshIdxs.push(idx); fis.push(mesh.i.slice(0,nf)); fjs.push(mesh.j.slice(0,nf)); fks.push(mesh.k.slice(0,nf));
+            });
+            if (pt.nozzleIdx >= 0 && pt.path) {
+                var pos = nozzlePos(pt.path, cutoff);
+                nozIdxs.push(pt.nozzleIdx); nx.push([pos[0]]); ny.push([pos[1]]); nz.push([pos[2]]);
+            }
+        });
+        if (nozIdxs.length) Plotly.restyle(anim.gd, { x:nx, y:ny, z:nz }, nozIdxs);
+        if (meshIdxs.length) Plotly.restyle(anim.gd, { i:fis, j:fjs, k:fks }, meshIdxs);
+        syncUI();
+    }
+
+    function syncUI() {
+        if (!anim.meta) return;
+        var total = anim.meta.total_length || 1;
+        var frac = Math.max(0, Math.min(1, anim.cutoff / total));
+        var scrub = document.getElementById('pp-scrub');
+        if (scrub && !anim.scrubbing) scrub.value = String(Math.round(frac * 1000));
+        var readout = document.getElementById('pp-readout');
+        if (readout) readout.textContent = Math.round(frac * 100) + '% of build';
+    }
+
+    function setPlaying(on) {
+        anim.playing = on;
+        var btn = document.getElementById('pp-play');
+        if (btn) btn.innerHTML = on ? '&#9208; Pause' : '&#9654; Play';
+        if (on) { anim.lastTick = null; anim.raf = requestAnimationFrame(tick); }
+        else if (anim.raf) { cancelAnimationFrame(anim.raf); anim.raf = null; }
+    }
+
+    function tick(ts) {
+        if (!anim.playing) return;
+        if (!ensureInit()) { setPlaying(false); return; }
+        if (anim.lastTick == null) anim.lastTick = ts;
+        var dt = (ts - anim.lastTick) / 1000; anim.lastTick = ts;
+        var rate = (anim.meta.total_length / 60) * anim.speed;
+        anim.cutoff = Math.min(anim.meta.total_length, anim.cutoff + dt * rate);
+        if (anim.cutoff >= anim.meta.total_length) { applyCutoff(); setPlaying(false); return; }
+        if (ts - anim.lastDraw >= 33) { anim.lastDraw = ts; applyCutoff(); }
+        anim.raf = requestAnimationFrame(tick);
+    }
+
+    document.addEventListener('click', function (e) {
+        var target = e.target.closest ? e.target.closest('#pp-play, #pp-restart, #pp-step-back, #pp-step-fwd') : null;
+        if (!target) return;
+        if (!ensureInit()) return;
+        var times = anim.cache.times || [];
+        if (target.id === 'pp-play') {
+            if (!anim.playing && anim.cutoff >= anim.meta.total_length) anim.cutoff = 0;
+            setPlaying(!anim.playing);
+        } else if (target.id === 'pp-step-fwd') {
+            setPlaying(false);
+            var i = upperBound(times, anim.cutoff);
+            if (i < times.length) { anim.cutoff = times[i]; applyCutoff(); }
+        } else if (target.id === 'pp-step-back') {
+            setPlaying(false);
+            var lo = 0, hi = times.length;
+            while (lo < hi) { var mid = (lo + hi) >> 1; if (times[mid] < anim.cutoff) lo = mid + 1; else hi = mid; }
+            anim.cutoff = lo > 0 ? times[lo - 1] : 0;
+            applyCutoff();
+        } else {
+            setPlaying(false); anim.cutoff = 0; applyCutoff();
+        }
+    });
+    document.addEventListener('input', function (e) {
+        if (e.target && e.target.id === 'pp-scrub') {
+            if (!ensureInit()) return;
+            setPlaying(false); anim.scrubbing = true;
+            anim.cutoff = (parseFloat(e.target.value) / 1000) * anim.meta.total_length;
+            applyCutoff(); anim.scrubbing = false;
+        }
+    });
+    document.addEventListener('change', function (e) {
+        if (e.target && e.target.id === 'pp-speed') anim.speed = parseFloat(e.target.value) || 1;
+    });
+})();
+</script>
+"""
+
+PARALLEL_CONTROLS_HTML = """
+<div id="parallel-anim-controls">
+    <button id="pp-restart" type="button" title="Back to start">&#9198;</button>
+    <button id="pp-step-back" type="button" title="Step back one move">&#9204;</button>
+    <button id="pp-play" type="button">&#9654; Play</button>
+    <button id="pp-step-fwd" type="button" title="Step forward one move">&#9205;</button>
+    <select id="pp-speed" title="Playback speed">
+        <option value="0.25">0.25&times;</option>
+        <option value="0.5">0.5&times;</option>
+        <option value="1" selected>1&times;</option>
+        <option value="2">2&times;</option>
+        <option value="5">5&times;</option>
+        <option value="10">10&times;</option>
+    </select>
+    <input id="pp-scrub" type="range" min="0" max="1000" value="1000" step="1" title="Build progress">
+    <span id="pp-readout">Render the parallel print, then press Play.</span>
+</div>
+"""
+
+
 def _read_slice_preview(path: str) -> Image.Image:
     with Image.open(path) as image:
         preview = image.copy()
@@ -1177,6 +1381,61 @@ def rerender_toolpath_current_mode(
     )
 
 
+PARALLEL_COLOR_CHOICES = [
+    ("Orange", "#ff7f0e"), ("Blue", "#1f77b4"), ("Green", "#2ca02c"),
+    ("Red", "#d62728"), ("Purple", "#9467bd"), ("Pink", "#e377c2"),
+    ("Teal", "#17becf"), ("Black", "#000000"),
+]
+
+
+def render_parallel(
+    path1: str | None,
+    path2: str | None,
+    path3: str | None,
+    color1: str,
+    color2: str,
+    color3: str,
+    travel_opacity: float,
+    filament_width: float,
+    travel_width: float,
+    gap: float,
+) -> tuple[Any, str, dict[str, Any]]:
+    specs = [(1, path1, color1), (2, path2, color2), (3, path3, color3)]
+    parts: list[dict] = []
+    messages: list[str] = []
+
+    for idx, path, color in specs:
+        if not path:
+            messages.append(f"Shape {idx}: no G-code (generate it on the TIFF Slices to GCode tab).")
+            continue
+        try:
+            parsed = parse_gcode_path(Path(path).read_text())
+        except OSError as exc:
+            messages.append(f"Shape {idx}: failed to read ({exc}).")
+            continue
+        if not parsed.get("point_count"):
+            messages.append(f"Shape {idx}: no G0/G1 moves found.")
+            continue
+        parts.append({"idx": idx, "color": color, "parsed": parsed})
+        messages.append(f"Shape {idx}: {parsed['point_count']} moves, {parsed.get('layer_count', 0)} layer(s).")
+
+    if not parts:
+        return (
+            None,
+            "No shape G-code available. Generate G-code on the TIFF Slices to GCode tab first.",
+            gr.update(visible=False),
+        )
+
+    figure = build_parallel_figure(
+        parts,
+        gap=float(gap),
+        filament_width=float(filament_width),
+        travel_width=float(travel_width),
+        travel_opacity=float(travel_opacity),
+    )
+    return figure, "  \n".join(messages), gr.update(visible=True)
+
+
 def update_toolpath_opacity(
     parsed: dict,
     travel_opacity: float,
@@ -1313,7 +1572,7 @@ def generate_reference_stack(
     return ref_state, slider, label, preview
 
 def build_demo() -> gr.Blocks:
-    with gr.Blocks(title="STL TIFF Slicer", css=APP_CSS, head=APP_HEAD + TOOLPATH_ANIM_HEAD) as demo:
+    with gr.Blocks(title="STL TIFF Slicer", css=APP_CSS, head=APP_HEAD + TOOLPATH_ANIM_HEAD + PARALLEL_ANIM_HEAD) as demo:
         with gr.Tab("STL to TIFF Slicer"):
             gr.Markdown(
                 """
@@ -1959,6 +2218,115 @@ def build_demo() -> gr.Blocks:
                 }"""
             )
 
+        with gr.Tab("Parallel Printing Visualization"):
+            gr.Markdown(
+                "### Parallel Printing Visualization\n"
+                "Plots all three shapes side by side (offset in X) and animates "
+                "them printing in parallel. Uses the G-code generated on the "
+                "**TIFF Slices to GCode** tab."
+            )
+            with gr.Row():
+                # --- Left column: controls ---
+                with gr.Column(scale=1, min_width=340):
+                    parallel_render_button = gr.Button(
+                        "Render Parallel Print", variant="primary"
+                    )
+                    gr.Markdown(
+                        "&#9888;&#65039; Building three tube plots can take a while "
+                        "for high-resolution models.",
+                        elem_id="parallel-render-warning",
+                    )
+                    parallel_anim_controls = gr.HTML(PARALLEL_CONTROLS_HTML, visible=False)
+                    with gr.Row():
+                        pp_color_1 = gr.Dropdown(
+                            label="Shape 1 color", choices=PARALLEL_COLOR_CHOICES,
+                            value="#ff7f0e", allow_custom_value=False, min_width=120,
+                        )
+                        pp_color_2 = gr.Dropdown(
+                            label="Shape 2 color", choices=PARALLEL_COLOR_CHOICES,
+                            value="#1f77b4", allow_custom_value=False, min_width=120,
+                        )
+                        pp_color_3 = gr.Dropdown(
+                            label="Shape 3 color", choices=PARALLEL_COLOR_CHOICES,
+                            value="#2ca02c", allow_custom_value=False, min_width=120,
+                        )
+                    pp_travel_opacity = gr.Slider(
+                        label="Travel opacity (0 = hidden)",
+                        minimum=0.0, maximum=1.0, value=0.2, step=0.05,
+                    )
+                    with gr.Row():
+                        pp_filament_width = gr.Slider(
+                            label="Filament width (mm)", minimum=0.1, maximum=3.0,
+                            value=0.8, step=0.05, min_width=150,
+                        )
+                        pp_travel_width = gr.Slider(
+                            label="Travel width (mm)", minimum=0.05, maximum=3.0,
+                            value=0.2, step=0.05, min_width=150,
+                        )
+                    pp_gap = gr.Slider(
+                        label="Gap between parts (mm)",
+                        minimum=0.0, maximum=50.0, value=5.0, step=0.5,
+                    )
+                    parallel_status = gr.Markdown("")
+                # --- Right column: the plot ---
+                with gr.Column(scale=3, min_width=500):
+                    parallel_plot = gr.Plot(label="Parallel Tool Paths", elem_id="parallel_plot")
+
+            parallel_render_inputs = [
+                gcode_file_1, gcode_file_2, gcode_file_3,
+                pp_color_1, pp_color_2, pp_color_3,
+                pp_travel_opacity, pp_filament_width, pp_travel_width, pp_gap,
+            ]
+            parallel_render_button.click(
+                fn=render_parallel,
+                inputs=parallel_render_inputs,
+                outputs=[parallel_plot, parallel_status, parallel_anim_controls],
+            )
+            # Width and gap changes rebuild the tubes server-side.
+            for _slider in (pp_filament_width, pp_travel_width, pp_gap):
+                _slider.release(
+                    fn=render_parallel,
+                    inputs=parallel_render_inputs,
+                    outputs=[parallel_plot, parallel_status, parallel_anim_controls],
+                )
+            # Color changes recolor a part's print/travel/nozzle traces client-side.
+            for _picker, _idx in ((pp_color_1, 1), (pp_color_2, 2), (pp_color_3, 3)):
+                _picker.change(
+                    fn=None,
+                    inputs=[_picker],
+                    outputs=[],
+                    js="""(color) => {
+                        const c = document.getElementById("parallel_plot");
+                        if (!c) return [];
+                        const pd = c.querySelector(".js-plotly-plot");
+                        if (!pd || !pd.data) return [];
+                        pd.data.forEach((t, i) => {
+                            if (t.name === "Shape %d" || t.name === "Travel %d") {
+                                Plotly.restyle(pd, {"color": color}, [i]);
+                            } else if (t.name === "Nozzle %d") {
+                                Plotly.restyle(pd, {"marker.color": color}, [i]);
+                            }
+                        });
+                        return [];
+                    }""" % (_idx, _idx, _idx),
+                )
+            # Travel opacity changes apply to all travel meshes client-side.
+            pp_travel_opacity.release(
+                fn=None,
+                inputs=[pp_travel_opacity],
+                outputs=[],
+                js="""(op) => {
+                    const c = document.getElementById("parallel_plot");
+                    if (!c) return [];
+                    const pd = c.querySelector(".js-plotly-plot");
+                    if (!pd || !pd.data) return [];
+                    pd.data.forEach((t, i) => {
+                        if (/^Travel \\d+$/.test(t.name)) Plotly.restyle(pd, {"opacity": op}, [i]);
+                    });
+                    return [];
+                }""",
+            )
+
     return demo
 
 

gcode_viewer.py

@@ -512,6 +512,115 @@ def build_toolpath_figure(
     return fig
 
 
+def build_parallel_figure(
+    parts: list[dict],
+    gap: float = 5.0,
+    filament_width: float = 0.8,
+    travel_width: float = 0.2,
+    travel_opacity: float = 0.2,
+    print_opacity: float = 1.0,
+) -> go.Figure:
+    """Render several parsed shapes side by side as tubes, offset along X so they
+    don't overlap, with a shared-time animation timeline (cumulative path length).
+
+    `parts` is a list of {"idx": int, "color": str, "parsed": dict}. Each part's
+    print and travel tubes and nozzle marker are added as separate traces named
+    by idx so the client-side animation/recolor can address them.
+    """
+    fig = go.Figure()
+    anim_parts: list[dict] = []
+    total_length = 0.0
+    bx0 = by0 = bz0 = float("inf")
+    bx1 = by1 = bz1 = float("-inf")
+
+    running_x = 0.0
+    for part in parts:
+        idx = part["idx"]
+        color = part["color"]
+        parsed = part["parsed"]
+        moves = parsed.get("moves") or []
+        if not moves:
+            continue
+
+        (pxmin, pymin, pzmin), (pxmax, pymax, pzmax) = parsed["bounds"]
+        width = pxmax - pxmin
+        x_off = running_x - pxmin
+        running_x += width + gap
+
+        print_tube = _build_path_tube(moves, radius=max(filament_width, 0.05) / 2.0, kind="print")
+        travel_tube = _build_path_tube(moves, radius=max(travel_width, 0.05) / 2.0, kind="travel")
+        path = _path_arrays(moves)
+
+        px = [v + x_off for v in print_tube["x"]]
+        tx = [v + x_off for v in travel_tube["x"]]
+        path_x = [v + x_off for v in path["x"]]
+
+        if travel_tube["i"]:
+            fig.add_trace(
+                go.Mesh3d(
+                    x=tx, y=travel_tube["y"], z=travel_tube["z"],
+                    i=travel_tube["i"], j=travel_tube["j"], k=travel_tube["k"],
+                    color=color, opacity=travel_opacity, name=f"Travel {idx}",
+                    showlegend=False, hoverinfo="skip",
+                    lighting=dict(ambient=0.6, diffuse=0.8, specular=0.1, roughness=0.6),
+                )
+            )
+        if print_tube["i"]:
+            fig.add_trace(
+                go.Mesh3d(
+                    x=px, y=print_tube["y"], z=print_tube["z"],
+                    i=print_tube["i"], j=print_tube["j"], k=print_tube["k"],
+                    color=color, opacity=print_opacity, name=f"Shape {idx}",
+                    showlegend=True, hoverinfo="skip",
+                    lighting=dict(ambient=0.55, diffuse=0.8, specular=0.15, roughness=0.6),
+                )
+            )
+        fig.add_trace(
+            go.Scatter3d(
+                x=[path_x[-1]], y=[path["y"][-1]], z=[path["z"][-1]],
+                mode="markers", name=f"Nozzle {idx}",
+                marker=dict(size=4, color=color), showlegend=False, hoverinfo="skip",
+            )
+        )
+
+        part_total = path["t"][-1] if path["t"] else 0.0
+        total_length = max(total_length, part_total)
+        anim_parts.append({
+            "printName": f"Shape {idx}",
+            "travelName": f"Travel {idx}",
+            "nozzleName": f"Nozzle {idx}",
+            "print_face_t": print_tube["face_t"],
+            "travel_face_t": travel_tube["face_t"],
+            "path_x": path_x, "path_y": path["y"], "path_z": path["z"], "path_t": path["t"],
+        })
+
+        bx0 = min(bx0, pxmin + x_off); bx1 = max(bx1, pxmax + x_off)
+        by0 = min(by0, pymin); by1 = max(by1, pymax)
+        bz0 = min(bz0, pzmin); bz1 = max(bz1, pzmax)
+
+    if not anim_parts:
+        fig.update_layout(height=700)
+        return fig
+
+    pad = max(bx1 - bx0, by1 - by0, bz1 - bz0, 1.0) * 0.05
+    fig.update_layout(
+        meta={"animation": {"total_length": total_length, "parts": anim_parts}},
+        height=700,
+        uirevision="parallel",
+        scene=dict(
+            xaxis_title="X (mm)", yaxis_title="Y (mm)", zaxis_title="Z (mm)",
+            xaxis_range=[bx0 - pad, bx1 + pad],
+            yaxis_range=[by0 - pad, by1 + pad],
+            zaxis_range=[bz0 - pad, bz1 + pad],
+            aspectmode="data",
+        ),
+        margin=dict(l=0, r=0, t=30, b=0),
+        legend=dict(orientation="h", yanchor="bottom", y=1.0, xanchor="left", x=0.0),
+        title=f"Parallel print — {len(anim_parts)} part(s)",
+    )
+    return fig
+
+
 def render_gcode_file(path: str | Path) -> tuple[go.Figure, dict]:
     text = Path(path).read_text()
     parsed = parse_gcode_path(text)