feat: Add VisionData panel, HW error display, and reel handler 3D model
- Add hardware error banner with priority system (motion > i/o > emergency) - Add DIO status to HW status display with backend integration - Remove status text from HW status, keep only LED indicators - Add VisionDataPanel showing real-time recognized data for L/C/R ports - Add GetVisionData API in MachineBridge with batch field support - Add BroadcastVisionData function (250ms interval) - Replace 3D model with detailed reel handler equipment - Use OrthographicCamera with front view for distortion-free display - Fix ProcessedDataPanel layout to avoid right sidebar overlap - Show log viewer filename in error message when file not found 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
File diff suppressed because it is too large
Load Diff
156
FrontEnd/components/VisionDataPanel.tsx
Normal file
156
FrontEnd/components/VisionDataPanel.tsx
Normal file
@@ -0,0 +1,156 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Eye, CheckCircle, XCircle } from 'lucide-react';
|
||||
import { comms } from '../communication';
|
||||
import { PanelHeader } from './common/PanelHeader';
|
||||
import { CyberPanel } from './common/CyberPanel';
|
||||
|
||||
interface PortData {
|
||||
cartSize: string;
|
||||
enabled?: boolean;
|
||||
confirm?: boolean;
|
||||
rid: string;
|
||||
rid_trust?: boolean;
|
||||
rid_new?: boolean;
|
||||
sid: string;
|
||||
sid0?: string;
|
||||
sid_trust?: boolean;
|
||||
qty: string;
|
||||
qty_trust?: boolean;
|
||||
qty_rq?: boolean;
|
||||
vname: string;
|
||||
vname_trust?: boolean;
|
||||
vlot: string;
|
||||
vlot_trust?: boolean;
|
||||
mfgdate: string;
|
||||
mfgdate_trust?: boolean;
|
||||
partno: string;
|
||||
partno_trust?: boolean;
|
||||
reelSize: string;
|
||||
rid2?: string;
|
||||
sid2?: string;
|
||||
qty2?: string;
|
||||
vname2?: string;
|
||||
vlot2?: string;
|
||||
mfgdate2?: string;
|
||||
partno2?: string;
|
||||
batch?: string;
|
||||
qtymax?: string;
|
||||
barcodeCount?: number;
|
||||
regexCount?: number;
|
||||
}
|
||||
|
||||
interface VisionData {
|
||||
left: PortData;
|
||||
center: PortData;
|
||||
right: PortData;
|
||||
}
|
||||
|
||||
const fieldLabels = ['RID', 'SID', 'QTY', 'VNAME', 'VLOT', 'MFG', 'PART', 'SIZE', 'BATCH'];
|
||||
|
||||
export const VisionDataPanel: React.FC = () => {
|
||||
const [data, setData] = useState<VisionData | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const unsubscribe = comms.subscribe((msg: any) => {
|
||||
if (msg?.type === 'VISION_DATA_UPDATE' && msg.data) {
|
||||
setData(msg.data);
|
||||
}
|
||||
});
|
||||
|
||||
return () => {
|
||||
unsubscribe();
|
||||
};
|
||||
}, []);
|
||||
|
||||
const getTrustColor = (trust?: boolean) => {
|
||||
if (trust === undefined) return 'text-slate-400';
|
||||
return trust ? 'text-lime-400' : 'text-slate-400';
|
||||
};
|
||||
|
||||
const getCompareColor = (val1: string, val2?: string) => {
|
||||
if (!val2 || val2 === '') return '';
|
||||
return val1 !== val2 ? 'text-red-400' : '';
|
||||
};
|
||||
|
||||
const renderPortColumn = (port: PortData | undefined, title: string, isCenter: boolean = false) => {
|
||||
if (!port) return null;
|
||||
|
||||
const values = [
|
||||
{ val: port.rid, val2: port.rid2, trust: port.rid_trust },
|
||||
{ val: port.sid, val2: port.sid2, trust: port.sid_trust },
|
||||
{ val: port.qty, val2: port.qty2, trust: port.qty_trust, rq: port.qty_rq },
|
||||
{ val: port.vname, val2: port.vname2, trust: port.vname_trust },
|
||||
{ val: port.vlot, val2: port.vlot2, trust: port.vlot_trust },
|
||||
{ val: port.mfgdate, val2: port.mfgdate2, trust: port.mfgdate_trust },
|
||||
{ val: port.partno, val2: port.partno2, trust: port.partno_trust },
|
||||
{ val: port.reelSize === 'None' ? '--' : port.reelSize, val2: undefined, trust: undefined },
|
||||
{ val: port.batch || '-', val2: undefined, trust: undefined },
|
||||
];
|
||||
|
||||
const headerBg = port.enabled === false ? 'bg-orange-600/80' : (port.confirm ? 'bg-lime-600/80' : 'bg-slate-700/80');
|
||||
const headerText = port.enabled === false ? 'DISABLE' : port.cartSize;
|
||||
|
||||
return (
|
||||
<div className="flex-1 min-w-0 flex flex-col h-full">
|
||||
{/* Header */}
|
||||
<div className={`${headerBg} px-3 py-2 text-center font-bold text-sm border-b border-slate-600`}>
|
||||
<span className="text-white text-base">{headerText}</span>
|
||||
<span className="text-slate-300 ml-2 text-xs">({title})</span>
|
||||
</div>
|
||||
{/* Values */}
|
||||
<div className="flex-1 flex flex-col divide-y divide-slate-700/50">
|
||||
{values.map((item, idx) => (
|
||||
<div key={idx} className="flex items-center px-2 py-1.5 text-sm flex-1">
|
||||
<span className="w-14 text-slate-500 font-bold shrink-0">{fieldLabels[idx]}</span>
|
||||
<span className={`flex-1 font-mono truncate ${isCenter ? getTrustColor(item.trust) : getCompareColor(item.val, item.val2)}`}>
|
||||
{item.rq ? `RQ:${item.val}` : item.val || '-'}
|
||||
</span>
|
||||
{isCenter && item.trust !== undefined && (
|
||||
item.trust ?
|
||||
<CheckCircle className="w-4 h-4 text-lime-400 shrink-0" /> :
|
||||
<XCircle className="w-4 h-4 text-slate-500 shrink-0" />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
{/* Center-specific fields */}
|
||||
{isCenter && (
|
||||
<>
|
||||
<div className="flex items-center px-2 py-1.5 text-sm flex-1">
|
||||
<span className="w-14 text-slate-500 font-bold shrink-0">MAX</span>
|
||||
<span className="flex-1 font-mono text-cyan-400">{port.qtymax || '-'}</span>
|
||||
</div>
|
||||
<div className="flex items-center px-2 py-1.5 text-sm flex-1">
|
||||
<span className="w-14 text-slate-500 font-bold shrink-0">BCD</span>
|
||||
<span className="flex-1 font-mono text-yellow-400">{port.barcodeCount ?? 0}</span>
|
||||
</div>
|
||||
<div className="flex items-center px-2 py-1.5 text-sm flex-1">
|
||||
<span className="w-14 text-slate-500 font-bold shrink-0">REGEX</span>
|
||||
<span className="flex-1 font-mono text-yellow-400">{port.regexCount ?? 0}</span>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<CyberPanel className="flex flex-col h-full">
|
||||
<PanelHeader icon={Eye} title="RECOGNIZED DATA" className="mb-1" />
|
||||
|
||||
<div className="flex-1 overflow-hidden">
|
||||
{!data ? (
|
||||
<div className="flex items-center justify-center h-full text-slate-500 text-xs">
|
||||
Waiting for data...
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex gap-1 h-full">
|
||||
{renderPortColumn(data.left, 'LEFT')}
|
||||
{renderPortColumn(data.center, 'CENTER', true)}
|
||||
{renderPortColumn(data.right, 'RIGHT')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CyberPanel>
|
||||
);
|
||||
};
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import React, { useState, useEffect, useMemo } from 'react';
|
||||
import { RobotTarget } from '../../types';
|
||||
import { comms } from '../../communication';
|
||||
|
||||
@@ -10,6 +10,13 @@ interface HWItem {
|
||||
status: number;
|
||||
}
|
||||
|
||||
// 오류 우선순위: motion(1) > i/o(2) > emergency(3) > general(4)
|
||||
interface HardwareError {
|
||||
type: 'motion' | 'io' | 'emergency' | 'general';
|
||||
priority: number;
|
||||
message: string;
|
||||
}
|
||||
|
||||
interface FooterProps {
|
||||
isHostConnected: boolean;
|
||||
robotTarget: RobotTarget;
|
||||
@@ -45,31 +52,72 @@ export const Footer: React.FC<FooterProps> = ({ isHostConnected, robotTarget })
|
||||
};
|
||||
}, []);
|
||||
|
||||
// 하드웨어 오류 감지 및 우선순위 기반 표시
|
||||
// 우선순위: motion(1) > i/o(2) > emergency(3) > general(4)
|
||||
const hardwareError = useMemo((): HardwareError | null => {
|
||||
const errors: HardwareError[] = [];
|
||||
|
||||
for (const hw of hwStatus) {
|
||||
if (hw.status === 3) { // OFF 상태 (오류)
|
||||
if (hw.name === 'MOT') {
|
||||
errors.push({ type: 'motion', priority: 1, message: 'MOTION HARDWARE ERROR' });
|
||||
} else if (hw.name === 'DIO' || hw.name === 'I/O') {
|
||||
errors.push({ type: 'io', priority: 2, message: 'I/O HARDWARE ERROR' });
|
||||
} else if (hw.name === 'EMG') {
|
||||
errors.push({ type: 'emergency', priority: 3, message: 'EMERGENCY ERROR' });
|
||||
}
|
||||
// 다른 하드웨어는 일반 오류로 표시하지 않음 (BCD, VIS, PRT 등은 일반적인 연결 상태)
|
||||
}
|
||||
}
|
||||
|
||||
// 우선순위가 가장 높은(숫자가 낮은) 오류 반환
|
||||
if (errors.length === 0) return null;
|
||||
return errors.sort((a, b) => a.priority - b.priority)[0];
|
||||
}, [hwStatus]);
|
||||
|
||||
return (
|
||||
<footer className="absolute bottom-0 left-0 right-0 h-10 bg-black/80 border-t border-neon-blue/30 flex items-center px-6 justify-between z-40 backdrop-blur text-xs font-mono text-slate-400">
|
||||
<div className="flex gap-4">
|
||||
{/* H/W 상태 표시 (윈폼 HWState와 동일) */}
|
||||
{hwStatus.map((hw) => {
|
||||
const colors = getStatusColor(hw.status);
|
||||
return (
|
||||
<div key={hw.name} className="flex items-center gap-1.5" title={`${hw.name}: ${hw.title}`}>
|
||||
<div className={`w-2 h-2 rounded-full transition-all ${colors.bg} ${colors.shadow}`}></div>
|
||||
<span className={`font-bold ${colors.text}`}>{hw.name}</span>
|
||||
<span className="text-[10px] text-slate-500">{hw.title}</span>
|
||||
<>
|
||||
{/* 하드웨어 오류 표시 배너 - 화면 중앙 상단에 크게 표시 */}
|
||||
{hardwareError && (
|
||||
<div className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[200] pointer-events-none">
|
||||
<div className="bg-red-900/95 border-4 border-red-500 rounded-lg px-12 py-8 shadow-[0_0_50px_rgba(239,68,68,0.5)] animate-pulse">
|
||||
<div className="text-center">
|
||||
<div className="text-red-400 text-6xl mb-4">⚠</div>
|
||||
<div className="text-red-100 text-3xl font-bold font-tech tracking-wider">
|
||||
{hardwareError.message}
|
||||
</div>
|
||||
<div className="text-red-300 text-sm mt-3 font-mono">
|
||||
CHECK HARDWARE CONNECTION
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{/* HOST 연결 상태 */}
|
||||
<div className="flex items-center gap-1.5 ml-2 pl-2 border-l border-slate-700">
|
||||
<div className={`w-2 h-2 rounded-full transition-all ${isHostConnected ? 'bg-neon-green shadow-[0_0_5px_#0aff00]' : 'bg-red-500 shadow-[0_0_5px_#ff0000] animate-pulse'}`}></div>
|
||||
<span className={`font-bold ${isHostConnected ? 'text-green-400' : 'text-red-400'}`}>HOST</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-8 text-neon-blue">
|
||||
<span>POS.X: {robotTarget.x.toFixed(3)}</span>
|
||||
<span>POS.Y: {robotTarget.y.toFixed(3)}</span>
|
||||
<span>POS.Z: {robotTarget.z.toFixed(3)}</span>
|
||||
</div>
|
||||
</footer>
|
||||
)}
|
||||
|
||||
<footer className="absolute bottom-0 left-0 right-0 h-10 bg-black/80 border-t border-neon-blue/30 flex items-center px-6 justify-between z-40 backdrop-blur text-xs font-mono text-slate-400">
|
||||
<div className="flex gap-4">
|
||||
{/* H/W 상태 표시 (윈폼 HWState와 동일) */}
|
||||
{hwStatus.map((hw) => {
|
||||
const colors = getStatusColor(hw.status);
|
||||
return (
|
||||
<div key={hw.name} className="flex items-center gap-1" title={`${hw.name}: ${hw.title}`}>
|
||||
<div className={`w-2 h-2 rounded-full transition-all ${colors.bg} ${colors.shadow}`}></div>
|
||||
<span className={`text-[11px] font-bold ${colors.text}`}>{hw.name}</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{/* HOST 연결 상태 */}
|
||||
<div className="flex items-center gap-1.5 ml-2 pl-2 border-l border-slate-700">
|
||||
<div className={`w-2 h-2 rounded-full transition-all ${isHostConnected ? 'bg-neon-green shadow-[0_0_5px_#0aff00]' : 'bg-red-500 shadow-[0_0_5px_#ff0000] animate-pulse'}`}></div>
|
||||
<span className={`font-bold ${isHostConnected ? 'text-green-400' : 'text-red-400'}`}>HOST</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-8 text-neon-blue">
|
||||
<span>POS.X: {robotTarget.x.toFixed(3)}</span>
|
||||
<span>POS.Y: {robotTarget.y.toFixed(3)}</span>
|
||||
<span>POS.Z: {robotTarget.z.toFixed(3)}</span>
|
||||
</div>
|
||||
</footer>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user