Update index.html

index.html

@@ -15,9 +15,13 @@
   <input type="file" id="file1" accept=".txt"> File A<br>
   <input type="file" id="file2" accept=".txt"> File B<br><br>
   <button onclick="uploadFiles()">Visualize</button>
+  <label><input type="checkbox" id="showNormals" onchange="toggleNormals()"> Show Normal Vectors</label>
   <div id="plot"></div>
 
   <script>
+    let allTraces = [];
+    let normalTraces = [];
+
     async function uploadFiles() {
       const file1 = document.getElementById("file1").files[0];
       const file2 = document.getElementById("file2").files[0];
@@ -27,19 +31,20 @@
         return;
       }
 
-      const traces = [];
+      allTraces = [];
+      normalTraces = [];
 
       if (file1) {
         const data1 = await sendFile(file1);
-        traces.push(...extractTraces(data1, 'File A', 'red', 'blue'));
+        extractTraces(data1, 'File A', 'red', 'blue');
       }
 
       if (file2) {
         const data2 = await sendFile(file2);
-        traces.push(...extractTraces(data2, 'File B', 'purple', 'orange'));
+        extractTraces(data2, 'File B', 'purple', 'orange');
       }
 
-      Plotly.newPlot('plot', traces, {
+      Plotly.newPlot('plot', [...allTraces], {
         margin: { t: 30 },
         scene: { aspectmode: 'data' },
         title: '3D Assembly Viewer'
@@ -57,13 +62,11 @@
     }
 
     function extractTraces(data, prefix, baseColor, normalColor) {
-      const traces = [];
-
       for (const [tag, g] of Object.entries(data.geometry)) {
         const [x, y, z] = g.base_point;
         const [nx, ny, nz] = g.normal;
 
-        traces.push({
+        allTraces.push({
           type: 'scatter3d',
           mode: 'markers+text',
           x: [x], y: [y], z: [z],
@@ -72,15 +75,15 @@
           textposition: 'top center'
         });
 
-        // Commented out normal lines (blue/orange) as per request
-        // traces.push({
-        //   type: 'scatter3d',
-        //   mode: 'lines',
-        //   x: [x, x + nx],
-        //   y: [y, y + ny],
-        //   z: [z, z + nz],
-        //   line: { color: normalColor, width: 3 }
-        // });
+        normalTraces.push({
+          type: 'scatter3d',
+          mode: 'lines',
+          x: [x, x + nx],
+          y: [y, y + ny],
+          z: [z, z + nz],
+          line: { color: normalColor, width: 3 },
+          visible: false
+        });
       }
 
       for (const c of data.constraints) {
@@ -89,7 +92,7 @@
         if (g1 && g2) {
           const [x1, y1, z1] = g1.base_point;
           const [x2, y2, z2] = g2.base_point;
-          traces.push({
+          allTraces.push({
             type: 'scatter3d',
             mode: 'lines',
             x: [x1, x2], y: [y1, y2], z: [z1, z2],
@@ -97,9 +100,17 @@
           });
         }
       }
+    }
 
-      return traces;
+    function toggleNormals() {
+      const checked = document.getElementById("showNormals").checked;
+      const update = normalTraces.map(trace => ({ ...trace, visible: checked }));
+      Plotly.react('plot', [...allTraces, ...update], {
+        margin: { t: 30 },
+        scene: { aspectmode: 'data' },
+        title: '3D Assembly Viewer'
+      });
     }
   </script>
 </body>
-</html>
+</html>