FULLSCREEN BUTTON

[gdimaria]

Hi, I would like to put a button on plan to let the user to shift between  fullscreen to windowed vision of his browser.

Usually you can do it with F11 on your keyboard, but on a tablet would be better with a button.

How can I do?  Can you provide me the correct javascript code?

Thanks in advance

Peppe

[Erwin van der Zwart]

Hi,

I use this custom JS to set the visu to fullscreen on first user input (if it is not already full screen mode):

Code:

$(function(){
 
 // Fullscreen function
 function fullScreen() {
   if (!document.fullscreenElement &&
       !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {
     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);
     }
   }
 }

 (function() {
   var StartUserInput = function (e) {
     fullScreen();
     // Check if document is loaded in iframe
     if (window.frameElement){
       // Remove event listeners from parent
       var thisparent = window.parent;
       thisparent.document.removeEventListener('touchstart', StartUserInput);
       thisparent.document.removeEventListener('touchend', StartUserInput);
                thisparent.document.removeEventListener('click', StartUserInput);
     }
     // Remove events
     document.removeEventListener('touchstart', StartUserInput);
     document.removeEventListener('touchend', StartUserInput);
     document.removeEventListener('click', StartUserInput);
   };
   // Check if document is loaded in iframe
   if (window.frameElement){
     // Add event listeners to parent
     var thisparent = window.parent;
     // Event listener for iOS 6-8 (was previous touchstart event)
     thisparent.document.addEventListener('touchstart', StartUserInput);
     // Event listener for iOS 9+ (is now touchend event)
     thisparent.document.addEventListener('touchend', StartUserInput);
     thisparent.document.addEventListener('click', StartUserInput);
   }
   // Event listener for iOS 6-8 (was previous touchstart event)
   document.addEventListener('touchstart', StartUserInput);
   // Event listener for iOS 9+ (is now touchend event)
   document.addEventListener('touchend', StartUserInput);
   document.addEventListener('click', StartUserInput);
 })();
});

BR,

Erwin

[gdimaria]

For some reason it works on PC, but not on tablet (android, same browser chrome)...

[Erwin van der Zwart]

Hi,

Somehow Android is having issues with the touchstart parameter, removed it in the sample below:

Code:

$(function(){
  // Fullscreen function
  function fullScreen() {
    if (!document.fullscreenElement &&
        !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {
      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();
      }
    } 
  }
  (function() {
    var StartUserInput = function (e) {
      fullScreen();
      // Check if document is loaded in iframe
      if (window.frameElement){
        // Remove event listeners from parent
        var thisparent = window.parent;
        thisparent.document.removeEventListener('touchend', StartUserInput);
        thisparent.document.removeEventListener('click', StartUserInput);
      }
      // Remove events
      document.removeEventListener('touchend', StartUserInput);
      document.removeEventListener('click', StartUserInput);
    };
    // Check if document is loaded in iframe
    if (window.frameElement){
      // Add event listeners to parent
      var thisparent = window.parent;
      // Event listener for iOS 9+ (is now touchend event)
      thisparent.document.addEventListener('touchend', StartUserInput);
      thisparent.document.addEventListener('click', StartUserInput);
    }
    // Event listener for iOS 9+ (is now touchend event)
    document.addEventListener('touchend', StartUserInput);
    document.addEventListener('click', StartUserInput);
  })();
});

BR,

Erwin

[gdimaria]

Ok, now it's working, but sometimes (as before) when you get in fullscreen mode with the first user input, then you can't input nothing anymore. Same happens if you click on a link button. It's like the screen was frozen. Then you have to press esc or F11 to get back to normal mode to input something.

[alexll]

Hi,

Somehow Android is having issues with the touchstart parameter, removed it in the sample below:

Code:

$(function(){
  // Fullscreen function
  function fullScreen() {
    if (!document.fullscreenElement &&
        !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {
      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();
      }
    } 
  }
  (function() {
    var StartUserInput = function (e) {
      fullScreen();
      // Check if document is loaded in iframe
      if (window.frameElement){
        // Remove event listeners from parent
        var thisparent = window.parent;
        thisparent.document.removeEventListener('touchend', StartUserInput);
        thisparent.document.removeEventListener('click', StartUserInput);
      }
      // Remove events
      document.removeEventListener('touchend', StartUserInput);
      document.removeEventListener('click', StartUserInput);
    };
    // Check if document is loaded in iframe
    if (window.frameElement){
      // Add event listeners to parent
      var thisparent = window.parent;
      // Event listener for iOS 9+ (is now touchend event)
      thisparent.document.addEventListener('touchend', StartUserInput);
      thisparent.document.addEventListener('click', StartUserInput);
    }
    // Event listener for iOS 9+ (is now touchend event)
    document.addEventListener('touchend', StartUserInput);
    document.addEventListener('click', StartUserInput);
  })();
});

BR,

Erwin

Is there any way to use it on Mosaic visu? I'm testing it on a Hikvision Android intercom monitor (Logicmachine app doesn't work on it, I don't know why), so I'm using the web browser, but there is no option to keep the app totally fullscreen.

[Daniel]

It is probably old Android version. Do you know what it is?

[alexll]

It is probably old Android version. Do you know what it is?

Android 5.1.1 customized.

[Daniel]

Go to mosaic Extensions and add new widget. Select this file.
Once you go to Mosaic and when you click on anything it will go full screen.

[alexll]

Go to mosaic Extensions and add new widget. Select this file.
Once you go to Mosaic and when you click on anything it will go full screen.

Great! It works flawlessly, but when I change to another app, it returns to normal mode again until I refresh the page.
Any idea of how to execute this script again without refreshing?

Thank you very much.

[admin]

See if this works. You will have to delete the current fullscreen custom widget before uploading script.js.

[alexll]

See if this works. You will have to delete the current fullscreen custom widget before uploading script.js.

Simply perfect! Thank you very much!