Add description
This commit is contained in:
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>
|
<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.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 => {
|
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 => {
|
const POINT_ALTITUDE = {
|
||||||
globe.arcColor(d => {
|
blockchain: 0.02,
|
||||||
const op = !hoverArc ? 0.1 : d === hoverArc ? 0.9 : 0.1 / 4;
|
dht: 0.030,
|
||||||
return [`rgba(0, 255, 0, ${op})`, `rgba(255, 0, 0, ${op})`];
|
hub: 0.010,
|
||||||
});
|
};
|
||||||
});
|
|
||||||
|
|
||||||
const POINT_ALTITUDE = {
|
const POINT_COLOR = {
|
||||||
blockchain: 0.02,
|
blockchain: '#0000FF',
|
||||||
dht: 0.030,
|
dht: '#FFFF00',
|
||||||
hub: 0.010,
|
hub: '#FF0000',
|
||||||
};
|
};
|
||||||
|
|
||||||
const POINT_COLOR = {
|
const POINT_RADIUS = {
|
||||||
blockchain: '#0000FF',
|
blockchain: 0.125,
|
||||||
dht: '#FFFF00',
|
dht: 0.1,
|
||||||
hub: '#FF0000',
|
hub: 0.15,
|
||||||
};
|
};
|
||||||
|
|
||||||
const POINT_RADIUS = {
|
globe.pointAltitude(point => POINT_ALTITUDE[point.type]);
|
||||||
blockchain: 0.125,
|
globe.pointColor(point => POINT_COLOR[point.type]);
|
||||||
dht: 0.1,
|
globe.pointLabel(point => point.label);
|
||||||
hub: 0.15,
|
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.onZoom((x) => {globe.controls().zoomSpeed = 2;});
|
||||||
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;});
|
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,60 +91,60 @@
|
||||||
return array;
|
return array;
|
||||||
}
|
}
|
||||||
|
|
||||||
function updatePointsData(points){
|
function updatePointsData(points){
|
||||||
var threeCache = {};
|
var threeCache = {};
|
||||||
|
|
||||||
var oldPointsData = globe.pointsData();
|
var oldPointsData = globe.pointsData();
|
||||||
for(var i=0;i<oldPointsData.length;i++){
|
for(var i=0;i<oldPointsData.length;i++){
|
||||||
threeCache[oldPointsData[i].id] = oldPointsData[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));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateGlobe(){
|
var newPointsData = points;
|
||||||
fetch('/api')
|
for(var i=0;i<newPointsData.length;i++){
|
||||||
.then(resp => resp.json())
|
if(threeCache[newPointsData[i].id]){
|
||||||
.then(json => {
|
var newData = newPointsData[i];
|
||||||
data = json;
|
newPointsData[i] = threeCache[newPointsData[i].id];
|
||||||
updatePointsData(json.points);
|
var newDataKeys = Object.keys(newData);
|
||||||
globe.arcsData(json.arcs);
|
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);
|
setInterval(updateGlobe,1_000);
|
||||||
updateGlobe();
|
updateGlobe();
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
Loading…
Add table
Reference in a new issue