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>
41 lines
2.3 KiB
Markdown
41 lines
2.3 KiB
Markdown
# Project Investigation Report
|
|
|
|
## Overview
|
|
The project is a **Hybrid Industrial HMI (Human-Machine Interface)** application. It combines a **WinForms (.NET)** backend acting as a host and PLC simulator with a modern **React** frontend for the UI and 3D visualization.
|
|
|
|
## Architecture
|
|
- **Type:** Desktop Application (Hybrid)
|
|
- **Host:** Windows Forms (WinForms) using `WebView2` control.
|
|
- **Communication:** Bidirectional bridge between C# and JavaScript.
|
|
|
|
## Backend (`/backend`)
|
|
- **Framework:** .NET Framework 4.8
|
|
- **Project Type:** Windows Forms (`HMIWeb.sln`)
|
|
- **Key Files:**
|
|
- `MainForm.cs`: Main entry point. Initializes `WebView2`, sets up the virtual host (`http://hmi.local`), and runs the simulation loop (50ms tick).
|
|
- `MachineBridge.cs`: Exposed to JavaScript via `AddHostObjectToScript`. Allows the frontend to call C# methods (`MoveAxis`, `SetIO`, `SystemControl`).
|
|
- `Program.cs`: Standard WinForms entry point.
|
|
|
|
## Frontend (`/frontend`)
|
|
- **Framework:** React 18, Vite, TypeScript
|
|
- **Styling:** Tailwind CSS (Cyberpunk/Neon aesthetic)
|
|
- **3D Graphics:** Three.js (`@react-three/fiber`, `@react-three/drei`)
|
|
- **Key Files:**
|
|
- `App.tsx`: Main application logic. Handles communication with the backend and manages UI state. Includes a **Mock Mode** for browser-based development.
|
|
- `components/Machine3D.tsx`: Likely handles the 3D visualization of the machine.
|
|
- **Integration:**
|
|
- **Receiving Data:** Listens for `message` events from `window.chrome.webview`.
|
|
- **Sending Commands:** Calls `window.chrome.webview.hostObjects.machine.[MethodName]`.
|
|
|
|
## Communication Protocol
|
|
1. **Backend to Frontend (Status Updates):**
|
|
- Sent every 50ms via `PostWebMessageAsJson`.
|
|
- Payload: `{ type: "STATUS_UPDATE", sysState, position, ioState }`.
|
|
2. **Frontend to Backend (Control):**
|
|
- Direct method calls via `MachineBridge` proxy.
|
|
- Methods: `MoveAxis(axis, value)`, `SetIO(id, isInput, state)`, `SystemControl(command)`.
|
|
|
|
## Development
|
|
- **Frontend:** Can be developed independently using `npm run dev`. It will use mock data since `window.chrome.webview` is missing.
|
|
- **Backend:** Requires Visual Studio to build and run the WinForms app. It expects the frontend build artifacts in `backend/HMIWeb/bin/Debug/wwwroot` (or similar, mapped to `wwwroot`).
|