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

Add description

Browse source
This commit is contained in:
Ben van Hartingsveldt 2024-11-24 22:45:28 +01:00
parent 5a4f8f97b5
commit 5198b41c67
No known key found for this signature in database
GPG key ID: 261AA214130CE7AB
3 changed files with 88 additions and 91 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
src/main/resources/earth.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.6 MiB

BIN
src/main/resources/earth.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.9 MiB

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

@ -3,6 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<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="/favicon.ico" property="og:image" /> <meta content="/favicon.ico" property="og:image" />
<meta content="LBRY Globe" property="og:title" /> <meta content="LBRY Globe" property="og:title" />
<meta content="website" property="og:type" /> <meta content="website" property="og:type" />
@ -32,59 +33,55 @@
<div id="info-nodes-total"></div> <div id="info-nodes-total"></div>
</div> </div>
<script> <script>
const globe = Globe(); const globe = Globe();
globe(document.getElementById('globe')) globe(document.getElementById('globe'));
// .globeImageUrl('gebco_08_rev_elev_21600x10800.png')
.globeImageUrl('earth.jpg')
// .globeImageUrl('earth.png')
// .globeImageUrl('//unpkg.com/three-globe@2.35.2/example/img/earth-night.jpg')
// .globeImageUrl('//unpkg.com/three-globe/example/img/earth-dark.jpg')
// .globeImageUrl('//unpkg.com/three-globe/example/img/earth-water.png')
.bumpImageUrl('//unpkg.com/three-globe/example/img/earth-topology.png')
.backgroundImageUrl('//unpkg.com/three-globe/example/img/night-sky.png');
globe.arcAltitude(0); globe.backgroundImageUrl('//unpkg.com/three-globe/example/img/night-sky.png');
globe.arcColor(d => { 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)`]; return [`rgba(0, 255, 0, 0.1)`, `rgba(255, 0, 0, 0.1)`];
}); });
globe.arcStroke(0.1); globe.arcStroke(0.1);
globe.onArcHover(hoverArc => { globe.onArcHover(hoverArc => {
globe.arcColor(d => { globe.arcColor(d => {
const op = !hoverArc ? 0.1 : d === hoverArc ? 0.9 : 0.1 / 4; const op = !hoverArc ? 0.1 : d === hoverArc ? 0.9 : 0.1 / 4;
return [`rgba(0, 255, 0, ${op})`, `rgba(255, 0, 0, ${op})`]; return [`rgba(0, 255, 0, ${op})`, `rgba(255, 0, 0, ${op})`];
}); });
}); });
const POINT_ALTITUDE = { const POINT_ALTITUDE = {
blockchain: 0.02, blockchain: 0.02,
dht: 0.030, dht: 0.030,
hub: 0.010, hub: 0.010,
}; };
const POINT_COLOR = { const POINT_COLOR = {
blockchain: '#0000FF', blockchain: '#0000FF',
dht: '#FFFF00', dht: '#FFFF00',
hub: '#FF0000', hub: '#FF0000',
}; };
const POINT_RADIUS = { const POINT_RADIUS = {
blockchain: 0.125, blockchain: 0.125,
dht: 0.1, dht: 0.1,
hub: 0.15, hub: 0.15,
}; };
globe.pointAltitude(point => POINT_ALTITUDE[point.type]); // point.type==='hub'?0.015:(point.bootstrap?1:0.02 globe.pointAltitude(point => POINT_ALTITUDE[point.type]);
globe.pointColor(point => POINT_COLOR[point.type]); globe.pointColor(point => POINT_COLOR[point.type]);
globe.pointLabel(point => point.label); globe.pointLabel(point => point.label);
globe.pointRadius(point => POINT_RADIUS[point.type]); // point.bootstrap globe.pointRadius(point => POINT_RADIUS[point.type]);
globe.onZoom((x) => {globe.controls().zoomSpeed = 2;}); globe.onZoom((x) => {globe.controls().zoomSpeed = 2;});
var data = null; var data = null;
function shuffleArray(array) { function shuffleArray(array) {
for (var i = array.length - 1; i >= 0; i--) { for (var i = array.length - 1; i >= 0; i--) {
var j = Math.floor(Math.random() * (i + 1)); var j = Math.floor(Math.random() * (i + 1));
var temp = array[i]; var temp = array[i];
@ -94,7 +91,7 @@
return array; return array;
} }
function updatePointsData(points){ function updatePointsData(points){
var threeCache = {}; var threeCache = {};
var oldPointsData = globe.pointsData(); var oldPointsData = globe.pointsData();
@ -134,9 +131,9 @@
document.getElementById('info-nodes-total').innerHTML = '<b>Total Nodes:</b> '+newPointsData.length; document.getElementById('info-nodes-total').innerHTML = '<b>Total Nodes:</b> '+newPointsData.length;
globe.pointsData(shuffleArray(newPointsData)); globe.pointsData(shuffleArray(newPointsData));
} }
function updateGlobe(){ function updateGlobe(){
fetch('/api') fetch('/api')
.then(resp => resp.json()) .then(resp => resp.json())
.then(json => { .then(json => {
@ -144,10 +141,10 @@
updatePointsData(json.points); updatePointsData(json.points);
globe.arcsData(json.arcs); globe.arcsData(json.arcs);
}); });
} }
setInterval(updateGlobe,1_000); setInterval(updateGlobe,1_000);
updateGlobe(); updateGlobe();
</script> </script>
</body> </body>
</html> </html>