update

RobotApp.Client/MainLayout.razor

@@ -71,7 +71,7 @@
     public NavModel[] Navs = [
         new(){Icon = "mdi-view-dashboard", Path="/", Label = "Dashboard", Match = NavLinkMatch.All},
         // new(){Icon = "mdi-map-legend", Path="/maps-manager", Label = "Mapping", Match = NavLinkMatch.All},
-        new(){Icon = "mdi-robot", Path="/robot-monitor", Label = "Robot Monitor", Match = NavLinkMatch.All},
+        new(){Icon = "mdi-monitor", Path="/robot-monitor", Label = "Robot Monitor", Match = NavLinkMatch.All},
         new(){Icon = "mdi-application-cog", Path="/robot-config", Label = "Config", Match = NavLinkMatch.All},
     ];
 

RobotApp.Client/Pages/Components/Monitor/RobotMonitorView.razor

@@ -25,7 +25,7 @@
                 <span>X: @MonitorData.RobotPosition.X.ToString("F2")m | Y: @MonitorData.RobotPosition.Y.ToString("F2")m | θ: @((MonitorData.RobotPosition.Theta * 180 / Math.PI).ToString("F1"))°</span>
             </div>
         }
-        <MudChip T="string" Color="@(IsConnected ? Color.Success : Color.Error)" Size="Size.Small">
+        <MudChip T="string" Color="@(IsConnected? Color.Success: Color.Error)" Size="Size.Small">
             @(IsConnected ? "Connected" : "Disconnected")
         </MudChip>
     </div>
@@ -58,10 +58,10 @@
                     {
                         <circle cx="@WorldToSvgX(node.NodePosition.X)"
                                 cy="@WorldToSvgY(node.NodePosition.Y)"
-                                r="0.1"
+                                r="@GetNodeRadius()"
                                 fill="#66BB6A"
                                 stroke="#555"
-                                stroke-width="0.02" />
+                                stroke-width="@GetNodeStrokeWidth()" />
                     }
                 }
 
@@ -69,11 +69,14 @@
                 @if (MonitorData?.RobotPosition != null)
                 {
                     <g transform="@GetRobotTransform()">
-                        <image href="images/AMR-250.png" 
+                        @{
-                               x="-0.303" 
+                            var (robotX, robotY, robotWidth, robotHeight) = GetRobotSize();
-                               y="-0.553" 
+                        }
-                               width="0.606" 
+                        <image href="images/AMR-250.png"
-                               height="1.106" 
+                               x="@robotX"
+                               y="@robotY"
+                               width="@robotWidth"
+                               height="@robotHeight"
                                preserveAspectRatio="xMidYMid meet" />
                     </g>
                 }
@@ -163,6 +166,46 @@
         return $"translate({x}, {y}) rotate({angleDegrees})";
     }
 
+    private (double x, double y, double width, double height) GetRobotSize()
+    {
+        // Kích thước robot trong world coordinates (mét)
+        const double RobotWidthMeters = 0.606;
+        const double RobotLengthMeters = 1.106;
+        
+        // Điều chỉnh kích thước dựa trên ZoomScale
+        // Tăng kích thước lên 1.5x để robot to hơn
+        double scaleFactor = 3 / ZoomScale; // Tăng kích thước hiển thị
+        
+        double width = RobotWidthMeters * scaleFactor;
+        double height = RobotLengthMeters * scaleFactor;
+        double x = -width / 2;
+        double y = -height / 2;
+        
+        return (x, y, width, height);
+    }
+
+    private double GetNodeRadius()
+    {
+        // Kích thước node cơ bản trong world coordinates - tăng lên 1.5x
+        const double BaseNodeRadius = 0.15;
+        
+        // Điều chỉnh theo ZoomScale tương tự robot
+        double scaleFactor = 1.5 / ZoomScale; // Tăng kích thước hiển thị
+        
+        return BaseNodeRadius * scaleFactor;
+    }
+
+    private double GetNodeStrokeWidth()
+    {
+        // Stroke width cơ bản - tăng lên một chút
+        const double BaseStrokeWidth = 0.03;
+        
+        // Điều chỉnh theo ZoomScale
+        double scaleFactor = 1.5 / ZoomScale;
+        
+        return BaseStrokeWidth * scaleFactor;
+    }
+
     private double WorldToSvgX(double worldX)
     {
         return worldX;
@@ -178,9 +221,20 @@
     {
         if (MonitorData is not null && MonitorData.EdgeStates.Length > 0)
         {
-            var path = MonitorData.EdgeStates;
+            var path = MonitorData.EdgeStates.Select(e => new EdgeStateDto
+            {
+                Degree = e.Degree,
+                StartX = WorldToSvgX(e.StartX),
+                StartY = WorldToSvgY(e.StartY),
+                EndX = WorldToSvgX(e.EndX),
+                EndY = WorldToSvgY(e.EndY),
+                ControlPoint1X = WorldToSvgX(e.ControlPoint1X),
+                ControlPoint1Y = WorldToSvgY(e.ControlPoint1Y),
+                ControlPoint2X = WorldToSvgX(e.ControlPoint2X),
+                ControlPoint2Y = WorldToSvgY(e.ControlPoint2Y),
+            }).ToList();
             var inPath = $"M {path[0].StartX} {path[0].StartY}";
-            for (int i = 0; i < path.Length; i++)
+            for (int i = 0; i < path.Count; i++)
             {
                 if (path[i].Degree == 1) inPath = $"{inPath} L {path[i].EndX} {path[i].EndY}";
                 else if (path[i].Degree == 2) inPath = $"{inPath} Q {path[i].ControlPoint1X} {path[i].ControlPoint1Y} {path[i].EndX} {path[i].EndY}";