draw images map

RobotApp.Client/Pages/Components/Mapping/MapView.razor

@@ -1,8 +1,25 @@
 @inject IJSRuntime JS
+@inject HttpClient Http
 @using Excubo.Blazor.Canvas.Contexts
 
 <div class="view">
     <div class="toolbar">
+        <MudTooltip Text="Zoom In" role="button" Placement="Placement.Bottom" Color="Color.Info">
+            <button type="button" class="btn btn-secondary action-button" @onclick="ResetView">
+                <i class="mdi mdi-magnify-plus-outline icon-button"></i>
+            </button>
+        </MudTooltip>
+        <MudTooltip Text="Zoom Out" role="button" Placement="Placement.Bottom" Color="Color.Info">
+            <button type="button" class="btn btn-secondary action-button" @onclick="ResetView">
+                <i class="mdi mdi-magnify-minus-outline icon-button"></i>
+            </button>
+        </MudTooltip>
+        <MudTooltip Text="Reset View" role="button" Placement="Placement.Bottom" Color="Color.Info">
+            <button type="button" class="btn btn-secondary action-button" @onclick="ResetView">
+                <i class="mdi mdi-fit-to-screen-outline icon-button"></i>
+            </button>
+        </MudTooltip>
+        <MudSpacer />
         <MudTooltip Text="Start Localization" role="button" Placement="Placement.Bottom" Color="Color.Info">
             <button type="button" class="btn btn-secondary action-button" disabled="@(false)">
                 <i class="mdi mdi-play icon-button"></i>
@@ -13,44 +30,29 @@
                 <i class="mdi mdi-pause icon-button"></i>
             </button>
         </MudTooltip>
-        <MudTooltip Text="Reset View" role="button" Placement="Placement.Bottom" Color="Color.Info">
-            <button type="button" class="btn btn-secondary action-button" @onclick="ResetView">
-                <i class="mdi mdi-restore icon-button"></i>
+        <MudTooltip Text="Start Mapping" role="button" Placement="Placement.Bottom" Color="Color.Info">
+            <button type="button" class="btn btn-secondary action-button" disabled="@(false)">
+                <i class="mdi mdi-play icon-button"></i>
+            </button>
+        </MudTooltip>
+        <MudTooltip Text="Stop Mapping" role="button" Placement="Placement.Bottom" Color="Color.Info">
+            <button type="button" class="btn btn-secondary action-button" disabled="@(true)">
+                <i class="mdi mdi-pause icon-button"></i>
+            </button>
+        </MudTooltip>
+        <MudSpacer />
+        <MudTooltip Text="Reload Map" role="button" Placement="Placement.Bottom" Color="Color.Info">
+            <button type="button" class="btn btn-secondary action-button" @onclick="ReloadMapImage">
+                <i class="mdi mdi-map-outline icon-button"></i>
             </button>
         </MudTooltip>
-        <div class="ms-auto d-flex align-items-center">
-            <div class="zoom-info-container">
-                <small class="zoom-info">
-                    <span class="info-item">
-                        <i class="mdi mdi-magnify"></i>
-                        Zoom: @($"{ZoomScale:F2}x")
-                    </span>
-                    <span class="info-separator">|</span>
-                    <span class="info-item">
-                        <i class="mdi mdi-crosshairs-gps"></i>
-                        Mouse: (@($"{MouseX:F0}"), @($"{MouseY:F0}"))
-                    </span>
-                    <span class="info-separator">|</span>
-                    <span class="info-item">
-                        <i class="mdi mdi-map-marker"></i>
-                        World: (@($"{WorldMouseX:F2}m"), @($"{WorldMouseY:F2}m"))
-                    </span>
-                    <span class="info-separator">|</span>
-                    <span class="info-item">
-                        <i class="mdi mdi-map-marker"></i>
-                        Translate: (@($"{CanvasTranslateX:F2}"), @($"{CanvasTranslateY:F2}"))
-                    </span>
-                </small>
-            </div>
-        </div>
     </div>
-    <div @ref="ViewContainerRef" class="d-flex position-relative w-100 flex-grow-1 overflow-hidden">
+    <div @ref="ViewContainerRef">
         <canvas @ref="CanvasRef"
                 @onwheel="HandleWheel"
                 @onwheel:preventDefault="true"
                 @onmousemove="HandleMouseMove"
-                @onmouseleave="HandleMouseLeave"
-                style="display: block; cursor: crosshair; transform: scale(1, -1)"></canvas>
+                @onmouseleave="HandleMouseLeave"></canvas>
     </div>
 </div>
 
@@ -82,6 +84,20 @@
 
     private const double RulerHeight = 20;
 
+    private const double RobotWidth = 0.606;
+    private const double RobotLength = 1.106;
+
+    private bool RobotImageLoaded = false;
+    private bool MapImageLoaded = false;
+
+    private const double ImageX = -10;
+    private const double ImageY = -10;
+    private const double ImageResolution = 0.05;
+
+    private double MapImageWidth = 0;
+    private double MapImageHeight = 0;
+    private const string MAP_CACHE_KEY = "map_image";
+
     protected override async Task OnAfterRenderAsync(bool first_render)
     {
         await base.OnAfterRenderAsync(first_render);
@@ -97,25 +113,316 @@
         CanvasTranslateX = CanvasWidth / 2;
         CanvasTranslateY = CanvasHeight / 2;
 
+        await LoadRobotImage();
+        await LoadMapImage();
+
         await DrawCanvas();
     }
 
+    private async Task LoadRobotImage()
+    {
+        try
+        {
+            await JS.InvokeVoidAsync("preloadImage", "images/AMR-250.png");
+            RobotImageLoaded = true;
+        }
+        catch
+        {
+            RobotImageLoaded = false;
+        }
+    }
+
+    private async Task LoadMapImage()
+    {
+        try
+        {
+            MapImageLoaded = false;
+            string baseUrl = Http.BaseAddress?.ToString() ?? "";
+            string apiUrl = $"{baseUrl}api/images/map";
+            await JS.InvokeVoidAsync("preloadImageFromUrl", apiUrl, MAP_CACHE_KEY);
+
+            var imageDimensions = await JS.InvokeAsync<ImageDimensions>("getImageDimensions", MAP_CACHE_KEY);
+            MapImageWidth = imageDimensions.Width * ImageResolution;
+            MapImageHeight = imageDimensions.Height * ImageResolution;
+            if (MapImageWidth > 0 && MapImageHeight > 0) MapImageLoaded = true;
+        }
+        catch
+        {
+            MapImageLoaded = false;
+        }
+    }
+
     private async Task DrawCanvas()
     {
         await using var ctx = await JS.GetContext2DAsync(CanvasRef);
 
         await ctx.ClearRectAsync(0, 0, CanvasWidth, CanvasHeight);
 
-        // Draw rulers first (outside transform)
         await DrawRulers(ctx);
 
         await ctx.SaveAsync();
 
         await ctx.TranslateAsync(CanvasTranslateX, CanvasTranslateY);
         await ctx.ScaleAsync(ZoomScale, ZoomScale);
-
+        
+        await DrawMapImage(ctx);
         await DrawGrid(ctx);
         await DrawAxes(ctx);
+        await DrawLaserScannerPoints(ctx);
+        await ctx.RestoreAsync();
+
+        if (IsMouseInCanvas)
+        {
+            await DrawMouseIndicator(ctx);
+        }
+    }
+
+    private async Task DrawMapImage(Context2D ctx)
+    {
+        if (!MapImageLoaded)
+        {
+            return; 
+        }
+
+        await ctx.SaveAsync();
+
+        try
+        {
+
+            double imageWidthCanvas = MapImageWidth * BASE_PIXELS_PER_METER;
+            double imageHeightCanvas = MapImageHeight * BASE_PIXELS_PER_METER;
+
+            double mapCanvasX = ImageX * BASE_PIXELS_PER_METER;
+            double mapCanvasY = (ImageY + MapImageHeight) * BASE_PIXELS_PER_METER;
+
+            bool success = await JS.InvokeAsync<bool>("drawCachedImageOnCanvas", 
+                CanvasRef, 
+                MAP_CACHE_KEY,
+                mapCanvasX,                                    
+                mapCanvasY - imageHeightCanvas,               
+                imageWidthCanvas,                             
+                imageHeightCanvas);   
+        }
+        catch
+        {
+        }
+
+        await ctx.RestoreAsync();
+    }
+
+    private async Task DrawLaserScannerPoints(Context2D ctx)
+    {
+        var scanData = GenerateLaserScanData();
+
+        double robotCanvasX = scanData.RobotX * BASE_PIXELS_PER_METER;
+        double robotCanvasY = scanData.RobotY * BASE_PIXELS_PER_METER;
+
+        await ctx.SaveAsync();
+
+        if (scanData.Points.Count > 0)
+        {
+            await ctx.BeginPathAsync();
+
+            for (int i = 0; i < scanData.Points.Count; i++)
+            {
+                var point = scanData.Points[i];
+                double pointCanvasX = point.X * BASE_PIXELS_PER_METER;
+                double pointCanvasY = point.Y * BASE_PIXELS_PER_METER;
+
+                if (i == 0)
+                {
+                    await ctx.MoveToAsync(pointCanvasX, pointCanvasY);
+                }
+                else
+                {
+                    await ctx.LineToAsync(pointCanvasX, pointCanvasY);
+                }
+            }
+
+            await ctx.StrokeStyleAsync("rgba(255, 100, 100, 0.8)"); 
+            await ctx.LineWidthAsync(2 / ZoomScale);
+            await ctx.StrokeAsync();
+
+            await ctx.LineToAsync(robotCanvasX, robotCanvasY); 
+            await ctx.ClosePathAsync();
+            await ctx.FillStyleAsync("rgba(255, 100, 100, 0.1)"); 
+            await ctx.FillAsync(FillRule.NonZero);
+        }
+
+        await DrawRobotImage(ctx, robotCanvasX, robotCanvasY, scanData.RobotOrientation);
+        await DrawRobotOrientationArrows(ctx, robotCanvasX, robotCanvasY, scanData.RobotOrientation);
+
+        await ctx.RestoreAsync();
+    }
+
+    private async Task DrawRobotImage(Context2D ctx, double robotCanvasX, double robotCanvasY, double robotOrientation)
+    {
+        if (!RobotImageLoaded)
+        {
+            // Fallback to circle if image not loaded
+            await ctx.FillStyleAsync("rgba(0, 255, 0, 0.8)");
+            await ctx.BeginPathAsync();
+            await ctx.ArcAsync(robotCanvasX, robotCanvasY, 8 / ZoomScale, 0, Math.PI * 2);
+            await ctx.FillAsync(FillRule.NonZero);
+            return;
+        }
+
+        await ctx.SaveAsync();
+
+        double robotWidthPixels = RobotWidth * BASE_PIXELS_PER_METER;
+        double robotLengthPixels = RobotLength * BASE_PIXELS_PER_METER;
+
+        double scaledWidth = ZoomScale < 1 ? robotWidthPixels / ZoomScale : robotWidthPixels;
+        double scaledLength = ZoomScale < 1 ? robotLengthPixels / ZoomScale : robotLengthPixels;
+
+        await ctx.TranslateAsync(robotCanvasX, robotCanvasY);
+        await ctx.RotateAsync(robotOrientation);
+
+        try
+        {
+            bool success = await JS.InvokeAsync<bool>("drawImageOnCanvas", 
+                CanvasRef, 
+                "images/AMR-250.png",
+                -scaledLength / 2, 
+                -scaledWidth / 2,  
+                scaledLength,     
+                scaledWidth);      
+
+            if (!success)
+            {
+                await ctx.FillStyleAsync("rgba(0, 255, 0, 0.8)");
+                await ctx.FillRectAsync(-scaledLength / 2, -scaledWidth / 2, scaledLength, scaledWidth);
+            }
+        }
+        catch
+        {
+            await ctx.FillStyleAsync("rgba(0, 255, 0, 0.8)");
+            await ctx.FillRectAsync(-scaledLength / 2, -scaledWidth / 2, scaledLength, scaledWidth);
+        }
+
+        await ctx.RestoreAsync();
+    }
+
+    private async Task DrawRobotOrientationArrows(Context2D ctx, double robotCanvasX, double robotCanvasY, double robotOrientation)
+    {
+        double arrowLength = 30 / ZoomScale;
+        double arrowHeadSize = 10 / ZoomScale;
+
+        await ctx.StrokeStyleAsync("rgba(0, 100, 255, 1.0)"); 
+        await ctx.FillStyleAsync("rgba(0, 100, 255, 1.0)");
+        await ctx.LineWidthAsync(3 / ZoomScale);
+
+        await ctx.BeginPathAsync();
+        await ctx.MoveToAsync(robotCanvasX, robotCanvasY);
+        double xAxisEndX = robotCanvasX + Math.Cos(robotOrientation) * (arrowLength - arrowHeadSize + 1);
+        double xAxisEndY = robotCanvasY + Math.Sin(robotOrientation) * (arrowLength - arrowHeadSize + 1);
+        await ctx.LineToAsync(xAxisEndX, xAxisEndY);
+        await ctx.StrokeAsync();
+
+        await ctx.BeginPathAsync();
+        double xArrowTipX = robotCanvasX + Math.Cos(robotOrientation) * arrowLength;
+        double xArrowTipY = robotCanvasY + Math.Sin(robotOrientation) * arrowLength;
+        await ctx.MoveToAsync(xArrowTipX, xArrowTipY);
+        double xArrowAngle = robotOrientation + Math.PI;
+        await ctx.LineToAsync(xArrowTipX + Math.Cos(xArrowAngle + Math.PI / 6) * arrowHeadSize, xArrowTipY + Math.Sin(xArrowAngle + Math.PI / 6) * arrowHeadSize);
+        await ctx.LineToAsync(xArrowTipX + Math.Cos(xArrowAngle - Math.PI / 6) * arrowHeadSize, xArrowTipY + Math.Sin(xArrowAngle - Math.PI / 6) * arrowHeadSize);
+        await ctx.ClosePathAsync();
+        await ctx.FillAsync(FillRule.NonZero);
+
+        await ctx.StrokeStyleAsync("rgba(255, 50, 50, 1.0)");
+        await ctx.FillStyleAsync("rgba(255, 50, 50, 1.0)");
+        await ctx.LineWidthAsync(3 / ZoomScale);
+
+        double yAxisAngle = robotOrientation + Math.PI / 2;
+
+        await ctx.BeginPathAsync();
+        await ctx.MoveToAsync(robotCanvasX, robotCanvasY);
+        double yAxisEndX = robotCanvasX + Math.Cos(yAxisAngle) * (arrowLength - arrowHeadSize + 1);
+        double yAxisEndY = robotCanvasY + Math.Sin(yAxisAngle) * (arrowLength - arrowHeadSize + 1);
+        await ctx.LineToAsync(yAxisEndX, yAxisEndY);
+        await ctx.StrokeAsync();
+
+        await ctx.BeginPathAsync();
+        double yArrowTipX = robotCanvasX + Math.Cos(yAxisAngle) * arrowLength;
+        double yArrowTipY = robotCanvasY + Math.Sin(yAxisAngle) * arrowLength;
+        await ctx.MoveToAsync(yArrowTipX, yArrowTipY);
+        double yArrowAngle = yAxisAngle + Math.PI;
+        await ctx.LineToAsync(yArrowTipX + Math.Cos(yArrowAngle + Math.PI / 6) * arrowHeadSize, yArrowTipY + Math.Sin(yArrowAngle + Math.PI / 6) * arrowHeadSize);
+        await ctx.LineToAsync(yArrowTipX + Math.Cos(yArrowAngle - Math.PI / 6) * arrowHeadSize, yArrowTipY + Math.Sin(yArrowAngle - Math.PI / 6) * arrowHeadSize);
+        await ctx.ClosePathAsync();
+        await ctx.FillAsync(FillRule.NonZero);
+    }
+
+    private async Task DrawMouseIndicator(Context2D ctx)
+    {
+        await ctx.SaveAsync();
+
+        await ctx.StrokeStyleAsync("rgba(255, 50, 50, 0.8)");
+        await ctx.LineWidthAsync(1);
+        await ctx.SetLineDashAsync(new double[] { 3, 3 });
+
+        await ctx.BeginPathAsync();
+        await ctx.MoveToAsync(MouseX, RulerHeight);
+        await ctx.LineToAsync(MouseX, CanvasHeight);
+        await ctx.StrokeAsync();
+
+        await ctx.BeginPathAsync();
+        await ctx.MoveToAsync(RulerHeight, MouseY);
+        await ctx.LineToAsync(CanvasWidth, MouseY);
+        await ctx.StrokeAsync();
+
+        await ctx.SetLineDashAsync(new double[] { });
+
+        const double labelPadding = 7;
+        const double labelMargin = 8;
+
+        string coordinateText = $"({WorldMouseX:F2}m, {WorldMouseY:F2}m)";
+
+        await ctx.FontAsync("bold 12px Arial");
+        var textMetrics = await ctx.MeasureTextAsync(coordinateText);
+        double textWidth = textMetrics.Width;
+        double textHeight = 16;
+
+        double labelX = MouseX + labelMargin;
+        double labelY = MouseY - textHeight - labelPadding * 2 - labelMargin;
+
+        if (labelX + textWidth + labelPadding * 2 > CanvasWidth)
+        {
+            labelX = MouseX - textWidth - labelPadding * 2 - labelMargin;
+        }
+        if (labelY - textHeight - labelPadding * 2 < RulerHeight)
+        {
+            labelY = MouseY + labelMargin;
+        }
+
+        await ctx.FillStyleAsync("rgba(0, 0, 0, 0.8)");
+        await ctx.FillRectAsync(labelX, labelY, textWidth + labelPadding * 2, textHeight + labelPadding * 2);
+
+        await ctx.StrokeStyleAsync("rgba(255,255,255,0.6)");
+        await ctx.LineWidthAsync(1);
+        await ctx.StrokeRectAsync(labelX, labelY, textWidth + labelPadding * 2, textHeight + labelPadding * 2);
+
+        await ctx.FillStyleAsync("rgba(255, 50, 50, 0.9)");
+        await ctx.BeginPathAsync();
+        await ctx.ArcAsync(MouseX, MouseY, 3, 0, Math.PI * 2);
+        await ctx.FillAsync(FillRule.NonZero);
+
+        await ctx.StrokeStyleAsync("rgba(255, 255, 255, 0.8)");
+        await ctx.LineWidthAsync(2);
+        await ctx.BeginPathAsync();
+        await ctx.ArcAsync(MouseX, MouseY, 6, 0, Math.PI * 2);
+        await ctx.StrokeAsync();
+
+        await ctx.SaveAsync();
+
+        await ctx.TranslateAsync(labelX + labelPadding + textWidth / 2, labelY + textHeight / 2);
+        await ctx.ScaleAsync(1, -1);
+
+        await ctx.FillStyleAsync("white");
+        await ctx.FontAsync("bold 12px Arial");
+        await ctx.TextAlignAsync(TextAlign.Center);
+        await ctx.TextBaseLineAsync(TextBaseLine.Bottom);
+        await ctx.FillTextAsync(coordinateText, 0, 0);
 
         await ctx.RestoreAsync();
     }
@@ -137,14 +444,14 @@
     {
         double pixelsPerMeter = BASE_PIXELS_PER_METER * ZoomScale;
 
-        if (pixelsPerMeter >= 400) return 0.1;    
+        if (pixelsPerMeter >= 400) return 0.1;
         else if (pixelsPerMeter >= 200) return 0.2;
         else if (pixelsPerMeter >= 100) return 0.5;
         else if (pixelsPerMeter >= 50) return 1.0;
         else if (pixelsPerMeter >= 25) return 2.0;
         else if (pixelsPerMeter >= 12) return 5.0;
         else if (pixelsPerMeter >= 6) return 10.0;
-        else return 20.0;                           
+        else return 20.0;
     }
 
     private async Task DrawXRuler(Context2D ctx, double rulerHeight, double visibleWorldLeft, double visibleWorldRight, double scaleInterval)
@@ -184,17 +491,17 @@
             if (isMajorTick && canvasX >= -20 && canvasX <= CanvasWidth + 20)
             {
                 await ctx.SaveAsync();
-                
+
                 await ctx.TranslateAsync(canvasX, rulerHeight - tickHeight - 8);
-                await ctx.ScaleAsync(1, -1); 
-                
+                await ctx.ScaleAsync(1, -1);
+
                 await ctx.FillStyleAsync("blue");
                 await ctx.FontAsync("bold 10px Arial");
                 await ctx.TextAlignAsync(TextAlign.Center);
 
                 string labelText = FormatRulerLabel(worldX, scaleInterval);
                 await ctx.FillTextAsync(labelText, 0, 0);
-                
+
                 await ctx.RestoreAsync();
             }
         }
@@ -240,9 +547,9 @@
 
                 await ctx.TranslateAsync(rulerWidth - tickWidth - 2, canvasY);
                 await ctx.ScaleAsync(1, -1);
-                await ctx.RotateAsync(-Math.PI / 2); 
+                await ctx.RotateAsync(-Math.PI / 2);
 
-                await ctx.FillStyleAsync("blue"); 
+                await ctx.FillStyleAsync("blue");
                 await ctx.FontAsync("bold 10px Arial");
                 await ctx.TextAlignAsync(TextAlign.Center);
 
@@ -264,18 +571,7 @@
 
     private string FormatRulerLabel(double worldValue, double scaleInterval)
     {
-        if (scaleInterval < 1.0)
-        {
-            return $"{worldValue:F1}m"; 
-        }
-        else if (scaleInterval < 10.0)
-        {
-            return $"{worldValue:F0}m"; 
-        }
-        else
-        {
-            return $"{worldValue:F0}m";
-        }
+        return scaleInterval < 1.0 ? $"{worldValue:F1}m" : $"{worldValue:F0}m";
     }
 
     private async Task DrawAxes(Context2D ctx)
@@ -285,23 +581,9 @@
 
         await ctx.FillStyleAsync("red");
         await ctx.BeginPathAsync();
-        await ctx.ArcAsync(originCanvasX, originCanvasY, 10 / ZoomScale, 0, Math.PI * 2);
+        await ctx.ArcAsync(originCanvasX, originCanvasY, 8 / ZoomScale, 0, Math.PI * 2);
         await ctx.FillAsync(FillRule.NonZero);
 
-        await ctx.LineWidthAsync(2 / ZoomScale);
-
-        await ctx.StrokeStyleAsync("blue");
-        await ctx.BeginPathAsync();
-        await ctx.MoveToAsync(-CanvasWidth / ZoomScale, originCanvasY);
-        await ctx.LineToAsync(CanvasWidth / ZoomScale, originCanvasY);
-        await ctx.StrokeAsync();
-
-        await ctx.StrokeStyleAsync("red");
-        await ctx.BeginPathAsync();
-        await ctx.MoveToAsync(originCanvasX, -CanvasHeight / ZoomScale);
-        await ctx.LineToAsync(originCanvasX, CanvasHeight / ZoomScale);
-        await ctx.StrokeAsync();
-
         double gridSpacingMeters = GetGridSpacingMeters();
         double arrowLength = gridSpacingMeters * BASE_PIXELS_PER_METER;
         double arrowHeadSize = 16 / ZoomScale;
@@ -312,13 +594,15 @@
 
         await ctx.BeginPathAsync();
         await ctx.MoveToAsync(originCanvasX, originCanvasY);
-        await ctx.LineToAsync(originCanvasX + arrowLength, originCanvasY);
+        await ctx.LineToAsync(originCanvasX + arrowLength - arrowHeadSize, originCanvasY);
         await ctx.StrokeAsync();
 
         await ctx.BeginPathAsync();
-        await ctx.MoveToAsync(originCanvasX + arrowLength, originCanvasY);
-        await ctx.LineToAsync(originCanvasX + arrowLength - arrowHeadSize, originCanvasY - arrowHeadSize / 2);
-        await ctx.LineToAsync(originCanvasX + arrowLength - arrowHeadSize, originCanvasY + arrowHeadSize / 2);
+        double xArrowTipX = originCanvasX + arrowLength;
+        double xArrowTipY = originCanvasY;
+        await ctx.MoveToAsync(xArrowTipX, xArrowTipY);
+        await ctx.LineToAsync(xArrowTipX - arrowHeadSize, xArrowTipY - arrowHeadSize / 2);
+        await ctx.LineToAsync(xArrowTipX - arrowHeadSize, xArrowTipY + arrowHeadSize / 2);
         await ctx.ClosePathAsync();
         await ctx.FillAsync(FillRule.NonZero);
 
@@ -328,13 +612,15 @@
 
         await ctx.BeginPathAsync();
         await ctx.MoveToAsync(originCanvasX, originCanvasY);
-        await ctx.LineToAsync(originCanvasX, originCanvasY + arrowLength);
+        await ctx.LineToAsync(originCanvasX, originCanvasY + arrowLength - arrowHeadSize);
         await ctx.StrokeAsync();
 
         await ctx.BeginPathAsync();
-        await ctx.MoveToAsync(originCanvasX, originCanvasY + arrowLength);
-        await ctx.LineToAsync(originCanvasX - arrowHeadSize / 2, originCanvasY + arrowLength - arrowHeadSize);
-        await ctx.LineToAsync(originCanvasX + arrowHeadSize / 2, originCanvasY + arrowLength - arrowHeadSize);
+        double yArrowTipX = originCanvasX;
+        double yArrowTipY = originCanvasY + arrowLength;
+        await ctx.MoveToAsync(yArrowTipX, yArrowTipY);
+        await ctx.LineToAsync(yArrowTipX - arrowHeadSize / 2, yArrowTipY - arrowHeadSize);
+        await ctx.LineToAsync(yArrowTipX + arrowHeadSize / 2, yArrowTipY - arrowHeadSize);
         await ctx.ClosePathAsync();
         await ctx.FillAsync(FillRule.NonZero);
     }
@@ -422,8 +708,8 @@
         {
             CanvasTranslateX += e.MovementX;
             CanvasTranslateY -= e.MovementY;
-            await DrawCanvas();
         }
+        await DrawCanvas();
     }
 
     private async Task HandleMouseLeave(MouseEventArgs e)
@@ -474,9 +760,100 @@
         await DrawCanvas();
     }
 
+    private async Task ReloadMapImage()
+    {
+        MapImageLoaded = false;
+        await LoadMapImage();
+        await DrawCanvas();
+        StateHasChanged();
+    }
+
+    private LaserScanData GenerateLaserScanData()
+    {
+        // Robot position (in world coordinates)
+        double robotX = 2; // Robot at origin for demo
+        double robotY = 2;
+        double robotOrientation = 0; // Robot facing right (0 degrees)
+
+        Random random = new Random(42); // Fixed seed for consistent pattern
+
+        // Laser scanner parameters
+        const double maxRange = 8.0; // meters
+        const double minRange = 0.2; // meters (fix: was 7.0, should be minimum)
+        const int numPoints = 270;   // Number of laser points
+        const double startAngle = -Math.PI / 2 - Math.PI / 4;
+        const double endAngle = Math.PI / 2 + Math.PI / 4;
+
+        double angleStep = (endAngle - startAngle) / (numPoints - 1);
+
+        var scanData = new LaserScanData
+        {
+            RobotX = robotX,
+            RobotY = robotY,
+            RobotOrientation = robotOrientation,
+        };
+
+        // Generate laser points
+        for (int i = 0; i < numPoints; i++)
+        {
+            double angle = startAngle + i * angleStep;
+
+            // Random range with some clustering around obstacles
+            double range;
+            if (random.NextDouble() < 0.3) // 30% chance of obstacles
+            {
+                range = random.NextDouble() * 3.0 + 1.0; // 1-4 meters (obstacles)
+            }
+            else if (random.NextDouble() < 0.1) // 10% chance of very close objects
+            {
+                range = random.NextDouble() * 0.8 + 0.2; // 0.2-1.0 meters
+            }
+            else
+            {
+                range = random.NextDouble() * maxRange * 0.7 + maxRange * 0.3; // Far points
+            }
+
+            // Add some noise to make it realistic
+            range += (random.NextDouble() - 0.5) * 0.1;
+            range = Math.Max(minRange, Math.Min(maxRange, range));
+
+            // Calculate point position relative to robot
+            double pointX = robotX + Math.Cos(angle + robotOrientation) * range;
+            double pointY = robotY + Math.Sin(angle + robotOrientation) * range;
+
+            scanData.Points.Add(new LaserScanPoint
+            {
+                X = pointX,
+                Y = pointY
+            });
+        }
+
+        return scanData;
+    }
+
+    public class LaserScanPoint
+    {
+        public double X { get; set; }
+        public double Y { get; set; }
+    }
+
+    public class LaserScanData
+    {
+        public double RobotX { get; set; }
+        public double RobotY { get; set; }
+        public double RobotOrientation { get; set; }
+        public List<LaserScanPoint> Points { get; set; } = new();
+    }
+
     public class DomRect
     {
         public double Width { get; set; }
         public double Height { get; set; }
     }
+
+    public class ImageDimensions
+    {
+        public double Width { get; set; }
+        public double Height { get; set; }
+    }
 }

RobotApp.Client/Pages/Components/Mapping/MapView.razor.css

@@ -30,144 +30,41 @@
             background-color: var(--bs-gray-200);
         }
 
-        .view .toolbar .action-button:hover {
-            background-color: var(--mud-palette-action-hover);
-            transform: translateY(-1px);
-        }
+            .view .toolbar .action-button:hover {
+                background-color: var(--mud-palette-action-hover);
+                transform: translateY(-1px);
+            }
 
-        .view .toolbar .action-button:disabled {
-            opacity: 0.6;
-            cursor: not-allowed;
-        }
+            .view .toolbar .action-button:disabled {
+                opacity: 0.6;
+                cursor: not-allowed;
+            }
 
-        .view .toolbar .action-button:disabled:hover {
-            transform: none;
-            background-color: transparent;
-        }
+                .view .toolbar .action-button:disabled:hover {
+                    transform: none;
+                    background-color: transparent;
+                }
 
         .view .toolbar .icon-button {
             font-size: 1.2rem;
             color: var(--mud-palette-primary);
         }
 
-    .view canvas {
-        transition: cursor 0.2s ease;
+
+    .view > div {
+        display: flex;
+        position: relative;
+        width: 100%;
+        flex-grow: 1;
+        overflow: hidden;
     }
 
-        .view canvas:hover {
-            cursor: crosshair;
+        .view > div > canvas {
+            transition: cursor 0.2s ease;
+            display: block;
+            transform: scale(1, -1);
         }
 
-/* Enhanced zoom and coordinate info styling */
-.zoom-info-container {
-    display: flex;
-    align-items: center;
-    background-color: var(--mud-palette-background);
-    border: 1px solid var(--mud-palette-divider);
-    border-radius: 6px;
-    padding: 0.5rem 0.75rem;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-}
-
-.zoom-info {
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    font-size: 0.8rem;
-    color: var(--mud-palette-text-primary);
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    white-space: nowrap;
-}
-
-.info-item {
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
-    font-weight: 500;
-}
-
-    .info-item i {
-        font-size: 0.9rem;
-        color: var(--mud-palette-primary);
-    }
-
-.info-separator {
-    color: var(--mud-palette-divider);
-    font-weight: 300;
-    margin: 0 0.25rem;
-}
-
-/* Responsive design for info container */
-@media (max-width: 768px) {
-    .zoom-info-container {
-        padding: 0.25rem 0.5rem;
-    }
-    
-    .zoom-info {
-        font-size: 0.7rem;
-        gap: 0.25rem;
-    }
-    
-    .info-item {
-        gap: 0.15rem;
-    }
-    
-    .info-item i {
-        font-size: 0.8rem;
-    }
-}
-
-/* Very small screens - stack vertically */
-@media (max-width: 480px) {
-    .zoom-info {
-        flex-direction: column;
-        gap: 0.15rem;
-        text-align: center;
-    }
-    
-    .info-separator {
-        display: none;
-    }
-    
-    .zoom-info-container {
-        padding: 0.35rem;
-    }
-}
-
-/* Hover effects for info container */
-.zoom-info-container:hover {
-    background-color: var(--mud-palette-action-hover);
-    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
-}
-
-/* Animation for coordinate updates */
-.info-item {
-    transition: color 0.2s ease;
-}
-
-.info-item:hover {
-    color: var(--mud-palette-primary);
-}
-
-/* High contrast mode support */
-@media (prefers-contrast: high) {
-    .zoom-info-container {
-        border-width: 2px;
-        background-color: var(--mud-palette-surface);
-    }
-    
-    .info-item {
-        font-weight: 600;
-    }
-}
-
-/* Dark mode adjustments */
-@media (prefers-color-scheme: dark) {
-    .zoom-info-container {
-        box-shadow: 0 2px 4px rgba(0,0,0,0.3);
-    }
-    
-    .zoom-info-container:hover {
-        box-shadow: 0 4px 8px rgba(0,0,0,0.4);
-    }
-}
+            .view > div > canvas:hover {
+                cursor: crosshair;
+            }

RobotApp.Client/wwwroot/js/canvas.js

@@ -8,4 +8,94 @@
 window.setCanvasSize = (canvas, width, height) => {
     canvas.width = width;
     canvas.height = height;
-}
+}
+
+// Image loading and caching functionality
+window.imageCache = new Map();
+
+window.preloadImage = (imagePath) => {
+    return new Promise((resolve, reject) => {
+        if (window.imageCache.has(imagePath)) {
+            resolve(window.imageCache.get(imagePath));
+            return;
+        }
+
+        const img = new Image();
+        img.onload = () => {
+            window.imageCache.set(imagePath, img);
+            resolve(img);
+        };
+        img.onerror = () => {
+            reject(new Error(`Failed to load image: ${imagePath}`));
+        };
+        img.src = imagePath;
+    });
+};
+
+window.preloadImageFromUrl = (url, cacheKey) => {
+    return new Promise((resolve, reject) => {
+        if (window.imageCache.has(cacheKey)) {
+            resolve(window.imageCache.get(cacheKey));
+            return;
+        }
+
+        const img = new Image();
+        img.onload = () => {
+            window.imageCache.set(cacheKey, img);
+            resolve(img);
+        };
+        img.onerror = (error) => {
+            reject(new Error(`Failed to load image from URL: ${url}`));
+        };
+        
+        // Don't set crossOrigin for same-origin requests
+        // Only set it if you're loading from a different domain
+        // img.crossOrigin = 'anonymous';
+        
+        img.src = url;
+    });
+};
+
+window.getImageDimensions = (cacheKey) => {
+    const img = window.imageCache.get(cacheKey);
+    if (!img) {
+        return { width: 0, height: 0 };
+    }
+    
+    return {
+        width: img.naturalWidth || img.width,
+        height: img.naturalHeight || img.height
+    };
+};
+
+window.drawImageOnCanvas = (canvas, imagePath, x, y, width, height) => {
+    const ctx = canvas.getContext('2d');
+    const img = window.imageCache.get(imagePath);
+    
+    if (!img) {
+        return false;
+    }
+
+    try {
+        ctx.drawImage(img, x, y, width, height);
+        return true;
+    } catch (error) {
+        return false;
+    }
+};
+
+window.drawCachedImageOnCanvas = (canvas, cacheKey, x, y, width, height) => {
+    const ctx = canvas.getContext('2d');
+    const img = window.imageCache.get(cacheKey);
+    
+    if (!img) {
+        return false;
+    }
+
+    try {
+        ctx.drawImage(img, x, y, width, height);
+        return true;
+    } catch (error) {
+        return false;
+    }
+};

RobotApp/Controllers/ImagesController.cs

@@ -1,10 +1,62 @@
-using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Authorization;
+using Microsoft.AspNetCore.Mvc;
+using RobotApp.Services;
 
-namespace RobotApp.Controllers
+namespace RobotApp.Controllers;
+
+[Route("api/[controller]")]
+[ApiController]
+[AllowAnonymous]
+public class ImagesController(Services.Logger<ImagesController> Logger) : ControllerBase
 {
-    [Route("api/[controller]")]
-    [ApiController]
-    public class ImagesController : ControllerBase
+    [HttpGet]
+    [Route("map")]
+    public async Task<IActionResult> GetMapImage()
     {
+        try
+        {
+            await Task.Delay(1);
+            
+            string fileName = "gara20250309.png";
+            string filePath = Path.Combine("maps", fileName);
+            
+            if (System.IO.File.Exists(filePath))
+            {
+                byte[] imageBytes = await System.IO.File.ReadAllBytesAsync(filePath);
+                return File(imageBytes, "image/png");
+            }
+            else
+            {
+                string mapsDir = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "maps");
+                if (Directory.Exists(mapsDir))
+                {
+                    var pngFiles = Directory.GetFiles(mapsDir, "*.png");
+
+                    return NotFound(new 
+                    { 
+                        error = "Map image not found",
+                        searchPath = filePath,
+                        mapsDirectory = mapsDir,
+                        availableFiles = pngFiles.Select(Path.GetFileName).ToArray(),
+                        baseDirectory = AppDomain.CurrentDomain.BaseDirectory
+                    });
+                }
+                else
+                {
+                    Logger.Warning($"GetMapImage: Maps directory does not exist: {mapsDir}");
+                    return NotFound(new 
+                    { 
+                        error = "Maps directory not found",
+                        searchPath = mapsDir,
+                        baseDirectory = AppDomain.CurrentDomain.BaseDirectory
+                    });
+                }
+            }
+        }
+        catch (Exception ex)
+        {
+            Logger.Warning($"GetMapImage: Exception occurred - {ex.Message}");
+            return StatusCode(500, new { error = "Internal server error", message = ex.Message, stackTrace = ex.StackTrace });
+        }
     }
 }

RobotApp/Program.cs

@@ -22,6 +22,9 @@ builder.Services.AddScoped<AuthenticationStateProvider, IdentityRevalidatingAuth
 builder.Services.AddMudServices();
 builder.Services.AddAuthorization();
 
+// Add Controllers for API endpoints
+builder.Services.AddControllers();
+
 var connectionString = builder.Configuration.GetConnectionString("DefaultConnection") ?? throw new InvalidOperationException("Connection string 'DefaultConnection' not found.");
 Action<DbContextOptionsBuilder> appDbOptions = options => options.UseSqlite(connectionString, b => b.MigrationsAssembly("RobotApp"));
 
@@ -68,6 +71,10 @@ app.UseAuthorization();
 app.UseAntiforgery();
 
 app.MapStaticAssets();
+
+// Map API Controllers
+app.MapControllers();
+
 app.MapRazorComponents<App>()
     .AddInteractiveServerRenderMode()
     .AddInteractiveWebAssemblyRenderMode()

RobotApp/Properties/launchSettings.json

@@ -5,6 +5,7 @@
         "commandName": "Project",
         "dotnetRunMessages": true,
         "launchBrowser": true,
+        "workingDirectory": "$(TargetDir)",
         "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
         "applicationUrl": "http://localhost:5229",
         "environmentVariables": {
@@ -15,6 +16,7 @@
         "commandName": "Project",
         "dotnetRunMessages": true,
         "launchBrowser": true,
+        "workingDirectory": "$(TargetDir)",
         "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
         "applicationUrl": "https://localhost:7150;http://localhost:5229",
         "environmentVariables": {