Setting maximum radius of stick travel

[wtip]

Could you add an option to set the maximum radius of the stick travel? I am using the XY coordinate output to send drive commands to a robot. I currently just set a limit on the output values of the coordinate plane but it causes some issues with jumpy movement because the user has no way of seeing the limits of travel.

It would be nice to have a circular outer limit and not a square one. This would match a real joystick much closer.

[jeromeetienne]

Ingesting idea. Pull request welcomed :)

[erichlof]

Hi @wtip and @jeromeetienne,

I have added the ability to limit the stick travel to a circle as you requested. You can check out the PR at: https://github.com/jeromeetienne/virtualjoystick.js/pull/19

Here's how to use it:

var joystick = new VirtualJoystick({ mouseSupport: true, limitStickTravel: true, stickRadius: 50 });

By setting 'limitStickTravel' to 'true', it will limit the stick travel to a circle. The size of this limit circle is set by setting 'stickRadius' to the desired number of pixels. If no number is given, the limit defaults to 100 pixels.

You can also use this is conjunction with the Stationary Base, like so:

var joystick = new VirtualJoystick({ mouseSupport: true, stationaryBase: true, baseX: 200, baseY: 200, limitStickTravel: true, stickRadius: 50 });

The base will now be at a fixed location and if you move anywhere outside that area it will limit the stick to a circle.

Thanks for the suggestion @wtip and I hope you all enjoy it! -Erich

[wtip]

Sweet!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! Thanks for submitting this patch so quickly. I will have to try it out later.

[erichlof]

Hi @wtip , You're very welcome! I just uploaded a couple of demos to try out. Here's the demo for limited stick travel: http://erichlof.github.io/BlogExamples/LimitStickTravelDemo.html

and here's the demo for limited stick travel with Stationary Base: http://erichlof.github.io/BlogExamples/LimitStickTravelDemoStationaryBase.html

This was a fun challenge because I had to recall how to confine something to a desired circle radius. I had to consult my library of old game programming books to find the initial equation (which is mainly just the distance formula) - haha.

Anyway, enjoy! -Erich

[jeromeetienne]

@erichlof excelent!!

[jeromeetienne]

@erichlof can you add then in the readme too please ? it would be great!

[erichlof]

@jeromeetienne

Done! https://github.com/jeromeetienne/virtualjoystick.js/pull/20 Thanks for merging Jerome! :)

[wtip]

@erichlof Awesome! Just tried out your demo and this is exactly what I was looking for.