[OpenLayers-Commits] r11316 - sandbox/sbrunner/openlayers/examples

Wed Feb 23 08:41:58 EST 2011

Author: fredj
Date: 2011-02-23 05:41:58 -0800 (Wed, 23 Feb 2011)
New Revision: 11316

Modified:
   sandbox/sbrunner/openlayers/examples/orientation.html
Log:
fix register, add tags to example

Modified: sandbox/sbrunner/openlayers/examples/orientation.html
===================================================================

--- sandbox/sbrunner/openlayers/examples/orientation.html	2011-02-23 13:33:14 UTC (rev 11315)
+++ sandbox/sbrunner/openlayers/examples/orientation.html	2011-02-23 13:41:58 UTC (rev 11316)
@@ -3,7 +3,7 @@
 <head>
     <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
     <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <title>OpenLayers Accelerometer Usage</title>
+    <title>OpenLayers Device Orientation</title>
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css"/>
     <link rel="stylesheet" href="style.css" type="text/css"/>
     <script type="text/javascript" src="../lib/OpenLayers.js"></script>
@@ -16,21 +16,30 @@
     <script type="text/javascript">
     var orientation;
     function init() {
+        var logs = document.getElementById("logs");
         orientation = new OpenLayers.Control.DeviceOrientation();
         if (orientation.supported) {
-            orientation.events.register("orientationchange", function(event) {
+            orientation.events.register("orientationchange", this, function(event) {
                 var img = document.getElementById("orientation");
                 var value = "rotate(" + event.orientation + "deg)";
                 img.style.transform = value;
                 img.style.webkitTransform = value;
+                
+                logs.innerHTML = "rotation: " + event.orientation;
             });
             orientation.activate();
+        } else {
+            logs.innerHTML = "This device don't supports device orientation";
         }
     }
     </script>
 </head>
 <body onload="init()">
-    <h1>Orientation</h1>
+    <h1>Device Orientation</h1>
+    <div id="tags">
+            orientation
+    </div>
     <img id="orientation" src="img/mobile-arrow.png"/>
+    <p id="logs"></p>
 </body>
 </html>

