tera/Source/SITE/test-map.html

422 lines
14 KiB
HTML
Raw Normal View History

2019-02-21 14:31:48 +00:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta data-n-head="true" data-hid="description" name="description" content="Tera - Fast block generation, High transaction throughput, User-friendly">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Tera Foundation: The fastest block generation blockchain in decentralized blockchains</title>
<!-- Google font -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700%7CVarela+Round" rel="stylesheet">
<!-- Bootstrap -->
<link type="text/css" rel="stylesheet" href="CSS/bootstrap.min.css" />
<!-- Font Awesome Icon -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<!-- Custom stlylesheet -->
<link type="text/css" rel="stylesheet" href="CSS/style.min.css" />
<script type="text/javascript" src="../HTML/JS/client.js"></script>
<style>
@media all
{
.nav .open>a, .nav .open>a:focus, .nav .open>a:hover
{
background-color: rgba(250, 250, 250, .1);
border-color: #337ab7;
}
/*.dropdown2 li*/
/*{*/
/*background-color: rgba(250, 250, 250, .01);*/
/*opacity: 1;*/
/*}*/
/*.dropdown2 li a*/
/*{*/
/*background-color: rgba(250, 250, 250, .01);*/
/*opacity: 1;*/
/*}*/
#nav.nav-transparent:not(.fixed-nav) .main-nav>li>a
{
color:white;
}
}
</style>
<script>
var WasMapDisplay=0;
var PointC;
var glMouse,glMoveMouse;
var NodesMap={};
function DrawMap()
{
var obj = $("idMap");
var ctx = obj.getContext('2d');
ctx.fillStyle = "#030a29";
ctx.fillRect(0, 0, obj.width, obj.height);
var KX=1050/1000;
var KY=490/500;
PointC={x:556,y:380};
//PointC={x:obj.width/2,y:obj.height/2};
// if(glMouse)
// PointC=glMouse;
// if(glMouse)
// KX=glMouse.x/1000;
// if(glMouse)
// KY=glMouse.y/500;
var wasname=0;
var map={};
var Count=0;
for(var key in NodesMap)
{
Count++;
var Item=NodesMap[key];
var y=Math.floor(obj.height-(obj.height-PointC.y+KY*obj.height*(Item.latitude/10000-90)/180));
var x=Math.floor(PointC.x+KX*obj.width*(Item.longitude/10000-180)/360);
if(Item.longitude/10000-180<-20)
x+=25;
var strxy=""+x+":"+y;
if(!map[strxy])
map[strxy]={count:0,name:"-"};
var point=map[strxy];
point.count++;
point.x=x;
point.y=y;
if(Item.name)
point.name=Item.name;
}
//arc
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.strokeStyle = "#ffe238";
ctx.fillStyle=ctx.strokeStyle;
for(var key in map)
{
var point=map[key];
ctx.beginPath();
ctx.arc(point.x,point.y,Math.sqrt(point.count),0,2 * Math.PI);
// ctx.fillText(point.count,point.x,point.y);
ctx.stroke();
ctx.fill();
}
//name
ctx.fillStyle="#1b9031";
for(var key in map)
{
var point=map[key];
if(!wasname && glMoveMouse)
{
var dx=point.x-glMoveMouse.x;
var dy=point.y-glMoveMouse.y;
var dl2=dx*dx+dy*dy;
if(dl2<17+point.count)
{
ctx.beginPath();
ctx.fillText(point.name+":"+point.count,point.x,point.y-20);
ctx.stroke();
wasname=1;
}
}
}
if(0 && glMouse)
{
ctx.beginPath();
ctx.arc(glMouse.x,glMouse.y,4,0,2 * Math.PI);
ctx.fillText("x="+glMouse.x+" y="+glMouse.y,glMouse.x,glMouse.y-20);
ctx.stroke();
}
SetStatus("Nodes count: "+Count);
if(!WasMapDisplay)
SetVisibleBlock("idMapAll",true);
WasMapDisplay=1;
}
function $(id)
{
return document.getElementById(id);
}
function SetVisibleBlock(name,bSet)
{
var Item=$(name);
if(bSet && typeof bSet==="string")
Item.style.display = bSet;
else
if(bSet)
{
Item.style.display = 'block';
DoStableScroll();
}
else
{
Item.style.display = 'none';
}
return Item;
}
function SetStatus(Str)
{
var id = $("idStatus");
id.innerHTML=Str;
}
function GetNodeListAll()
{
GetData("GetNodeList",{All:1,Geo:1}, function (Data)
{
if(Data && Data.result)
{
for(var i=0;i<Data.arr.length;i++)
{
var Item=Data.arr[i];
NodesMap[Item.ip]=Item;
}
DrawMap();
}
});
}
window.onload=function ()
{
DrawMap();
setInterval(GetNodeListAll,1000);
window.addEventListener('mousedown',function (event)
{
SetDiagramMouseX(event,"down");
}, false);
window.addEventListener('mouseup',function (event)
{
SetDiagramMouseX(event,"up");
}, false);
window.onmousemove = function(event)
{
SetDiagramMouseX(event);
}
}
var LMouseOn=false;
function SetDiagramMouseX(event,mode)
{
if(event.srcElement && event.srcElement.className.indexOf("map")>=0)
{
if(mode==="down")
LMouseOn=true;
else
if(mode==="up")
LMouseOn=false;
event.preventDefault();
var obj = event.srcElement;
glMoveMouse=getMouse(obj,event);
if(LMouseOn===true)
{
glMouse=glMoveMouse;
DrawMap();
}
}
}
//LIB
//LIB
//LIB
//LIB
function getMouse(canvas,e)
{
var x = e.clientX - getTrueOffsetLeft(canvas);
if(window.pageXOffset)
x=x+window.pageXOffset;
var y = e.clientY - getTrueOffsetTop(canvas);
if(window.pageYOffset)
y=y+window.pageYOffset
var coord= {x:x,y:y};
return coord;
};
function getTrueOffsetLeft(ele)
{
var n = 0;
while (ele)
{
n += ele.offsetLeft || 0;
ele = ele.offsetParent;
}
return n;
}
function getTrueOffsetTop(ele)
{
var n = 0;
while (ele)
{
n += ele.offsetTop || 0;
ele = ele.offsetParent;
}
return n;
}
</script>
<style>
.basemap
{
width:1244px;
background:url('./PIC/world.jpg') no-repeat;
border:1px solid rgba(204, 198, 198, 0.97);
}
#idMap
{
z-index: 100;
opacity: 0.7;
}
#idStatus
{
height: 20px;
color: white;
}
body
{
background-color: #030a29;
}
</style>
</head>
<body>
<!-- Header -->
<header id="home" style="background: #1C1D21; height: 80px;">
<!-- Nav -->
<nav id="nav" class="navbar nav-transparent">
<div class="container">
<div class="navbar-header">
<!-- Logo -->
<div class="navbar-brand">
<a href="index.html">
<img class="logo" src="PIC/Tera_Text_gray.svg" alt="logo">
<img class="logo-alt" src="PIC/Tera_Text.svg" alt="logo">
</a>
</div>
<!-- /Logo -->
<!-- Collapse nav button -->
<div class="nav-collapse">
<span></span>
</div>
<!-- /Collapse nav button -->
</div>
<!-- Main navigation -->
<ul class="main-nav nav navbar-nav navbar-right white_menu">
<li><a href="index.html">HOME</a></li>
<li><a href="/changelog.html">CHANGELOG</a></li>
<li><a href="http://teraminer.org/" target="_blank">MINING</a></li>
<li><a href="/explorer.html">EXPLORER</a></li>
<li><a href="/web-wallet.html">WALLET</a></li>
<li><a href="/map.html">NETWORK MAP</a></li>
<!-- Documentation -->
<li class="dropdown2">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">HELP<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
WHITE PAPER
<ul>
<li><a href="https://docs.google.com/document/d/1EaqFg1ncIxsrNE2M9xJOSzQu8z3ANwMuNyTX0z_A1ow/edit?usp=sharing/" target="_blank">ENG</a></li>
<li><a href="https://docs.google.com/document/d/1B6_qlAp2xs4aHkqOwyvRMCDJTjgeNiOJiGpIeT0VAzY/edit?usp=sharing/" target="_blank">RUS</a></li>
<li><a href="https://sourceforge.net/p/tera/code/ci/master/tree/Doc/Chinese/WP_chinese.pdf?format=raw" target="_blank">CHINESE</a></li>
</ul>
</li>
<li role="separator" class="divider"></li>
<li>
DAPP PAPER
<ul>
<li><a href="https://docs.google.com/document/d/1PXVBbMKdpsAKPkO9UNB5B-LMwIDjylWoHvAAzzrXjvU/edit?usp=sharing/" target="_blank">ENG</a></li>
<li><a href="https://docs.google.com/document/d/1SkD4yc_POaGRMJRC6yGkDfdJUuKbcyq3JpG0cBXeYGM/edit?usp=sharing/" target="_blank">RUS</a></li>
<li><a href="https://docs.google.com/document/d/10yXAKxaU7YgrQnbdXu_L7WWovUoRtdJwo3tXXaGZGSQ/edit?usp=sharing/" target="_blank">FAQ</a></li>
</ul>
</li>
<li role="separator" class="divider"></li>
<li>
OTHER
<ul>
<li><a href="https://sourceforge.net/p/tera/code/ci/master/tree/Doc/Eng/API.md" target="_blank">API</a></li>
<li><a href="https://docs.google.com/document/d/18DtASGhrbRwXCAkQR1hQG0lVdrStp4CgA-pd6hicwfo/edit?usp=sharing/" target="_blank">TERAHASH (mining algo)</a></li>
<!--li><a href="changelog.html">Changelog</a></li-->
<!--li><a href="faq.html">FAQ</a></li-->
<!--li><a href="legal.html">Legal</a></li-->
</ul>
</li>
</ul>
</li>
</ul>
<!-- /Main navigation -->
</div>
</nav>
<!-- /Nav -->
<!-- Social Header -->
<div class="home-wrapper">
<div class="container">
<!-- Row -->
<div class="row">
</div>
<!-- /Row -->
</div>
</div>
<!-- /About Tera -->
</header>
<!-- /Header -->
<DIV align='center'>
<DIV id="idStatus"></DIV>
<DIV id="idMapAll" style="display: none">
<DIV class="basemap">
<canvas class="map" width="1244" height="658" id='idMap'></canvas>
</DIV>
<DIV style="color: gray; text-align: center">The location of the nodes on the map is very approximate...</DIV>
</DIV>
</DIV>
</body>
</html>