aboutsummaryrefslogtreecommitdiffstats
path: root/web
diff options
context:
space:
mode:
Diffstat (limited to 'web')
-rw-r--r--web/nms.gathering.org/nms2/img/tg15-salkart-clean-big.pngbin0 -> 84362 bytes
-rw-r--r--web/nms.gathering.org/nms2/index.html3
-rw-r--r--web/nms.gathering.org/nms2/js/nms-color-util.js103
-rw-r--r--web/nms.gathering.org/nms2/js/nms-map-handlers.js34
-rw-r--r--web/nms.gathering.org/nms2/js/nms.js35
5 files changed, 110 insertions, 65 deletions
diff --git a/web/nms.gathering.org/nms2/img/tg15-salkart-clean-big.png b/web/nms.gathering.org/nms2/img/tg15-salkart-clean-big.png
new file mode 100644
index 0000000..8d647a3
--- /dev/null
+++ b/web/nms.gathering.org/nms2/img/tg15-salkart-clean-big.png
Binary files differ
diff --git a/web/nms.gathering.org/nms2/index.html b/web/nms.gathering.org/nms2/index.html
index 141ef5f..a6b0cd5 100644
--- a/web/nms.gathering.org/nms2/index.html
+++ b/web/nms.gathering.org/nms2/index.html
@@ -489,8 +489,9 @@
<canvas id="topCanvas" width="1920" height="1032" style="position: absolute; z-index: 50;"> </canvas>
<canvas id="inputCanvas" width="1920" height="1032" style="position: absolute; z-index: 60; cursor: pointer;" onclick="canvasClick(event)">
</canvas>
+ <canvas id="hiddenCanvas" width="1000" height="10" style="display: none; position: absolute; z-index: 1000 "></canvas>
- <div style="display:none;"><img id="source" src="img/tg15-salkart-full.png" ></div>
+ <div style="display:none;"><img id="source" src="img/tg15-salkart-clean-big.png" ></div>
</div>
</div><!--/.fluid-container-->
<script src="js/jquery.min.js" type="text/javascript"></script>
diff --git a/web/nms.gathering.org/nms2/js/nms-color-util.js b/web/nms.gathering.org/nms2/js/nms-color-util.js
index 8ac4ab8..72d6f61 100644
--- a/web/nms.gathering.org/nms2/js/nms-color-util.js
+++ b/web/nms.gathering.org/nms2/js/nms-color-util.js
@@ -17,62 +17,75 @@ var red = "#d9534f";
function gradient_from_latency(latency_ms, latency_secondary_ms)
{
- if (latency_secondary_ms === undefined) {
- return rgb_from_latency(latency_ms);
- }
- return 'linear-gradient(' +
- rgb_from_latency(latency_ms) + ', ' +
- rgb_from_latency(latency_secondary_ms) + ')';
-}
-
-function rgb_from_latency(latency_ms)
-{
- if (latency_ms === null || latency_ms === undefined) {
+ if (latency_ms == undefined)
return blue;
- }
-
- var l = latency_ms / 50.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.floor(l * 205.0);
- return 'rgb(255, ' + l + ', 0)';
- } else {
- l = Math.pow(l, 1.0/2.2);
- l = Math.floor(l * 255.0);
- return 'rgb(' + l + ', 205, 0)';
- }
+ return getColorStop(parseInt(latency_ms) * 10);
}
/*
- * Give us a color from blue (0) to red (100).
+ * Return a random-ish color (for testing)
*/
-function rgb_from_max(x)
+function getRandomColor()
{
- x = x/100;
- var colorred = 255 * x;
- var colorblue = 255 - colorred;
-
- return 'rgb(' + Math.floor(colorred) + ", 0, " + Math.floor(colorblue) + ')';
+ var colors = [ "white", red, teal, orange, green, blue ];
+ var i = Math.round(Math.random() * (colors.length-1));
+ return colors[i];
}
-function rgb_from_max2(x)
+/*
+ * Set up the hidden gradient canvas, using an array as input.
+ *
+ * This gives us a flexible way to get gradients between any number of
+ * colors (green to red, or blue to green to orange to red to white to pink
+ * to black and so on).
+ *
+ * Typically called when setting up a map handler. Currently "single
+ * tenant", since there's just one canvas.
+ *
+ * XXX: We have to store the gradients in nms.* and restore this when we
+ * resize for the moment, because this canvas is also re-sized (which isn't
+ * really necessary, but avoids special handling).
+ */
+function drawGradient(gradients)
{
- x = x/100;
- var colorred = 255 * x;
- var colorgreen = 250 - colorred;
-
- return 'rgb(' + Math.floor(colorred) + "," + Math.floor(colorgreen) + ', 0 )';
+ var gradient = dr.hidden.ctx.createLinearGradient(0,0,1000,0);
+ var stops = gradients.length - 1;
+ nms.gradients = gradients;
+ for (var color in gradients) {
+ var i = color / stops;
+ gradient.addColorStop(i, gradients[color]);
+ }
+ dr.hidden.ctx.beginPath();
+ dr.hidden.ctx.strokeStyle = gradient;
+ dr.hidden.ctx.moveTo(0,0);
+ dr.hidden.ctx.lineTo(1000,0);
+ dr.hidden.ctx.lineWidth = 10;
+ dr.hidden.ctx.closePath();
+ dr.hidden.ctx.stroke();
+ dr.hidden.ctx.moveTo(0,0);
}
+
/*
- * Return a random-ish color (for testing)
+ * Get the color of a gradient, range is from 0 to 999 (inclusive).
*/
-function getRandomColor()
-{
- var colors = [ "white", red, teal, orange, green, blue ];
- var i = Math.round(Math.random() * (colors.length-1));
- return colors[i];
+function getColorStop(x) {
+ x = parseInt(x);
+ if (x > 999)
+ x = 999;
+ if (x < 0)
+ x = 0;
+ return getColor(x,0);
}
+/*
+ * Get the color on the hidden canvas at a specific point. Could easily be
+ * made generic.
+ */
+function getColor(x,y) {
+ var imageData = dr.hidden.ctx.getImageData(x, y, 1, 1);
+ var data = imageData.data;
+ if (data.length < 4)
+ return false;
+ var ret = 'rgb(' + data[0] + ',' + data[1] + ',' + data[2] + ')';
+ return ret;
+}
diff --git a/web/nms.gathering.org/nms2/js/nms-map-handlers.js b/web/nms.gathering.org/nms2/js/nms-map-handlers.js
index f85b06f..5966692 100644
--- a/web/nms.gathering.org/nms2/js/nms-map-handlers.js
+++ b/web/nms.gathering.org/nms2/js/nms-map-handlers.js
@@ -110,9 +110,10 @@ function uplinkInit()
function trafficInit()
{
var m = 1024 * 1024 / 8;
+ drawGradient([lightgreen,green,orange,red]);
setLegend(1,colorFromSpeed(0),"0 (N/A)");
setLegend(5,colorFromSpeed(2000 * m) , "2000Mb/s");
- setLegend(4,colorFromSpeed(1200 * m),"1200Mb/s");
+ setLegend(4,colorFromSpeed(1500 * m),"1500Mb/s");
setLegend(3,colorFromSpeed(500 * m),"500Mb/s");
setLegend(2,colorFromSpeed(10 * m),"10Mb/s");
}
@@ -149,7 +150,8 @@ function colorFromSpeed(speed)
if (speed == 0)
return blue;
speed = speed < 0 ? 0 : speed;
- return rgb_from_max2( 100 * (speed / (2 * (1000 * m))));
+ return getColorStop( 1000 * (speed / (2 * (1000 * m))));
+// return rgb_from_max2( 100 * (speed / (2 * (1000 * m))));
}
@@ -164,9 +166,9 @@ function temp_color(t)
console.log("Temp_color, but temp is undefined");
return blue;
}
- t = parseInt(t) - 20;
- t = Math.floor((t / 15) * 100);
- return rgb_from_max(t);
+ t = parseInt(t) - 12;
+ t = Math.floor((t / 23) * 1000);
+ return getColorStop(t);
}
function tempUpdater()
@@ -183,15 +185,20 @@ function tempUpdater()
function tempInit()
{
- setLegend(1,temp_color(20),"20 °C");
- setLegend(2,temp_color(22),"22 °C");
- setLegend(3,temp_color(27),"27 °C");
- setLegend(4,temp_color(31),"31 °C");
+ drawGradient(["black",blue,lightblue,lightgreen,green,orange,red]);
+ setLegend(1,temp_color(15),"15 °C");
+ setLegend(2,temp_color(20),"20 °C");
+ setLegend(3,temp_color(25),"25 °C");
+ setLegend(4,temp_color(30),"30 °C");
setLegend(5,temp_color(35),"35 °C");
}
function pingUpdater()
{
+ if (!nms.ping_data || !nms.ping_data["switches"]) {
+ resetColors();
+ return;
+ }
for (var sw in nms.switches_now["switches"]) {
var c = blue;
if (nms.ping_data['switches'] && nms.ping_data['switches'][sw])
@@ -211,11 +218,12 @@ function pingUpdater()
function pingInit()
{
+ drawGradient([green,lightgreen,orange,red]);
setLegend(1,gradient_from_latency(1),"1ms");
setLegend(2,gradient_from_latency(30),"30ms");
setLegend(3,gradient_from_latency(60),"60ms");
setLegend(4,gradient_from_latency(100),"100ms");
- setLegend(5,blue ,"No response");
+ setLegend(5,gradient_from_latency(undefined) ,"No response");
}
function commentUpdater()
@@ -258,9 +266,9 @@ function commentUpdater()
function commentInit()
{
setLegend(1,"white","0 comments");
- setLegend(2,blue,"Persistent comments");
- setLegend(3,red, "New comments");
- setLegend(4,orange,"Active comments");
+ setLegend(2,blue,"Persistent");
+ setLegend(3,red, "New");
+ setLegend(4,orange,"Active");
setLegend(5,green ,"Old/inactive only");
}
/*
diff --git a/web/nms.gathering.org/nms2/js/nms.js b/web/nms.gathering.org/nms2/js/nms.js
index 9bd5bcf..5f03dfa 100644
--- a/web/nms.gathering.org/nms2/js/nms.js
+++ b/web/nms.gathering.org/nms2/js/nms.js
@@ -179,7 +179,7 @@ var margin = {
var tgStart = stringToEpoch('2015-04-01T09:00:00');
var tgEnd = stringToEpoch('2015-04-05T12:00:00');
var replayTime = 0;
-var replayIncrement = 30 * 60;
+var replayIncrement = 60 * 60;
/*
* Convenience-function to populate the 'dr' structure.
@@ -208,6 +208,9 @@ function initDrawing() {
dr['input'] = {};
dr['input']['c'] = document.getElementById("inputCanvas");
dr['input']['ctx'] = dr['top']['c'].getContext('2d');
+ dr['hidden'] = {};
+ dr['hidden']['c'] = document.getElementById("hiddenCanvas");
+ dr['hidden']['ctx'] = dr['hidden']['c'].getContext('2d');
}
/*
@@ -311,6 +314,8 @@ function timeReplay()
}
replayTime = parseInt(replayTime) + parseInt(replayIncrement);
nms.now = epochToString(replayTime);
+ updatePorts();
+ updatePing();
}
/*
@@ -331,6 +336,8 @@ function startReplay() {
nms.now = epochToString(tgStart);
timeReplay();
nms.timers.replay.start();;
+ nms.timers.ping.stop();;
+ nms.timers.ports.stop();;
}
/*
@@ -346,7 +353,12 @@ function changeNow() {
newnow = false;
nms.now = newnow;
+ if (newnow) {
+ nms.timers.ping.stop();;
+ nms.timers.ports.stop();;
+ }
updatePorts();
+ updatePing();
var boxHide = document.getElementById("nowPickerBox");
if (boxHide) {
boxHide.style.display = "none";
@@ -357,6 +369,8 @@ function stepTime(n)
{
var now;
nms.timers.replay.stop();
+ nms.timers.ping.stop();;
+ nms.timers.ports.stop();;
if (nms.now && nms.now != 0)
now = parseInt(stringToEpoch(nms.now));
else if (nms.switches_now)
@@ -366,6 +380,7 @@ function stepTime(n)
newtime = parseInt(now) + parseInt(n);
nms.now = epochToString(parseInt(newtime));
updatePorts();
+ updatePing();
}
/*
@@ -600,7 +615,11 @@ function updateMap()
{
if (!newerSwitches())
return;
- if (!(nms.update_time < (Date.now() - 100) || nms.update_time == 0))
+ if (!nms.drawn)
+ setScale();
+ if (!nms.drawn)
+ return;
+ if (!nms.ping_data)
return;
nms.update_time = Date.now();
@@ -634,6 +653,7 @@ function setUpdater(fo)
*/
function initialUpdate()
{
+ return;
if (nms.ping_data && nms.switches_then && nms.switches_now && nms.updater != undefined && nms.did_update == false ) {
resizeEvent();
if (!nms.drawn) {
@@ -1059,7 +1079,6 @@ function drawScene()
*/
function setScale()
{
-
canvas.height = orig.height * canvas.scale ;
canvas.width = orig.width * canvas.scale ;
for (var a in dr) {
@@ -1068,6 +1087,7 @@ function setScale()
}
nms.nightBlur = {};
nms.textDrawn = {};
+ drawGradient(nms.gradients);
drawBG();
drawScene();
drawNow();
@@ -1353,8 +1373,6 @@ function connectSwitches(insw1, insw2,color1, color2) {
*/
function initNMS() {
initDrawing();
- updatePorts();
- updatePing();
window.addEventListener('resize',resizeEvent,true);
document.addEventListener('load',resizeEvent,true);
@@ -1364,8 +1382,10 @@ function initNMS() {
nms.timers.ping = new nmsTimer(updatePing, 1000, "Ping updater", "AJAX request to update ping data");
nms.timers.ping.start();
- nms.timers.replay = new nmsTimer(timeReplay, 1000, "Time machine", "Handler used to change time");
+ nms.timers.replay = new nmsTimer(timeReplay, 500, "Time machine", "Handler used to change time");
detectHandler();
+ updatePorts();
+ updatePing();
setupKeyhandler();
restoreSettings();
}
@@ -1532,7 +1552,10 @@ function moveTimeFromKey(e,key)
case 'r':
nms.timers.replay.stop();
nms.now = false;
+ nms.timers.ping.start();;
+ nms.timers.ports.start();;
updatePorts();
+ updatePing();
break;
}
return true;
generated by cgit v1.2.3 (git 2.25.1) at 2025-10-31 08:37:18 +0000