Make a BABYLON.GUI button to go fullscreen does not seem to work on mobile?

[Nodragem]

Hello,

I know that fullscreen can only be enabled on user request. I made a BABYLON.GUI button that calls engine.switchFullscreen(false) and it works only on desktop ? does not seem to work on mobile device...

Here the code I use:

// in Controller.ts

options.onPointerDown = (eventData:BGUI.Vector2WithInfo, eventState:BABYLON.EventState) => {game.toggleFullScreen();}
options.text = "FullScreen";
GUIHelper.addSimpleButton(parent, 'menu', options);

// in GUIHelper.ts

export function addSimpleButton(parent:BGUI.Container|BGUI.AdvancedDynamicTexture, name:string, options:buttonOptions):BGUI.Button{
        let button = BGUI.Button.CreateSimpleButton(name, options.text?options.text:"Button");
        button.width = options.width?options.width:0.5;
        button.height = options.height?options.height:'40px';
        button.top = options.top?options.top:0;
        button.left = options.left?options.left:0;
        button.color = options.color?options.color:"white";
        button.fontSize = options.fontSize?options.fontSize:"5%";
        button.background = options.background?options.background:"#33ff55";
        button.verticalAlignment = options.vAlignment?options.vAlignment:BGUI.Control.VERTICAL_ALIGNMENT_TOP;
        button.horizontalAlignment = options.hAlignment?options.hAlignment:BGUI.Control.HORIZONTAL_ALIGNMENT_LEFT;

        if(options.onPointerDown)
            button.onPointerDownObservable.add(options.onPointerDown);

        parent.addControl(button);

        return button;
        
    }

// in game.ts

public toggleFullScreen(){
        this._engine.switchFullscreen(false);
    }

Any thoughts?

[JCPalmer]

I believe that this only works "html buttons", not clicks in a canvas, which what the GUI is.  I wanted to do that too, but do not think it is going to work.

If you say this works on desktop, it might be browser dependent.  Are you trying this on iOS?

[Guest]

iOS does NOT support fullscreen mode unfortunately. But this should work on Android (Does it work with a regular html button?)

[Nodragem]

I am not a very experienced web developer to be honest ? I am more a gamedev, so... I am not quite sure how to make a html button. I will try to find out how.

As far as I can tell, a BABYLON.GUI button does not work to enable fullscreen on iOS Safari, Chrome; Android Chrome; and Amazon Fire 7 (of which I forgot the name of the browser).

Also, iOS Safari goes fullscreen when you load the page in portrait and then rotate the device; so that's good enough.

@Deltakosh can you refer me to more information about fullscreen not being supported in iOS? That's quite problematic ? would I suffer the same if I pack my game into an app with something like Cordova?

[JCPalmer]

I can answer the Cordova part.  Fullscreen should work if you add preferences in the config.xml file, like:

<?xml version='1.0' encoding='utf-8'?>
<widget
    ...
    <platform name="android"> ... </platform>
    <platform name="ios"> ... </platform>
    ...
    <!-- added manually -->
    <preference name="Orientation" value="landscape" />
    <preference name="Fullscreen" value="true" />
</widget>

You can of course choose give some space to elements other than a canvas.  On Android, I seem to remember first time user gets a choice.

[Guest]

Here is the link: https://caniuse.com/#feat=fullscreen