#98 Added demo to homepage

config/demo.js

@@ -5,6 +5,8 @@ const fs = require('fs'),
 	debug = require('debug')('tracman-demo');
 
 module.exports = (io)=>{
+	
+	// File is space-seperated: delay, lat, lon, dir, spd
 	fs.readFile(__dirname+'/demo.txt', (err,data)=>{
 		if (err){ console.error(`❌ ${err.stack}`); }
 		
@@ -13,6 +15,7 @@ module.exports = (io)=>{
 		(function sendLoc(ln) {
 			if (ln>20754){ sendLoc(0) }
 			else {
+				
 				let loc = lines[ln].split(' ');
 				debug(`Sending demo location: ${loc[1]}, ${loc[2]}`);
 				io.to('demo').emit('get', {
@@ -22,9 +25,12 @@ module.exports = (io)=>{
 					dir: loc[3],
 					spd: loc[4]
 				});
+				
+				// Repeat after delay in milliseconds
 				setTimeout(()=>{
-					sendLoc(ln+1);
+					sendLoc(ln+1); // next line of file
 				}, loc[0]);
+				
 			}
 		})(5667);
 		

config/routes/map.js

@@ -33,8 +33,8 @@ router.get('/demo', (req,res,next)=>{
 				marker: 'marker-red',
 				showAlt: false,
 				showTemp: false,
-				showSpeed: true,
-				showScale: true,
+				showSpeed: false,
+				showScale: false,
 				defaultZoom: 13,
 				defaultMap: 'road',
 				units: 'standard'

static/css/index.css

@@ -19,14 +19,32 @@
 
 .splash {
 	background: #090909;
-	background-image: url("/static/img/style/map.jpg");
+	/*background-image: url("/static/img/style/map.jpg");*/
 	background-size: cover;
 	color: #FFF;
 	height: 100vh;
 	overflow: hidden;
 	position: relative;
 }
+.splash #shade {
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 2;
+	position: absolute;
+	background-color: #000;
+	opacity: 0.5;
+}
+.splash #demo {
+	position: absolute;
+	width: 95vw;
+	height: 100%;
+	left: 0;
+	top: 0;
+}
 .splash:after, .splash:before  {
+	z-index: 5;
 	content: "";
 	display: block;
 	position: absolute;
@@ -46,15 +64,18 @@
 	position: relative;
 	top: 48%;
 	transform: translateY(-50%);
-	z-index: 5;
+	z-index: 8;
 }
 .splash h1 {
+	z-index: 10;
 	color: #fbc93d;
 }
 .splash h2 {
+	z-index: 10;
 	margin-bottom: 40px;
 }
 .splash .btn {
+	z-index: 20;
 	margin: 0 20px 10px 0;
 }
 .splash .btn:hover {

static/js/dist/controls.js

@@ -73,7 +73,6 @@
 /* global navigator $ socket userid token mapuser toggleMaps */
 
 $(function(){
-	
 	var wpid, newloc;
 	
 	// Set location

static/js/dist/map.js

@@ -3579,7 +3579,7 @@ __WEBPACK_IMPORTED_MODULE_2_load_google_maps_api___default.a({ key:mapKey })
 			map = new googlemaps.Map( mapElem, {
 				center: new googlemaps.LatLng( mapuser.last.lat, mapuser.last.lon ),
 				panControl: false,
-				scaleControl: mapuser.settings.showScale,
+				scaleControl: (mapuser.settings.showScale)?true:false,
 				draggable: false,
 				zoom: mapuser.settings.defaultZoom,
 				streetViewControl: false,
@@ -3597,7 +3597,7 @@ __WEBPACK_IMPORTED_MODULE_2_load_google_maps_api___default.a({ key:mapKey })
 			});
 			
 			// Create iFrame logo
-			if (noHeader!=='0') {
+			if (noHeader!=='0' && mapuser._id!=='demo') {
 				//console.log("Creating iFrame logo...");
 				const logoDiv = document.createElement('div');
 				logoDiv.id = 'map-logo';

static/js/src/map.js

@@ -83,7 +83,7 @@ loadGoogleMapsAPI({ key:mapKey })
 			});
 			
 			// Create iFrame logo
-			if (noHeader!=='0') {
+			if (noHeader!=='0' && mapuser._id!=='demo') {
 				//console.log("Creating iFrame logo...");
 				const logoDiv = document.createElement('div');
 				logoDiv.id = 'map-logo';

views/index.html

@@ -7,6 +7,8 @@
 {% block main %}
 
 	<section class='splash dark' id='splash'>
+		<div id='shade'></div>
+		<iframe id='demo' src="/map/demo?noheader=1&disp=0"></iframe>
 		<div class='container'>
 			<h1>Tracman</h1>
 			<h3>Display your realtime GPS location on a map</h3>