widget/Joystick

Vue SFC used as a widget that draws an joystick that the user can use to send teleoperation control to the robot that it is connected to. Takes 2 absolute values in props to set the max value of a command and a bus to send the event (new joystick value). This widget has the following dependencies : Bootstrap-Vue for styling.

Props

Name Type Default value Required? Description
enable Boolean - Yes Enable the sending of joystick data.
absoluteMaxX Number - Yes Max x value of the joystick coordinate.
absoluteMaxY Number - Yes Max y value of the joystick coordinate.
bus Vue - Yes Vue bus use to emit event to other components.

Data

Name Type Default value Description
x Number - Horizontal coordinate of the joystick.
y Number - Vertical coordinate of the joystick.
loopIntervalId Number - Refresh canvas loop (timer).
positionChangeIntervalId Number - Joystick updating loop (timer).
canvas HTMLCanvasElement - HTML element of the canvas.
context HTMLCanvasElement - Canvas 2d context.
radiusRatio Number - Size of the joystick in ratio of available space.
joystickElement HTMLElement - HTML element of the joystick.
isMouseDown Boolean - Keep a manual trace of click in canvas for drawing.
canvasRefreshRate Number - Number of time to update canvas for 1 sec.
operatorCommandInterval Number - Time in ms between the joystick postion update.

Events

Name Payload Type Description
joystick-position-change Object Emit joystick data to be sent to robot.

Methods

drawBackground()

Draws the joystick background.
Source:

drawCanvas()

Calls the different methods to draw the canvas.
Source:

drawJoystick()

Draws the joystick movable circle.
Source:

emitJoystickPosition()

Emit the joystick position to be sent to robot.
Source:

findCenterCanvas()

Find the center of canvas
Source:

getCanvasRadius() → {Number}

Get the center of the joystick's canvas.
Source:
Returns:
Type:
Number
Radius times the lowest value between height or width divided by 2.

getCenterX() → {Number}

Get the central horizontal value of canvas.
Source:
Returns:
Type:
Number
Canvas width divided by 2.

getCenterY() → {Number}

Get the central vertical value of canvas.
Source:
Returns:
Type:
Number
Canvas height divided by 2.

getJoystickRadius() → {Number}

Get the joystick radius.
Source:
Returns:
Type:
Number
Canvas radius divided by 6.

init()

Initilisation of component and timer.
Source:

onMouseDown(event)

Callback for the mouse down event.
Source:
Parameters:
Name Type Description
event HTMLElement The html event given by the click.

onMouseMove(event)

Callback for the mouse move event.
Source:
Parameters:
Name Type Description
event HTMLElement The html event given by the click.

onMouseOut(event)

Callback for the mouse out event.
Source:
Parameters:
Name Type Description
event HTMLElement The html event given by the click.

onMouseUp(event)

Callback for the mouse up event.
Source:
Parameters:
Name Type Description
event HTMLElement The html event given by the click.

setCanvasSize()

Set the size of the canvas.
Source:

updateJoystickPositionFromMouseEvent(event)

Update the joystick position with the given event.
Source:
Parameters:
Name Type Description
event HTMLElement The html event given by the click.