Comments (18)
from joystick.
Hi @tompe17 can you send me the HTML you use to reproduce the problem, with the table and other solution you have tested?
from joystick.
https://jsfiddle.net/ssktkr/2mn5uyae/
Please see right one.
from joystick.
Hi @takeru and @tompe17 , I see that the problem is related to the use of TABLE tag, that not work correctly with "offset....." properties of elements.
I try to investigate on this problem, alternatively I can suggest to use DIV structure, in this case all work correctly. I commit a new example page as soon as with two JoyStick in one row.
from joystick.
Ok pushed the example, and you can see in action here http://bobboteck.github.io/joy/joy.html
from joystick.
Sorry not getting back on this but I did not have my example easily available since I managed to place them after each other in a way that worked in my app. But thanks for the example, I will look at it and see if placing it sidwise works better.
from joystick.
Looking at your code it seems to be "inline-flex" I missed that it exists. I tried some inline with div but could not get it to work. But good that it works. I liked this code because it was only javascript and no dependencies on big libraries.
from joystick.
On a mobile device the two joysticks won't work together. The second press makes the relevant joystick follow the first press possition.
from joystick.
I'm running into the same problem as @jondurrant. I suspect it is because you are not discriminating the location (X,Y) of the touchstart event. The pressed=1 assignment should only be made for a given JoyStick instance if the (X,Y) happens inside its own canvas area.
from joystick.
Ok, I have a fix for this issue. Replace the onTouchMove
function as follows:
function onTouchMove(event)
{
// Prevent the browser from doing its default thing (scroll, zoom)
event.preventDefault();
if(pressed==1 && event.targetTouches[0].target == canvas)
{
console.log("move:", canvas.id, ":", event);
movedX=event.targetTouches[0].pageX;
movedY=event.targetTouches[0].pageY;
// Manage offset
movedX-=canvas.offsetLeft;
movedY-=canvas.offsetTop;
// Delete canvas
context.clearRect(0, 0, canvas.width, canvas.height);
// Redraw object
drawExternal();
drawInternal();
}
}
You have to use targetTouches
rather than touches
.
from joystick.
Sorry, I added in some console.log
to the code which you can remove.
from joystick.
Hi guys, sorry but this days I'm very busy, I hope to work on this issue in the weekend.
@liamw9534 your suggestion is interesting, but I have the doubt that its works whell only if use one JoyStick at time. You have tested a case of simultaneous use of Stick?
from joystick.
from joystick.
Hi @liamw9534 , I try your suggestion on my example page http://bobboteck.github.io/joy/joy.html, but I continue to have the problem with the use of the two simultaneos sticks.
I use Chrome on Android, you?
from joystick.
from joystick.
Hi, the attached test code uses GetX and GetY only which is the only methods I am interested in for my project. Tested using chrome.
joystick.zip
from joystick.
Thanks @liamw9534 , I was not aware of the change to the next lines, now I have modified the code correctly and it works for me too.
As soon as I have some time to spare, I make changes to the code and publish the new version.
Thanks again for the suggestion!
from joystick.
Hi @liamw9534 @tompe17 @takeru @jondurrant , I would like if possible to share on the Repository Wiki (even if it is practically empty for now), the projects of those who have used it.
It would be enough to publish a short description, an image, where you can also see the JoyStick, and possibly a link if you have a public repository or a public web page where it is used.
If that's not possible, even a single star to my JoyStick repository is welcome.
Thank you!
from joystick.
Related Issues (20)
- Error with different css-positions HOT 7
- Issues with position: absolute; HOT 4
- Issues with position: fixed; in CSS(again) HOT 9
- More robust calculation of touch/click position relative to canvas HOT 3
- Integration in third-party application HOT 3
- 4 directions HOT 7
- joystick cant be reloaded when change the view HOT 2
- Joystick Stays At Position When Cursor Let Go Outside of Joystick HOT 5
- Allow AddListener/Callback HOT 4
- Add one dimensional joysticks (X or Y axis) HOT 4
- The joystick does not move to the left (moves to the right) after I add position: fixed; top: 0; to the CSS grid div CSS (HTML provided) HOT 5
- Every time I move the Joystick on Chrome on Android I get joy.js:163 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080 HOT 4
- Issue with multiple joysticks
- x and y coordinates outside the range of (-100, 100)
- Provide a reset or recenter function
- Hosting on GitHub Pages would be helpful HOT 2
- When using large non-square width and heights (especially width) the joystick has very little movement in one axis
- No integrated direction buttons?
- Doesn’t Scale if elements are % (or vw/vh)
- Touch mode not activating in Chrome HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from joystick.