Two sticks in a row

[tompe17]

I am trying to place two sticks in a row. I tried putting them in a table but there is something wrong with the input then since the movements are not correct. I suppose the canvas coordinates might be messed up.

So my question is how can I do what I want to do? It works placing them in div that ends up in two different blocks. Making the divs inline or using span instead of div and it does not work.

[bobboteck]

Hi @tompe17 can you send me the HTML you use to reproduce the problem, with the table and other solution you have tested?

[takeru]

https://jsfiddle.net/ssktkr/2mn5uyae/

Please see right one.

[bobboteck]

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.

[bobboteck]

Ok pushed the example, and you can see in action here http://bobboteck.github.io/joy/joy.html

[tompe17]

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.

[tompe17]

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.

[jondurrant]

On a mobile device the two joysticks won't work together. The second press makes the relevant joystick follow the first press possition.

[liamw9534]

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.

[liamw9534]

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.

[liamw9534]

Sorry, I added in some console.log to the code which you can remove.

[bobboteck]

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?

[liamw9534]

Hello there, Yes, I tested it with simultaneous sticks (2 side-by-side). It works well. Liam.

…

On Fri, 17 Apr 2020 at 10:42, bobboteck ***@***.***> wrote: Hi guys, sorry but this days I'm very busy, I hope to work on this issue in the weekend. @liamw9534 <https://github.com/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? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#7 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABTRST2JM4BDQQFAU47YAJDRNAP75ANCNFSM4K74S2QA> .

[bobboteck]

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?

[liamw9534]

I am using chrome too. I'll send you my example code tomorrow.

…

On Sun, 19 Apr 2020, 22:26 bobboteck, ***@***.***> wrote: Hi @liamw9534 <https://github.com/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? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#7 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABTRST3GPGM2ZD2N4LNVWNDRNNT75ANCNFSM4K74S2QA> .

[liamw9534]

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

[bobboteck]

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!

[liamw9534]

Welcome! It's a great and useful project so I am glad to help.

…

On Mon, 20 Apr 2020 at 13:31, bobboteck ***@***.***> wrote: Thanks @liamw9534 <https://github.com/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! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#7 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABTRST6SJSGQ7JVDRBBDP53RNQ6ALANCNFSM4K74S2QA> .

[bobboteck]

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!