[OpenLayers-Commits] r11302 - sandbox/sbrunner/test

Wed Feb 23 06:24:59 EST 2011

Author: sbrunner
Date: 2011-02-23 03:24:59 -0800 (Wed, 23 Feb 2011)
New Revision: 11302

Added:
   sandbox/sbrunner/test/arraw.png
Modified:
   sandbox/sbrunner/test/orientation.html
Log:
test rotate arraw

Added: sandbox/sbrunner/test/arraw.png
===================================================================
(Binary files differ)


Property changes on: sandbox/sbrunner/test/arraw.png
___________________________________________________________________
Added: svn:mime-type
   + application/octet-stream

Modified: sandbox/sbrunner/test/orientation.html
===================================================================

--- sandbox/sbrunner/test/orientation.html	2011-02-23 11:24:09 UTC (rev 11301)
+++ sandbox/sbrunner/test/orientation.html	2011-02-23 11:24:59 UTC (rev 11302)
@@ -1,17 +1,39 @@
+<!DOCTYPE html>
 <html>
 <head>
-<title>Test orientation</title></head>
-<body>
-<script>
-window.addEventListener("deviceorientation", function(event) {
-  // process event.alpha, event.beta and event.gamma
-  document.write("alpha: " + event.alpha + "<br/>");
-  document.write("beta: " + event.beta + "<br/>");
-  document.write("gamma: " + event.gamma + "<br/>");
-}, true);
+    <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>
+    <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="browser.js"></script>
 
-document.write("111");
-</script>
-555
+    <style type="text/css">
+        .olControlAttribution {
+            bottom: 5px;
+        }
+    </style>
+    <script type="text/javascript">
+        function init() {
+                if (window.DeviceOrientationEvent) {
+                    window.addEventListener("deviceorientation", function (event) {
+                        if (typeof(event.alpha) != 'undefined') {
+                            var img = document.getElementById("orientation");
+                            var value = "rotate(" + event.alpha + "deg)";
+                            img.style.transform = value;
+                            img.style.webkitTransform = value;
+                        }
+                    }, true);
+                }
+
+        }
+    </script>
+</head>
+<body onload="init()">
+<h1>Orientation</h1>
+
+<img id="orientation" src="arraw.png"/>
+
+</div>
 </body>
 </html>

