Move CSS and JavaScript

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

@@ -14,7 +14,6 @@ import java.util.TreeMap;
 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.*;
 import java.util.logging.Level;
 import java.util.logging.Logger;
 
-
 import org.json.JSONArray;
 import org.json.JSONObject;
 
@@ -91,15 +90,18 @@ public class HTTPHandler extends ChannelInboundHandlerAdapter{
             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();

src/main/resources/index.html

@@ -2,6 +2,7 @@
 <html lang="en" prefix="og: https://ogp.me/ns#">
 <head>
     <meta charset="UTF-8">
+    <link href="/globe.css" rel="stylesheet" />
     <meta content="initial-scale=1,width=device-width" name="viewport" />
     <meta content="Get insight in the size and distribution of the LBRY network." property="og:description" />
     <meta content="/favicon.ico" property="og:image" />
@@ -9,49 +10,7 @@
     <meta content="website" property="og:type" />
     <meta content="//globe.lbry.org" property="og:url" />
     <script src="//unpkg.com/globe.gl"></script>
-    <style>
-        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;
-        }
-    </style>
+    <script src="/globe.js"></script>
     <title>LBRY Globe</title>
 </head>
 <body>
@@ -79,128 +38,5 @@
     <img alt="LBRY Foundation" src="https://lbry.org/logo-vertical.svg">
 </div>
 <div class="version"></div>
-<script type="text/javascript">
-const globe = Globe();
-
-window.addEventListener('resize',function(event){
-    globe.height(event.target.innerHeight);
-    globe.width(event.target.innerWidth);
-});
-
-globe(document.getElementById('globe'));
-
-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();
-</script>
 </body>
 </html>