mattburchett/webglmapview
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Added distance and time calculations. General tweaks.

Browse Source
This commit is contained in:
Rob L 2016-07-22 10:23:16 -04:00
parent 2de0aa215c
commit a20a24fd76
5 changed files with 220 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
js/GUI.Utils.js
View File

@ -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
}

3
js/decimal.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

102
js/mapviewgl.js
View File

@ -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;
}

1
js/three.js
View File

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

58
webviewgl.htm
View File

@ -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 {
width: 75%;
.wvg-tools select, .wvg-tools input {
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> <select id="findbyselect">
<span class="tool-header"> Find Object By Name </span>
<span>
<select id="findbyselect">
<option value=''></option>
</select> </span>
<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>
<br /><button id="submitfindbyname" class="btn">Find</button>
</select> <br />
<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>
<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>