feat: Implement vision menu, processed data panel, and UI improvements
- Add VisionMenu component with Camera (QRCode) and Barcode (Keyence) submenus - Remove old CameraPanel component and replace with dropdown menu structure - Add ProcessedDataPanel to display processed data in bottom dock (5 rows visible) - Create SystemStatusPanel component with horizontal button layout (START/STOP/RESET) - Create EventLogPanel component for better code organization - Add device initialization feature with 7-axis progress tracking - Add GetProcessedData and GetInitializeStatus backend methods - Update Header menu layout to vertical (icon on top, text below) for more space - Update HomePage layout with bottom-docked ProcessedDataPanel - Refactor HomePage to use new modular components 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Target, CheckCircle2, Loader2 } from 'lucide-react';
|
||||
import { Target, CheckCircle2, Loader2, AlertCircle } from 'lucide-react';
|
||||
import { TechButton } from './common/TechButton';
|
||||
import { comms } from '../communication';
|
||||
|
||||
interface InitializeModalProps {
|
||||
isOpen: boolean;
|
||||
@@ -17,74 +18,111 @@ interface AxisState {
|
||||
|
||||
export const InitializeModal: React.FC<InitializeModalProps> = ({ isOpen, onClose }) => {
|
||||
const [axes, setAxes] = useState<AxisState[]>([
|
||||
{ name: 'X-Axis', status: 'pending', progress: 0 },
|
||||
{ name: 'Y-Axis', status: 'pending', progress: 0 },
|
||||
{ name: 'Z-Axis', status: 'pending', progress: 0 },
|
||||
{ name: 'PZ_PICK', status: 'pending', progress: 0 },
|
||||
{ name: 'PL_UPDN', status: 'pending', progress: 0 },
|
||||
{ name: 'PR_UPDN', status: 'pending', progress: 0 },
|
||||
{ name: 'PL_MOVE', status: 'pending', progress: 0 },
|
||||
{ name: 'PR_MOVE', status: 'pending', progress: 0 },
|
||||
{ name: 'Z_THETA', status: 'pending', progress: 0 },
|
||||
{ name: 'PX_PICK', status: 'pending', progress: 0 },
|
||||
]);
|
||||
const [isInitializing, setIsInitializing] = useState(false);
|
||||
const [errorMessage, setErrorMessage] = useState<string | null>(null);
|
||||
const [statusInterval, setStatusInterval] = useState<NodeJS.Timeout | null>(null);
|
||||
|
||||
// Reset state when modal closes
|
||||
useEffect(() => {
|
||||
if (!isOpen) {
|
||||
setAxes([
|
||||
{ name: 'X-Axis', status: 'pending', progress: 0 },
|
||||
{ name: 'Y-Axis', status: 'pending', progress: 0 },
|
||||
{ name: 'Z-Axis', status: 'pending', progress: 0 },
|
||||
{ name: 'PZ_PICK', status: 'pending', progress: 0 },
|
||||
{ name: 'PL_UPDN', status: 'pending', progress: 0 },
|
||||
{ name: 'PR_UPDN', status: 'pending', progress: 0 },
|
||||
{ name: 'PL_MOVE', status: 'pending', progress: 0 },
|
||||
{ name: 'PR_MOVE', status: 'pending', progress: 0 },
|
||||
{ name: 'Z_THETA', status: 'pending', progress: 0 },
|
||||
{ name: 'PX_PICK', status: 'pending', progress: 0 },
|
||||
]);
|
||||
setIsInitializing(false);
|
||||
setErrorMessage(null);
|
||||
if (statusInterval) {
|
||||
clearInterval(statusInterval);
|
||||
setStatusInterval(null);
|
||||
}
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
const startInitialization = () => {
|
||||
setIsInitializing(true);
|
||||
// Cleanup interval on unmount
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (statusInterval) {
|
||||
clearInterval(statusInterval);
|
||||
}
|
||||
};
|
||||
}, [statusInterval]);
|
||||
|
||||
// Initialize each axis with 3 second delay between them
|
||||
axes.forEach((axis, index) => {
|
||||
const delay = index * 3000; // 0s, 3s, 6s
|
||||
const updateStatus = async () => {
|
||||
try {
|
||||
const statusJson = await comms.getInitializeStatus();
|
||||
const status = JSON.parse(statusJson);
|
||||
|
||||
// Start initialization after delay
|
||||
setTimeout(() => {
|
||||
setAxes(prev => {
|
||||
const next = [...prev];
|
||||
next[index] = { ...next[index], status: 'initializing', progress: 0 };
|
||||
return next;
|
||||
});
|
||||
if (!status.isInitializing) {
|
||||
// Initialization complete
|
||||
if (statusInterval) {
|
||||
clearInterval(statusInterval);
|
||||
setStatusInterval(null);
|
||||
}
|
||||
setIsInitializing(false);
|
||||
|
||||
// Progress animation (3 seconds)
|
||||
const startTime = Date.now();
|
||||
const duration = 3000;
|
||||
const interval = setInterval(() => {
|
||||
const elapsed = Date.now() - startTime;
|
||||
const progress = Math.min((elapsed / duration) * 100, 100);
|
||||
// Check if all axes are home set
|
||||
const allComplete = status.axes.every((axis: any) => axis.isHomeSet);
|
||||
if (allComplete) {
|
||||
// Auto close after 1 second
|
||||
setTimeout(() => {
|
||||
onClose();
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
|
||||
setAxes(prev => {
|
||||
const next = [...prev];
|
||||
next[index] = { ...next[index], progress };
|
||||
return next;
|
||||
});
|
||||
|
||||
if (progress >= 100) {
|
||||
clearInterval(interval);
|
||||
setAxes(prev => {
|
||||
const next = [...prev];
|
||||
next[index] = { ...next[index], status: 'completed', progress: 100 };
|
||||
return next;
|
||||
});
|
||||
|
||||
// Check if all axes are completed
|
||||
setAxes(prev => {
|
||||
if (prev.every(a => a.status === 'completed')) {
|
||||
// Auto close after 500ms
|
||||
setTimeout(() => {
|
||||
onClose();
|
||||
}, 500);
|
||||
}
|
||||
return prev;
|
||||
});
|
||||
// Update axis states
|
||||
setAxes(prev => {
|
||||
return prev.map(axis => {
|
||||
const backendAxis = status.axes.find((a: any) => a.name === axis.name);
|
||||
if (backendAxis) {
|
||||
const progress = backendAxis.progress;
|
||||
const isComplete = backendAxis.isHomeSet;
|
||||
return {
|
||||
...axis,
|
||||
progress,
|
||||
status: isComplete ? 'completed' : progress > 0 ? 'initializing' : 'pending'
|
||||
};
|
||||
}
|
||||
}, 50);
|
||||
}, delay);
|
||||
});
|
||||
return axis;
|
||||
});
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('[InitializeModal] Status update error:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const startInitialization = async () => {
|
||||
try {
|
||||
setErrorMessage(null);
|
||||
const result = await comms.initializeDevice();
|
||||
|
||||
if (!result.success) {
|
||||
setErrorMessage(result.message);
|
||||
return;
|
||||
}
|
||||
|
||||
setIsInitializing(true);
|
||||
|
||||
// Start polling for status updates every 200ms
|
||||
const interval = setInterval(updateStatus, 200);
|
||||
setStatusInterval(interval);
|
||||
} catch (error: any) {
|
||||
setErrorMessage(error.message || 'Failed to start initialization');
|
||||
console.error('[InitializeModal] Initialization error:', error);
|
||||
}
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
@@ -93,7 +131,7 @@ export const InitializeModal: React.FC<InitializeModalProps> = ({ isOpen, onClos
|
||||
|
||||
return (
|
||||
<div className="absolute inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
|
||||
<div className="w-[600px] glass-holo p-8 border border-neon-blue shadow-glow-blue relative flex flex-col">
|
||||
<div className="w-[700px] max-h-[90vh] overflow-y-auto glass-holo p-8 border border-neon-blue shadow-glow-blue relative flex flex-col">
|
||||
<button
|
||||
onClick={onClose}
|
||||
disabled={isInitializing}
|
||||
@@ -103,10 +141,22 @@ export const InitializeModal: React.FC<InitializeModalProps> = ({ isOpen, onClos
|
||||
</button>
|
||||
|
||||
<h2 className="text-2xl font-tech font-bold text-neon-blue mb-8 border-b border-white/10 pb-4 flex items-center gap-3">
|
||||
<Target className="animate-pulse" /> AXIS INITIALIZATION
|
||||
<Target className="animate-pulse" /> DEVICE INITIALIZATION
|
||||
</h2>
|
||||
|
||||
<div className="space-y-6 mb-8">
|
||||
{errorMessage && (
|
||||
<div className="mb-6 p-4 bg-red-500/10 border border-red-500 rounded flex items-start gap-3">
|
||||
<AlertCircle className="w-5 h-5 text-red-500 flex-shrink-0 mt-0.5" />
|
||||
<div className="flex-1">
|
||||
<div className="font-tech font-bold text-red-500 mb-1">INITIALIZATION ERROR</div>
|
||||
<pre className="text-sm text-slate-300 whitespace-pre-wrap font-mono">
|
||||
{errorMessage}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-4 mb-8">
|
||||
{axes.map((axis, index) => (
|
||||
<div key={axis.name} className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
@@ -118,7 +168,7 @@ export const InitializeModal: React.FC<InitializeModalProps> = ({ isOpen, onClos
|
||||
) : (
|
||||
<div className="w-5 h-5 border-2 border-slate-600 rounded-full" />
|
||||
)}
|
||||
<span className="font-tech font-bold text-lg text-white tracking-wider">
|
||||
<span className="font-tech font-bold text-base text-white tracking-wider">
|
||||
{axis.name}
|
||||
</span>
|
||||
</div>
|
||||
@@ -140,7 +190,7 @@ export const InitializeModal: React.FC<InitializeModalProps> = ({ isOpen, onClos
|
||||
</div>
|
||||
|
||||
{/* Progress Bar */}
|
||||
<div className="h-3 bg-black/50 border border-slate-700 overflow-hidden">
|
||||
<div className="h-2.5 bg-black/50 border border-slate-700 overflow-hidden">
|
||||
<div
|
||||
className={`h-full transition-all duration-100 ${
|
||||
axis.status === 'completed'
|
||||
|
||||
Reference in New Issue
Block a user