Mirrors/i2pd-tools
2
0
Fork 0
mirror of https://github.com/PurpleI2P/i2pd-tools.git synced 2025-02-02 11:04:00 +01:00
Code Issues Packages Projects Releases Wiki Activity

add dynamic sized canvas

Browse source
This commit is contained in:
Jeff Becker 2016-10-20 10:25:57 -04:00
parent 35e83c4996
commit f10ea363f0
No known key found for this signature in database
GPG key ID: AB950234D6EA286B
2 changed files with 17 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
websocket-ui/index.html
View file

@ -5,9 +5,7 @@
</script> </script>
</head> </head>
<body style="background: #222;"> <body style="background: #222;">
<div id="log"> <canvas id="main" style="background: #222;">
</div>
<canvas id="main" width="1200" height="700" style="background: #222;">
</canvas> </canvas>
<script type="text/javascript" src="ui.js"> <script type="text/javascript" src="ui.js">
</script> </script>

17
websocket-ui/ui.js
View file

@ -56,18 +56,25 @@ ws.onmessage = function(ev) {
var draw = c.getContext("2d"); var draw = c.getContext("2d");
setInterval(function() {
draw.canvas.width = window.innerWidth - 100;
draw.canvas.height = window.innerHeight - 100;
draw.font = "10px monospace"; draw.font = "10px monospace";
setInterval(function() {
draw.clearRect(0, 0, c.width, c.height); draw.clearRect(0, 0, c.width, c.height);
var n = nodes.length; var n = nodes.length;
var centerx = c.width / 2; var centerx = c.width / 2;
var centery = c.height / 2; var centery = c.height / 2;
var outer_r = (n * 5); var mult = Math.log(nodes.length) + 0.5;
var outer_r = (n * mult);
if(outer_r > c.width || outer_r > c.height) {
var smaller = c.height;
if(c.width < smaller) smaller = c.width;
outer_r = smaller - 20;
}
var inner_r = outer_r / 2; var inner_r = outer_r / 2;
draw.beginPath(); draw.beginPath();
@ -112,8 +119,10 @@ setInterval(function() {
draw.beginPath(); draw.beginPath();
var txt = ident.substr(0, 6); var txt = ident.substr(0, 6);
draw.fillText(txt, x2-5, y2-5); draw.fillText(txt, x2-5, y2-5);
if(i * 10 < c.height) {
txt += "| "+leftpad(nodes[ident].recv+" msg/s in", 15)+ " | "+leftpad(nodes[ident].send+" msg/s out", 15)+" |"; txt += "| "+leftpad(nodes[ident].recv+" msg/s in", 15)+ " | "+leftpad(nodes[ident].send+" msg/s out", 15)+" |";
draw.fillText(txt, 100, 20 + (i*10)); draw.fillText(txt, 100, 20 + (i*10));
}
draw.moveTo(x0, y0); draw.moveTo(x0, y0);
draw.strokeStyle = "#dfa"; draw.strokeStyle = "#dfa";