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 @@
* specific language governing permissions and limitations
* under the License.
*/
* {
-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 {
}
}
button {
font-size: 1em;
.header {
padding-top: 15px;
}
h1 {
.header h3 {
font-size:24px;
font-weight:normal;
margin:0px;
......@@ -66,39 +68,3 @@ h1 {
padding:0px;
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 @@
<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 -->
<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" />
<title>BG GeoLocation</title>
<script type="text/javascript"
......@@ -32,16 +33,22 @@
</head>
<body>
<div id="header" class="header" style="padding-top: 15px;">
<h1>BG GeoLocation</h1>
<div id="header" class="header">
<h3>BG GeoLocation</h3>
</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>
<button id="btn-pace">BG Agressive: OFF</button>
</div>
<nav id="footer" class="navbar navbar-default navbar-fixed-bottom" role="navigation">
<button id="btn-home" class="btn navbar-btn btn-default glyphicon glyphicon-screenshot"></button>
<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="js/jquery.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
......@@ -72,11 +72,13 @@ var app = {
var btnHome = document.getElementById('btn-home'),
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);
btnReset.addEventListener('click', this.onClickReset);
btnPace.addEventListener('click', this.onClickChangePace);
btnDisabled.addEventListener('click', this.onClickToggleDisabled);
},
// deviceready Event Handler
//
......@@ -109,12 +111,42 @@ var app = {
// Update our current-position marker.
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);
};
var failureFn = function(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.
bgGeo.configure(callbackFn, failureFn, {
......@@ -124,15 +156,15 @@ var app = {
foo: 'bar' // <-- Android ONLY: HTTP POST params sent to your server when persisting locations.
},
desiredAccuracy: 0,
stationaryRadius: 20,
distanceFilter: 30,
stationaryRadius: 50,
distanceFilter: 50,
notificationTitle: 'Background tracking', // <-- android only, customize the title of the notification
notificationText: 'ENABLED', // <-- android only, customize the text of the notification
activityType: 'AutomotiveNavigation',
debug: true, // <-- enable this hear sounds for background-geolocation life-cycle.
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.
bgGeo.start();
},
......@@ -156,15 +188,17 @@ var app = {
},
onClickChangePace: function() {
var bgGeo = window.plugins.backgroundGeoLocation,
btnPace = document.getElementById('btn-pace');
btnPace = document.getElementById('btn-pace'),
className = ['btn', 'navbar-btn'];
app.aggressiveEnabled = !app.aggressiveEnabled;
bgGeo.changePace(app.aggressiveEnabled);
if (app.aggressiveEnabled) {
btnPace.innerHTML = 'BG Aggressive: ON';
className.push('btn-danger');
} else {
btnPace.innerHTML = 'BG Aggressive: OFF';
className.push('btn-success');
}
btnPace.className = className.join(' ');
},
onClickReset: function() {
// Clear prev location markers.
......@@ -178,6 +212,28 @@ var app = {
app.path.setMap(null);
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() {
var fgGeo = window.navigator.geolocation;
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