Navigation GUI for tablets & mobiles

Hi all

Has any developed or has a referance to a nice & neat Navigation bar using Babylon’s GUI as in the green circle in the attached image. cat sim

Basically I want to use it when my Babylon site runs on a tablet / mobile since I cannot use finger touch for both movement & rotation at the same time using the pep module.

Hi J, sorry for the slow replies. https://www.babylonjs-playground.com/#91I2RE#93

Yeah, it’s broken. Last I knew, something changed in Context2d object… BJS is delivering it’s own version of Context2d, instead of DOM version… and BJS version has no ‘save()’ or ‘restore()’… but I see no errors at console, about that. i once did.

ANYWAY, long ago, I started screwing-around with circular GUI 2d controls. I borrowed Adam’s ColorPicker control, and started hacking. I made a “DragPuck” and a “ButtonRing”… and they are sort-of meant to be laid atop each other. Once upon a time, somewhere in the #91I2RE series… they worked. They were never massaged/professionalized to become an official control. It was all just Wingnut, screwing-around with round controls (which are ALWAYS painted onto a little SQUARE canvas area).

The real issue with round clickable areas… (painted onto square canvai)… is picking zones. It’s all good fun. Overlaying controls atop other controls… is not recommended and comes with its own problems, but in some cases, it works ok. (watch out for isPointerBlocker and z-index stuff, of course) Round controls are ONLY painted round… but they are still square and have canvas in the middle of the doughnut. :slight_smile: (probably only pertinent if overlaying controls atop each other).

All in all, feel free to try to get that playground operational, if you choose-to. I have fought with it a bit, but got frustrated and played MudRunner instead. :slight_smile: You may wish to search old forum for ‘ipod’ or ‘ipod control’, too. I think I once called it that, too. DragPuck, ButtonRing, IpodControl, I tried all sorts of demented round-control experiments… using those terms. Might be worth screwing-with. Or maybe grab a copy of Adam’s ColorPicker, and hack it yourself… make yourself a circular controller control. :slight_smile:

1 Like


or Use Virtual Joysticks - Babylon.js Documentation
but i dont like babylon`s virtual joystick

1 Like

I was just working with something similar. To be correct, I found a forum post with some working code, I adapted it and it works quite well. Of course, it could be improved in a few things but I simply did not find the time.

Layout side

<?xml version="1.0"?>

<root>
    <Ellipse id="leftJoystick" color="#ffffff" isVisible = "true" alpha = "0.4" zIndex="2" thickness = "3"  paddingLeft="0px" paddingRight="0px" paddingTop="0px" paddingBottom="0px" height="160px" width="160px" isPointerBlocker = "true" verticalAlignment = "Control.VERTICAL_ALIGNMENT_BOTTOM" horizontalAlignment = "Control.HORIZONTAL_ALIGNMENT_LEFT" onPointerDownObservable="onJoystickDown" onPointerUpObservable="onJoystickUp" onPointerMoveObservable="onJoystickPuckMove" >
        <Ellipse id="leftInnerJoystick" color="#ffffff" zIndex="2" thickness = "4" paddingLeft="0px" paddingRight="0px" paddingTop="0px" paddingBottom="0px" height="80px" width="80px" isPointerBlocker = "true" verticalAlignment = "Control.VERTICAL_ALIGNMENT_CENTER" horizontalAlignment = "Control.HORIZONTAL_ALIGNMENT_CENTER" /> 
        <Ellipse id="leftPuck" zIndex="2" thickness = "0" isVisible = "true" background="#c7c41c" paddingLeft="0px" paddingRight="0px" paddingTop="0px" paddingBottom="0px" height="60px" width="60px" isPointerBlocker = "true" verticalAlignment = "Control.VERTICAL_ALIGNMENT_CENTER" horizontalAlignment = "Control.HORIZONTAL_ALIGNMENT_CENTER" /> 
    </Ellipse>
</root>

Then JS side :

let advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI", undefined, undefined, BABYLON.Texture.NEAREST_NEAREST);
let joystickX = 0;
let joystickZ = 0;
let guiLoader = new BABYLON.GUI.XmlLoader();
guiLoader.loadLayout("joystick.xml", advancedTexture, null);

let onJoystickDown = function (coordinates) {
        guiLoader.getNodeById("leftPuck").isVisible = true;
        guiLoader.getNodeById("leftPuck").floatLeft = coordinates.x - (guiLoader.getNodeById("leftJoystick")._currentMeasure.width * .5);
        guiLoader.getNodeById("leftPuck").left = guiLoader.getNodeById("leftPuck").floatLeft;
        guiLoader.getNodeById("leftPuck").floatTop = advancedTexture._canvas.height - coordinates.y - (guiLoader.getNodeById("leftJoystick")._currentMeasure.height * .5);
        guiLoader.getNodeById("leftPuck").top = guiLoader.getNodeById("leftPuck").floatTop * -1;
        guiLoader.getNodeById("leftPuck").isDown = true;
        guiLoader.getNodeById("leftJoystick").alpha = 0.9;
    }

    let onJoystickUp = function () {
        joystickX = 0;
        joystickZ = 0;
        guiLoader.getNodeById("leftPuck").isDown = false;
        guiLoader.getNodeById("leftPuck").left = "0px";
        guiLoader.getNodeById("leftPuck").top = "0px";
        guiLoader.getNodeById("leftJoystick").alpha = 0.4;
    }
    let onJoystickPuckMove = function (coordinates) {
        if (guiLoader.getNodeById("leftPuck").isDown) {
            joystickX = coordinates.x - (guiLoader.getNodeById("leftJoystick")._currentMeasure.width * .5);
            joystickZ = advancedTexture._canvas.height - coordinates.y - (guiLoader.getNodeById("leftJoystick")._currentMeasure.height * .5);
            guiLoader.getNodeById("leftPuck").floatLeft = _this.joystickX;
            guiLoader.getNodeById("leftPuck").floatTop = _this.joystickZ * -1;
            guiLoader.getNodeById("leftPuck").left = guiLoader.getNodeById("leftPuck").floatLeft;
            guiLoader.getNodeById("leftPuck").top = guiLoader.getNodeById("leftPuck").floatTop;
        }
    }

I can not promise this will simply work out of the box. You would need to implement it in your own context. You can also not use XML and build the layout in JS, but, why would you want to do that :smiley: ?

Cheers!

1 Like

Why? How can we improve it?

Some feedback my side.

1 - It can not be made sticky.
2 - It can not be made always visible
3 - It can not be modified ( size, color, etc )

Let’s wait for @kvasss feedback and let’s create an issue to capture the need (@thomlucc)

1 Like

hi. I will be able to see in the coming days as soon as my hands reach mobile navigation in current project

1 Like

I applied nippleJS, Much superior than Babylon’s joystick, but I found out that it conflicts with pep polyfill on IPAD devices (Android works fine)

Hi @kvasss - I’ve created the issue #7398: feel free to add your feedback in the comments when you get a chance. Thanks!!!

1 Like

the biggest problem with joysticks is that they cannot be used in a fixed limited area but only in full-screen mode, because of which other logic of interaction with the scene is lost

This is why I’m really interested in recreating them. So if we can use the issue to capture the needs that would be cool