[SampleApp] - Sample application for cordova-device-motion
authorAndrzej Popowski <a.popowski@samsung.com>
Thu, 3 Dec 2015 14:26:57 +0000 (15:26 +0100)
committerAndrzej Popowski <a.popowski@samsung.com>
Tue, 8 Dec 2015 08:27:13 +0000 (09:27 +0100)
Change-Id: I466725205d984810ac6d900a844f91a9a0bc33f7
Signed-off-by: Andrzej Popowski <a.popowski@samsung.com>
sample/index.html
sample/plugins/devicemotion/devicemotion.html [new file with mode: 0644]
sample/plugins/devicemotion/js/index.js [new file with mode: 0644]
sample/plugins/devicemotion/styles/main.css [new file with mode: 0644]

index ca4e730c4421eea146c50073e1b402e486ca9665..31c44358837d1af2e7db39566fc2b52374cddc6d 100644 (file)
@@ -38,7 +38,7 @@
             <div class="action-area ch50">
                 <a href="#" class="button dh"><p>Console</p></a>
                 <a href="plugins/device/index.html" class="button dh"><p>Device</p></a>
-                <a href="#" class="button dh"><p>Device Motion</p></a>
+                <a href="plugins/devicemotion/devicemotion.html" class="button dh"><p>Device Motion</p></a>
                 <a href="plugins/dialogs/index.html" class="button dh"><p>Dialogs</p></a>
                 <a href="plugins/events/index.html" class="button dh"><p>Events</p></a>
                 <a href="#" class="button dh"><p>File</p></a>
diff --git a/sample/plugins/devicemotion/devicemotion.html b/sample/plugins/devicemotion/devicemotion.html
new file mode 100644 (file)
index 0000000..89d1bcc
--- /dev/null
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<!--
+/*
+ * Copyright (c) 2014-2015 Telerik AD
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd All Rights Reserved
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+-->
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <meta name="format-detection" content="telephone=no" />
+    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
+    <link href="styles/main.css" rel="stylesheet" type="text/css" />
+    <script type="text/javascript" src="../../lib/cordova.js"></script>
+    <script type="text/javascript" src="js/index.js"></script>
+    <title>Device Motion</title>
+  </head>
+
+  <body>
+    <header class="header">
+      <h1>Device Motion</h1>
+    </header>
+    <div class="content">
+      <div class="action-area ch20">
+        <button class="button dh" id="getAccel">Get Acceleration</button>
+        <button class="button dh" id="watchOper">Watch Acceleration</button>
+      </div>
+      <div class="result-area ch80">
+        <div class="results">
+          <div id="result" class="desc">
+            <ul class="left">
+              <li>Get Acceleration button shows current values of x, y, z axes.</li>
+              <li>Watch Acceleration button turns on continuous showing values of x, y, z axes.</li>
+              <li>Stop Watching button ends watching</li>
+            </ul>
+          </div>
+        </div>
+        <div class="separator"></div>
+        <div class="axes_values">
+          <div>x: <span id="x_value">-</span></div>
+          <div>y: <span id="y_value">-</span></div>
+          <div>z: <span id="z_value">-</span></div>
+        </div>
+      </div>
+    </div>
+    <footer class="footer">
+      <div>Cordova API Samples</div>
+    </footer>
+  </body>
+</html>
diff --git a/sample/plugins/devicemotion/js/index.js b/sample/plugins/devicemotion/js/index.js
new file mode 100644 (file)
index 0000000..cf51535
--- /dev/null
@@ -0,0 +1,92 @@
+/*
+ * Copyright (c) 2014-2015 Telerik AD
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd All Rights Reserved
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+var watchId = null;
+
+
+function onErrorCb() {
+  alert('Error!');
+}
+
+
+var App = function() {
+}
+
+
+App.prototype = {
+  run: function() {
+    var that = this;
+    document.getElementById('getAccel').addEventListener('click', function() {
+      that.getCurrentAccel();
+    });
+    document.getElementById('watchOper').addEventListener('click', function() {
+      document.getElementById('watchOper').disabled = true;
+      if (watchId) {  // Stop watching
+        that.stopWatch();
+      } else {  // Start watching
+        that.startWatch();
+      }
+    });
+  },
+  getCurrentAccel: function() {
+    console.log('getAccel');
+    var onSuccessCb = function(accel) {
+      document.getElementById('x_value').innerHTML = Math.round(accel.x * 100);
+      document.getElementById('y_value').innerHTML = Math.round(accel.y * 100);
+      document.getElementById('z_value').innerHTML = Math.round(accel.z * 100);
+    };
+    navigator.accelerometer.getCurrentAcceleration(onSuccessCb, onErrorCb);
+  },
+  startWatch: function() {
+    console.log('start watching');
+    var onSuccessCb = function(accel) {
+      document.getElementById('x_value').innerHTML = Math.round(accel.x * 100);
+      document.getElementById('y_value').innerHTML = Math.round(accel.y * 100);
+      document.getElementById('z_value').innerHTML = Math.round(accel.z * 100);
+    };
+    watchId = navigator.accelerometer.watchAcceleration(onSuccessCb, onErrorCb, { frequency: 1000 });
+    document.getElementById('watchOper').innerHTML = 'Stop Watching';
+    document.getElementById('watchOper').disabled = false;
+    document.getElementById('getAccel').disabled = true;
+  },
+  stopWatch: function() {
+    console.log('stop watching');
+    document.getElementById('watchOper').innerHTML = 'Watch acceleration';
+    document.getElementById('watchOper').disabled = false;
+    document.getElementById('getAccel').disabled = false;
+    navigator.accelerometer.clearWatch(watchId);
+    watchId = null;
+  }
+}
+
+
+// onDeviceReady callback
+function onDeviceReady() {
+  document.addEventListener('backbutton', function() {
+    window.history.back();
+  });
+  var app = new App();
+  app.run();
+}
+
+
+//Initialize function
+var init = function () {
+  document.addEventListener('deviceready', onDeviceReady, false);
+};
+
+window.onload = init;
diff --git a/sample/plugins/devicemotion/styles/main.css b/sample/plugins/devicemotion/styles/main.css
new file mode 100644 (file)
index 0000000..029f696
--- /dev/null
@@ -0,0 +1,297 @@
+/*
+ * Copyright (c) 2014-2015 Telerik AD
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd All Rights Reserved
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* apply a natural box layout model to all elements */
+* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
+
+html
+{
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    height:100%;
+}
+
+body
+{
+    font-family: sans-serif, Arial, Segoe UI;
+    font-size: 16px;
+    margin: 0;
+    padding: 0;
+    height:100%;
+    padding: 60px 0px 24px 0px;
+    overflow:hidden;
+}
+
+/*width, height*/
+.clear {clear:both;}
+
+.ch10 {height:10%;}
+.ch20 {height:20%;}
+.ch30 {height:30%;}
+.ch40 {height:40%;}
+.ch50 {height:50%;}
+.ch60 {height:60%;}
+.ch70 {height:70%;}
+.ch80 {height:80%;}
+.ch90 {height:90%;}
+.ch100 {height:100%;}
+
+.cw10 {width:10%;}
+.cw20 {width:20%;}
+.cw30 {width:30%;}
+.cw40 {width:40%;}
+.cw50 {width:50%;}
+.cw60 {width:60%;}
+.cw70 {width:70%;}
+.cw80 {width:80%;}
+.cw90 {width:90%;}
+.cw100 {width:100%;}
+
+/*header*/
+.header
+{
+    position:absolute;
+    top: 0px;
+    left:0px;
+    width:100%;
+    height: 60px;
+    border:none;
+    background: #dedfe1;
+    background: -moz-linear-gradient(top, #ffffff 0%, #e6e6e6 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e6e6e6));
+    background: -webkit-linear-gradient(top, #ffffff 0%,#e6e6e6 100%);
+    background: -o-linear-gradient(top, #ffffff 0%,#e6e6e6 100%);
+    background: -ms-linear-gradient(top, #ffffff 0%,#e6e6e6 100%);
+    background: linear-gradient(to bottom, #ffffff 0%,#e6e6e6 100%);
+    box-shadow: 0px 1px 0px 0px #fff;
+    -webkit-box-shadow: 0px 1px 0px 0px #fff;
+    -moz-box-shadow: 0px 1px 0px 0px #fff;
+    border-bottom: 1px solid #9ca1a5;
+    color: #639ecd;
+}
+.header > h1
+{
+    font-size: 30px;
+    font-weight: normal;
+    border-bottom: 4px solid #639ecd;
+    display: inline-block;
+    margin: 0 0 0 12px;
+    position:absolute;
+    bottom:0;
+    text-shadow: 0 1px 0 #fff;
+}
+
+/*content*/
+.content
+{
+    background:#f0f0f0;
+    min-height:100%;
+    height:100%;
+    overflow:hidden;
+}
+
+.content > .input-area,
+.content > .action-area,
+.content > .result-area {
+    width: 100%;
+    border-top: 1px solid #9ca1a5;
+    position:relative;
+}
+.content > .input-area,
+.content > .action-area {
+    border-top-color:#fff;
+}
+.content > .input-area.ch100,
+.content > .action-areach100,
+.content > .result-area.ch100 {
+    border-top-color:transparent;
+}
+
+.content > .input-area > .inputBox {
+    background-color: #fff;
+    font-style: italic;
+    color: #A7A7A7;
+    width: 290px;
+    padding: 7px 10px;
+    border-radius: 3px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgb(180, 180, 180);
+    border-bottom-color: rgb(255, 255, 255);
+    box-shadow: 0 -1px 0 #3C3C3C;
+    margin-left:12px;
+    margin-top:10px;
+}
+.content > .input-area {
+    background-color:#e4e4e4;
+}
+
+.content > .result-area > .results {
+    margin:0px;
+}
+
+.content > .result-area > .results  > .desc {
+    font-size:12px;
+    color:#a7a9ad;
+    margin-top:10px;
+    text-align:center;
+}
+
+.content > .result-area > .results > .result-info > div:first-of-type {
+    color:#a7a9ad;
+    font-size:20px;
+    float:left;
+    text-align:right;
+    text-shadow: 0 1px 0 #fff;
+}
+.content > .result-area > .results > .result-info > div:first-of-type + div {
+    color:#414349;
+    font-size:20px;
+    margin-left:10px;
+    float:left;
+    text-shadow: 0 1px 0 #fff;
+}
+
+/*separator*/
+.content > .result-area > .separator
+{
+    height: 12px;
+    border: none;
+    background: -moz-linear-gradient(top, rgba(227, 227, 227, 1) 0%, rgba(240, 240, 240, 1) 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(227, 227, 227, 1)), color-stop(100%, rgba(240, 240, 240, 1)));
+    background: -webkit-linear-gradient(top, rgba(227, 227, 227, 1) 0%, rgba(240, 240, 240, 1) 100%);
+    background: -o-linear-gradient(top, rgba(227, 227, 227, 1) 0%, rgba(240, 240, 240, 1) 100%);
+    background: -ms-linear-gradient(top, rgba(227, 227, 227, 1) 0%, rgba(240, 240, 240, 1) 100%);
+    background: linear-gradient(to bottom, rgba(227, 227, 227, 1) 0%, rgba(240, 240, 240, 1) 100%);
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    margin: 1px;
+}
+
+/*footer*/
+.footer
+{
+    position:fixed;
+    bottom: 0px;
+    left:0px;
+    width:100%;
+    height: 24px;
+    background:#5f626a;
+    border-top:1px solid #42444a;
+    box-shadow: inset 0px 1px 7px 0px rgba(0,0,0,0.5);
+    -webkit-box-shadow: inset 0px 1px 7px 0px rgba(0,0,0,0.5);
+    -moz-box-shadow: inset 0px 1px 7px 0px rgba(0,0,0,0.5);
+}
+
+.footer div
+{
+    position:absolute;
+    right:12px;
+    top:4px;;
+    color: #afb1b5;
+    font-size:14px;
+}
+
+/*button*/
+.button
+{
+    border: 1px solid #8d9096;
+    border-radius: 3px;
+    color: #4d5d6b;
+    background: transparent;
+    margin-left:8px;
+    margin-top:12px;
+    width: 100px;
+    height: 32px;
+    display: inline;
+    float: left;
+}
+
+.button:active
+{
+    border: 1px solid #639ecd;
+    background-image: none;
+    background-color: #639ecd;
+    color: #fff;
+    box-shadow: inset 0px 1px 1px 0px rgba(0,0,0,0.3);
+    -webkit-box-shadow: inset 0px 1px 1px 0px rgba(0,0,0,0.3);
+    -moz-box-shadow: inset 0px 1px 1px 0px rgba(0,0,0,0.3);
+}
+
+.button:disabled,
+.button:disabled:hover,
+.button:disabled:active
+{
+    background: rgba(49, 52, 55, 0.1);
+    color: rgba(255, 255, 255, 0.5);
+    border: 1px solid rgba(255, 255, 255, 0.5);
+}
+.button.dh {
+    height:60px;
+}
+.button.dw {
+    width:auto;
+    height:auto;
+}
+#downloadedContent {
+    margin: 6px auto;
+    max-width: 280px;
+    max-height: 220px;
+}
+
+.axes_values {
+    font-size:30px;
+    color:#639ECD;
+    margin-top:50px;
+    text-align:left;
+    margin-left:50px;
+}
+
+/* landscape */
+@media screen and (orientation:landscape) {
+    .button.dh {
+        height:32px;
+        width:140px;
+    }
+    #downloadedContent {
+        margin: 6px auto;
+        max-width: 220px;
+        max-height: 180px;
+    }
+    .axes_values {
+        font-size:30px;
+        color:#639ECD;
+        margin-top:20px;
+        text-align:left;
+        margin-left:50px;
+    }
+}
+
+    /*specific*/
+.content > .result-area > .results  > .desc {
+    font-size:16px;
+    color:#639ecd;
+    word-wrap:break-word;
+}
+.result-area
+{
+    text-align:center;
+}
+.left{
+    text-align: left;
+}