+
+ )}
);
}
diff --git a/frontend/src/hooks/useWebSocket.ts b/frontend/src/hooks/useWebSocket.ts
index 872b9f744..755ca2b6c 100644
--- a/frontend/src/hooks/useWebSocket.ts
+++ b/frontend/src/hooks/useWebSocket.ts
@@ -214,6 +214,18 @@ export function useWebSocket() {
case 'pong':
// Keepalive response, ignore
break;
+
+ case 'plate_not_empty':
+ // Plate detection found objects - print was paused
+ // Dispatch event for toast notification
+ window.dispatchEvent(new CustomEvent('plate-not-empty', {
+ detail: {
+ printer_id: message.printer_id,
+ printer_name: (message as unknown as { printer_name?: string }).printer_name,
+ message: (message as unknown as { message?: string }).message,
+ }
+ }));
+ break;
}
}, [queryClient, debouncedInvalidate, throttledPrinterStatusUpdate]);
diff --git a/frontend/src/pages/PrintersPage.tsx b/frontend/src/pages/PrintersPage.tsx
index 44e732d72..d6400be72 100644
--- a/frontend/src/pages/PrintersPage.tsx
+++ b/frontend/src/pages/PrintersPage.tsx
@@ -36,6 +36,9 @@ import {
Wind,
AirVent,
Download,
+ ScanSearch,
+ CheckCircle,
+ XCircle,
} from 'lucide-react';
// Custom Skip Objects icon - arrow jumping over boxes
@@ -965,6 +968,22 @@ function PrinterCard({
trayInfoIdx?: string;
} | null>(null);
const [showFirmwareModal, setShowFirmwareModal] = useState(false);
+ const [plateCheckResult, setPlateCheckResult] = useState<{
+ is_empty: boolean;
+ confidence: number;
+ difference_percent: number;
+ message: string;
+ debug_image_url?: string;
+ needs_calibration: boolean;
+ light_warning?: boolean;
+ reference_count?: number;
+ max_references?: number;
+ roi?: { x: number; y: number; w: number; h: number };
+ } | null>(null);
+ const [isCheckingPlate, setIsCheckingPlate] = useState(false);
+ const [isCalibrating, setIsCalibrating] = useState(false);
+ const [editingRoi, setEditingRoi] = useState<{ x: number; y: number; w: number; h: number } | null>(null);
+ const [isSavingRoi, setIsSavingRoi] = useState(false);
const { data: status } = useQuery({
queryKey: ['printerStatus', printer.id],
@@ -1187,6 +1206,16 @@ function PrinterCard({
},
});
+ // Plate detection setting mutation
+ const plateDetectionMutation = useMutation({
+ mutationFn: (enabled: boolean) => api.updatePrinter(printer.id, { plate_detection_enabled: enabled }),
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: ['printers'] });
+ showToast(plateDetectionMutation.variables ? 'Plate check enabled' : 'Plate check disabled');
+ },
+ onError: (error: Error) => showToast(error.message || 'Failed to update setting', 'error'),
+ });
+
// Query for printable objects (for skip functionality)
// Fetch when printing with 2+ objects OR when modal is open
const isPrintingWithObjects = (status?.state === 'RUNNING' || status?.state === 'PAUSE' || status?.state === 'PAUSED') && (status?.printable_objects_count ?? 0) >= 2;
@@ -1250,6 +1279,118 @@ function PrinterCard({
},
});
+ // Plate references state
+ const [plateReferences, setPlateReferences] = useState<{
+ references: Array<{ index: number; label: string; timestamp: string; has_image: boolean; thumbnail_url: string }>;
+ max_references: number;
+ } | null>(null);
+ const [editingRefLabel, setEditingRefLabel] = useState<{ index: number; label: string } | null>(null);
+
+ // Fetch plate references
+ const fetchPlateReferences = async () => {
+ try {
+ const data = await api.getPlateReferences(printer.id);
+ setPlateReferences(data);
+ } catch {
+ // Ignore errors - references will show as empty
+ }
+ };
+
+ // Toggle plate detection enabled/disabled
+ const handleTogglePlateDetection = () => {
+ plateDetectionMutation.mutate(!printer.plate_detection_enabled);
+ };
+
+ // Open plate detection management modal (for calibration/references)
+ const handleOpenPlateManagement = async () => {
+ setIsCheckingPlate(true);
+ setPlateCheckResult(null);
+ try {
+ const result = await api.checkPlateEmpty(printer.id, { includeDebugImage: true });
+ setPlateCheckResult(result);
+ fetchPlateReferences();
+ } catch (error) {
+ showToast(error instanceof Error ? error.message : 'Failed to check plate', 'error');
+ } finally {
+ setIsCheckingPlate(false);
+ }
+ };
+
+ // Calibrate plate detection handler
+ const handleCalibratePlate = async (label?: string) => {
+ setIsCalibrating(true);
+ try {
+ const result = await api.calibratePlateDetection(printer.id, { label });
+ if (result.success) {
+ showToast(result.message || 'Calibration saved!', 'success');
+ // Refresh references and re-check
+ fetchPlateReferences();
+ const checkResult = await api.checkPlateEmpty(printer.id, { includeDebugImage: true });
+ setPlateCheckResult(checkResult);
+ } else {
+ showToast(result.message || 'Calibration failed', 'error');
+ }
+ } catch (error) {
+ showToast(error instanceof Error ? error.message : 'Calibration failed', 'error');
+ } finally {
+ setIsCalibrating(false);
+ }
+ };
+
+ // Update reference label
+ const handleUpdateRefLabel = async (index: number, label: string) => {
+ try {
+ await api.updatePlateReferenceLabel(printer.id, index, label);
+ setEditingRefLabel(null);
+ fetchPlateReferences();
+ } catch (error) {
+ showToast(error instanceof Error ? error.message : 'Failed to update label', 'error');
+ }
+ };
+
+ // Delete reference
+ const handleDeleteRef = async (index: number) => {
+ try {
+ await api.deletePlateReference(printer.id, index);
+ showToast('Reference deleted', 'success');
+ fetchPlateReferences();
+ // Re-check to update counts
+ const checkResult = await api.checkPlateEmpty(printer.id, { includeDebugImage: true });
+ setPlateCheckResult(checkResult);
+ } catch (error) {
+ showToast(error instanceof Error ? error.message : 'Failed to delete reference', 'error');
+ }
+ };
+
+ // Save ROI settings
+ const handleSaveRoi = async () => {
+ if (!editingRoi) return;
+ setIsSavingRoi(true);
+ try {
+ await api.updatePrinter(printer.id, { plate_detection_roi: editingRoi });
+ showToast('Detection area saved', 'success');
+ setEditingRoi(null);
+ // Re-check to see new ROI in action
+ const checkResult = await api.checkPlateEmpty(printer.id, { includeDebugImage: true });
+ setPlateCheckResult(checkResult);
+ } catch (error) {
+ showToast(error instanceof Error ? error.message : 'Failed to save detection area', 'error');
+ } finally {
+ setIsSavingRoi(false);
+ }
+ };
+
+ // Close plate check modal on Escape key
+ useEffect(() => {
+ const handleEscape = (e: KeyboardEvent) => {
+ if (e.key === 'Escape' && plateCheckResult) {
+ setPlateCheckResult(null);
+ }
+ };
+ window.addEventListener('keydown', handleEscape);
+ return () => window.removeEventListener('keydown', handleEscape);
+ }, [plateCheckResult]);
+
// Watch ams_status_main to detect when RFID read completes
// ams_status_main: 0=idle, 2=rfid_identifying
const deferredClearRef = useRef
+
+
+
+
+
+
+ + Print Paused! +
++ {plateDetectionAlert.printer_name} +
++ Objects detected on build plate. The print has been automatically paused. + Please clear the plate and resume the print. +
+ +
+
+
+
)}
+ {/* Plate Check Result Modal */}
+ {plateCheckResult && (
+ setPlateCheckResult(null)}>
+
+ )}
+
{/* Power On Confirmation */}
{showPowerOnConfirm && smartPlug && (
e.stopPropagation()}>
+
+
+
+
+ {plateCheckResult.needs_calibration ? (
+
+
+ + Build Plate Check +
+ {plateCheckResult.reference_count !== undefined && plateCheckResult.max_references && ( + + {plateCheckResult.reference_count}/{plateCheckResult.max_references} refs + + )} +
+ {/* Light Warning */}
+ {plateCheckResult.light_warning && (
+
+
+
+ )}
+
+ {plateCheckResult.needs_calibration ? (
+ <>
+
+
+ For reliable detection, please turn ON the chamber light before checking or calibrating. +
+
+
+ + Calibration Required +
++ Please ensure the build plate is completely empty and chamber light is ON, then click Calibrate. +
+
+
+
+ ) : (
+ <>
+ Calibration captures a reference image of the empty plate. Future checks will compare against this reference to detect objects.
+Tip: You can store up to 5 calibrations for different plates. The system automatically uses the best match when checking.
+
+
+ {plateCheckResult.debug_image_url && (
+ + {plateCheckResult.is_empty ? 'Plate appears empty' : 'Objects detected on plate'} +
++ Confidence: {Math.round(plateCheckResult.confidence * 100)}% | Difference: {plateCheckResult.difference_percent.toFixed(1)}% +
+
+ 
+
+ )}
+ Analysis preview:
++ Green box = detection area, Red overlay = differences from calibration +
++ {plateCheckResult.message} +
+ + )} + + {/* Saved References Grid */} + {plateReferences && plateReferences.references.length > 0 && ( +
+
+ )}
+
+ {/* ROI Editor */}
+ {!plateCheckResult.needs_calibration && (
+ + Saved References ({plateReferences.references.length}/{plateReferences.max_references}) +
+
+ {plateReferences.references.map((ref) => (
+
+
+ 
+ {/* Delete button */}
+
+ {/* Label */}
+ {editingRefLabel?.index === ref.index ? (
+ setEditingRefLabel({ ...editingRefLabel, label: e.target.value })}
+ onBlur={() => handleUpdateRefLabel(ref.index, editingRefLabel.label)}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter') handleUpdateRefLabel(ref.index, editingRefLabel.label);
+ if (e.key === 'Escape') setEditingRefLabel(null);
+ }}
+ className="w-full mt-1 px-1 py-0.5 text-xs bg-bambu-dark-tertiary border border-bambu-green rounded text-white"
+ autoFocus
+ placeholder="Label..."
+ />
+ ) : (
+
+ ))}
+ setEditingRefLabel({ index: ref.index, label: ref.label })} + title={ref.label ? `${ref.label} - Click to edit` : 'Click to add label'} + > + {ref.label || No label} +
+ )} + {/* Timestamp */} ++ {ref.timestamp ? new Date(ref.timestamp).toLocaleDateString() : ''} +
+
+
+ )}
+
+
+ {editingRoi ? (
+ Detection Area (ROI)
+ {!editingRoi ? ( + + ) : ( +
+
+
+
+ )}
+
+
+ ) : (
+
+
+
+
+ setEditingRoi({ ...editingRoi, x: parseFloat(e.target.value) })}
+ className="w-full h-1.5 bg-bambu-dark-tertiary rounded-lg cursor-pointer accent-green-500"
+ />
+ {Math.round(editingRoi.x * 100)}%
+
+
+
+ setEditingRoi({ ...editingRoi, y: parseFloat(e.target.value) })}
+ className="w-full h-1.5 bg-bambu-dark-tertiary rounded-lg cursor-pointer accent-green-500"
+ />
+ {Math.round(editingRoi.y * 100)}%
+
+
+
+ setEditingRoi({ ...editingRoi, w: parseFloat(e.target.value) })}
+ className="w-full h-1.5 bg-bambu-dark-tertiary rounded-lg cursor-pointer accent-green-500"
+ />
+ {Math.round(editingRoi.w * 100)}%
+
+
+
+ setEditingRoi({ ...editingRoi, h: parseFloat(e.target.value) })}
+ className="w-full h-1.5 bg-bambu-dark-tertiary rounded-lg cursor-pointer accent-green-500"
+ />
+ {Math.round(editingRoi.h * 100)}%
+
+ + Adjust the detection area to focus on the build plate. The green box in the preview shows the current area. +
++ Current: X={Math.round((plateCheckResult.roi?.x || 0.15) * 100)}%, Y={Math.round((plateCheckResult.roi?.y || 0.35) * 100)}%, + W={Math.round((plateCheckResult.roi?.w || 0.70) * 100)}%, H={Math.round((plateCheckResult.roi?.h || 0.55) * 100)}% +
+ )} +
+ {plateCheckResult.needs_calibration ? (
+ <>
+
+
+
+ ) : (
+ <>
+
+
+
+ )}
+
+