Files

LGram16 8dc6b0f921 Initial commit: Industrial HMI system with component architecture

- 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>

2025-11-24 20:40:45 +09:00

2.3 KiB

Raw Blame History

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

Backend to Frontend (Status Updates):
- Sent every 50ms via PostWebMessageAsJson.
- Payload: { type: "STATUS_UPDATE", sysState, position, ioState }.
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).

2.3 KiB Raw Blame History