UI updates; add device plugin

config.xml

@@ -9,6 +9,7 @@
     <preference name="windows-target-version" value="8.1" />
     <preference name="windows-phone-target-version" value="8.1" />
     <preference name="StatusBarOverlaysWebView" value="true" />
+    <preference name="BackgroundColor" value="0xff0000ff" />
     <plugin name="cordova-plugin-whitelist" spec="1" />
     <plugin name="cordova-plugin-camera" spec="~2.2.0" />
     <plugin name="cordova-plugin-device-motion" spec="~1.2.1" />
@@ -23,6 +24,11 @@
     <plugin name="cordova-plugin-dbmeter" spec="~1.0.3" />
     <plugin name="cordova-plugin-splashscreen" spec="~3.2.2" />
     <plugin name="cordova-plugin-device-orientation" spec="~1.0.3" />
+    <plugin name="cordova-plugin-network-information" spec="~1.2.1" />
+    <plugin name="cordova-plugin-geolocation" spec="~2.2.0" />
+    <plugin name="cordova-plugin-battery-status" spec="~1.1.2" />
+    <plugin name="cordova-sqlite-storage" spec="~1.4.1" />
+    <plugin name="cordova-plugin-device" spec="~1.1.2" />
     <allow-intent href="http://*/*" />
     <allow-intent href="tel:*" />
     <allow-intent href="sms:*" />
@@ -105,8 +111,4 @@
     <platform name="wp8">
         <splash height="1280" src="res/screens/wp8/SplashScreenImage.png" width="768" />
     </platform>
-    <plugin name="cordova-plugin-network-information" spec="~1.2.1" />
-    <plugin name="cordova-plugin-geolocation" spec="~2.2.0" />
-    <plugin name="cordova-plugin-battery-status" spec="~1.1.2" />
-    <plugin name="cordova-sqlite-storage" spec="~1.4.1" />
 </widget>

www/battery-status.html

@@ -7,6 +7,7 @@ <h1 class="title">Battery Status</h1>
     #status {
         height: 10px;
         background: #22c064;
+        transition: background 500ms;
     }
 </style>
 

www/dbmeter.html

@@ -11,6 +11,7 @@ <h1 class="title">DB Meter (custom)</h1>
     #db {
         height: 10px;
         background: #22c064;
+        transition: background 250ms;
     }
 </style>
 

www/device.html

@@ -0,0 +1,47 @@
+<div class="view">
+    <h1 class="title">Device</h1>
+    <table>
+        <tbody>
+            <tr>
+                <td class="label">cordova</td>
+                <td id="cordova"></td>
+            </tr>
+            <tr>
+                <td class="label">model</td>
+                <td id="model"></td>
+            </tr>
+            <tr>
+                <td class="label">platform</td>
+                <td id="platform"></td>
+            </tr>
+            <tr>
+                <td class="label">uuid</td>
+                <td id="uuid"></td>
+            </tr>
+            <tr>
+                <td class="label">version</td>
+                <td id="version"></td>
+            </tr>
+            <tr>
+                <td class="label">manufacturer</td>
+                <td id="manufacturer"></td>
+            </tr>
+            <tr>
+                <td class="label">isVirtual</td>
+                <td id="isVirtual"></td>
+            </tr>
+            <tr>
+                <td class="label">serial</td>
+                <td id="serial"></td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+
+<style type="text/css">
+    .label {
+        color: #666;
+    }
+</style>
+
+<div data-script="scripts/device.js"></div>

www/navigation.html

@@ -4,6 +4,7 @@ <h1 class="title">Plugins</h1>
     <div data-href="camera.html">Camera</div>
     <div data-href="contacts.html">Contacts</div>
     <div data-href="dbmeter.html">DB Meter (custom)</div>
+    <div data-href="device.html">Device</div>
     <div data-href="device-motion.html">Device Motion</div>
     <div data-href="device-orientation.html">Device Orientation</div>
     <div data-href="dialogs.html">Dialogs</div>

www/scripts/battery-status.js

@@ -15,7 +15,7 @@ app.batteryStatus = {
         var c;
         switch (true) {
             case (s <= 10):
-                c = 'cc0000';
+                c = '#cc0000';
                 break;
             case (s > 10 && s <= 20):
                 c = '#f7941d';

www/scripts/camera.js

@@ -25,6 +25,7 @@ app.camera = {
 
     // camera returned an error
     error: function(msg) {
+        alert(msg);
         console.error('error: ', msg);
     },
 

www/scripts/dbmeter.js

@@ -25,7 +25,22 @@ app.dbmeter = {
     },
 
     success: function(db) {
+        var c;
+        switch (true) {
+            case (db > 70 && db < 90):
+                c = '#f7941d';
+                break;
+            case (db >= 90):
+                c = 'cc0000';
+                break;
+            default:
+                c = '#22c064';
+                break;
+        }
+
         this.db.style.width = db + '%';
+        this.db.style.backgroundColor = c;
+
         console.log('DBMeter: ', db);
     },
 

www/scripts/device.js

@@ -0,0 +1,19 @@
+app.device = {
+
+    options: {
+    },
+
+    init: function () {
+
+        $('cordova').innerText      = device.cordova;
+        $('model').innerText        = device.model;
+        $('platform').innerText     = device.platform
+        $('uuid').innerText         = device.uuid
+        $('version').innerText      = device.version
+        $('manufacturer').innerText = device.manufacturer
+        $('isVirtual').innerText    = device.isVirtual
+        $('serial').innerText       = device.serial
+    }
+};
+
+app.device.init();

www/scripts/dialogs.js

@@ -30,7 +30,7 @@ app.dialogs = {
             'You are the winner!',  // message
             this.callBack,          // callback
             'Game Over',            // title
-            'Done',                 // buttons
+            ['Done','Cancel'],      // buttons
             'default text'          // default text
         );
     },

www/scripts/vibration.js

@@ -6,7 +6,7 @@ app.vibration = {
     },
 
     vibrate: function() {
-        navigator.vibrate([1000,500,1000,500,1000]);
+        navigator.vibrate([500,500,500,500,500]);
         this.button.className = 'shake';
         window.setTimeout(function(e){
             this.button.className = '';

www/vibration.html

@@ -11,23 +11,23 @@ <h1 class="title">Vibrate</h1>
 
     @keyframes shake {
         5%, 45% {
-            transform: translate3d(-1px, 0, 0);
+            transform: translateX(-1px);
         }
 
         10%, 40% {
-            transform: translate3d(2px, 0, 0);
+            transform: translateX(2px);
         }
 
         15%, 25%, 35% {
-            transform: translate3d(-4px, 0, 0);
+            transform: translateX(-4px);
         }
 
         20%, 30% {
-            transform: translate3d(4px, 0, 0);
+            transform: translateX(4px);
         }
 
         50%, 100% {
-            transform: translate3d(0, 0, 0);
+            transform: translateX(0);
         }
     }
 </style>