commit
da887986c6
10
README.md
10
README.md
|
@ -1,5 +1,5 @@
|
|||
# Tracman
|
||||
###### v 0.1.4
|
||||
###### v 0.2.0
|
||||
|
||||
node.js application to display a map with user's location. Live at [tracman.org](https://tracman.org/).
|
||||
The github for the associated android app is [Tracman-org/Android](https://github.com/tracman-org/android).
|
||||
|
@ -21,4 +21,10 @@ $ git clone https://github.com/Tracman-org/Server.git && (cd server && exec npm
|
|||
|
||||
```sh
|
||||
$ npm start
|
||||
```
|
||||
```
|
||||
|
||||
## What's new
|
||||
|
||||
## v 0.2.0
|
||||
|
||||
Now you can track your location in the browser using [watchPosition](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/watchPosition).
|
|
@ -17,7 +17,7 @@ module.exports = {
|
|||
if (req.isAuthenticated()) { return next(); }
|
||||
else {
|
||||
req.session.returnTo = req.path;
|
||||
console.log('mw.ensureAuth: redirect to '+req.path+' after login.');
|
||||
console.log('mw.ensureAuth: Going to redirect to '+req.path+' after login.'); // TODO: Correct next path
|
||||
req.flash('error', 'You must be signed in to do that. <a href="/login">Click here to log in</a>. ');
|
||||
res.redirect('/');
|
||||
}
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "tracman",
|
||||
"version": "0.1.4",
|
||||
"version": "0.2.0",
|
||||
"description": "Tracks user's GPS location",
|
||||
"main": "server.js",
|
||||
"dependencies": {
|
||||
|
|
|
@ -6,15 +6,15 @@
|
|||
min-width:10px;
|
||||
max-width:40px;
|
||||
}::-webkit-scrollbar-track {
|
||||
background-color: #000;
|
||||
background-color: #080808;
|
||||
}::-webkit-scrollbar-thumb {
|
||||
border-radius: .2vw;
|
||||
background: #333;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color:#000;
|
||||
color:#eee;
|
||||
background-color: #080808;
|
||||
color: #eee;
|
||||
}
|
||||
body, input, textarea {
|
||||
padding: 0; margin: 0;
|
||||
|
@ -37,7 +37,11 @@ pre {
|
|||
word-wrap: break-word;
|
||||
}
|
||||
.dark pre {
|
||||
color: #777;
|
||||
-moz-box-shadow: 2px 2px 4px #000;
|
||||
-webkit-box-shadow: 2px 2px 4px #000;
|
||||
box-shadow: 2px 2px 4px #000;
|
||||
background-color: rgba(255,255,255,.03);
|
||||
color: #aaa;
|
||||
padding: 1%;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: .25rem;
|
||||
|
@ -160,6 +164,9 @@ section {
|
|||
transition: 200ms;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
-moz-box-shadow: 2px 2px 4px #000;
|
||||
-webkit-box-shadow: 2px 2px 4px #000;
|
||||
box-shadow: 2px 2px 4px #000;
|
||||
}
|
||||
.dark .btn {
|
||||
color: #fff;
|
||||
|
@ -169,6 +176,10 @@ section {
|
|||
.dark .btn:active:not(.disabled),
|
||||
.dark .btn:focus:not(.disabled) {
|
||||
background: rgba(255,255,255,0.1);
|
||||
}.dark.btn:active:not(.disabled) {
|
||||
-moz-box-shadow: 0;
|
||||
-webkit-box-shadow: 0;
|
||||
box-shadow: 0;
|
||||
}
|
||||
.light .btn {
|
||||
color: #222;
|
||||
|
|
|
@ -7,6 +7,7 @@ header {
|
|||
z-index: 200;
|
||||
}
|
||||
header .logo {
|
||||
|
||||
float: left;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
padding: 13px 23px;
|
||||
|
|
|
@ -4,30 +4,66 @@
|
|||
{% block head %}
|
||||
{{super()}}
|
||||
<style>
|
||||
.sharebuttons .fa {
|
||||
text-align: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
padding-top: 8px;
|
||||
background: rgba(255,255,255,.2);
|
||||
-moz-box-shadow: 2px 2px 4px #000;
|
||||
-webkit-box-shadow: 2px 2px 4px #000;
|
||||
box-shadow: 2px 2px 4px #000;
|
||||
}.sharebuttons .fa:hover {
|
||||
background: rgba(255,255,255,.4);
|
||||
}.sharebuttons .fa:active {
|
||||
-moz-box-shadow: 0;
|
||||
-webkit-box-shadow: 0;
|
||||
box-shadow: 0;
|
||||
}
|
||||
.google-play {
|
||||
width:150px;
|
||||
width: 150px;
|
||||
border: #fbc93d solid 1px;
|
||||
border-radius:10px; }
|
||||
border-radius: 10px; }
|
||||
.locate {
|
||||
background: #111;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block main %}
|
||||
<section class='dark'>
|
||||
<section class='share dark'>
|
||||
<div class='container'>
|
||||
<h1>Welcome{% if user.name %}, {{user.name}}{% endif %}!</h1>
|
||||
<p>To view your location, use this link: <a href="/trac/{{ user.slug }}">https://tracman.org/trac/{{user.slug}}</a></p>
|
||||
<h1>Dashboard</h1>
|
||||
<p class='sharebuttons'>
|
||||
To view your location, use this link:
|
||||
<a href="/trac/{{user.slug}}">https://tracman.org/trac/{{user.slug}}</a>. 
|
||||
You can share your map with these buttons: 
|
||||
<a href="https://twitter.com/home?status=A%20map%20of%20my%20realtime%20location:%20https://tracman.org/trac/{{user.slug}}" target="_blank"><i class="fa fa-twitter"></i></a>
|
||||
<a href="https://www.facebook.com/sharer/sharer.php?u=https://tracman.org/trac/{{user.slug}}" target="_blank"><i class="fa fa-facebook"></i></a>
|
||||
<a href="https://www.reddit.com/submit?title=A%20map%20of%20my%20realtime%20location&url=https://tracman.org/trac/{{user.slug}}" target="_blank"><i class="fa fa-reddit-alien"></i></a>
|
||||
<a href="https://www.linkedin.com/shareArticle?mini=true&url=https://tracman.org/trac/{{user.slug}}&title=A%20map%20of%20my%20realtime%20location" target="_blank"><i class="fa fa-linkedin"></i></a>
|
||||
</p>
|
||||
<p>You can also embed a map into your website with this code. Be sure to set the width and height attributes to suit your circumstance. </p>
|
||||
<pre><iframe src="https://tracman.org/trac/{{user.slug}}?noheader=1" width="90%" style="height:90vh;"></iframe></pre>
|
||||
<pre><iframe src="https://tracman.org/trac/{{user.slug}}?noheader=1" width="90%" style="height:90vh"></iframe></pre>
|
||||
</div>
|
||||
<br>
|
||||
</section>
|
||||
|
||||
<section class='locate dark'>
|
||||
<div class='container'>
|
||||
<h2>App</h2>
|
||||
<p>Click the button below to download the app from the google play store, if you haven't already. </p>
|
||||
<h2>Set location</h2>
|
||||
<p>You can set your location to this device's geolocation by clicking the button below. You can also track this device's location by clicking “Start tracking”. Your location will update as long as you keep this window open. For accuracy, try it on your smartphone, but be careful, because it will drain the battery quickly. </p>
|
||||
<p class='flexbox'>
|
||||
<button id='manual-set' class='btn' style="min-width:40%" onclick="setLocation()"><i class="fa fa-map-marker"></i> Set location</button>
|
||||
<button id='tracking' class='btn' style="min-width:40%" onclick="trackLocation()"><i class="fa fa-crosshairs"></i> Start tracking</button>
|
||||
</p>
|
||||
<h3>Android</h3>
|
||||
<p>The android app lets you update your location in the background, and will conserve battery life. Note that it's <a href="https://github.com/Tracman-org/Android/issues" target="_blank">kind of buggy</a> at the moment. </p>
|
||||
<p><a href="https://play.google.com/store/apps/details?id=us.keithirwin.tracman&utm_source=global_co&utm_medium=prtnr&utm_content=Mar2515&utm_campaign=PartBadge&pcampaignid=MKT-AC-global-none-all-co-pr-py-PartBadges-Oct1515-1"><img class='google-play' alt="Get it on Google Play" src="https://play.google.com/intl/en_us/badges/images/apps/en-play-badge.png" /></a></p>
|
||||
<p>Without the app running, your location won't update. But you can also set your location to this device's geolocation by clicking the button below. </p>
|
||||
<p><button id='manual-set' class='btn' style="display:block; margin:auto;" onclick="setLocation()"><i class="fa fa-map-marker"></i> Update location manually</button></p>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class='settings dark'>
|
||||
<div class='container'>
|
||||
<h2>Settings</h2>
|
||||
<script src="/static/js/validator.min.js"></script>
|
||||
|
@ -108,46 +144,73 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div id='showSpeed' class='form-group col-xs-12' title="PRO ONLY! Shows a spedometer on the map.">
|
||||
<div id='showSpeed' class='form-group col-xs-12' title="{% if not user.isPro %}PRO ONLY! {% endif %}Shows a spedometer on the map.">
|
||||
<label class='control-label col-xs-6 col-sm-4 col-lg-3' for="showSpeed">Show speed{% if not user.isPro %} <span class='red'>(PRO)</span>{% endif %}</label>
|
||||
<div class='input-group col-xs-6 col-sm-8 col-lg-9'>
|
||||
<input class='form-control' name="showSpeed" type="checkbox" {% if not user.isPro %}disabled {% elif user.settings.showSpeed %}checked{% else %}{% endif %}><br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id='showAltitude' class='form-group col-xs-12' title="PRO ONLY! Shows the current elevation on the map. ">
|
||||
<div id='showAltitude' class='form-group col-xs-12' title="{% if not user.isPro %}PRO ONLY! {% endif %}Shows the current elevation on the map. ">
|
||||
<label class='control-label col-xs-6 col-sm-4 col-lg-3' for="showAlt">Show altitude{% if not user.isPro %} <span class='red'>(PRO)</span>{% endif %}</label>
|
||||
<div class='input-group col-xs-6 col-sm-8 col-lg-9'>
|
||||
<input class='form-control' name="showAlt" type="checkbox" {% if not user.isPro %}disabled {% elif user.settings.showAlt %}checked{% else %}{% endif %}><br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id='showStreet' class='form-group col-xs-12' title="PRO ONLY! Shows a Google street view image from your current location, oriented in the direction of travel. This feature is EXPERIMENTAL. ">
|
||||
<label class='control-label col-xs-6 col-sm-4 col-lg-3' for="showStreet">Show street view{% if not user.isPro %} <span class='red'>(PRO)</span><br>{% endif %} (experimental)</label>
|
||||
<div id='showStreet' class='form-group col-xs-12' title="{% if not user.isPro %}PRO ONLY! {% endif %}Shows a Google street view image from your current location, oriented in the direction of travel. This feature is EXPERIMENTAL. ">
|
||||
<label class='control-label col-xs-6 col-sm-4 col-lg-3' for="showStreet">Show street view{% if not user.isPro %} <span class='red'>(PRO)</span><br>{% endif %}</label>
|
||||
<div class='input-group col-xs-6 col-sm-8 col-lg-9'>
|
||||
<input class='form-control' name="showStreet" type="checkbox" {% if not user.isPro %}disabled{% elif user.settings.showStreetview %}checked{% else %}{% endif %}><br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id='submit' class='form-group col-xs-12' style="margin: 30px 0;">
|
||||
<input class='btn yellow col-xs-10 col-xs-offset-1 col-sm-offset-2 col-sm-4 col-lg-offset-3 col-lg-6' type="submit" value="Save">
|
||||
<div id='submit' class='form-group col-xs-12 flexbox' style="padding:0 0 60px">
|
||||
<input class='btn yellow' style="min-width:50%;" type="submit" value="Save">
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{% if not user.isPro %}<p style="clear:both">Want to try <a href="/pro">Tracman Pro</a>? It's free during beta testing. </p>{% endif %}
|
||||
<p style="clear:both">Would you like to submit a <a href="/suggestion">suggestion</a> or <a href="/bug">bug report</a>? </p>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
|
||||
<script>
|
||||
var socket = io.connect();
|
||||
socket.on('connect', function(){
|
||||
// TODO: Security!
|
||||
socket.emit('room', 'app-{{user.id}}');
|
||||
});
|
||||
|
||||
var wpid;
|
||||
function trackLocation() {
|
||||
if (wpid) { // Stop tracking
|
||||
$('#tracking').html('<i class="fa fa-crosshairs"></i> Start tracking');
|
||||
navigator.geolocation.clearWatch(wpid);
|
||||
wpid = undefined;
|
||||
} else { // Start tracking
|
||||
$('#tracking').html('<i class="fa fa-crosshairs fa-spin"></i> Stop tracking');
|
||||
if (!navigator.geolocation) { alert('Unable to track location. '); }
|
||||
else {
|
||||
wpid = navigator.geolocation.watchPosition(function(pos) {
|
||||
socket.emit('app', {
|
||||
usr: '{{user.id}}',
|
||||
lat: pos.coords.latitude,
|
||||
lon: pos.coords.longitude,
|
||||
spd: (pos.coords.speed||0)
|
||||
});
|
||||
console.log('Sent location:',pos.coords.latitude.toFixed(2)+','+pos.coords.longitude.toFixed(2));
|
||||
}, function(err){
|
||||
alert('Failed to track: \n'+err);
|
||||
}, { enableHighAccuracy:true });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function setLocation() {
|
||||
if (navigator.geolocation) {
|
||||
if (!navigator.geolocation) { alert('Unable to set location. '); }
|
||||
else {
|
||||
navigator.geolocation.getCurrentPosition(function(pos){
|
||||
socket.emit('app', {
|
||||
usr: '{{user.id}}',
|
||||
|
@ -156,11 +219,10 @@
|
|||
spd: (pos.coords.speed||0)
|
||||
});
|
||||
alert('Location updated! ');
|
||||
location.reload();
|
||||
}, function(err){
|
||||
alert('ERROR: '+err);
|
||||
}, { enableHighAccuracy:true });
|
||||
} else { alert('Unable to set location. '); }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
<section class='splash dark' id='splash'>
|
||||
<div class='container'>
|
||||
<h1>Tracman</h1>
|
||||
<h3>Let friends track your GPS location in realtime</h3>
|
||||
<h3>Display your realtime GPS location on a map</h3>
|
||||
<a class='btn' href="#" data-scrollto="overview">More info<i class='fa fa-angle-down'></i></a>
|
||||
{% if not user %}
|
||||
<a class='btn' href="#" data-scrollto="get">Request invite<i class='fa fa-angle-down'></i></a>
|
||||
|
@ -47,22 +47,22 @@
|
|||
<div class='container'>
|
||||
<img src="/static/img/style/phone.png" alt="Mobile phone">
|
||||
<div>
|
||||
<h2>The App</h2>
|
||||
<p>Tracman uses an android app to recieve GPS location of your device. Sorry, there's no iPhone version yet. </p>
|
||||
<h2>Setting your location</h2>
|
||||
<p>You can track your GPS location from your phone's web browsers. There's also has an android app which can run in the background. With the app, you can: </p>
|
||||
<ul>
|
||||
<li>
|
||||
<i class='fa fa-toggle-on'></i>
|
||||
<h4>On/off switch</h4>
|
||||
<h4>Turn off tracking</h4>
|
||||
<p>If you need to go undercover, just turn tracman off with the flip of a switch. </p>
|
||||
</li>
|
||||
<li>
|
||||
<i class='fa fa-cog'></i>
|
||||
<h4>Settings</h4>
|
||||
<h4>Change settings</h4>
|
||||
<p>Change your settings to show a less accurate location, if you want an air of mystery. </p>
|
||||
</li>
|
||||
<li>
|
||||
<i class='fa fa-battery-3'></i>
|
||||
<h4>Saves energy</h4>
|
||||
<h4>Save energy</h4>
|
||||
<p>If nobody's tracking you, tracman won't needlessly drain your battery. </p>
|
||||
</li>
|
||||
</ul>
|
||||
|
@ -90,7 +90,7 @@
|
|||
<li>
|
||||
<i class='fa fa-cogs'></i>
|
||||
<h4>Customizable</h4>
|
||||
<p>Change the map default type and zoom level. You can also show speed and altitude. </p>
|
||||
<p>Change the map default type and zoom level. You can also show speed, altitude, and streetview. </p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
@ -100,9 +100,9 @@
|
|||
<section class='disclaimer light' id='disclaimer'>
|
||||
<div class='container'>
|
||||
<h2>Warning! </h2>
|
||||
<p>This is beta software, so there are still kinks to be worked out… </p>
|
||||
<p>Also keep in mind that there are a lot of reasons why publishing your location online could be a bad idea. </p>
|
||||
<p>I assume no responsibility whatsoever. </p>
|
||||
<p>This is beta software, so there are still kinks to be worked out. </p>
|
||||
<p>Also keep in mind that publishing your location online could be a bad idea. </p>
|
||||
<p>I assume no responsibilities. </p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
Loading…
Reference in New Issue