+- Logic Machine Forum (https://forum.logicmachine.net)
+-- Forum: LogicMachine eco-system (https://forum.logicmachine.net/forumdisplay.php?fid=1)
+--- Forum: Scripting (https://forum.logicmachine.net/forumdisplay.php?fid=8)
+--- Thread: FULLSCREEN BUTTON (/showthread.php?tid=1838)
FULLSCREEN BUTTON - gdimaria - 16.01.2019
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
RE: FULLSCREEN BUTTON - Erwin van der Zwart - 17.01.2019
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);
})();
});Erwin
RE: FULLSCREEN BUTTON - gdimaria - 17.01.2019
For some reason it works on PC, but not on tablet (android, same browser chrome)...
RE: FULLSCREEN BUTTON - Erwin van der Zwart - 19.01.2019
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);
})();
});Erwin
RE: FULLSCREEN BUTTON - gdimaria - 21.01.2019
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.
RE: FULLSCREEN BUTTON - alexll - 26.11.2021
(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:
BR,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);
})();
});
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.
RE: FULLSCREEN BUTTON - Daniel - 26.11.2021
It is probably old Android version. Do you know what it is?
RE: FULLSCREEN BUTTON - alexll - 26.11.2021
(26.11.2021, 15:03)Daniel Wrote: It is probably old Android version. Do you know what it is?
Android 5.1.1 customized.
RE: FULLSCREEN BUTTON - Daniel - 26.11.2021
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.
RE: FULLSCREEN BUTTON - alexll - 26.11.2021
(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.
RE: FULLSCREEN BUTTON - admin - 29.11.2021
See if this works. You will have to delete the current fullscreen custom widget before uploading script.js.
RE: FULLSCREEN BUTTON - alexll - 29.11.2021
(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!
