You are not logged in.

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

atomicmak

Trainee

  • "atomicmak" started this thread

Posts: 53

Location: INDIA

Occupation: E-Media Creative Work

  • Send private message

1

Tuesday, March 29th 2011, 8:45am

need help creating action/plugin - ipad orientation

i have made app which runs as both portrait as well as landscape.

i made an xml and some images to load and play.

now the problem is that on landscape it shows on correct position as well as layout.

whereas in portrait mode as it is wide image it goes out of viewing area.

i would like to do something that an action can check if its orientation is landscape it shows plugin1 else plugin1 along with action1/action2

is that possible ?
Regards
Mak

Posts: 23

Occupation: 360° Photography

  • Send private message

2

Wednesday, March 30th 2011, 8:27pm

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:

Source code

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


HTH,

Patrick

atomicmak

Trainee

  • "atomicmak" started this thread

Posts: 53

Location: INDIA

Occupation: E-Media Creative Work

  • Send private message

3

Wednesday, March 30th 2011, 8:29pm

thanks patric but the image i show is through krpano xml Plugin and thats where i have to do check as its not in html else i could easily solve :)

thanks for your time but please if you know on xml plugin showing image and if we can define orientation plz help
Regards
Mak

Posts: 23

Occupation: 360° Photography

  • Send private message

4

Wednesday, March 30th 2011, 8:44pm

Hi there:

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

Source code

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

atomicmak

Trainee

  • "atomicmak" started this thread

Posts: 53

Location: INDIA

Occupation: E-Media Creative Work

  • Send private message

5

Wednesday, March 30th 2011, 8:47pm

thanks a lot patrick..

to b more specific

Quoted



<events onloadcomplete="delayedcall(4, hideloader() ); set(events.onloadcomplete,null); set(autorotate.enabled,true);" />

<plugin name="description"
url="description/courtyard_day.png"
visible="false"
enabled="false"
align="bottom"
y="50"
zorder="999"
/>


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
Regards
Mak

Posts: 23

Occupation: 360° Photography

  • Send private message

6

Wednesday, March 30th 2011, 10:16pm

Working orientation sniffer for iPhone/iPad

thanks a lot patrick..

to b more specific

Quoted



<events onloadcomplete="delayedcall(4, hideloader() ); set(events.onloadcomplete,null); set(autorotate.enabled,true);" />

<plugin name="description"
url="description/courtyard_day.png"
visible="false"
enabled="false"
align="bottom"
y="50"
zorder="999"
/>


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


:)

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:

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!-- 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:

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
        <!-- 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: http://krpano.com/docu/actions/#js and A Tutorial on Krpano Action Arguments (pt 1) )

Tuur

Master

Posts: 2,251

Location: Netherlands

Occupation: Virtual Tours / Photography / Musician / Recording engineer

  • Send private message

7

Wednesday, March 30th 2011, 11:16pm

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 *thumbsup*

Posts: 23

Occupation: 360° Photography

  • Send private message

8

Wednesday, March 30th 2011, 11:44pm

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! *g*

--
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:


Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<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

Posts: 23

Occupation: 360° Photography

  • Send private message

9

Wednesday, March 30th 2011, 11:53pm

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:

Source code

1
2
3
4
5
//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

Tuur

Master

Posts: 2,251

Location: Netherlands

Occupation: Virtual Tours / Photography / Musician / Recording engineer

  • Send private message

10

Wednesday, March 30th 2011, 11:58pm

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 *thumbsup*

Posts: 23

Occupation: 360° Photography

  • Send private message

11

Thursday, March 31st 2011, 12:00am

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 *thumbsup*


?

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

It works... *smile*

Patrick

Tuur

Master

Posts: 2,251

Location: Netherlands

Occupation: Virtual Tours / Photography / Musician / Recording engineer

  • Send private message

12

Thursday, March 31st 2011, 12:06am

ah yes

sorry

will try soon

Tuur *thumbsup*

Posts: 23

Occupation: 360° Photography

  • Send private message

13

Thursday, March 31st 2011, 2:46am

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

atomicmak

Trainee

  • "atomicmak" started this thread

Posts: 53

Location: INDIA

Occupation: E-Media Creative Work

  • Send private message

14

Thursday, March 31st 2011, 4:15am

patrick you opened up many door through this. i had no idea before that one can do this much. will give a try and see if javascript can do something.


btw few days ago i posted something if you can put some light.
xml data information passing.
Regards
Mak

15

Tuesday, April 5th 2011, 4:29pm

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

16

Thursday, April 7th 2011, 1:10pm

Orientation plugin

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

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

Tuur

Master

Posts: 2,251

Location: Netherlands

Occupation: Virtual Tours / Photography / Musician / Recording engineer

  • Send private message

17

Thursday, April 7th 2011, 4:18pm

Great Aldo!!! Master!

Thanx

Tuur *thumbsup*

Tuur

Master

Posts: 2,251

Location: Netherlands

Occupation: Virtual Tours / Photography / Musician / Recording engineer

  • Send private message

18

Monday, May 16th 2011, 2:39am

Hi,

i was wondering..

Is there a solution for this problem on iphone 4?

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

landscape bug..(?)
Tuur *thumbsup*

Tuur

Master

Posts: 2,251

Location: Netherlands

Occupation: Virtual Tours / Photography / Musician / Recording engineer

  • Send private message

19

Monday, May 16th 2011, 2:34pm

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

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 *thumbsup*

sachagriffin

Professional

Posts: 1,421

Occupation: Virtual Tours - Photography - Krpano developer

  • Send private message

20

Monday, May 16th 2011, 3:32pm

Turn the iphone accessibilty zoom to off.

Or reset the size of your pano div to 100% width and height.
KRPano Developer: Portfolio :: Facebook :: Twitter