Mostly finished

5 years ago · 43d6e672a3
--- a/demo.html
+++ b/demo.html
@ -28,7 +28,7 @@
 		<script src="js/animations.js"></script>

 		<div id="traceout">
 			<button id="btnrun">Run Traceroute to tovijaeschke.xyz</button>
 			<button id="btnrun">Run Traceroute to google.com</button>
 			<p id="cmdout"></p>
 		</div>
 		<script>
--- a/index.html
+++ b/index.html
@ -0,0 +1,49 @@
 <!DOCTYPE html>
 <html>
 	<head>
 		<style>
 			body {
 				background-color: black;
 			}
 			#globe, #traceout {
 				display: inline-block;
 				vertical-align: top;
 			}
 			#cmdout {
 				color: white;
 			}
 		</style>
 	</head>
 	<body>
 		<?php include "php/traceroute.php" ?>

 		<div id="globe">
 			<!-- This is where our renderer will attach the scene -->
 			<canvas></canvas>
 		</div>

 		<script src="js/points.js"></script>
 		<script src="js/external/three.js"></script>
 		<script src="js/external/orbital-controls.js"></script>
 		<script src="js/animations.js"></script>

 		<div id="traceout">
 			<button id="btnrun">Run Traceroute to google.com</button>
 			<p id="cmdout"></p>
 		</div>
 		<script>
 			init();

 			var runTraceroute = function() { 
 				var rawout = '<?php traceroute(); raw_output() ?>'; 
 				var tracepoints = '<?php json_output(); ?>';
 				document.getElementById('cmdout').innerHTML += rawout;
 				init.addTracePoints(JSON.parse(tracepoints));
 				document.getElementById("btnrun").style.display = "none";
 			};
 			document.getElementById ("btnrun").addEventListener ("click", runTraceroute, false);

 		</script>

 	</body>
 </html>
--- a/js/animations.js
+++ b/js/animations.js
@ -7,11 +7,13 @@ function init() {
 	const globeSegments = 64
 	const globeWidth = 4098 / 2
 	const globeHeight = 1968 / 2
 	const traceSteps = 10;

 	const groups = {
 		globe: null,
 		globePoints: null,
 		tracePoints: null,
 		traceLines: null,
 	}

 	let data, scene, renderer, globe
@ -109,6 +111,7 @@ function init() {


 	function addTracePoints(tracepoints) {
 		console.log(tracepoints);
 		const mergedGeometry = new THREE.Geometry()
 		const pingGeometry = new THREE.SphereGeometry(1.9, 5, 5)
 		const material = new THREE.MeshBasicMaterial({
@ -130,8 +133,66 @@ function init() {
 		groups.tracePoints.name = 'Trace Points'
 		scene.add(groups.tracePoints)
 		groups.tracePoints.rotation.y = groups.globePoints.rotation.y - 0.05
 		//drawTraceLines(tracepoints);
 	}

 	/*
 	function calculateLine(a, b) {
 		var line = [];
 		if (a < b) {
 			var step = (a - b) / (traceSteps - 1);
 		} else {
 			var step = (b - a) / (traceSteps - 1);
 		}
 		var k;
 		for (k = 0; k < traceSteps ; k++) {
 			line.push(a + (step * k));
 		}
 		return line;
 	}

 	function drawTraceLines(tracepoints) {
 		const mergedGeometry = new THREE.Geometry()
 		const pingGeometry = new THREE.SphereGeometry(1.9, 5, 5)
 		const material = new THREE.MeshBasicMaterial({
 			color: '#FF4c4c',
 		})

 		var i;
 		for (i = 0; i < tracepoints.points.length; i++) {

 			if (typeof tracepoints.points[i+1] === 'undefined') {
 				break;
 			}

 			var x1 = tracepoints.points[i].x;
 			var x2 = tracepoints.points[i+1].x;
 			xarray = calculateLine(x1, x2);

 			var y1 = tracepoints.points[i].y;
 			var y2 = tracepoints.points[i+1].y;
 			yarray = calculateLine(y1, y2);
 			
 			var j;
 			for (j = 0; j < xarray.length; j++) {
 				const pos = convertLatLngToSphereCoords(xarray[j], yarray[j])
 				if (pos.x && pos.y && pos.z) {
 					pingGeometry.translate(pos.x, pos.y, pos.z)
 					mergedGeometry.merge(pingGeometry)
 					pingGeometry.translate(-pos.x, -pos.y, -pos.z)
 				}
 			}
 		}

 		const total = new THREE.Mesh(mergedGeometry, material)
 		groups.traceLines = total
 		groups.traceLines.name = 'Trace Lines'
 		scene.add(groups.traceLines)
 		groups.traceLines.rotation.y = groups.globePoints.rotation.y - 0.05
 	}

 	*/

 	init.addTracePoints = addTracePoints;


@ -229,6 +290,11 @@ function init() {
 		if (groups.tracePoints !== null) {
 			groups.tracePoints.rotation.y += 0.01
 		}
 		/*
 		if (groups.traceLines !== null) {
 			groups.traceLines.rotation.y += 0.01
 		}
 		*/
 	}
 }

--- a/js/points.json
+++ b/js/points.json
--- a/php/traceroute.php
+++ b/php/traceroute.php
@ -45,7 +45,8 @@ $traceroute = "";

 function traceroute() {
 	global $data, $traceroute;
 	$traceroute = shell_exec("traceroute " . get_client_ip());
 	$traceroute = shell_exec("traceroute google.com");
 	//$traceroute = shell_exec("traceroute " . get_client_ip());

 	$first = true;
 	foreach(preg_split("/((\r?\n)|(\r\n?))/", $traceroute) as $line){
@ -63,7 +64,7 @@ function traceroute() {

 function raw_output() {
 	global $traceroute;
 	echo json_encode($traceroute);
 	echo json_encode(str_replace("\n", "<br>", $traceroute));
 }

 function json_output() {