From 3fe7d9b90aadcb6114c372e7746ad76e3046016e Mon Sep 17 00:00:00 2001
From: Prabhaav Pillai <prabhaav@msu.edu>
Date: Sat, 8 Aug 2026 18:26:54 -0400
Subject: [PATCH] Update side labels and instructions for clarity in
 PipSideCamera

---
 .../assets/components/tools/pip_sidecam.js       | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/starpilot/system/the_galaxy/assets/components/tools/pip_sidecam.js b/starpilot/system/the_galaxy/assets/components/tools/pip_sidecam.js
index 4be5ee364..983c68204 100644
--- a/starpilot/system/the_galaxy/assets/components/tools/pip_sidecam.js
+++ b/starpilot/system/the_galaxy/assets/components/tools/pip_sidecam.js
@@ -73,8 +73,8 @@ function redraw() {
 
   const half = state.zoom / 2;
   const sides = [
-    { key: "left", center: state.leftCenter, color: "#0d6efd", label: "LEFT WINDOW" },
-    { key: "right", center: state.rightCenter, color: "#fd7e14", label: "RIGHT WINDOW" },
+    { key: "left", center: state.leftCenter, color: "#0d6efd", label: "LEFT OF IMAGE" },
+    { key: "right", center: state.rightCenter, color: "#fd7e14", label: "RIGHT OF IMAGE" },
   ];
 
   for (const side of sides) {
@@ -117,7 +117,7 @@ function redraw() {
     ctx.font = "bold 15px monospace";
     ctx.textAlign = "center";
     ctx.fillText(
-      state.armSide === "left" ? "Click to set LEFT window center" : "Click to set RIGHT window center",
+      state.armSide === "left" ? "Click to set the LEFT side of the photo (as seen)" : "Click to set the RIGHT side of the photo (as seen)",
       canvas.width / 2,
       canvas.height - 18,
     );
@@ -385,8 +385,8 @@ export function PipSideCamera() {
           <div class="v-asm-card v-asm-card-danger">
             <div class="v-asm-card-title">Setup</div>
             <ul class="v-asm-card-list">
-              <li>Click "Set Left Center", then click the driver's side window; repeat for the right window</li>
-              <li>From the driver camera, the car's LEFT window appears on the right side of the image and vice versa</li>
+              <li>Click "Set Left (as seen)" to place a crop on the left half of the photo, and "Set Right (as seen)" for the right half</li>
+              <li>"As seen" means left/right of the photo you see</li>
               <li>The zoom slider applies to BOTH windows so the preview stays consistent</li>
               <li>At least one window center is required to enable the preview</li>
             </ul>
@@ -410,11 +410,11 @@ export function PipSideCamera() {
           <div class="v-asm-btn-group">
             <button class="${state.armSide === "left" ? "v-asm-btn v-asm-btn-left-active" : "v-asm-btn v-asm-btn-outline-left"}"
                     @click="${setArm}" value="left">
-              ${state.leftCenter ? "Move Left Center" : "Set Left Center"}
+              ${state.leftCenter ? "Move Left (as seen)" : "Set Left (as seen)"}
             </button>
             <button class="${state.armSide === "right" ? "v-asm-btn v-asm-btn-right-active" : "v-asm-btn v-asm-btn-outline-right"}"
                     @click="${setArm}" value="right">
-              ${state.rightCenter ? "Move Right Center" : "Set Right Center"}
+              ${state.rightCenter ? "Move Right (as seen)" : "Set Right (as seen)"}
             </button>
 
             <button class="v-asm-btn v-asm-btn-primary" @click="${saveConfig}" .disabled="${state.loading || (!state.leftCenter && !state.rightCenter)}">
@@ -428,7 +428,7 @@ export function PipSideCamera() {
           </div>
         </div>
 
-        ${state.armSide ? html`<div class="v-asm-mode-banner ${state.armSide === "left" ? "v-asm-mode-left" : "v-asm-mode-right"}"><span>${state.armSide === "left" ? "⬅ Placing Left Center" : "➡ Placing Right Center"}</span><span>Click on the window to place its center point</span></div>` : ""}
+        ${state.armSide ? html`<div class="v-asm-mode-banner ${state.armSide === "left" ? "v-asm-mode-left" : "v-asm-mode-right"}"><span>${state.armSide === "left" ? "⬅ Placing Left (as seen)" : "➡ Placing Right (as seen)"}</span><span>Click on the window to place its center point</span></div>` : ""}
 
         <div class="v-asm-canvas-wrapper">
           <canvas id="pip-sidecam-canvas" @click="${canvasClick}"></canvas>