Commit 82b41928 authored by Chris Scott's avatar Chris Scott

Theme sample app. implement stop/start button, stationary-region listener

parent 3cb9d0ef
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -16,6 +16,8 @@ ...@@ -16,6 +16,8 @@
* specific language governing permissions and limitations * specific language governing permissions and limitations
* under the License. * under the License.
*/ */
* { * {
-webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */ -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
} }
...@@ -55,10 +57,10 @@ body { ...@@ -55,10 +57,10 @@ body {
} }
} }
button { .header {
font-size: 1em; padding-top: 15px;
} }
h1 { .header h3 {
font-size:24px; font-size:24px;
font-weight:normal; font-weight:normal;
margin:0px; margin:0px;
...@@ -66,39 +68,3 @@ h1 { ...@@ -66,39 +68,3 @@ h1 {
padding:0px; padding:0px;
text-align:center; text-align:center;
} }
.event {
border-radius:4px;
-webkit-border-radius:4px;
color:#FFFFFF;
font-size:12px;
margin:0px 30px;
padding:2px 0px;
}
.event.listening {
background-color:#333333;
display:block;
}
.event.received {
background-color:#4B946A;
display:none;
}
@keyframes fade {
from { opacity: 1.0; }
50% { opacity: 0.4; }
to { opacity: 1.0; }
}
@-webkit-keyframes fade {
from { opacity: 1.0; }
50% { opacity: 0.4; }
to { opacity: 1.0; }
}
.blink {
animation:fade 3000ms infinite;
-webkit-animation:fade 3000ms infinite;
}
This diff is collapsed.
...@@ -24,6 +24,7 @@ ...@@ -24,6 +24,7 @@
<meta name="msapplication-tap-highlight" content="no" /> <meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 --> <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/bootstrap-min.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" /> <link rel="stylesheet" type="text/css" href="css/index.css" />
<title>BG GeoLocation</title> <title>BG GeoLocation</title>
<script type="text/javascript" <script type="text/javascript"
...@@ -32,16 +33,22 @@ ...@@ -32,16 +33,22 @@
</head> </head>
<body> <body>
<div id="header" class="header" style="padding-top: 15px;"> <div id="header" class="header">
<h1>BG GeoLocation</h1> <h3>BG GeoLocation</h3>
</div> </div>
<div id="map-canvas"></div> <div id="map-canvas"></div>
<div id="footer" style="position:absolute;bottom:0">
<button id="btn-home">HOME</button>
<button id="btn-reset">Reset</button> <nav id="footer" class="navbar navbar-default navbar-fixed-bottom" role="navigation">
<button id="btn-pace">BG Agressive: OFF</button> <button id="btn-home" class="btn navbar-btn btn-default glyphicon glyphicon-screenshot"></button>
</div> <button id="btn-reset" class="btn btn-default glyphicon">Reset</button>
<button id="btn-pace" class="btn navbar-btn btn-success">Aggressive</button>
<button id="btn-disabled" class="btn navbar-btn btn-danger" data-id="false">Stop</button>
</nav>
<script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/index.js"></script> <script type="text/javascript" src="js/index.js"></script>
</body> </body>
</html> </html>
...@@ -72,11 +72,13 @@ var app = { ...@@ -72,11 +72,13 @@ var app = {
var btnHome = document.getElementById('btn-home'), var btnHome = document.getElementById('btn-home'),
btnReset = document.getElementById('btn-reset'), btnReset = document.getElementById('btn-reset'),
btnPace = document.getElementById('btn-pace'); btnPace = document.getElementById('btn-pace'),
btnDisabled = document.getElementById('btn-disabled');
btnHome.addEventListener('click', this.onClickHome); btnHome.addEventListener('click', this.onClickHome);
btnReset.addEventListener('click', this.onClickReset); btnReset.addEventListener('click', this.onClickReset);
btnPace.addEventListener('click', this.onClickChangePace); btnPace.addEventListener('click', this.onClickChangePace);
btnDisabled.addEventListener('click', this.onClickToggleDisabled);
}, },
// deviceready Event Handler // deviceready Event Handler
// //
...@@ -109,12 +111,42 @@ var app = { ...@@ -109,12 +111,42 @@ var app = {
// Update our current-position marker. // Update our current-position marker.
app.setCurrentLocation(location); app.setCurrentLocation(location);
$.ajax({
type: "POST",
url: "http://l-track.azurewebsites.net/track",
data: JSON.stringify({ "location": location }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data){
console.log('successfully logged location');
},
error: function(err) {
console.log('error logging location');
}
});
yourAjaxCallback.call(this); yourAjaxCallback.call(this);
}; };
var failureFn = function(error) { var failureFn = function(error) {
console.log('BackgroundGeoLocation error'); console.log('BackgroundGeoLocation error');
} };
bgGeo.onStationary(function(location) {
if (!app.stationaryRadius) {
app.stationaryRadius = new google.maps.Circle({
fillColor: '#cc0000',
fillOpacity: 0.4,
strokeOpacity: 0,
map: app.map
});
}
var radius = (location.accuracy < location.radius) ? location.radius : location.accuracy;
var center = new google.maps.LatLng(location.latitude, location.longitude);
app.stationaryRadius.setRadius(radius);
app.stationaryRadius.setCenter(center);
});
// BackgroundGeoLocation is highly configurable. // BackgroundGeoLocation is highly configurable.
bgGeo.configure(callbackFn, failureFn, { bgGeo.configure(callbackFn, failureFn, {
...@@ -124,15 +156,15 @@ var app = { ...@@ -124,15 +156,15 @@ var app = {
foo: 'bar' // <-- Android ONLY: HTTP POST params sent to your server when persisting locations. foo: 'bar' // <-- Android ONLY: HTTP POST params sent to your server when persisting locations.
}, },
desiredAccuracy: 0, desiredAccuracy: 0,
stationaryRadius: 20, stationaryRadius: 50,
distanceFilter: 30, distanceFilter: 50,
notificationTitle: 'Background tracking', // <-- android only, customize the title of the notification notificationTitle: 'Background tracking', // <-- android only, customize the title of the notification
notificationText: 'ENABLED', // <-- android only, customize the text of the notification notificationText: 'ENABLED', // <-- android only, customize the text of the notification
activityType: 'AutomotiveNavigation', activityType: 'AutomotiveNavigation',
debug: true, // <-- enable this hear sounds for background-geolocation life-cycle. debug: true, // <-- enable this hear sounds for background-geolocation life-cycle.
stopOnTerminate: false // <-- enable this to clear background location settings when the app terminates stopOnTerminate: false // <-- enable this to clear background location settings when the app terminates
}); });
// Turn ON the background-geolocation system. The user will be tracked whenever they suspend the app. // Turn ON the background-geolocation system. The user will be tracked whenever they suspend the app.
bgGeo.start(); bgGeo.start();
}, },
...@@ -156,15 +188,17 @@ var app = { ...@@ -156,15 +188,17 @@ var app = {
}, },
onClickChangePace: function() { onClickChangePace: function() {
var bgGeo = window.plugins.backgroundGeoLocation, var bgGeo = window.plugins.backgroundGeoLocation,
btnPace = document.getElementById('btn-pace'); btnPace = document.getElementById('btn-pace'),
className = ['btn', 'navbar-btn'];
app.aggressiveEnabled = !app.aggressiveEnabled; app.aggressiveEnabled = !app.aggressiveEnabled;
bgGeo.changePace(app.aggressiveEnabled); bgGeo.changePace(app.aggressiveEnabled);
if (app.aggressiveEnabled) { if (app.aggressiveEnabled) {
btnPace.innerHTML = 'BG Aggressive: ON'; className.push('btn-danger');
} else { } else {
btnPace.innerHTML = 'BG Aggressive: OFF'; className.push('btn-success');
} }
btnPace.className = className.join(' ');
}, },
onClickReset: function() { onClickReset: function() {
// Clear prev location markers. // Clear prev location markers.
...@@ -178,6 +212,28 @@ var app = { ...@@ -178,6 +212,28 @@ var app = {
app.path.setMap(null); app.path.setMap(null);
app.path = undefined; app.path = undefined;
}, },
onClickToggleDisabled: function() {
var bgGeo = window.plugins.backgroundGeoLocation,
btnDisabled = document.getElementById('btn-disabled'),
isDisabled = btnDisabled.getAttribute('data-id'),
text = '',
className = ['btn', 'navbar-btn'];
if (isDisabled === 'false') {
isDisabled = 'true';
bgGeo.stop();
text = 'Start';
className.push('btn-success');
} else {
isDisabled = 'false';
bgGeo.start();
text = 'Stop';
className.push('btn-danger');
}
btnDisabled.innerHTML = text;
btnDisabled.className = className.join(' ');
btnDisabled.setAttribute('data-id', isDisabled);
},
watchPosition: function() { watchPosition: function() {
var fgGeo = window.navigator.geolocation; var fgGeo = window.navigator.geolocation;
if (app.watchId) { if (app.watchId) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment