Added distance and time calculations. General tweaks.

js/GUI.Utils.js

@@ -1,3 +1,5 @@
+var lastInputBox;
+
 $(document).ready(function() {
                 // Controls menu hide/show
 		$('#hotdog').click(function(){
@@ -10,9 +12,30 @@ $(document).ready(function() {
 		      var selected = $('#findbyselect option:selected').text();
 		      zoomfocus(selected);
 		});
+		$('#calctnd').click(function() {
+			$('#cal_start').html( $('#pointa  option:selected').text() );
+			$('#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");
 
 		});
 
+		$("#pointa").focus(function() {
+			lastInputBox = "pointa";
+		//	console.log('Updating last touched box to : ' + lastInputBox)
+		});
+		$("#pointb").focus(function() {
+			lastInputBox = "pointb";
+		//	console.log('Updating last touched box to : ' + lastInputBox)
+		});
+
+
+});
+
+
 function populateUserFields() {
 	//Populate find by select dropdown
    var types = [];
@@ -31,6 +54,18 @@ function populateUserFields() {
 	}
 
 	$('#findbyselect').html(option);
+
+  // Populate pointa and pointb dropdowns
+	var types = ['planets','stations'];
+	for (var type in types){
+					for ( var key in listobjects(types[type]) ){
+							option += '<option value="'+ escapeHTML(key) + '">' + escapeHTML(key) + '</option>';
+			}
+ 	}
+
+ 	$('#pointa').html(option);
+	$('#pointb').html(option);
+
 }
 
 function openTab(evt,tabName) {
@@ -47,8 +82,7 @@ function openTab(evt,tabName) {
     evt.currentTarget.className += " wvg-tab-active";
 }
 
-function escapeHTML(text)
+function escapeHTML(text) {
-    {
        var chr = { '"': '"', '&': '&', '<': '[', '>': ']' };
        function abc(a)
        {
@@ -56,3 +90,19 @@ function escapeHTML(text)
        }
        return text.replace(/[\"&<>]/g, abc);
 }
+
+function timeformat(secs) {
+	  var s = new Decimal(secs);
+    var hours = new Decimal(secs / 3600);
+		var h = hours.floor(); //Get whole hours
+		s = s - (h * 3600);
+		var m = new Decimal(s / 60); //Get remaining minutes
+		m = m.floor();
+    s = s - (m * 60 );
+		s = Math.round(s,0)
+		console.log("Hours :"+ h);
+		console.log("Minutes :"+ m);
+		console.log("Seconds :"+ s);
+		console.log("Input :"+ secs);
+		return h+":"+(m < 10 ? '0'+m : m)+":"+(s < 10 ? '0'+s : s); //zero padding on minutes and seconds
+}

js/mapviewgl.js

@@ -2,12 +2,15 @@ if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
 var camera, controls, scene, renderer;
 var clock = new THREE.Clock();
+var raycaster = new THREE.Raycaster();
+var mouse = new THREE.Vector2(), INTERSECTED;
 var WIDTH = window.innerWidth , HEIGHT = window.innerHeight
 
 window.onload = function() {
 loadData(function() {
 init();
 animate();
+populateUserFields();
 });
 }
 
@@ -54,18 +57,13 @@ function init() {
 				controls.dampingFactor = 0.25;
 				controls.enableZoom = true;
   		  controls.addEventListener( 'change', render );
-
+				document.addEventListener( 'mousedown', onCanvasClick, false );
-
-
-
 
 
 
 var Text2D = THREE_Text.Text2D;
 var SpriteText2D = THREE_Text.SpriteText2D;
 var textAlign = THREE_Text.textAlign
-var raycaster = new THREE.Raycaster();
-var mouse = new THREE.Vector2();
 var b_geometry, b_material, b_mesh, p_geometry, p_material, p_mesh, s_geometry, s_material, s_mesh, l_text;
 
 
@@ -83,7 +81,7 @@ for (var key in jsonEmpire) {
 		  b_mesh.position.x = border.x;
 		  b_mesh.position.y = border.y;
 		  b_mesh.position.z = border.z;
-		  b_mesh.name = border.name;
+		  b_mesh.name = escapeHTML(border.name);
 			scene.add( b_mesh );
 			if (border.radius > 10) {
 				l_text = new Text2D(border.name, { align: textAlign.center,  font: '25px Arial', fillStyle: '#777' , antialias: false });
@@ -105,9 +103,9 @@ for (var key in jsonEmpire) {
     p_mesh.position.x=planet.x;
     p_mesh.position.y=planet.y;
     p_mesh.position.z=planet.z;
-    p_mesh.name = planet.name;
+    p_mesh.name = escapeHTML(planet.name);
 		scene.add( p_mesh );
-    l_text = new Text2D(planet.name, { align: textAlign.right,  font: '12px Arial', fillStyle: '#FFF' , antialias: false });
+    l_text = new Text2D(escapeHTML(planet.name), { align: textAlign.right,  font: '12px Arial', fillStyle: '#FFF' , antialias: false });
     l_text.material.alphaTest = 0.0;
     l_text.position.set(planet.x,planet.y,planet.z);
     l_text.scale.set(0.25,0.25,0.25);
@@ -123,9 +121,9 @@ for (var key in jsonEmpire) {
     s_mesh.position.x=base.x;
     s_mesh.position.y=base.y;
     s_mesh.position.z=base.z;
-		s_mesh.name = base.name;
+		s_mesh.name = escapeHTML(base.name);
     scene.add( s_mesh );
-  	l_text = new Text2D(base.name, { align: textAlign.left,  font: '12px Arial', fillStyle: '#ABABAB' , antialias: false });
+  	l_text = new Text2D(escapeHTML(base.name), { align: textAlign.left,  font: '12px Arial', fillStyle: '#ABABAB' , antialias: false });
     l_text.material.alphaTest = 0.0;
     l_text.position.set(base.x,base.y+3,base.z);
 		l_text.scale.set(0.20,0.20,0.20);
@@ -148,20 +146,46 @@ window.onresize = function() {
 				render();
 
 }
+function onCanvasClick( event ) {
+
+				//event.preventDefault();
+
+				mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
+				mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
+
+							raycaster.setFromCamera( mouse, camera );
+							var intersects = raycaster.intersectObjects( scene.children );
+
+							if ( intersects.length > 0 ) {
+								if ( INTERSECTED != intersects[ 0 ].object ) {
+
+									INTERSECTED = intersects[ 0 ].object;
+									// console.log( INTERSECTED.name );
+									document.getElementById(lastInputBox).value = INTERSECTED.name;
+
+								}
+
+							} else {
+
+								INTERSECTED = null;
+
+							}
+
+			}
+
 function animate() {
 				var delta = clock.getDelta();
 	        requestAnimationFrame( animate );
 	        scene.updateMatrixWorld()
 					controls.update(delta);
 	        render();
-
-
 }
 
 
 function render () {
 		//requestAnimationFrame( render );
     renderer.render( scene, camera );
+		// find intersections
 
 }
 
@@ -187,7 +211,7 @@ function zoomfocus(name) {
 	for (var type in types) {
 		var objects = listobjects(types[type]);
     for ( var key in objects ) {
-			if (escapeHTML(key) == name) {
+			if (key == name) {
 					var object = objects[key];
 					controls.target.x = object.x;
 				  controls.target.y = object.y;
@@ -225,3 +249,53 @@ function removeEntity(object) {
     scene.remove( selectedObject );
     animate();
 }
+
+// Calculates SU/s with given warp factor
+function calcSUpS(warpfactor) {
+	// 14.0*29.979246*1298.737508 = 257494817.55 SU/s
+	// Velocity = WF^3.333333*lightspeed*cochranes
+	// 3087467836.3256578445 = 1 Parsec
+	var cochranes = 1298.737508; // Average cochranes
+	var lightspeed = 29.979246; // Lightspeed constant
+	var exponent = 3.333333;
+
+	var sus =  Math.pow(warpfactor,exponent) * lightspeed * cochranes ;
+	return sus;
+}
+
+function su2pc ( su ) {
+	return su / 3087467836.3256578445;
+}
+
+// Calculates ETA for given distance and velocity.
+// Velocity should be supplied as an array of speed and unit
+function calcETA(velocity,distance) {
+			var speed = velocity.speed;
+			var unit = velocity.unit;
+			var seconds;
+			switch (unit) {
+					case 'SU/s':
+						seconds = new Decimal(  distance / su2pc(speed)  );
+						break;
+					case 'PC/s':
+						seconds = new Decimal( distance /  speed  );
+						break;
+					case 'WF':
+						seconds = distance / su2pc(calcSUpS(speed));
+						break;
+					default:
+						throw "Invalid unit of speed."
+			}
+
+			return seconds;
+
+}
+
+// Calculate the distance between two named points ( Stations or Bases )
+function calcDist(pointa, pointb) {
+		var obj_A = scene.getObjectByName(pointa);
+		var obj_B = scene.getObjectByName(pointb);
+
+		var distance =  obj_A.position.distanceTo(obj_B.position);
+		return distance;
+}

js/three.js

@@ -41869,4 +41869,3 @@ THREE.MorphBlendMesh.prototype.update = function ( delta ) {
 	}
 
 };
-

webviewgl.htm

@@ -2,6 +2,7 @@
 <html>
   <head>
       <script src="js/three.js"></script>
+      <script src="js/decimal.min.js"></script>
       <script src="js/OrbitControls.js"></script>
       <script src="js/three-text2d.js"></script>
       <script src="js/Detector.js"></script>
@@ -30,8 +31,8 @@
     		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; }
     		.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 select, .wvg-tools input {
-    			width: 75%;
+    			width: 12vw;
     			padding: 5px;
     			font-size: 16px;
     			line-height: 1;
@@ -43,7 +44,8 @@
     			color: #67989A;
     			margin: 0 auto;
     		  }
-    		.wvg-tools span { text-align: center; color: #FFF; font-family: 'Space Mono', monospace;  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; }
     	  .wvg-first {  display: block; }
     		#wrapper { height: inherit; width: 100%; }
     		.active { display: block; }
@@ -86,17 +88,22 @@
     			font-family: 'Space Mono', monospace;
     			color: #003133;
     			font-size: 14px;
+          font-weight: bolder;
     			width: 75%;
     			height: 4vh;
     			padding: 3px;
+          margin-top:1vh;
     			border: solid #67878A 1px;
     			text-decoration: none;
     		}
-
     		.btn:hover {
     			background: #0D4A4D;
     			text-decoration: none;
     		}
+        .tool-header { font-weight: bold; padding-top: 5vh; display: block; }
+
+        .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>
   </head>
   <body>
@@ -105,16 +112,47 @@
       	<div id="controls" class="wvg-controls active">
     		  	<div id="wrapper">
     	      		<ul class="wvg-navbar">
-    				          <li><a class="wvg-tablink wvg-tab-active" href='#' onclick="openTab(event,'Find');">Find</a></li>
+    				          <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,'Info');">Info</a></li>
     			      </ul>
     		  <div class="wvg-tools wvg-first" id="Find">
-    				<span> Find Object By Name </span>
+    				<span class="tool-header"> Find Object By Name </span>
-    				<span> <select id="findbyselect">
+    				<span>
+              <select id="findbyselect">
     					       <option value=''></option>
-    				</select> </span>
+    				  </select> <br />
-    				<br/><input type="checkbox" name="objtype" id="cbp" value="planets" onclick="populateUserFields();"><label for="cbp"> Planets</label> <input type="checkbox" name="objtype" id="cbs" value="stations" onclick="populateUserFields();"> <label for="cbs">Stations</label>
+          	   <input type="checkbox" name="objtype" id="cbp" value="planets" checked><label for="cbp"> Planets</label> <input type="checkbox" name="objtype" id="cbs" value="stations" onclick="populateUserFields();"> <label for="cbs">Stations</label>
-    			  <br /><button id="submitfindbyname" class="btn">Find</button>
+    			     <button id="submitfindbyname" class="btn">Find</button>
+            </span>
+            <span class="toolsep"></span>
+            <span class="tool-header"> Travel Time & Distances </span>
+            <span>
+                <label for="pointa">Point A</label>
+                <select id="pointa" name="Point_A">
+                  <!-- Options will generated in code -->
+                </select>
+                <br />
+                <label for="pointb"> Point B </label>
+                <select id="pointb" name="Point_B">
+                  <!-- Options will generated in code -->
+                </select>
+                <label for="speed">Travel Speed</label>
+                <input type="text" id="speed" value="14">
+                <select id="speedunit" name="Speed Unit">
+                   <option value='WF'>Warp Factor</option>
+                   <option value='PC/s'>PC/s</option>
+                   <option value='SU/s'>SU/s</option>
+                </select>
+                <br />
+                <button id="calctnd" class="btn">Calculate</button>
+            </span>
+            <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 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>