projects / samples / web / DeviceMotionCapture.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 56620c5)
[DeviceMotionCapture] initialize a package
authorJoonghun Park <jh718.park@samsung.com>
Mon, 20 May 2013 12:23:30 +0000 (21:23 +0900)
committerJoonghun Park <jh718.park@samsung.com>
Tue, 21 May 2013 05:56:09 +0000 (14:56 +0900)
Change-Id: Icc2483a5b6fb6a3197dfb22a773b4630e96833bf

audio/gun1.wav [new file with mode: 0755] patch | blob
css/style.css [new file with mode: 0755] patch | blob
index.html [new file with mode: 0755] patch | blob
js/main.js [new file with mode: 0755] patch | blob

diff --git a/audio/gun1.wav b/audio/gun1.wav
new file mode 100755 (executable)
index 0000000..1135152
Binary files /dev/null and b/audio/gun1.wav differ
diff --git a/css/style.css b/css/style.css
new file mode 100755 (executable)
index 0000000..72644b6
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,23 @@
+html, body {
+    overflow: hidden;
+    height: 99%;
+}
+
+h1 {
+    font-size: 1.4em;
+    color: #6587ac;
+    margin: 0 10px 20px;
+}
+
+#circle {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 80px;
+    height: 80px;
+    border-radius: 80px;
+    background: #3366cc;
+    color: #fff;
+    text-align: center;
+    z-index: 99;
+}
diff --git a/index.html b/index.html
new file mode 100755 (executable)
index 0000000..6330a24
--- /dev/null
+++ b/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+    <meta name="description" content="Device Orientation - Devicemotion Event"/>
+
+    <title>Device Orientation - Device Motion Capture</title>
+
+    <link rel="stylesheet" type="text/css" href="css/style.css"/>
+    <script src="js/main.js"></script>
+</head>
+
+<body>
+    <h1>DEVICE MOTION CAPTURE</h1>
+
+    <div id="circle">Circle</div>
+    <div>
+        <p id="firElem"></p>
+        <p id="secElem"></p>
+        <p id="thirElem"></p>
+    </div>
+
+    <audio id="audio_re" controls preload src="audio/gun1.wav"></audio>
+</body>
+</html>
diff --git a/js/main.js b/js/main.js
new file mode 100755 (executable)
index 0000000..efe9d5b
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,78 @@
+function deviceMotionEvents() {
+        var firElem = document.getElementById("firElem");
+        var secElem =document.getElementById("secElem");
+        var thirElem = document.getElementById("thirElem");
+        var circle = document.getElementById('circle');
+        var audioElem = document.getElementById("audio_re");
+        var x = 0, y = 0, vx = 0, vy = 0, ax = 0, ay = 0;
+
+        window.addEventListener("devicemotion", function(e) {
+                deviceMotionHandler(e);
+                playSoundHandler(e);
+                logDeviceMotionHandler(e);
+        }, true);
+
+        function deviceMotionHandler(e) {
+                //Calculate the acceleration due to gravity
+                ax = e.accelerationIncludingGravity.x * 5;
+                ay = e.accelerationIncludingGravity.y * 5;
+
+                vx = vx + ax;
+                vy = vy - ay;
+
+                vx = vx * 0.98;
+                vy = vy * 0.98;
+
+                x = parseInt(x + (vx / 20));
+                y = parseInt(y + (vy / 20));
+
+                // Bound Check
+                if (x < 0) {
+                        x = 0;
+                        vx = -vx;
+                }
+                if (y < 0) {
+                        y = 0;
+                        vy = -vy;
+                }
+                if (x > document.documentElement.clientWidth - 80) {
+                        x = document.documentElement.clientWidth - 80;
+                        vx = -vx;
+                }
+                if (y > document.documentElement.clientHeight - 80) {
+                        y = document.documentElement.clientHeight - 80;
+                        vy = -vy;
+                }
+
+                //Style insert
+                circle.style.bottom = y + "px";
+                circle.style.right = x + "px";
+}
+
+        function playSoundHandler(e) {
+                if(e.acceleration.x > 6){
+                        audioElem.currentTime = 0;
+                        audioElem.volume=1;
+                        audioElem.play();
+                }
+        }
+
+        function logDeviceMotionHandler(e) {
+                firElem.innerHTML = 'acceleration value<br><br> '
+                        + '[ x value : '+ Math.round(e.acceleration.x) + " ]<br>"
+                        + '[ y value : '+ Math.round(e.acceleration.y) + " ]<br>"
+                        + '[ z value : '+ Math.round(e.acceleration.z) + ']';
+
+                secElem.innerHTML = 'accelerationIncludingGravity value<br><br> '
+                        + '[ x value : ' + Math.round(e.accelerationIncludingGravity.x) + " ]<br>"
+                        + '[ y value : ' + Math.round(e.accelerationIncludingGravity.y) + " ]<br>"
+                        + '[ z value : ' + Math.round(e.accelerationIncludingGravity.z) + ']';
+
+                thirElem.innerHTML = 'rotationRate value<br><br> '
+                        + '[ alpha value : ' + Math.round(e.rotationRate.alpha) + " degree ]<br>"
+                        + '[ beta value : ' + Math.round(e.rotationRate.beta) + " degree ]<br>"
+                        + '[ gamma value : ' + Math.round(e.rotationRate.gamma) + ' degree ]';
+        }
+}
+
+window.onload = function() {deviceMotionEvents();};
Domain: Applications / Web Sample;