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>

backend/HMIWeb/App.config

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<configuration>
+    <startup> 
+        <supportedRuntime version="v4.0" sku=".NETFramework,Version=v4.8" />
+    </startup>
+</configuration>

backend/HMIWeb/HMIWeb.csproj

@@ -0,0 +1,107 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Project ToolsVersion="15.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <Import Project="$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props" Condition="Exists('$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props')" />
+  <PropertyGroup>
+    <Configuration Condition=" '$(Configuration)' == '' ">Debug</Configuration>
+    <Platform Condition=" '$(Platform)' == '' ">AnyCPU</Platform>
+    <ProjectGuid>{33BFBC63-D007-4922-8412-99776B42A016}</ProjectGuid>
+    <OutputType>WinExe</OutputType>
+    <RootNamespace>HMIWeb</RootNamespace>
+    <AssemblyName>HMIWeb</AssemblyName>
+    <TargetFrameworkVersion>v4.8</TargetFrameworkVersion>
+    <FileAlignment>512</FileAlignment>
+    <AutoGenerateBindingRedirects>true</AutoGenerateBindingRedirects>
+    <Deterministic>true</Deterministic>
+    <NuGetPackageImportStamp>
+    </NuGetPackageImportStamp>
+  </PropertyGroup>
+  <PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Debug|AnyCPU' ">
+    <PlatformTarget>AnyCPU</PlatformTarget>
+    <DebugSymbols>true</DebugSymbols>
+    <DebugType>full</DebugType>
+    <Optimize>false</Optimize>
+    <OutputPath>bin\Debug\</OutputPath>
+    <DefineConstants>DEBUG;TRACE</DefineConstants>
+    <ErrorReport>prompt</ErrorReport>
+    <WarningLevel>4</WarningLevel>
+  </PropertyGroup>
+  <PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Release|AnyCPU' ">
+    <PlatformTarget>AnyCPU</PlatformTarget>
+    <DebugType>pdbonly</DebugType>
+    <Optimize>true</Optimize>
+    <OutputPath>bin\Release\</OutputPath>
+    <DefineConstants>TRACE</DefineConstants>
+    <ErrorReport>prompt</ErrorReport>
+    <WarningLevel>4</WarningLevel>
+  </PropertyGroup>
+  <ItemGroup>
+    <Reference Include="Microsoft.Web.WebView2.Core, Version=1.0.3595.46, Culture=neutral, PublicKeyToken=2a8ab48044d2601e, processorArchitecture=MSIL">
+      <HintPath>..\packages\Microsoft.Web.WebView2.1.0.3595.46\lib\net462\Microsoft.Web.WebView2.Core.dll</HintPath>
+    </Reference>
+    <Reference Include="Microsoft.Web.WebView2.WinForms, Version=1.0.3595.46, Culture=neutral, PublicKeyToken=2a8ab48044d2601e, processorArchitecture=MSIL">
+      <HintPath>..\packages\Microsoft.Web.WebView2.1.0.3595.46\lib\net462\Microsoft.Web.WebView2.WinForms.dll</HintPath>
+    </Reference>
+    <Reference Include="Microsoft.Web.WebView2.Wpf, Version=1.0.3595.46, Culture=neutral, PublicKeyToken=2a8ab48044d2601e, processorArchitecture=MSIL">
+      <HintPath>..\packages\Microsoft.Web.WebView2.1.0.3595.46\lib\net462\Microsoft.Web.WebView2.Wpf.dll</HintPath>
+    </Reference>
+    <Reference Include="Newtonsoft.Json, Version=13.0.0.0, Culture=neutral, PublicKeyToken=30ad4fe6b2a6aeed, processorArchitecture=MSIL">
+      <HintPath>..\packages\Newtonsoft.Json.13.0.4\lib\net45\Newtonsoft.Json.dll</HintPath>
+    </Reference>
+    <Reference Include="System" />
+    <Reference Include="System.Core" />
+    <Reference Include="System.Xml.Linq" />
+    <Reference Include="System.Data.DataSetExtensions" />
+    <Reference Include="Microsoft.CSharp" />
+    <Reference Include="System.Data" />
+    <Reference Include="System.Deployment" />
+    <Reference Include="System.Drawing" />
+    <Reference Include="System.Net.Http" />
+    <Reference Include="System.Windows.Forms" />
+    <Reference Include="System.Xml" />
+  </ItemGroup>
+  <ItemGroup>
+    <Compile Include="MainForm.cs">
+      <SubType>Form</SubType>
+    </Compile>
+    <Compile Include="MainForm.Designer.cs">
+      <DependentUpon>MainForm.cs</DependentUpon>
+    </Compile>
+    <Compile Include="MachineBridge.cs" />
+    <Compile Include="WebSocketServer.cs" />
+    <Compile Include="Program.cs" />
+    <Compile Include="Properties\AssemblyInfo.cs" />
+    <EmbeddedResource Include="MainForm.resx">
+      <DependentUpon>MainForm.cs</DependentUpon>
+    </EmbeddedResource>
+    <EmbeddedResource Include="Properties\Resources.resx">
+      <Generator>ResXFileCodeGenerator</Generator>
+      <LastGenOutput>Resources.Designer.cs</LastGenOutput>
+      <SubType>Designer</SubType>
+    </EmbeddedResource>
+    <Compile Include="Properties\Resources.Designer.cs">
+      <AutoGen>True</AutoGen>
+      <DependentUpon>Resources.resx</DependentUpon>
+    </Compile>
+    <None Include="packages.config" />
+    <None Include="Properties\Settings.settings">
+      <Generator>SettingsSingleFileGenerator</Generator>
+      <LastGenOutput>Settings.Designer.cs</LastGenOutput>
+    </None>
+    <Compile Include="Properties\Settings.Designer.cs">
+      <AutoGen>True</AutoGen>
+      <DependentUpon>Settings.settings</DependentUpon>
+      <DesignTimeSharedInput>True</DesignTimeSharedInput>
+    </Compile>
+  </ItemGroup>
+  <ItemGroup>
+    <None Include="App.config" />
+  </ItemGroup>
+  <Import Project="$(MSBuildToolsPath)\Microsoft.CSharp.targets" />
+  <Import Project="..\packages\Microsoft.Web.WebView2.1.0.3595.46\build\Microsoft.Web.WebView2.targets" Condition="Exists('..\packages\Microsoft.Web.WebView2.1.0.3595.46\build\Microsoft.Web.WebView2.targets')" />
+  <Target Name="EnsureNuGetPackageBuildImports" BeforeTargets="PrepareForBuild">
+    <PropertyGroup>
+      <ErrorText>이 프로젝트는 이 컴퓨터에 없는 NuGet 패키지를 참조합니다. 해당 패키지를 다운로드하려면 NuGet 패키지 복원을 사용하십시오. 자세한 내용은 http://go.microsoft.com/fwlink/?LinkID=322105를 참조하십시오. 누락된 파일은 {0}입니다.</ErrorText>
+    </PropertyGroup>
+    <Error Condition="!Exists('..\packages\Microsoft.Web.WebView2.1.0.3595.46\build\Microsoft.Web.WebView2.targets')" Text="$([System.String]::Format('$(ErrorText)', '..\packages\Microsoft.Web.WebView2.1.0.3595.46\build\Microsoft.Web.WebView2.targets'))" />
+  </Target>
+</Project>

backend/HMIWeb/MachineBridge.cs

@@ -0,0 +1,97 @@
+using System;
+using System.Runtime.InteropServices;
+using System.Windows.Forms;
+using Newtonsoft.Json;
+
+namespace HMIWeb
+{
+    // Important: Allows JavaScript to see this class
+    [ClassInterface(ClassInterfaceType.AutoDual)]
+    [ComVisible(true)]
+    public class MachineBridge
+    {
+        // Reference to the main form to update logic
+        private MainForm _host;
+
+        public MachineBridge(MainForm host)
+        {
+            _host = host;
+        }
+
+        // --- Methods called from React (App.tsx) ---
+
+        public void MoveAxis(string axis, double value)
+        {
+            // In real app, call DLL here: Motion.Move(axis, value)
+            Console.WriteLine($"[C#] Moving {axis} to {value}");
+
+            // For simulation, update host state directly
+            _host.SetTargetPosition(axis, value);
+        }
+
+        public void SetIO(int id, bool isInput, bool state)
+        {
+            Console.WriteLine($"[C#] Set IO {id} to {state}");
+            _host.SetOutput(id, state);
+        }
+
+        public void SystemControl(string command)
+        {
+            Console.WriteLine($"[C#] CMD: {command}");
+            _host.HandleCommand(command);
+        }
+
+        public void LoadRecipe(string recipeId)
+        {
+            Console.WriteLine($"[C#] Loading Recipe: {recipeId}");
+        }
+
+        public string GetConfig()
+        {
+            // Generate 20 Mock Settings
+            var settings = new System.Collections.Generic.List<object>();
+            
+            // Core Settings
+            settings.Add(new { Key = "Site Name", Value = "Smart Factory A-1", Group = "System Information", Type = "String", Description = "The display name of the factory site." });
+            settings.Add(new { Key = "Line ID", Value = "L-2024-001", Group = "System Information", Type = "String", Description = "Unique identifier for this production line." });
+            settings.Add(new { Key = "API Endpoint", Value = "https://api.factory.local/v1", Group = "Network Configuration", Type = "String", Description = "Base URL for the backend API." });
+            settings.Add(new { Key = "Support Contact", Value = "010-1234-5678", Group = "System Information", Type = "String", Description = "Emergency contact number for maintenance." });
+            settings.Add(new { Key = "Debug Mode", Value = "false", Group = "System Information", Type = "Boolean", Description = "Enable detailed logging for debugging." });
+            settings.Add(new { Key = "Max Speed", Value = "1500", Group = "Motion Control", Type = "Number", Description = "Maximum velocity in mm/s." });
+            settings.Add(new { Key = "Acceleration", Value = "500", Group = "Motion Control", Type = "Number", Description = "Acceleration ramp in mm/s²." });
+
+            // Generated Settings
+            for (int i = 1; i <= 5; i++)
+            {
+                settings.Add(new { 
+                    Key = $"Sensor_{i}_Threshold", 
+                    Value = (i * 10).ToString(), 
+                    Group = "Sensor Calibration",
+                    Type = "Number",
+                    Description = $"Trigger threshold for Sensor {i}."
+                });
+            }
+            
+            for (int i = 1; i <= 3; i++)
+            {
+                settings.Add(new { 
+                    Key = $"Safety_Zone_{i}", 
+                    Value = "true", 
+                    Group = "Safety Settings",
+                    Type = "Boolean",
+                    Description = $"Enable monitoring for Safety Zone {i}."
+                });
+            }
+
+            Console.WriteLine("get config (20 items)");
+            return Newtonsoft.Json.JsonConvert.SerializeObject(settings);
+        }
+
+        public void SaveConfig(string configJson)
+        {
+            Console.WriteLine($"[Backend] SAVE CONFIG REQUEST RECEIVED");
+            Console.WriteLine($"[Backend] Data: {configJson}");
+            // In a real app, we would save this to a file or database
+        }
+    }
+}

backend/HMIWeb/MainForm.Designer.cs

@@ -0,0 +1,48 @@
+namespace HMIWeb
+{
+    partial class MainForm
+    {
+        /// <summary>
+        /// 필수 디자이너 변수입니다.
+        /// </summary>
+        private System.ComponentModel.IContainer components = null;
+
+        /// <summary>
+        /// 사용 중인 모든 리소스를 정리합니다.
+        /// </summary>
+        /// <param name="disposing">관리되는 리소스를 삭제해야 하면 true이고, 그렇지 않으면 false입니다.</param>
+        protected override void Dispose(bool disposing)
+        {
+            if (disposing && (components != null))
+            {
+                components.Dispose();
+            }
+            base.Dispose(disposing);
+        }
+
+        #region Windows Form 디자이너에서 생성한 코드
+
+        /// <summary>
+        /// 디자이너 지원에 필요한 메서드입니다. 
+        /// 이 메서드의 내용을 코드 편집기로 수정하지 마세요.
+        /// </summary>
+        private void InitializeComponent()
+        {
+            this.SuspendLayout();
+            // 
+            // MainForm
+            // 
+            this.AutoScaleDimensions = new System.Drawing.SizeF(8F, 15F);
+            this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
+            this.ClientSize = new System.Drawing.Size(800, 450);
+            this.Name = "MainForm";
+            this.Text = "Form1";
+            this.Load += new System.EventHandler(this.MainForm_Load);
+            this.ResumeLayout(false);
+
+        }
+
+        #endregion
+    }
+}
+

backend/HMIWeb/MainForm.cs

@@ -0,0 +1,158 @@
+using Microsoft.Web.WebView2.Core;
+using Newtonsoft.Json;
+using System;
+using System.Collections.Generic;
+using System.ComponentModel;
+using System.Data;
+using System.Drawing;
+using System.IO;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using System.Windows.Forms;
+
+namespace HMIWeb
+{
+    public partial class MainForm : Form
+    {
+        private Microsoft.Web.WebView2.WinForms.WebView2 webView;
+        private Timer plcTimer;
+        private WebSocketServer _wsServer;
+
+        // Machine State (Simulated PLC Memory)
+        private double currX = 0, currY = 0, currZ = 0;
+        private double targetX = 0, targetY = 0, targetZ = 0;
+        private bool[] inputs = new bool[32];
+        private bool[] outputs = new bool[32];
+        private string systemState = "IDLE";
+        public MainForm()
+        {
+            InitializeComponent();
+            InitializeWebView();
+
+            // Start WebSocket Server for HMR/Dev
+            try
+            {
+                _wsServer = new WebSocketServer("http://localhost:8081/", this);
+            }
+            catch (Exception ex)
+            {
+                MessageBox.Show("Failed to start WebSocket Server (Port 8081). Run as Admin or allow port.\n" + ex.Message);
+            }
+
+            // Set default inputs (Pressure OK, Estop OK)
+            inputs[4] = true;
+            inputs[6] = true;
+        }
+
+        private async void InitializeWebView()
+        {
+            // 1. Setup Virtual Host (http://hmi.local) pointing to frontend/dist folder
+            // Navigate up from bin/Debug/ to project root, then to frontend/dist
+            string projectRoot = Path.GetFullPath(Path.Combine(Application.StartupPath, @"..\..\..\.."));
+            string wwwroot = Path.Combine(projectRoot, @"frontend\dist");
+
+            this.Text = $"HMI Host - {wwwroot}";
+
+            webView = new Microsoft.Web.WebView2.WinForms.WebView2();
+            webView.Dock = DockStyle.Fill;
+            this.Controls.Add(webView);
+
+            await webView.EnsureCoreWebView2Async();
+            
+            if (!Directory.Exists(wwwroot))
+            {
+                MessageBox.Show($"Could not find frontend build at:\n{wwwroot}\n\nPlease run 'npm run build' in the frontend folder.", "Frontend Not Found", MessageBoxButtons.OK, MessageBoxIcon.Warning);
+                // Fallback to local wwwroot if needed, or just allow it to fail gracefully
+                Directory.CreateDirectory(wwwroot); 
+            }
+
+            webView.CoreWebView2.SetVirtualHostNameToFolderMapping(
+                "hmi.local",
+                wwwroot,
+                CoreWebView2HostResourceAccessKind.Allow
+            );
+
+            // 2. Inject Native Object
+            webView.CoreWebView2.AddHostObjectToScript("machine", new MachineBridge(this));
+
+            // 3. Load UI
+            //webView.Source = new Uri("http://hmi.local/index.html");
+
+            // Disable default browser keys (F5, F12 etc) if needed for kiosk mode
+            webView.CoreWebView2.Settings.AreDefaultContextMenusEnabled = false;
+
+   
+        }
+
+        // --- Logic Loop ---
+        private void PlcTimer_Tick(object sender, EventArgs e)
+        {
+            // 1. Simulate Motion (Move Current towards Target)
+            currX = Lerp(currX, targetX, 0.1);
+            currY = Lerp(currY, targetY, 0.1);
+            currZ = Lerp(currZ, targetZ, 0.1);
+
+            // 2. Prepare Data Packet
+            var payload = new
+            {
+                type = "STATUS_UPDATE",
+                sysState = systemState,
+                position = new { x = currX, y = currY, z = currZ },
+                ioState = GetChangedIOs() // Function to return array of IO states
+            };
+
+            string json = JsonConvert.SerializeObject(payload);
+
+            // 3. Send to React via PostMessage (WebView2)
+            if (webView != null && webView.CoreWebView2 != null)
+            {
+                webView.CoreWebView2.PostWebMessageAsJson(json);
+            }
+
+            // 4. Broadcast to WebSocket (Dev/HMR)
+            _wsServer?.Broadcast(json);
+        }
+
+        private List<object> GetChangedIOs()
+        {
+            // Simply return list of all active IOs or just send all for simplicity
+            var list = new List<object>();
+            for (int i = 0; i < 32; i++)
+            {
+                list.Add(new { id = i, type = "input", state = inputs[i] });
+                list.Add(new { id = i, type = "output", state = outputs[i] });
+            }
+            return list;
+        }
+
+        private void MainForm_Load(object sender, EventArgs e)
+        {
+            // Setup Simulation Timer (50ms)
+            plcTimer = new Timer();
+            plcTimer.Interval = 50;
+            plcTimer.Tick += PlcTimer_Tick;
+            plcTimer.Start();
+        }
+
+        // --- Helper Methods called by Bridge ---
+        public void SetTargetPosition(string axis, double val)
+        {
+            if (axis == "X") targetX = val;
+            if (axis == "Y") targetY = val;
+            if (axis == "Z") targetZ = val;
+        }
+
+        public void SetOutput(int id, bool state)
+        {
+            if (id < 32) outputs[id] = state;
+        }
+
+        public void HandleCommand(string cmd)
+        {
+            systemState = (cmd == "START") ? "RUNNING" : (cmd == "STOP") ? "PAUSED" : "IDLE";
+        }
+
+        private double Lerp(double a, double b, double t) => a + (b - a) * t;
+    }
+}

backend/HMIWeb/MainForm.resx

@@ -0,0 +1,120 @@
+<?xml version="1.0" encoding="utf-8"?>
+<root>
+  <!-- 
+    Microsoft ResX Schema 
+    
+    Version 2.0
+    
+    The primary goals of this format is to allow a simple XML format 
+    that is mostly human readable. The generation and parsing of the 
+    various data types are done through the TypeConverter classes 
+    associated with the data types.
+    
+    Example:
+    
+    ... ado.net/XML headers & schema ...
+    <resheader name="resmimetype">text/microsoft-resx</resheader>
+    <resheader name="version">2.0</resheader>
+    <resheader name="reader">System.Resources.ResXResourceReader, System.Windows.Forms, ...</resheader>
+    <resheader name="writer">System.Resources.ResXResourceWriter, System.Windows.Forms, ...</resheader>
+    <data name="Name1"><value>this is my long string</value><comment>this is a comment</comment></data>
+    <data name="Color1" type="System.Drawing.Color, System.Drawing">Blue</data>
+    <data name="Bitmap1" mimetype="application/x-microsoft.net.object.binary.base64">
+        <value>[base64 mime encoded serialized .NET Framework object]</value>
+    </data>
+    <data name="Icon1" type="System.Drawing.Icon, System.Drawing" mimetype="application/x-microsoft.net.object.bytearray.base64">
+        <value>[base64 mime encoded string representing a byte array form of the .NET Framework object]</value>
+        <comment>This is a comment</comment>
+    </data>
+                
+    There are any number of "resheader" rows that contain simple 
+    name/value pairs.
+    
+    Each data row contains a name, and value. The row also contains a 
+    type or mimetype. Type corresponds to a .NET class that support 
+    text/value conversion through the TypeConverter architecture. 
+    Classes that don't support this are serialized and stored with the 
+    mimetype set.
+    
+    The mimetype is used for serialized objects, and tells the 
+    ResXResourceReader how to depersist the object. This is currently not 
+    extensible. For a given mimetype the value must be set accordingly:
+    
+    Note - application/x-microsoft.net.object.binary.base64 is the format 
+    that the ResXResourceWriter will generate, however the reader can 
+    read any of the formats listed below.
+    
+    mimetype: application/x-microsoft.net.object.binary.base64
+    value   : The object must be serialized with 
+            : System.Runtime.Serialization.Formatters.Binary.BinaryFormatter
+            : and then encoded with base64 encoding.
+    
+    mimetype: application/x-microsoft.net.object.soap.base64
+    value   : The object must be serialized with 
+            : System.Runtime.Serialization.Formatters.Soap.SoapFormatter
+            : and then encoded with base64 encoding.
+
+    mimetype: application/x-microsoft.net.object.bytearray.base64
+    value   : The object must be serialized into a byte array 
+            : using a System.ComponentModel.TypeConverter
+            : and then encoded with base64 encoding.
+    -->
+  <xsd:schema id="root" xmlns="" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata">
+    <xsd:import namespace="http://www.w3.org/XML/1998/namespace" />
+    <xsd:element name="root" msdata:IsDataSet="true">
+      <xsd:complexType>
+        <xsd:choice maxOccurs="unbounded">
+          <xsd:element name="metadata">
+            <xsd:complexType>
+              <xsd:sequence>
+                <xsd:element name="value" type="xsd:string" minOccurs="0" />
+              </xsd:sequence>
+              <xsd:attribute name="name" use="required" type="xsd:string" />
+              <xsd:attribute name="type" type="xsd:string" />
+              <xsd:attribute name="mimetype" type="xsd:string" />
+              <xsd:attribute ref="xml:space" />
+            </xsd:complexType>
+          </xsd:element>
+          <xsd:element name="assembly">
+            <xsd:complexType>
+              <xsd:attribute name="alias" type="xsd:string" />
+              <xsd:attribute name="name" type="xsd:string" />
+            </xsd:complexType>
+          </xsd:element>
+          <xsd:element name="data">
+            <xsd:complexType>
+              <xsd:sequence>
+                <xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1" />
+                <xsd:element name="comment" type="xsd:string" minOccurs="0" msdata:Ordinal="2" />
+              </xsd:sequence>
+              <xsd:attribute name="name" type="xsd:string" use="required" msdata:Ordinal="1" />
+              <xsd:attribute name="type" type="xsd:string" msdata:Ordinal="3" />
+              <xsd:attribute name="mimetype" type="xsd:string" msdata:Ordinal="4" />
+              <xsd:attribute ref="xml:space" />
+            </xsd:complexType>
+          </xsd:element>
+          <xsd:element name="resheader">
+            <xsd:complexType>
+              <xsd:sequence>
+                <xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1" />
+              </xsd:sequence>
+              <xsd:attribute name="name" type="xsd:string" use="required" />
+            </xsd:complexType>
+          </xsd:element>
+        </xsd:choice>
+      </xsd:complexType>
+    </xsd:element>
+  </xsd:schema>
+  <resheader name="resmimetype">
+    <value>text/microsoft-resx</value>
+  </resheader>
+  <resheader name="version">
+    <value>2.0</value>
+  </resheader>
+  <resheader name="reader">
+    <value>System.Resources.ResXResourceReader, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
+  </resheader>
+  <resheader name="writer">
+    <value>System.Resources.ResXResourceWriter, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
+  </resheader>
+</root>

backend/HMIWeb/Program.cs

@@ -0,0 +1,22 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using System.Windows.Forms;
+
+namespace HMIWeb
+{
+    internal static class Program
+    {
+        /// <summary>
+        /// 해당 애플리케이션의 주 진입점입니다.
+        /// </summary>
+        [STAThread]
+        static void Main()
+        {
+            Application.EnableVisualStyles();
+            Application.SetCompatibleTextRenderingDefault(false);
+            Application.Run(new MainForm());
+        }
+    }
+}

backend/HMIWeb/Properties/AssemblyInfo.cs

@@ -0,0 +1,33 @@
+using System.Reflection;
+using System.Runtime.CompilerServices;
+using System.Runtime.InteropServices;
+
+// 어셈블리에 대한 일반 정보는 다음 특성 집합을 통해 
+// 제어됩니다. 어셈블리와 관련된 정보를 수정하려면
+// 이러한 특성 값을 변경하세요.
+[assembly: AssemblyTitle("HMIWeb")]
+[assembly: AssemblyDescription("")]
+[assembly: AssemblyConfiguration("")]
+[assembly: AssemblyCompany("")]
+[assembly: AssemblyProduct("HMIWeb")]
+[assembly: AssemblyCopyright("Copyright ©  2025")]
+[assembly: AssemblyTrademark("")]
+[assembly: AssemblyCulture("")]
+
+// ComVisible을 false로 설정하면 이 어셈블리의 형식이 COM 구성 요소에 
+// 표시되지 않습니다. COM에서 이 어셈블리의 형식에 액세스하려면
+// 해당 형식에 대해 ComVisible 특성을 true로 설정하세요.
+[assembly: ComVisible(false)]
+
+// 이 프로젝트가 COM에 노출되는 경우 다음 GUID는 typelib의 ID를 나타냅니다.
+[assembly: Guid("33bfbc63-d007-4922-8412-99776b42a016")]
+
+// 어셈블리의 버전 정보는 다음 네 가지 값으로 구성됩니다.
+//
+//      주 버전
+//      부 버전 
+//      빌드 번호
+//      수정 버전
+//
+[assembly: AssemblyVersion("1.0.0.0")]
+[assembly: AssemblyFileVersion("1.0.0.0")]

backend/HMIWeb/Properties/Resources.Designer.cs

@@ -0,0 +1,71 @@
+//------------------------------------------------------------------------------
+// <auto-generated>
+//     이 코드는 도구를 사용하여 생성되었습니다.
+//     런타임 버전:4.0.30319.42000
+//
+//     파일 내용을 변경하면 잘못된 동작이 발생할 수 있으며, 코드를 다시 생성하면
+//     이러한 변경 내용이 손실됩니다.
+// </auto-generated>
+//------------------------------------------------------------------------------
+
+namespace HMIWeb.Properties
+{
+
+
+    /// <summary>
+    ///   지역화된 문자열 등을 찾기 위한 강력한 형식의 리소스 클래스입니다.
+    /// </summary>
+    // 이 클래스는 ResGen 또는 Visual Studio와 같은 도구를 통해 StronglyTypedResourceBuilder
+    // 클래스에서 자동으로 생성되었습니다.
+    // 멤버를 추가하거나 제거하려면 .ResX 파일을 편집한 다음 /str 옵션을 사용하여
+    // ResGen을 다시 실행하거나 VS 프로젝트를 다시 빌드하십시오.
+    [global::System.CodeDom.Compiler.GeneratedCodeAttribute("System.Resources.Tools.StronglyTypedResourceBuilder", "4.0.0.0")]
+    [global::System.Diagnostics.DebuggerNonUserCodeAttribute()]
+    [global::System.Runtime.CompilerServices.CompilerGeneratedAttribute()]
+    internal class Resources
+    {
+
+        private static global::System.Resources.ResourceManager resourceMan;
+
+        private static global::System.Globalization.CultureInfo resourceCulture;
+
+        [global::System.Diagnostics.CodeAnalysis.SuppressMessageAttribute("Microsoft.Performance", "CA1811:AvoidUncalledPrivateCode")]
+        internal Resources()
+        {
+        }
+
+        /// <summary>
+        ///   이 클래스에서 사용하는 캐시된 ResourceManager 인스턴스를 반환합니다.
+        /// </summary>
+        [global::System.ComponentModel.EditorBrowsableAttribute(global::System.ComponentModel.EditorBrowsableState.Advanced)]
+        internal static global::System.Resources.ResourceManager ResourceManager
+        {
+            get
+            {
+                if ((resourceMan == null))
+                {
+                    global::System.Resources.ResourceManager temp = new global::System.Resources.ResourceManager("HMIWeb.Properties.Resources", typeof(Resources).Assembly);
+                    resourceMan = temp;
+                }
+                return resourceMan;
+            }
+        }
+
+        /// <summary>
+        ///   이 강력한 형식의 리소스 클래스를 사용하여 모든 리소스 조회에 대해 현재 스레드의 CurrentUICulture 속성을
+        ///   재정의합니다.
+        /// </summary>
+        [global::System.ComponentModel.EditorBrowsableAttribute(global::System.ComponentModel.EditorBrowsableState.Advanced)]
+        internal static global::System.Globalization.CultureInfo Culture
+        {
+            get
+            {
+                return resourceCulture;
+            }
+            set
+            {
+                resourceCulture = value;
+            }
+        }
+    }
+}

backend/HMIWeb/Properties/Resources.resx

@@ -0,0 +1,117 @@
+<?xml version="1.0" encoding="utf-8"?>
+<root>
+  <!-- 
+    Microsoft ResX Schema 
+    
+    Version 2.0
+    
+    The primary goals of this format is to allow a simple XML format 
+    that is mostly human readable. The generation and parsing of the 
+    various data types are done through the TypeConverter classes 
+    associated with the data types.
+    
+    Example:
+    
+    ... ado.net/XML headers & schema ...
+    <resheader name="resmimetype">text/microsoft-resx</resheader>
+    <resheader name="version">2.0</resheader>
+    <resheader name="reader">System.Resources.ResXResourceReader, System.Windows.Forms, ...</resheader>
+    <resheader name="writer">System.Resources.ResXResourceWriter, System.Windows.Forms, ...</resheader>
+    <data name="Name1"><value>this is my long string</value><comment>this is a comment</comment></data>
+    <data name="Color1" type="System.Drawing.Color, System.Drawing">Blue</data>
+    <data name="Bitmap1" mimetype="application/x-microsoft.net.object.binary.base64">
+        <value>[base64 mime encoded serialized .NET Framework object]</value>
+    </data>
+    <data name="Icon1" type="System.Drawing.Icon, System.Drawing" mimetype="application/x-microsoft.net.object.bytearray.base64">
+        <value>[base64 mime encoded string representing a byte array form of the .NET Framework object]</value>
+        <comment>This is a comment</comment>
+    </data>
+                
+    There are any number of "resheader" rows that contain simple 
+    name/value pairs.
+    
+    Each data row contains a name, and value. The row also contains a 
+    type or mimetype. Type corresponds to a .NET class that support 
+    text/value conversion through the TypeConverter architecture. 
+    Classes that don't support this are serialized and stored with the 
+    mimetype set.
+    
+    The mimetype is used for serialized objects, and tells the 
+    ResXResourceReader how to depersist the object. This is currently not 
+    extensible. For a given mimetype the value must be set accordingly:
+    
+    Note - application/x-microsoft.net.object.binary.base64 is the format 
+    that the ResXResourceWriter will generate, however the reader can 
+    read any of the formats listed below.
+    
+    mimetype: application/x-microsoft.net.object.binary.base64
+    value   : The object must be serialized with 
+            : System.Serialization.Formatters.Binary.BinaryFormatter
+            : and then encoded with base64 encoding.
+    
+    mimetype: application/x-microsoft.net.object.soap.base64
+    value   : The object must be serialized with 
+            : System.Runtime.Serialization.Formatters.Soap.SoapFormatter
+            : and then encoded with base64 encoding.
+
+    mimetype: application/x-microsoft.net.object.bytearray.base64
+    value   : The object must be serialized into a byte array 
+            : using a System.ComponentModel.TypeConverter
+            : and then encoded with base64 encoding.
+    -->
+  <xsd:schema id="root" xmlns="" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata">
+    <xsd:element name="root" msdata:IsDataSet="true">
+      <xsd:complexType>
+        <xsd:choice maxOccurs="unbounded">
+          <xsd:element name="metadata">
+            <xsd:complexType>
+              <xsd:sequence>
+                <xsd:element name="value" type="xsd:string" minOccurs="0" />
+              </xsd:sequence>
+              <xsd:attribute name="name" type="xsd:string" />
+              <xsd:attribute name="type" type="xsd:string" />
+              <xsd:attribute name="mimetype" type="xsd:string" />
+            </xsd:complexType>
+          </xsd:element>
+          <xsd:element name="assembly">
+            <xsd:complexType>
+              <xsd:attribute name="alias" type="xsd:string" />
+              <xsd:attribute name="name" type="xsd:string" />
+            </xsd:complexType>
+          </xsd:element>
+          <xsd:element name="data">
+            <xsd:complexType>
+              <xsd:sequence>
+                <xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1" />
+                <xsd:element name="comment" type="xsd:string" minOccurs="0" msdata:Ordinal="2" />
+              </xsd:sequence>
+              <xsd:attribute name="name" type="xsd:string" msdata:Ordinal="1" />
+              <xsd:attribute name="type" type="xsd:string" msdata:Ordinal="3" />
+              <xsd:attribute name="mimetype" type="xsd:string" msdata:Ordinal="4" />
+            </xsd:complexType>
+          </xsd:element>
+          <xsd:element name="resheader">
+            <xsd:complexType>
+              <xsd:sequence>
+                <xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1" />
+              </xsd:sequence>
+              <xsd:attribute name="name" type="xsd:string" use="required" />
+            </xsd:complexType>
+          </xsd:element>
+        </xsd:choice>
+      </xsd:complexType>
+    </xsd:element>
+  </xsd:schema>
+  <resheader name="resmimetype">
+    <value>text/microsoft-resx</value>
+  </resheader>
+  <resheader name="version">
+    <value>2.0</value>
+  </resheader>
+  <resheader name="reader">
+    <value>System.Resources.ResXResourceReader, System.Windows.Forms, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
+  </resheader>
+  <resheader name="writer">
+    <value>System.Resources.ResXResourceWriter, System.Windows.Forms, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
+  </resheader>
+</root>

backend/HMIWeb/Properties/Settings.Designer.cs

@@ -0,0 +1,30 @@
+//------------------------------------------------------------------------------
+// <auto-generated>
+//     This code was generated by a tool.
+//     Runtime Version:4.0.30319.42000
+//
+//     Changes to this file may cause incorrect behavior and will be lost if
+//     the code is regenerated.
+// </auto-generated>
+//------------------------------------------------------------------------------
+
+namespace HMIWeb.Properties
+{
+
+
+    [global::System.Runtime.CompilerServices.CompilerGeneratedAttribute()]
+    [global::System.CodeDom.Compiler.GeneratedCodeAttribute("Microsoft.VisualStudio.Editors.SettingsDesigner.SettingsSingleFileGenerator", "11.0.0.0")]
+    internal sealed partial class Settings : global::System.Configuration.ApplicationSettingsBase
+    {
+
+        private static Settings defaultInstance = ((Settings)(global::System.Configuration.ApplicationSettingsBase.Synchronized(new Settings())));
+
+        public static Settings Default
+        {
+            get
+            {
+                return defaultInstance;
+            }
+        }
+    }
+}

backend/HMIWeb/Properties/Settings.settings

@@ -0,0 +1,7 @@
+<?xml version='1.0' encoding='utf-8'?>
+<SettingsFile xmlns="http://schemas.microsoft.com/VisualStudio/2004/01/settings" CurrentProfile="(Default)">
+  <Profiles>
+    <Profile Name="(Default)" />
+  </Profiles>
+  <Settings />
+</SettingsFile>

backend/HMIWeb/WebSocketServer.cs

@@ -0,0 +1,222 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Net;
+using System.Net.WebSockets;
+using System.Text;
+using System.Threading;
+using System.Threading.Tasks;
+using System.Windows.Forms;
+
+namespace HMIWeb
+{
+    public class WebSocketServer
+    {
+        private HttpListener _httpListener;
+        private List<WebSocket> _clients = new List<WebSocket>();
+        private MainForm _mainForm;
+
+        public WebSocketServer(string url, MainForm form)
+        {
+            _mainForm = form;
+            _httpListener = new HttpListener();
+            _httpListener.Prefixes.Add(url);
+            _httpListener.Start();
+            Console.WriteLine($"[WS] Listening on {url}");
+            Task.Run(AcceptConnections);
+        }
+
+        private async Task AcceptConnections()
+        {
+            while (_httpListener.IsListening)
+            {
+                try
+                {
+                    var context = await _httpListener.GetContextAsync();
+                    if (context.Request.IsWebSocketRequest)
+                    {
+                        ProcessRequest(context);
+                    }
+                    else
+                    {
+                        context.Response.StatusCode = 400;
+                        context.Response.Close();
+                    }
+                }
+                catch (Exception ex)
+                {
+                    Console.WriteLine($"[WS] Error: {ex.Message}");
+                }
+            }
+        }
+
+        private System.Collections.Concurrent.ConcurrentDictionary<WebSocket, SemaphoreSlim> _socketLocks = new System.Collections.Concurrent.ConcurrentDictionary<WebSocket, SemaphoreSlim>();
+
+        private async void ProcessRequest(HttpListenerContext context)
+        {
+            WebSocketContext wsContext = null;
+            try
+            {
+                wsContext = await context.AcceptWebSocketAsync(subProtocol: null);
+                WebSocket socket = wsContext.WebSocket;
+                _socketLocks.TryAdd(socket, new SemaphoreSlim(1, 1));
+
+                lock (_clients) { _clients.Add(socket); }
+                Console.WriteLine("[WS] Client Connected");
+
+                await ReceiveLoop(socket);
+            }
+            catch (Exception ex)
+            {
+                Console.WriteLine($"[WS] Accept Error: {ex.Message}");
+            }
+            finally
+            {
+                if (wsContext != null)
+                {
+                    WebSocket socket = wsContext.WebSocket;
+                    lock (_clients) { _clients.Remove(socket); }
+                    
+                    if (_socketLocks.TryRemove(socket, out var semaphore))
+                    {
+                        semaphore.Dispose();
+                    }
+                    socket.Dispose();
+                }
+            }
+        }
+
+        private async Task ReceiveLoop(WebSocket socket)
+        {
+            var buffer = new byte[1024 * 4];
+            while (socket.State == WebSocketState.Open)
+            {
+                try
+                {
+                    var result = await socket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);
+                    if (result.MessageType == WebSocketMessageType.Close)
+                    {
+                        await socket.CloseAsync(WebSocketCloseStatus.NormalClosure, "Closing", CancellationToken.None);
+                    }
+                    else if (result.MessageType == WebSocketMessageType.Text)
+                    {
+                        string msg = Encoding.UTF8.GetString(buffer, 0, result.Count);
+                        HandleMessage(msg, socket);
+                    }
+                }
+                catch
+                {
+                    break;
+                }
+            }
+        }
+
+        private async void HandleMessage(string msg, WebSocket socket)
+        {
+            // Simple JSON parsing (manual or Newtonsoft)
+            // Expected format: { "type": "...", "data": ... }
+            try
+            {
+                dynamic json = Newtonsoft.Json.JsonConvert.DeserializeObject(msg);
+                string type = json.type;
+
+                if (type == "GET_CONFIG")
+                {
+                    // Simulate Delay for Loading Screen Test
+                    await Task.Delay(1000);
+
+                    // Send Config back
+                    var bridge = new MachineBridge(_mainForm); // Re-use logic
+                    string configJson = bridge.GetConfig();
+                    var response = new { type = "CONFIG_DATA", data = Newtonsoft.Json.JsonConvert.DeserializeObject(configJson) };
+                    await Send(socket, Newtonsoft.Json.JsonConvert.SerializeObject(response));
+                }
+                else if (type == "SAVE_CONFIG")
+                {
+                    string configJson = Newtonsoft.Json.JsonConvert.SerializeObject(json.data);
+                    var bridge = new MachineBridge(_mainForm);
+                    bridge.SaveConfig(configJson);
+                }
+                else if (type == "CONTROL")
+                {
+                    string cmd = json.command;
+                    _mainForm.Invoke(new Action(() => _mainForm.HandleCommand(cmd)));
+                }
+                else if (type == "MOVE")
+                {
+                    string axis = json.axis;
+                    double val = json.value;
+                    _mainForm.Invoke(new Action(() => _mainForm.SetTargetPosition(axis, val)));
+                }
+                else if (type == "SET_IO")
+                {
+                    int id = json.id;
+                    bool state = json.state;
+                    _mainForm.Invoke(new Action(() => _mainForm.SetOutput(id, state)));
+                }
+            }
+            catch (Exception ex)
+            {
+                Console.WriteLine($"[WS] Msg Error: {ex.Message}");
+            }
+        }
+
+        private async Task Send(WebSocket socket, string message)
+        {
+            if (_socketLocks.TryGetValue(socket, out var semaphore))
+            {
+                await semaphore.WaitAsync();
+                try
+                {
+                    if (socket.State == WebSocketState.Open)
+                    {
+                        byte[] buffer = Encoding.UTF8.GetBytes(message);
+                        await socket.SendAsync(new ArraySegment<byte>(buffer), WebSocketMessageType.Text, true, CancellationToken.None);
+                    }
+                }
+                finally
+                {
+                    semaphore.Release();
+                }
+            }
+        }
+
+        public async void Broadcast(string message)
+        {
+            byte[] buffer = Encoding.UTF8.GetBytes(message);
+            WebSocket[] clientsCopy;
+            
+            lock (_clients) 
+            { 
+                clientsCopy = _clients.ToArray(); 
+            }
+
+            foreach (var client in clientsCopy)
+            {
+                if (client.State == WebSocketState.Open && _socketLocks.TryGetValue(client, out var semaphore))
+                {
+                    // Fire and forget, but safely
+                    _ = Task.Run(async () =>
+                    {
+                        // Try to get lock immediately. If busy (sending previous frame), skip this frame to prevent lag.
+                        if (await semaphore.WaitAsync(0)) 
+                        {
+                            try
+                            {
+                                if (client.State == WebSocketState.Open)
+                                {
+                                    await client.SendAsync(new ArraySegment<byte>(buffer), WebSocketMessageType.Text, true, CancellationToken.None);
+                                }
+                            }
+                            catch { /* Ignore send errors */ }
+                            finally
+                            {
+                                semaphore.Release();
+                            }
+                        }
+                    });
+                }
+            }
+        }
+    }
+}

backend/HMIWeb/packages.config

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<packages>
+  <package id="Microsoft.Web.WebView2" version="1.0.3595.46" targetFramework="net48" />
+  <package id="Newtonsoft.Json" version="13.0.4" targetFramework="net48" />
+</packages>