KR Pano Virtual Tours on Android

Anfänger

Montag, 5. Juni 2017, 12:42

Hi

I have had a bunch of virtual tours running for a while now but havent looked at them for a few years but need to sort them out as I am now getting problems. I have them set up like at the bottom so if it detects IOS it will run a completely different version of the tour. If it doesn't it runs the Flash Panorama Player of the tour.

This used to work fine when Android ran Flash properly but now it doesn't on a lot of devices, so would the easiest way be to add a user String so if it detects Android it will run the Krpano version
This will leave it running the FPP version just on desktops which is fine I think - or should I abandon that and just have the KRPano versions running for everything, though I do have a lot of functionality in the fpp tours that still provide a lot of value on desktops so I dont want to give that up unless absolutely necessary.

And what would the detect script be, just to detect generic Android devices.

Script I use to emded the krpano tours also below

I've also noticed if I directly run the krpano versions on my Android phone it doesn't work either, like it's still running flash. Is this bit the problem?

	Quellcode
1 2 3	<script> embedpano({swf:"tour.swf", xml:"tour.xml", target:"pano"}); </script>

I haven't changed anything since 2015 so I have old versions of tour.js and tour.swf running and have a full license.

Any advice greatly appreciated.

Thanks in advance

--------------------------------------------------------------------------------------------------------

CODE THAT RUNS FPP TOURS, DETECTS IOS AND SWITCHES TO ANTOHER TOUR IF FINDS IT

Quellcode

</script> <style type="text/css">
html {
height: 100%;
overflow: hidden;
}
#flashcontent {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
</style> <link rel="stylesheet" href="web_site.css">
</head>

<body bgcolor="#000000" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF">


<script language="javascript" type="text/javascript">

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPad/i)) || (navigator.userAgent.match(/iPod/i)))
{location.href='ios/tour.html';}

</script>

<div id="flashcontent" align="CENTER">
<p>&nbsp;</p>
<p class="heading_main_bold_italic">This content requires Adobe Flash Player
10 plugin</p>
<p class="heading_main_bold_italic">Please visit <a href="http://www.adobe.com/go/getflashplayer/" target="_blank">adobe.com</a>
and install it</p>
<p class="heading_main_bold_italic">After
installation click <a href="javascript: window.location.reload()">here</a> to continue</p>
</div>


<div id="flashcontent"> </div>
<script type="text/javascript">
var so = new SWFObject("tour.swf", "tour", "100%", "100%", "8");
so.addParam("allowFullScreen","true");
so.addParam("scale", "noscale");
so.addVariable("xml_file","tour.xml");
so.addParam("allowScriptAccess","sameDomain");
so.addParam ("bgcolor", "#000000");
so.write("flashcontent");
</script>

</body>
</html>

CODE THAT RUNS IOS TOURS

Quellcode

<!DOCTYPE html>
<html>
<head>
<title>krpano.com</title>
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style>
@media only screen and (min-device-width: 800px) { html { overflow:hidden; } }
html { height:100%; }
body { height:100%; overflow: hidden; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#FFFFFF; background-color:#000000; }
a{ color:#AAAAAA; text-decoration:underline; }
a:hover{ color:#FFFFFF; text-decoration:underline; }
</style>
</head>
<body>

<script src="tour.js"></script>

<div id="pano" style="width:100%; height:100%;">
<noscript><table style="width:100%;height:100%;"><tr style="valign:middle;"><td><div style="text-align:center;">ERROR:<br/><br/>Javascript not activated<br/><br/></div></td></tr></table></noscript>
<script>
embedpano({swf:"tour.swf", xml:"tour.xml", target:"pano"});
</script>
</div>

</body>

Zum Seitenanfang

Scott Witte

Fortgeschrittener

Beiträge: 382

Wohnort: Milwaukee, WI USA

Beruf: Professional Photographer

2

Montag, 5. Juni 2017, 21:21

My solution in the day would have been:

	Quellcode
1 2 3 4 5	if (swfobject.hasFlashPlayerVersion("9")) { (Code to run flash tour) } else { (Code to run non-flash tour) }

Also, your embed code should have a html5 parameter.

	Quellcode
1	embedpano({swf:"tour.swf", xml:"tour.xml", target:"pano", html5:"auto"});

However, magnificent a framework as FPP was, it is long past time to move on. Even Trausti would agree. Even if you have written custom Flash plugins for FPP there is very little that KRPano can't do to offer the same functionality with Klaus' incredibly flexible programming language. And you can still write custom Flash and JS plugins when needed. The biggest shortcoming, IMO, is in sound. That said, the included sound player is fine for 92.6% of tours. If you aren't using custom Flash plugins with FPP I can't imagine what functionality you would loose moving to KRPano.

You must upgrade to the current version of KRPano for everything to work properly on iOS and Android devices today. Do it now.

Scott Witte
Tour de Force 360VR
Scott Witte Photography

Zum Seitenanfang

masten

Anfänger

Beiträge: 31

3

Mittwoch, 7. Juni 2017, 00:02

Hi Scott

Great, many thanks. Big help! Updated and got the krpano tours running on Android. Think I'm gonna stick with the flash tours for desktops for a bit longer and use the detect code you gave me if it doesnt find Flash. I dont have the time currently to redo the functionality for the krpano ones and analytics says 30% of viewers are still using desktop so worth it for now.

Only problem now is can't get it to detect flash (using the code below) Works on desktop (with flash). On Android (Samsung Galaxy j5) just get a black screen like its not seeing the else statement and redirecting to the ios tour (ios/tour.html)

Any ideas?

Many Thanks :)

Quellcode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> Virtual Tour</title> 

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

<style type="text/css">
html {
height: 100%;
overflow: hidden;
}
#flashcontent {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
</style> <link rel="stylesheet" href="web_site.css">
</head>

<body bgcolor="#000000" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF">

if (swfobject.hasFlashPlayerVersion("9")) 
{
<div id="flashcontent"> </div>
<script type="text/javascript">
var so = new SWFObject("tour.swf", "tour", "100%", "100%", "8");
so.addParam("allowFullScreen","true");
so.addParam("scale", "noscale");
so.addVariable("xml_file","tour.xml");
so.addParam("allowScriptAccess","sameDomain");
so.addParam ("bgcolor", "#000000");
so.write("flashcontent");
</script>
}

else {
    	{location.href='ios/tour.html';}
	}

</body>
</html>

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »masten« (7. Juni 2017, 11:53)

Zum Seitenanfang

Scott Witte

Fortgeschrittener

Beiträge: 382

Wohnort: Milwaukee, WI USA

Beruf: Professional Photographer

4

Mittwoch, 7. Juni 2017, 00:54

Zitat von »masten«

Only problem now is can't get it to detect flash (using the code below) Works on desktop (with flash). On Android (Samsung Galaxy j5) just get a black screen like its not seeing the else statement and redirecting to the ios tour (ios/tour.html)

I don't see where you load the swfobject.js. You need to do that to use it. Make sure you are doing that before running you detection script.

Scott Witte
Tour de Force 360VR
Scott Witte Photography

Zum Seitenanfang

masten

Anfänger

Beiträge: 31

5

Mittwoch, 7. Juni 2017, 11:55

Hi Scott,

Yeah it's there you couldn't see it as it was wrapped off page. I've edited it so you can see. It must be loading mustn't it? - as the fpp tours run on desktop ok. It's just not detecting when it's not there.

Cheers :) M

Zum Seitenanfang

Scott Witte

Fortgeschrittener

Beiträge: 382

Wohnort: Milwaukee, WI USA

Beruf: Professional Photographer

6

Mittwoch, 7. Juni 2017, 18:52

Sorry. I missed lots that should have been obvious yesterday.

All your JS needs to be inside the script tag:

Quellcode

<div id="flashcontent"> </div>
<script type="text/javascript">
	if (swfobject.hasFlashPlayerVersion("9")) {
		var so = new SWFObject("tour.swf", "tour", "100%", "100%", "8");
		so.addParam("allowFullScreen","true");
		so.addParam("scale", "noscale");
		so.addVariable("xml_file","tour.xml");
		so.addParam("allowScriptAccess","sameDomain");
		so.addParam ("bgcolor", "#000000");
		so.write("flashcontent");
	} else {
		location.href='ios/tour.html';
	}
</script>

Scott Witte
Tour de Force 360VR
Scott Witte Photography

Zum Seitenanfang

masten

Anfänger

Beiträge: 31

7

Mittwoch, 7. Juni 2017, 22:16

Hi Scott

Ok thanks, still can't get it to work though. With the code below it now doesn't load the fpp tour on desktop either. Just a black screen in Firefox on desktop, and Android. I'm not a coder so it's probably some small syntax I can't see. What have I got wrong?

Thanks :) M

Quellcode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Virtual Tour</title> 


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

<style type="text/css">
html {
height: 100%;
overflow: hidden;
}
#flashcontent {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
</style> <link rel="stylesheet" href="web_site.css">
</head>

<body bgcolor="#000000" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF">

<div id="flashcontent"> </div>
<script type="text/javascript">
	if (swfobject.hasFlashPlayerVersion("9")) {
		var so = new SWFObject("tour.swf", "tour", "100%", "100%", "8");
		so.addParam("allowFullScreen","true");
		so.addParam("scale", "noscale");
		so.addVariable("xml_file","tour.xml");
		so.addParam("allowScriptAccess","sameDomain");
		so.addParam ("bgcolor", "#000000");
		so.write("flashcontent");
	} else {
		location.href='ios/tour.html';
	}
</script>


</body>
</html>

Zum Seitenanfang

Scott Witte

Fortgeschrittener

Beiträge: 382

Wohnort: Milwaukee, WI USA

Beruf: Professional Photographer

8

Donnerstag, 8. Juni 2017, 01:22

Right after you load swfobject add the following code:

	Quellcode
1 2 3 4 5 6 7	<script type="text/javascript"> if (swfobject.hasFlashPlayerVersion("9")) { alert("WE GOT FLASH!!"); } else { alert("Ah...no flash"); } </script>

IF SWFObject is loaded you will get one of the two alerts telling you if you have Flash. If there are no alerts SWFObject is not loaded. The path may be incorrect.

If you get the appropriate alert delete the above code and modify your script as follows:

Quellcode

<script type="text/javascript">
	if (swfobject.hasFlashPlayerVersion("9")) {
                alert("WE GOT FLASH!!");
		var so = new SWFObject("tour.swf", "tour", "100%", "100%", "8");
		so.addParam("allowFullScreen","true");
		so.addParam("scale", "noscale");
		so.addVariable("xml_file","tour.xml");
		so.addParam("allowScriptAccess","sameDomain");
		so.addParam ("bgcolor", "#000000");
		so.write("flashcontent");
	} else {
               alert("Ah...no flash");
		location.href='ios/tour.html';
	}
</script>

The appropriate alert should fire. If you aren't getting the results you expect there is something wrong somewhere else in your code.

Scott Witte
Tour de Force 360VR
Scott Witte Photography

Zum Seitenanfang

masten

Anfänger

Beiträge: 31

9

Donnerstag, 8. Juni 2017, 16:18

Hi

Ok thanks. Yeah tried

<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
if (swfobject.hasFlashPlayerVersion("9")) {
alert("WE GOT FLASH!!");
} else {
alert("Ah...no flash");
}
</script>

and there's no alert messages, but the swfobject must be loading as the FPP tours run fine if you take out the if, else statements from this:

<script type="text/javascript">
if (swfobject.hasFlashPlayerVersion("9")) {
var so = new SWFObject("tour.swf", "tour", "100%", "100%", "8");
so.addParam("allowFullScreen","true");
so.addParam("scale", "noscale");
so.addVariable("xml_file","tour.xml");
so.addParam("allowScriptAccess","sameDomain");
so.addParam ("bgcolor", "#000000");
so.write("flashcontent");
} else {
location.href='ios/tour.html';
}
</script>

So I don't know? It seems to be the detector statement not working. Could it be SWF Object Version. I have 1.5.

I've PM'ed you some links

Thanks much Scott

M

Zum Seitenanfang

masten

Anfänger

Beiträge: 31

10

Donnerstag, 8. Juni 2017, 17:28

I've also just tried this i.e detect IOS & Android to redirect and run the KRPANO tours if it finds

<script language="javascript" type="text/javascript">

if( /Android|webOS|iPhone|iPad|iPod|Opera Mini/i.test(navigator.userAgent) )
{
location.href='ios/tour.html';}
}

</script>

But doesn't work on my phone which clearly has Android in the User Agent

Nothing seems to work

Thanks

M

Zum Seitenanfang

Scott Witte

Fortgeschrittener

Beiträge: 382

Wohnort: Milwaukee, WI USA

Beruf: Professional Photographer

11

Donnerstag, 8. Juni 2017, 20:24

Zitat von »masten«

Could it be SWF Object Version. I have 1.5.

YES! Update to 2.2.

Also, if the version of KRPano is too old it will have problems on current phones.

Scott Witte
Tour de Force 360VR
Scott Witte Photography

Zum Seitenanfang

masten

Anfänger

Beiträge: 31

12

Freitag, 9. Juni 2017, 01:08

Hi.

Ok yeah, updated to 2.3 (couldn't find 2.2) and it detects flash, but the tours don't load. I think because the syntax is different but I couldn't find anything that explains it properly. The references are all too technical for me to understand what's going on.

Do you know what the new syntax'd be for this

<div id="flashcontent"> </div>
<script type="text/javascript">
var so = new SWFObject("tour.swf", "tour", "100%", "100%", "8");
so.addParam("allowFullScreen","true");
so.addParam("scale", "noscale");
so.addVariable("xml_file","tour.xml");
so.addParam("allowScriptAccess","sameDomain");
so.addParam ("bgcolor", "#000000");
so.write("flashcontent");
</script>

Thanks again

M

Zum Seitenanfang

Scott Witte

Fortgeschrittener

Beiträge: 382

Wohnort: Milwaukee, WI USA

Beruf: Professional Photographer

13

Freitag, 9. Juni 2017, 01:36

Here is some code from when I was using this method:

Quellcode

<div id="flashContent"></div>
<script type="text/javascript">
	if (swfobject.hasFlashPlayerVersion("9")) {
		var flashvars = {};
		flashvars.panoName = "images/blank";
		flashvars.panHome = "0";
		flashvars.zoomHome = "0";
		flashvars.tiltHome = "0";
		flashvars.xml_file = "xml/taliesin.xml";
		var params = {};
		params.quality = "high";
		params.wmode = "direct";
		params.allowscriptaccess = "sameDomain";
		params.allowFullScreen = "true";
		params.bgcolor = "#D6D6D6";
		var attributes = {};
		attributes.id = "VRTour";
		swfobject.embedSWF(
			"../files/pano.swf", "flashContent", 
			"100%", "100%", 
			"10.0.12", "../Scripts/expressInstall.swf", 
			flashvars, params, attributes);
	} 
</script>

Adjust paths, names etc to your need

Scott Witte
Tour de Force 360VR
Scott Witte Photography

Zum Seitenanfang

masten

Anfänger

Beiträge: 31

14

Freitag, 9. Juni 2017, 16:24

Hi Scott,

Ok thanks for that and all your help, I really appreciate it. I couldn't get that to work though as really tbh, I'm out of my depth with it. So I've decided to scrap the Flash tours, as you initially suggested - should've taken your advice!

Got them all working apart from one thing - the Google Analytics plug-in now only detects the first scene of the tours. I've changed nothing except bringing the KRPano .js and .swf files up to date, so would I need an updated Google Analytics plugin js file for this to work with those? I have the one from 2013

Problem is on here https://krpano.com/plugins/userplugins/googleanalytics/ , the update link is down http://jaydee.ru/kp/updates/

Do you have a copy of that file if that's not available anymore - or would I need to use another plugin?

Here's the code I have. Was working and detecting all scenes before KRPano updates.

Quellcode

<krpano>
	<!-- Plugins -->
	<plugin name="ga"
			url="plugins/analytics.swf"
			alturl="plugins/analytics.js"
			keep="true"
			preload="true"
			
			debug="true"
			account="UA-15611979-1"
			>
		


</plugin>

	<action name="activatepano">
		if (%1 != null,
			if (get(action[mainloadpano].content) !== null,
				if (%2 == xml, mainloadpano(%HTMLPATH%/%1), mainloadpano(%1)),
					if (%2 == xml, loadpano(%HTMLPATH%/%1,null,MERGE,BLEND(1)), loadscene(%1,null,MERGE,BLEND(1)));
					wait(blend);
			)
		);
	</action>


	<action name="add_scenes_to_analytics">
		for (set(i,0), i LT scene.count, inc(i), 
		  if (get(scene[get(i)].url), copy(data[a.url].content, scene[get(i)].url), copy(data[a.url].content, scene[get(i)].name));
		  plugin[ga].addPano(get(scene[get(i)].name), get(scene[get(i)].name), true, get(data[a.url].content));
		);
	
</action>


	<action name="trackpageviews">
	plugin[ga].trackpageview(/suite_bedroom/);
		
	</action>


</krpano>

Many thanks. M