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

82
js/GUI.Utils.js
View File

@ -1,36 +1,71 @@
var lastInputBox;
$(document).ready(function() { $(document).ready(function() {
// Controls menu hide/show // Controls menu hide/show
$('#hotdog').click(function(){ $('#hotdog').click(function(){
$('#controls').toggleClass("active"); $('#controls').toggleClass("active");
}); });
// Reset view // Reset view
$('.reset-container').click(function(){ reset_view(); }); $('.reset-container').click(function(){ reset_view(); });
$('#submitfindbyname').click( function() { $('#submitfindbyname').click(function() {
var selected = $('#findbyselect option:selected').text(); var selected = $('#findbyselect option:selected').text();
zoomfocus(selected); 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() { function populateUserFields() {
//Populate find by select dropdown //Populate find by select dropdown
var types = []; var types = [];
var checkboxes = document.getElementsByName("objtype"); var checkboxes = document.getElementsByName("objtype");
for (var type in checkboxes) { for (var type in checkboxes) {
if(checkboxes[type].checked) { if(checkboxes[type].checked) {
types[type] = checkboxes[type].value; types[type] = checkboxes[type].value;
} }
} }
var option = ''; var option = '';
for (var type in types){ for (var type in types){
for ( var key in listobjects(types[type]) ){ for ( var key in listobjects(types[type]) ){
option += '<option value="'+ escapeHTML(key) + '">' + escapeHTML(key) + '</option>'; option += '<option value="'+ escapeHTML(key) + '">' + escapeHTML(key) + '</option>';
} }
} }
$('#findbyselect').html(option); $('#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) { function openTab(evt,tabName) {
@ -47,12 +82,27 @@ function openTab(evt,tabName) {
evt.currentTarget.className += " wvg-tab-active"; evt.currentTarget.className += " wvg-tab-active";
} }
function escapeHTML(text) function escapeHTML(text) {
{
var chr = { '"': '"', '&': '&', '<': '[', '>': ']' }; var chr = { '"': '"', '&': '&', '<': '[', '>': ']' };
function abc(a) function abc(a)
{ {
return chr[a]; return chr[a];
} }
return text.replace(/[\"&<>]/g, abc); 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

104
js/mapviewgl.js
View File

@ -2,12 +2,15 @@ if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var camera, controls, scene, renderer; var camera, controls, scene, renderer;
var clock = new THREE.Clock(); var clock = new THREE.Clock();
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2(), INTERSECTED;
var WIDTH = window.innerWidth , HEIGHT = window.innerHeight var WIDTH = window.innerWidth , HEIGHT = window.innerHeight
window.onload = function() { window.onload = function() {
loadData(function() { loadData(function() {
init(); init();
animate(); animate();
populateUserFields();
}); });
} }
@ -54,18 +57,13 @@ function init() {
controls.dampingFactor = 0.25; controls.dampingFactor = 0.25;
controls.enableZoom = true; controls.enableZoom = true;
controls.addEventListener( 'change', render ); controls.addEventListener( 'change', render );
document.addEventListener( 'mousedown', onCanvasClick, false );
var Text2D = THREE_Text.Text2D; var Text2D = THREE_Text.Text2D;
var SpriteText2D = THREE_Text.SpriteText2D; var SpriteText2D = THREE_Text.SpriteText2D;
var textAlign = THREE_Text.textAlign 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; 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.x = border.x;
b_mesh.position.y = border.y; b_mesh.position.y = border.y;
b_mesh.position.z = border.z; b_mesh.position.z = border.z;
b_mesh.name = border.name; b_mesh.name = escapeHTML(border.name);
scene.add( b_mesh ); scene.add( b_mesh );
if (border.radius > 10) { if (border.radius > 10) {
l_text = new Text2D(border.name, { align: textAlign.center, font: '25px Arial', fillStyle: '#777' , antialias: false }); 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.x=planet.x;
p_mesh.position.y=planet.y; p_mesh.position.y=planet.y;
p_mesh.position.z=planet.z; p_mesh.position.z=planet.z;
p_mesh.name = planet.name; p_mesh.name = escapeHTML(planet.name);
scene.add( p_mesh ); 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.material.alphaTest = 0.0;
l_text.position.set(planet.x,planet.y,planet.z); l_text.position.set(planet.x,planet.y,planet.z);
l_text.scale.set(0.25,0.25,0.25); 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.x=base.x;
s_mesh.position.y=base.y; s_mesh.position.y=base.y;
s_mesh.position.z=base.z; s_mesh.position.z=base.z;
s_mesh.name = base.name; s_mesh.name = escapeHTML(base.name);
scene.add( s_mesh ); 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.material.alphaTest = 0.0;
l_text.position.set(base.x,base.y+3,base.z); l_text.position.set(base.x,base.y+3,base.z);
l_text.scale.set(0.20,0.20,0.20); l_text.scale.set(0.20,0.20,0.20);
@ -148,20 +146,46 @@ window.onresize = function() {
render(); 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() { function animate() {
var delta = clock.getDelta(); var delta = clock.getDelta();
requestAnimationFrame( animate ); requestAnimationFrame( animate );
scene.updateMatrixWorld() scene.updateMatrixWorld()
controls.update(delta); controls.update(delta);
render(); render();
}
}
function render () { function render () {
//requestAnimationFrame( render ); //requestAnimationFrame( render );
renderer.render( scene, camera ); renderer.render( scene, camera );
// find intersections
} }
@ -187,7 +211,7 @@ function zoomfocus(name) {
for (var type in types) { for (var type in types) {
var objects = listobjects(types[type]); var objects = listobjects(types[type]);
for ( var key in objects ) { for ( var key in objects ) {
if (escapeHTML(key) == name) { if (key == name) {
var object = objects[key]; var object = objects[key];
controls.target.x = object.x; controls.target.x = object.x;
controls.target.y = object.y; controls.target.y = object.y;
@ -225,3 +249,53 @@ function removeEntity(object) {
scene.remove( selectedObject ); scene.remove( selectedObject );
animate(); 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;
}

25
js/three.js
View File

@ -2504,9 +2504,9 @@ THREE.Vector3.prototype = {
projectOnVector: function ( vector ) { projectOnVector: function ( vector ) {
var scalar = vector.dot( this ) / vector.lengthSq(); var scalar = vector.dot( this ) / vector.lengthSq();
return this.copy( vector ).multiplyScalar( scalar ); return this.copy( vector ).multiplyScalar( scalar );
}, },
projectOnPlane: function () { projectOnPlane: function () {
@ -3551,7 +3551,7 @@ THREE.Euler.prototype = {
return function reorder( newOrder ) { return function reorder( newOrder ) {
q.setFromEuler( this ); q.setFromEuler( this );
return this.setFromQuaternion( q, newOrder ); return this.setFromQuaternion( q, newOrder );
}; };
@ -4649,7 +4649,7 @@ THREE.Matrix3.prototype = {
return this.identity(); return this.identity();
} }
var detInv = 1 / det; var detInv = 1 / det;
te[ 0 ] = t11 * detInv; te[ 0 ] = t11 * detInv;
@ -5383,7 +5383,7 @@ THREE.Matrix4.prototype = {
return this.identity(); return this.identity();
} }
var detInv = 1 / det; var detInv = 1 / det;
te[ 0 ] = t11 * detInv; te[ 0 ] = t11 * detInv;
@ -33000,7 +33000,7 @@ THREE.SpritePlugin = function ( renderer, sprites ) {
} }
function painterSortStable ( a, b ) { function painterSortStable ( a, b ) {
if ( a.renderOrder !== b.renderOrder ) { if ( a.renderOrder !== b.renderOrder ) {
return a.renderOrder - b.renderOrder; return a.renderOrder - b.renderOrder;
@ -36164,7 +36164,7 @@ THREE.CubicBezierCurve.prototype.getPoint = function ( t ) {
var b3 = THREE.ShapeUtils.b3; var b3 = THREE.ShapeUtils.b3;
return new THREE.Vector2( return new THREE.Vector2(
b3( t, this.v0.x, this.v1.x, this.v2.x, this.v3.x ), b3( t, this.v0.x, this.v1.x, this.v2.x, this.v3.x ),
b3( t, this.v0.y, this.v1.y, this.v2.y, this.v3.y ) b3( t, this.v0.y, this.v1.y, this.v2.y, this.v3.y )
); );
@ -36175,7 +36175,7 @@ THREE.CubicBezierCurve.prototype.getTangent = function( t ) {
var tangentCubicBezier = THREE.CurveUtils.tangentCubicBezier; var tangentCubicBezier = THREE.CurveUtils.tangentCubicBezier;
return new THREE.Vector2( return new THREE.Vector2(
tangentCubicBezier( t, this.v0.x, this.v1.x, this.v2.x, this.v3.x ), tangentCubicBezier( t, this.v0.x, this.v1.x, this.v2.x, this.v3.x ),
tangentCubicBezier( t, this.v0.y, this.v1.y, this.v2.y, this.v3.y ) tangentCubicBezier( t, this.v0.y, this.v1.y, this.v2.y, this.v3.y )
).normalize(); ).normalize();
@ -36237,7 +36237,7 @@ THREE.EllipseCurve = function ( aX, aY, xRadius, yRadius, aStartAngle, aEndAngle
this.aEndAngle = aEndAngle; this.aEndAngle = aEndAngle;
this.aClockwise = aClockwise; this.aClockwise = aClockwise;
this.aRotation = aRotation || 0; this.aRotation = aRotation || 0;
}; };
@ -36263,7 +36263,7 @@ THREE.EllipseCurve.prototype.getPoint = function ( t ) {
angle = this.aStartAngle + t * deltaAngle; angle = this.aStartAngle + t * deltaAngle;
} }
var x = this.aX + this.xRadius * Math.cos( angle ); var x = this.aX + this.xRadius * Math.cos( angle );
var y = this.aY + this.yRadius * Math.sin( angle ); var y = this.aY + this.yRadius * Math.sin( angle );
@ -36346,7 +36346,7 @@ THREE.QuadraticBezierCurve3 = THREE.Curve.create(
function ( t ) { function ( t ) {
var b2 = THREE.ShapeUtils.b2; var b2 = THREE.ShapeUtils.b2;
return new THREE.Vector3( return new THREE.Vector3(
b2( t, this.v0.x, this.v1.x, this.v2.x ), b2( t, this.v0.x, this.v1.x, this.v2.x ),
@ -40467,7 +40467,7 @@ THREE.ArrowHelper.prototype.setColor = function ( color ) {
*/ */
THREE.BoxHelper = function ( object, color ) { THREE.BoxHelper = function ( object, color ) {
if ( color === undefined ) color = 0xffff00; if ( color === undefined ) color = 0xffff00;
var indices = new Uint16Array( [ 0, 1, 1, 2, 2, 3, 3, 0, 4, 5, 5, 6, 6, 7, 7, 4, 0, 4, 1, 5, 2, 6, 3, 7 ] ); var indices = new Uint16Array( [ 0, 1, 1, 2, 2, 3, 3, 0, 4, 5, 5, 6, 6, 7, 7, 4, 0, 4, 1, 5, 2, 6, 3, 7 ] );
@ -41869,4 +41869,3 @@ THREE.MorphBlendMesh.prototype.update = function ( delta ) {
} }
}; };

62
webviewgl.htm
View File

@ -2,6 +2,7 @@
<html> <html>
<head> <head>
<script src="js/three.js"></script> <script src="js/three.js"></script>
<script src="js/decimal.min.js"></script>
<script src="js/OrbitControls.js"></script> <script src="js/OrbitControls.js"></script>
<script src="js/three-text2d.js"></script> <script src="js/three-text2d.js"></script>
<script src="js/Detector.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; } 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-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 { 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; padding: 5px;
font-size: 16px; font-size: 16px;
line-height: 1; line-height: 1;
@ -43,8 +44,9 @@
color: #67989A; color: #67989A;
margin: 0 auto; 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-first { display: block; } .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%; } #wrapper { height: inherit; width: 100%; }
.active { display: block; } .active { display: block; }
input[type=radio], input[type=checkbox] { input[type=radio], input[type=checkbox] {
@ -86,17 +88,22 @@
font-family: 'Space Mono', monospace; font-family: 'Space Mono', monospace;
color: #003133; color: #003133;
font-size: 14px; font-size: 14px;
font-weight: bolder;
width: 75%; width: 75%;
height: 4vh; height: 4vh;
padding: 3px; padding: 3px;
margin-top:1vh;
border: solid #67878A 1px; border: solid #67878A 1px;
text-decoration: none; text-decoration: none;
} }
.btn:hover { .btn:hover {
background: #0D4A4D; background: #0D4A4D;
text-decoration: none; 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> </style>
</head> </head>
<body> <body>
@ -105,16 +112,47 @@
<div id="controls" class="wvg-controls active"> <div id="controls" class="wvg-controls active">
<div id="wrapper"> <div id="wrapper">
<ul class="wvg-navbar"> <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> <li><a class="wvg-tablink" href='#' onclick="openTab(event,'Info');">Info</a></li>
</ul> </ul>
<div class="wvg-tools wvg-first" id="Find"> <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>
<option value=''></option> <select id="findbyselect">
</select> </span> <option value=''></option>
<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> </select> <br />
<br /><button id="submitfindbyname" class="btn">Find</button> <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>
<div class="wvg-tools" id="Info"> <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> <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>