diff options
Diffstat (limited to 'web/nms.gathering.org/nms2/js')
-rw-r--r-- | web/nms.gathering.org/nms2/js/nms-color-util.js | 103 | ||||
-rw-r--r-- | web/nms.gathering.org/nms2/js/nms-map-handlers.js | 34 | ||||
-rw-r--r-- | web/nms.gathering.org/nms2/js/nms.js | 35 |
3 files changed, 108 insertions, 64 deletions
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; |