widget/PatrolMap

Vue SFC used as a widget to set waypoint on a map. This component uses the VideoBox component to show the robot map (that is sent from the robot in a video feed format) and put a canvas on top of it to detect user clicks. When a click is detected the x and y position is used to set a waypoint in the array given in props (push). The canvas then read the array and draw waypoint on the map where the user clicked previously. This component have the following dependency : VideoBox.vue Component and Bootstrap-Vue for styling.

Props

Name Type Default value Required? Description
waypointList Array.<Object> - Yes Lists the current waypoints
patrolMapId String - Yes Identifies map source with exact name reference

Data

Name Type Default value Description
videoElement Object - Contains reference to video-id
canvas Object - Contains reference to responsive overlay of map
context Object - Sets canvas context
CanvasRefreshRate Number - Sets the constant refresh rate of the displayed canvas
loopIntervalId Object - Contains refresh rate and display parameter of the map
enable Boolean - Enables or disables the display of the map and canvas

Methods

addWaypointCoord(wp)

Adds a waypoint to the list of current waypoints.
Source:
Parameters:
Name Type Description
wp Object Waypoint.

adjustCanvasToVideo()

Sets canvas size (height and width) to match the size of the video.
Source:

drawCanvas()

Clears canvas and redraws the waypoints of the current patrol.
Source:

drawWaypoint(wp, index)

Draws a waypoint on the canvas.
Source:
Parameters:
Name Type Description
wp Object Waypoint
Name Type Description
x Number Waypoint's x coordinate in pixel
y Number Waypoint's y coordinate in pixel
index Number Index number of sent waypoint

drawWaypointList()

Calls for the drawing the waypoints with corresponding arrows (indicating the yaws) of each waypoint of the current waypoint list.
Source:

drawYawArrow(wp)

Draws arrow for the yaw of the waypoint on the canvas.
Source:
Parameters:
Name Type Description
wp Object Waypoint
Name Type Description
x Number Waypoint's x coordinate in pixel
y Number Waypoint's y coordinate in pixel
yaw Number Waypoint's yaw angle in radians

getCanvasCoordinatesFromVideo(x, y) → {Object}

Corrects the waypoint coordinate (x,y) from the offsets and scale parameters of video.
Source:
Parameters:
Name Type Description
x Number Horizontal coordinate on canvas.
y Number Vertical coordinate on canvas.
Returns:
Type:
Object
- X and Y coordinate in pixels of event (mouse position).

getVideoCoordinatesOfEvent() → {Object}

Get position/coordinate of mouse event on video.
Source:
Parameters:
Type Description
HTMLElement Event given by the click.
Returns:
Type:
Object
X and Y coordinate in pixels of event (mouse position).

getVideoOffsetAndScale() → {Object}

Compute the offset and rescaling parameters of resized video from original content.
Source:
Returns:
Type:
Object
Offset in X, offset in Y and scaling ratios.

init()

Initialisation of canvas refrash rate and call to canvas resizing functions.
Source:

isClickValid(coord) → {boolean}

Check to see if element is in bound.
Source:
Parameters:
Name Type Description
coord Object Coordinates of an element.
Name Type Description
x Number X coordinate of element.
y Number Y coordinate of element.
Returns:
Type:
boolean
true if coordinates of the element are in bounds of the video.

onMouseDown(event)

CallBack of mouse down event. Verify validity and initialise waypoint creation.
Source:
Parameters:
Name Type Description
event HTMLElement Event element given by the click.

onMouseMove(event)

Callback of mouse move event. Updates the yaw with mouse position.
Source:
Parameters:
Name Type Description
event HTMLElement Event given by mouse move.

onMouseOut(event)

Callback of mouse out event, terminate the waypoint creation.
Source:
Parameters:
Name Type Description
event HTMLElement Event element given by the click.

onMouseUp(event)

Callback of mouse up event, finalize the waypoint creation process.
Source:
Parameters:
Name Type Description
event HTMLElement Event element given by the click.

updateWaypoint(wp)

Updates last waypoint of the waypoint list.
Source:
Parameters:
Name Type Description
wp Object Waypoint.