mirror of
https://github.com/maziggy/bambuddy.git
synced 2026-08-11 00:30:12 -04:00
c44b62195a
Reshapes the embedded PrettyGCode viewer (landed in #963) into a focused archive-preview tool, matching Bambuddy's data model instead of the OctoPrint-style "connected-printer + library file picker" flow it shipped with. Reached only from the Archives page 3D-preview button; URL /gcode-viewer?archive=<id>[&plate=<N>]. Backend: - /archives/{id}/gcode accepts ?plate=N and resolves the filename by parsing the suffix as int, so zero-padded names like plate_01.gcode are found when the plates endpoint reports index 1. - /archives/{id}/plates gains top-level has_gcode: bool. Source-only 3MFs (PNG/JSON fallback path) surface the flag so the frontend can skip the picker instead of sending the user into a dead viewer. - printer_state_to_dict injects name + model into every WS snapshot so consumers render proper labels on the initial tick without racing a separate /printers fetch. - /gcode-viewer (no trailing slash) dropped from the backend so reloads fall through to the SPA catch-all and keep the layout shell; only /gcode-viewer/ (trailing slash) and /gcode-viewer/<path> remain for the iframe + static assets. Frontend: - PlatePickerModal shown only for multi-plate archives with sliced gcode, grid layout with thumbnails matching the Re-print modal. - Source-only archives show a noGcode toast instead of the empty viewer. - ArchivesPage navigate path swapped to /gcode-viewer?archive=<id> with no trailing slash; GCodeViewerPage iframe forwards window.location.search so the archive reference survives both the initial navigate and a full-page reload. - Viewer iframe's auth path: fetch intercept injects Bearer; a 401 redirects to / so the SPA handles login. Viewer adapter: - Stripped the printer selector, WebSocket subscription, library file picker, tryAutoLoadPrintingFile, BAMBU_BED_SIZES, and updatePrinter- Selector. The viewer no longer observes live printer state. - Bed size derived from /archives/{id}/capabilities.build_volume (extracted from the 3MF's printable_area/printable_height), so H2D, H-family, and any future printer render on the correct bed without a hardcoded map. - loadArchiveById accepts a plate param; fetch intercept rewrites __bambuddy_archive_<id>[_plate<N>] to /archives/<id>/gcode[?plate=N]. Nav + locale cleanup: - Sidebar "GCode Viewer" nav entry removed (viewer is archive-scoped now, not a destination page). - 32 orphaned gcodeViewer locale keys deleted across all 8 locales. - platePicker.{title, hint, plateLabel, objectCount, noGcode} keys added in all 8 locales. ArchivesPage: the now-unreachable ModelViewerModal render paths + its showViewer state removed. ModelViewerModal itself stays — File Manager still uses it for library file previews (plate picker + .3mf 3D model). pre-commit: - gcode_viewer/ excluded from trailing-whitespace + end-of-file-fixer so vendored third-party JS libs don't drift away from upstream. Incidental sweeps picked up by pre-commit and kept (unrelated but benign): - NotificationsPage.tsx: single trailing-whitespace line removed. - spoolbuddy/scripts/pn5180_diag.py: dead `import gpiod` dropped — the pn5180 driver module imported at line 27 does its own `import gpiod` and `gpiod.Chip()` calls, so the diag script's top-level import was never referenced. Tests: - 6 new cases in test_gcode_viewer.py for the backend plate / has_gcode behaviour (plate=N resolution, zero-padded filenames, missing-plate 404, no-plate fallback, plate=0 rejection, has_gcode true/false). - 3 new cases in test_printer_manager.py for name/model WS injection. - PlatePickerModal.test.tsx — 6 frontend cases covering render, plate-name composition, onSelect payload, backdrop close, and thumbnail fallback.
232 lines
6.5 KiB
HTML
232 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<!-- CSP: all scripts are local; unsafe-eval needed by Three.js shader compiler;
|
|
unsafe-inline needed by dat.GUI and jQuery for inline styles/event handlers -->
|
|
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; connect-src 'self' ws: wss:; font-src 'self' data:; worker-src blob:;">
|
|
<title>PrettyGCode — Bambuddy</title>
|
|
|
|
<link rel="stylesheet" href="css/prettygcode.css">
|
|
|
|
<style>
|
|
*, *::before, *::after { box-sizing: border-box; }
|
|
|
|
html, body {
|
|
margin: 0; padding: 0;
|
|
height: 100%;
|
|
background: #1a1a1a;
|
|
color: #e0e0e0;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* Top toolbar */
|
|
#bb-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 6px 10px;
|
|
background: #111;
|
|
border-bottom: 1px solid #333;
|
|
flex-shrink: 0;
|
|
flex-wrap: wrap;
|
|
}
|
|
#bb-current-file {
|
|
color: #9ecfff; font-size: 12px;
|
|
max-width: 300px; overflow: hidden;
|
|
text-overflow: ellipsis; white-space: nowrap;
|
|
}
|
|
#bb-open-settings {
|
|
margin-left: auto;
|
|
background: none; color: #aaa;
|
|
border: 1px solid #555; border-radius: 4px;
|
|
padding: 3px 8px; cursor: pointer; font-size: 12px;
|
|
}
|
|
#bb-open-settings:hover { color: #fff; border-color: #888; }
|
|
|
|
/* Playback controls */
|
|
#bb-play-btn {
|
|
background: #2a7a4a; color: #fff;
|
|
border: none; border-radius: 4px;
|
|
padding: 4px 10px; cursor: pointer; font-size: 14px;
|
|
min-width: 34px;
|
|
}
|
|
#bb-play-btn:hover { background: #1d5c38; }
|
|
#bb-play-btn:disabled { background: #444; cursor: default; }
|
|
#bb-play-speed {
|
|
background: #222; color: #ddd;
|
|
border: 1px solid #444; border-radius: 4px;
|
|
padding: 3px 5px; font-size: 12px;
|
|
}
|
|
|
|
/* Main layout */
|
|
#bb-layout {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
}
|
|
#bb-viewer-wrap {
|
|
flex: 1;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* The prettygcode container — must fill its parent */
|
|
.page-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
#tab_plugin_prettygcode {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.gwin {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
#mycanvas {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
|
|
/* Webcam element cloned by prettygcode.js — keep hidden until fullscreen */
|
|
#webcam_rotator {
|
|
display: none;
|
|
}
|
|
#webcam_image { max-width: 100%; }
|
|
|
|
/* Control buttons inside .gwin */
|
|
.pgstatetoggle, .pgfilestoggle, .pgsettingstoggle, .fstoggle,
|
|
.pgdashtoggle, .pgcameratoggle {
|
|
background: rgba(0,0,0,0.5);
|
|
border: 1px solid #666;
|
|
border-radius: 4px;
|
|
color: #ddd;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
padding: 4px 7px;
|
|
z-index: 10;
|
|
}
|
|
.pgstatetoggle:hover, .pgfilestoggle:hover, .pgsettingstoggle:hover,
|
|
.fstoggle:hover, .pgdashtoggle:hover, .pgcameratoggle:hover {
|
|
background: rgba(60,60,60,0.8);
|
|
}
|
|
|
|
/* Slider shim styles */
|
|
.slider {
|
|
position: absolute;
|
|
right: 20px;
|
|
top: 5%;
|
|
height: 90%;
|
|
width: 28px;
|
|
z-index: 10;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
.slider-vertical { writing-mode: vertical-lr; }
|
|
.slider-track {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 0; bottom: 0;
|
|
width: 4px;
|
|
transform: translateX(-50%);
|
|
background: #555;
|
|
border-radius: 2px;
|
|
}
|
|
.slider-selection {
|
|
position: absolute;
|
|
left: 0; right: 0;
|
|
bottom: 0;
|
|
background: #4a9;
|
|
border-radius: 2px;
|
|
}
|
|
.slider-handle {
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 24px; height: 24px;
|
|
background: #6cf;
|
|
border-radius: 50%;
|
|
line-height: 24px;
|
|
text-align: center;
|
|
font-size: 9px;
|
|
color: #111;
|
|
font-weight: bold;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="bb-layout">
|
|
|
|
<!-- Toolbar -->
|
|
<div id="bb-toolbar">
|
|
<span id="bb-current-file">— no file loaded —</span>
|
|
|
|
<button id="bb-play-btn" title="Play layer animation" disabled>▶</button>
|
|
<select id="bb-play-speed" title="Playback speed">
|
|
<option value="1">1× slow</option>
|
|
<option value="3" selected>3×</option>
|
|
<option value="10">10× fast</option>
|
|
<option value="25">25× turbo</option>
|
|
</select>
|
|
|
|
</div>
|
|
|
|
<!-- Viewer area -->
|
|
<div id="bb-viewer-wrap">
|
|
<div class="page-container">
|
|
|
|
<div id="tab_plugin_prettygcode">
|
|
<div class="gwin">
|
|
<canvas id="mycanvas"></canvas>
|
|
<div id="pgstatus" class="pgstatus">T:0/0 B:0/0</div>
|
|
<div id="mygui" class="pghidden">View Options</div>
|
|
|
|
<button class="pgstatetoggle" title="Toggle state window">ⓘ</button>
|
|
<button class="pgfilestoggle" title="Toggle file list">☰</button>
|
|
<button class="pgsettingstoggle" title="Toggle settings">⚙</button>
|
|
<button class="pgcameratoggle" title="Toggle webcam">📷</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Webcam source element — prettygcode.js clones this into .gwin -->
|
|
<div id="webcam_rotator" style="display:none;">
|
|
<img id="webcam_image" src="" alt="webcam">
|
|
</div>
|
|
|
|
</div>
|
|
</div><!-- /bb-viewer-wrap -->
|
|
</div><!-- /bb-layout -->
|
|
|
|
<!-- Scripts — load order matters -->
|
|
<script src="js/jquery.min.js"></script>
|
|
<script src="js/slider-shim.js"></script>
|
|
<script src="js/three.min.js"></script>
|
|
<script src="js/LineSegmentsGeometry.js"></script>
|
|
<script src="js/LineGeometry.js"></script>
|
|
<script src="js/LineMaterial.js"></script>
|
|
<script src="js/LineSegments2.js"></script>
|
|
<script src="js/Line2.js"></script>
|
|
<script src="js/Lut.js"></script>
|
|
<script src="js/OBJLoader.js"></script>
|
|
<script src="js/camera-controls.js"></script>
|
|
<script src="js/dat.gui.js"></script>
|
|
|
|
<!-- Adapter MUST load before prettygcode.js -->
|
|
<script src="js/bambuddy_adapter.js"></script>
|
|
<script src="js/prettygcode.js"></script>
|
|
|
|
<!-- Button wiring is in bambuddy_adapter.js — inline scripts are blocked by the
|
|
script-src CSP on this page (no 'unsafe-inline'). -->
|
|
|
|
</body>
|
|
</html>
|