forked from fieldOfView/krpano_fovplugins
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
a34aadb
commit b5325c6
Showing
6 changed files
with
272 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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"> </div> | ||
<div id="krpano_mainmenu"> </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> <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> <small>(plugin, source code & 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"><<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();" | ||
/></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 © 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 ); | ||
} | ||
} |