jeromeetienne / virtualjoystick.js Goto Github PK

View Code? Open in Web Editor NEW

411.0 411.0 127.0 299 KB

a virtual joystick library to emulate a joystick on touch screen in javascript

Home Page: http://jeromeetienne.github.com/virtualjoystick.js/examples/basic.html

License: MIT License

JavaScript 100.00%

virtualjoystick.js's People

Contributors

Stargazers

Watchers

Forkers

kenpu srinivasarao549 dineshkummarc amuthelet beriberikix konstantinberezenko dwilkins laneallen bes89 tnajdek joates artslop simobasso t-oster rgers gbox3d imclab phola warycat fireneslo arpi-robotics m1k3lm charleyw h3rb klach michelgotta xzereus scastaneda swatinem me97esn arturitu jorgearino maxsoulard parrel85 suntomoon richardartoul itdonline xobpawok houston-robotics-club mcanthony guimeira chengqian1007 gfakzovlo mess110 xlqstar rosslote henricavalcante antaresax andogro cptx032 jonchambers ssugar jfcali salbei ckwjdals90 andrew-parry dexta dness waynekeenan yangshuolll 19vr nabilbk dnessorga ioanszilagyi wheejuni tags07 winstonmarvel zacharycody cgarciae theirishduck modern-robotics benoer elva2596 nstolpe greenberge scenaristeur neilrackett tornadory toke2000 anze- hypagedev victorhugo1962 bingdianfeishui jacym noenadies florentbaudon faris90 sweetquiet junbowu scandas johninwi aleonnet ossdc klazal cinetryx seattleacademy lasseeggers pratikpanchal22 tommyteavee 187383327

virtualjoystick.js's Issues

describe full API in readme

need to be done
no need to be eleguant in the wording. be a machine

[enhancement] Add missing bower.json.

Hey, maintainer(s) of jeromeetienne/virtualjoystick.js!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library jeromeetienne/virtualjoystick.js is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "jeromeetienne/virtualjoystick.js",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

Added support for Stationary joystick Base...

Hi @jeromeetienne and @Forzaferrarileo,
I have successfully added support for a stationary joystick base. I designed this feature to be easily enabled as an option when you declare the new joystick object. Here's how it is used:

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

As you can see, all you have to do is set the new boolean flag 'stationaryBase' to 'true'. Then, you choose the x/y coordinates of your fixed base - in this example I chose 200 for x and 200 for y.

When you run the demo or game now, the joystick base will permanently be rendered at location 200,200 (which is the upper left-hand corner of your browser window). You can then move the stick relative to that fixed base.

A nice side-effect of adding this feature was the discovery that you can now click or touch once anywhere on the webpage and it will register that click/touch coordinate as an immediate movement of the stick. So, you can click once to the right of the base, then once to the left, then above, then below, whatever, and your game character will begin to move right, left, above , below to match each click/touch, instantaneously.

Of course you can, in the old way, hold down (touch and hold, or hold down mouse button and drag) to move the stick around - just like we do in the current version of virtualjoystick.js. Also, if you do not want a fixed base, simply leave out that option when declaring the joystick object and it behaves exactly like the virtualjoystick.js does now. So this is 'backward' compatible. It would not break any existing projects.

Here's a simple demo of the new feature:
http://erichlof.github.io/BlogExamples/StationaryJoystickTest.html

Here is a link the updated virtualjoystick.js file -I called it virtualjoystick2.js :
https://github.com/erichlof/erichlof.github.io/blob/master/BlogExamples/js/virtualjoystick2.js

My code only added 7 lines to your existing code, and 0.3 kb of size.

I am a newbie at GitHub processes. How should I try to include this in your file, @jeromeetienne ? Should I make a pull request, or can you just as easily copy and paste my code as your new virtualjoystick.js ?

Please let me know how I should proceed.
Thanks for all your awesome helpers Jerome! Looking forward to your future projects!

-Erich

Wrong coordinates when placing other DOM elements before the container element

I think it is not a special case when inserting some DOM elements before the container element, for instance:

<body>
<h1>My Game!</h1>
<p>A very short description ....</p>
<div id="container"></div>
....
</body>

but when you do this the position of the stick is wrong.

_virtualjoystick2 not a constructor

Hi jerome,

Awesome library!

When I am including it as an external js file in my reactjs app, it throws the above error.
_virtualjoystck2 constructor not found. Even though in my entire workspace there is no term mentioning virtualjoystick2. It works fine independently but hits a dead-end in reactjs. I am trying to figure out what exactly is the issue for a long time. Please help!

joystick.addEventListener must work for mouse up/down

it's important to get the custom code fired with mouse like touchpad
Website must work with PC and Smartphone.

Compatible with html5 and jquery

Hello, I'm new in all this and I would know if this library is compatible with jquery and how, thank you.

Lock joystick base in a specific place

I tried setting the position from absolute to fixed , but it doesn't work . there's a way to do that?

Cannot restrict area with dual joystick

Hi,
i want to make a interface with 2 joystick (left bottom and right bottom) and a status bar with three buttons. But when i try to click button i get touch event from joystick and buttons aren't clicked.

How can i restrict area?

Thanks

Setting maximum radius of stick travel

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.

firefox issue ?

some people reported issue on firefox mobile
- i cant test myself
but firefox desktop doesnt work as expected either
test and debug on desktop
- if possible it may fix the mobile issue too

joystick not limited to "control' element

I have an application that has a canvas that is 600x600 pixels, and I want the joystick only to function within that.

div id="control"
canvas...
/div

id "control" is essentially the same as "container" in basic.html example, except it is set to 600px by 600px and contains the canvas. However, On the left outside of this div I have elements that are not inside the control div yet the joystick appears so I cannot click those elements (sliders, text boxes, radio controls)

Yes, I have set container : document.getElementById('control')
Basically I need LimitStickActiveArea.html :)

determine the width of the control window

How do I set the window in which the joystic is activated?
Currently, joystic activates anywhere on the page. If it remains for me only to use the iframe?

Best regards

add a fire button

on the left of the screen it is the stick to control direction
on the right, it is the fire

Dual joystick example bug on safari and chrome IOS

The Dual Joystick doesn't work properly if you hold and drag the Right cyan joystick first all the way in a direction, any other click of the Left joystick is not triggered unless releasing the first joystick.

Any chance of improving the multitouch support of this awesome library ?:)

inconsistent base position across browser

The issue happens only when sationaryBase == true, because of these lines :

if(this._stationaryBase === true){
	this._baseEl.style.display	= "";
	this._baseEl.style.left		= (this._baseX - this._baseEl.width /2)+"px";
	this._baseEl.style.top		= (this._baseY - this._baseEl.height/2)+"px";
}

it is fixed by replacing element.width and element.height by element.clientWidth and element.clientHeight

Missing DispatchEvent for OnTouchMove

Problem: touchMove event will not fire.

Adding
this.dispatchEvent('touchMove', event);

after line 294 seems to resolve this issue.

Snapback support

Right now, when touchEnd fires, the joystick disappears. It would be great if there was an option to have the joystick slowly snapback to the neutral position.

Set event listener passive option to false

In chrome on the dual.html example, I see this error:

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

It can be fixed by changing these lines:

this.container.addEventListener( 'touchstart' , this.$onTouchStart , false, );
this.container.addEventListener( 'touchend' , this.$onTouchEnd , false );
this.container.addEventListener( 'touchmove' , this.$onTouchMove , false );

as follows:

this.container.addEventListener( 'touchstart' , this.$onTouchStart , {capture: false, passive: false} );
this.container.addEventListener( 'touchend' , this.$onTouchEnd , {capture: false, passive: false} );
this.container.addEventListener( 'touchmove' , this.$onTouchMove , {capture: false, passive: false} );

Tag/Release

Hi. Somebody submitted this project at VersionEye to track it. Unfortunately we can't, because there are no releases/versions. Would be awesome if you would release officially the first version and create a git tag for that.
Many Thanks.

issue with click event

click event is trigger IFF button is pressed and release on the same element
see http://stackoverflow.com/questions/12572644/differentiate-click-vs-mousedown-mouseup answer
so to 'insert' the joystick canvas on mouse down makes it such as the button is pressed on the element below and release on joyrstick canvas

not sure how to fix

Wrong coordinates when using a container

When I set the container property of the VirtualJoystick object it does not appear where I point but it has an X and Y offset. X is the number of pixels the container's left side is away from the left side of the page and Y is the number of pixels the container's top is away from the top of the page, so somewhere I guess you miss correcting the coordinates with the container's coordinates.

How does fire button work ?

Reading the issues, it appears a fire button should appear when touching the right of the screen. The thing is when touching the right of the screen, the joystick appears and not the fire button.

I'm initializing virtualjoystick like this:

joystick = this.joystick = new VirtualJoystick({
container : document.getElementsByClassName('main')[0],
mouseSupport : true,
});

Is there anything else to do to have the firebutton ? How do I listen for firebutton presses ? Is there an equivalent to joystick.left() ? Maybe joystick.fire() ?

Thanks for the help.

mouse scroll issue when draging out ofscreen

when you use the mouse and drag out of the screen, it scroll
likely a css mistake

Missing "up" when the mouse go out and return to window.

deltaX and deltaY must return to 0 when the mouse return to browser window after going outside.