Test/WebUITest-RealProjecT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add VisionData panel, HW error display, and reel handler 3D model

Browse Source 
- 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:
tindevil
2025-11-27 23:22:56 +09:00
parent 3bd35ad852
commit 86fe466b55
7 changed files with 843 additions and 569 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
FrontEnd/components/layout/Footer.tsx
View File

@@ -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>
</>
);
};