LGram16
8dc6b0f921
- Implement WebView2-based HMI frontend with React + TypeScript + Vite - Add C# .NET backend with WebSocket communication layer - Separate UI components into modular structure: * RecipePanel: Recipe selection and management * IOPanel: I/O monitoring and control (32 inputs/outputs) * MotionPanel: Servo control for X/Y/Z axes * CameraPanel: Vision system feed with HUD overlay * SettingsModal: System configuration management - Create reusable UI components (CyberPanel, TechButton, PanelHeader) - Implement dual-mode communication (WebView2 native + WebSocket fallback) - Add 3D visualization with Three.js/React Three Fiber - Fix JSON parsing bug in configuration save handler - Include comprehensive .gitignore for .NET and Node.js projects 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
40 lines
2.1 KiB
TypeScript
40 lines
2.1 KiB
TypeScript
import React from 'react';
|
|
import { Camera, Crosshair } from 'lucide-react';
|
|
import { PanelHeader } from './common/PanelHeader';
|
|
|
|
interface CameraPanelProps {
|
|
videoRef: React.RefObject<HTMLVideoElement>;
|
|
}
|
|
|
|
export const CameraPanel: React.FC<CameraPanelProps> = ({ videoRef }) => (
|
|
<div className="h-full flex flex-col">
|
|
<PanelHeader title="Vision Feed" icon={Camera} />
|
|
<div className="flex-1 bg-black relative overflow-hidden border border-slate-800 group">
|
|
<video ref={videoRef} autoPlay playsInline className="w-full h-full object-cover opacity-80" />
|
|
|
|
{/* HUD OVERLAY */}
|
|
<div className="absolute inset-0 pointer-events-none">
|
|
<div className="absolute top-0 left-0 w-full h-full border-[20px] border-neon-blue/10 clip-tech-inv"></div>
|
|
<Crosshair className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-12 h-12 text-neon-blue opacity-50" />
|
|
|
|
<div className="absolute top-4 right-4 flex flex-col items-end gap-1">
|
|
<span className="text-[10px] font-mono text-neon-red animate-pulse">● REC</span>
|
|
<span className="text-xs font-mono text-neon-blue">1920x1080 @ 60FPS</span>
|
|
</div>
|
|
|
|
<div className="absolute bottom-4 left-4 text-neon-blue/80 font-mono text-xs">
|
|
EXPOSURE: AUTO<br />
|
|
GAIN: 12dB<br />
|
|
FOCUS: 150mm
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-4 gap-2 mt-3">
|
|
<button className="bg-slate-800 text-slate-400 text-[10px] py-2 hover:bg-neon-blue hover:text-black transition-colors">ZOOM +</button>
|
|
<button className="bg-slate-800 text-slate-400 text-[10px] py-2 hover:bg-neon-blue hover:text-black transition-colors">ZOOM -</button>
|
|
<button className="bg-slate-800 text-slate-400 text-[10px] py-2 hover:bg-neon-blue hover:text-black transition-colors">SNAP</button>
|
|
<button className="bg-slate-800 text-slate-400 text-[10px] py-2 hover:bg-neon-blue hover:text-black transition-colors">SETTINGS</button>
|
|
</div>
|
|
</div>
|
|
);
|