Add route planner

js/GUI.Utils.js

@@ -12,19 +12,18 @@ $(document).ready(function() {
 		      var selected = $('#findbyselect option:selected').text();
 		      zoomfocus(selected);
 		});
+		$('#route_output').change(function() {
+			 var stop=$('#route_output :selected').parent().attr('label');
+			 zoomfocus(stop);
+		});
 		$('#calctnd').click(function() {
+
 			removeEntity('arrow');
 			lastInputBox = null;
-			if ( $('#pointa  option:selected').text() != $('#pointb  option:selected').text() && (!$('#pointa  option:selected').text().match("[=.] (.+) [=.]") && !$('#pointb  option:selected').text().match("[=.] (.+) [=.]"))) {
+			var speed = {'speed': $('#speed').val(), 'unit':$ ('#speedunit option:selected').val() };
-			$('#cal_start').html( $('#pointa  option:selected').text() );
+			populateRoutePlan( $('#pointa  option:selected').text() , $('#pointb  option:selected').text(),speed );
-			$('#cal_end').html( $('#pointb  option:selected').text() );
+
-			$('#cal_speed').html( $('#speed').val() +" " + $('#speedunit option:selected').val() );
+
-			var dist = calcDist( $('#pointa  option:selected').text(),  $('#pointb  option:selected').text() );
-			var eta = calcETA({'speed': $('#speed').val(), 'unit':  $('#speedunit option:selected').val()},dist)
-			$('#cal_eta').html( timeformat(eta) );
-			$('#cal_dist').html( dist.toFixed(2) + " PC");
-			drawline(grabPositionByName($('#pointa  option:selected').text()),grabPositionByName($('#pointb  option:selected').text()));
-			}
 		});
 		$('#cbs').click(function() {populateFBSelect(); });
 		$('#cbp').click(function() {populateFBSelect(); });
@@ -54,10 +53,11 @@ function populateUserFields() {
 			var keys = Object.keys(listobjects(types[type]));
 			var captype = types[type];
 			captype = captype.capitalize()
-			option += '<option value="">==== ' + captype + ' ====</option>';
+			option += '<optgroup label="'+ captype + '">';
 			keys.sort().forEach(function(element, index, array){
 				 option += '<option value="'+ escapeHTML(element) + '">' + escapeHTML(element) + '</option>';
 			 });
+			 option += '</optgroup>';
 
  	}
 
@@ -77,10 +77,14 @@ function populateFBSelect() {
 	 }
 	 var option = '';
 	 for (var type in types) {
+		 				var captype = types[type];
+		 				captype = captype.capitalize()
+		 				option += '<optgroup label="'+ captype + '">';
 						var keys = Object.keys(listobjects(types[type]));
 						keys.sort().forEach(function(element, index, array){
 							 option += '<option value="'+ escapeHTML(element) + '">' + escapeHTML(element) + '</option>';
 						 });
+						  option += '</optgroup>';
 
 	}
 
@@ -126,3 +130,39 @@ function timeformat(secs) {
 	//	console.log("Input :"+ secs);
 		return h+":"+(m < 10 ? '0'+m : m)+":"+(s < 10 ? '0'+s : s); //zero padding on minutes and seconds
 }
+
+function populateRoutePlan(pointa,pointb,speed) {
+		if ( pointa != pointb ) {
+			// Populate legacy (trip total) fields with route info
+			$('#cal_start').html( pointa );
+			$('#cal_end').html( pointb );
+			$('#cal_speed').html( speed.speed + " " + speed.unit );
+			var route = calcBestRoute(pointa,pointb);
+			console.log(route)
+			var dist = route.distance;
+			var eta = calcETA(speed,dist);
+			$('#cal_eta').html( timeformat(eta) );
+			$('#cal_dist').html( dist.toFixed(2) + " PC");
+
+			// Populate the route plan select area
+			lastWaypoint = {'name': pointa, gate:false};
+			var routeplan;
+			route.stops.forEach(function(waypoint,index,self) {
+				routeplan += '<optgroup label="' + waypoint.name + '">';
+				if(typeof self[index+1] != 'undefined' ) {
+					if(waypoint.gate && self[index+1].gate) {routeplan += '<option>^---- Gate From</option>'; }
+					console.log(waypoint.gate)
+				}
+				if(waypoint.gate && lastWaypoint.gate) {routeplan += '<option>^---- Gate Exit</option>'; }
+
+				if(!waypoint.gate || (!lastWaypoint.gate && waypoint.gate)) {
+					routeplan += '<option>Distance:' + calcDist(lastWaypoint.name,waypoint.name) + '</option>'
+					routeplan += '<option>ETA: ' + timeformat(calcETA(speed,calcDist(lastWaypoint.name,waypoint.name))) + '</option>';
+					drawline(grabPositionByName(lastWaypoint.name),grabPositionByName(waypoint.name));
+				}
+				lastWaypoint = waypoint;
+			});
+				$('#route_output').html(routeplan);
+			//drawline(grabPositionByName($('#pointa  option:selected').text()),grabPositionByName($('#pointb  option:selected').text()));
+	}
+}

js/mapviewgl.js

@@ -251,8 +251,11 @@ function drawline(origin,dest) {
 }
 
 function removeEntity(object) {
-    var selectedObject = scene.getObjectByName(object);
+		var selectedObject;
+		while ( selectedObject = scene.getObjectByName(object) ) {
     scene.remove( selectedObject );
+	}
+
     animate();
 }
 
@@ -333,19 +336,20 @@ function calcBestRoute(pointa,pointb) {
 	delete route['0']; // WTF? We shouldn't need to do this. I hate JS....
 
 	// Calculate direct route.
-	route['Direct'] =  { 'stops': [pointb], 'distance': calcDist(pointa, pointb)};
+	route['Direct'] =  { 'stops': [{'name':pointb, 'gate': false}], 'distance': calcDist(pointa, pointb)};
 
 	// Find route via stargate.
 	var distance_a = {};
 	var distance_b = {};
 	var near_a,near_b;
 	// Find gate closest to point a
-	jsonGate.forEach(function(name) { distance_a[name.name] = calcDist(pointa,name.name) ;});
+	jsonGate.forEach(function(name) { distance_a[name.name] = calcDist(pointa,name.name);});
 	var dist_a_sorted = Object.keys(distance_a).sort(function(a,b) {return distance_a[a]-distance_a[b]});
 	var near_a = dist_a_sorted[0];
 
+
 	// Dump out right now if A->nearest gate > direct. Save the compute cycles.
-	if(distance_a[near_a] > route['Direct'].distance) {
+	if(distance_a[near_a] > route['Direct'].distance || near_a == pointb) {
 		return route['Direct'];
 	}
 
@@ -355,17 +359,14 @@ function calcBestRoute(pointa,pointb) {
 	var near_b = dist_b_sorted[0];
 
 	// Dump out right now if B->nearest gate > direct or the same fucking gate. Save the compute cycles.
-
+	if(distance_b[near_b] > route['Direct'].distance || near_a == near_b) {
-	if(distance_a[near_b] > route['Direct'].distance || near_a == near_b) {
+					return route['Direct'];
-		return route['Direct'];
 	}
 	// Assemble the gate travel plan. With our powers unite, we are shitty code!
 	gate_distance = distance_a[near_a] + distance_b[near_b];
-	route['Gate'] = {'stops': [near_a,near_b,pointb], 'distance':gate_distance}
+	route['Gate'] = {'stops': [{'name':near_a, 'gate':true} ,{'name': near_b, 'gate': true},{'name': pointb, 'gate':false}], 'distance':gate_distance}
 
-	// Sort all routes by distance traveled.
+	// Sort all routes by distance traveled. Index of zero should be the fastest, in theory any way
-
-	console.log(Object.keys(route))
 	var route_keys_sorted = Object.keys(route).sort(function(a,b) {return route[a].distance-route[b].distance});
 
 	return route[route_keys_sorted[0]];

webviewgl.htm

@@ -27,10 +27,10 @@
     		.reset-button {margin: 0; padding: 0; padding: 3px 3px; color: #AAA;  }
     		.menu-button {  float: right; position: absolute; right: 0.1vw; top: 0; z-index: 5; color:white; background-color:#003133; padding: 0px; font-weight: bold; font-size:2.5vh; }
     		.reset-container { margin: 0; padding: 10px; font-weight: bold; text-align: center; font-family: 'Space Mono', monospace; color:#67989A; background-color: maroon;  width: 100%; height: 2.5vh; float:bottom;  }
-    		.wvg-controls { position: fixed; left: 85%; height: 96%; width: 15%; margin-top: 0; display: none;}
+    		.wvg-controls { position: fixed; left: 85%; height: 96%; width: 15%; margin: 0; display: none;}
-    		ul.wvg-navbar { height: 3vh; width: 100%; background-color: #003133; list-style-type: none; overflow: hidden; padding: 0; margin: 0;  }
+    		ul.wvg-navbar { height: 3vh; width: 100%; background-color: #003133; list-style-type: none; overflow: hidden; padding: 0; margin: 0; border: 0;  }
-    		ul.wvg-navbar li { width:auto; height: 100%; float: left; } .wvg-tablink { margin: 0; padding: 0; padding: 8px 10px; font-weight: bold; text-align: center; font-family: 'Space Mono', monospace; color:#67989A; }
+    		ul.wvg-navbar li { width:auto; height: 100%; float: left; padding: 0; margin: 0; border: 0; } .wvg-tablink { height: 100%; border: 0; margin: 0; padding: 0; padding: 8px 10px; font-weight: bold; text-align: center; font-family: 'Space Mono', monospace; color:#67989A; font-size: 1.25vh; }
-    		.wvg-tab-active { background-color: #0D4A4D; color: #003133; }
+        .wvg-tab-active { background-color: #0D4A4D; color: #003133; }
     		.wvg-tools { width: 100%; height: 98%; background: #333; display: none; color: #AAA; padding-top: 2vh; padding-left:1vw; padding-right: 2.5vw;}
     		.wvg-tools select, .wvg-tools input {
     			width: 12vw;
@@ -44,6 +44,7 @@
     			background: url('assets/select-arrow.png') no-repeat right center #333;
     			color: #67989A;
     			margin: 0 auto;
+
     		  }
         .wvg-tools input { background: #333; width: 11.4vw; }
     		.wvg-tools span { text-align: center; color: #FFF; font-family: 'Space Mono', monospace; display: block; padding-right: 3vw; }
@@ -102,7 +103,7 @@
     			text-decoration: none;
     		}
         .tool-header { font-weight: bold; padding-top: 5vh; display: block; }
-
+        #route_output {font-size: 0.9vh; height: 25%; padding-top: 2.5vh;}
         .toolsep { margin-right: 1vw; padding:0;  padding-top: 1vh; padding-bottom: 2.5vh; border-bottom: 1px #AAA solid; height: 1vh; display: block; width: 64%;}
         .calc_data { padding-top: 2.5vh; font-size: 0.9em;  }
       </style>
@@ -114,8 +115,10 @@
     		  	<div id="wrapper">
     	      		<ul class="wvg-navbar">
     				          <li><a class="wvg-tablink wvg-tab-active" href='#' onclick="openTab(event,'Find');">Find & Calc</a></li>
-                    <!--  <li><a class="wvg-tablink" href='#' onclick="openTab(event,'Tools');">Tools</a></li> -->
+                      <li><a class="wvg-tablink" href='#' onclick="openTab(event,'Plan');">Plan</a></li>
     				          <li><a class="wvg-tablink" href='#' onclick="openTab(event,'Info');">Info</a></li>
+
+
     			      </ul>
     		  <div class="wvg-tools wvg-first" id="Find">
     				<span class="tool-header"> Find Object By Name </span>
@@ -127,7 +130,9 @@
     			     <button id="submitfindbyname" class="btn">Find</button>
             </span>
             <span class="toolsep"></span>
-            <span class="tool-header"> Travel Time & Distances </span>
+    		  </div>
+          <div class="wvg-tools" id="Plan">
+            <span class="tool-header"> Route Planner </span>
             <span>
                 <label for="pointa">Point A</label>
                 <select id="pointa" name="Point_A">
@@ -148,13 +153,19 @@
                 <br />
                 <button id="calctnd" class="btn">Calculate</button>
             </span>
+            <br />
+            <br />
+            <select multiple="multiple" id="route_output" class="select-route-map">
+              <option> No route calculated </option>
+            </select>
+
             <span class="calc_data"><br />
               From: <u><i id="cal_start">Empty</i></u> <br />
               To: <u><i id="cal_end">Empty</i></u><br />
               Distance: <u><i id="cal_dist">Unknown</i></u><br />
               ETA @ <u><i id="cal_speed">Unknown</i></u> : <u><i id="cal_eta">Unknown</i></u>
             </span>
-    		  </div>
+          </div>
     			<div class="wvg-tools" id="Info">
     				<span> This tool was designed by Frey @ ATSMUSH. It is based on MapView for ATS with data used from the Navcomp MUSHClient plugin with permission. </span>
     			</div>