PurpleI2P
/
i2pd-tools
mirror of https://github.com/PurpleI2P/i2pd-tools
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

add dynamic sized canvas

pull/2/head
Jeff Becker 8 years ago
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
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      websocket-ui/index.html
  2. 19
      websocket-ui/ui.js

4
websocket-ui/index.html
Unescape 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>

19
websocket-ui/ui.js
Unescape View File

@ -56,18 +56,25 @@ ws.onmessage = function(ev) {
var draw = c.getContext("2d"); var draw = c.getContext("2d");
draw.font = "10px monospace";
setInterval(function() { setInterval(function() {
draw.clearRect(0, 0, c.width, c.height); draw.canvas.width = window.innerWidth - 100;
draw.canvas.height = window.innerHeight - 100;
draw.font = "10px monospace";
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";

Write Preview
Loading…
Cancel
Save