js(fb.start) support for ipad

rbudnikas · November 29, 2010 at 8:39 PM

I've started moving to floatbox vs. greybox as it gives more functional ability. Problem is that I get the same issue with both when I change my user agent on my safari - iMac to Mobile Safari - 3.2.2.

I am calling the floatbox via
js(fb.start(client_xml/object_vr/image74.html)). This works in FireFox
3.6.12 - sort of and Safari 5.0.3.

When I switch
my Safari user agent to Mobile Safari 3.2.2 and run the same onclick
statement I get the following errors in my pano1.js file.

Quote

krpano embedding error: there is already a html element with this id: krpanoSWFObject pano1.js:48
&
TypeError: Result of expression 'J[a[_[106]]]' [undefined] is not an object. pano1.js:48

My HTML looks like this.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>Optical Trends 4U</title>
	<link type="text/css" rel="stylesheet" href="fb/floatbox.css" />
<script type="text/javascript" src="fb/floatbox.js"></script>
<script type="text/javascript" src="fb/options.js"></script>


	<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>
	body{ font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#FFFFFF; background-color:#FFFFFF; margin:0; padding:0; }
	* html, * html body{ overflow: hidden; }
	a{ color:#AAAAAA; text-decoration:underline; }
	a:hover{ color:#FFFFFF; text-decoration:underline; }
	</style>
</head>
<body>
	<script type="text/javascript" src="pano1.js"></script>
	<script type="text/javascript" src="javascript/swfobject.js"></script>
	<script type="text/javascript" src="javascript/swfkrpanomousewheel.js"></script>


<div id="krpanoDIV" style="width:100%; height:100%;">
<script type="text/javascript">
// <![CDATA[
	if (typeof(deconcept) !== 'undefined')
	{
		if (deconcept.SWFObjectUtil.getPlayerVersion().major >= 6)
		{
			var viewer = createPanoViewer({swf:"krpano.swf", id:"krpanoSWFObject", width:"900", height:"550", target:"krpanoDIV"});


	//viewer.useHTML5("whenpossible");		// incomment to use the HTML5 krpanoJS viewer always when possible (Safari5)


	if( viewer.isDevice("iPhone|iPad|Android") )
		viewer.addVariable("xml", "startup_mobile.xml");
	else
		viewer.addVariable("xml", "startup.xml");
		viewer.addParam("allowFullScreen","true");
		viewer.addParam("wmode","opaque");
		
	viewer.embed();
			
			if ( viewer.embed("krpanoDIV") ) { var mousewheelfixes = new SWFkrpanoMouseWheel(viewer); }
		}
		else
		{
			document.getElementById("krpanoDIV").innerHTML = '<table width="100%" height="100%"><tr valign="middle"><td><center>ERROR:<br><br>Adobe Flash Player 9 needed<br><br><br><a href="http://www.adobe.com/go/getflashplayer/"  target="_blank"><IMG SRC="http://www.macromedia.com/images/shared/download_buttons/get_flash_player.gif" BORDER="1"></a><br>...click here to download...<br><br><br><br></center></td></tr></table>';
		}
	}
	else
	{
		document.getElementById("krpanoDIV").innerHTML = '<table width="100%" height="100%"><tr valign="middle"><td><center>ERROR:<br><br><b>./javascript/swfobject.js</b> not found<br><br><br><br><br></center></td></tr></table>';
	}
// ]]>
</script>


</body>
</html>

Display More

My Flash xml looks like this:

Code

<hotspot name="hs10"
	     	url="../plugins/hotspot_ani_white.swf"
	     	keep="false"
	     	ath="167" atv="17"
	     	blendmode="difference"
	     	onhover="showtext(Click to Learn More, csmall);"
	     	onclick="set(fullscreen,false); action(open_cogan,())"
	     	/>
	     	
	<action name="open_cogan">
		js(fb.start(client_xml/object_vr/Image74.swf));
	</action>

Display More

My iPad xml looks like this and won't work with an action:

Code

<hotspot name="spot1" style="hotspot_ani_white" 
		     	ath="167"
		     	atv="17"
		     	zoom="false"
		     	onclick="js(fb.start(client_xml/object_vr/image74.html));"
		     	/>

It doesn't matter if it is html or an image I get the errors.

Hope someone can help. you can see it at http://www.eyecandyvi.com/tb/fb_mobile.html. Pan to the left and follow the feet to the next pano. Pan again to the left and you'll see the pulsing icon.

Robert

klaus.krpano · December 1, 2010 at 11:17 AM

Hi,

at the moment only normal globally defined javascript functions can be called,
but for the next release I have added an 'eval' fallback code when direct calling
is not possible, then your code will work, but it will be slower then a direct function call,

best regards,
Klaus

rbudnikas · December 1, 2010 at 4:01 PM

ok Great Klaus,

Now I can move on to something else and will look forward to the new release.

Robert

Phlex · December 9, 2010 at 2:19 PM

So...i don'tt really understand what rbudnikas is trying to achieve, but i think this post gets near the problem i'm facing right now.
And since i didn't want to start a new tread for something probably pretty easy to solve, i'm posting it here.

I have to find a way, to call a link from the onclick-function a hotspot gives me. The 'loadPano' seems to not really load a new Website (hence i can't get back within the browser history...). So i tried to just load http://www.google.de when clicking some hotspot...to no success as one might imagine when reading this.
To me this comes not unexpected, because JS and me are very similar to oil and water .

So here is what i already tried:

Code

<hotspot url="Hotspot.png" devices="all" ath="0.0" atv="0.0" onclick="js(loadGoogle());" />

with the following in my main.html (the one wich is loading krPano)

Code

<script type="text/javascript">
	function loadGoogle() {
		window.location.href="http://www.google.de";
	}
</script>

I've tried all i could think of...first calling an action that is then calling the above script...
No script at all, just calling js direct after the onclick-funktion:

Code

<hotspot url="Hotspot.png" devices="all" ath="290.0" atv="0.0" onclick="javascript:window.location.href='http://www.google.de';" />

(Even screaming and kicking at this son-of-a-... MAC i'm working on, didn't do the trick!!! Normally it does...really )

Within a normal browser this does what it is supposed to do...showing google.

But since Klaus wrote: "at the moment only normal globally defined javascript functions can be called" there should be a way to do this...???

Phlex · December 9, 2010 at 2:47 PM

Ha!!! Got it!

Not with using JS but with the openurl-funktion.
Here we go:

Code

<hotspot url="Hotspot.png" devices="all" ath="0.0" atv="0.0" onclick="openurl(http://www.google.de);" />

The odd part is, that the documentation says:
"Note - this action requires the External Interface of the Flashplayer!" - So...iPad...FlashPlayer...??? Hell, whatever! It seems to work.

klaus.krpano · December 9, 2010 at 5:58 PM

Hi,

Quote from Phlex

onclick="javascript:window.location.href='http://www.google.de';"

this doesn't work because you are using javascript syntax here
in krpano there is only the js() action which can call javascript functions,
e.g. it should look so:

Code

onclick="js( loadGoogle() );"

Quote from klaus.krpano

but for the next release I have added an 'eval' fallback code when direct calling
is not possible, then your code will work, but it will be slower then a direct function call,

just as note - here with the release of the soundinterface plugin for the krpanoJS viewer,
an updated krpanoJS viewer with that fix is included,

best regards,
Klaus

rbudnikas · December 11, 2010 at 6:06 AM

Hi Klaus,

If I understand you correctly my code should now work. How do you implement the 'eval' fallback code. I don't understand. Sorry.

Thanks,

Robert

klaus.krpano · December 13, 2010 at 12:18 PM

Hi,

Quote from rbudnikas

If I understand you correctly my code should now work.

yes, it should work now,

Quote from rbudnikas

How do you implement the 'eval' fallback code.

first I'm trying to call a given function directly, this is only possible when the javascript function is defined at global (=window object) scope, this is the 'fast' mode, but when that doesn't work I'm paring a function call string and execute that with the eval() function, this is slower but should work in any case,
but finally you shouldn't care about that internal implementation until you have performance problems with it, maybe at 500-1000 js() calls per second or so...

best regards,
Klaus

rbudnikas · February 23, 2011 at 3:03 AM

I'm still having problems implementing eval to work with floatbox. Would I write it like this

What would the onclick look like?

Thanks in advance for the help.

Robert

klaus.krpano · February 23, 2011 at 5:31 PM

Hi,

Quote from rbudnikas

<script type="text/JavaScript">
eval(js(fb.start(http://www.domain.com))
</script>
What would the onclick look like?

sorry, but your code doesn't make much sense,

either do in the xml just:

Code

onclick="js(fb.start(http://www.domain.com));"

or do - in the xml:

Code

onclick="js( fbcall() );"

and in the html:

Code

<script>
  function fbcall()
  {
	fb.start(http://www.domain.com);
  }
</script>

best regards,
Klaus

rbudnikas · February 23, 2011 at 5:34 PM

Hi Klaus, this goes back to the time that I was trying to implement a floatbox and was getting an error on the ipad, fb.start could not be found.

Using this onclick="js(fb.start(http://www.domain.com));" produces this error.

You said the workaround was to use eval. I'll try this and let you know if what you wrote works.

Thanks,

Robert

Update: Works! thanks again

js(fb.start) support for ipad

Participate now!

Users Viewing This Thread