From 9c6a3748437ae844eb65ada0cf135d637e18df9d Mon Sep 17 00:00:00 2001 From: maziggy Date: Thu, 26 Mar 2026 15:28:32 +0100 Subject: [PATCH] Add SpoolBuddy Inventory page to kiosk UI MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Catalog-style spool grid with colored spool circles (matching AMS page style), material/subtype labels, color dots, fill level bars, remaining weight percentages, and AMS location badges. Touch-friendly search bar and inline filter pills (All, In AMS, per-material). Full-screen detail view with slicer filament, PA K-profiles, weight breakdown, temperature, cost, tag ID, AMS assignment, and notes — updates live from query data. Shows Spoolman iframe when Spoolman is enabled. Navigation item added between Write and Settings in the bottom bar. --- CHANGELOG.md | 2 +- .../spoolbuddy/SpoolBuddyInventoryPage.tsx | 163 ++++++++++-------- static/assets/index-C5XeRH2I.css | 1 - static/assets/index-DWwO6mIe.css | 1 + .../{index-1F1LrQ9s.js => index-DpMrBbPn.js} | 108 ++++++------ static/index.html | 4 +- 6 files changed, 146 insertions(+), 133 deletions(-) delete mode 100644 static/assets/index-C5XeRH2I.css create mode 100644 static/assets/index-DWwO6mIe.css rename static/assets/{index-1F1LrQ9s.js => index-DpMrBbPn.js} (98%) diff --git a/CHANGELOG.md b/CHANGELOG.md index f9e68c873..a41254a24 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,7 +19,7 @@ All notable changes to Bambuddy will be documented in this file. - **SpoolBuddy Install Script Now Upgrades System Packages** — The install script now runs `apt-get upgrade -y` after installing required packages and the WiFi safeguard. This ensures the Pi is fully up to date before SpoolBuddy is deployed, and the WiFi safeguard protects connectivity during the upgrade. - **SpoolBuddy Assign-to-AMS Material Mismatch Warnings** — The SpoolBuddy "Assign to AMS" modal now warns when the spool's material or slicer profile doesn't match the target slot's current filament. Shows a confirmation dialog with five warning levels: exact material mismatch, partial material match, profile-only mismatch, and combined material+profile mismatches. Respects the global `disable_filament_warnings` setting. Previously, assigning a spool to an occupied slot proceeded without any validation, matching the behavior already present in the main Assign Spool modal. - **Spool Assignment Changes Sync Across Tabs** — Assigning or unassigning a spool now broadcasts a WebSocket event to all connected clients. Other open browser tabs and the SpoolBuddy frontend update automatically without requiring a page reload. -- **SpoolBuddy Inventory Page** — Added a new Inventory page to the SpoolBuddy kiosk UI, accessible from the bottom navigation bar between Write and Settings. Shows a responsive catalog grid of spools with colored spool icons, material/subtype labels, color dots, remaining weight with percentage, and green AMS location badges (A1, B2, etc.) for assigned spools. Includes a search bar (filters by material, subtype, brand, color, notes) and inline filter pills ("All", "In AMS", per-material). Tapping a spool opens a detail bottom sheet with spool icon, remaining bar, AMS assignment, weight breakdown, temperature range, cost, tag ID, and notes. Assigned spools sort first. When Spoolman is enabled, the page shows the Spoolman UI instead. +- **SpoolBuddy Inventory Page** — Added a new Inventory page to the SpoolBuddy kiosk UI, accessible from the bottom navigation bar between Write and Settings. Shows a responsive catalog grid of spools with colored spool circles (matching AMS page style), material/subtype labels, color dots, fill level bars, remaining weight with percentage, and green AMS location badges (A1, B2, etc.) for assigned spools. Includes a search bar (filters by material, subtype, brand, color, notes) and touch-friendly inline filter pills ("All", "In AMS", per-material). Tapping a spool opens a full-screen detail view with spool icon, remaining bar, AMS assignment, weight breakdown, slicer filament, PA K-profiles (name and value), temperature range, cost, tag ID, and notes. Detail view updates live from query data. Assigned spools sort first. When Spoolman is enabled, the page shows the Spoolman UI instead. - **SpoolBuddy Auto-Navigate on Tag Scan** — When an NFC tag is detected while the SpoolBuddy UI is on a non-dashboard page (Settings, AMS, Write Tag, etc.), the frontend automatically navigates back to the main dashboard to show the scanned spool. Also wakes the screen if the display was blanked. - **SpoolBuddy Swipe to Switch Printers** — Swiping left/right on the SpoolBuddy touchscreen now cycles through online printers instead of triggering browser back/forward navigation. The selected printer updates in the top bar dropdown. Requires at least two online printers; single-printer setups are unaffected. - **SpoolBuddy Virtual Keyboard No Longer Overlays Input Fields** — The virtual keyboard now adds temporary scroll padding to the content area when it opens, ensuring the focused input field scrolls above the keyboard instead of being hidden behind it. Fixes text entry on the SpoolBuddy Settings device tab (backend URL, API token fields). diff --git a/frontend/src/pages/spoolbuddy/SpoolBuddyInventoryPage.tsx b/frontend/src/pages/spoolbuddy/SpoolBuddyInventoryPage.tsx index 53ba3c846..c271ddf1e 100644 --- a/frontend/src/pages/spoolbuddy/SpoolBuddyInventoryPage.tsx +++ b/frontend/src/pages/spoolbuddy/SpoolBuddyInventoryPage.tsx @@ -35,39 +35,15 @@ function assignmentLabel(a: SpoolAssignment): string { return formatSlotLabel(a.ams_id, a.tray_id, isHt, isExternal); } -/* SVG spool icon — cylindrical spool with colored filament */ -function SpoolSvg({ color, size = 64 }: { color: string; size?: number }) { - // Determine if the color is very dark to add a subtle outline - const r = parseInt(color.slice(1, 3), 16) || 0; - const g = parseInt(color.slice(3, 5), 16) || 0; - const b = parseInt(color.slice(5, 7), 16) || 0; - const luma = 0.299 * r + 0.587 * g + 0.114 * b; - const strokeColor = luma < 40 ? 'rgba(255,255,255,0.15)' : 'rgba(0,0,0,0.2)'; - +/* Spool circle — same style as AMS page tray slots */ +function SpoolCircle({ color, size = 56 }: { color: string; size?: number }) { return ( - - {/* Spool flanges (gray side plates) */} - - - - - {/* Filament wrap (colored center) */} - - - - - {/* Highlight on filament */} - - - - {/* Center hub (dark hole) */} - - - - {/* Top flange rim */} - - {/* Bottom flange rim */} - + + + + + + ); } @@ -76,7 +52,7 @@ export function SpoolBuddyInventoryPage() { const { t } = useTranslation(); const [searchQuery, setSearchQuery] = useState(''); const [filterMode, setFilterMode] = useState('all'); - const [selectedSpool, setSelectedSpool] = useState(null); + const [selectedSpoolId, setSelectedSpoolId] = useState(null); const { data: spoolmanSettings } = useQuery({ queryKey: ['spoolman-settings'], @@ -96,21 +72,6 @@ export function SpoolBuddyInventoryPage() { refetchInterval: 30000, }); - // Spoolman iframe mode - const spoolmanEnabled = spoolmanSettings?.spoolman_enabled === 'true' && spoolmanSettings?.spoolman_url; - if (spoolmanEnabled) { - return ( -
-