url && loaded && setShowOverlay(true)}
>
{url && !error ? (
<>
setLoaded(true)}
onError={() => setError(true)}
/>
{!loaded &&
{/* Cover Image Overlay */}
{showOverlay && url && (
setShowOverlay(false)}
>
{printName && (
)}
);
}
interface PrinterMaintenanceInfo {
due_count: number;
warning_count: number;
total_print_hours: number;
}
// Status summary bar component - uses queryClient to read cached statuses
function StatusSummaryBar({ printers }: { printers: Printer[] | undefined }) {
const queryClient = useQueryClient();
const counts = useMemo(() => {
let printing = 0;
let idle = 0;
let offline = 0;
let loading = 0;
printers?.forEach((printer) => {
const status = queryClient.getQueryData<{ connected: boolean; state: string | null }>(['printerStatus', printer.id]);
if (status === undefined) {
// Status not yet loaded - don't count as offline yet
loading++;
} else if (!status.connected) {
offline++;
} else if (status.state === 'RUNNING') {
printing++;
} else {
idle++;
}
});
return { printing, idle, offline, loading, total: (printers?.length || 0) };
}, [printers, queryClient]);
// Subscribe to query cache changes to re-render when status updates
// Throttled to prevent rapid re-renders from causing tab crashes
const [, setTick] = useState(0);
useEffect(() => {
let pending = false;
const unsubscribe = queryClient.getQueryCache().subscribe(() => {
if (!pending) {
pending = true;
requestAnimationFrame(() => {
setTick(t => t + 1);
pending = false;
});
}
});
return () => unsubscribe();
}, [queryClient]);
if (!printers?.length) return null;
return (
{printName}
)}
{counts.printing > 0 && (
);
}
type SortOption = 'name' | 'status' | 'model' | 'location';
type ViewMode = 'expanded' | 'compact';
/**
* Get human-readable status display text for a printer.
* Uses stg_cur_name for detailed calibration/preparation stages,
* otherwise formats the gcode_state nicely.
*/
function getStatusDisplay(state: string | null | undefined, stg_cur_name: string | null | undefined): string {
// If we have a specific stage name (calibration, heating, etc.), use it
if (stg_cur_name) {
return stg_cur_name;
}
// Format the gcode_state nicely
switch (state) {
case 'RUNNING':
return 'Printing';
case 'PAUSE':
return 'Paused';
case 'FINISH':
return 'Finished';
case 'FAILED':
return 'Failed';
case 'IDLE':
return 'Idle';
default:
return state ? state.charAt(0) + state.slice(1).toLowerCase() : 'Idle';
}
}
function PrinterCard({
printer,
hideIfDisconnected,
maintenanceInfo,
viewMode = 'expanded',
cardSize = 2,
amsThresholds,
spoolmanEnabled = false,
hasUnlinkedSpools = false,
timeFormat = 'system',
cameraViewMode = 'window',
onOpenEmbeddedCamera,
checkPrinterFirmware = true,
}: {
printer: Printer;
hideIfDisconnected?: boolean;
maintenanceInfo?: PrinterMaintenanceInfo;
viewMode?: ViewMode;
cardSize?: number;
amsThresholds?: {
humidityGood: number;
humidityFair: number;
tempGood: number;
tempFair: number;
};
spoolmanEnabled?: boolean;
hasUnlinkedSpools?: boolean;
timeFormat?: 'system' | '12h' | '24h';
cameraViewMode?: 'window' | 'embedded';
onOpenEmbeddedCamera?: (printerId: number, printerName: string) => void;
checkPrinterFirmware?: boolean;
}) {
const queryClient = useQueryClient();
const navigate = useNavigate();
const { showToast } = useToast();
const [showMenu, setShowMenu] = useState(false);
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
const [deleteArchives, setDeleteArchives] = useState(true);
const [showEditModal, setShowEditModal] = useState(false);
const [showFileManager, setShowFileManager] = useState(false);
const [showMQTTDebug, setShowMQTTDebug] = useState(false);
const [showPowerOnConfirm, setShowPowerOnConfirm] = useState(false);
const [showPowerOffConfirm, setShowPowerOffConfirm] = useState(false);
const [showHMSModal, setShowHMSModal] = useState(false);
const [showStopConfirm, setShowStopConfirm] = useState(false);
const [showPauseConfirm, setShowPauseConfirm] = useState(false);
const [showResumeConfirm, setShowResumeConfirm] = useState(false);
const [showSkipObjectsModal, setShowSkipObjectsModal] = useState(false);
const [amsHistoryModal, setAmsHistoryModal] = useState<{
amsId: number;
amsLabel: string;
mode: 'humidity' | 'temperature';
} | null>(null);
const [linkSpoolModal, setLinkSpoolModal] = useState<{
trayUuid: string;
trayInfo: { type: string; color: string; location: string };
} | null>(null);
const [configureSlotModal, setConfigureSlotModal] = useState<{
amsId: number;
trayId: number;
trayCount: number;
trayType?: string;
trayColor?: string;
traySubBrands?: string;
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 [plateCheckLightWasOff, setPlateCheckLightWasOff] = useState(false);
const { data: status } = useQuery({
queryKey: ['printerStatus', printer.id],
queryFn: () => api.getPrinterStatus(printer.id),
refetchInterval: 30000, // Fallback polling, WebSocket handles real-time
});
// Check for firmware updates (cached for 5 minutes, can be disabled in settings)
const { data: firmwareInfo } = useQuery({
queryKey: ['firmwareUpdate', printer.id],
queryFn: () => firmwareApi.checkPrinterUpdate(printer.id),
staleTime: 5 * 60 * 1000,
refetchInterval: 5 * 60 * 1000,
enabled: checkPrinterFirmware,
});
// Collect unique tray_info_idx values for cloud filament info lookup
const trayInfoIds = useMemo(() => {
const ids = new Set
{counts.printing} printing
)}
{counts.idle > 0 && (
{counts.idle} idle
)}
{counts.offline > 0 && (
{counts.offline} offline
)}
{/* Top row: Image, Name, Menu */}
{/* Badges row - only in expanded mode */}
{viewMode === 'expanded' && (
{/* Delete Confirmation */}
{showDeleteConfirm && (
{/* Printer Model Image */}
})
{/* Menu button */}
{printer.name}
{/* Connection indicator dot for compact mode */} {viewMode === 'compact' && ( )}
{printer.model || 'Unknown Model'}
{/* Nozzle Info - only in expanded */}
{viewMode === 'expanded' && status?.nozzles && status.nozzles[0]?.nozzle_diameter && (
• {status.nozzles[0].nozzle_diameter}mm
)}
{viewMode === 'expanded' && maintenanceInfo && maintenanceInfo.total_print_hours > 0 && (
{showMenu && (
)}
{/* Connection status badge */}
{status?.connected ? (
) : (
)}
Delete Printer
Are you sure you want to delete "{printer.name}"? This will remove all connection settings.
{status.state === 'RUNNING' ? (
{Math.round(status.progress || 0)}%
) : (
) : (
/* Expanded: Full status section */
<>
{/* Current Print or Idle Placeholder */}
{getStatusDisplay(status.state, status.stg_cur_name)}
)}
{/* Skip Objects button - top right corner, always visible */}
{/* Queue Widget - shows next scheduled print */}
{status.state !== 'RUNNING' && (
{/* Cover Image */}
{status.current_print && status.state === 'RUNNING' ? (
<>
{Math.round(status.progress || 0)}%
—
{lastPrint ? (
{status.stg_cur_name || 'Printing'}
{status.subtask_name || status.current_print}
{status.remaining_time != null && status.remaining_time > 0 && (
<>
) : (
<>
Status
{getStatusDisplay(status.state, status.stg_cur_name)}
Last: {lastPrint.print_name || lastPrint.filename} {lastPrint.completed_at && ( • {formatDateOnly(lastPrint.completed_at, { month: 'short', day: 'numeric' })} )}
) : (Ready to print
)} )}
{/* Nozzle temp - combined for dual nozzle */}
);
})()}
{/* Controls - Fans + Print Buttons */}
{viewMode === 'expanded' && (() => {
// Determine print state for control buttons
const isRunning = status.state === 'RUNNING';
const isPaused = status.state === 'PAUSED' || status.state === 'PAUSE';
const isPrinting = isRunning || isPaused;
const isControlBusy = stopPrintMutation.isPending || pausePrintMutation.isPending || resumePrintMutation.isPending;
// Fan data
const partFan = status.cooling_fan_speed;
const auxFan = status.big_fan1_speed;
const chamberFan = status.big_fan2_speed;
return (
L / R
{Math.round(status.temperatures.nozzle || 0)}° / {Math.round(status.temperatures.nozzle_2 || 0)}°
) : ( <>Nozzle
{Math.round(status.temperatures.nozzle || 0)}°C
)}Bed
{Math.round(status.temperatures.bed || 0)}°C
Chamber
{Math.round(status.temperatures.chamber || 0)}°C
L
Nozzle
R
{/* Section Header */}
);
})()}
{/* AMS Units - 2-Column Grid Layout */}
{amsData && amsData.length > 0 && viewMode === 'expanded' && (() => {
// Separate regular AMS (4-tray) from HT AMS (1-tray)
const regularAms = amsData.filter(ams => ams.tray.length > 1);
const htAms = amsData.filter(ams => ams.tray.length === 1);
const isDualNozzle = printer.nozzle_count === 2 || status?.temperatures?.nozzle_2 !== undefined;
return (
Controls
{/* Left: Fan Status - always visible, dynamic coloring */}
{/* Part Cooling Fan */}
{/* Right: Print Control Buttons */}
0 ? 'bg-cyan-500/10' : 'bg-bambu-dark'}`}
title="Part Cooling Fan"
>
0 ? 'text-cyan-400' : 'text-bambu-gray/50'}`} />
0 ? 'text-cyan-400' : 'text-bambu-gray/50'}`}>
{partFan ?? 0}%
{/* Auxiliary Fan */}
0 ? 'bg-blue-500/10' : 'bg-bambu-dark'}`}
title="Auxiliary Fan"
>
0 ? 'text-blue-400' : 'text-bambu-gray/50'}`} />
0 ? 'text-blue-400' : 'text-bambu-gray/50'}`}>
{auxFan ?? 0}%
{/* Chamber Fan */}
0 ? 'bg-green-500/10' : 'bg-bambu-dark'}`}
title="Chamber Fan"
>
0 ? 'text-green-400' : 'text-bambu-gray/50'}`} />
0 ? 'text-green-400' : 'text-bambu-gray/50'}`}>
{chamberFan ?? 0}%
{/* Stop button */}
{/* Pause/Resume button */}
{/* Section Header */}
);
})()}
)}
{/* Smart Plug Controls - hidden in compact mode */}
{smartPlug && viewMode === 'expanded' && (
Filaments
{/* AMS Content */}
{/* Row 1-2: Regular AMS (4-tray) in 2-column grid */}
{regularAms.length > 0 && (
{regularAms.map((ams) => {
const mappedExtruderId = amsExtruderMap[String(ams.id)];
const normalizedId = ams.id >= 128 ? ams.id - 128 : ams.id;
const extruderId = mappedExtruderId !== undefined ? mappedExtruderId : normalizedId;
const isLeftNozzle = extruderId === 1;
const isRightNozzle = extruderId === 0;
return (
)}
{/* Row 3: HT AMS + External spools (same style as regular AMS, 4 across) */}
{(htAms.length > 0 || (status.vt_tray && status.vt_tray.tray_type)) && (
{/* Header: Label + Stats (no icon) */}
{/* Slots grid: 4 columns - always render 4 slots */}
);
})}
{getAmsLabel(ams.id, ams.tray.length)}
{isDualNozzle && (isLeftNozzle || isRightNozzle) && (
{(ams.humidity != null || ams.temp != null) && (
{ams.humidity != null && (
setAmsHistoryModal({
amsId: ams.id,
amsLabel: getAmsLabel(ams.id, ams.tray.length),
mode: 'humidity',
})}
compact
/>
)}
{ams.temp != null && (
setAmsHistoryModal({
amsId: ams.id,
amsLabel: getAmsLabel(ams.id, ams.tray.length),
mode: 'temperature',
})}
compact
/>
)}
)}
{[0, 1, 2, 3].map((slotIdx) => {
// Find tray data for this slot (may be undefined if data incomplete)
// Use array index if available, as tray.id may not always be set
const tray = ams.tray[slotIdx] || ams.tray.find(t => t.id === slotIdx);
const hasFillLevel = tray?.tray_type && tray.remain >= 0;
const isEmpty = !tray?.tray_type;
// Check if this is the currently loaded tray
// Global tray ID = ams.id * 4 + slot index (for standard AMS)
const globalTrayId = ams.id * 4 + slotIdx;
const isActive = effectiveTrayNow === globalTrayId;
// Get cloud preset info if available
const cloudInfo = tray?.tray_info_idx ? filamentInfo?.[tray.tray_info_idx] : null;
// Get saved slot preset mapping (for user-configured slots)
const slotPreset = slotPresets?.[globalTrayId];
// Build filament data for hover card
const filamentData = tray?.tray_type ? {
vendor: (isBambuLabSpool(tray) ? 'Bambu Lab' : 'Generic') as 'Bambu Lab' | 'Generic',
profile: cloudInfo?.name || slotPreset?.preset_name || tray.tray_sub_brands || tray.tray_type,
colorName: getBambuColorName(tray.tray_id_name) || hexToBasicColorName(tray.tray_color),
colorHex: tray.tray_color || null,
kFactor: formatKValue(tray.k),
fillLevel: hasFillLevel ? tray.remain : null,
trayUuid: tray.tray_uuid || null,
} : null;
// Check if this specific slot is being refreshed
const isRefreshing = refreshingSlot?.amsId === ams.id &&
refreshingSlot?.slotId === slotIdx;
// Slot visual content (goes inside hover card)
const slotVisual = (
);
// Wrapper with menu button, dropdown, and loading overlay (outside hover card)
return (
{tray?.tray_type || '—'}
{/* Fill bar */}
{hasFillLevel && tray ? (
) : tray?.tray_type ? (
) : null}
{/* Loading overlay during RFID re-read */}
{isRefreshing && (
{
setLinkSpoolModal({
trayUuid: uuid,
trayInfo: {
type: filamentData.profile,
color: filamentData.colorHex || '',
location: `${getAmsLabel(ams.id, ams.tray.length)} Slot ${slotIdx + 1}`,
},
});
} : undefined,
}}
configureSlot={{
enabled: true,
onConfigure: () => setConfigureSlotModal({
amsId: ams.id,
trayId: slotIdx,
trayCount: ams.tray.length,
trayType: tray?.tray_type || undefined,
trayColor: tray?.tray_color || undefined,
traySubBrands: tray?.tray_sub_brands || undefined,
trayInfoIdx: tray?.tray_info_idx || undefined,
}),
}}
>
{slotVisual}
) : (
setConfigureSlotModal({
amsId: ams.id,
trayId: slotIdx,
trayCount: ams.tray.length,
}),
}}
>
{slotVisual}
)}
);
})}
{/* HT AMS units - name/badge top, slot left, stats right */}
{htAms.map((ams) => {
const mappedExtruderId = amsExtruderMap[String(ams.id)];
const normalizedId = ams.id >= 128 ? ams.id - 128 : ams.id;
const extruderId = mappedExtruderId !== undefined ? mappedExtruderId : normalizedId;
const isLeftNozzle = extruderId === 1;
const isRightNozzle = extruderId === 0;
const tray = ams.tray[0];
const hasFillLevel = tray?.tray_type && tray.remain >= 0;
const isEmpty = !tray?.tray_type;
// Check if this is the currently loaded tray
// Global tray ID = ams.id * 4 + tray.id
const globalTrayId = ams.id * 4 + (tray?.id ?? 0);
const isActive = effectiveTrayNow === globalTrayId;
// Get cloud preset info if available
const cloudInfo = tray?.tray_info_idx ? filamentInfo?.[tray.tray_info_idx] : null;
// Get saved slot preset mapping (for user-configured slots)
const slotPreset = slotPresets?.[globalTrayId];
// Build filament data for hover card
const filamentData = tray?.tray_type ? {
vendor: (isBambuLabSpool(tray) ? 'Bambu Lab' : 'Generic') as 'Bambu Lab' | 'Generic',
profile: cloudInfo?.name || slotPreset?.preset_name || tray.tray_sub_brands || tray.tray_type,
colorName: getBambuColorName(tray.tray_id_name) || hexToBasicColorName(tray.tray_color),
colorHex: tray.tray_color || null,
kFactor: formatKValue(tray.k),
fillLevel: hasFillLevel ? tray.remain : null,
trayUuid: tray.tray_uuid || null,
} : null;
const htSlotId = tray?.id ?? 0;
// Check if this specific slot is being refreshed
const isHtRefreshing = refreshingSlot?.amsId === ams.id &&
refreshingSlot?.slotId === htSlotId;
// Slot visual content (goes inside hover card)
const slotVisual = (
);
return (
);
return (
)}
{tray?.tray_type || '—'}
{/* Fill bar */}
{hasFillLevel ? (
) : tray?.tray_type ? (
) : null}
{/* Row 1: Label + Nozzle */}
);
})}
{/* External spool - name top, slot below (no stats) */}
{status.vt_tray && status.vt_tray.tray_type && (() => {
const extTray = status.vt_tray;
// Check if external spool is active (tray_now = 254)
const isExtActive = effectiveTrayNow === 254;
// Get cloud preset info if available
const extCloudInfo = extTray.tray_info_idx ? filamentInfo?.[extTray.tray_info_idx] : null;
// Get saved slot preset mapping (external spool uses amsId=255, trayId=0)
const extSlotPreset = slotPresets?.[255 * 4 + 0];
// Build filament data for hover card
const extFilamentData = {
vendor: (isBambuLabSpool(extTray) ? 'Bambu Lab' : 'Generic') as 'Bambu Lab' | 'Generic',
profile: extCloudInfo?.name || extSlotPreset?.preset_name || extTray.tray_sub_brands || extTray.tray_type || 'Unknown',
colorName: getBambuColorName(extTray.tray_id_name) || hexToBasicColorName(extTray.tray_color),
colorHex: extTray.tray_color || null,
kFactor: formatKValue(extTray.k),
fillLevel: null, // External spool has unknown fill level
trayUuid: extTray.tray_uuid || null,
};
const extSlotContent = (
{getAmsLabel(ams.id, ams.tray.length)}
{isDualNozzle && (isLeftNozzle || isRightNozzle) && (
{/* Row 2: Slot (left) + Stats (right stacked) */}
{/* Slot wrapper with menu button, dropdown, and loading overlay */}
{/* Loading overlay during RFID re-read */}
{isHtRefreshing && (
{
setLinkSpoolModal({
trayUuid: uuid,
trayInfo: {
type: filamentData.profile,
color: filamentData.colorHex || '',
location: getAmsLabel(ams.id, ams.tray.length),
},
});
} : undefined,
}}
configureSlot={{
enabled: true,
onConfigure: () => setConfigureSlotModal({
amsId: ams.id,
trayId: htSlotId,
trayCount: ams.tray.length,
trayType: tray?.tray_type || undefined,
trayColor: tray?.tray_color || undefined,
traySubBrands: tray?.tray_sub_brands || undefined,
trayInfoIdx: tray?.tray_info_idx || undefined,
}),
}}
>
{slotVisual}
) : (
setConfigureSlotModal({
amsId: ams.id,
trayId: htSlotId,
trayCount: ams.tray.length,
}),
}}
>
{slotVisual}
)}
{/* Stats stacked vertically: Temp on top, Humidity below */}
{(ams.humidity != null || ams.temp != null) && (
{ams.temp != null && (
setAmsHistoryModal({
amsId: ams.id,
amsLabel: getAmsLabel(ams.id, ams.tray.length),
mode: 'temperature',
})}
compact
/>
)}
{ams.humidity != null && (
setAmsHistoryModal({
amsId: ams.id,
amsLabel: getAmsLabel(ams.id, ams.tray.length),
mode: 'humidity',
})}
compact
/>
)}
)}
{extTray.tray_type || 'Spool'}
{/* Unknown fill level - subtle bar */}
{/* Row 1: Label */}
{
setLinkSpoolModal({
trayUuid: uuid,
trayInfo: {
type: extFilamentData.profile,
color: extFilamentData.colorHex || '',
location: 'External Spool',
},
});
} : undefined,
}}
configureSlot={{
enabled: true,
onConfigure: () => setConfigureSlotModal({
amsId: 255, // External spool indicator
trayId: 0,
trayCount: 1, // External = single slot
trayType: extTray.tray_type || undefined,
trayColor: extTray.tray_color || undefined,
traySubBrands: extTray.tray_sub_brands || undefined,
trayInfoIdx: extTray.tray_info_idx || undefined,
}),
}}
>
{extSlotContent}
);
})()}
External
{/* Row 2: Slot (full width since no stats) */}
{/* Plug name and status */}
{smartPlug.auto_off_executed ? 'Auto-off done' : 'Auto-off'}
{printer.ip_address}
{printer.serial_number}
{/* Chamber Light Toggle */}
{/* Camera Button */}
{/* Split button: main part toggles detection, chevron opens modal */}
closePlateCheckModal()}>
)}
{/* 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 )}
{plateCheckResult.needs_calibration ? (
<>
) : (
<>
{plateCheckResult.debug_image_url && (
)}
)}
{/* ROI Editor */}
{!plateCheckResult.needs_calibration && (
)}
{editingRoi ? (
) : (
)}
Calibration Required
Please ensure the build plate is completely empty, 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.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 && (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() : ''}
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 ? (
<>
) : (
<>
)}
setShowSkipObjectsModal(false)}
onKeyDown={(e) => e.key === 'Escape' && setShowSkipObjectsModal(false)}
tabIndex={-1}
ref={(el) => el?.focus()}
>
{/* Backdrop */}
{/* Modal */}
)}
{/* HMS Error Modal */}
{showHMSModal && (
e.stopPropagation()}
>
{/* Header */}
No objects found
Objects are loaded when a print starts
{/* Info Banner */}
)}
Match IDs with your printer display
The printer screen shows object IDs on the build plate
{objectsData.skipped_count}/{objectsData.total} skipped
Wait for layer 2+ to skip objects (currently layer {status?.layer_num ?? 0})
{/* Left: Preview Image with object markers */}
{/* Right: Object List with prominent IDs */}
{status?.cover_url ? (
) : (
{objectsData.objects.map((obj, idx) => {
let x: number, y: number;
// Use position data if available, otherwise fall back to grid
if (obj.x != null && obj.y != null && objectsData.bbox_all) {
// bbox_all defines the visible area in the top_N.png image
// Format: [x_min, y_min, x_max, y_max] in mm
const [xMin, yMin, xMax, yMax] = objectsData.bbox_all;
const bboxWidth = xMax - xMin;
const bboxHeight = yMax - yMin;
// The image shows bbox_all area with some padding (~5-10%)
const padding = 8;
const contentArea = 100 - (padding * 2);
// Map object position to image percentage
x = padding + ((obj.x - xMin) / bboxWidth) * contentArea;
// Y axis: image Y increases downward, but 3D Y increases toward back
y = padding + ((yMax - obj.y) / bboxHeight) * contentArea;
// Clamp to valid range
x = Math.max(5, Math.min(95, x));
y = Math.max(5, Math.min(95, y));
} else if (obj.x != null && obj.y != null) {
// Fallback: use full build plate (256mm)
const buildPlate = 256;
x = (obj.x / buildPlate) * 100;
y = 100 - (obj.y / buildPlate) * 100;
x = Math.max(5, Math.min(95, x));
y = Math.max(5, Math.min(95, y));
} else {
// Fallback: arrange in a grid pattern over the build plate area
const cols = Math.ceil(Math.sqrt(objectsData.objects.length));
const row = Math.floor(idx / cols);
const col = idx % cols;
const rows = Math.ceil(objectsData.objects.length / cols);
x = 15 + (col * (70 / cols)) + (35 / cols);
y = 15 + (row * (70 / rows)) + (35 / rows);
}
return (
)}
{/* Object count overlay */}
{obj.id}
);
})}
{objectsData.objects.filter(o => !o.skipped).length} active
{objectsData.objects.map((obj) => (
{/* Large prominent ID badge */}
))}
{obj.id}
ID
{/* Object name and status */}
{obj.name}
{obj.skipped && (
Will be skipped
)}
{/* Skip button */}
{!obj.skipped ? (
) : (
Skipped
)}
setAmsSlotMenu(null)}
/>
)}
);
}
function AddPrinterModal({
onClose,
onAdd,
existingSerials,
}: {
onClose: () => void;
onAdd: (data: PrinterCreate) => void;
existingSerials: string[];
}) {
const [form, setForm] = useState({
name: '',
serial_number: '',
ip_address: '',
access_code: '',
model: '',
auto_archive: true,
});
// Discovery state
const [discovering, setDiscovering] = useState(false);
const [discovered, setDiscovered] = useState([]);
const [discoveryError, setDiscoveryError] = useState('');
const [hasScanned, setHasScanned] = useState(false);
const [isDocker, setIsDocker] = useState(false);
const [subnet, setSubnet] = useState('192.168.1.0/24');
const [scanProgress, setScanProgress] = useState({ scanned: 0, total: 0 });
// Fetch discovery info on mount
useEffect(() => {
discoveryApi.getInfo().then(info => {
setIsDocker(info.is_docker);
}).catch(() => {
// Ignore errors, assume not Docker
});
}, []);
// Filter out already-added printers
const newPrinters = discovered.filter(p => !existingSerials.includes(p.serial));
const startDiscovery = async () => {
setDiscoveryError('');
setDiscovered([]);
setDiscovering(true);
setHasScanned(false);
setScanProgress({ scanned: 0, total: 0 });
try {
if (isDocker) {
// Use subnet scanning for Docker
await discoveryApi.startSubnetScan(subnet);
// Poll for scan status and results
const pollInterval = setInterval(async () => {
try {
const status = await discoveryApi.getScanStatus();
setScanProgress({ scanned: status.scanned, total: status.total });
const printers = await discoveryApi.getDiscoveredPrinters();
setDiscovered(printers);
if (!status.running) {
clearInterval(pollInterval);
setDiscovering(false);
setHasScanned(true);
}
} catch (e) {
console.error('Failed to get scan status:', e);
}
}, 500);
} else {
// Use SSDP discovery for native installs
await discoveryApi.startDiscovery(10);
// Poll for discovered printers every second
const pollInterval = setInterval(async () => {
try {
const printers = await discoveryApi.getDiscoveredPrinters();
setDiscovered(printers);
} catch (e) {
console.error('Failed to get discovered printers:', e);
}
}, 1000);
// Stop after 10 seconds
setTimeout(async () => {
clearInterval(pollInterval);
try {
await discoveryApi.stopDiscovery();
} catch {
// Ignore stop errors
}
setDiscovering(false);
setHasScanned(true);
// Final fetch
try {
const printers = await discoveryApi.getDiscoveredPrinters();
setDiscovered(printers);
} catch (e) {
console.error('Failed to get final discovered printers:', e);
}
}, 10000);
}
} catch (e) {
console.error('Failed to start discovery:', e);
setDiscoveryError(e instanceof Error ? e.message : 'Failed to start discovery');
setDiscovering(false);
setHasScanned(true);
}
};
// Map SSDP model codes to dropdown values
const mapModelCode = (ssdpModel: string | null): string => {
if (!ssdpModel) return '';
const modelMap: Record = {
// H2 Series
'O1D': 'H2D',
'O1C': 'H2C',
'O1S': 'H2S',
// X1 Series
'BL-P001': 'X1C',
'BL-P002': 'X1',
'BL-P003': 'X1E',
// P Series
'C11': 'P1S',
'C12': 'P1P',
'C13': 'P2S',
// A1 Series
'N2S': 'A1',
'N1': 'A1 Mini',
// Direct matches
'X1C': 'X1C',
'X1': 'X1',
'X1E': 'X1E',
'P1S': 'P1S',
'P1P': 'P1P',
'P2S': 'P2S',
'A1': 'A1',
'A1 Mini': 'A1 Mini',
'H2D': 'H2D',
'H2C': 'H2C',
'H2S': 'H2S',
};
return modelMap[ssdpModel] || ssdpModel;
};
const selectPrinter = (printer: DiscoveredPrinter) => {
// Don't pre-fill serial if it's a placeholder (unknown-*) - user needs to enter actual serial
const serialNumber = printer.serial.startsWith('unknown-') ? '' : printer.serial;
setForm({
...form,
name: printer.name || '',
serial_number: serialNumber,
ip_address: printer.ip_address,
model: mapModelCode(printer.model),
});
// Clear discovery results after selection
setDiscovered([]);
};
// Cleanup discovery on unmount
useEffect(() => {
return () => {
discoveryApi.stopDiscovery().catch(() => {});
discoveryApi.stopSubnetScan().catch(() => {});
};
}, []);
// Close on Escape key
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === 'Escape') onClose();
};
window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown);
}, [onClose]);
return (
e.stopPropagation()}>
);
}
function FirmwareUpdateModal({
printer,
firmwareInfo,
onClose,
}: {
printer: Printer;
firmwareInfo: FirmwareUpdateInfo;
onClose: () => void;
}) {
const queryClient = useQueryClient();
const { showToast } = useToast();
const [uploadStatus, setUploadStatus] = useState(null);
const [isUploading, setIsUploading] = useState(false);
const [pollInterval, setPollInterval] = useState(null);
// Prepare check query
const { data: prepareInfo, isLoading: isPreparing } = useQuery({
queryKey: ['firmwarePrepare', printer.id],
queryFn: () => firmwareApi.prepareUpload(printer.id),
staleTime: 30000,
});
// Start upload mutation
const uploadMutation = useMutation({
mutationFn: () => firmwareApi.startUpload(printer.id),
onSuccess: () => {
setIsUploading(true);
// Start polling for status
const interval = setInterval(async () => {
try {
const status = await firmwareApi.getUploadStatus(printer.id);
setUploadStatus(status);
if (status.status === 'complete' || status.status === 'error') {
clearInterval(interval);
setPollInterval(null);
setIsUploading(false);
if (status.status === 'complete') {
showToast('Firmware uploaded! Trigger update from printer screen.', 'success');
queryClient.invalidateQueries({ queryKey: ['firmwareUpdate', printer.id] });
}
}
} catch {
// Ignore errors during polling
}
}, 2000);
setPollInterval(interval);
},
onError: (error: Error) => {
showToast(`Failed to start upload: ${error.message}`, 'error');
setIsUploading(false);
},
});
// Cleanup on unmount
useEffect(() => {
return () => {
if (pollInterval) clearInterval(pollInterval);
};
}, [pollInterval]);
const handleStartUpload = () => {
setUploadStatus(null);
uploadMutation.mutate();
};
return (
);
}
function EditPrinterModal({
printer,
onClose,
}: {
printer: Printer;
onClose: () => void;
}) {
const queryClient = useQueryClient();
const [form, setForm] = useState({
name: printer.name,
ip_address: printer.ip_address,
access_code: '',
model: printer.model || '',
location: printer.location || '',
auto_archive: printer.auto_archive,
});
const updateMutation = useMutation({
mutationFn: (data: Partial) => api.updatePrinter(printer.id, data),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['printers'] });
queryClient.invalidateQueries({ queryKey: ['printerStatus', printer.id] });
onClose();
},
});
// Close on Escape key
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === 'Escape') onClose();
};
window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown);
}, [onClose]);
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
const data: Partial = {
name: form.name,
ip_address: form.ip_address,
model: form.model || undefined,
location: form.location || undefined,
auto_archive: form.auto_archive,
};
// Only include access_code if it was changed
if (form.access_code) {
data.access_code = form.access_code;
}
updateMutation.mutate(data);
};
return (
e.stopPropagation()}>
);
}
// Component to check if a printer is offline (for power dropdown)
function usePrinterOfflineStatus(printerId: number) {
const { data: status } = useQuery({
queryKey: ['printerStatus', printerId],
queryFn: () => api.getPrinterStatus(printerId),
refetchInterval: 30000,
});
return !status?.connected;
}
// Power dropdown item for an offline printer
function PowerDropdownItem({
printer,
plug,
onPowerOn,
isPowering,
}: {
printer: Printer;
plug: { id: number; name: string };
onPowerOn: (plugId: number) => void;
isPowering: boolean;
}) {
const isOffline = usePrinterOfflineStatus(printer.id);
// Fetch plug status
const { data: plugStatus } = useQuery({
queryKey: ['smartPlugStatus', plug.id],
queryFn: () => api.getSmartPlugStatus(plug.id),
refetchInterval: 10000,
});
// Only show if printer is offline
if (!isOffline) {
return null;
}
return (
);
}
export function PrintersPage() {
const [showAddModal, setShowAddModal] = useState(false);
const [hideDisconnected, setHideDisconnected] = useState(() => {
return localStorage.getItem('hideDisconnectedPrinters') === 'true';
});
const [showPowerDropdown, setShowPowerDropdown] = useState(false);
const [poweringOn, setPoweringOn] = useState(null);
const [sortBy, setSortBy] = useState(() => {
return (localStorage.getItem('printerSortBy') as SortOption) || 'name';
});
const [sortAsc, setSortAsc] = useState(() => {
return localStorage.getItem('printerSortAsc') !== 'false';
});
// Card size: 1=small, 2=medium, 3=large, 4=xl
const [cardSize, setCardSize] = useState(() => {
const saved = localStorage.getItem('printerCardSize');
return saved ? parseInt(saved, 10) : 2; // Default to medium
});
// Derive viewMode from cardSize: S=compact, M/L/XL=expanded
const viewMode: ViewMode = cardSize === 1 ? 'compact' : 'expanded';
const queryClient = useQueryClient();
// Embedded camera viewer state - supports multiple simultaneous viewers
// Persisted to localStorage so cameras reopen after navigation
const [embeddedCameraPrinters, setEmbeddedCameraPrinters] = useState>(() => {
// Initialize from localStorage if camera_view_mode is embedded
const saved = localStorage.getItem('openEmbeddedCameras');
if (saved) {
try {
const cameras = JSON.parse(saved) as Array<{ id: number; name: string }>;
return new Map(cameras.map(c => [c.id, c]));
} catch {
return new Map();
}
}
return new Map();
});
// Persist open cameras to localStorage when they change
useEffect(() => {
const cameras = Array.from(embeddedCameraPrinters.values());
if (cameras.length > 0) {
localStorage.setItem('openEmbeddedCameras', JSON.stringify(cameras));
} else {
localStorage.removeItem('openEmbeddedCameras');
}
}, [embeddedCameraPrinters]);
const { data: printers, isLoading } = useQuery({
queryKey: ['printers'],
queryFn: api.getPrinters,
});
// Fetch app settings for AMS thresholds
const { data: settings } = useQuery({
queryKey: ['settings'],
queryFn: api.getSettings,
});
// Close embedded cameras if mode changes to 'window'
useEffect(() => {
if (settings?.camera_view_mode === 'window' && embeddedCameraPrinters.size > 0) {
setEmbeddedCameraPrinters(new Map());
}
}, [settings?.camera_view_mode, embeddedCameraPrinters.size]);
// Fetch all smart plugs to know which printers have them
const { data: smartPlugs } = useQuery({
queryKey: ['smart-plugs'],
queryFn: api.getSmartPlugs,
});
// Fetch maintenance overview for all printers to show badges
const { data: maintenanceOverview } = useQuery({
queryKey: ['maintenanceOverview'],
queryFn: api.getMaintenanceOverview,
staleTime: 60 * 1000, // 1 minute
});
// Fetch Spoolman status to enable link spool feature
const { data: spoolmanStatus } = useQuery({
queryKey: ['spoolman-status'],
queryFn: api.getSpoolmanStatus,
staleTime: 60 * 1000, // 1 minute
});
const spoolmanEnabled = spoolmanStatus?.enabled && spoolmanStatus?.connected;
// Fetch unlinked spools to know if link button should be enabled
const { data: unlinkedSpools } = useQuery({
queryKey: ['unlinked-spools'],
queryFn: api.getUnlinkedSpools,
enabled: !!spoolmanEnabled,
staleTime: 30 * 1000, // 30 seconds
});
const hasUnlinkedSpools = unlinkedSpools && unlinkedSpools.length > 0;
// Create a map of printer_id -> maintenance info for quick lookup
const maintenanceByPrinter = maintenanceOverview?.reduce(
(acc, overview) => {
acc[overview.printer_id] = {
due_count: overview.due_count,
warning_count: overview.warning_count,
total_print_hours: overview.total_print_hours,
};
return acc;
},
{} as Record
) || {};
// Create a map of printer_id -> smart plug
const smartPlugByPrinter = smartPlugs?.reduce(
(acc, plug) => {
if (plug.printer_id) {
acc[plug.printer_id] = plug;
}
return acc;
},
{} as Record
) || {};
const addMutation = useMutation({
mutationFn: api.createPrinter,
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['printers'] });
queryClient.invalidateQueries({ queryKey: ['maintenanceOverview'] });
setShowAddModal(false);
},
});
const powerOnMutation = useMutation({
mutationFn: (plugId: number) => api.controlSmartPlug(plugId, 'on'),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['smart-plugs'] });
setPoweringOn(null);
},
onError: () => {
setPoweringOn(null);
},
});
const toggleHideDisconnected = () => {
const newValue = !hideDisconnected;
setHideDisconnected(newValue);
localStorage.setItem('hideDisconnectedPrinters', String(newValue));
};
const handleSortChange = (newSort: SortOption) => {
setSortBy(newSort);
localStorage.setItem('printerSortBy', newSort);
};
const toggleSortDirection = () => {
const newAsc = !sortAsc;
setSortAsc(newAsc);
localStorage.setItem('printerSortAsc', String(newAsc));
};
// Grid classes based on card size (1=small, 2=medium, 3=large, 4=xl)
const getGridClasses = () => {
switch (cardSize) {
case 1: return 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5'; // S: many small cards
case 2: return 'grid-cols-1 md:grid-cols-2 xl:grid-cols-3'; // M: medium cards
case 3: return 'grid-cols-1 lg:grid-cols-2'; // L: large cards, 2 columns max
case 4: return 'grid-cols-1'; // XL: single column, full width
default: return 'grid-cols-1 md:grid-cols-2 xl:grid-cols-3';
}
};
const cardSizeLabels = ['S', 'M', 'L', 'XL'];
// Sort printers based on selected option
const sortedPrinters = useMemo(() => {
if (!printers) return [];
const sorted = [...printers];
switch (sortBy) {
case 'name':
sorted.sort((a, b) => a.name.localeCompare(b.name));
break;
case 'model':
sorted.sort((a, b) => (a.model || '').localeCompare(b.model || ''));
break;
case 'location':
// Sort by location, with ungrouped printers last
sorted.sort((a, b) => {
const locA = a.location || '';
const locB = b.location || '';
if (!locA && locB) return 1;
if (locA && !locB) return -1;
return locA.localeCompare(locB) || a.name.localeCompare(b.name);
});
break;
case 'status':
// Sort by status: printing > idle > offline
sorted.sort((a, b) => {
const statusA = queryClient.getQueryData<{ connected: boolean; state: string | null }>(['printerStatus', a.id]);
const statusB = queryClient.getQueryData<{ connected: boolean; state: string | null }>(['printerStatus', b.id]);
const getPriority = (s: typeof statusA) => {
if (!s?.connected) return 2; // offline
if (s.state === 'RUNNING') return 0; // printing
return 1; // idle
};
return getPriority(statusA) - getPriority(statusB);
});
break;
}
// Apply ascending/descending
if (!sortAsc) {
sorted.reverse();
}
return sorted;
}, [printers, sortBy, sortAsc, queryClient]);
// Group printers by location when sorted by location
const groupedPrinters = useMemo(() => {
if (sortBy !== 'location') return null;
const groups: Record = {};
sortedPrinters.forEach(printer => {
const location = printer.location || 'Ungrouped';
if (!groups[location]) groups[location] = [];
groups[location].push(printer);
});
return groups;
}, [sortBy, sortedPrinters]);
return (
) : groupedPrinters ? (
/* Grouped by location view */
setShowAddModal(false)}
onAdd={(data) => addMutation.mutate(data)}
existingSerials={printers?.map(p => p.serial_number) || []}
/>
)}
{/* Embedded Camera Viewers - multiple viewers can be open simultaneously */}
{Array.from(embeddedCameraPrinters.values()).map((camera, index) => (
setEmbeddedCameraPrinters(prev => {
const next = new Map(prev);
next.delete(camera.id);
return next;
})}
/>
))}
);
}
Add Printer
{/* Discovery Section */}
{isDocker && (
setSubnet(e.target.value)}
placeholder="192.168.1.0/24"
disabled={discovering}
/>
)}
{discoveryError && (
Docker detected. Enter your printer's subnet in CIDR notation.
Requires network_mode: host in docker-compose.yml.
{discoveryError}
)}
{newPrinters.length > 0 && (
{newPrinters.map((printer) => (
)}
{discovering && (
selectPrinter(printer)}
>
))}
{printer.name || printer.serial}
{mapModelCode(printer.model) || 'Unknown'} • {printer.ip_address} {printer.serial.startsWith('unknown-') && ( • Serial required )}
{isDocker ? 'Scanning subnet for Bambu printers...' : 'Scanning network...'}
)} {hasScanned && !discovering && discovered.length === 0 && (No printers found{isDocker ? ' in the specified subnet' : ' on the network'}.
)} {hasScanned && !discovering && discovered.length > 0 && newPrinters.length === 0 && (All discovered printers are already configured.
)}Firmware Update
{printer.name}
Current:
{firmwareInfo.current_version || 'Unknown'}
Latest:
{firmwareInfo.latest_version}
{firmwareInfo.release_notes && (
Release Notes
{firmwareInfo.release_notes}
{prepareInfo.can_proceed ? (
) : null}
{/* Upload Progress */}
{(isUploading || uploadStatus) && uploadStatus && (
{prepareInfo.errors.map((error, i) => (
)}
{uploadStatus.status}
{uploadStatus.progress}%
{uploadStatus.message}
{uploadStatus.error && ({uploadStatus.error}
)}Firmware uploaded to SD card!
To apply the update on your printer:
- On the printer's touchscreen, go to Settings
- Navigate to Firmware
- Select Update from SD card
- The update will take 10-20 minutes
{prepareInfo?.can_proceed && !isUploading && uploadStatus?.status !== 'complete' && (
)}
Edit Printer
{printer.name}
{plugStatus && (
{plugStatus.state || '?'}
)}
Printers
{/* Sort dropdown */}
{/* Card size selector */}
{isLoading ? (
{cardSizeLabels.map((label, index) => {
const size = index + 1;
const isSelected = cardSize === size;
return (
);
})}
{/* Power dropdown for offline printers with smart plugs */}
{hideDisconnected && Object.keys(smartPlugByPrinter).length > 0 && (
{showPowerDropdown && (
<>
{/* Backdrop to close dropdown */}
setShowPowerDropdown(false)}
/>
{
setPoweringOn(plugId);
powerOnMutation.mutate(plugId);
}}
isPowering={poweringOn === smartPlugByPrinter[printer.id]?.id}
/>
))}
{printers?.filter(p => smartPlugByPrinter[p.id]).length === 0 && (
)}
)}
Offline printers with smart plugs
{printers?.filter(p => smartPlugByPrinter[p.id]).map(printer => (
No printers with smart plugs
)}
Loading printers...
) : printers?.length === 0 ? (
No printers configured yet
{Object.entries(groupedPrinters).map(([location, locationPrinters]) => (
))}
) : (
/* Regular grid view */
{location} ({locationPrinters.length})
= 3 ? 'gap-6' : ''} ${getGridClasses()}`}>
{locationPrinters.map((printer) => (
setEmbeddedCameraPrinters(prev => new Map(prev).set(id, { id, name }))}
checkPrinterFirmware={settings?.check_printer_firmware !== false}
/>
))}
= 3 ? 'gap-6' : ''} ${getGridClasses()}`}>
{sortedPrinters.map((printer) => (
setEmbeddedCameraPrinters(prev => new Map(prev).set(id, { id, name }))}
checkPrinterFirmware={settings?.check_printer_firmware !== false}
/>
))}
)}
{showAddModal && (