need help creating action/plugin - ipad orientation

You could include some Javascript on your page & have it communicate with your krpano display. Check out "window.orientation" & the "orientationchange" event (Javascript).

Not sure how much special CSS you can include in krpano's XML, but these are good things to use in a Web page:

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

HTH,

Patrick

Hi there:

I haven't tested, but is something like this not possible?:

onclick="trace(js( window.orientation ));"  
<!-- should return 0, 90, or -90 I think -->

Zitat von atomicmak

thanks a lot patrick..

to b more specific

thats what i load, now what if i want to show courtyard_day-L.png if found landscape or courtyard_day-P.png if found portrait orientation?

Also

could you guide for code ?
am really very new to krpano.

thanks in advance

Alles anzeigen

:)

OK... I have mostly tested this, and it works! I'll leave it up to you to show/hide plugins and so on... This will require modifying your HTML and your XML.

HTML:

<!-- use this in your well-formed HTML document -->
<script type="text/javascript">


function getOrientation()
{
	var orientation = window.orientation;
        //returns either 0, 90, or -90
	
	function krpano() 
	{
		return document.getElementById("krpanoSWFObject");
	}
	
        //annoying browser alert, for testing:
	alert(" orientation=" + orientation);
	
        //trace function inside krpano for testing:
	krpano().call("trace("+ orientation +");");
	
        //the real deal:
	krpano().call("useOrientation("+ orientation +");");
}


</script>


<!-- adjust the below html to suit however you normally embed panos. note you must have the ID attribute in there -->
<div id="pano" style="width:100%; height:100%;">
	<script>
		embedpano({swf:"someswf.swf", id:"krpanoSWFObject", xml:"somexml.xml", target:"pano"});
	</script>
</div>

XML:

<!-- your onloadcomplete handler: -->
        <events onloadcomplete="delayedcall(4, hideloader() ); set(events.onloadcomplete,null); set(autorotate.enabled,true);
           checkOrientation();" />


        <!-- new stuff: -->
        <action name="checkOrientation">
                 <!-- call javascript function in html -->		
		js(getOrientation);	
	</action>
	
	<action name="useOrientation">
		trace("my orientation is: ", %1);
		<!-- do something here based on the value of 0, 90, or -90 -->
	</action>


<!-- end -->

Test this on an iDevice, of course.

HTH,

Patrick

(there are probably other, smarter ways to do this -- but I can't seem to get the javascript to set a variable in the krpano xml to save my life ...good reference: https://krpano.com/docu/actions/#js and A Tutorial on Krpano Action Arguments (pt 1) )

So when i understand right (for dummy's):

you can make a different skin for when the device is in landscape situation..
that flips to the portrait skin when device goes to portrait situation?

Tuur

Zitat von Tuur

So when i understand right (for dummy's):

you can make a different skin for when the device is in landscape situation..
that flips to the portrait skin when device goes to portrait situation?

Yup!

--
Thinking about it again, it might be more interesting to do more things in the Javascript rather than in the XML; Though, this could make your code less portable, it depends. Something like:

<script type="text/javascript">


function getOrientation()
{
	var orientation = window.orientation;
        //returns either 0, 90, or -90
	
	function krpano() 
	{
	    return document.getElementById("krpanoSWFObject");
	}
	


       try  {
             var myDivClass = "rotated";


             switch(orientation){
                    case 0:
                    //call function in krpano xml, w/orientation passed as variable
                    krpano().call("useOrientation("+ orientation +");");
                    break;


                    case -90:
                    krpano().call("useOrientation("+ orientation +");");
                    break;


                    case 90:
                    krpano().call("useOrientation("+ orientation +");");
                    break;
             }


            //or do something to the Web page itself:
            document.getElementById("pano").setAttribute("class", myDivClass+orientation);


       }
            catch(e) {
            krpano().call("trace(ERROR:"+ e.message +");");
            alert('ERROR:' + e.message);
      }


}


</script>


<!-- end -->

HTH

Patrick

One thing I forgot to mention: This will also probably be best used in concert with "window.onorientationchange". That is, have the Javascript monitor the orientation, rather than checking for it from your XML... Correct me where I'm wrong:

//Javascript:
window.onorientationchange = function() {
    //do interesting things here, to the Web page or krpano pano
    alert(window.orientation);
}

Things I'm not sure of:

* I think the notification for the orientation change only comes -after- it happens.

* 0, 90, -90: Is there a 180? Is this only iPad?

* window.onorientationchange: I have seen reports that it might not always get called. True?

HTH,

Patrick

i would like to see a nice simple example and code with some different things..that makes the js and xml work together with this..

Tuur

Zitat von Tuur

i would like to see a nice simple example and code with some different things..that makes the js and xml work together with this..

Tuur

?

Isn't this one? need help creating action/plugin - ipad orientation

It works...

Patrick

ah yes

sorry

will try soon

Tuur

Looking forward to it Tuur! I have faith! :)

I'd do one today, but there's too many possibilities (and then there's work, too) :)

Cheers,

Patrick

Hi,

in krpano itself you can use the onresize event (when krpano is fullscreen, 100%x100%) to get notified about orientation changes,

best regards,
Klaus

I've created an orientation plugin for krpanoJS, and have added it to the fovplugins package:
http://fieldofview.github.com/krpano_fovplug…ion/plugin.html

The plugin provides an onorientationchange event, and has landscape (true/false), portrait (true/false) and orientation (0,90,180,-90) properties.

Great Aldo!!! Master!

Thanx

Tuur

Hi,

i was wondering..

Is there a solution for this problem on iphone 4?

http://www.krpano.com/forum/wbb/inde…25596#post25596

landscape bug..(?)
Tuur

anybody aware of solution for the landscape (bug)?
when iphone 4 is in landscape it scales everything up to scale 2..

i used the orientation plugin from ahoeben with succes but it makes no sence when the iphone doesn't do a proper job..

Anybody knows a work around? or sollution?

Tuur

Turn the iphone accessibilty zoom to off.

Or reset the size of your pano div to 100% width and height.