Posts: 295
Threads: 80
Joined: May 2017
Reputation:
0
16.01.2019, 18:05
(This post was last modified: 16.01.2019, 18:09 by 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
Posts: 1801
Threads: 7
Joined: Jul 2015
Reputation:
120
17.01.2019, 11:22
(This post was last modified: 17.01.2019, 11:23 by 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51
$(
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
Posts: 295
Threads: 80
Joined: May 2017
Reputation:
0
For some reason it works on PC, but not on tablet (android, same browser chrome)...
Posts: 1801
Threads: 7
Joined: Jul 2015
Reputation:
120
Hi,
Somehow Android is having issues with the touchstart parameter, removed it in the sample below:
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43
$(
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
Posts: 295
Threads: 80
Joined: May 2017
Reputation:
0
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.
Posts: 114
Threads: 12
Joined: Mar 2019
Reputation:
3
(19.01.2019, 20:08) Erwin van der Zwart Wrote: Hi,
Somehow Android is having issues with the touchstart parameter, removed it in the sample below:
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43
$(
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.
Posts: 5010
Threads: 28
Joined: Aug 2017
Reputation:
229
It is probably old Android version. Do you know what it is?
------------------------------
Ctrl+F5
Posts: 114
Threads: 12
Joined: Mar 2019
Reputation:
3
(26.11.2021, 15:03) Daniel Wrote: It is probably old Android version. Do you know what it is?
Android 5.1.1 customized.
Attached Files
Thumbnail(s)
Posts: 5010
Threads: 28
Joined: Aug 2017
Reputation:
229
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.
Attached Files
------------------------------
Ctrl+F5
Posts: 114
Threads: 12
Joined: Mar 2019
Reputation:
3
(26.11.2021, 15:31) Daniel Wrote: 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.
Posts: 8159
Threads: 43
Joined: Jun 2015
Reputation:
472
See if this works. You will have to delete the current fullscreen custom widget before uploading script.js.
Attached Files
Posts: 114
Threads: 12
Joined: Mar 2019
Reputation:
3
(29.11.2021, 08:13) admin Wrote: See if this works. You will have to delete the current fullscreen custom widget before uploading script.js.
Simply perfect! Thank you very much!