Add description
This commit is contained in:
Ben van Hartingsveldt
parent
5a4f8f97b5
commit
5198b41c67
3 changed files with 88 additions and 91 deletions
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 MiB |
BIN
src/main/resources/earth.png
Normal file
BIN
src/main/resources/earth.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 MiB |
|
|
@ -3,6 +3,7 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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="LBRY Globe" property="og:title" />
|
||||
<meta content="website" property="og:type" />
|
||||
|
|
@ -32,59 +33,55 @@
|
|||
<div id="info-nodes-total"></div>
|
||||
</div>
|
||||
<script>
|
||||
const globe = Globe();
|
||||
const globe = 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(document.getElementById('globe'));
|
||||
|
||||
globe.arcAltitude(0);
|
||||
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 => {
|
||||
return [`rgba(0, 255, 0, 0.1)`, `rgba(255, 0, 0, 0.1)`];
|
||||
const op = !hoverArc ? 0.1 : d === hoverArc ? 0.9 : 0.1 / 4;
|
||||
return [`rgba(0, 255, 0, ${op})`, `rgba(255, 0, 0, ${op})`];
|
||||
});
|
||||
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_ALTITUDE = {
|
||||
blockchain: 0.02,
|
||||
dht: 0.030,
|
||||
hub: 0.010,
|
||||
};
|
||||
const POINT_COLOR = {
|
||||
blockchain: '#0000FF',
|
||||
dht: '#FFFF00',
|
||||
hub: '#FF0000',
|
||||
};
|
||||
|
||||
const POINT_COLOR = {
|
||||
blockchain: '#0000FF',
|
||||
dht: '#FFFF00',
|
||||
hub: '#FF0000',
|
||||
};
|
||||
const POINT_RADIUS = {
|
||||
blockchain: 0.125,
|
||||
dht: 0.1,
|
||||
hub: 0.15,
|
||||
};
|
||||
|
||||
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.pointAltitude(point => POINT_ALTITUDE[point.type]); // point.type==='hub'?0.015:(point.bootstrap?1:0.02
|
||||
globe.pointColor(point => POINT_COLOR[point.type]);
|
||||
globe.pointLabel(point => point.label);
|
||||
globe.pointRadius(point => POINT_RADIUS[point.type]); // point.bootstrap
|
||||
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--) {
|
||||
var j = Math.floor(Math.random() * (i + 1));
|
||||
var temp = array[i];
|
||||
|
|
@ -94,60 +91,60 @@
|
|||
return array;
|
||||
}
|
||||
|
||||
function updatePointsData(points){
|
||||
var threeCache = {};
|
||||
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('info-nodes-blockchain').innerHTML = '<b>Blockchain Nodes:</b> '+blockchainCount;
|
||||
document.getElementById('info-nodes-dht').innerHTML = '<b>DHT Nodes:</b> '+dhtCount;
|
||||
document.getElementById('info-nodes-hub').innerHTML = '<b>Hub Nodes:</b> '+hubCount;
|
||||
document.getElementById('info-nodes-total').innerHTML = '<b>Total Nodes:</b> '+newPointsData.length;
|
||||
|
||||
globe.pointsData(shuffleArray(newPointsData));
|
||||
var oldPointsData = globe.pointsData();
|
||||
for(var i=0;i<oldPointsData.length;i++){
|
||||
threeCache[oldPointsData[i].id] = oldPointsData[i];
|
||||
}
|
||||
|
||||
function updateGlobe(){
|
||||
fetch('/api')
|
||||
.then(resp => resp.json())
|
||||
.then(json => {
|
||||
data = json;
|
||||
updatePointsData(json.points);
|
||||
globe.arcsData(json.arcs);
|
||||
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('info-nodes-blockchain').innerHTML = '<b>Blockchain Nodes:</b> '+blockchainCount;
|
||||
document.getElementById('info-nodes-dht').innerHTML = '<b>DHT Nodes:</b> '+dhtCount;
|
||||
document.getElementById('info-nodes-hub').innerHTML = '<b>Hub Nodes:</b> '+hubCount;
|
||||
document.getElementById('info-nodes-total').innerHTML = '<b>Total Nodes:</b> '+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();
|
||||
setInterval(updateGlobe,1_000);
|
||||
updateGlobe();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Reference in a new issue