Manually control joystick from code

[lukedukeus]

I am using the joystick to control where a camera is looking. I also want the user to be able to control the camera with arrow keys. When the user is using the arrow keys, I will ignore input from the joystick, however I would still like the ui of the joystick to update based on the arrowkeys.

I am suggesting a method that will allow you to manually the joysticks position. This will not fire a motion event.

Usage would be something like:

const [joystickPosition, setJoystickPosition] = useState([0, 0]);
setJoystickPosition([50,50]); // this would only update the ui, but not fire an event.
<Joystick stop={handleStop} position={joystickPosition}></Joystick>

Please let me know if something like this already exists.

Thanks!

[elmarti]

Hey @lukedukeus, this doesn't already exist, but could be a cool addition.

A few thoughts:

• What happens if the user interacts with the joystick when the position is being overridden? (perhaps the interactions events should be disabled in this instance?)
• What happens for the callbacks (do they still get invoked if the position is updated via position?)

Do you have a specific use case?

[lukedukeus]

I think user input should still override the joystick position. If someone wanted it to be not overridden by user input, they can turn on the disabled prop. I don't think the callbacks should be fired, if you are manually updating the position, you already have the position data.

My specific use case is controlling a camera's PTZ function. The user is able to control it via the joystick, however, if they use arrow keys, I want the position of the joystick to update.

Thanks!

[github-actions[bot]]

:tada: This issue has been resolved in version 6.2.0 :tada:

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot :package::rocket:

[elmarti]

See a demo here: https://elmarti.github.io/react-joystick-component/?path=/story/joystick-examples--position-override-with-second-joystick Enjoy!