picking with virtual joystick camera

[DezOnlyOne]

I am using the virtual joystic camera to move around in my scene for users who are using ipads. The VJS camera works perfectly, but how do I allow users to pick objects in the scene? is there a way to keep the joysticks fixed on the bottom of the screen and allow the user to still pick objects?

[GameMonetize]

This is something @davrous is planning to add

[DezOnlyOne]

I tried doing my picking using the mouseup event. Which makes it possible to still click on items using the ipad. The only issue is that I still have the controle layer on top of my content/ui layer. So I cannot interact with the application other than navigation. 

$(window).mouseup(webglEngine.getPick);

getPick:function(event, pickRes) {
        me = webglEngine;
        var x = event.clientX;
        var y = event.clientY;
        var container = me.container.getBoundingClientRect();

        x = x - container.left;
        y = y - container.top;
        var rx = (x * 2 - container.width) / container.height;
        var ry = (y * 2 - container.height) / container.height;
        var res = [];
        var pick = me.scene.pick(x, y);
        if (pick.pickedMesh) {
            res.push(pick.pickedMesh.name);
        }
        if(res.length) console.log(res);
        if(res.length){
            var pid = res[0].substring(14, res[0].length);
        
            pid = (pid.length<3) ? '0' + pid : pid;

            showProfileOverlayWithID(pid);
        }
        
        /*
        return res.reduce(function(obj, target) {
            obj[target] = 1;
            return obj;
        }, {});
        */
    },

 

[Wingnut]

Hi Dez!  Hey, have you read http://www.html5gamedevs.com/topic/21833-how-to-use-a-virtual-joystick-to-control-object/  ?  Me and the gang really "hacked" virtual joysticks, there... but we were using a single virtual joystick and not the virtual joystick camera.  Still, there was much discussion about the VJCanvas, which is a canvas added to the DOM tree whenever a virtual joystick (VJ) activates.

https://github.com/BabylonJS/Babylon.js/blob/master/src/Tools/babylon.virtualJoystick.js

There it is, the code for one virtual joystick.  Do you think you can "paste" or somehow include that code... into your project?   If so, you would be in a position to do some "hacking".

https://github.com/BabylonJS/Babylon.js/blob/master/src/Cameras/Inputs/babylon.freecamera.input.virtualjoystick.js

There's the camera (its new 'input' behavior), and you can see that line 29 and line 33... create VJ's... by calling the code in the 2nd URL I listed.

If you want to "dive in" and have some serious hacking fun... try to get the virtualJoystick.js code... somehow inserted into your code.  Put some console.log noise into the code.  When your VJcam turns on, you should see YOUR virtualjoystick.js code... run twice, correct?  (once from line 29, once from line 33)

If/When you accomplish getting the VJcam to call YOUR virtualjoystick.js code... instead of the virtualjoystick code from the BJS framework... then you know you are in a position to cause some trouble. 

YOUR problem stems from the size and placement of the vjcanvas.  If you put a CSS border on the vjcanvas (maybe with vjcanvas.style.border = "3pt red solid")... then you will be able to SEE where the vjcanvas is located.  If/when you manage to size and position the vjcanvas in a way where it only covers the bottom part of your RENDER canvas.... then you are on your way to a solve. 

There are probably other issues, though.  For example, after you "hack" the vjcanvas and get it where you want it, then when you touch the screen, the VJ rings might not be under your finger.  More hacking/fiddling will be needed to get THOSE to land in the right place on your new shrunken vjcanvas.

In that first URL, we talked about using percentages throughout the VJ system, but nobody accomplished it.  Just maybe, YOU are the person who codes the "next generation" of virtual joystick.  Take notice that the current VJ's are ANALOG joysticks.  The distance between the stationary ring... and the moving ring... is measured and used (sometimes called delta - amount of difference).  You will need to STOP your moving ring... at the edges of your new shrunken canvas.  This may be a challenge. 

And you might wish to change them to digital joysticks.  Then your moving ring will not need to travel much distance.  The user needs ANY indication that they are dragging forward/backward, etc... but it need not use tons of screen space.  The distance between the moving ring and the stationary ring is not used... for a digital joystick.  Digital joysticks just use switches, and not potentiometers/pots.  The AMOUNT of distance is not important for digital joysticks.  In fact, if you convert to digital joystick (switches only, ring-to-ring distance unused), then you might want to change the shapes drawn on the screen... to something more akin to rocker switches.

Way more information than you really wanted, eh?  I just wanted to show you that... YOU could start hacking on the VJ's yourself.  If you invent something wonderful, we would ALL like to see it and hear about it, if you please.  Feel free to ask more questions, of course.  Davrous is truly the God of VJ, but the rest of us are gradually learning how to do mad scientist experiments with his magical devices.  Davrous is a pretty busy guy, and if he IS planning "VJ2 - The Legend Continues"... it might be ONLY in the planning stages, and he might have 50 projects ahead of him with higher priorities... who knows.  The guy hardly ever comes to "chew the rag" (visit and talk a lot) with us.  I think he's shy.    Good coder and darned smart, though.  He's one of the BJS founders and elders.

Personally, I dislike adding another canvas to the DOM tree when a VJ activates.  I like absolutely-positioned HTML elements/buttons, myself.  But, rumor has it that DOM elements (HTML elements) are difficult to get access-to... on Android-ish devices.  I have no experience with that... I'm strictly desktop, here.     Good luck... keep in touch.