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:
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>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user