feat: Add vision controls, function menu, and custom alert dialogs
- Add Vision menu with Camera (QRCode) and Barcode (Keyence) controls - Add Function menu with Manage, Log Viewer, and folder navigation - Add quick action buttons (Manual, Light, Print, Cancel) to header - Replace browser alert() with custom AlertDialog component - Add MachineBridge methods for vision, lighting, folders, and manual operations - Add WebSocketServer handlers for all new commands - Add communication layer methods for frontend-backend integration 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -1,7 +1,10 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useNavigate, useLocation } from 'react-router-dom';
|
||||
import { Activity, Settings, Move, Camera, Layers, Cpu, Target } from 'lucide-react';
|
||||
import { Activity, Settings, Move, Camera, Layers, Cpu, Target, Lightbulb, Printer, XCircle, Package, BookOpen } from 'lucide-react';
|
||||
import { VisionMenu } from '../VisionMenu';
|
||||
import { FunctionMenu } from '../FunctionMenu';
|
||||
import { comms } from '../../communication';
|
||||
import { useAlert } from '../../contexts/AlertContext';
|
||||
|
||||
interface HeaderProps {
|
||||
currentTime: Date;
|
||||
@@ -14,13 +17,40 @@ export const Header: React.FC<HeaderProps> = ({ currentTime, onTabChange, active
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const [showVisionMenu, setShowVisionMenu] = useState(false);
|
||||
const [showFunctionMenu, setShowFunctionMenu] = useState(false);
|
||||
const { showAlert } = useAlert();
|
||||
|
||||
const isWebView = typeof window !== 'undefined' && !!window.chrome?.webview;
|
||||
const isIOPage = location.pathname === '/io-monitor';
|
||||
|
||||
const handleCommand = async (commandFn: () => Promise<{ success: boolean; message: string }>, actionName: string) => {
|
||||
try {
|
||||
const result = await commandFn();
|
||||
if (result.success) {
|
||||
console.log(`[Header] ${actionName}: ${result.message}`);
|
||||
// Show success message if needed
|
||||
} else {
|
||||
console.error(`[Header] ${actionName} failed: ${result.message}`);
|
||||
showAlert({
|
||||
type: 'error',
|
||||
title: `${actionName} Failed`,
|
||||
message: result.message
|
||||
});
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error(`[Header] ${actionName} error:`, error);
|
||||
showAlert({
|
||||
type: 'error',
|
||||
title: `${actionName} Error`,
|
||||
message: error.message || 'Unknown error'
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<VisionMenu isOpen={showVisionMenu} onClose={() => setShowVisionMenu(false)} />
|
||||
<FunctionMenu isOpen={showFunctionMenu} onClose={() => setShowFunctionMenu(false)} />
|
||||
<header className="absolute top-0 left-0 right-0 h-20 px-6 flex items-center justify-between z-40 bg-gradient-to-b from-black/80 to-transparent pointer-events-none">
|
||||
<div
|
||||
className="flex items-center gap-4 pointer-events-auto cursor-pointer group"
|
||||
@@ -48,15 +78,50 @@ export const Header: React.FC<HeaderProps> = ({ currentTime, onTabChange, active
|
||||
|
||||
{/* Top Navigation */}
|
||||
<div className="flex items-center gap-2 pointer-events-auto">
|
||||
{/* IO Tab Switcher (only on IO page) */}
|
||||
|
||||
{/* Quick Action Buttons */}
|
||||
<div className="bg-black/40 backdrop-blur-md p-1 rounded-2xl border border-white/10 flex gap-1 mr-2">
|
||||
<button
|
||||
onClick={() => handleCommand(() => comms.openManual(), 'Manual')}
|
||||
className="flex flex-col items-center justify-center gap-1 px-3 py-2 rounded-xl font-tech font-bold text-[10px] transition-all border border-transparent min-w-[70px] text-slate-400 hover:text-blue-400 hover:bg-white/5"
|
||||
title="Open Manual"
|
||||
>
|
||||
<BookOpen className="w-5 h-5" />
|
||||
<span className="leading-tight">MANUAL</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleCommand(() => comms.toggleLight(), 'Toggle Light')}
|
||||
className="flex flex-col items-center justify-center gap-1 px-3 py-2 rounded-xl font-tech font-bold text-[10px] transition-all border border-transparent min-w-[70px] text-slate-400 hover:text-amber-400 hover:bg-white/5"
|
||||
title="Toggle Room Light"
|
||||
>
|
||||
<Lightbulb className="w-5 h-5" />
|
||||
<span className="leading-tight">LIGHT</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleCommand(() => comms.openManualPrint(), 'Manual Print')}
|
||||
className="flex flex-col items-center justify-center gap-1 px-3 py-2 rounded-xl font-tech font-bold text-[10px] transition-all border border-transparent min-w-[70px] text-slate-400 hover:text-cyan-400 hover:bg-white/5"
|
||||
title="Open Manual Print"
|
||||
>
|
||||
<Printer className="w-5 h-5" />
|
||||
<span className="leading-tight">PRINT</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleCommand(() => comms.cancelJob(), 'Cancel Job')}
|
||||
className="flex flex-col items-center justify-center gap-1 px-3 py-2 rounded-xl font-tech font-bold text-[10px] transition-all border border-transparent min-w-[70px] text-slate-400 hover:text-red-400 hover:bg-white/5"
|
||||
title="Cancel Current Job"
|
||||
>
|
||||
<XCircle className="w-5 h-5" />
|
||||
<span className="leading-tight">CANCEL</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Main Navigation */}
|
||||
<div className="bg-black/40 backdrop-blur-md p-1 rounded-2xl border border-white/10 flex gap-1">
|
||||
{[
|
||||
{ id: 'recipe', icon: Layers, label: 'RECIPE', path: '/' },
|
||||
{ id: 'io', icon: Activity, label: 'I/O MONITOR', path: '/io-monitor' },
|
||||
{ id: 'motion', icon: Move, label: 'MOTION', path: '/' },
|
||||
{ id: 'camera', icon: Camera, label: 'VISION', path: '/' },
|
||||
{ id: 'function', icon: Package, label: 'FUNCTION', path: '/' },
|
||||
{ id: 'setting', icon: Settings, label: 'CONFIG', path: '/' },
|
||||
{ id: 'initialize', icon: Target, label: 'INITIALIZE', path: '/' }
|
||||
].map(item => {
|
||||
@@ -72,20 +137,35 @@ export const Header: React.FC<HeaderProps> = ({ currentTime, onTabChange, active
|
||||
navigate('/io-monitor');
|
||||
onTabChange(null);
|
||||
setShowVisionMenu(false);
|
||||
setShowFunctionMenu(false);
|
||||
} else if (item.id === 'camera') {
|
||||
setShowVisionMenu(!showVisionMenu);
|
||||
onTabChange(null);
|
||||
// Camera button does nothing on click
|
||||
} else if (item.id === 'function') {
|
||||
// Function button does nothing on click
|
||||
} else {
|
||||
if (location.pathname !== '/') {
|
||||
navigate('/');
|
||||
}
|
||||
setShowVisionMenu(false);
|
||||
setShowFunctionMenu(false);
|
||||
onTabChange(activeTab === item.id ? null : item.id as any);
|
||||
}
|
||||
}}
|
||||
onMouseEnter={() => {
|
||||
if (item.id === 'camera') {
|
||||
setShowVisionMenu(true);
|
||||
setShowFunctionMenu(false);
|
||||
} else if (item.id === 'function') {
|
||||
setShowFunctionMenu(true);
|
||||
setShowVisionMenu(false);
|
||||
} else {
|
||||
setShowVisionMenu(false);
|
||||
setShowFunctionMenu(false);
|
||||
}
|
||||
}}
|
||||
className={`
|
||||
flex flex-col items-center justify-center gap-1 px-3 py-2 rounded-xl font-tech font-bold text-[10px] transition-all border border-transparent min-w-[70px]
|
||||
${isActive
|
||||
${isActive || (item.id === 'camera' && showVisionMenu) || (item.id === 'function' && showFunctionMenu)
|
||||
? 'bg-neon-blue/10 text-neon-blue border-neon-blue shadow-glow-blue'
|
||||
: 'text-slate-400 hover:text-white hover:bg-white/5'}
|
||||
`}
|
||||
|
||||
Reference in New Issue
Block a user