You are not logged in.

Autorotate Portrait / Landscape on Mobile and Tablet

kealkeal

Intermediate

  • "kealkeal" started this thread

Posts: 176

  • Send private message

1

Tuesday, July 1st 2014, 5:24pm

Autorotate Portrait / Landscape on Mobile and Tablet

Hi,

Is there a way to auto rotate the panorama from "Portrait" to " Landscape" when the panorama is view on Mobile or Tablet ?

I found this on the web :

Quoted

AppMobi.device.setRotateOrientation("portrait"); // or landscape
This code can be add to the Div, but I don't know how to implement it into the Html file.

My HTML file :

Quoted

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=edge" />

<script src="js/swfkrpano.js"></script>
<script src="js/swfaddress.js?tracker=null"></script>
<script src="tour.js"></script>
<style>
.ombre {
border-width:1px;
border-style:solid;
border-color:#333;
box-shadow: 4px 4px 12px #333;
}
@-ms-viewport { width:device-width; }
@media only screen and (min-device-width:800px) { html { overflow:hidden; } }
html { height:100%; }
body { height:100%; overflow:hidden; margin:0; padding:0; }
</style>
</head>

<body>

<div class="ombre" id="pano" style="width:90%;height:90%;margin:0 auto;" >

<noscript><table align="center" style="width:90%;height:90%;"><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", html5:"auto", passQueryParameters:true});
</script>
</div>
</body>
</html>
Thanks for your help. ;-)

klaus.krpano

Administrator

Posts: 13,499

  • Send private message

2

Thursday, July 3rd 2014, 11:04am

Hi,

no, changing or locking the device orientation isn't possible from HTML5/Javascript.

Best regards,
Klaus

kealkeal

Intermediate

  • "kealkeal" started this thread

Posts: 176

  • Send private message

3

Friday, July 4th 2014, 11:32am

Thanks Klaus for your feedback. *smile*

chopliszt

Beginner

Posts: 1

  • Send private message

4

Thursday, May 21st 2015, 10:44pm

Quoted from "klaus.krpano"

no, changing or locking the device orientation isn't possible from HTML5/Javascript.
Hi Klaus,

Well on the latest KrPano Pre-release I realized you can set the mobile phone to Landscape modus as this is what always happens when you tap the VR Cardboard button. How could we make it for all virtual tours?

Thanks

klaus.krpano

Administrator

Posts: 13,499

  • Send private message

5

Tuesday, May 26th 2015, 9:19pm

Hi,

that's are just a couple of xml lines and not related to any krpano version.

There the change of the screen orientation will be checked and when it's portrait orientation an image will be shown.

When using the 1.19 pre-release 2 and the vtourskin.xml from there, just add these lines to it to do that also for non-VR:

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<events name="mobile_events" keep="true" devices="html5.and.mobile"
        onresize="check_portrait_mode();"
        />

<action name="check_portrait_mode">
    div(aspect, stagewidth, stageheight);
    if(aspect != lastmobileaspect,
        copy(lastmobileaspect, aspect);
        if(stagewidth GT stageheight,
            tween(layer[webvr_rotate_to_landscape_request].alpha, 0.0, 0.0);
          ,
            tween(layer[webvr_rotate_to_landscape_request].alpha, 1.0);
            delayedcall(3.0, tween(layer[webvr_rotate_to_landscape_request].alpha, 0.0, 1.0); );
          );
      );
</action>


Best regards,
Klaus

Similar threads