wenil
dfef1453aa
The hex_cell.scad echoes its computed dimensions (pack_height_holder,
total_*_holder, box_total_*) to stderr. Capture those and surface them
in the viewer so the user can sanity-check whether the assembled
battery will fit in a target case.
Backend:
- holder.py: render_stl() now returns (stl_bytes, dims) where dims is
a {name: float} dict parsed from openscad ECHO lines.
- app.py: /api/holder/render emits the dims dict as an
X-Holder-Dimensions response header (JSON) with the matching
Access-Control-Expose-Headers entry so fetch() can read it under
any proxy / future CORS setup.
Viewer (holder-viewer.js):
- New setGhostBox(name, {w,d,h}, {visible,color}) and clearGhostBox(name)
helpers. Each ghost is a Group of a translucent BoxGeometry mesh +
matching EdgesGeometry wireframe, positioned to match how the STL
mesh is placed (centred XY, bottom on Z=0).
UI (holder.html / holder.css):
- New "Fit check" panel under Status with two sections:
• Show max bounding box (auto, from ECHO — defaults to box_total_*
dims, falls back to total_*_holder + pack_height_holder).
• Show enclosure (manual W × D × H inputs in mm).
- Verdict line under the enclosure inputs: "✓ fits" green or
"✗ too small — battery won't fit" red.
Controller (holder-app.js):
- Reads X-Holder-Dimensions after each render, updates the max-box
ghost in blue, prints the dimensions label.
- Watches enclosure inputs + toggles, drives the enclosure ghost
(green if it fits, red if smaller than the max box on any axis).
- Fit comparison is orientation-independent in the XY plane (sorted
W,D pair) but strict on Z (height).
100 lines
3.2 KiB
HTML
100 lines
3.2 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>Hex Holder Designer</title>
|
||
<link rel="stylesheet" href="styles.css" />
|
||
<link rel="stylesheet" href="holder.css" />
|
||
|
||
<script type="importmap">
|
||
{
|
||
"imports": {
|
||
"three": "https://cdn.jsdelivr.net/npm/three@0.165.0/build/three.module.js",
|
||
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.165.0/examples/jsm/"
|
||
}
|
||
}
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<header class="topbar">
|
||
<h1>Hex Holder Designer</h1>
|
||
|
||
<nav class="topbar-nav">
|
||
<a href="/holder" class="active">Holder</a>
|
||
<a href="/">Busbars</a>
|
||
</nav>
|
||
|
||
<span id="status" class="topbar-status">— cells</span>
|
||
|
||
<div class="actions">
|
||
<button id="btn-render" class="primary" title="Render STL with current parameters">Render</button>
|
||
<button id="btn-cancel" title="Cancel running render" hidden>Cancel</button>
|
||
<button id="btn-download-stl" title="Download STL of the current configuration">Download STL</button>
|
||
<button id="btn-download-scad" title="Download the OpenSCAD source with current parameters baked in">Download .scad</button>
|
||
<span class="sep"></span>
|
||
<button id="btn-to-busbar" class="primary" title="Open Busbar Designer with these cell coordinates pre-loaded">Design busbars →</button>
|
||
</div>
|
||
</header>
|
||
|
||
<main>
|
||
<aside class="left holder-left">
|
||
<section class="panel">
|
||
<h2>Parameters</h2>
|
||
<div id="param-form" class="param-form">
|
||
<div class="hint">Loading parameter schema…</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="panel">
|
||
<h2>Status</h2>
|
||
<p class="hint" id="render-status">idle</p>
|
||
<div id="render-progress" class="render-progress" hidden>
|
||
<div class="render-progress-bar"><div class="render-progress-fill"></div></div>
|
||
<span id="render-elapsed" class="render-elapsed">0.0s</span>
|
||
</div>
|
||
<p class="hint" id="render-time"></p>
|
||
<p class="hint" id="warning"></p>
|
||
</section>
|
||
|
||
<section class="panel">
|
||
<h2>Fit check</h2>
|
||
|
||
<label class="fit-toggle">
|
||
<input type="checkbox" id="show-max-box" checked>
|
||
<span>Show max bounding box</span>
|
||
</label>
|
||
<p class="hint" id="max-box-dims">— render first</p>
|
||
|
||
<hr class="fit-sep">
|
||
|
||
<label class="fit-toggle">
|
||
<input type="checkbox" id="show-enclosure">
|
||
<span>Show enclosure</span>
|
||
</label>
|
||
<div class="enc-inputs">
|
||
<input id="enc-w" type="number" min="1" step="1" placeholder="W">
|
||
<span>×</span>
|
||
<input id="enc-d" type="number" min="1" step="1" placeholder="D">
|
||
<span>×</span>
|
||
<input id="enc-h" type="number" min="1" step="1" placeholder="H">
|
||
<span class="unit">mm</span>
|
||
</div>
|
||
<p class="hint" id="fit-verdict"></p>
|
||
</section>
|
||
</aside>
|
||
|
||
<section class="right">
|
||
<div id="viewer3d" class="viewer3d"></div>
|
||
<div class="viewport-overlay">
|
||
<div id="hint-controls">left-drag: rotate · right-drag: pan · wheel: zoom</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<script src="js/api.js"></script>
|
||
<script type="module" src="js/holder-viewer.js"></script>
|
||
<script type="module" src="js/holder-app.js"></script>
|
||
</body>
|
||
</html>
|