tovi
/
traceroute-globe
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

Mostly finished

master
root 5 years ago
parent
6d7dae29d2
commit
43d6e672a3
5 changed files with 119 additions and 39168 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -1
      demo.html
  2. +49
    -0
      index.html
  3. +66
    -0
      js/animations.js
  4. +0
    -39165
      js/points.json
  5. +3
    -2
      php/traceroute.php

+ 1
- 1
demo.html View File

@ -28,7 +28,7 @@
<script src="js/animations.js"></script> <script src="js/animations.js"></script>
<div id="traceout"> <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> <p id="cmdout"></p>
</div> </div>
<script> <script>


+ 49
- 0
index.html View File

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

+ 66
- 0
js/animations.js View File

@ -7,11 +7,13 @@ function init() {
const globeSegments = 64 const globeSegments = 64
const globeWidth = 4098 / 2 const globeWidth = 4098 / 2
const globeHeight = 1968 / 2 const globeHeight = 1968 / 2
const traceSteps = 10;
const groups = { const groups = {
globe: null, globe: null,
globePoints: null, globePoints: null,
tracePoints: null, tracePoints: null,
traceLines: null,
} }
let data, scene, renderer, globe let data, scene, renderer, globe
@ -109,6 +111,7 @@ function init() {
function addTracePoints(tracepoints) { function addTracePoints(tracepoints) {
console.log(tracepoints);
const mergedGeometry = new THREE.Geometry() const mergedGeometry = new THREE.Geometry()
const pingGeometry = new THREE.SphereGeometry(1.9, 5, 5) const pingGeometry = new THREE.SphereGeometry(1.9, 5, 5)
const material = new THREE.MeshBasicMaterial({ const material = new THREE.MeshBasicMaterial({
@ -130,8 +133,66 @@ function init() {
groups.tracePoints.name = 'Trace Points' groups.tracePoints.name = 'Trace Points'
scene.add(groups.tracePoints) scene.add(groups.tracePoints)
groups.tracePoints.rotation.y = groups.globePoints.rotation.y - 0.05 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; init.addTracePoints = addTracePoints;
@ -229,6 +290,11 @@ function init() {
if (groups.tracePoints !== null) { if (groups.tracePoints !== null) {
groups.tracePoints.rotation.y += 0.01 groups.tracePoints.rotation.y += 0.01
} }
/*
if (groups.traceLines !== null) {
groups.traceLines.rotation.y += 0.01
}
*/
} }
} }

+ 0
- 39165
js/points.json
File diff suppressed because it is too large
View File


+ 3
- 2
php/traceroute.php View File

@ -45,7 +45,8 @@ $traceroute = "";
function traceroute() { function traceroute() {
global $data, $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; $first = true;
foreach(preg_split("/((\r?\n)|(\r\n?))/", $traceroute) as $line){ foreach(preg_split("/((\r?\n)|(\r\n?))/", $traceroute) as $line){
@ -63,7 +64,7 @@ function traceroute() {
function raw_output() { function raw_output() {
global $traceroute; global $traceroute;
echo json_encode($traceroute);
echo json_encode(str_replace("\n", "<br>", $traceroute));
} }
function json_output() { function json_output() {


Write Preview
Loading…
Cancel
Save