Skip to content

Commit

Permalink
Added orientation plugin
Browse files Browse the repository at this point in the history
  • Loading branch information
fieldOfView committed Apr 7, 2011
1 parent a34aadb commit b5325c6
Show file tree
Hide file tree
Showing 6 changed files with 272 additions and 0 deletions.
2 changes: 2 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,8 @@ <h2><a name="plugins" href="#plugins" class="selflink">Plugins</a></h2>
<dd>A plugin that adds a doubleclick event to krpano.</dd>
<dt><a name="gyro" href="gyro/plugin.html">gyro</a><span class="flashhtml5">for HTML5</span></dt>
<dd>A plugin that uses the gyroscope in devices such as the iPhone 4 and iPad2 to control the view.</dd>
<dt><a name="orientation" href="orientation/plugin.html">orientation</a><span class="flashhtml5">for HTML5</span></dt>
<dd>A plugin that detects changes in the device orientation so the tour can, for example, adjust its interface to either landscape or portrait displays.</dd>
<dt><a name="string" href="string/plugin.html">string</a><span class="flashhtml5">for Flash & HTML5</span></dt>
<dd>A plugin that adds vector-math calculations to krpano.</dd>
<dt><a name="vectormath" href="vectormath/plugin.html">vectormath</a><span class="flashhtml5">for Flash</span></dt>
Expand Down
11 changes: 11 additions & 0 deletions orientation/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
krpano orientation plugin for krpanoJS
======================================
by [Aldo Hoeben / fieldOfView](http://fieldofview.com/)

This plugin detects changes in the device orientation so the tour can, for example, adjust its interface to either landscape or portrait displays.


License
-------

This software can be used free of charge and the source code is available under a [Creative Commons Attribution](http://creativecommons.org/licenses/by/3.0/) license.
30 changes: 30 additions & 0 deletions orientation/examples/orientation.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<html>
<head>
<title>fieldofview krpano plugins - orientation plugin example</title>
<style>
body{ font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#FFFFFF; background-color:#000000; 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>

<div id="krpanoDIV">
<noscript><table width="100%" height="100%"><tr valign="middle"><td><center>ERROR:<br><br>Javascript not activated<br><br></center></td></tr></table></noscript>
</div>

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

<script type="text/javascript">
// <![CDATA[

var swf = createswf("../../../krpano.swf", "krpanoSWFObject", "100%", "100%");
swf.addVariable("xml", "orientation.xml");
swf.embed("krpanoDIV");

// ]]>
</script>

</body>
</html>
30 changes: 30 additions & 0 deletions orientation/examples/orientation.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<krpano version="1.0.8" onstart="updateorientation();" >
<preview type="grid(cube,16,16,512,0xCCCCCC,0xFFFFFF,0x999999);" details="16" />

<plugin name="orientation" devices="html5" url="../../orientation.js" onorientationchange="updateorientation" preload="true" />

<plugin name="unknown-ui" url="%SWFPATH%/plugins/textfield.swf" visible="true"
autosize="left" html="[p]The device is in unknown orientation[/p]" css="data:cssdata" />

<plugin name="landscape-ui" url="%SWFPATH%/plugins/textfield.swf" visible="false"
autosize="left" html="[p]The device is in landscape orientation[/p]" css="data:cssdata" />
<plugin name="portrait-ui" url="%SWFPATH%/plugins/textfield.swf" visible="false"
autosize="left" html="[p]The device is in portrait orientation[/p]" css="data:cssdata" />

<data name="cssdata">
p{color:#FF0000; font-family:Arial; font-size:24;}
</data>

<action name="updateorientation">
if(isHTML5,
set(plugin[unknown-ui].visible, false);
copy(plugin[landscape-ui].visible, plugin[orientation].landscape);
copy(plugin[portrait-ui].visible, plugin[orientation].portrait);
trace(get(plugin[orientation].orientation));
,
set(plugin[unknown-ui].visible, true);
copy(plugin[landscape-ui].visible, false);
copy(plugin[portrait-ui].visible, false);
);
</action>
</krpano>
132 changes: 132 additions & 0 deletions orientation/plugin.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
<!-- krpano plugin page template -->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="format-detection" content="telephone=no" />
<title>krpano.com - Plugins - fieldOfView Plugins - orientation</title>
<link rel="stylesheet" type="text/css" media="screen" href="http://krpano.com/design/design.css"/>
<link rel="stylesheet" type="text/css" media="print" href="http://krpano.com/design/print.css"/>
<link rel="SHORTCUT ICON" href="http://krpano.com/design/shortcut.ico"/>
</head>
<body>
<div id="krpano_root">
<div id="krpano_headerwrapper">
<div id="krpano_header">
<div id="krpano_langsel">&nbsp;</div>
<div id="krpano_mainmenu">&nbsp;</div>
</div>
</div>
<div>
<div id="krpano_imagebar"></div>
<div id="krpano_logo"></div>
</div>
<div id="krpano_imagebar_space"></div>
<div id="krpano_contentwrapper">
<div id="krpano_content">
<div id="krpano_contentnav">
<h2><a href="#top" class="selflink">Plugins</a></h2>
</div>
<a name="top"></a>
<div id="krpano_contenttext">
<!-- USER CONTENT STARTS HERE -->

<h1>Orientationscope Plugin <span class="pluginfilename">orientation.js</span>
<span class="flashhtml5">for HTML5</span>
<div class="pluginautor">by Aldo Hoeben - <a href="http://fieldofview.com">fieldofview.com</a></div>
</h1>
<div class="paragraph">
<h2><a name="description" href="#description" class="selflink">Description</a></h2>
<p>This plugin detects changes in the device orientation so the tour can, for example, adjust its interface to either landscape or portrait displays.</p>
</div>
<div class="paragraph">
<h2><a name="download" href="#download" class="selflink">Download</a></h2>
<div class="dlitem"> <a href="http://fieldofview.github.com/krpano_fovplugins/orientation.js">orientation.js</a>&nbsp; <small>(plugin only)</small></div>
<p>The orientation <a href="https://github.com/fieldOfView/krpano_fovplugins/tree/master/orientation">sources and examples</a> are available as part of the fovplugins package</p>
<div class="dlitem"> <a href="https://github.com/fieldOfView/krpano_fovplugins/zipball/master">fovplugins.zip</a>&nbsp; <small>(plugin, source code &amp; examples)</small><br/>
</div>
</div>
<div class="paragraph">
<h2><a name="forum" href="#forum" class="selflink">krpano Forum Discussion Thread</a></h2>
<a href="http://krpano.com/forum/wbb/index.php?page=Thread&postID=23264">orientationscope Plugin Thread</a> </div>
<div class="paragraph">
<h2><a name="syntax" href="#syntax" class="selflink">Syntax / XML Usage Example</a></h2>
<pre class="xmlpre">&lt;<a href="http://krpano.com/docu/xml/#plugin">plugin</a> <a href="http://krpano.com/docu/xml/#plugin.name">name</a>="orientation"
<a href="http://krpano.com/docu/xml/#plugin.url">url</a>="orientation.js"
<a href="http://krpano.com/docu/xml/#plugin.keep">keep</a>="true"
<a href="http://krpano.com/docu/xml/#plugin.devices">devices</a>="HTML5"
<a href="#onorientationchange" class="pluginattrib">onorientationchange</a>="updateorientation();"
/&gt;</pre>
</div>
<div class="paragraph">
<h2><a name="attributes" href="#attributes" class="selflink">Plugin Attributes</a></h2>
<dl>
<dt><a name="onorientationchange" href="#onorientationchange" class="selflink">onorientationchange</a></dt>
<dd>Actions / functions that will be called when there is an orientationchange event occurs.<br>
values: function or action-name</dd>
<dt><a name="portrait" href="#portrait" class="selflink">portrait</a></dt>
<dd>If true, the device is in portrait mode.<br>
values: true/false, read-only</dd>
<dt><a name="landscape" href="#landscape" class="selflink">landscape</a></dt>
<dd> If false, the device is in landscape mode.<br>
values: true/false, read-only</dd>
<dt><a name="orientation" href="#orientation" class="selflink">orientation</a></dt>
<dd> The raw orientation value reported by the browser.<br>
values: 0,90,180,-90, read-only</dd>
</dl>
</div>
<div class="paragraph">
<h2><a name="example" href="#example" class="selflink">Example</a></h2>
<script>
function showexample()
{
var iframe = '<iframe id="ccexample" name="ccframe" src="examples/orientation.html" width="100%" height="300" scrolling="no" marginheight="0" marginwidth="0" frameborder="0"></iframe>';
document.getElementById("example").innerHTML = iframe;
}
</script>
<div id="example" onclick="showexample();" style="width:100%;height:300px;color:white;background-color:black;border:1px solid gray;cursor:pointer;">
<table width="100%" height="100%" style="color:white;">
<tr valign="middle">
<td><center>
<b>CLICK TO VIEW EXAMPLE</b>
</center></td>
</tr>
</table>
</div>
</div>
<div class="paragraph">
<h2><a name="license" href="#license" class="selflink">License</a></h2>
<p><a href="http://creativecommons.org/licenses/by/3.0/"><img src="http://i.creativecommons.org/l/by/3.0/88x31.png" alt="CC-BY-3.0" width="88px" height="31px" hspace="8" border="0" align="right"></a> The plugin can be used free of charge, in commercial or non-commercial applications. The source code is available under a <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution</a> license.</p>
<p>In a nutshell, this means you are free to use the software and its source code in your projects. If you use the source code in a another software project, you are required to add attribution to the author(s). You are encouraged to share the your source code under a similar fashion, but it is not a requirement.</p>
</div>
<!-- USER CONTENT ENDS HERE -->
</div>
</div>
</div>
<div id="krpano_footerwrapper">
<div id="krpano_footer">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="right">Copyright &copy; 2011 krpano.com</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Piwik -->
<script type="text/javascript">
var pkBaseURL = (("https:" == document.location.protocol) ? "https://logs.fieldofview.com/" : "http://logs.fieldofview.com/");
document.write(unescape("%3Cscript src='" + pkBaseURL + "piwik.js' type='text/javascript'%3E%3C/script%3E"));
</script><script type="text/javascript">
try {
var piwikTracker = Piwik.getTracker(pkBaseURL + "piwik.php", 4);
piwikTracker.trackPageView();
piwikTracker.enableLinkTracking();
} catch( err ) {}
</script><noscript><p><img src="http://logs.fieldofview.com/piwik.php?idsite=4" style="border:0" alt="" /></p></noscript>
<!-- End Piwik Tracking Code -->
</body>
</html>
67 changes: 67 additions & 0 deletions orientation/source/orientation.source.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
/*
orientation plugin for KRPanoJS and iOS4.2+
by Aldo Hoeben / fieldOfView.com
http://fieldofview.github.com/krpano_fovplugins/orientation/plugin.html
This software can be used free of charge and the source code is available under a Creative Commons Attribution license:
http://creativecommons.org/licenses/by/3.0/
*/

var krpanoplugin = function()
{
var local = this,
krpano = null, plugin = null,

onOrientationChange = "",
orientation = (window.orientation === undefined)?0:window.orientation,
landscape = (Math.abs(orientation) == 90),
portrait = !landscape;

////////////////////////////////////////////////////////////
// plugin management

local.registerplugin = function(krpanointerface, pluginpath, pluginobject)
{
krpano = krpanointerface;
plugin = pluginobject;

if (krpano.version < "1.0.8.14" || krpano.build < "2011-03-30")
{
krpano.trace(3,"orientation plugin - too old krpano version (min. 1.0.8.14)");
return;
}

window.addEventListener("orientationchange", handleOrientationChange, true);

// register attributes
plugin.registerattribute("orientation", orientation, function(arg){}, function(){ return orientation; });
plugin.registerattribute("landscape", landscape, function(arg){}, function(){ return landscape; });
plugin.registerattribute("portrait", portrait, function(arg){}, function(){ return portrait; });
plugin.registerattribute("onorientationchange",onOrientationChange, function(arg){ onOrientationChange = arg }, function(){ return onOrientationChange; });
}


local.unloadplugin = function()
{
window.removeEventListener("orientationchange", handleOrientationChange);

plugin = null;
krpano = null;
}


////////////////////////////////////////////////////////////
// public methods

////////////////////////////////////////////////////////////
// private methods

function handleOrientationChange(event)
{
orientation = window.orientation;
landscape = (Math.abs(orientation) == 90),
portrait = !landscape;

krpano.call( onOrientationChange );
}
}

0 comments on commit b5325c6

Please sign in to comment.