feat: Implement recipe selection with backend integration
Backend changes (C#): - Add SelectRecipe method to MachineBridge for recipe selection - Add currentRecipeId tracking in MainForm - Implement SELECT_RECIPE handler in WebSocketServer Frontend changes (React/TypeScript): - Add selectRecipe method to communication layer - Update handleSelectRecipe to call backend and handle response - Recipe selection updates ModelInfoPanel automatically - Add error handling and logging for recipe operations Layout improvements: - Add Layout component with persistent Header and Footer - Create separate IOMonitorPage for full-screen I/O monitoring - Add dynamic IO tab switcher in Header (Inputs/Outputs) - Ensure consistent UI across all pages 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
174
frontend/pages/HomePage.tsx
Normal file
174
frontend/pages/HomePage.tsx
Normal file
@@ -0,0 +1,174 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Play, Square, RotateCw, AlertTriangle, Siren, Terminal } from 'lucide-react';
|
||||
import { Machine3D } from '../components/Machine3D';
|
||||
import { SettingsModal } from '../components/SettingsModal';
|
||||
import { RecipePanel } from '../components/RecipePanel';
|
||||
import { MotionPanel } from '../components/MotionPanel';
|
||||
import { CameraPanel } from '../components/CameraPanel';
|
||||
import { CyberPanel } from '../components/common/CyberPanel';
|
||||
import { TechButton } from '../components/common/TechButton';
|
||||
import { ModelInfoPanel } from '../components/ModelInfoPanel';
|
||||
import { SystemState, Recipe, IOPoint, LogEntry, RobotTarget, ConfigItem } from '../types';
|
||||
|
||||
interface HomePageProps {
|
||||
systemState: SystemState;
|
||||
currentRecipe: Recipe;
|
||||
recipes: Recipe[];
|
||||
robotTarget: RobotTarget;
|
||||
logs: LogEntry[];
|
||||
ioPoints: IOPoint[];
|
||||
config: ConfigItem[] | null;
|
||||
isConfigRefreshing: boolean;
|
||||
doorStates: { front: boolean; right: boolean; left: boolean; back: boolean };
|
||||
isLowPressure: boolean;
|
||||
isEmergencyStop: boolean;
|
||||
activeTab: 'recipe' | 'motion' | 'camera' | 'setting' | null;
|
||||
onSelectRecipe: (r: Recipe) => void;
|
||||
onMove: (axis: 'X' | 'Y' | 'Z', val: number) => void;
|
||||
onControl: (action: 'start' | 'stop' | 'reset') => void;
|
||||
onSaveConfig: (config: ConfigItem[]) => void;
|
||||
onFetchConfig: () => void;
|
||||
onCloseTab: () => void;
|
||||
videoRef: React.RefObject<HTMLVideoElement>;
|
||||
}
|
||||
|
||||
export const HomePage: React.FC<HomePageProps> = ({
|
||||
systemState,
|
||||
currentRecipe,
|
||||
recipes,
|
||||
robotTarget,
|
||||
logs,
|
||||
ioPoints,
|
||||
config,
|
||||
isConfigRefreshing,
|
||||
doorStates,
|
||||
isLowPressure,
|
||||
isEmergencyStop,
|
||||
activeTab,
|
||||
onSelectRecipe,
|
||||
onMove,
|
||||
onControl,
|
||||
onSaveConfig,
|
||||
onFetchConfig,
|
||||
onCloseTab,
|
||||
videoRef
|
||||
}) => {
|
||||
useEffect(() => {
|
||||
if (activeTab === 'camera' && navigator.mediaDevices?.getUserMedia) {
|
||||
navigator.mediaDevices.getUserMedia({ video: true }).then(s => { if (videoRef.current) videoRef.current.srcObject = s });
|
||||
}
|
||||
}, [activeTab, videoRef]);
|
||||
|
||||
useEffect(() => {
|
||||
if (activeTab === 'setting') {
|
||||
onFetchConfig();
|
||||
}
|
||||
}, [activeTab, onFetchConfig]);
|
||||
|
||||
return (
|
||||
<main className="relative w-full h-full flex gap-6 px-6">
|
||||
{/* 3D Canvas (Background Layer) */}
|
||||
<div className="absolute inset-0 z-0">
|
||||
<Machine3D target={robotTarget} ioState={ioPoints} doorStates={doorStates} />
|
||||
</div>
|
||||
|
||||
{/* Center Alarms */}
|
||||
<div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-50 pointer-events-none flex flex-col items-center gap-4">
|
||||
{isEmergencyStop && (
|
||||
<div className="bg-red-600/90 text-white p-8 border-4 border-red-500 shadow-glow-red flex items-center gap-6 animate-pulse">
|
||||
<Siren className="w-16 h-16 animate-spin" />
|
||||
<div>
|
||||
<h1 className="text-5xl font-tech font-bold tracking-widest">EMERGENCY STOP</h1>
|
||||
<p className="text-center font-mono text-lg">SYSTEM HALTED - RELEASE TO RESET</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{isLowPressure && !isEmergencyStop && (
|
||||
<div className="bg-amber-500/80 text-black px-8 py-4 rounded font-bold text-2xl tracking-widest flex items-center gap-4 shadow-glow-red animate-bounce">
|
||||
<AlertTriangle className="w-8 h-8" /> LOW AIR PRESSURE WARNING
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Floating Panel (Left) */}
|
||||
{activeTab && activeTab !== 'setting' && activeTab !== 'recipe' && (
|
||||
<div className="w-[450px] z-20 animate-in slide-in-from-left-20 duration-500 fade-in">
|
||||
<CyberPanel className="h-full flex flex-col">
|
||||
{activeTab === 'motion' && <MotionPanel robotTarget={robotTarget} onMove={onMove} />}
|
||||
{activeTab === 'camera' && <CameraPanel videoRef={videoRef} />}
|
||||
</CyberPanel>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Recipe Selection Modal */}
|
||||
{activeTab === 'recipe' && (
|
||||
<RecipePanel
|
||||
recipes={recipes}
|
||||
currentRecipe={currentRecipe}
|
||||
onSelectRecipe={onSelectRecipe}
|
||||
onClose={onCloseTab}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Settings Modal */}
|
||||
<SettingsModal
|
||||
isOpen={activeTab === 'setting'}
|
||||
onClose={onCloseTab}
|
||||
config={config}
|
||||
isRefreshing={isConfigRefreshing}
|
||||
onSave={onSaveConfig}
|
||||
/>
|
||||
|
||||
{/* Right Sidebar (Dashboard) */}
|
||||
<div className="w-80 ml-auto z-20 flex flex-col gap-4">
|
||||
<ModelInfoPanel currentRecipe={currentRecipe} />
|
||||
|
||||
<CyberPanel className="flex-none">
|
||||
<div className="mb-2 text-xs text-neon-blue font-bold tracking-widest uppercase">System Status</div>
|
||||
<div className={`text-3xl font-tech font-bold mb-4 ${systemState === SystemState.RUNNING ? 'text-neon-green text-shadow-glow-green' : 'text-slate-400'}`}>
|
||||
{systemState}
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<TechButton
|
||||
variant="green"
|
||||
className="w-full flex items-center justify-center gap-2"
|
||||
active={systemState === SystemState.RUNNING}
|
||||
onClick={() => onControl('start')}
|
||||
>
|
||||
<Play className="w-4 h-4" /> START AUTO
|
||||
</TechButton>
|
||||
<TechButton
|
||||
variant="amber"
|
||||
className="w-full flex items-center justify-center gap-2"
|
||||
active={systemState === SystemState.PAUSED}
|
||||
onClick={() => onControl('stop')}
|
||||
>
|
||||
<Square className="w-4 h-4 fill-current" /> STOP / PAUSE
|
||||
</TechButton>
|
||||
<TechButton
|
||||
className="w-full flex items-center justify-center gap-2"
|
||||
onClick={() => onControl('reset')}
|
||||
>
|
||||
<RotateCw className="w-4 h-4" /> SYSTEM RESET
|
||||
</TechButton>
|
||||
</div>
|
||||
</CyberPanel>
|
||||
|
||||
<CyberPanel className="flex-1 flex flex-col min-h-0">
|
||||
<div className="mb-2 flex items-center justify-between text-xs text-neon-blue font-bold tracking-widest uppercase border-b border-white/10 pb-2">
|
||||
<span>Event Log</span>
|
||||
<Terminal className="w-3 h-3" />
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto font-mono text-[10px] space-y-1 pr-1 custom-scrollbar">
|
||||
{logs.map(log => (
|
||||
<div key={log.id} className={`flex gap-2 ${log.type === 'error' ? 'text-red-500' : log.type === 'warning' ? 'text-amber-400' : 'text-slate-400'}`}>
|
||||
<span className="opacity-50">[{log.timestamp}]</span>
|
||||
<span>{log.message}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CyberPanel>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
83
frontend/pages/IOMonitorPage.tsx
Normal file
83
frontend/pages/IOMonitorPage.tsx
Normal file
@@ -0,0 +1,83 @@
|
||||
import React, { useState } from 'react';
|
||||
import { IOPoint } from '../types';
|
||||
|
||||
interface IOMonitorPageProps {
|
||||
ioPoints: IOPoint[];
|
||||
onToggle: (id: number, type: 'input' | 'output') => void;
|
||||
activeIOTab: 'in' | 'out';
|
||||
onIOTabChange: (tab: 'in' | 'out') => void;
|
||||
}
|
||||
|
||||
export const IOMonitorPage: React.FC<IOMonitorPageProps> = ({ ioPoints, onToggle, activeIOTab, onIOTabChange }) => {
|
||||
const points = ioPoints.filter(p => p.type === (activeIOTab === 'in' ? 'input' : 'output'));
|
||||
|
||||
return (
|
||||
<main className="relative w-full h-full px-6 pt-6 pb-20">
|
||||
<div className="glass-holo p-6 h-full flex flex-col gap-4">
|
||||
|
||||
{/* Local Header / Controls */}
|
||||
<div className="flex items-center justify-between shrink-0">
|
||||
<div className="flex items-center gap-4">
|
||||
<h2 className="text-2xl font-tech font-bold text-white tracking-wider">
|
||||
SYSTEM I/O MONITOR
|
||||
</h2>
|
||||
<div className="h-6 w-px bg-white/20"></div>
|
||||
<div className="text-sm font-mono text-neon-blue">
|
||||
TOTAL POINTS: {ioPoints.length}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-black/40 backdrop-blur-md p-1 rounded-full border border-white/10 flex gap-1">
|
||||
<button
|
||||
onClick={() => onIOTabChange('in')}
|
||||
className={`px-6 py-2 rounded-full font-tech font-bold text-sm transition-all ${activeIOTab === 'in' ? 'bg-neon-yellow/20 text-neon-yellow border border-neon-yellow shadow-[0_0_15px_rgba(255,230,0,0.3)]' : 'text-slate-400 hover:text-white hover:bg-white/5'}`}
|
||||
>
|
||||
INPUTS ({ioPoints.filter(p => p.type === 'input').length})
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onIOTabChange('out')}
|
||||
className={`px-6 py-2 rounded-full font-tech font-bold text-sm transition-all ${activeIOTab === 'out' ? 'bg-neon-green/20 text-neon-green border border-neon-green shadow-[0_0_15px_rgba(10,255,0,0.3)]' : 'text-slate-400 hover:text-white hover:bg-white/5'}`}
|
||||
>
|
||||
OUTPUTS ({ioPoints.filter(p => p.type === 'output').length})
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-950/40 backdrop-blur-md flex-1 overflow-y-auto custom-scrollbar rounded-lg border border-white/5">
|
||||
{/* Grid Layout - More columns for full screen */}
|
||||
{/* Grid Layout - 2 Columns for list view */}
|
||||
<div className="grid grid-cols-2 gap-x-8 gap-y-2 p-4">
|
||||
{points.map(p => (
|
||||
<div
|
||||
key={p.id}
|
||||
onClick={() => onToggle(p.id, p.type)}
|
||||
className={`
|
||||
flex items-center gap-4 px-4 py-3 cursor-pointer transition-all border
|
||||
clip-tech-sm group hover:translate-x-1
|
||||
${p.state
|
||||
? (p.type === 'output'
|
||||
? 'bg-neon-green/10 border-neon-green text-neon-green shadow-[0_0_15px_rgba(10,255,0,0.2)]'
|
||||
: 'bg-neon-yellow/10 border-neon-yellow text-neon-yellow shadow-[0_0_15px_rgba(255,230,0,0.2)]')
|
||||
: 'bg-slate-900/40 border-slate-800 text-slate-500 hover:border-slate-600 hover:bg-slate-800/40'}
|
||||
`}
|
||||
>
|
||||
{/* LED Indicator */}
|
||||
<div className={`w-3 h-3 rounded-full shrink-0 transition-all ${p.state ? (p.type === 'output' ? 'bg-neon-green shadow-[0_0_8px_#0aff00]' : 'bg-neon-yellow shadow-[0_0_8px_#ffe600]') : 'bg-slate-800 border border-slate-700'}`}></div>
|
||||
|
||||
{/* ID Badge */}
|
||||
<div className={`w-12 font-mono font-bold text-lg ${p.state ? 'text-white' : 'text-slate-600'}`}>
|
||||
{p.type === 'input' ? 'I' : 'Q'}{p.id.toString().padStart(2, '0')}
|
||||
</div>
|
||||
|
||||
{/* Name */}
|
||||
<div className={`flex-1 font-bold uppercase tracking-wide truncate ${p.state ? 'text-white' : 'text-slate-500'} group-hover:text-white transition-colors`}>
|
||||
{p.name}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
173
frontend/pages/RecipePage.tsx
Normal file
173
frontend/pages/RecipePage.tsx
Normal file
@@ -0,0 +1,173 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Layers, Plus, Trash2, Copy, Save, ArrowLeft, FileText, Calendar } from 'lucide-react';
|
||||
import { Recipe } from '../types';
|
||||
import { comms } from '../communication';
|
||||
import { TechButton } from '../components/common/TechButton';
|
||||
|
||||
export const RecipePage: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const [recipes, setRecipes] = useState<Recipe[]>([]);
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null);
|
||||
const [editedRecipe, setEditedRecipe] = useState<Recipe | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const loadRecipes = async () => {
|
||||
try {
|
||||
const recipeStr = await comms.getRecipeList();
|
||||
const recipeData = JSON.parse(recipeStr);
|
||||
setRecipes(recipeData);
|
||||
if (recipeData.length > 0) {
|
||||
setSelectedId(recipeData[0].id);
|
||||
setEditedRecipe(recipeData[0]);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Failed to load recipes", e);
|
||||
}
|
||||
setIsLoading(false);
|
||||
};
|
||||
loadRecipes();
|
||||
}, []);
|
||||
|
||||
const handleSelect = (r: Recipe) => {
|
||||
setSelectedId(r.id);
|
||||
setEditedRecipe({ ...r });
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
// Mock Save Logic
|
||||
console.log("Saving recipe:", editedRecipe);
|
||||
// In real app: await comms.saveRecipe(editedRecipe);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full h-full p-6 flex flex-col gap-4">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between shrink-0">
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={() => navigate('/')}
|
||||
className="p-2 rounded-full hover:bg-white/10 text-slate-400 hover:text-white transition-colors"
|
||||
>
|
||||
<ArrowLeft className="w-6 h-6" />
|
||||
</button>
|
||||
<h1 className="text-2xl font-tech font-bold text-white tracking-wider flex items-center gap-3">
|
||||
<Layers className="text-neon-blue" /> RECIPE MANAGEMENT
|
||||
</h1>
|
||||
</div>
|
||||
<div className="text-sm font-mono text-slate-400">
|
||||
TOTAL: <span className="text-neon-blue">{recipes.length}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 flex gap-6 min-h-0">
|
||||
{/* Left: Recipe List */}
|
||||
<div className="w-80 flex flex-col gap-4">
|
||||
<div className="bg-slate-950/40 backdrop-blur-md border border-white/10 rounded-lg flex-1 overflow-hidden flex flex-col">
|
||||
<div className="p-3 border-b border-white/10 bg-white/5 font-bold text-sm tracking-wider text-slate-300">
|
||||
RECIPE LIST
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto p-2 space-y-2 custom-scrollbar">
|
||||
{recipes.map(r => (
|
||||
<div
|
||||
key={r.id}
|
||||
onClick={() => handleSelect(r)}
|
||||
className={`
|
||||
p-3 rounded border cursor-pointer transition-all group
|
||||
${selectedId === r.id
|
||||
? 'bg-neon-blue/20 border-neon-blue text-white shadow-glow-blue'
|
||||
: 'bg-white/5 border-white/5 text-slate-400 hover:bg-white/10 hover:border-white/20'}
|
||||
`}
|
||||
>
|
||||
<div className="font-bold text-sm mb-1">{r.name}</div>
|
||||
<div className="text-[10px] font-mono opacity-60 flex items-center gap-2">
|
||||
<Calendar className="w-3 h-3" /> {r.lastModified}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* List Actions */}
|
||||
<div className="p-3 border-t border-white/10 bg-black/20 grid grid-cols-3 gap-2">
|
||||
<TechButton variant="default" className="flex justify-center" title="Add New">
|
||||
<Plus className="w-4 h-4" />
|
||||
</TechButton>
|
||||
<TechButton variant="default" className="flex justify-center" title="Copy Selected">
|
||||
<Copy className="w-4 h-4" />
|
||||
</TechButton>
|
||||
<TechButton variant="danger" className="flex justify-center" title="Delete Selected">
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</TechButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right: Editor */}
|
||||
<div className="flex-1 bg-slate-950/40 backdrop-blur-md border border-white/10 rounded-lg flex flex-col overflow-hidden">
|
||||
<div className="p-3 border-b border-white/10 bg-white/5 font-bold text-sm tracking-wider text-slate-300 flex justify-between items-center">
|
||||
<span>RECIPE EDITOR</span>
|
||||
{editedRecipe && <span className="text-neon-blue font-mono">{editedRecipe.id}</span>}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 p-6 overflow-y-auto custom-scrollbar">
|
||||
{editedRecipe ? (
|
||||
<div className="max-w-2xl space-y-6">
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-bold text-slate-400 uppercase tracking-wider">Recipe Name</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editedRecipe.name}
|
||||
onChange={(e) => setEditedRecipe({ ...editedRecipe, name: e.target.value })}
|
||||
className="w-full bg-black/40 border border-white/10 rounded px-4 py-3 text-white focus:border-neon-blue focus:outline-none transition-colors font-mono"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-bold text-slate-400 uppercase tracking-wider">Description</label>
|
||||
<textarea
|
||||
className="w-full h-32 bg-black/40 border border-white/10 rounded px-4 py-3 text-white focus:border-neon-blue focus:outline-none transition-colors font-mono resize-none"
|
||||
placeholder="Enter recipe description..."
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-bold text-slate-400 uppercase tracking-wider">Process Time (sec)</label>
|
||||
<input type="number" className="w-full bg-black/40 border border-white/10 rounded px-4 py-3 text-white focus:border-neon-blue focus:outline-none transition-colors font-mono" defaultValue="120" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-bold text-slate-400 uppercase tracking-wider">Temperature (°C)</label>
|
||||
<input type="number" className="w-full bg-black/40 border border-white/10 rounded px-4 py-3 text-white focus:border-neon-blue focus:outline-none transition-colors font-mono" defaultValue="24.5" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Placeholder for more parameters */}
|
||||
<div className="p-4 border border-dashed border-white/10 rounded bg-white/5 text-center text-slate-500 text-sm">
|
||||
Additional process parameters would go here...
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="h-full flex flex-col items-center justify-center text-slate-500">
|
||||
<FileText className="w-16 h-16 mb-4 opacity-20" />
|
||||
<p>Select a recipe to edit</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Editor Actions */}
|
||||
<div className="p-4 border-t border-white/10 bg-black/20 flex justify-end">
|
||||
<TechButton
|
||||
variant="green"
|
||||
className="flex items-center gap-2 px-8"
|
||||
onClick={handleSave}
|
||||
disabled={!editedRecipe}
|
||||
>
|
||||
<Save className="w-4 h-4" /> SAVE CHANGES
|
||||
</TechButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user