Move CSS and JavaScript

src/main/java/com/lbry/globe/api/API.java

@@ -14,7 +14,6 @@
 import java.util.logging.Level;
 import java.util.logging.Logger;
 
-import com.lbry.globe.util.GeoIP;
 import org.json.JSONArray;
 import org.json.JSONObject;
 

src/main/java/com/lbry/globe/handler/HTTPHandler.java

@@ -18,7 +18,6 @@
 import java.util.logging.Level;
 import java.util.logging.Logger;
 
-
 import org.json.JSONArray;
 import org.json.JSONObject;
 
@@ -91,15 +90,18 @@ private void handleResponse(ChannelHandlerContext ctx){
             boolean ok = fileData!=null;
 
             String contentType = null;
-            if("/earth.jpg".equals(uri.getPath())){
-                contentType = "image/jpg";
-            }
             if("/earth.png".equals(uri.getPath())){
                 contentType = "image/png";
             }
             if("/favicon.ico".equals(uri.getPath())){
                 contentType = "image/vnd.microsoft.icon";
             }
+            if("/globe.css".equals(uri.getPath())){
+                contentType = "text/css";
+            }
+            if("/globe.js".equals(uri.getPath())){
+                contentType = "text/javascript";
+            }
 
             ByteBuf responseContent = ok?Unpooled.copiedBuffer(fileData):Unpooled.copiedBuffer("File not found.\r\n".getBytes());
             FullHttpResponse response = new DefaultFullHttpResponse(request.protocolVersion(),ok?HttpResponseStatus.OK:HttpResponseStatus.NOT_FOUND,responseContent);

src/main/java/com/lbry/globe/thread/HubNodeFinderThread.java

@@ -1,15 +1,15 @@
 package com.lbry.globe.thread;
 
-import java.io.InputStream;
-import java.net.InetAddress;
-import java.net.Socket;
-import java.util.*;
-
 import com.lbry.globe.api.API;
 import com.lbry.globe.object.Node;
 import com.lbry.globe.object.Service;
 import com.lbry.globe.util.GeoIP;
 
+import java.io.InputStream;
+import java.net.InetAddress;
+import java.net.Socket;
+import java.util.*;
+
 import org.json.JSONArray;
 import org.json.JSONObject;
 

src/main/resources/globe.css

@@ -0,0 +1,41 @@
+body{
+    background:black;
+    font-family:Arial,sans-serif;
+    margin: 0;
+}
+.info{
+    background:#041523;
+    border:2px solid #27E4EB;
+    border-radius:8px;
+    color:white;
+    padding:8px;
+    position:absolute;
+    left:0;
+    margin:16px;
+    top:0;
+    z-index:100;
+}
+.info-row span{
+    float:right;
+}
+.info-row span::before{
+    content:'\00A0';
+}
+.info hr{
+    border-color: #27E4EB;
+}
+.logo{
+    bottom:40px;
+    left:40px;
+    position:absolute;
+}
+.logo img{
+    height:80px;
+}
+.version{
+    bottom:0;
+    color:white;
+    padding:8px;
+    position:absolute;
+    left:0;
+}

src/main/resources/globe.js

@@ -0,0 +1,123 @@
+const globe = Globe();
+
+window.addEventListener('load',function(){
+    globe(document.getElementById('globe'));
+});
+
+window.addEventListener('resize',function(event){
+    globe.height(event.target.innerHeight);
+    globe.width(event.target.innerWidth);
+});
+
+globe.backgroundImageUrl('//unpkg.com/three-globe/example/img/night-sky.png');
+globe.bumpImageUrl('//unpkg.com/three-globe/example/img/earth-topology.png');
+globe.globeImageUrl('earth.png');
+
+globe.arcAltitude(0);
+globe.arcColor(d => {
+    return [`rgba(0, 255, 0, 0.1)`, `rgba(255, 0, 0, 0.1)`];
+});
+globe.arcStroke(0.1);
+
+globe.onArcHover(hoverArc => {
+    globe.arcColor(d => {
+        const op = !hoverArc ? 0.1 : d === hoverArc ? 0.9 : 0.1 / 4;
+        return [`rgba(0, 255, 0, ${op})`, `rgba(255, 0, 0, ${op})`];
+    });
+});
+
+const POINT_ALTITUDE = {
+    blockchain: 0.02,
+    dht: 0.030,
+    hub: 0.010,
+};
+
+const POINT_COLOR = {
+    blockchain: '#0000FF',
+    dht: '#FFFF00',
+    hub: '#FF0000',
+};
+
+const POINT_RADIUS = {
+    blockchain: 0.125,
+    dht: 0.1,
+    hub: 0.15,
+};
+
+globe.pointAltitude(point => POINT_ALTITUDE[point.type]);
+globe.pointColor(point => POINT_COLOR[point.type]);
+globe.pointLabel(point => point.label);
+globe.pointRadius(point => POINT_RADIUS[point.type]);
+
+globe.onPointClick(point => {
+    console.log(point);
+});
+
+globe.onZoom((x) => {globe.controls().zoomSpeed = 2;});
+
+var data = null;
+
+function shuffleArray(array) {
+    for (var i = array.length - 1; i >= 0; i--) {
+        var j = Math.floor(Math.random() * (i + 1));
+        var temp = array[i];
+        array[i] = array[j];
+        array[j] = temp;
+    }
+    return array;
+}
+
+function updatePointsData(points){
+    var threeCache = {};
+
+    var oldPointsData = globe.pointsData();
+    for(var i=0;i<oldPointsData.length;i++){
+        threeCache[oldPointsData[i].id] = oldPointsData[i];
+    }
+
+    var newPointsData = points;
+    for(var i=0;i<newPointsData.length;i++){
+        if(threeCache[newPointsData[i].id]){
+            var newData = newPointsData[i];
+            newPointsData[i] = threeCache[newPointsData[i].id];
+            var newDataKeys = Object.keys(newData);
+            for(var j=0;j<newDataKeys.length;j++){
+                newPointsData[i][newDataKeys[j]] = newData[newDataKeys[j]];
+            }
+        }
+    }
+
+    var blockchainCount = 0;
+    var dhtCount = 0;
+    var hubCount = 0;
+    for(var i=0;i<newPointsData.length;i++){
+        if(newPointsData[i].type==='blockchain'){
+            blockchainCount++;
+        }
+        if(newPointsData[i].type==='dht'){
+            dhtCount++;
+        }
+        if(newPointsData[i].type==='hub'){
+            hubCount++;
+        }
+    }
+    document.getElementById('count-nodes-blockchain').textContent = blockchainCount;
+    document.getElementById('count-nodes-dht').textContent = dhtCount;
+    document.getElementById('count-nodes-hub').textContent = hubCount;
+    document.getElementById('count-nodes-total').textContent = newPointsData.length;
+
+    globe.pointsData(shuffleArray(newPointsData));
+}
+
+function updateGlobe(){
+    fetch('/api')
+        .then(resp => resp.json())
+        .then(json => {
+        data = json;
+        updatePointsData(json.points);
+        globe.arcsData(json.arcs);
+    });
+}
+
+setInterval(updateGlobe,1_000);
+updateGlobe();