aboutsummaryrefslogtreecommitdiffstats
path: root/web
diff options
context:
space:
mode:
Diffstat (limited to 'web')
-rw-r--r--web/nms.gathering.org/edit.html21
-rw-r--r--web/nms.gathering.org/index.html14
-rwxr-xr-xweb/nms.gathering.org/nettkart-json.pl80
-rw-r--r--web/nms.gathering.org/ping.css13
-rw-r--r--web/nms.gathering.org/ping.html26
-rw-r--r--web/nms.gathering.org/ping.js97
-rw-r--r--web/nms.gathering.org/ping2.html21
-rwxr-xr-xweb/nms.gathering.org/showswitch.pl13
8 files changed, 222 insertions, 63 deletions
diff --git a/web/nms.gathering.org/edit.html b/web/nms.gathering.org/edit.html
new file mode 100644
index 0000000..44d6d89
--- /dev/null
+++ b/web/nms.gathering.org/edit.html
@@ -0,0 +1,21 @@
+<html>
+ <head>
+ <title>Ping? Pong!</title>
+ </head>
+ <body>
+ <link rel="stylesheet" href="/ping.css">
+ <p id="playground">
+ <svg id="lines" width="1280" height="736" style="position: absolute; top: 0; left: 0; z-index: 1">
+ </svg>
+ <img src="tg14-salkart.png" alt="" id="map" />
+ </p>
+ <script>
+ // These are used by ping.js, below.
+ var switches_url = "/switches-json.pl";
+ var ping_url = "/ping-json.pl";
+ var draw_linknets = true;
+ var can_edit = true;
+ </script>
+ <script type="text/javascript" src="ping.js"></script>
+ </body>
+</html>
diff --git a/web/nms.gathering.org/index.html b/web/nms.gathering.org/index.html
index 62dba88..7390f88 100644
--- a/web/nms.gathering.org/index.html
+++ b/web/nms.gathering.org/index.html
@@ -91,7 +91,19 @@
<br />
<li><a href="ping.html">Ping-kart</a>
- <br /><i>Pinger alle bokser hvert sekund, samt posisjonsredigering</i>
+ <br /><i>Pinger alle bokser hvert sekund</i>
+ </li>
+
+ <br />
+
+ <li><a href="ping2.html">Realtime trafikkart</a>
+ <br /><i>Som nettkartet, men oppdateres hele tiden</i>
+ </li>
+
+ <br />
+
+ <li><a href="edit.html">Rediger kartet</a>
+ <br /><i>Dra rundt på switcher. Wheeee!</i>
</li>
</ul>
</body>
diff --git a/web/nms.gathering.org/nettkart-json.pl b/web/nms.gathering.org/nettkart-json.pl
new file mode 100755
index 0000000..7ffd05b
--- /dev/null
+++ b/web/nms.gathering.org/nettkart-json.pl
@@ -0,0 +1,80 @@
+#! /usr/bin/perl
+use CGI;
+use DBI;
+use POSIX;
+use lib '../../include';
+use strict;
+use warnings;
+use nms;
+use JSON::XS;
+use Digest::MD5;
+
+my $cgi = CGI->new;
+my $secret = $cgi->param('secret');
+my $secret2 = $cgi->param('secret2');
+my $noise = $cgi->param('noise') // 0;
+my $fade_time = 0.0;
+if (defined($secret2)) {
+ my $phase = $cgi->param('phase');
+ my $period = $cgi->param('period');
+ $fade_time = sin((time - $phase) * 2.0 * 3.14159265358 / $period) * 0.5 + 0.5;
+}
+my $dbh = nms::db_connect();
+
+my %json = ();
+my $q = $dbh->prepare("select * from ( SELECT switch,sysname,sum(bytes_in) AS bytes_in,sum(bytes_out) AS bytes_out from switches natural left join get_current_datarate() where ip <> inet '127.0.0.1' group by switch,sysname) t1 natural join placements order by zorder;");
+$q->execute();
+while (my $ref = $q->fetchrow_hashref()) {
+
+ # for now:
+ # 10Mbit/switch = green
+ # 100Mbit/switch = yellow
+ # 1Gbit/switch = red
+ # 10Gbit/switch = white
+
+ my $clr;
+
+ if (defined($ref->{'bytes_in'})) {
+ my $intensity = 0.0;
+ my $traffic = 4.0 * ($ref->{'bytes_in'} + $ref->{'bytes_out'}); # average and convert to bits (should be about the same in practice)
+
+ my $max = 100_000_000_000.0; # 100Gbit
+ my $min = 10_000_000.0; # 10Mbit
+ if ($traffic >= $min) {
+ $intensity = log($traffic / $min) / log(10);
+
+ my $fudge1 = oct('0x'.substr(Digest::MD5::md5_hex($cgi->{'sysname'} . $cgi->param('secret')), 0, 8));
+ my $fudge2 = oct('0x'.substr(Digest::MD5::md5_hex($cgi->{'sysname'} . $cgi->param('secret2')), 0, 8));
+ $intensity += ($fudge1 + ($fudge2 - $fudge1) * $fade_time) * $noise;
+
+ $intensity = 4.0 if ($intensity > 4.0);
+ }
+ $clr = get_color($intensity);
+ } else {
+ $clr = [ 0, 0, 255 ];
+ }
+
+ $clr = sprintf("#%02x%02x%02x",
+ POSIX::floor($clr->[0] + 0.5),
+ POSIX::floor($clr->[1] + 0.5),
+ POSIX::floor($clr->[2] + 0.5));
+
+ $json{'switches'}{$ref->{'switch'}}{'color'} = $clr;
+}
+$dbh->disconnect;
+print CGI::header(-type=>'text/json; charset=utf-8');
+print JSON::XS::encode_json(\%json);
+
+sub get_color {
+ my $intensity = shift;
+ my $gamma = 1.0/1.90;
+ if ($intensity > 3.0) {
+ return [ 255.0 * ((4.0 - $intensity) ** $gamma), 255.0 * ((4.0 - $intensity) ** $gamma), 255.0 * ((4.0 - $intensity) ** $gamma) ];
+ } elsif ($intensity > 2.0) {
+ return [ 255.0, 255.0 * (($intensity - 2.0) ** $gamma), 255.0 * (($intensity - 2.0) ** $gamma) ];
+ } elsif ($intensity > 1.0) {
+ return [ 255.0, 255.0 * ((2.0 - $intensity) ** $gamma), 0 ];
+ } else {
+ return [ 255.0 * ($intensity ** $gamma), 255, 0 ];
+ }
+}
diff --git a/web/nms.gathering.org/ping.css b/web/nms.gathering.org/ping.css
new file mode 100644
index 0000000..1045a4a
--- /dev/null
+++ b/web/nms.gathering.org/ping.css
@@ -0,0 +1,13 @@
+.switchname {
+ position: absolute;
+ font-family: sans-serif;
+ font-size: small;
+ white-space: nowrap;
+}
+.rot {
+ -webkit-transform: rotate(-90deg);
+ -webkit-transform-origin: 0% 0%;
+ transform: rotate(-90deg);
+ transform-origin: 0% 0%;
+ bottom: -14px;
+}
diff --git a/web/nms.gathering.org/ping.html b/web/nms.gathering.org/ping.html
index 8205077..520daa8 100644
--- a/web/nms.gathering.org/ping.html
+++ b/web/nms.gathering.org/ping.html
@@ -1,25 +1,21 @@
<html>
+ <head>
+ <title>Ping? Pong!</title>
+ </head>
<body>
- <style>
-.switchname {
- position: absolute;
- font-family: sans-serif;
- font-size: small;
- white-space: nowrap;
-}
-.rot {
- -webkit-transform: rotate(-90deg);
- -webkit-transform-origin: 0% 0%;
- transform: rotate(-90deg);
- transform-origin: 0% 0%;
- bottom: -14px;
-}
-</style>
+ <link rel="stylesheet" href="/ping.css">
<p id="playground">
<svg id="lines" width="1280" height="736" style="position: absolute; top: 0; left: 0; z-index: 1">
</svg>
<img src="tg14-salkart.png" alt="" id="map" />
</p>
+ <script>
+ // These are used by ping.js, below.
+ var switches_url = "/switches-json.pl";
+ var ping_url = "/ping-json.pl";
+ var draw_linknets = true;
+ var can_edit = false;
+ </script>
<script type="text/javascript" src="ping.js"></script>
</body>
</html>
diff --git a/web/nms.gathering.org/ping.js b/web/nms.gathering.org/ping.js
index ce3d99f..75d8190 100644
--- a/web/nms.gathering.org/ping.js
+++ b/web/nms.gathering.org/ping.js
@@ -22,11 +22,11 @@ function json_request(url, func, repeat_ms) {
}
function get_switches() {
- json_request('/switches-json.pl', draw_switches, 1000);
+ json_request(switches_url, draw_switches, 1000);
}
function get_ping() {
- json_request('/ping-json.pl', update_ping, 1000);
+ json_request(ping_url, update_ping, 1000);
}
function draw_switches(json) {
@@ -53,9 +53,11 @@ function draw_switches(json) {
parseInt(s['height']));
}
- for (var i = 0; i < json['linknets'].length; ++i) {
- var linknet = json['linknets'][i];
- create_linknet(linknet['linknet'], linknet['switch1'], linknet['switch2']);
+ if (draw_linknets) {
+ for (var i = 0; i < json['linknets'].length; ++i) {
+ var linknet = json['linknets'][i];
+ create_linknet(linknet['linknet'], linknet['switch1'], linknet['switch2']);
+ }
}
setTimeout(get_switches, 60000);
@@ -114,9 +116,9 @@ function gradient_from_latency(latency_ms, latency_secondary_ms) {
if (latency_secondary_ms === undefined) {
return rgb_from_latency(latency_ms);
}
- return '-webkit-gradient(linear, left top, left bottom, ' +
- 'from(' + rgb_from_latency(latency_ms) + '), ' +
- 'to(' + rgb_from_latency(latency_secondary_ms) + '))';
+ return 'linear-gradient(' +
+ rgb_from_latency(latency_ms) + ', ' +
+ rgb_from_latency(latency_secondary_ms) + ')';
}
function rgb_from_latency(latency_ms) {
@@ -126,20 +128,31 @@ function rgb_from_latency(latency_ms) {
// 10ms is max
var l = latency_ms / 10.0;
- if (l >= 1.0) { l = 1.0; }
- l = Math.pow(l, 1.0/2.2);
- l = Math.round(l * 255.0);
-
- return 'rgb(' + l + ', 255, 0)';
+ if (l >= 2.0) {
+ return 'rgb(255, 0, 0)';
+ } else if (l >= 1.0) {
+ l = 2.0 - l;
+ l = Math.pow(l, 1.0/2.2);
+ l = Math.round(l * 255.0);
+ return 'rgb(255, ' + l + ', 0)';
+ } else {
+ l = Math.pow(l, 1.0/2.2);
+ l = Math.round(l * 255.0);
+ return 'rgb(' + l + ', 255, 0)';
+ }
}
function really_update_ping(json) {
if (json['switches']) {
for (var switchnum in switches) {
if (json['switches'][switchnum]) {
- switches[switchnum].style.background =
- gradient_from_latency(json['switches'][switchnum]['latency'],
- json['switches'][switchnum]['latency_secondary']);
+ if (json['switches'][switchnum]['color']) {
+ switches[switchnum].style.background = json['switches'][switchnum]['color'];
+ } else {
+ switches[switchnum].style.background =
+ gradient_from_latency(json['switches'][switchnum]['latency'],
+ json['switches'][switchnum]['latency_secondary']);
+ }
} else {
switches[switchnum].style.background = '#0000ff';
}
@@ -190,35 +203,37 @@ function create_switch(switchnum, sysname, x, y, zorder, width, height) {
var dragging_switch = null;
var delta_x = null, delta_y = null;
-document.onmousedown = function(e) {
- var switchnum = e.target.getAttribute("data-switchnum");
- if (switchnum === null) {
- return;
+if (can_edit) {
+ document.onmousedown = function(e) {
+ var switchnum = e.target.getAttribute("data-switchnum");
+ if (switchnum === null) {
+ return;
+ }
+ dragging_switch = switchnum;
+ delta_x = parseInt(e.target.style.left.replace("px", "")) - e.clientX;
+ delta_y = parseInt(e.target.style.top.replace("px", "")) - e.clientY;
}
- dragging_switch = switchnum;
- delta_x = parseInt(e.target.style.left.replace("px", "")) - e.clientX;
- delta_y = parseInt(e.target.style.top.replace("px", "")) - e.clientY;
-}
-document.onmousemove = function(e) {
- if (dragging_switch === null) {
- return;
+ document.onmousemove = function(e) {
+ if (dragging_switch === null) {
+ return;
+ }
+ switches[dragging_switch].style.left = (e.clientX + delta_x) + 'px';
+ switches[dragging_switch].style.top = (e.clientY + delta_y) + 'px';
}
- switches[dragging_switch].style.left = (e.clientX + delta_x) + 'px';
- switches[dragging_switch].style.top = (e.clientY + delta_y) + 'px';
-}
-document.onmouseup = function(e) {
- if (dragging_switch === null) {
- return;
- }
- var x = e.clientX + delta_x - map.getBoundingClientRect().top;
- var y = e.clientY + delta_y - map.getBoundingClientRect().left;
+ document.onmouseup = function(e) {
+ if (dragging_switch === null) {
+ return;
+ }
+ var x = e.clientX + delta_x - map.getBoundingClientRect().top;
+ var y = e.clientY + delta_y - map.getBoundingClientRect().left;
- var request = new XMLHttpRequest();
- request.open('POST', '/change-switch-pos.pl', true);
- request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
- request.send("switch=" + dragging_switch + "&x=" + x + "&y=" + y);
+ var request = new XMLHttpRequest();
+ request.open('POST', '/change-switch-pos.pl', true);
+ request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
+ request.send("switch=" + dragging_switch + "&x=" + x + "&y=" + y);
- dragging_switch = null;
+ dragging_switch = null;
+ }
}
diff --git a/web/nms.gathering.org/ping2.html b/web/nms.gathering.org/ping2.html
new file mode 100644
index 0000000..d273306
--- /dev/null
+++ b/web/nms.gathering.org/ping2.html
@@ -0,0 +1,21 @@
+<html>
+ <head>
+ <title>Ping? Pong!</title>
+ </head>
+ <body>
+ <link rel="stylesheet" href="/ping.css">
+ <p id="playground">
+ <svg id="lines" width="1280" height="736" style="position: absolute; top: 0; left: 0; z-index: 1">
+ </svg>
+ <img src="tg14-salkart.png" alt="" id="map" />
+ </p>
+ <script>
+ // These are used by ping.js, below.
+ var switches_url = "/switches-json.pl";
+ var ping_url = "/nettkart-json.pl";
+ var draw_linknets = false;
+ var can_edit = false;
+ </script>
+ <script type="text/javascript" src="ping.js"></script>
+ </body>
+</html>
diff --git a/web/nms.gathering.org/showswitch.pl b/web/nms.gathering.org/showswitch.pl
index 5ed0029..0391a57 100755
--- a/web/nms.gathering.org/showswitch.pl
+++ b/web/nms.gathering.org/showswitch.pl
@@ -7,7 +7,9 @@ use strict;
use warnings;
use lib '../../include';
use nms;
+use File::Basename;
my $cgi = CGI->new;
+my $cwd = dirname($0);
my $switch = $cgi->param('id');
my $width = $cgi->param('width');
my $height = $cgi->param('height');
@@ -17,7 +19,7 @@ my $resthtml = "";
$width = 500 unless (defined($width));
$height = 250 unless (defined($height));
-require './mygraph.pl';
+require "$cwd/mygraph.pl";
my $start = [Time::HiRes::gettimeofday];
my $dbh = nms::db_connect();
@@ -72,8 +74,8 @@ while (my $ref = $q->fetchrow_hashref()) {
plotseries($graph, \@x, \@y1, 255, 0, 0, $min_x, $max_y);
plotseries($graph, \@x, \@y2, 0, 0, 255, $min_x, $max_y);
- open GRAPH, ">img/$filename"
- or die "img/$filename: $!";
+ open GRAPH, ">$cwd/img/$filename"
+ or die "$cwd/img/$filename: $!";
print GRAPH $graph->png;
close GRAPH;
exit;
@@ -183,7 +185,7 @@ if ($pid == 0) {
plotseries($graph, \@x, \@y1, 255, 0, 0, $min_x, $max_y);
plotseries($graph, \@x, \@y2, 0, 0, 255, $min_x, $max_y);
- open GRAPH, ">img/$filename"
+ open GRAPH, ">$cwd/img/$filename"
or die "img/$filename: $!";
print GRAPH $graph->png;
close GRAPH;
@@ -201,11 +203,10 @@ plotseries($graph, \@totx, \@toty1, 255, 0, 0, $min_x, $max_ty);
plotseries($graph, \@totx, \@toty2, 0, 0, 255, $min_x, $max_ty);
$filename = "$switch-$width-$height.png";
-open GRAPH, ">img/$filename" or die "img/$filename: $!";
+open GRAPH, ">$cwd/img/$filename" or die "img/$filename: $!";
print GRAPH $graph->png;
close GRAPH;
-
# Wait for all the other graphs to be done
while (waitpid(-1, 0) != -1) {
1;
generated by cgit v1.2.3 (git 2.25.1) at 2025-07-10 03:21:48 +0000