CASTORGUI don't scale to fullscreen while i use engine.switchFullscreen(true);

[swat0284]

Hello i have got one problem, CASTORGUI don't scale to fullscreen while i use  engine.switchFullscreen(true);

[davrous]

Hi,

 

 This is because engine.switchFullscreen is using the Fullscreen API on the rendering canvas element. You have to put the rendering canvas and the HTML elements that will embed the CastorGUI into a unique element (a DIV for instance) and call the Fullscreen API on this container. For instance, here's a sample code:

 

var renderingZone = document.getElementById("renderingZone");
var isFullScreen = false;

 

document.addEventListener("fullscreenchange", onFullScreenChange, false);
document.addEventListener("mozfullscreenchange", onFullScreenChange, false);
document.addEventListener("webkitfullscreenchange", onFullScreenChange, false);
document.addEventListener("msfullscreenchange", onFullScreenChange, false);

 

function onFullScreenChange() {
    if (document.fullscreen !== undefined) {
        isFullScreen = document.fullscreen;
    } else if (document.mozFullScreen !== undefined) {
        isFullScreen = document.mozFullScreen;
    } else if (document.webkitIsFullScreen !== undefined) {
        isFullScreen = document.webkitIsFullScreen;
    } else if (document.msIsFullScreen !== undefined) {
        isFullScreen = document.msIsFullScreen;
    }
}

 

switchFullscreen = function () {
    if (!isFullScreen) {
        BABYLON.Tools.RequestFullscreen(renderingZone);
    }
    else {
        BABYLON.Tools.ExitFullscreen();
    }
};

 

Bye,

 

David

[Dad72]

I've added the detection of fullscreen change to a reload of the page to place all the elements correctly.

 

It was the simplest solution to achieve but I'm not sure this is the most adequate solution. 

document.addEventListener('webkitfullscreenchange', function() {location.reload();}, false);document.addEventListener('mozfullscreenchange',  function() {location.reload();}, false);document.addEventListener('fullscreenchange',  function() {location.reload();}, false);document.addEventListener('MSFullscreenChange',  function() {location.reload();}, false);

 

[swat0284]

both solutions wont work

[davrous]

Why?

[swat0284]

Gui just gone

[Dad72]

This works perfectly at home. Make sure you use the latest version of CastorGUI and empty your browser cache.

[swat0284]

Maybe reason is that i position gui like (screen.width /2) 

[Dad72]

Excuse me, what do you mean?

[swat0284]

 guiButtonMove = new CASTORGUI.GUITexture("guiButtonMove","data/move.png",{x: guisystem.getCanvasWidth().width-(51/2)-20 , y: ((guisystem.getCanvasWidth().height - (41/2))/2 ) + 40, w: 51/1.5, h: 41/1.5},guisystem,Move);
 

[Dad72]

And ? What is the problem ?

[swat0284]

Dont know, jut when i use 1st or 2nd solution all gui gone

[Dad72]

You made an error in your code. See your console for errors.