Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <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; } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>DCM Assembly Visualizer</h1> | |
| <p>This visualizer is now intended to be used with a Streamlit frontend for file upload.</p> | |
| <div id="plot"></div> | |
| <script> | |
| let allTraces = []; | |
| let normalTraces = []; | |
| async function drawFromServer() { | |
| const res = await fetch("/parsed_data.json"); | |
| const payload = await res.json(); | |
| allTraces = []; | |
| normalTraces = []; | |
| for (const [color, label, data] of payload.files) { | |
| extractTraces(data, color, label); | |
| } | |
| Plotly.newPlot('plot', [...allTraces, ...normalTraces.filter(t => t.visible)], { | |
| 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; | |
| allTraces.push({ | |
| type: 'scatter3d', | |
| mode: 'markers+text', | |
| x: [x], y: [y], z: [z], | |
| marker: { color: baseColor, size: 5 }, | |
| text: [g.label || tag], | |
| textposition: 'top center' | |
| }); | |
| normalTraces.push({ | |
| type: 'scatter3d', | |
| mode: 'lines', | |
| x: [x, x + nx], | |
| y: [y, y + ny], | |
| z: [z, z + nz], | |
| line: { color: normalColor, width: 2 }, | |
| visible: true | |
| }); | |
| } | |
| for (const c of data.constraints) { | |
| const g1 = data.geometry[c.from]; | |
| const g2 = data.geometry[c.to]; | |
| if (g1 && g2) { | |
| const [x1, y1, z1] = g1.base_point; | |
| const [x2, y2, z2] = g2.base_point; | |
| allTraces.push({ | |
| type: 'scatter3d', | |
| mode: 'lines', | |
| x: [x1, x2], y: [y1, y2], z: [z1, z2], | |
| line: { color: 'green', dash: 'dot', width: 2 } | |
| }); | |
| } | |
| } | |
| } | |
| drawFromServer(); | |
| </script> | |
| </body> | |
| </html> | |