[SOLVED] Full screen option at early preload stage

Help & Support
1

I want to let the user choose fullscreen early (instead of within the PC-exported env.). Is it possible to do something like this (PS: is only meta-script, as the lines

    <script src="__start__.js"></script>
    <script src="__loading__.js"></script>
  • are quite off [have already googled; {js put src= “script source” in function} without luck … the ***-lines are the usual PlayCanvas upstart-lines]):



<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Refresh" content="12;url=https://www.amfibios.dk/Deson/assets/SB10/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Chrome, Safari and Opera syntax */
:-webkit-full-screen {
  background-color: yellow;
}

/* Firefox syntax */
:-moz-full-screen {
  background-color: yellow;
}

/* IE/Edge syntax */
:-ms-fullscreen {
  background-color: yellow;
}

/* Standard syntax */
:fullscreen {
  background-color: yellow;
}

/* Style the button */
button {
  padding: 20px;
  font-size: 20px;
}
</style>
 ***<script src="playcanvas-stable.min.js"></script>***
***    <script src="__settings__.js"></script>***
</head>
<body>

<h2>Fullscreen with JavaScript</h2>
<p>Click on the "Open Fullscreen" button to open this page in fullscreen mode. Close it by either clicking the "Esc" key on your keyboard, or with the "Close Fullscreen" button.</p>

<button onclick="openFullscreen();">Open Fullscreen</button>
<button onclick="closeFullscreen();">Close Fullscreen</button>

<script>
var elem = document.documentElement;
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) { /* Firefox */
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE/Edge */
    elem.msRequestFullscreen();
  }
      ***<script src="__start__.js"></script>***
***    <script src="__loading__.js"></script>***
}

function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  }
}
</script>


</body>
</html>
2

If you have access to either the index.html or loading script then, yes, you can add something (a clickable dom) to go full screen.

The engine doesn’t really do anything special to go full screen.

3

ok, sounds good … but if I cannot google a method?
I want to do code like this (again meta):

function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) { /* Firefox */
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE/Edge */
    elem.msRequestFullscreen();
  }
thenLoadPlayCanvasStartupFiles();
}

function thenLoadPlayCanvasStartupFiles(){
      ***<script src="__start__.js"></script>***
***    <script src="__loading__.js"></script>***
}

The issue is within using the tag of; src=“someOtherScript.js”.
But as it is in the realm of <script …(src placed here)… >, and not within <script>..(src placed here)..</script>, I get lost? … what to code? … and/or what to google to find syntax?

4

Sorry there was a typo … <script>..(src placed here)..</script>-syntax gets lost if not with a ‘</>’ tag around it (I know)

5

For those interested (solved it myself) - here is a crude version that works (to some extent … some minor issues with color, body-dimensions and ‘buttons-will-have-to-get-hidden-at-click’ as well):



<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Chrome, Safari and Opera syntax */
:-webkit-full-screen {
  background-color: yellow;
}

/* Firefox syntax */
:-moz-full-screen {
  background-color: yellow;
}

/* IE/Edge syntax */
:-ms-fullscreen {
  background-color: yellow;
}

/* Standard syntax */
:fullscreen {
  background-color: yellow;
}

/* Style the button */
button {
  padding: 20px;
  font-size: 20px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#myid").click(function(){ 
  if (!document.fullscreenElement &&    // alternative standard method
      !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.msRequestFullscreen) {
      document.documentElement.msRequestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
      document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }
    
  
	$.getScript("__start__.js");	$.getScript("__loading__.js");
  });
});
</script>

 <script src="playcanvas-stable.min.js"></script>
    <script src="__settings__.js"></script>
</head>
<body>

<h2>Fullscreen with JavaScript</h2>
<p>Click on the "Open er agrFullscreen" button to open this page in fullscreen mode. Close it by either clicking the "Esc" key on your keyboard, or with the "Close Fullscreen" button.</p>

<button id="myid">Open Fullscreen</button>
<button onclick="closeFullscreen();">Close Fullscreen</button>



</body>
</html>
1 Like