Spaces:

Pushpak21
/

DCM_Viewer

Sleeping

App Files Files Community

Pushpak21 commited on Jun 26, 2025

Commit

569908e

verified ·

1 Parent(s): 354747c

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +78 -52

index.html CHANGED Viewed

@@ -7,78 +7,78 @@
   <title>DCM Assembly Visualizer</title>
   <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
   <style>
-    body { font-family: sans-serif; padding: 20px; background-color: #111; color: white; }
-    #plot { width: 100%; height: 700px; margin-top: 20px; }
-    input, button { margin: 10px 0; padding: 8px; }
   </style>
 </head>
 <body>
   <h1>DCM Assembly Visualizer</h1>
-  <label>Upload File A: <input type="file" id="file1" accept=".txt" /></label><br />
-  <label>Upload File B: <input type="file" id="file2" accept=".txt" /></label><br />
-  <button onclick="uploadFiles()">Visualize</button>
-  <div id="plot"></div>
   <script>
-    async function uploadFiles() {
-      const file1 = document.getElementById("file1").files[0];
-      const file2 = document.getElementById("file2").files[0];
-      const traces = [];
-      if (file1) {
-        const data1 = await sendFile(file1);
-        traces.push(...extractTraces(data1, 'red', 'blue'));
       }
-      if (file2) {
-        const data2 = await sendFile(file2);
-        traces.push(...extractTraces(data2, 'orange', 'purple'));
-      }
-      Plotly.newPlot('plot', traces, {
         margin: { t: 30 },
         scene: { aspectmode: 'data' },
         title: '3D Assembly Viewer'
       });
     }
-    async function sendFile(file) {
-      const formData = new FormData();
-      formData.append("file", file);
-      const res = await fetch("/parse", {
-        method: "POST",
-        body: formData
-      });
-      return await res.json();
-    }
     function extractTraces(data, 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({
-          type: 'scatter3d',
-          mode: 'markers+text',
           x: [x], y: [y], z: [z],
           marker: { color: baseColor, size: 5 },
-          text: [g.label || tag],
-          textposition: 'top center'
-        });
-        traces.push({
-          type: 'scatter3d',
-          mode: 'lines',
-          x: [x, x + nx],
-          y: [y, y + ny],
-          z: [z, z + nz],
-          line: { color: normalColor, width: 2 }
-        });
       }
       for (const c of data.constraints) {
@@ -87,17 +87,43 @@
         if (g1 && g2) {
           const [x1, y1, z1] = g1.base_point;
           const [x2, y2, z2] = g2.base_point;
-          traces.push({
-            type: 'scatter3d',
-            mode: 'lines',
             x: [x1, x2], y: [y1, y2], z: [z1, z2],
-            line: { color: 'green', dash: 'dot', width: 2 }
           });
         }
       }
-      return traces;
     }
   </script>
 </body>
 </html>

   <title>DCM Assembly Visualizer</title>
   <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
   <style>
+    body { font-family: sans-serif; padding: 20px; }
+    #plot { width: 100%; height: 700px; }
+    .controls { width: 200px; margin-right: 20px; }
   </style>
 </head>
 <body>
   <h1>DCM Assembly Visualizer</h1>
+  <div style="display: flex;">
+    <div class="controls">
+      <h3>Controls</h3>
+      <div id="partControls"></div>
+      <label><input type="checkbox" id="toggleConstraints" checked onchange="toggleConstraints()"> Show Constraints</label>
+    </div>
+    <div style="flex: 1;">
+      <div id="plot"></div>
+    </div>
+  </div>
   <script>
+    let allTraces = [];
+    let constraintTraces = [];
+    let partMap = {};  // { part: [traceIndices] }
+    async function drawFromServer() {
+      const res = await fetch("/parsed_data.json");
+      const payload = await res.json();
+      allTraces = [];
+      constraintTraces = [];
+      partMap = {};
+      for (const [color, label, data] of payload.files) {
+        extractTraces(data, color, label);
       }
+      renderPartControls();
+      Plotly.newPlot('plot', [...allTraces, ...constraintTraces], {
         margin: { t: 30 },
         scene: { aspectmode: 'data' },
         title: '3D Assembly Viewer'
       });
     }
     function extractTraces(data, baseColor, normalColor) {
       for (const [tag, g] of Object.entries(data.geometry)) {
         const [x, y, z] = g.base_point;
         const [nx, ny, nz] = g.normal;
+        const label = g.label || tag;
+        const part = label.split('@').pop()?.split('-')[0] || "unknown";
+        const baseTrace = {
+          type: 'scatter3d', mode: 'markers+text',
           x: [x], y: [y], z: [z],
           marker: { color: baseColor, size: 5 },
+          text: [label], textposition: 'top center',
+          name: `Base: ${label}`
+        };
+        const normalTrace = {
+          type: 'scatter3d', mode: 'lines',
+          x: [x, x + nx], y: [y, y + ny], z: [z, z + nz],
+          line: { color: normalColor, width: 2 },
+          name: `Normal: ${label}`
+        };
+        const baseIndex = allTraces.length;
+        allTraces.push(baseTrace);
+        allTraces.push(normalTrace);
+        if (!partMap[part]) partMap[part] = [];
+        partMap[part].push(baseIndex, baseIndex + 1);
       }
       for (const c of data.constraints) {
         if (g1 && g2) {
           const [x1, y1, z1] = g1.base_point;
           const [x2, y2, z2] = g2.base_point;
+          constraintTraces.push({
+            type: 'scatter3d', mode: 'lines',
             x: [x1, x2], y: [y1, y2], z: [z1, z2],
+            line: { color: 'green', dash: 'dot', width: 2 },
+            name: `Constraint: ${c.label || ''}`
           });
         }
       }
+    }
+    function renderPartControls() {
+      const container = document.getElementById("partControls");
+      container.innerHTML = '';
+      for (const part in partMap) {
+        const id = `part_${part}`;
+        container.innerHTML += `<label><input type='checkbox' id='${id}' checked onchange='togglePart("${part}")'> ${part}</label><br>`;
+      }
+    }
+    function togglePart(part) {
+      const indices = partMap[part];
+      const visible = document.getElementById(`part_${part}`).checked;
+      for (const i of indices) {
+        Plotly.restyle('plot', { visible: visible }, [i]);
+      }
     }
+    function toggleConstraints() {
+      const show = document.getElementById("toggleConstraints").checked;
+      const start = allTraces.length;
+      const end = start + constraintTraces.length;
+      for (let i = start; i < end; i++) {
+        Plotly.restyle('plot', { visible: show }, [i]);
+      }
+    }
+    drawFromServer();
   </script>
 </body>
 </html>