Simple way to detect capability of running Flash / html5

anahum · Fri Nov 19, 2010 4:08 pm

I want want share a very simple way to detect if the user is trying to run your panoramas from a browser that is Flash capable or not, and then trigger the appropriate version of your panorama. You must create a simple html with the following code:

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Flash/html5 browser capability detector</title>
		<script language=javascript>
			if((navigator.userAgent.match(/chrome/i)) || (navigator.userAgent.match(/MSIE/i)) || (navigator.userAgent.match(/Firefox/i))  || (navigator.userAgent.match(/Opera/i))) 
				{location.replace("flashpano.html");}
			else
			{
				if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))  || (navigator.userAgent.match(/Safari/i)))
					{location.replace("html5pano.html");}
				else
					{location.replace("flashpano.html");}
			}
		</script>
	</head>
	<body>
		<div>
		</div>
	</body>
</html>

...the rest is as usual, i.e., generate both versions of your panos (html + swf for the Flash version and html + xml for the html5/css3 version) with your preferred ggt and skins. Inside the code of the detector html you just need to replace "flashpano.html" and "html5pano.html" for the names you are using. You can even replace those html names by the URL of your panos.

P.S.: You can update the list of browsers detected to add new major browsers as they appear in the market.

alabwab · Thu Nov 25, 2010 4:12 pm

Hi Arturo!
Thanks for the Javascript!

I've got one question left: The current version - Pano2VR 3.0 beta3 - allows for multi-resolution output in the html's mobile-output-tab. AFAIK the display window size as defined in the SETTINGS tab is kept the same size for all devices. If for example I choose to open this window at 800x600px (making sense for a laptop or a standard desktop screen) the panorama is opened at this size on the iphone 3 resulting in parts of the view being cut off - and with no option for scrolling or reducing the window size to the screen size of the device.
for example: http://www.alois.cc/i/garten-psychiatrie-hall-1.html
My question: Is there a way - by means of java script - to change the display window size depending on the user agent. (ipad, iphone3, iphone4, ...)

Thank You very much
Alois

anahum · Fri Nov 26, 2010 5:59 pm

Alois, the way to avoid window size issues is to use fullscreen styles (there are many topics about this in the forum). In that way your panorama will always try to use the complete screen. If you need to show your panorama in a specific size, then run it inside an iframe.

alabwab · Mon Nov 29, 2010 12:12 pm

Hi Arturo,
thank You for the answer.

Here is a different solution for opening panos without using the whole browser window.
I've written a few lines of javascript that open the initial display window within the browser window depending on screen size.

here is the link:
http://www.alois.cc/i/garten-psychiatrie-hall-9.html

here is the javascript code snippet:

Code: Select all

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

		<script type="text/javascript">
		// check for CSS3 3D transformations
		if (Modernizr.csstransforms3d) {
			
			  //start template modified by alois wechselberger
			// trigger initial display window size by screen size javascript response to nested if-else statements
			// container sizes are not tested and should be changed according to taste
			// alternative method: trigger initial display window size by different user agents
			
// use HTML5 panorama for specified screen size
		if ((screen.width>=1920) && (screen.height>=1200)) {
   document.writeln('<div id="container" style="width:1600px;height:1100px;margin-left:auto;margin-right: auto ;"></div>');


    // use HTML5 panorama for specified screen size
			  } else {
				 if ((screen.width>=1600) && (screen.height>=1000)) {
    document.writeln('<div id="container" style="width:1200px;height:800px;margin-left:auto;margin-right: auto ;"></div>');

	
	    // use HTML5 panorama for specified screen size
			     } else {
					if ((screen.width>=1024) && (screen.height>=768)) {
    document.writeln('<div id="container" style="width:900px;height:600px;margin-left:auto;margin-right: auto ;"></div>');

			//start of i-devices
			    //  Screen resolution for iPad = 1024x768; iPhone4 = 960x640; iPod Touch and iPhone 3G = 480x320 
			      //  width and height inverted as devices assume portrait mode
				  
				  
			// use HTML5 panorama ipad 1024x768
			       } else {
					  if  ((screen.width>=768) && (screen.height>=1024)) {
    document.writeln('<div id="container" style="width:800px;height:600px;margin-left:auto;margin-right: auto ;"></div>');


               // use HTML5 panorama iphone4 960x640
                     } else {
						if ((screen.width>=640) && (screen.height>=960))  {
    document.writeln('<div id="container" style="width:600px;height:450px;margin-left:auto;margin-right: auto ;"></div>');


                  // use HTML5 panorama iphone3 480x320
                      } else {
						 if ((screen.width>=320) && (screen.height>=480)) {
    document.writeln('<div id="container" style="width:300px;height:225px;margin-left:auto;margin-right: auto ;"></div>');
                      }
                     }
                    }
                   }
                  }
                 }
                //end template modified by alois wechselberger
			
			pano=new pano2vrPlayer("container");
			skin=new pano2vrSkin(pano);
			pano.readConfigUrl("garten-psychiatrie-hall-1.xml");
			updateOrientation();
			setTimeout(function() { updateOrientation(); }, 10);
			setTimeout(function() { updateOrientation(); }, 1000);
		} else {
			// use Flash panorama
			if (DetectFlashVer(9,0,0)) {
				p2q_EmbedFlash('garten-psychiatrie-hall-1.swf', '800', '600',
					'bgcolor', '#f0f0f0',
					'play', 'true',
					'cache','true',
					'allowFullscreen','true',
					'autoplay','true'); 
			} else {  // flash is too old or we can't detect the plugin
				document.write('This content requires the Adobe Flash Player Version 9 or higher. ');
			}
		}
		</script>

Greetings from Alois