LBRYFoundation/lbry-globe-java
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Move CSS and JavaScript

Browse source
This commit is contained in:
Ben van Hartingsveldt 2025-01-03 16:04:25 +01:00
parent de57da088f
commit 7e1c2191e4
No known key found for this signature in database
GPG key ID: 261AA214130CE7AB
6 changed files with 177 additions and 176 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/main/java/com/lbry/globe/api/API.java
View file

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

10
src/main/java/com/lbry/globe/handler/HTTPHandler.java
View file

@ -18,7 +18,6 @@ import java.util.*;
import java.util.logging.Level; import java.util.logging.Level;
import java.util.logging.Logger; import java.util.logging.Logger;
import org.json.JSONArray; import org.json.JSONArray;
import org.json.JSONObject; import org.json.JSONObject;
@ -91,15 +90,18 @@ public class HTTPHandler extends ChannelInboundHandlerAdapter{
boolean ok = fileData!=null; boolean ok = fileData!=null;
String contentType = null; String contentType = null;
if("/earth.jpg".equals(uri.getPath())){
contentType = "image/jpg";
}
if("/earth.png".equals(uri.getPath())){ if("/earth.png".equals(uri.getPath())){
contentType = "image/png"; contentType = "image/png";
} }
if("/favicon.ico".equals(uri.getPath())){ if("/favicon.ico".equals(uri.getPath())){
contentType = "image/vnd.microsoft.icon"; 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()); 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); FullHttpResponse response = new DefaultFullHttpResponse(request.protocolVersion(),ok?HttpResponseStatus.OK:HttpResponseStatus.NOT_FOUND,responseContent);

10
src/main/java/com/lbry/globe/thread/HubNodeFinderThread.java
View file

@ -1,15 +1,15 @@
package com.lbry.globe.thread; 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.api.API;
import com.lbry.globe.object.Node; import com.lbry.globe.object.Node;
import com.lbry.globe.object.Service; import com.lbry.globe.object.Service;
import com.lbry.globe.util.GeoIP; 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.JSONArray;
import org.json.JSONObject; import org.json.JSONObject;

41
src/main/resources/globe.css Normal file
View file

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

123
src/main/resources/globe.js Normal file
View file

@ -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();

168
src/main/resources/index.html
View file

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