Javascript for a condition in the screen editor?

[HaraldJ]

What I would VERY much like to achieve is hiding the "full screen"-button when a panorama is shown on an iOS device. It can't work there, so it shouldn't be there.

I know I can link Javascript code to a button, via the URL field, and I'm wondering if something similar can be done for a condition?

Or has anybody already found a way to hide "full screen" on iOS devices?

Thanks!!!

Harald

[CBosch]

Or has anybody already found a way to hide "full screen" on iOS devices?

Hi Harald,

yes I disable it in the settings and have it in the skin - and there you can show/hide with a logic-block.

[HaraldJ]

Hi Christian,

Wow, I'm impressed! How do you do it, if you don't mind me asking?

Harald

[CBosch]

Hi Harald,

as shown:

Bildschirmfoto-2016-02-07-um-16.06.55.jpg (101.9 KiB) Viewed 4037 times

Bildschirmfoto-2016-02-07-um-16.12.38.jpg (144.13 KiB) Viewed 4037 times

[HaraldJ]

Hi Christian,

Thank you very much indeed! You are using the new "is mobile" function, that would certainly help, but what I'm after is knowing if it's iOS.

If I remember correctly, "toggle fullscreen" works on Android devices, but does nothing on iPads or iPhones. For Android (well, anything not Apple) I would like to keep the fullscreen functionality, only for iOS I would like to hide the button in the controller.

Best regards

Harald

[CBosch]

Hi Harald,

I understand. In this case, due to not having enough javascript-experience I would do:

a) you use the fullscreen by "right-click":

create the pano without fullscreen option selected normal. Rename the skin.js in skin-iOS.js. After that you select the fullscreen option and rebuild the pano. Now you have two js for the skin.


b) you switch with a button etc. in the skin:

Then you make a duplicate of your skin in the skin-editor, delete the fullscreen-button and create a pano. Rename the skin.js in skin-iOS.js, select now the skin with the buttoned create the pano again. Now you have two js-files.

With this you add in your webpage the code:

Code: Select all

... yout html-code


	<script type="text/javascript" src="pano2vr_player.js">
		</script>

<?php

$iPod    = stripos($_SERVER['HTTP_USER_AGENT'],"iPod");
$iPhone  = stripos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$iPad    = stripos($_SERVER['HTTP_USER_AGENT'],"iPad");
$webOS   = stripos($_SERVER['HTTP_USER_AGENT'],"webOS");

	$html= "";
	
if( $iPod || $iPhone || $iPad ||$webOS ){
    
	
	echo "<script type='text/javascript' src='skin-iOS.js'></script>";
	
}else {
    
	// here use skin.js and adapt pathes
	echo "<script type='text/javascript' src='skin.js'></script>";

}

?> 

		<div id="container" style="width:100%;height:100%;">
		This content requires HTML5/CSS3, WebGL, or Adobe Flash Player Version 10 or higher.
		</div>
		<script type="text/javascript">
	
			// create the panorama player with the container
			pano=new pano2vrPlayer("container");
		// add the skin object
		skin=new pano2vrSkin(pano);
		// load the configuration
		window.addEventListener("load", function() {
			pano.readConfigUrlAsync("pano.xml");
		});
		</script>
		<noscript>
			<p><b>Please enable Javascript!</b></p>
		</noscript>


.... continue your html-code

You use php to detect the device you want and use the skin you want specially for that device.

[HaraldJ]

Hi Christian,

Thanks, that's a very interesting idea. You are absolutely right, two different skins would make it possible to do the check for iOS well before the panorama is loaded.

Adding the necessary PHP code to my HTML template would make it "my" standard, and it all would work in an iFrame without any further modification.

Skin variables seem to be defined in the skin .js file, not in an XML. But it should be simple to create a skin variable "is_iOS" in the default skin template that would control if the full screen button is shown. A Javascript file is text, so it would be a simple batch job to create a copy of the skin.js file, and to replace the initial value of that variable in the pano2vrSkin constructor via a text search and replace.

Looks like the way to go for me! Brilliant, thank you very much!

Harald