Spaces:
Sleeping
Sleeping
File size: 2,327 Bytes
8161707 6dd991a 8161707 bf9cc73 6dd991a bf9cc73 6b109b6 6dd991a 6b109b6 6dd991a 6b109b6 8161707 6dd991a 6b109b6 8161707 bf9cc73 6b109b6 6dd991a 6b109b6 6dd991a 6b109b6 8161707 6b109b6 bf9cc73 8161707 6b109b6 8161707 bf9cc73 8161707 6dd991a 8161707 6b173e0 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | <!DOCTYPE html>
<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>
|