Add color dropdowns for Travel and Print lines

app.py

@@ -339,6 +339,8 @@ def render_toolpath(
     shape1_path: str | None,
     travel_opacity: float = 0.55,
     print_opacity: float = 1.0,
+    travel_color: str = "#969696",
+    print_color: str = "#1f77b4",
 ) -> tuple[Any, str, dict]:
     if source == GCODE_SOURCE_UPLOAD:
         path = uploaded_path
@@ -358,7 +360,7 @@ def render_toolpath(
     if parsed["point_count"] == 0:
         return None, "No G0/G1 movement lines found in the file.", {}
 
-    figure = build_toolpath_figure(parsed, travel_opacity=travel_opacity, print_opacity=print_opacity)
+    figure = build_toolpath_figure(parsed, travel_opacity=travel_opacity, print_opacity=print_opacity, travel_color=travel_color, print_color=print_color)
     (x_min, y_min, z_min), (x_max, y_max, z_max) = parsed["bounds"]
     summary = (
         f"**{parsed['point_count']} moves parsed** — "
@@ -689,6 +691,12 @@ def build_demo() -> gr.Blocks:
                     value=0.55,
                     step=0.05,
                 )
+                travel_color_picker = gr.Dropdown(
+                    label="Travel (G0) color",
+                    choices=[("Grey", "#969696"), ("Orange", "#ff7f0e"), ("Green", "#2ca02c"), ("Red", "#d62728"), ("Purple", "#9467bd"), ("Pink", "#e377c2"), ("Black", "#000000"), ("White", "#ffffff")],
+                    value="#969696",
+                    allow_custom_value=False,
+                )
                 print_opacity_slider = gr.Slider(
                     label="Print (G1) opacity",
                     minimum=0.0,
@@ -696,6 +704,12 @@ def build_demo() -> gr.Blocks:
                     value=1.0,
                     step=0.05,
                 )
+                print_color_picker = gr.Dropdown(
+                    label="Print (G1) color",
+                    choices=[("Blue", "#1f77b4"), ("Orange", "#ff7f0e"), ("Green", "#2ca02c"), ("Red", "#d62728"), ("Purple", "#9467bd"), ("Pink", "#e377c2"), ("Black", "#000000"), ("White", "#ffffff")],
+                    value="#1f77b4",
+                    allow_custom_value=False,
+                )
             toolpath_plot = gr.Plot(label="Tool Path", elem_id="toolpath_plot")
             toolpath_status = gr.Markdown("")
             parsed_state = gr.State({})
@@ -708,7 +722,7 @@ def build_demo() -> gr.Blocks:
             )
             render_button.click(
                 fn=render_toolpath,
-                inputs=[gcode_source, gcode_upload, gcode_file_1, travel_opacity_slider, print_opacity_slider],
+                inputs=[gcode_source, gcode_upload, gcode_file_1, travel_opacity_slider, print_opacity_slider, travel_color_picker, print_color_picker],
                 outputs=[toolpath_plot, toolpath_status, parsed_state],
             )
             travel_opacity_slider.release(
@@ -743,6 +757,38 @@ def build_demo() -> gr.Blocks:
                     return [];
                 }"""
             )
+            travel_color_picker.change(
+                fn=None,
+                inputs=[travel_color_picker],
+                outputs=[],
+                js="""(color) => {
+                    const container = document.getElementById("toolpath_plot");
+                    if (!container) return [];
+                    const plotDiv = container.querySelector(".js-plotly-plot");
+                    if (!plotDiv || !plotDiv.data) return [];
+                    const indices = plotDiv.data
+                        .map((t, i) => t.name === "Travel (G0)" ? i : -1)
+                        .filter(i => i >= 0);
+                    if (indices.length > 0) Plotly.restyle(plotDiv, {"line.color": color}, indices);
+                    return [];
+                }"""
+            )
+            print_color_picker.change(
+                fn=None,
+                inputs=[print_color_picker],
+                outputs=[],
+                js="""(color) => {
+                    const container = document.getElementById("toolpath_plot");
+                    if (!container) return [];
+                    const plotDiv = container.querySelector(".js-plotly-plot");
+                    if (!plotDiv || !plotDiv.data) return [];
+                    const indices = plotDiv.data
+                        .map((t, i) => t.name === "Print (G1)" ? i : -1)
+                        .filter(i => i >= 0);
+                    if (indices.length > 0) Plotly.restyle(plotDiv, {"line.color": color}, indices);
+                    return [];
+                }"""
+            )
 
     return demo
 

gcode_viewer.py

@@ -121,6 +121,8 @@ def build_toolpath_figure(
     parsed: dict,
     travel_opacity: float = 0.55,
     print_opacity: float = 1.0,
+    travel_color: str = "#969696",
+    print_color: str = "#1f77b4",
 ) -> go.Figure:
     print_xs, print_ys, print_zs = _segments_to_xyz(parsed["print_segments"])
     travel_xs, travel_ys, travel_zs = _segments_to_xyz(parsed["travel_segments"])
@@ -136,7 +138,7 @@ def build_toolpath_figure(
                 mode="lines",
                 name="Travel (G0)",
                 opacity=travel_opacity,
-                line=dict(color="rgb(150,150,150)", width=2, dash="dot"),
+                line=dict(color=travel_color, width=2, dash="dot"),
                 hoverinfo="skip",
             )
         )
@@ -150,7 +152,7 @@ def build_toolpath_figure(
                 mode="lines",
                 name="Print (G1)",
                 opacity=print_opacity,
-                line=dict(color="#1f77b4", width=4),
+                line=dict(color=print_color, width=4),
                 hovertemplate="X=%{x:.2f}<br>Y=%{y:.2f}<br>Z=%{z:.2f}<extra></extra>",
             )
         )