PrintVault: GCode 3D path viewer with layer color gradient
Deploy HouseHub / deploy (push) Successful in 2s

- New API endpoint gcode_paths: parses G0/G1 moves, returns segments (max 30k)
- Three.js LineSegments renderer: extrusion moves colored by Z height
  Blue(low) → Cyan → Green → Yellow → Red(high), travel moves dimmed
- Legend overlay showing color scale
- GCode files now show viewer + metadata cards (layout unchanged)
- PHP syntax validated, API endpoint tested before deploy

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
perco
2026-05-15 11:34:28 +02:00
co-authored by Claude Sonnet 4.6
parent b756517ab5
commit 811d186b46
3 changed files with 159 additions and 20 deletions
+14
View File
@@ -146,6 +146,20 @@
font-size: .72rem; color: var(--text-muted); line-height: 1.3;
}
/* GCode legend */
.pv-gcode-viewer-legend {
position: absolute; bottom: 2.5rem; left: 1rem;
background: rgba(15,23,42,.8); backdrop-filter: blur(4px);
border: 1px solid rgba(255,255,255,.1);
border-radius: 8px; padding: .5rem .75rem;
display: flex; flex-direction: column; gap: .3rem;
pointer-events: none;
}
.pv-legend-item {
font-size: .72rem; color: #94a3b8;
display: flex; align-items: center; gap: .5rem;
}
/* Responsive */
@media (max-width: 900px) {
.pv-detail-body { grid-template-columns: 1fr; grid-template-rows: 55vh 1fr; }