467 lines
15 KiB
Plaintext
467 lines
15 KiB
Plaintext
@inject IJSRuntime JS
|
|
@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="ZoomIn">
|
|
<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="ZoomOut">
|
|
<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>
|
|
</button>
|
|
</MudTooltip>
|
|
<MudTooltip Text="Stop Localization" 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>
|
|
<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-plus 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-stop icon-button"></i>
|
|
</button>
|
|
</MudTooltip>
|
|
</div>
|
|
<div @ref="ViewContainerRef">
|
|
<canvas @ref="CanvasRef"
|
|
@onwheel="HandleWheel"
|
|
@onmousemove="HandleMouseMove"
|
|
@onmouseleave="HandleMouseLeave"
|
|
@ontouchstart="HandleTouchStart"
|
|
@ontouchmove="HandleTouchMove"
|
|
@ontouchend="HandleTouchEnd"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
@code {
|
|
private ElementReference CanvasRef;
|
|
private ElementReference ViewContainerRef;
|
|
|
|
private double ZoomScale = 1.0;
|
|
private const double MIN_ZOOM = 0.1;
|
|
private const double MAX_ZOOM = 5.0;
|
|
|
|
private const double BASE_PIXELS_PER_METER = 50.0;
|
|
|
|
private bool IsMouseInCanvas = false;
|
|
private double MouseX;
|
|
private double MouseY;
|
|
|
|
private double OriginX = 0;
|
|
private double OriginY = 0;
|
|
|
|
private double WorldMouseX;
|
|
private double WorldMouseY;
|
|
|
|
private double CanvasWidth;
|
|
private double CanvasHeight;
|
|
|
|
private double CanvasTranslateX = 0;
|
|
private double CanvasTranslateY = 0;
|
|
|
|
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 = -5;
|
|
private const double ImageResolution = 0.05;
|
|
|
|
private double MapImageWidth = 0;
|
|
private double MapImageHeight = 0;
|
|
private const string MAP_CACHE_KEY = "map_image";
|
|
|
|
private TouchPoint? LastTouchPoint;
|
|
private TouchPoint? LastSecondTouchPoint;
|
|
private double LastTouchDistance = 0;
|
|
private bool IsTouching = false;
|
|
|
|
protected override async Task OnAfterRenderAsync(bool first_render)
|
|
{
|
|
await base.OnAfterRenderAsync(first_render);
|
|
if (!first_render) return;
|
|
|
|
var containerSize = await JS.InvokeAsync<DomRect>("getElementSize", ViewContainerRef);
|
|
|
|
CanvasWidth = containerSize.Width;
|
|
CanvasHeight = containerSize.Height;
|
|
|
|
await JS.InvokeVoidAsync("setCanvasSize", CanvasRef, CanvasWidth, CanvasHeight);
|
|
|
|
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 apiUrl = "api/images/mapping";
|
|
await JS.InvokeVoidAsync("preloadImageFromUrl", apiUrl, MAP_CACHE_KEY);
|
|
|
|
var imageDimensions = await JS.InvokeAsync<DomRect>("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 ResetView()
|
|
{
|
|
CanvasTranslateX = CanvasWidth / 2;
|
|
CanvasTranslateY = CanvasHeight / 2;
|
|
ZoomScale = 1.0;
|
|
StateHasChanged();
|
|
await DrawCanvas();
|
|
}
|
|
|
|
private async Task ZoomIn()
|
|
{
|
|
const double zoomFactor = 0.15;
|
|
double oldZoom = ZoomScale;
|
|
|
|
ZoomScale = Math.Min(MAX_ZOOM, ZoomScale * (1 + zoomFactor));
|
|
|
|
if (Math.Abs(ZoomScale - oldZoom) < 0.001) return;
|
|
|
|
await ZoomAtCenter(oldZoom);
|
|
}
|
|
|
|
private async Task ZoomOut()
|
|
{
|
|
const double zoomFactor = 0.15;
|
|
double oldZoom = ZoomScale;
|
|
|
|
ZoomScale = Math.Max(MIN_ZOOM, ZoomScale * (1 - zoomFactor));
|
|
|
|
if (Math.Abs(ZoomScale - oldZoom) < 0.001) return;
|
|
|
|
await ZoomAtCenter(oldZoom);
|
|
}
|
|
|
|
private async Task ZoomAtCenter(double oldZoom)
|
|
{
|
|
double centerX = CanvasWidth / 2;
|
|
double centerY = CanvasHeight / 2;
|
|
|
|
double centerWorldX = (centerX - CanvasTranslateX) / oldZoom / BASE_PIXELS_PER_METER - OriginX;
|
|
double centerWorldY = (centerY - CanvasTranslateY) / oldZoom / BASE_PIXELS_PER_METER - OriginY;
|
|
|
|
double newCenterCanvasX = (centerWorldX + OriginX) * BASE_PIXELS_PER_METER * ZoomScale;
|
|
double newCenterCanvasY = (centerWorldY + OriginY) * BASE_PIXELS_PER_METER * ZoomScale;
|
|
|
|
CanvasTranslateX = centerX - newCenterCanvasX;
|
|
CanvasTranslateY = centerY - newCenterCanvasY;
|
|
|
|
if (IsMouseInCanvas)
|
|
{
|
|
WorldMouseX = CanvasToWorldX(MouseX);
|
|
WorldMouseY = CanvasToWorldY(MouseY);
|
|
}
|
|
|
|
StateHasChanged();
|
|
await DrawCanvas();
|
|
}
|
|
|
|
private async Task HandleMouseMove(MouseEventArgs e)
|
|
{
|
|
MouseX = e.OffsetX;
|
|
MouseY = e.OffsetY;
|
|
IsMouseInCanvas = true;
|
|
|
|
WorldMouseX = CanvasToWorldX(MouseX);
|
|
WorldMouseY = CanvasToWorldY(MouseY);
|
|
|
|
StateHasChanged();
|
|
|
|
if (e.Buttons == 4)
|
|
{
|
|
CanvasTranslateX += e.MovementX;
|
|
CanvasTranslateY -= e.MovementY;
|
|
}
|
|
await DrawCanvas();
|
|
}
|
|
|
|
private async Task HandleMouseLeave(MouseEventArgs e)
|
|
{
|
|
IsMouseInCanvas = false;
|
|
MouseX = 0;
|
|
MouseY = 0;
|
|
StateHasChanged();
|
|
await DrawCanvas();
|
|
}
|
|
|
|
private async Task HandleWheel(WheelEventArgs e)
|
|
{
|
|
if (e.Buttons == 4) return;
|
|
const double zoomFactor = 0.1;
|
|
double oldZoom = ZoomScale;
|
|
|
|
if (e.DeltaY < 0) ZoomScale = Math.Min(MAX_ZOOM, ZoomScale * (1 + zoomFactor));
|
|
else ZoomScale = Math.Max(MIN_ZOOM, ZoomScale * (1 - zoomFactor));
|
|
|
|
if (Math.Abs(ZoomScale - oldZoom) < 0.001) return;
|
|
|
|
MouseX = e.OffsetX;
|
|
MouseY = e.OffsetY;
|
|
|
|
double zoomPointWorldX = (MouseX - CanvasTranslateX) / oldZoom / BASE_PIXELS_PER_METER - OriginX;
|
|
double zoomPointWorldY = (MouseY - CanvasTranslateY) / oldZoom / BASE_PIXELS_PER_METER - OriginY;
|
|
|
|
double newZoomPointCanvasX = (zoomPointWorldX + OriginX) * BASE_PIXELS_PER_METER * ZoomScale;
|
|
double newZoomPointCanvasY = (zoomPointWorldY + OriginY) * BASE_PIXELS_PER_METER * ZoomScale;
|
|
|
|
CanvasTranslateX = MouseX - newZoomPointCanvasX;
|
|
CanvasTranslateY = MouseY - newZoomPointCanvasY;
|
|
|
|
WorldMouseX = CanvasToWorldX(MouseX);
|
|
WorldMouseY = CanvasToWorldY(MouseY);
|
|
|
|
StateHasChanged();
|
|
await DrawCanvas();
|
|
}
|
|
|
|
private async Task HandleTouchMove(TouchEventArgs e)
|
|
{
|
|
if (IsTouching)
|
|
{
|
|
if (e.Touches.Length == 1)
|
|
{
|
|
await HandleSingleTouchMove(e.Touches[0]);
|
|
}
|
|
else if (e.Touches.Length == 2)
|
|
{
|
|
await HandlePinchZoom(e.Touches[0], e.Touches[1]);
|
|
}
|
|
|
|
StateHasChanged();
|
|
await DrawCanvas();
|
|
}
|
|
}
|
|
|
|
private void HandleTouchStart(TouchEventArgs e)
|
|
{
|
|
IsTouching = true;
|
|
|
|
if (e.Touches.Length == 1)
|
|
{
|
|
LastTouchPoint = new TouchPoint
|
|
{
|
|
X = e.Touches[0].ClientX,
|
|
Y = e.Touches[0].ClientY
|
|
};
|
|
}
|
|
else if (e.Touches.Length == 2)
|
|
{
|
|
LastTouchPoint = new TouchPoint
|
|
{
|
|
X = e.Touches[0].ClientX,
|
|
Y = e.Touches[0].ClientY
|
|
};
|
|
LastSecondTouchPoint = new TouchPoint
|
|
{
|
|
X = e.Touches[1].ClientX,
|
|
Y = e.Touches[1].ClientY
|
|
};
|
|
|
|
LastTouchDistance = CalculateTouchDistance(LastTouchPoint, LastSecondTouchPoint);
|
|
}
|
|
}
|
|
|
|
private void HandleTouchEnd(TouchEventArgs e)
|
|
{
|
|
IsTouching = false;
|
|
LastTouchPoint = null;
|
|
LastSecondTouchPoint = null;
|
|
LastTouchDistance = 0;
|
|
}
|
|
|
|
private async Task HandleSingleTouchMove(Microsoft.AspNetCore.Components.Web.TouchPoint touch)
|
|
{
|
|
if (LastTouchPoint == null) return;
|
|
|
|
var currentPoint = new TouchPoint
|
|
{
|
|
X = touch.ClientX,
|
|
Y = touch.ClientY
|
|
};
|
|
|
|
double deltaX = currentPoint.X - LastTouchPoint.X;
|
|
double deltaY = currentPoint.Y - LastTouchPoint.Y;
|
|
|
|
CanvasTranslateX += deltaX;
|
|
CanvasTranslateY += deltaY;
|
|
|
|
LastTouchPoint = currentPoint;
|
|
|
|
var canvasRect = await JS.InvokeAsync<DomRect>("getElementBoundingRect", CanvasRef);
|
|
MouseX = currentPoint.X - canvasRect.X;
|
|
MouseY = currentPoint.Y - canvasRect.Y;
|
|
IsMouseInCanvas = true;
|
|
|
|
WorldMouseX = CanvasToWorldX(MouseX);
|
|
WorldMouseY = CanvasToWorldY(MouseY);
|
|
}
|
|
|
|
private async Task HandlePinchZoom(Microsoft.AspNetCore.Components.Web.TouchPoint touch1, Microsoft.AspNetCore.Components.Web.TouchPoint touch2)
|
|
{
|
|
if (LastTouchPoint == null || LastSecondTouchPoint == null) return;
|
|
|
|
var currentTouch1 = new TouchPoint { X = touch1.ClientX, Y = touch1.ClientY };
|
|
var currentTouch2 = new TouchPoint { X = touch2.ClientX, Y = touch2.ClientY };
|
|
|
|
double currentDistance = CalculateTouchDistance(currentTouch1, currentTouch2);
|
|
|
|
if (LastTouchDistance > 0)
|
|
{
|
|
double distanceRatio = currentDistance / LastTouchDistance;
|
|
double oldZoom = ZoomScale;
|
|
|
|
ZoomScale = Math.Max(MIN_ZOOM, Math.Min(MAX_ZOOM, ZoomScale * distanceRatio));
|
|
|
|
if (Math.Abs(ZoomScale - oldZoom) > 0.001)
|
|
{
|
|
double centerX = (currentTouch1.X + currentTouch2.X) / 2;
|
|
double centerY = (currentTouch1.Y + currentTouch2.Y) / 2;
|
|
|
|
var canvasRect = await JS.InvokeAsync<DomRect>("getElementBoundingRect", CanvasRef);
|
|
double canvasCenterX = centerX - canvasRect.X;
|
|
double canvasCenterY = centerY - canvasRect.Y;
|
|
|
|
ZoomAtPoint(oldZoom, canvasCenterX, canvasCenterY);
|
|
}
|
|
}
|
|
|
|
LastTouchDistance = currentDistance;
|
|
LastTouchPoint = currentTouch1;
|
|
LastSecondTouchPoint = currentTouch2;
|
|
}
|
|
|
|
private double CalculateTouchDistance(TouchPoint point1, TouchPoint point2)
|
|
{
|
|
double deltaX = point2.X - point1.X;
|
|
double deltaY = point2.Y - point1.Y;
|
|
return Math.Sqrt(deltaX * deltaX + deltaY * deltaY);
|
|
}
|
|
|
|
private void ZoomAtPoint(double oldZoom, double pointX, double pointY)
|
|
{
|
|
double pointWorldX = (pointX - CanvasTranslateX) / oldZoom / BASE_PIXELS_PER_METER - OriginX;
|
|
double pointWorldY = (pointY - CanvasTranslateY) / oldZoom / BASE_PIXELS_PER_METER - OriginY;
|
|
|
|
double newPointCanvasX = (pointWorldX + OriginX) * BASE_PIXELS_PER_METER * ZoomScale;
|
|
double newPointCanvasY = (pointWorldY + OriginY) * BASE_PIXELS_PER_METER * ZoomScale;
|
|
|
|
CanvasTranslateX = pointX - newPointCanvasX;
|
|
CanvasTranslateY = pointY - newPointCanvasY;
|
|
}
|
|
|
|
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.5; // 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;
|
|
}
|
|
}
|