Device Motion

From a940b83527631a8d019a3bce57e50d774f97fc71 Mon Sep 17 00:00:00 2001 From: Andrzej Popowski Date: Thu, 3 Dec 2015 15:26:57 +0100 Subject: [PATCH] [SampleApp] - Sample application for cordova-device-motion Change-Id: I466725205d984810ac6d900a844f91a9a0bc33f7 Signed-off-by: Andrzej Popowski --- sample/index.html | 2 +- sample/plugins/devicemotion/devicemotion.html | 62 ++++ sample/plugins/devicemotion/js/index.js | 92 ++++++ sample/plugins/devicemotion/styles/main.css | 297 ++++++++++++++++++ 4 files changed, 452 insertions(+), 1 deletion(-) create mode 100644 sample/plugins/devicemotion/devicemotion.html create mode 100644 sample/plugins/devicemotion/js/index.js create mode 100644 sample/plugins/devicemotion/styles/main.css diff --git a/sample/index.html b/sample/index.html index ca4e730..31c4435 100644 --- a/sample/index.html +++ b/sample/index.html @@ -38,7 +38,7 @@

Console

Device

Device Motion

Dialogs

Events

File

diff --git a/sample/plugins/devicemotion/devicemotion.html b/sample/plugins/devicemotion/devicemotion.html new file mode 100644 index 0000000..89d1bcc --- /dev/null +++ b/sample/plugins/devicemotion/devicemotion.html @@ -0,0 +1,62 @@ + + + + + + + + + + + Device Motion + + + + +

+ + +

Get Acceleration button shows current values of x, y, z axes.
Watch Acceleration button turns on continuous showing values of x, y, z axes.
Stop Watching button ends watching

x: -

y: -

z: -

+ + + diff --git a/sample/plugins/devicemotion/js/index.js b/sample/plugins/devicemotion/js/index.js new file mode 100644 index 0000000..cf51535 --- /dev/null +++ b/sample/plugins/devicemotion/js/index.js @@ -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 index 0000000..029f696 --- /dev/null +++ b/sample/plugins/devicemotion/styles/main.css @@ -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; +} -- 2.34.1